/* Parley landing — vanilla CSS port of the design prototype. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
::selection { background: var(--accent-faint); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); }

button { font-family: inherit; }

/* ---- shell ---- */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); }

/* faint scanline + vignette — the one place the brief permits it (landing only) */
.scanwrap {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(45,212,191,0.05), transparent 50%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px);
}

.flex-spacer { flex: 1; }
.key { color: var(--accent); font-weight: var(--w-bold); }
.is-accent { color: var(--accent); }

.topbar {
  display: flex; align-items: center; gap: 14px; padding: 10px 20px;
  border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; z-index: 20;
}
.topbar-brand { display: flex; align-items: center; gap: 9px; background: transparent; border: none; cursor: pointer; padding: 0; color: var(--fg); }
.brand-name { font-weight: var(--w-black); font-size: 16px; letter-spacing: -0.01em; }
.topbar-name { color: var(--fg-muted); font-size: 13px; white-space: nowrap; }
.topbar-sep { color: var(--border); }
.topbar-total { font-weight: var(--w-bold); font-size: 15px; white-space: nowrap; }
.topbar-day { font-weight: var(--w-bold); font-size: 14px; white-space: nowrap; }
.topbar-day.pos { color: var(--buy); }
.topbar-day.neg { color: var(--sell); }

.body-row { flex: 1; display: flex; min-height: 0; position: relative; }

.navrail {
  width: 190px; border-right: 1px solid var(--border); background: var(--surface);
  padding: 16px 0; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
}
.rail-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); padding: 0 18px 8px; }
.rail-label.council { padding: 8px 18px 6px; }
.rail-spring { flex: 1; min-height: 24px; }
.rail-item {
  display: flex; gap: 10px; align-items: center; text-align: left; font-size: 14px;
  color: var(--fg-muted); background: transparent; border: none; cursor: pointer; padding: 7px 18px;
}
.rail-item.on { color: var(--fg); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.rail-persona { display: flex; gap: 10px; align-items: center; padding: 4px 18px; font-size: 13px; }
.rail-persona span:last-child { color: var(--fg-muted); }

.mono-badge { border: 1px solid currentColor; font-weight: var(--w-bold); font-size: 10px; padding: 1px 3px; }

main { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 1; }
.screen-pad { padding: 34px 32px 56px; }

.statusbar {
  display: flex; align-items: center; gap: 18px; padding: 9px 20px;
  border-top: 1px solid var(--border); background: var(--surface); font-size: 13px; flex-shrink: 0; z-index: 20;
}
.statusbar > span { white-space: nowrap; }
.status-ctx { color: var(--fg-faint); }

/* ---- pane (bordered, title notch on top rule — Lip Gloss style) ---- */
.pane { position: relative; border: 1px solid var(--border); border-radius: var(--r-sq); background: var(--surface); }
.pane.soft { border-radius: var(--r-sm); }
.pane.focus { border-color: var(--border-strong); box-shadow: inset 2px 0 0 var(--accent); }
.pane-title {
  position: absolute; top: -0.72em; left: 14px; padding: 0 7px; background: var(--bg);
  font-size: 12px; font-weight: var(--w-bold); color: var(--fg); white-space: nowrap;
}
.pane.focus > .pane-title { color: var(--accent); }
.pane-title .sub { color: var(--fg-muted); font-weight: var(--w-medium); }
.pane-right {
  position: absolute; top: -0.72em; right: 14px; padding: 0 7px; background: var(--bg);
  font-size: 12px; color: var(--fg-muted); white-space: nowrap;
}
.pane-body { padding: 16px; }

/* ---- shared atoms ---- */
.spin { color: var(--accent); }
.stance { font-weight: var(--w-bold); font-size: 13px; white-space: nowrap; }
.stance.BUY  { color: var(--buy); }
.stance.SELL { color: var(--sell); }
.stance.HOLD { color: var(--hold); }
.pips .empty { color: var(--fg-faint); }
.meter-cap { color: var(--fg-faint); }
.meter-trk { color: var(--meter-track); }
.meter-pct { font-weight: var(--w-bold); margin-left: 7px; }
.bar-spark { display: inline-flex; align-items: flex-end; gap: 2px; width: 60px; height: 22px; vertical-align: middle; }
.bar-spark span { flex: 1; }
.bar-spark.up span { background: var(--buy); }
.bar-spark.down span { background: var(--sell); }

.edu-line { margin-top: 22px; color: var(--fg-faint); font-size: 12.5px; }
.edu-line .warn { color: var(--hold); }
.screen-head { margin-bottom: 18px; }
.screen-head .head { color: var(--accent); font-weight: var(--w-bold); font-size: 18px; }
.screen-head .sub { color: var(--fg-faint); font-size: 13px; margin-left: 10px; }

/* ---- home ---- */
.home { max-width: 1180px; display: flex; flex-direction: column; gap: 30px; }
.home-kicker { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.home h1 {
  font-size: clamp(30px, 4.6vw, 50px); line-height: 1.08; font-weight: var(--w-black);
  letter-spacing: -0.02em; margin: 16px 0 0; text-wrap: balance;
}
.home-lede { font-size: 15.5px; line-height: 1.66; color: var(--fg-muted); margin: 20px 0 0; max-width: 72ch; }

.home-cmds { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 560px; }
.home-cmds .col { display: flex; flex-direction: column; gap: 8px; }
.cmd-note { font-size: 12px; color: var(--fg-faint); }

.cmdline {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font-size: 14.5px; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--fg); padding: 12px 15px;
  white-space: nowrap; overflow: hidden;
}
.cmdline.primary { border-color: var(--border-strong); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.cmdline .prompt { color: var(--accent); font-weight: var(--w-bold); }
.cmdline .cmd { font-weight: var(--w-bold); overflow: hidden; text-overflow: ellipsis; }
.cmdline .copy-hint { font-size: 12px; color: var(--fg-muted); flex-shrink: 0; margin-left: auto; }
.cmdline.copied .copy-hint { color: var(--ok); }

.home-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feat { border: 1px solid var(--border); background: var(--surface); padding: 15px 16px; display: flex; flex-direction: column; gap: 8px; }
.feat-head { display: flex; align-items: center; gap: 10px; }
.feat-glyph {
  color: var(--accent); border: 1px solid var(--border-strong); width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feat h3 { font-size: 14.5px; font-weight: var(--w-bold); margin: 0; }
.feat p { font-size: 12.5px; line-height: 1.6; color: var(--fg-muted); margin: 0; }

.dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dl-item {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg);
  border: 1px solid var(--border); background: var(--surface); padding: 12px 14px;
}
.dl-item.rec { border-color: var(--border-strong); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.dl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dl-line { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.dl-os { font-weight: var(--w-bold); font-size: 14px; }
.dl-arch-chip { font-size: 11px; color: var(--fg-muted); border: 1px solid var(--border); padding: 0 5px; }
.dl-detected { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.dl-meta { font-size: 11.5px; color: var(--fg-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-arrow { color: var(--fg-muted); font-weight: var(--w-bold); font-size: 15px; flex-shrink: 0; }
.dl-item.rec .dl-arrow { color: var(--accent); }
.dl-foot { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border-muted); font-size: 12px; color: var(--fg-faint); line-height: 1.6; }
.dl-foot .cmd { color: var(--fg-muted); }

.home-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; max-width: 720px; }
.repo-link {
  display: inline-flex; align-items: center; gap: 8px; color: var(--fg); text-decoration: none;
  border: 1px solid var(--border); padding: 8px 14px; font-size: 13px; font-weight: var(--w-bold);
}
.home-links .tag { font-size: 12px; color: var(--fg-faint); }

/* ---- monitor ---- */
.monitor { max-width: 1000px; display: flex; flex-direction: column; gap: 24px; }
.hold-head, .hold-row { display: grid; grid-template-columns: 92px 64px 96px 96px 104px 70px 1fr; gap: 8px; }
.hold-head {
  padding: 0 4px 9px; color: var(--fg-muted); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; border-bottom: 1px solid var(--border-muted);
}
.hold-row { align-items: center; padding: 10px 4px; cursor: pointer; white-space: nowrap; font-size: 14px; }
.hold-row.on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.hold-tkr { font-weight: var(--w-bold); display: flex; align-items: center; gap: 7px; }
.tkr-dot { width: 8px; height: 8px; display: inline-block; flex-shrink: 0; }
.hold-dim { color: var(--fg-muted); }
.hold-pnl.pos { color: var(--buy); }
.hold-pnl.neg { color: var(--sell); }
.hold-council { display: flex; gap: 10px; align-items: center; }

.alloc-bar { font-size: 17px; white-space: nowrap; line-height: 1.2; overflow: hidden; }
.alloc-legend { display: flex; gap: 18px; font-size: 12.5px; margin-top: 9px; color: var(--fg-muted); flex-wrap: wrap; }
.alloc-legend span { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.legend-dot { width: 9px; height: 9px; display: inline-block; }

.since-strip {
  display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--fg-muted);
  white-space: nowrap; border: 1px solid var(--border-muted); background: var(--surface);
  padding: 10px 14px; flex-wrap: wrap; max-width: 1000px;
}
.since-strip .label { color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }
.since-strip .sep { color: var(--fg-faint); }
.since-strip .down { color: var(--sell); }
.since-strip .hi { color: var(--fg); }
.hint-line { font-size: 12.5px; color: var(--fg-faint); }

/* ---- analyze ---- */
.analyze { max-width: 1000px; display: flex; flex-direction: column; }
.verdict { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.verdict .tkr { font-weight: var(--w-bold); font-size: 18px; }
.verdict .sep { color: var(--fg-faint); }
.verdict .thinking { color: var(--fg-muted); font-size: 15px; }
.verdict .stance-big { font-weight: var(--w-bold); font-size: 18px; white-space: nowrap; }
.verdict .stance-big.HOLD { color: var(--hold); }
.verdict .stance-big.BUY { color: var(--buy); }
.verdict .stance-big.SELL { color: var(--sell); }
.verdict .conf-label { font-size: 13px; color: var(--fg-muted); }
.verdict .conf-meter { font-size: 14px; white-space: nowrap; }
.conf-meter .fill.HOLD { color: var(--hold); }
.conf-meter .fill.BUY { color: var(--buy); }
.conf-meter .fill.SELL { color: var(--sell); }

.reveal { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-slow), transform var(--dur-slow); }
.reveal.on { opacity: 1; transform: none; }

.synthesis { font-size: 13.5px; line-height: 1.66; color: var(--fg); margin: 0 0 8px; max-width: 92ch; text-wrap: pretty; }

.sect-head { font-weight: var(--w-bold); font-size: 15px; color: var(--accent); margin: 18px 0 12px; }

.member {
  display: grid; grid-template-columns: 78px 116px 1fr; gap: 14px; padding: 11px 0; align-items: start;
  border-bottom: 1px solid var(--border-muted); opacity: 0.32; transition: opacity var(--dur);
}
.member.on { opacity: 1; }
.member .who { display: flex; align-items: center; gap: 8px; }
.member .who .name { font-weight: var(--w-bold); font-size: 13.5px; }
.member .line { font-size: 13px; line-height: 1.6; color: var(--fg-faint); text-wrap: pretty; }
.member.on .line { color: var(--fg-muted); }
.member .line .think { font-style: italic; }

.catalysts .sect-head { margin: 20px 0 12px; }
.cat-grid { display: grid; grid-template-columns: 194px 1fr; gap: 14px; align-items: start; }
.cat-grid .left { white-space: nowrap; }
.cat-grid .count { color: var(--fg-muted); font-size: 13px; }
.cat-grid .summary { font-size: 13px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }
.cat-bullets { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cat-bullets li { font-size: 13px; color: var(--fg-muted); }
.cat-bullets .dot { color: var(--accent); }
.cost-line { margin-top: 16px; font-size: 12.5px; color: var(--fg-faint); }
.replay-hint { margin-top: 12px; font-size: 12.5px; color: var(--fg-faint); }
.replay-hint[hidden] { display: none; }

/* ---- portfolio ---- */
.portfolio { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.pf-head, .pf-row { display: grid; grid-template-columns: 110px 80px 110px 1fr; gap: 10px; }
.pf-head {
  padding: 0 4px 9px; color: var(--fg-muted); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; border-bottom: 1px solid var(--border-muted);
}
.pf-row { align-items: center; padding: 10px 4px; white-space: nowrap; font-size: 14px; cursor: default; }
.pf-row.on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.pf-row .tkr { font-weight: var(--w-bold); }
.pf-row .dim { color: var(--fg-muted); }
.pf-watch { color: var(--accent); }
.pf-watch .lbl { color: var(--fg); }
.key-hints { font-size: 13px; color: var(--fg-faint); display: flex; gap: 16px; flex-wrap: wrap; }

/* ---- news ---- */
.news { max-width: 1040px; display: flex; flex-direction: column; }
.news-row { display: flex; gap: 14px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-muted); }
.news-row .age { color: var(--fg-faint); font-size: 13px; width: 36px; flex-shrink: 0; }
.news-row .tkr { font-weight: var(--w-bold); font-size: 13.5px; width: 52px; flex-shrink: 0; }
.news-row .title { font-size: 13.5px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.news-row .src { color: var(--fg-faint); font-size: 13px; flex-shrink: 0; white-space: nowrap; }

/* ---- settings ---- */
.settings { max-width: 720px; display: flex; flex-direction: column; }
.settings .group-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 8px; }
.set-row { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: center; padding: 7px 6px; font-size: 14px; }
.set-row.on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.set-row .k { color: var(--fg-muted); }
.set-row.on .k { color: var(--fg); }
.set-row .set { color: var(--buy); }
.set-row .mask { letter-spacing: 2px; }
.settings .key-hints { margin-top: 16px; }
.settings .privacy { margin-top: 14px; font-size: 12.5px; color: var(--fg-faint); max-width: 70ch; line-height: 1.6; }
.settings .privacy .hi { color: var(--fg-muted); }

/* ---- help overlay ---- */
.help-overlay {
  position: absolute; inset: 0; background: var(--overlay);
  display: flex; justify-content: center; align-items: center; z-index: 60;
}
.help-overlay[hidden] { display: none; }
.help-box { width: 420px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop); }
.help-box .title { padding: 11px 16px; border-bottom: 1px solid var(--border-muted); font-weight: var(--w-bold); font-size: 13px; }
.help-box .rows { padding: 8px 16px 14px; }
.help-row { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 13px; }
.help-row .k { color: var(--accent); font-weight: var(--w-bold); white-space: nowrap; }
.help-row .d { color: var(--fg-muted); text-align: right; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .dl-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .navrail { display: none; }
  .hide-sm { display: none; }
  .home-cmds, .home-feats, .dl-grid, .cat-grid { grid-template-columns: 1fr; }
  .screen-pad { padding: 24px 16px 44px; }
}