/* =========================================================================
   P/E ATLAS — visual system
   Palette: dawn over Bryce Canyon. Oxidized red rock, sunlit hoodoo orange,
   hazy apricot light, snow, warm ink, and a cool dusk-blue sky as counterpoint.
   ========================================================================= */

:root {
  --haze-1:  #F9F1E6;
  --haze-2:  #F1E1D0;
  --paper:   #FDF7EE;
  --panel:   #F6EADB;   /* sidebar surface — a touch warmer than cards */
  --ink:     #2B211C;
  --ink-soft:#7A695C;
  --line:    #E9D9C6;

  --rust:    #A8492B;
  --ember:   #DD7A38;
  --apricot: #EFA765;
  --snow:    #FCFAF5;
  --dusk:    #647688;
  --juniper: #4E7A50;

  /* semantic tints (themed) */
  --hair: rgba(233,217,198,.6);
  --tint: rgba(122,105,92,.055);
  --tint-2: rgba(122,105,92,.1);
  --tint-accent: rgba(221,122,56,.06);
  --tint-accent-strong: rgba(221,122,56,.12);
  --hover: rgba(221,122,56,.075);
  --up-soft: rgba(78,122,80,.11);
  --down-soft: rgba(168,73,43,.10);
  --up-fill: rgba(78,122,80,.20);
  --down-fill: rgba(168,73,43,.18);

  --shadow: 0 1px 2px rgba(74, 48, 32, .05), 0 8px 24px -12px rgba(74, 48, 32, .18);
  --radius: 14px;
  --sidebar-w: 232px;
  --content-max: 900px;
}

/* ======================================================================
   NIGHT OVER BRYCE — the same canyon after dark
   ====================================================================== */
[data-theme="night"] {
  --haze-1:  #141A2E;   /* night sky, top */
  --haze-2:  #0C1020;   /* night sky, deep */
  --paper:   #1A2139;   /* cards — lifted indigo */
  --panel:   #161C30;   /* sidebar */
  --ink:     #ECE6D8;   /* warm starlight */
  --ink-soft:#95A0BE;   /* moonlit blue-grey */
  --line:    #2C3556;

  --rust:    #E86B47;   /* red rock, brightened for dark */
  --ember:   #F2954A;   /* glowing ember — primary accent */
  --apricot: #F4B678;   /* moonlit apricot */
  --snow:    #F1EEE4;   /* moonlit snow caps */
  --dusk:    #8492B6;   /* night-sky blue */
  --juniper: #6FB86B;   /* brightened green */

  --shadow: 0 2px 6px rgba(0,0,0,.28), 0 16px 44px -18px rgba(0,0,0,.6);

  --hair: rgba(255,255,255,.07);
  --tint: rgba(255,255,255,.035);
  --tint-2: rgba(255,255,255,.07);
  --tint-accent: rgba(242,149,74,.10);
  --tint-accent-strong: rgba(242,149,74,.18);
  --hover: rgba(242,149,74,.13);
  --up-soft: rgba(111,184,107,.16);
  --down-soft: rgba(232,107,71,.16);
  --up-fill: rgba(111,184,107,.22);
  --down-fill: rgba(232,107,71,.20);
}

/* a faint scatter of stars over the night sky */
[data-theme="night"] body {
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px   at 62% 13%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.5px 1.5px at 83% 34%, rgba(255,255,255,.50), transparent),
    radial-gradient(1px 1px   at 33% 52%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px   at 74% 63%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.5px 1.5px at 47% 80%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px   at 12% 74%, rgba(255,255,255,.30), transparent),
    radial-gradient(1px 1px   at 91% 86%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 27% 8%, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px   at 56% 40%, rgba(255,255,255,.30), transparent),
    linear-gradient(180deg, var(--haze-1) 0%, var(--haze-2) 100%);
  background-attachment: fixed;
}

/* glow — restrained, only where it earns its place */
[data-theme="night"] .brand-mark { box-shadow: 0 0 12px rgba(242,149,74,.45); }
[data-theme="night"] .hoodoo .spire { filter: drop-shadow(0 0 5px rgba(242,149,74,.30)); }
[data-theme="night"] #d-live.beating { box-shadow: 0 0 9px rgba(111,184,107,.75); }
[data-theme="night"] .pc-line { filter: drop-shadow(0 0 3px currentColor); }
[data-theme="night"] .pf-donut-svg { filter: drop-shadow(0 0 10px rgba(0,0,0,.45)); }
[data-theme="night"] .spark polyline { filter: drop-shadow(0 0 2px currentColor); }

/* theme toggle button (sidebar) */
.theme-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 14px;
  padding: 9px 11px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-soft);
  background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--ember); border-color: var(--ember); }
.theme-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }
.theme-toggle .icon-sun, .theme-toggle .theme-label-day { display: none; }
[data-theme="night"] .theme-toggle .icon-moon, [data-theme="night"] .theme-toggle .theme-label-night { display: none; }
[data-theme="night"] .theme-toggle .icon-sun, [data-theme="night"] .theme-toggle .theme-label-day { display: inline-flex; }

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--haze-1) 0%, var(--haze-2) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.haze {
  position: fixed;
  inset: 0 0 auto 0;
  height: 340px;
  background: radial-gradient(120% 90% at 50% -20%,
              rgba(239, 167, 101, .34) 0%,
              rgba(221, 122, 56, .10) 40%,
              transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Numbers get tabular mono everywhere */
.price, .pe-value, .change, .num, .peer-table td.num, .hoodoo-val, .pe-unit {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ============================ Layout ============================ */
.layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}
.layout[hidden] { display: none; }   /* critical: display:flex above would otherwise override [hidden] */

/* ---- Sidebar ---- */
.sidebar {
  position: sticky;
  top: 0;
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  height: 100vh;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 26px; height: 26px;
  background: url('/dummy-dollars-192.png') center / contain no-repeat;
  flex: 0 0 auto;
}
.auth-mark .brand-mark { width: 46px; height: 46px; }   /* larger on the login screen */
.brand-name {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.brand-sub { font-size: 11px; color: var(--ink-soft); letter-spacing: .03em; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px;
  font: inherit; font-size: 15px; font-weight: 500;
  color: var(--ink-soft); background: none; border: none; border-radius: 10px;
  cursor: pointer; text-align: left;
  transition: background .13s, color .13s;
}
.nav-item svg { width: 19px; height: 19px; flex: 0 0 auto; }
.nav-item:hover { background: rgba(221, 122, 56, .10); color: var(--ink); }
.nav-item.active { background: var(--ember); color: #fff; }
.nav-item.active:hover { background: var(--ember); color: #fff; }

.sidebar-foot {
  margin-top: auto;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- Content ---- */
.content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px clamp(20px, 4vw, 44px) 40px;
}
.view { max-width: var(--content-max); margin: 0 auto; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Explore header (search) ---- */
.explore-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.search { position: relative; width: 100%; max-width: 460px; }
#search-input {
  width: 100%;
  padding: 12px 16px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
#search-input:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: var(--shadow), 0 0 0 3px rgba(221, 122, 56, .16);
}
.search-results {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 10;
}
.search-results button {
  display: flex; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 14px;
  background: none; border: none; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink);
}
.search-results button:hover, .search-results button.active { background: rgba(221, 122, 56, .1); }
.search-results .rsym { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.search-results .rdesc { color: var(--ink-soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- View headers + placeholders (Portfolio / Watchlist) ---- */
.view-head { padding: 8px 0 22px; }
.view-title {
  font-family: "Fraunces", serif; font-weight: 900;
  font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; margin: 0 0 8px;
}
.view-desc { color: var(--ink-soft); font-size: 16px; margin: 0; max-width: 560px; }
.placeholder {
  text-align: center;
  padding: 56px 32px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
}
.placeholder svg { width: 40px; height: 40px; color: var(--apricot); margin-bottom: 14px; }
.placeholder-title {
  font-family: "Fraunces", serif; font-weight: 600; font-size: 20px;
  color: var(--ink); margin-bottom: 8px;
}
.placeholder p { max-width: 460px; margin: 0 auto; font-size: 14.5px; }

/* ---- Welcome / market home ---- */
.welcome { padding: 18px 0 40px; }
.welcome-hero { max-width: 620px; margin: 26px 0 24px; }
.welcome h1 {
  font-family: "Fraunces", serif; font-weight: 900;
  font-size: clamp(30px, 5vw, 46px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 16px;
}
.welcome p { font-size: 17px; color: var(--ink-soft); margin: 0 0 26px; max-width: 520px; }
.welcome-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  font: inherit; font-family: "IBM Plex Mono", monospace; font-weight: 600;
  padding: 8px 16px; cursor: pointer;
  color: var(--rust); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px;
  transition: transform .12s, border-color .12s, color .12s;
}
.chip:hover { transform: translateY(-1px); border-color: var(--ember); color: var(--ember); }

/* market strip */
.market-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mkt-loading { grid-column: 1 / -1; color: var(--ink-soft); font-size: 14px; padding: 12px 0; }
.mkt-ix { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.mkt-ix-name { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.mkt-ix-price { font-family: "IBM Plex Mono", monospace; font-size: 20px; font-weight: 600; margin: 4px 0; font-variant-numeric: tabular-nums; }
.mkt-ix-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mkt-ix-chg { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 500; }
.mkt-ix-chg.up { color: var(--juniper); }
.mkt-ix-chg.down { color: var(--rust); }
.spark { width: 118px; height: 34px; flex: 0 0 auto; }

/* market grid: news + movers */
.market-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.market-news-card, .market-movers-card { padding: 20px 22px; }
.mkt-empty { color: var(--ink-soft); font-size: 13px; }
.mover { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair); cursor: pointer; transition: color .12s; }
.mover:last-child { border-bottom: none; }
.mover:hover .mover-sym { color: var(--ember); }
.mover-sym { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 14px; }
.mover-chg { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 500; }
.mover-chg.up { color: var(--juniper); }
.mover-chg.down { color: var(--rust); }

@media (max-width: 760px) {
  .market-strip { grid-template-columns: 1fr; }
  .market-grid { grid-template-columns: 1fr; }
}

/* ---- Loading / error ---- */
.loading { padding: 80px 0; text-align: center; color: var(--ink-soft); }
.spinner {
  width: 34px; height: 34px; margin: 0 auto 16px;
  border: 3px solid var(--line); border-top-color: var(--ember);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error {
  margin-top: 20px; padding: 20px 22px;
  background: rgba(168, 73, 43, .07);
  border: 1px solid rgba(168, 73, 43, .25);
  border-radius: var(--radius);
  color: var(--rust);
}

/* ============================ Stock detail ============================ */
.stock-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
  padding: 14px 0 22px;
  border-bottom: 1px solid var(--line);
}
.stock-ticker { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 14px; letter-spacing: .06em; color: var(--ember); }
.stock-name { font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(26px, 4vw, 38px); line-height: 1.08; letter-spacing: -.015em; margin-top: 2px; }
.stock-industry { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }

.stock-quote { text-align: right; }
.price-row { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.price { font-size: clamp(26px, 4vw, 34px); font-weight: 600; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--juniper); box-shadow: 0 0 0 0 rgba(78, 122, 80, .5); }
.live-dot.beating { animation: pulse 2s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(78, 122, 80, .45); }
  70% { box-shadow: 0 0 0 8px rgba(78, 122, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 122, 80, 0); }
}
.change { font-size: 16px; font-weight: 500; margin-top: 2px; }
.change.up { color: var(--juniper); }
.change.down { color: var(--rust); }
.range { font-size: 12px; color: var(--ink-soft); margin-top: 6px; font-family: "IBM Plex Mono", monospace; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.card-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; }
.hint { font-weight: 400; text-transform: none; letter-spacing: 0; }

.pe-now { display: flex; align-items: baseline; gap: 10px; }
.pe-value { font-size: 40px; font-weight: 600; line-height: 1; }
.pe-unit { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }

/* valuation stat trio */
.stat-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.stat { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--tint-accent); border-radius: 10px; }
.stat-val { font-family: "IBM Plex Mono", monospace; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.card-sub { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.pe-bars { margin: 18px 0 12px; display: grid; gap: 10px; }
.pe-bar-row { display: grid; grid-template-columns: 84px 1fr 52px; align-items: center; gap: 10px; font-size: 13px; }
.pe-bar-row .lbl { color: var(--ink-soft); }
.pe-bar-track { height: 8px; background: var(--down-soft); border-radius: 6px; overflow: hidden; }
.pe-bar-fill { height: 100%; border-radius: 6px; }
.pe-bar-fill.now { background: var(--ember); }
.pe-bar-fill.hist { background: var(--dusk); }
.pe-bar-row .val { text-align: right; font-family: "IBM Plex Mono", monospace; }
.pe-verdict { font-size: 14px; color: var(--ink); padding-top: 4px; }
.pe-verdict b { font-weight: 600; }
.tag { font-family: "IBM Plex Mono", monospace; font-weight: 600; padding: 1px 7px; border-radius: 999px; font-size: 12px; }
.tag.cheap { color: var(--juniper); background: var(--up-soft); }
.tag.rich { color: var(--rust); background: var(--down-soft); }
.tag.fair { color: var(--dusk); background: rgba(100,118,136,.14); }

.ratings-consensus { font-family: "Fraunces", serif; font-weight: 600; font-size: 22px; margin-bottom: 14px; }
.ratings-bar { display: flex; height: 16px; border-radius: 6px; overflow: hidden; background: var(--line); }
.ratings-bar > span { height: 100%; }
.seg-sb { background: #3E6B41; }
.seg-b  { background: var(--juniper); }
.seg-h  { background: var(--apricot); }
.seg-s  { background: var(--ember); }
.seg-ss { background: var(--rust); }
.ratings-legend { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); }
.ratings-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* ---- Fund (ETF) card ---- */
.fund-card { margin-bottom: 18px; }
.fund-family { font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.fund-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
.fund-tile { background: var(--tint-accent); border-radius: 10px; padding: 10px 12px; }
.fund-tile.wide { grid-column: span 2; }
.fund-tile-val { font-family: "IBM Plex Mono", monospace; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fund-tile-val.up { color: var(--juniper); }
.fund-tile-val.down { color: var(--rust); }
.fund-tile-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; }
.fund-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fund-sub { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ember); margin-bottom: 10px; }
.fh-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; cursor: default; }
.fh-row[data-symbol] { cursor: pointer; }
.fh-row[data-symbol]:hover .fh-sym { color: var(--ember); }
.fh-sym { font-family: "IBM Plex Mono", monospace; font-weight: 600; min-width: 54px; }
.fh-name { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-wt { margin-left: auto; font-family: "IBM Plex Mono", monospace; }
.fund-cols .muted { color: var(--ink-soft); font-size: 13.5px; }
@media (max-width: 640px) { .fund-cols { grid-template-columns: 1fr; } }

/* ---- KPI grid ---- */
.kpi-card { margin-bottom: 18px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 26px; }
.kpi-group-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ember); margin-bottom: 10px; }
.kpi-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 9px; background: var(--tint); min-width: 82px; }
.kpi-val { font-family: "IBM Plex Mono", monospace; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-lbl { font-size: 10.5px; color: var(--ink-soft); letter-spacing: .03em; }
.kpi.pos { background: var(--up-soft); }
.kpi.pos .kpi-val { color: var(--juniper); }
.kpi.neg { background: var(--down-soft); }
.kpi.neg .kpi-val { color: var(--rust); }

/* ---- Amphitheatre ---- */
.amphitheatre { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px 8px; margin-bottom: 18px; overflow: hidden; }
.amp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.amp-sub { font-size: 13px; color: var(--ink-soft); margin-top: -8px; }
.amp-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.amp-mode { display: flex; gap: 2px; }
.amp-mode button {
  font: inherit; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500;
  color: var(--ink-soft); background: none; border: 1px solid var(--line); padding: 4px 12px;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.amp-mode button:first-child { border-radius: 8px 0 0 8px; }
.amp-mode button:last-child { border-radius: 0 8px 8px 0; border-left: none; }
.amp-mode button:hover { color: var(--ink); }
.amp-mode button.active { background: var(--ember); color: #fff; border-color: var(--ember); }
.amp-legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-soft); }
.amp-legend .swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* peer editor */
.amp-badge { font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ember); background: var(--tint-accent-strong); padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.amp-edit { font: inherit; font-size: 12px; font-weight: 500; color: var(--ink-soft); background: none; border: 1px solid var(--line); padding: 4px 12px; border-radius: 8px; cursor: pointer; transition: color .12s, border-color .12s; }
.amp-edit:hover { color: var(--ember); border-color: var(--ember); }
.peer-editor { margin: 4px 0 14px; padding: 14px 16px; background: var(--tint); border: 1px solid var(--line); border-radius: 12px; }
.pe-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.pe-chips:empty::before { content: "No peers — add some below."; color: var(--ink-soft); font-size: 13px; }
.pe-chip { display: inline-flex; align-items: center; gap: 6px; font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 13px; padding: 4px 6px 4px 11px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.pe-chip button { background: none; border: none; cursor: pointer; color: var(--ink-soft); font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 50%; }
.pe-chip button:hover { color: var(--rust); }
.pe-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-row input { flex: 0 0 160px; padding: 8px 12px; font: inherit; font-size: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.pe-row input:focus { outline: none; border-color: var(--ember); }
.pe-spacer { flex: 1; }
.pe-row button { font: inherit; font-size: 13px; font-weight: 500; padding: 8px 14px; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; cursor: pointer; color: var(--ink); transition: filter .12s, background .12s; }
.pe-row button:hover { background: var(--hover); }
.pe-primary { background: var(--ember) !important; color: #fff !important; border-color: var(--ember) !important; }
.pe-primary:hover { filter: brightness(1.05); }
.pe-msg { font-size: 12.5px; color: var(--rust); margin-top: 8px; min-height: 1px; }
.swatch.self { background: var(--ember); }
.swatch.peer { background: var(--dusk); }
.swatch.median { background: transparent; border-top: 2px dashed var(--rust); border-radius: 0; height: 0; width: 14px; }
.hoodoos { width: 100%; margin-top: 4px; }
.hoodoos svg { width: 100%; height: auto; display: block; }
.hoodoo { cursor: pointer; }
.hoodoo .spire { transition: opacity .15s; }
.hoodoo:hover .spire { opacity: .82; }
.hoodoo-label { font-family: "IBM Plex Mono", monospace; font-size: 11px; fill: var(--ink-soft); }
.hoodoo-label.self { fill: var(--ember); font-weight: 600; }
.hoodoo-val { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; fill: var(--ink); }

/* ---- News ---- */
.news { margin-top: 18px; }
.news-list { display: flex; flex-direction: column; }
.news-item {
  display: flex; gap: 14px; padding: 14px 0; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--hair);
}
.news-item:last-child { border-bottom: none; }
.news-item:hover .news-headline { color: var(--ember); }
.news-thumb { width: 84px; height: 60px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: var(--panel); }
.news-body { min-width: 0; }
.news-headline { font-weight: 600; font-size: 15px; line-height: 1.35; transition: color .12s; }
.news-meta { font-size: 12px; color: var(--ink-soft); margin: 4px 0; font-family: "IBM Plex Mono", monospace; }
.news-summary { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-empty { color: var(--ink-soft); font-size: 14px; padding: 8px 0; }

/* ---- Peer table ---- */
.peers { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; overflow-x: auto; }
.peer-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.peer-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 10px; cursor: pointer; user-select: none; border-bottom: 1px solid var(--line); white-space: nowrap; }
.peer-table th.num { text-align: right; }
.peer-table th:hover { color: var(--ember); }
.peer-table th.sorted::after { content: " ↓"; color: var(--ember); }
.peer-table th.sorted.asc::after { content: " ↑"; }
.peer-table td { padding: 11px 10px; border-bottom: 1px solid var(--hair); }
.peer-table td.num { text-align: right; }
.peer-table tbody tr { cursor: pointer; transition: background .12s; }
.peer-table tbody tr:hover { background: var(--hover); }
.peer-table tr.self { background: var(--tint-accent-strong); }
.peer-table tr.self td:first-child { box-shadow: inset 3px 0 0 var(--ember); }
.peer-table .tsym { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.peer-table .up { color: var(--juniper); }
.peer-table .down { color: var(--rust); }
.peer-table .muted { color: var(--ink-soft); }

/* ---- Price chart ---- */
.pricechart { padding: 18px 20px; margin: 22px 0; }
.pc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc-range { display: flex; gap: 2px; flex-wrap: wrap; }
.pc-range button {
  font: inherit; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500;
  color: var(--ink-soft); background: none; border: none; padding: 5px 10px; border-radius: 7px;
  cursor: pointer; transition: background .12s, color .12s;
}
.pc-range button:hover { background: rgba(221, 122, 56, .10); color: var(--ink); }
.pc-range button.active { background: var(--ember); color: #fff; }
.pc-readout { display: flex; align-items: baseline; gap: 12px; min-height: 26px; margin: 12px 0 4px; flex-wrap: wrap; }
.pc-price { font-family: "IBM Plex Mono", monospace; font-size: 20px; font-weight: 600; }
.pc-delta { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 500; }
.pc-delta.up { color: var(--juniper); }
.pc-delta.down { color: var(--rust); }
.pc-when { font-size: 12px; color: var(--ink-soft); }
.pc-plot { width: 100%; }
.pc-svg { width: 100%; height: auto; display: block; cursor: crosshair; }
.pc-msg { padding: 64px 0; text-align: center; color: var(--ink-soft); font-size: 14px; }
.pc-grid { stroke: var(--line); stroke-width: 1; }
.pc-baseline { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 4 4; opacity: .5; }
.pc-axis { font-family: "IBM Plex Mono", monospace; font-size: 10px; fill: var(--ink-soft); }
.pc-cursor-line { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; opacity: .65; }

/* ---- Footer ---- */
.foot { max-width: var(--content-max); margin: 28px auto 0; padding-top: 18px; font-size: 12px; color: var(--ink-soft); border-top: 1px solid var(--line); }

/* ============================ Portfolio ============================ */
.pf-loading { padding: 80px 0; text-align: center; color: var(--ink-soft); }
.pf-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pf-total { font-family: "IBM Plex Mono", monospace; font-size: clamp(30px, 5vw, 44px); font-weight: 600; line-height: 1.05; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pf-gain { font-family: "IBM Plex Mono", monospace; font-size: 15px; font-weight: 500; margin-top: 4px; }
.pf-gain.up { color: var(--juniper); }
.pf-gain.down { color: var(--rust); }
.pf-updated { font-size: 12px; color: var(--ink-soft); font-family: "IBM Plex Mono", monospace; }

.pf-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.pf-history { padding: 18px 20px; margin-bottom: 18px; }
.pf-history-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pf-tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.pf-tile-val { font-family: "IBM Plex Mono", monospace; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-tile-val.up { color: var(--juniper); }
.pf-tile-val.down { color: var(--rust); }
.pf-tile-lbl { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }

.pf-charts { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; margin-bottom: 18px; }
.pf-donut-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.pf-donut { position: relative; flex: 0 0 auto; width: 180px; height: 180px; }
.pf-donut-svg { width: 180px; height: 180px; display: block; }
.pf-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.pf-donut-center .c-val { font-family: "IBM Plex Mono", monospace; font-size: 20px; font-weight: 600; }
.pf-donut-center .c-lbl { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.pf-legend { flex: 1 1 180px; min-width: 160px; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.pf-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.pf-legend-row:hover { color: var(--ember); }
.pf-legend-row .dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.pf-legend-row .lg-sym { font-family: "IBM Plex Mono", monospace; font-weight: 600; min-width: 46px; }
.pf-legend-row .lg-pct { margin-left: auto; font-family: "IBM Plex Mono", monospace; color: var(--ink-soft); }

.sec-row { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13px; }
.sec-label { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-bar { height: 9px; background: var(--down-soft); border-radius: 6px; overflow: hidden; }
.sec-fill { height: 100%; background: var(--ember); border-radius: 6px; }
.sec-pct { text-align: right; font-family: "IBM Plex Mono", monospace; color: var(--ink); }

.pf-holdings { overflow-x: auto; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pf-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pf-table th.num { text-align: right; }
.pf-table td { padding: 11px 10px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.pf-table td.num { text-align: right; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.pf-table tbody tr { cursor: pointer; transition: background .12s; }
.pf-table tbody tr:hover { background: var(--hover); }
.pf-table .tsym { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.pf-caret { display: inline-block; width: 14px; color: var(--ink-soft); font-size: 10px; transition: color .12s; }
.pf-row:hover .pf-caret { color: var(--ember); }
.pf-open { color: var(--ember); cursor: pointer; text-decoration: none; }
.pf-open:hover { text-decoration: underline; }
.pf-row.expanded { background: var(--tint-accent); }
.pf-lots-row > td { padding: 0; background: var(--tint); }
.lot-wrap { padding: 6px 10px 12px 34px; }
.lot-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lot-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lot-table th.num { text-align: right; }
.lot-table td { padding: 7px 8px; border-bottom: 1px solid var(--hair); font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lot-table td.num { text-align: right; }
.lot-table tr:last-child td { border-bottom: none; }
.lot-table .up { color: var(--juniper); }
.lot-table .down { color: var(--rust); }
.lot-table .muted { color: var(--ink-soft); }
.lot-table tr.lot-loss td:first-child { box-shadow: inset 3px 0 0 var(--rust); }
.pf-table .up { color: var(--juniper); }
.pf-table .down { color: var(--rust); }
.pf-table .muted { color: var(--ink-soft); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
  .pf-charts { grid-template-columns: 1fr; }
}

/* ============================ Watchlist ============================ */
.wl-add { display: flex; gap: 10px; margin-bottom: 8px; max-width: 460px; }
.wl-add input {
  flex: 1; padding: 11px 15px; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.wl-add input:focus { outline: none; border-color: var(--ember); box-shadow: var(--shadow), 0 0 0 3px rgba(221,122,56,.16); }
.wl-add button {
  font: inherit; font-weight: 600; padding: 0 20px; cursor: pointer; color: #fff;
  background: var(--ember); border: none; border-radius: 10px; transition: filter .12s;
}
.wl-add button:hover { filter: brightness(1.05); }
.wl-add button:disabled { opacity: .6; cursor: default; }
.wl-msg { font-size: 13px; margin-bottom: 12px; color: var(--rust); }

.wl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.wl-empty { color: var(--ink-soft); font-size: 15px; padding: 20px 0; }
.wl-card {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.wl-card:hover { transform: translateY(-2px); border-color: var(--ember); }
.wl-remove {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; line-height: 1;
  font-size: 16px; color: var(--ink-soft); background: none; border: none; border-radius: 6px; cursor: pointer;
}
.wl-remove:hover { background: var(--down-soft); color: var(--rust); }
.wl-sym { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 15px; color: var(--ember); }
.wl-name { font-size: 13px; color: var(--ink-soft); margin: 2px 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 20px; }
.wl-price { font-family: "IBM Plex Mono", monospace; font-size: 20px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.wl-today { font-size: 12px; font-weight: 500; }
.wl-today.up { color: var(--juniper); }
.wl-today.down { color: var(--rust); }
.wl-since { font-family: "IBM Plex Mono", monospace; font-size: 14px; font-weight: 600; margin: 10px 0 8px; padding: 6px 10px; border-radius: 8px; display: inline-block; }
.wl-spark { margin: 10px 0 6px; }
.wl-spark .spark { width: 100%; height: 40px; }
.wl-sectors-card { padding: 18px 20px; margin-bottom: 16px; }
.wl-since.up { color: var(--juniper); background: var(--up-soft); }
.wl-since.down { color: var(--rust); background: var(--down-soft); }
.wl-detail { font-size: 12px; color: var(--ink-soft); font-family: "IBM Plex Mono", monospace; margin-top: 3px; }

/* ============================ Synthesis ============================ */
.syn-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.syn-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.syn-card { padding: 18px 20px; }
.syn-stock { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.syn-stock:last-child { border-bottom: none; }
.syn-tkr { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 13px; color: #fff; background: var(--ember); border: none; border-radius: 7px; padding: 4px 10px; cursor: pointer; flex: 0 0 auto; transition: filter .12s; }
.syn-tkr:hover { filter: brightness(1.06); }
.syn-note { font-size: 13px; color: var(--ink-soft); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-watch { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--rust); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; cursor: pointer; flex: 0 0 auto; transition: border-color .12s, color .12s; }
.syn-watch:hover { border-color: var(--ember); color: var(--ember); }
.syn-watch.watched { color: var(--juniper); border-color: var(--juniper); cursor: default; }
.syn-book { padding: 8px 0; border-bottom: 1px solid var(--hair); }
.syn-book:last-child { border-bottom: none; }
.syn-book-title { display: block; font-weight: 600; font-size: 14px; }
.syn-book-author { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
@media (max-width: 680px) { .syn-cards { grid-template-columns: 1fr; } }
.syn-select {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; box-shadow: var(--shadow);
  max-width: 100%; cursor: pointer;
}
.syn-select:focus { outline: none; border-color: var(--ember); }
.syn-empty { color: var(--ink-soft); font-size: 15px; padding: 24px 0; }
.syn-empty code { font-family: "IBM Plex Mono", monospace; font-size: 13px; background: var(--tint-2); padding: 1px 6px; border-radius: 5px; }

/* rendered markdown */
.syn-content {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 34px 40px;
}
.syn-content > *:first-child { margin-top: 0; }
.syn-content > *:last-child { margin-bottom: 0; }
.syn-content h1 { font-family: "Fraunces", serif; font-weight: 900; font-size: 30px; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 18px; }
.syn-content h2 { font-family: "Fraunces", serif; font-weight: 600; font-size: 21px; letter-spacing: -.01em; margin: 30px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.syn-content h3 { font-weight: 600; font-size: 16px; margin: 22px 0 8px; }
.syn-content h4 { font-weight: 600; font-size: 15px; margin: 18px 0 6px; }
.syn-content h5 { font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ember); margin: 20px 0 8px; }
.syn-content h6 { font-weight: 600; font-size: 12px; color: var(--ink-soft); margin: 14px 0 6px; }
.syn-content p { margin: 0 0 15px; line-height: 1.65; }
.syn-content ul, .syn-content ol { margin: 0 0 15px; padding-left: 22px; line-height: 1.65; }
.syn-content li { margin-bottom: 6px; }
.syn-content a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.syn-content a:hover { color: var(--ember); }
.syn-content strong { font-weight: 600; }
.syn-content em { font-style: italic; color: var(--ink-soft); }
.syn-content code { font-family: "IBM Plex Mono", monospace; font-size: 13px; background: var(--tint-2); padding: 1px 6px; border-radius: 5px; }
.syn-content pre { background: rgba(43,33,28,.05); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; margin: 0 0 15px; }
.syn-content pre code { background: none; padding: 0; font-size: 12.5px; }
.syn-content blockquote { margin: 0 0 15px; padding: 4px 0 4px 18px; border-left: 3px solid var(--apricot); color: var(--ink-soft); font-style: italic; }
.syn-content hr { border: none; border-top: 1px solid var(--line); margin: 26px 0; }
.syn-content table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.syn-content th { text-align: left; font-weight: 600; padding: 9px 12px; border-bottom: 2px solid var(--line); background: var(--tint-accent); }
.syn-content td { padding: 9px 12px; border-bottom: 1px solid var(--hair); }
.syn-content tr:last-child td { border-bottom: none; }

/* ============================ Portfolio empty state ============================ */
.pf-empty { text-align: center; padding: 60px 20px 40px; }
.pf-empty[hidden] { display: none; }
.pf-empty .view-title { margin-bottom: 12px; }
.pf-empty-msg { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; max-width: 420px; margin: 0 auto 22px; }

/* ============================ Login gate ============================ */
.auth-gate { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(180deg, var(--haze-1) 0%, var(--haze-2) 100%); }
.auth-gate[hidden] { display: none; }
[data-theme="night"] .auth-gate { background: transparent; }
.auth-card { width: 100%; max-width: 380px; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 38px 32px 30px; }
.auth-mark { display: flex; justify-content: center; margin-bottom: 16px; }
.auth-title { font-family: "Fraunces", serif; font-weight: 900; font-size: 30px; letter-spacing: -.02em; margin-bottom: 6px; }
.auth-sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 24px; }
.auth-form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.auth-form label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.auth-form input { font: inherit; font-size: 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; width: 100%; box-sizing: border-box; }
.auth-form input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--tint-accent); }
.auth-send { font: inherit; font-size: 14px; font-weight: 600; color: #fff; background: var(--ember); border: none; border-radius: 9px; padding: 11px 16px; cursor: pointer; margin-top: 4px; }
.auth-send:hover { filter: brightness(1.05); }
.auth-send:disabled { opacity: .6; cursor: default; }
.auth-msg { font-size: 13px; line-height: 1.5; color: var(--juniper); margin-top: 16px; }
.auth-msg.is-error { color: var(--rust); }
.auth-foot { font-size: 11.5px; color: var(--ink-soft); margin-top: 22px; }

.sidebar-user { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; }
.sidebar-user[hidden] { display: none; }
.su-email { font-size: 11.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-out { font: inherit; font-size: 12px; font-weight: 600; color: var(--rust); background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
.su-out:hover { text-decoration: underline; }

/* ============================ Manage-holdings modal ============================ */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.modal[hidden] { display: none; }   /* critical: an author display value would otherwise override [hidden] */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20, 14, 10, .5); }
[data-theme="night"] .modal-backdrop { background: rgba(6, 8, 16, .66); }
.modal-panel { position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: calc(100vh - 80px); overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px -20px rgba(0,0,0,.4); }
.modal-head { position: sticky; top: 0; z-index: 2; background: var(--paper); display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.modal-title { font-family: "Fraunces", serif; font-weight: 600; font-size: 21px; }
.modal-close { font-size: 26px; line-height: 1; color: var(--ink-soft); background: none; border: none; cursor: pointer; border-radius: 8px; width: 34px; height: 34px; }
.modal-close:hover { color: var(--rust); background: var(--tint); }
.modal-body { padding: 20px 22px 24px; }
.mng-msg { font-size: 13px; color: var(--rust); margin-bottom: 14px; }
.mng-section { margin-bottom: 26px; }
.mng-section:last-child { margin-bottom: 0; }
.mng-sec-head { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ember); margin-bottom: 12px; }
.mng-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.mng-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mng-field-wide { grid-column: 1 / -1; }
.mng-field label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.mng-in { font: inherit; font-size: 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; width: 100%; box-sizing: border-box; }
.mng-in:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--tint-accent); }
.mng-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.mng-save { font: inherit; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--ember); border: none; border-radius: 8px; padding: 9px 18px; cursor: pointer; }
.mng-save:hover { filter: brightness(1.05); }
.mng-clear { font: inherit; font-size: 13px; color: var(--ink-soft); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; cursor: pointer; }
.mng-clear:hover { color: var(--ink); }
.mng-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mng-empty { color: var(--ink-soft); font-size: 13px; padding: 12px 0; }
.mng-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.mng-row:last-child { border-bottom: none; }
.mng-sym { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 13.5px; min-width: 56px; }
.mng-detail { flex: 1; font-size: 13px; color: var(--ink-soft); font-family: "IBM Plex Mono", monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mng-edit, .mng-del { font: inherit; font-size: 12px; font-weight: 500; background: none; border: 1px solid var(--line); border-radius: 7px; padding: 4px 11px; cursor: pointer; flex: 0 0 auto; }
.mng-edit { color: var(--ink-soft); }
.mng-edit:hover { color: var(--ember); border-color: var(--ember); }
.mng-del { color: var(--rust); }
.mng-del:hover { background: var(--down-soft); }
@media (max-width: 560px) { .mng-form { grid-template-columns: repeat(2, 1fr); } }

.pf-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pf-manage { font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: var(--ember); border: none; border-radius: 9px; padding: 8px 16px; cursor: pointer; transition: filter .12s; }
.pf-manage:hover { filter: brightness(1.05); }

/* ============================ Responsive ============================ */
@media (max-width: 760px) {
  .layout { flex-direction: column; align-items: stretch; }
  .content { width: 100%; }
  .view { width: 100%; max-width: 100%; }

  /* Top bar: brand + theme + sign-out. The nav moves to a bottom tab bar. */
  .sidebar {
    position: sticky; top: 0; z-index: 40;
    width: 100%; flex-basis: auto; height: auto;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 10px 16px; border-right: none; border-bottom: 1px solid var(--line);
  }
  .brand-sub { display: none; }
  .sidebar-foot { display: none; }
  .sidebar-user { flex-direction: row; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 5px 8px; }
  .su-email { display: none; }

  /* Bottom tab bar (native app pattern) */
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    flex-direction: row; justify-content: space-around; gap: 0; margin: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--panel); border-top: 1px solid var(--line);
  }
  .nav-item {
    flex: 1 1 0; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border-radius: 10px; font-size: 10px; font-weight: 600;
  }
  .nav-item span { display: block; }        /* labels under the icons */
  .nav-item svg { width: 22px; height: 22px; }
  .nav-item:hover { background: none; }
  .nav-item.active, .nav-item.active:hover { background: none; color: var(--ember); }

  /* Clear the fixed bottom bar */
  .content { padding: 18px 16px calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* Manage modal fills the screen on small devices */
  .modal { padding: 0; align-items: stretch; }
  .modal-panel { max-width: none; max-height: none; min-height: 100dvh; border-radius: 0; border: none; }

  /* single-column tweaks */
  .cards { grid-template-columns: 1fr; }
  .stock-quote { text-align: left; }
  .price-row { justify-content: flex-start; }
  .amp-legend { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/* ---- Portfolio blocks (per-account cards) -------------------------------- */
.pf-blocks-head { margin-top: 26px; margin-bottom: 6px; }
#pf-blocks { display: flex; flex-direction: column; gap: 14px; }
.pf-block { padding: 16px 18px; }
.pf-block-head { display: flex; align-items: center; gap: 12px; }
.pf-block-caret { background: none; border: none; color: var(--ink-soft); font-size: 12px; cursor: pointer; padding: 2px 4px; line-height: 1; transition: color .12s; }
.pf-block-caret:hover { color: var(--ember); }
.pf-block-name { flex: 1; min-width: 0; max-width: 340px; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 5px 8px; transition: border-color .12s, background .12s; }
.pf-block-name:hover { border-color: var(--line); }
.pf-block-name:focus { outline: none; border-color: var(--ember); background: var(--paper); box-shadow: 0 0 0 3px var(--tint-accent); }
.pf-block-sub { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; color: var(--ink); }
.pf-block-del { background: none; border: none; color: var(--ink-soft); font-size: 14px; cursor: pointer; opacity: .55; padding: 4px 6px; border-radius: 7px; transition: opacity .12s, background .12s; }
.pf-block-del:hover { opacity: 1; background: var(--down-soft); }
.pf-block-body { margin-top: 12px; overflow-x: auto; }
.pf-block-cash { margin-top: 6px; }
.pf-cash-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; font-size: 14px; border-top: 1px solid var(--hair); }
.pf-cash-row .num { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.pf-cash-lbl { color: var(--ink-soft); }
.pf-block-empty { padding: 16px 10px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.pf-add-block { margin-top: 14px; width: 100%; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: none; border: 1px dashed var(--line); border-radius: 9px; padding: 11px 16px; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.pf-add-block:hover { color: var(--ember); border-color: var(--ember); background: var(--tint-accent); }
.lot-table .lot-act { text-align: right; width: 34px; }
.lot-del { background: none; border: none; color: var(--ink-soft); cursor: pointer; opacity: .5; font-size: 13px; padding: 2px 5px; border-radius: 6px; transition: opacity .12s, background .12s; }
.lot-del:hover { opacity: 1; background: var(--down-soft); }

/* ---- Manage-holdings scope filter --------------------------------------- */
.mng-scope { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
.mng-scope label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.mng-scope select { max-width: 260px; }

/* ---- Explore: back-to-home from a stock detail --------------------------- */
.detail-back { background: none; border: none; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 0; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 5px; transition: color .12s; }
.detail-back:hover { color: var(--ember); }

/* ---- Portfolio: account filter (donut/summary focus) -------------------- */
.pf-filter { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; cursor: pointer; transition: border-color .12s; }
.pf-filter:hover { border-color: var(--ember); }
.pf-filter:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--tint-accent); }

/* ---- Block glow: red for net-negative or down-today, green for up-today ---- */
.pf-block { transition: box-shadow .25s ease; }
.pf-block.glow-green { box-shadow: var(--shadow), 0 0 0 1px rgba(78, 122, 80, 0.30), 0 0 18px -3px rgba(78, 122, 80, 0.50); }
.pf-block.glow-red   { box-shadow: var(--shadow), 0 0 0 1px rgba(201, 106, 58, 0.30), 0 0 18px -3px rgba(201, 106, 58, 0.50); }

/* ---- Watchlist in Explore right column (compact) ------------------------ */
.market-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.market-watchlist-card { padding: 20px 22px; }
.market-watchlist-card .wl-add { max-width: none; margin-bottom: 6px; }
.market-watchlist-card .wl-list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.wl-row { padding: 10px 2px; border-bottom: 1px solid var(--hair); cursor: pointer; }
.wl-row:last-child { border-bottom: none; }
.wl-row-sym { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wl-row-tkr { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 15px; color: var(--ember); }
.wl-row:hover .wl-row-tkr { text-decoration: underline; }
.wl-row .wl-remove { position: static; background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 17px; line-height: 1; opacity: .5; padding: 0 4px; }
.wl-row .wl-remove:hover { opacity: 1; color: var(--rust); background: none; }
.wl-row-px { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.wl-row-price { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 14px; }
.wl-row-day { font-size: 12px; font-weight: 500; }
.wl-row-day.up { color: var(--juniper); } .wl-row-day.down { color: var(--rust); }
.wl-row-since { font-size: 12px; font-weight: 500; margin-top: 3px; }
.wl-row-since.up { color: var(--juniper); } .wl-row-since.down { color: var(--rust); }

/* ---- Curated publication feeds (NYT/WSJ/Economist) ---------------------- */
.market-left { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.market-feeds-card { padding: 20px 22px; }
.market-feeds-card .card-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.feed-filter { display: flex; gap: 4px; }
.feed-src { font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.feed-src:hover { color: var(--ember); border-color: var(--ember); }
.feed-src.active { color: var(--ember); border-color: var(--ember); background: var(--tint-accent); }
.news-feed-src { font-weight: 600; color: var(--ink-soft); }
/* Cap both news lists so a long feed doesn't unbalance the columns */
.market-news-card .news-list, .market-feeds-card .news-list { max-height: 380px; overflow-y: auto; }

/* ---- Block reorder arrows ------------------------------------------------ */
.pf-block-move { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; }
.pf-move { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 9px; line-height: 1; padding: 1px 5px; transition: color .12s; }
.pf-move:hover:not(:disabled) { color: var(--ember); }
.pf-move:disabled { opacity: .3; cursor: default; }
.pf-block-foot { display: none; }   /* actions live in the header on desktop */

/* ---- Subscriptions tracker ---------------------------------------------- */
.sub-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.sub-total-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.sub-total-val { font-family: "IBM Plex Mono", monospace; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sub-total-lbl { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.sub-form-card { padding: 18px 20px; margin-bottom: 18px; }
.sub-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.sub-add-btn { font: inherit; font-weight: 600; color: var(--paper); background: var(--ember); border: none; border-radius: 9px; padding: 10px 22px; cursor: pointer; transition: filter .12s; }
.sub-add-btn:hover { filter: brightness(1.05); }
.sub-add-btn:disabled { opacity: .6; cursor: default; }
.sub-list { display: flex; flex-direction: column; }
.sub-head-row, .sub-row { display: grid; grid-template-columns: 2fr 1.3fr 1fr 46px 34px; gap: 12px; align-items: center; padding: 12px 14px; }
.sub-head-row { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.sub-head-row .num, .sub-row .num { text-align: right; }
.sub-row { border-bottom: 1px solid var(--hair); }
.sub-row:last-child { border-bottom: none; }
.sub-row.paused { opacity: .5; }
.sub-name { font-weight: 600; }
.sub-name.sub-edit { font-family: inherit; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 5px 7px; width: 100%; min-width: 0; transition: border-color .12s, background .12s; }
.sub-name.sub-edit:hover { border-color: var(--line); }
.sub-name.sub-edit:focus { outline: none; border-color: var(--ember); background: var(--paper); box-shadow: 0 0 0 3px var(--tint-accent); }
.sub-rate, .sub-mo { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.sub-cad { color: var(--ink-soft); font-size: 12px; }
.sub-empty { color: var(--ink-soft); font-size: 15px; padding: 24px 0; text-align: center; }
.sub-del { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 14px; opacity: .55; padding: 4px 6px; border-radius: 7px; transition: opacity .12s, background .12s; justify-self: center; }
.sub-del:hover { opacity: 1; background: var(--down-soft); }
.sub-toggle { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; }
.sub-toggle input { opacity: 0; width: 0; height: 0; }
.sub-slider { position: absolute; inset: 0; background: var(--line); border-radius: 22px; transition: background .15s; }
.sub-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: var(--paper); border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sub-toggle input:checked + .sub-slider { background: var(--juniper); }
.sub-toggle input:checked + .sub-slider::before { transform: translateX(16px); }

/* subscription list filter */
.sub-listhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sub-sort { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.sub-sort:hover { border-color: var(--ember); }

/* ---- Mobile chart/table fit ---------------------------------------------- */
.amp-svg { width: 100%; height: auto; display: block; }   /* scale the P/E chart to its card */
@media (max-width: 760px) {
  /* Condense the holdings table on phones — Company and Avg cost drop off (still on
     desktop + in the tap-to-expand lots). Weight stays visible; the table scrolls
     horizontally for the rest. Child combinators keep this off the nested lot table. */
  .pf-table > thead > tr > th:nth-child(2), .pf-table > tbody > tr > td:nth-child(2),
  .pf-table > thead > tr > th:nth-child(4), .pf-table > tbody > tr > td:nth-child(4) { display: none; }
}

/* ---- Mobile polish: tidier top bar, side-by-side header buttons,
       smaller tiles, and the value chart above the tiles ------------------- */
@media (max-width: 760px) {
  /* Top bar: smaller brand + controls so it sits cleanly on one line */
  .brand { gap: 8px; }
  .brand-mark { width: 12px; height: 20px; }
  .brand-name { font-size: 16px; }
  .theme-toggle { width: auto; margin-bottom: 0; padding: 6px 10px; font-size: 12px; }
  .sidebar-user { padding: 4px 6px; }
  .su-out { font-size: 11px; white-space: nowrap; }

  /* Float the value-over-time chart above the summary tiles */
  #pf-content { display: flex; flex-direction: column; }
  .pf-header { order: -2; flex-direction: column; align-items: stretch; gap: 12px; }
  .pf-history { order: -1; }

  /* Header buttons side by side: Manage holdings (left) + filter (right) */
  .pf-header-right { flex-direction: row-reverse; align-items: stretch; gap: 8px; }
  .pf-header-right > * { flex: 1; }

  /* More compact summary tiles */
  .pf-summary { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 16px; padding-bottom: 2px; }
  .pf-summary::-webkit-scrollbar { display: none; }
  .pf-tile { flex: 0 0 auto; min-width: 140px; padding: 12px 13px; }
  .pf-tile-val { font-size: 18px; }
  .pf-tile-lbl { font-size: 10px; }
}

/* ---- Mobile: centered donut, tidier subscription rows ------------------- */
@media (max-width: 760px) {
  .pf-donut-wrap { justify-content: center; }
  .pf-legend { flex-basis: 100%; max-height: none; }

  .sub-head-row, .sub-row { grid-template-columns: 1.7fr 1fr 1fr 36px 26px; gap: 6px; padding: 9px 2px; }
  .sub-name { font-size: 12.5px; line-height: 1.25; }
  .sub-rate, .sub-mo { font-size: 11.5px; white-space: nowrap; }
  .sub-cad { font-size: 9.5px; }
  .sub-head-row { font-size: 9px; letter-spacing: .02em; }
  .sub-total-val { font-size: 22px; }
}

/* ---- Mobile: bigger tap targets + block name on its own line ------------ */
@media (max-width: 760px) {
  /* Easier-to-tap dropdowns and small controls */
  .pf-filter, .sub-sort, .mng-in { padding: 11px 12px; font-size: 15px; }
  .feed-src { padding: 7px 12px; font-size: 12px; }
  .pf-block-caret { padding: 7px 10px; font-size: 14px; }
  .pf-block-del { padding: 8px 10px; font-size: 16px; }
  .pf-move { padding: 4px 11px; font-size: 11px; }

  /* Clean one-line header (name + amount); reorder + delete live in the card body */
  .pf-block-head { flex-wrap: nowrap; }
  .pf-block-name { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 15px; }
  .pf-block-sub { font-size: 14px; }
  .pf-block-head .pf-block-move, .pf-block-head .pf-block-del { display: none; }
  .pf-block-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 10px 4px 2px; margin-top: 8px; border-top: 1px solid var(--hair); }
  .pf-block-foot .pf-move { font-size: 12px; padding: 5px 12px; }
  .pf-block-foot .pf-block-del { padding: 6px 10px; font-size: 17px; }
  .welcome-sub { display: none; }
  .welcome:not([hidden]) { display: flex; flex-direction: column; gap: 20px; }   /* :not([hidden]) so opening a stock still hides the market home */
  .welcome-hero { order: -1; margin: 0; }   /* mobile only: title above indices, even spacing */
}

/* ---- Desktop: slick, subtle scrollbars (replaces the chunky high-contrast native
       ones). Scoped to >=761px so mobile keeps its overlay/hidden bars untouched. --- */
@media (min-width: 761px) {
  * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); background-clip: padding-box; }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-corner { background: transparent; }
}