/* THE WORDMARK FONT, SELF-HOSTED.
   Not a fonts.googleapis.com link: that is a third-party request on every
   load, it can be blocked, and it makes the brand depend on someone else's
   CDN. Oxanium is a VARIABLE font - one 14KB latin-subset file covers the
   whole 600-700 range, which is why there is one file and not two.
   `swap` means the wordmark paints immediately in the fallback and reflows;
   the brand is never invisible while a font downloads. */
@font-face {
  font-family: 'Oxanium';
  src: url('/assets/fonts/oxanium.woff2') format('woff2');
  /* 200-800, MEASURED (probe/_fontaxis.mjs): the rendered width of one string
     grows continuously from 200 to 800 and stops changing outside that range,
     so the file's weight axis really covers it. It was declared `600 700`,
     which let the browser synthesise or snap every other weight - the reason
     this font was only ever used on the wordmark. The same probe showed the
     digits are TABULAR (111111111 and 000000000 render to the same width),
     which is what makes it usable for a price column at all. */
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* BidTorq design system */

:root {
  --bg: #0a0c11;
  --bg-2: #0e1118;
  --surface: #12161f;
  --surface-2: #171c27;
  --surface-3: #1d2331;
  --border: #232a3a;
  --border-strong: #303849;
  --text: #e7eaf2;
  --text-2: #aeb6c8;
  --muted: #79829a;
  --faint: #545d72;

  --accent: #4d7cfe;
  --accent-soft: rgba(77, 124, 254, 0.14);
  --accent-line: rgba(77, 124, 254, 0.4);
  --good: #24c98a;
  --good-soft: rgba(36, 201, 138, 0.13);
  --warn: #f0a52b;
  --warn-soft: rgba(240, 165, 43, 0.14);
  --bad: #f2564d;
  --bad-soft: rgba(242, 86, 77, 0.14);
  /* Intel blue #0068B5 mixed 50/50 with Mars blue #0000A0. The mark is
     recoloured to this exact value, so the wordmark and the mascot are one
     colour rather than two that nearly match. */
  --brand: #0034AA;
  /* THE RED FOR TEXT, WHICH IS NOT ALWAYS THE RED FOR A PRICE. On the light
     themes `--bad` over the banner's own tint measured 3.89 to 4.39:1 - under
     AA - while the same value is right on a falling price. The three that
     needed a deeper one declare `--bad-ink` in themes.css; everything else
     falls back through `var(--bad-ink, var(--bad))` AT THE ELEMENT.
     DO NOT DECLARE A DEFAULT HERE. `--bad-ink: var(--bad)` at :root
     substitutes :root's `--bad`, which is the base red below - the themes set
     theirs on `body`, further down - so a "default" here silently overrides
     every theme. Measured when it did: ten themes painted #f2564d and solar
     fell from 5.12:1 to 2.67:1. */
  --violet: #a071f7;
  --violet-soft: rgba(160, 113, 247, 0.14);

  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.36);
  /* ONE TYPEFACE, EVERYWHERE. Oxanium was the wordmark's font and nothing
     else; the interface under it was the system UI stack, so the brand ended
     at the logo. Both variables now lead with it and keep their old stacks as
     the fallback, so a blocked or missing font file degrades to exactly what
     shipped before. `--mono` is a misnomer kept for its 200-odd call sites:
     it means "the face for numbers", and Oxanium's digits are tabular. Code
     and JSON get `--code`, which is a real monospace - a variable-width face
     makes a stack trace unreadable however good it looks. */
  --mono: 'Oxanium', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: 'Oxanium', -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --topbar: 56px;
}

* { box-sizing: border-box; }

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--bg); }
/* the resting thumb is `--border-strong`; a fixed slate hover turned a
   light theme's scrollbar dark under the pointer */
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* ------------------------------------------------------------------ login */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(77,124,254,.20), transparent 60%),
    radial-gradient(900px 500px at 92% 108%, rgba(160,113,247,.16), transparent 62%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 940px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.login-pitch { padding: 40px; border-right: 1px solid var(--border); background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.login-form { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.login-pitch h1 { font-size: 26px; margin: 20px 0 10px; letter-spacing: -.02em; }
.login-pitch p { color: var(--text-2); margin: 0 0 22px; font-size: 14px; }
.login-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.login-points li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 13px; }
.login-points b { color: var(--text); font-weight: 600; display: block; }
.login-form h2 { margin: 0 0 4px; font-size: 19px; }
.login-form .sub { color: var(--muted); font-size: 13px; margin-bottom: 24px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }

input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 80px; line-height: 1.55; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  transition: background .12s, border-color .12s, opacity .12s;
  white-space: nowrap;
}
/* `body.term` overrides these inside the console, but the GATE is not
   `body.term` - so a fixed dark slate hover painted on the first screen a
   visitor ever sees. */
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-line); border-color: var(--accent-line); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn-danger { color: var(--bad-ink, var(--bad)); border-color: rgba(242,86,77,.35); }
.btn-danger:hover:not(:disabled) { background: var(--bad-soft); }

.login-hint {
  margin-top: 18px; padding: 10px 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-2);
}
.login-hint code { color: var(--text); font-family: var(--code); }

.error-note {
  margin-top: 12px; padding: 9px 11px;
  background: var(--bad-soft); border: 1px solid var(--bad);
  border-radius: var(--radius-sm); color: var(--bad-ink, var(--bad)); font-size: 13px;
}

/* ------------------------------------------------------------------ brand */

.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: -.02em; }
/* THE LOCKUP: mascot on a white tile, wordmark beside it.
   The tile is why there is ONE artwork instead of two. A bare brand-blue
   mascot measures 1.6:1 on the nine dark themes, so it needed a lightened
   copy and a per-theme swap; on its own white field the contrast travels
   with the mark and it is identical everywhere. The wordmark still takes the
   theme's brand ink - the NAME adapts, the MARK does not. */
.brand { color: var(--brand-ink, var(--brand, #0034AA)); }
.brand-mark {
  flex: none; display: inline-grid; place-items: center;
  background: #fff; border-radius: 24%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.brand-mark img { width: 82%; height: 82%; object-fit: contain; display: block; }
/* THE WORDMARK. Lowercase by TRANSFORM, not by retyping: the markup still
   says "equyx", so a screen reader announces the brand properly and a
   copy-paste gives the capitalised name - only the eye sees the lowercase
   lockup. `--brand` is Intel blue #0068B5 mixed 50/50 with Mars blue
   #0000A0. */
.brand-name {
  font-family: var(--sans);
  font-size: 16.5px; font-weight: 700; letter-spacing: .01em;
  text-transform: lowercase; color: var(--brand-ink, var(--brand, #0034AA));
}
.brand-name span { color: var(--muted); font-weight: 500; }

/* ------------------------------------------------------------------ shell */

.app { display: none; height: 100vh; grid-template-rows: var(--topbar) 1fr; }
.app.on { display: grid; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}

.nav { display: flex; gap: 2px; margin-left: 10px; }
.nav button {
  background: none; border: none; padding: 6px 11px; border-radius: var(--radius-sm);
  color: var(--muted); cursor: pointer; font-weight: 500; font-size: 13.5px;
}
.nav button:hover { color: var(--text); background: var(--surface-2); }
.nav button.on { color: var(--text); background: var(--surface-3); }
.nav button .pill {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 20px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; vertical-align: 1px;
}

.spacer { flex: 1; }

.plan-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--violet-soft); border: 1px solid rgba(160,113,247,.34); color: #cbb0ff;
  cursor: pointer;
}
.plan-chip.free { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-2); }

.who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  /* a dark slate disc on a white page: the surfaces either side of it are
     themed, so this is too */
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--border-strong);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--text);
}

/* ------------------------------------------------------------------ views */

.view { display: none; overflow: hidden; min-height: 0; }
.view.on { display: block; }
.view.split { display: none; grid-template-columns: 264px 1fr; }
.view.split.on { display: grid; }

.scroll { overflow-y: auto; height: 100%; }
.pad { padding: 20px 24px 60px; }
.pad-narrow { padding: 24px; max-width: 980px; margin: 0 auto 60px; }

/* --------------------------------------------------------------- sidebar */

.side { border-right: 1px solid var(--border); background: var(--bg-2); overflow-y: auto; }
.side-inner { padding: 14px 14px 40px; }

.facet { margin-bottom: 18px; }
.facet h4 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--faint); font-weight: 700;
}
.facet-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 5px; cursor: pointer; font-size: 13px; color: var(--text-2);
}
.facet-item:hover { background: var(--surface-2); color: var(--text); }
.facet-item.on { background: var(--accent-soft); color: var(--text); }
.facet-item input { margin: 0; accent-color: var(--accent); flex: none; }
.facet-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-count { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.facet-more { font-size: 12px; color: var(--accent); cursor: pointer; padding: 4px 6px; display: inline-block; }

/* ---------------------------------------------------------------- search */

.searchbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--bg-2);
}
.search-input { position: relative; flex: 1; }
.search-input input { padding-left: 34px; height: 36px; }
.search-input .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 24px 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 20px; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-2);
}
.chip b { color: var(--text); font-weight: 600; }
.chip .x { cursor: pointer; color: var(--faint); font-weight: 700; }
.chip .x:hover { color: var(--bad-ink, var(--bad)); }

.results-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px 10px; color: var(--muted); font-size: 13px;
}
.results-head b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- cards */

.cards { display: grid; gap: 10px; padding: 0 24px 60px; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  transition: border-color .12s, transform .12s;
}
.card:hover { border-color: var(--border-strong); }
.card-top { display: flex; align-items: flex-start; gap: 12px; }
.card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.card h3 a { color: var(--text); }
.card .desc {
  color: var(--text-2); font-size: 13px; margin: 6px 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 5px; font-size: 11.5px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  white-space: nowrap;
}
.tag.src { background: var(--accent-soft); border-color: var(--accent-line); color: #a8c0ff; }
.tag.good { background: var(--good-soft); border-color: rgba(36,201,138,.3); color: #6ee7b7; }
.tag.warn { background: var(--warn-soft); border-color: rgba(240,165,43,.32); color: #fbcd7a; }
.tag.bad { background: var(--bad-soft); border-color: rgba(242,86,77,.32); color: #ffa9a3; }
.tag.money { font-variant-numeric: tabular-nums; }

.fit {
  flex: none; width: 52px; text-align: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 5px 0; background: var(--bg-2); cursor: help;
}
.fit .n { font-size: 17px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fit .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.fit.hi .n { color: var(--good-ink, var(--good)); }
.fit.mid .n { color: var(--warn); }
.fit.lo .n { color: var(--muted); }

.card-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- drawer */

.drawer-back {
  position: fixed; inset: 0; background: rgba(4,6,10,.66);
  backdrop-filter: blur(2px); z-index: 40; display: none;
}
.drawer-back.on { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 94vw);
  background: var(--bg-2); border-left: 1px solid var(--border);
  z-index: 41; display: none; grid-template-rows: auto 1fr; box-shadow: -24px 0 60px rgba(0,0,0,.5);
}
.drawer.on { display: grid; }
.drawer-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 12px;
}
.drawer-head h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; line-height: 1.3; }
.drawer-body { overflow-y: auto; padding: 18px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs button {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 7px 12px; color: var(--muted); cursor: pointer; font-weight: 500; font-size: 13.5px;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }

.kv { display: grid; grid-template-columns: 148px 1fr; gap: 7px 14px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--text); }

.section { margin-bottom: 22px; }
.section h3 {
  margin: 0 0 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--faint); font-weight: 700;
}

/* ------------------------------------------------------------------- ai */

.ai-out {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; font-size: 13.5px; line-height: 1.65;
}
.ai-out :first-child { margin-top: 0; }
.ai-out :last-child { margin-bottom: 0; }
.ai-out h1, .ai-out h2, .ai-out h3 { font-size: 14px; margin: 16px 0 7px; }
.ai-out p { margin: 0 0 10px; }
.ai-out ul, .ai-out ol { margin: 0 0 10px; padding-left: 20px; }
.ai-out li { margin-bottom: 4px; }
.ai-out code { font-family: var(--code); font-size: 12.5px; background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }
/* WHITE BOLD IN EVERY ANSWER THE ANALYST WRITES. `.ai-out` is the answer
   body everywhere - side panel, security pane, screener - and nothing
   overrides this, so on the five light themes every emphasised phrase was
   white on white. `--text` is the theme's strongest body colour, which is
   exactly what bold is asking for. */
.ai-out strong { color: var(--text); }

.reasoning { margin-top: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.reasoning summary {
  cursor: pointer; padding: 7px 11px; font-size: 12px; color: var(--muted); user-select: none;
}
.reasoning summary:hover { color: var(--text-2); }
.reasoning .inner {
  padding: 0 11px 11px; font-size: 12px; color: var(--faint);
  white-space: pre-wrap; max-height: 260px; overflow-y: auto; font-family: var(--code); line-height: 1.55;
}

.cursor-blink::after {
  content: '▍'; color: var(--accent); animation: blink 1s steps(2) infinite; margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------- scorecard */

.score-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.score-ring { position: relative; width: 92px; height: 92px; flex: none; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .val {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.verdict-badge {
  display: inline-block; padding: 4px 11px; border-radius: 20px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px;
}
.verdict-bid { background: var(--good-soft); color: #6ee7b7; border: 1px solid rgba(36,201,138,.35); }
.verdict-review { background: var(--warn-soft); color: #fbcd7a; border: 1px solid rgba(240,165,43,.35); }
.verdict-nobid { background: var(--bad-soft); color: #ffa9a3; border: 1px solid rgba(242,86,77,.35); }

.dim { margin-bottom: 11px; }
.dim-top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.dim-top .w { color: var(--faint); }
.bar { height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .4s ease; }
.dim .note { font-size: 12px; color: var(--muted); margin-top: 4px; }

.list-plain { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-2); }
.list-plain li { margin-bottom: 5px; }

/* ------------------------------------------------------------------ chat */

.chat-wrap { display: grid; grid-template-rows: 1fr auto; height: 100%; }
.chat-log { overflow-y: auto; padding: 20px 24px; }
.msg { max-width: 780px; margin: 0 auto 16px; }
.msg-role { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin-bottom: 5px; font-weight: 700; }
.msg.user .bubble {
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius); padding: 10px 13px; font-size: 13.5px;
}
.chat-input { border-top: 1px solid var(--border); padding: 12px 24px; background: var(--bg-2); }
.chat-input-row { display: flex; gap: 8px; max-width: 780px; margin: 0 auto; }
.chat-input textarea { min-height: 42px; max-height: 160px; }

.suggest { display: flex; gap: 6px; flex-wrap: wrap; max-width: 780px; margin: 0 auto 10px; }
.suggest button {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  padding: 5px 10px; border-radius: 20px; font-size: 12.5px; cursor: pointer;
}
.suggest button:hover { border-color: var(--accent-line); color: var(--text); }

/* -------------------------------------------------------------- pipeline */

.board { display: flex; gap: 12px; padding: 16px 24px 40px; overflow-x: auto; align-items: flex-start; }
.col { flex: none; width: 268px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); }
.col-head {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 600;
}
.col-head .n { color: var(--faint); font-variant-numeric: tabular-nums; font-weight: 500; }
.col-body { padding: 8px; display: grid; gap: 7px; min-height: 60px; }
.pcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 10px; cursor: grab; font-size: 13px;
}
.pcard:hover { border-color: var(--border-strong); }
.pcard.drag { opacity: .4; }
.pcard h5 { margin: 0 0 5px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.pcard .sub { color: var(--muted); font-size: 11.5px; margin-bottom: 6px; }
.col.over { border-color: var(--accent-line); background: var(--accent-soft); }

/* --------------------------------------------------------------- metrics */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 700; margin-bottom: 6px; }
.stat .v { font-size: 25px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .d { font-size: 12px; color: var(--muted); margin-top: 3px; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
  color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
table.grid td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.grid tr:hover td { background: var(--surface); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
}
.panel h2 { margin: 0 0 4px; font-size: 15px; letter-spacing: -.01em; }
.panel .hint { color: var(--muted); font-size: 12.5px; margin: 0 0 16px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .grid2, .login-card { grid-template-columns: 1fr; } .login-pitch { display: none; } }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.plan {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column;
}
.plan.current { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.plan .pname { font-size: 15px; font-weight: 650; }
.plan .pprice { font-size: 31px; font-weight: 700; letter-spacing: -.03em; margin: 8px 0 2px; }
.plan .pprice small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan .pblurb { color: var(--muted); font-size: 12.5px; margin-bottom: 16px; min-height: 34px; }
.plan ul { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.plan li { font-size: 13px; color: var(--text-2); padding: 4px 0 4px 20px; position: relative; }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--good-ink, var(--good)); font-weight: 700; }

.meter { height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.meter span.near { background: var(--warn); }
.meter span.over { background: var(--bad); }

/* --------------------------------------------------------------- status */

.src-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.src-row:last-child { border-bottom: none; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.dot.err { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.dot.idle { background: var(--faint); }

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty h3 { color: var(--text-2); margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.empty p { margin: 0 0 14px; font-size: 13px; }

.spinner {
  width: 14px; height: 14px; border: 2px solid var(--border-strong);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-bar {
  position: fixed; top: 0; left: 0; height: 2px; background: var(--accent);
  z-index: 100; transition: width .3s ease, opacity .3s; width: 0; opacity: 0;
}
.loading-bar.on { opacity: 1; }

.toast-host { position: fixed; bottom: 18px; right: 18px; z-index: 90; display: grid; gap: 8px; justify-items: end; }
.toast {
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px;
  box-shadow: var(--shadow); max-width: 380px; animation: rise .2s ease;
}
.toast.good { border-color: rgba(36,201,138,.4); }
.toast.bad { border-color: rgba(242,86,77,.4); }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }

.inline-note {
  font-size: 12.5px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px;
}
.inline-note.warn { background: var(--warn-soft); border-color: rgba(240,165,43,.32); color: #fbcd7a; }

.taglist { display: flex; flex-wrap: wrap; gap: 5px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.row { display: flex; align-items: center; gap: 8px; }
.wrap { flex-wrap: wrap; }
.mt { margin-top: 12px; }
.mb0 { margin-bottom: 0; }

/* ------------------------------------------------------- segment switch */

.segbar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 24px 0; background: var(--bg-2);
}
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.seg button {
  background: none; border: none; padding: 6px 14px; border-radius: 6px;
  color: var(--muted); cursor: pointer; font-weight: 550; font-size: 13px; white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent); color: #fff; }
.seg-note { font-size: 12.5px; color: var(--muted); }
.seg-note b { color: var(--text-2); font-weight: 600; }

.sector-sel {
  width: auto; padding: 6px 10px; font-size: 13px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}

.nav-link {
  padding: 6px 11px; border-radius: var(--radius-sm); color: var(--good-ink, var(--good));
  font-weight: 500; font-size: 13.5px; text-decoration: none; align-self: center;
}
.nav-link:hover { background: var(--good-soft); text-decoration: none; }

/* the analyst, while it is still reasoning */
/* one sentence, not a row: as a flex row every text run became its own column
   and "3s so far." wrapped into a sliver on a narrow panel (2026-09-30) */
.ai-wait { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-bottom: 6px; }
.ai-wait .spinner { display: inline-block; vertical-align: -2px; margin-right: 7px; }
.ai-wait b { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* The per-theme PNG swap that used to live here is gone with the PNG. An
   inline SVG in `currentColor` inherits the theme's brand ink, so there is
   nothing to swap and no second file to keep in step. */


/* the highlight card every analyst answer opens with (2026-09-30): the plain
   bullets and the bottom line, above the technical detail */
.ai-out .md-tldr-h { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ai-out .md-tldr-h + ul { list-style: none; margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); }
.ai-out .md-tldr-h + ul li { position: relative; padding-left: 16px; margin-bottom: 5px; font-size: 13px; line-height: 1.45; color: var(--text); }
.ai-out .md-tldr-h + ul li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ai-out .md-tldr-h + ul li strong { color: var(--text); font-size: 13.5px; }
.ai-out .md-bottom { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; border-left: 3px solid var(--accent); background: var(--surface-2, var(--surface)); color: var(--text); font-size: 13px; }
.ai-out .md-detail-h { margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ai-msg .pdf-one { margin-top: 6px; font: inherit; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
.ai-msg .pdf-one:hover { color: var(--accent); border-color: var(--accent); }