/* ============================================================
   BlockVault — design system
   Dense, quiet, built to be stared at for an hour while packing boxes.
   ============================================================ */

:root {
  --bg:        #f7f7f8;
  --surface:   #ffffff;
  --surface-2: #f1f1f3;
  --border:    #e3e3e7;
  --border-2:  #d3d3d9;
  --text:      #17171a;
  --text-2:    #5f5f6b;
  --text-3:    #90909e;

  --accent:    #4f46e5;
  --accent-fg: #ffffff;
  --accent-sub:#eef0fe;

  --good:      #0f8a4a;
  --good-sub:  #e6f5ec;
  --warn:      #b45309;
  --warn-sub:  #fdf3e3;
  --bad:       #c02626;
  --bad-sub:   #fcebeb;
  --info:      #0369a1;
  --info-sub:  #e5f2fa;

  --radius:    9px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgba(16,16,24,.05), 0 4px 14px rgba(16,16,24,.05);
  --shadow-lg: 0 8px 40px rgba(16,16,24,.16);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0d0d10;
    --surface:   #16161a;
    --surface-2: #1f1f25;
    --border:    #26262e;
    --border-2:  #34343e;
    --text:      #ededf2;
    --text-2:    #a0a0ad;
    --text-3:    #6f6f7c;

    --accent:    #7c74ff;
    --accent-fg: #0d0d10;
    --accent-sub:#211f3d;

    --good:      #3ecf8e;  --good-sub: #14301f;
    --warn:      #e0a24a;  --warn-sub: #2f2410;
    --bad:       #f47272;  --bad-sub:  #331616;
    --info:      #56b6f0;  --info-sub: #10283a;

    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.55);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- boot ---------- */
.boot { display:flex; flex-direction:column; align-items:center; justify-content:center;
        height:100vh; gap:12px; color:var(--text-3); }
.boot-mark { font-size:40px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }

/* ---------- app frame ---------- */
.app { display: grid; grid-template-columns: 208px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand { padding: 16px 16px 12px; display:flex; align-items:center; gap:9px;
         border-bottom:1px solid var(--border); }
.brand-mark { font-size: 19px; }
.brand-name { font-weight: 650; font-size: 14px; letter-spacing:-.015em; }
.brand-sub { font-size: 11px; color: var(--text-3); margin-top:-2px; }

.nav { padding: 8px; display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y:auto; }
.nav-item {
  display:flex; align-items:center; gap:9px;
  padding: 7px 9px; border-radius: var(--radius-sm);
  color: var(--text-2); cursor: pointer; user-select:none;
  font-size: 13px; font-weight: 500; border: none; background: none;
  width: 100%; text-align: left; font-family: inherit;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-sub); color: var(--accent); font-weight: 600; }
.nav-icon { width: 16px; text-align:center; font-size: 13px; }
.nav-count { margin-left:auto; font-size:11px; color:var(--text-3);
             background:var(--surface-2); padding:1px 6px; border-radius:20px; }
.nav-item.active .nav-count { background: var(--surface); color: var(--accent); }

/* Desktop shows the full nav label; the short one is mobile-only.
   Declared here, above the media query, so the mobile override wins. */
.nav-label-short { display: none; }

.nav-section { font-size:10px; text-transform:uppercase; letter-spacing:.07em;
               color:var(--text-3); padding: 14px 10px 5px; font-weight:600; }

.whoami { border-top:1px solid var(--border); padding:10px 12px;
          display:flex; align-items:center; gap:8px; }
.avatar { width:24px; height:24px; border-radius:50%; flex:none;
          display:flex; align-items:center; justify-content:center;
          color:#fff; font-size:11px; font-weight:650; }
.whoami-name { font-size:12px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.whoami-mail { font-size:10.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.main { min-width: 0; display:flex; flex-direction:column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 13px 22px; display:flex; align-items:center; gap:12px;
}
.topbar-title { flex:1; min-width:0; }
.topbar-sub { font-size:12px; color:var(--text-3); font-weight:400; margin-top:1px; }
.content { padding: 20px 22px 60px; flex:1; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--surface);
  color: var(--text); font-size: 13px; font-weight: 550; font-family: inherit;
  cursor: pointer; white-space: nowrap; line-height:1.4;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); }
.btn-danger:hover { background: var(--bad-sub); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: 3px 8px; font-size: 12px; }
.btn-icon { padding: 5px 7px; }

/* ---------- cards & stats ---------- */
.card { background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 16px; }
.card-head { padding: 13px 16px; border-bottom: 1px solid var(--border);
             display:flex; align-items:center; gap:10px; }
.card-head h2 { flex:1; }

.stat-grid { display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
.stat { background: var(--surface); border:1px solid var(--border);
        border-radius: var(--radius); padding: 13px 15px; }
.stat-label { font-size:11px; color:var(--text-3); text-transform:uppercase;
              letter-spacing:.05em; font-weight:600; }
.stat-value { font-size:22px; font-weight:640; letter-spacing:-.02em; margin-top:3px;
              font-variant-numeric: tabular-nums; }
.stat-note { font-size:11.5px; color:var(--text-3); margin-top:2px; }
.stat-value.pos { color: var(--good); }
.stat-value.neg { color: var(--bad); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table.tbl { width:100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align:left; font-size:11px; font-weight:600; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.045em;
  padding: 8px 11px; border-bottom:1px solid var(--border);
  background: var(--surface-2); white-space:nowrap; position:sticky; top:0; z-index:1;
}
.tbl td { padding: 8px 11px; border-bottom:1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size:12.5px; }
.pos { color: var(--good); }
.neg { color: var(--bad); }
.muted { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.w-full { width: 100%; }

/* ---------- badges ---------- */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding: 1.5px 7px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2);
}
.badge-good { background: var(--good-sub); color: var(--good); }
.badge-warn { background: var(--warn-sub); color: var(--warn); }
.badge-bad  { background: var(--bad-sub);  color: var(--bad); }
.badge-info { background: var(--info-sub); color: var(--info); }
.badge-accent { background: var(--accent-sub); color: var(--accent); }

/* ---------- forms ---------- */
.field { display:flex; flex-direction:column; gap:4px; }
.field label { font-size:11.5px; font-weight:600; color:var(--text-2); }
.field .hint { font-size:11px; color:var(--text-3); }
input, select, textarea {
  font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); padding: 6px 9px; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: -1px; border-color: var(--accent);
}
textarea { resize: vertical; min-height: 62px; line-height:1.5; }
input[type=number] { font-family: var(--mono); }
.form-grid { display:grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
.form-row { display:flex; gap:10px; align-items:flex-end; flex-wrap: wrap; }

/* ---------- modal ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,10,14,.45); backdrop-filter: blur(2px);
  display:flex; align-items:flex-start; justify-content:center;
  padding: 6vh 16px 16px; overflow-y:auto;
}
.modal {
  background: var(--surface); border:1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 620px; animation: rise .13s ease-out;
}
.modal-lg { max-width: 860px; }
@keyframes rise { from { opacity:0; transform: translateY(8px) } }
.modal-head { padding: 15px 18px; border-bottom:1px solid var(--border);
              display:flex; align-items:center; gap:10px; }
.modal-head h2 { flex: 1; }
.modal-body { padding: 18px; display:flex; flex-direction:column; gap:14px; }
.modal-foot { padding: 13px 18px; border-top:1px solid var(--border);
              display:flex; gap:8px; justify-content:flex-end; align-items:center; }

/* ---------- feed ---------- */
.feed { display:flex; flex-direction:column; }
.feed-item { display:flex; gap:10px; padding: 10px 16px; border-bottom:1px solid var(--border); }
.feed-item:last-child { border-bottom:none; }
.feed-body { flex:1; min-width:0; }
.feed-text { font-size:13px; }
.feed-time { font-size:11px; color:var(--text-3); margin-top:1px; }

/* ---------- comments ---------- */
.comment { display:flex; gap:9px; padding: 9px 0; border-bottom:1px solid var(--border); }
.comment:last-of-type { border-bottom:none; }
.comment-head { display:flex; gap:7px; align-items:baseline; }
.comment-author { font-size:12.5px; font-weight:600; }
.comment-time { font-size:11px; color:var(--text-3); }
.comment-body { font-size:13px; white-space:pre-wrap; word-break:break-word; margin-top:1px; }

/* ---------- misc ---------- */
.row { display:flex; align-items:center; gap:10px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stack { display:flex; flex-direction:column; gap:12px; }
.stack-sm { display:flex; flex-direction:column; gap:7px; }
.spacer { flex: 1; }
.empty { padding: 44px 20px; text-align:center; color:var(--text-3); }
.empty-mark { font-size: 30px; opacity:.5; margin-bottom:8px; }
.chip-row { display:flex; gap:6px; flex-wrap:wrap; }
.chip {
  padding: 3.5px 10px; border-radius:20px; font-size:12px; font-weight:550;
  border:1px solid var(--border-2); background:var(--surface);
  cursor:pointer; color:var(--text-2); font-family:inherit;
}
.chip:hover { background: var(--surface-2); }
.chip.on { background: var(--accent); border-color:var(--accent); color: var(--accent-fg); }
.progress { height:5px; background:var(--surface-2); border-radius:20px; overflow:hidden; min-width:52px; }
.progress-bar { height:100%; background:var(--accent); border-radius:20px; }
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 9px 16px;
  border-radius: 20px; font-size:13px; font-weight:550; z-index: 300;
  box-shadow: var(--shadow-lg); animation: rise .15s ease-out;
}
.link-btn { background:none; border:none; padding:0; color:var(--accent);
            cursor:pointer; font:inherit; font-size:inherit; }
.link-btn:hover { text-decoration: underline; }

/* ---------- auth ---------- */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card { width:100%; max-width: 380px; }
.auth-mark { font-size:34px; text-align:center; }
.auth-title { text-align:center; margin-top:6px; }
.auth-sub { text-align:center; color:var(--text-3); font-size:12.5px; margin-top:3px; }
.banner { padding:10px 13px; border-radius:var(--radius-sm); font-size:12.5px; }
.banner-bad  { background:var(--bad-sub);  color:var(--bad); }
.banner-good { background:var(--good-sub); color:var(--good); }
.banner-warn { background:var(--warn-sub); color:var(--warn); }
.banner-info { background:var(--info-sub); color:var(--info); }

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }

  /* Bottom tab bar. Eight destinations have to fit 375px without scrolling:
     a primary nav you have to swipe is a nav whose last items never get used. */
  .sidebar {
    position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; z-index: 50;
    flex-direction: row; border-right: none; border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .brand, .whoami, .nav-section, .nav-count { display: none; }
  .nav { flex-direction: row; padding: 4px 2px; gap: 0; overflow: visible; }
  .nav-item {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: 1px;
    font-size: 8.5px; padding: 5px 0; justify-content: center; text-align: center;
    letter-spacing: -0.01em;
  }
  .nav-item > span:not(.nav-icon) { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav-icon { font-size: 14px; }
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }

  .content { padding: 13px 12px calc(84px + env(safe-area-inset-bottom)); }
  /* Standalone (home-screen) has no browser chrome, so the header would sit
     under the status bar without this. In a normal tab the inset is 0. */
  .topbar { padding: calc(11px + env(safe-area-inset-top)) 13px 11px; }
  .auth-wrap { padding-top: calc(20px + env(safe-area-inset-top)); }
  .topbar-sub { font-size: 11.5px; }
  .stat-value { font-size: 19px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Toolbars stack instead of squeezing */
  .row { flex-wrap: wrap; }
  .card-head { flex-wrap: wrap; }
  .card-head h2 { flex: 1 1 auto; min-width: 0; }

  /* Modals go near-fullscreen; a 6vh inset wastes phone height */
  .overlay { padding: 0; align-items: stretch; }
  .modal, .modal-lg { max-width: 100%; border-radius: 0; min-height: 100%; }
  .modal-body { padding: 14px; }
  .modal-head, .modal-foot { padding: 12px 14px; position: sticky; background: var(--surface); z-index: 2; }
  .modal-head { top: 0; }
  .modal-foot { bottom: 0; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* iOS zooms the page when a focused input is under 16px. */
  input, select, textarea { font-size: 16px; }

  /* Filter toolbars: search goes full width rather than floating right,
     and the spacer stops doing anything useful once things wrap. */
  .toolbar .spacer { display: none; }
  .toolbar > input { flex: 1 1 100%; width: 100%; }
  .toolbar > select { flex: 1 1 auto; }
  .toolbar > .btn { flex: 0 0 auto; }
  .chip-row { width: 100%; }

  /* ---- tables become cards ----
     Horizontal scroll hides exactly the columns that matter (on hand, cost,
     margin), so on a phone each row is stacked into a labelled card instead.
     Driven by data-label on each cell, so there is still only one render path. */
  .tbl-cards thead { display: none; }
  .tbl-cards, .tbl-cards tbody, .tbl-cards tr, .tbl-cards td { display: block; width: 100%; }
  .tbl-cards tr {
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 8px; padding: 11px 13px; background: var(--surface);
    display: flex; flex-direction: column;   /* so the title can be pulled to the top */
  }
  .tbl-cards tbody tr:hover { background: var(--surface); }
  .tbl-cards td {
    border: none; padding: 3px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    text-align: right;
  }
  .tbl-cards td::before {
    content: attr(data-label);
    color: var(--text-3); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    text-align: left; flex: none;
  }
  /* The lead cell is the card's title: no label, full width, left aligned */
  /* The title cell leads the card regardless of its column position, so the
     desktop column order (date first, for scanning) doesn't dictate the phone
     layout (name first, because that's what you're looking for). */
  .tbl-cards td[data-lead] { display: block; text-align: left; margin-bottom: 6px; order: -1; }
  .tbl-cards td[data-lead]::before { display: none; }
  .tbl-cards td[data-hide] { display: none; }
  .tbl-cards .num { font-size: 13px; }
  /* An input inside a card cell shouldn't stretch the full row width. */
  .tbl-cards td > input { width: 110px; margin-left: auto; }
  .table-wrap:has(.tbl-cards) { overflow-x: visible; }
  /* A capped, inner-scrolling list inside an already-fullscreen modal makes
     two nested scrollbars. Let the modal body do the scrolling instead. */
  .modal .table-wrap { max-height: none !important; }
}

@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Ask — in-app assistant
   ============================================================ */
.ask { display: flex; flex-direction: column; height: calc(100vh - 150px); }
.ask-compact { height: 420px; }

.ask-log { flex: 1; overflow-y: auto; padding: 2px 2px 12px; display: flex;
           flex-direction: column; gap: 14px; }

.ask-intro { padding: 22px 4px; }
.ask-intro-title { font-size: 15px; font-weight: 620; }
.ask-intro-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; max-width: 62ch; }
.ask-starters { display: flex; flex-direction: column; gap: 6px; margin-top: 14px;
                align-items: flex-start; }
.ask-starter {
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-2);
  color: var(--text-2); padding: 6px 11px; border-radius: 20px;
}
.ask-starter:hover { background: var(--surface-2); color: var(--text); }

.ask-turn { display: flex; gap: 9px; align-items: flex-start; }
.ask-user { justify-content: flex-start; }
.ask-mark { font-size: 15px; line-height: 1.5; flex: none; width: 22px; text-align: center; }
.ask-bubble {
  background: var(--accent-sub); color: var(--text);
  padding: 7px 12px; border-radius: 12px; font-size: 13px;
  max-width: 74ch; white-space: pre-wrap;
}
.ask-answer { font-size: 13.5px; line-height: 1.65; max-width: 74ch; min-width: 0; }
.ask-answer p { margin: 0 0 9px; }
.ask-answer p:last-child { margin-bottom: 0; }
.ask-answer ul { margin: 0 0 9px; padding-left: 20px; }
.ask-answer li { margin-bottom: 3px; }
.ask-answer code {
  font-family: var(--mono); font-size: 12px;
  background: var(--surface-2); padding: 1px 5px; border-radius: 4px;
}
.ask-thinking { font-size: 13px; color: var(--text-3); animation: pulse 1.5s ease-in-out infinite; }

.ask-composer { border-top: 1px solid var(--border); padding-top: 10px;
                display: flex; flex-direction: column; gap: 7px; }
.ask-modes { display: flex; gap: 6px; }
.ask-input-row { display: flex; gap: 8px; align-items: flex-end; }
.ask-input-row textarea { min-height: 38px; max-height: 160px; resize: none; }

/* Floating bubble, on every page */
.ask-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
  border: none; cursor: pointer; font-size: 19px;
  box-shadow: var(--shadow-lg);
}
.ask-fab:hover { filter: brightness(1.08); }
.ask-pop {
  position: fixed; right: 18px; bottom: 76px; z-index: 60;
  width: min(410px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: rise .13s ease-out;
}
.ask-pop-head { display: flex; align-items: center; gap: 8px;
                padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ask-pop .ask { padding: 0 12px 12px; }

@media (max-width: 820px) {
  .desktop-only { display: none !important; }
  /* The composer must clear the tab bar, which grows by the home-indicator
     inset on a home-screen install. A fixed pixel subtraction hides the input
     behind the nav there. dvh also copes with Safari's collapsing toolbar. */
  .ask { height: calc(100vh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .ask { height: calc(100dvh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  /* The bubble sits ABOVE the tab bar, which grows by the home-indicator
     inset on a home-screen install. The original bug was a flat 74px here:
     the nav is ~49px plus that inset, so the button rendered behind it. */
  .ask-fab {
    width: 44px; height: 44px; font-size: 18px;
    right: 13px; bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .ask-pop {
    left: 8px; right: 8px; width: auto;
    bottom: calc(118px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .ask-pop .ask, .ask-compact {
    height: auto;
    max-height: calc(100dvh - 250px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 240px;
  }
  .ask-compact { height: 54vh; }
}

.ask-mode-hint { font-size: 12px; color: var(--text-2); margin-top: 12px; }
.ask-mode-hint b { color: var(--accent); }