@font-face{font-family:'IBM Plex Mono';src:url('/static/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/static/fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/static/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/static/fonts/IBMPlexSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/static/fonts/IBMPlexSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/static/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --bg:#0b0c0e; --panel:#131518; --panel2:#1a1d21; --line:#24272c; --line2:#33373d;
  --fg:#e8eaec; --fg2:#9aa0a6; --fg3:#737a81;
  --accent:#e3a44e; --accentSoft:#3a2d19; --up:#46c08a; --down:#e2685f; --rowhover:#1c1f23;
  --rate-strong:#038c55; --rate-buy:#04a263;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
}
[data-theme="light"]{
  --bg:#f6f5f3; --panel:#ffffff; --panel2:#f1efec; --line:#e3e0da; --line2:#cbc7bf;
  --fg:#16181a; --fg2:#5f656b; --fg3:#6d7176;
  --accent:#a96a09; --accentSoft:#f7ecd8; --up:#158057; --down:#c03b2f; --rowhover:#f4f2ef;
  --rate-strong:#03673f; --rate-buy:#037b4b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--fg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:100;left:12px;top:8px;transform:translateY(-150%);background:var(--accent);color:#0b0c0e;padding:8px 12px;font:600 11px/1 var(--mono)}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--mono)}
.up{color:var(--up)} .down{color:var(--down)} .muted{color:var(--fg3)}

.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:50px;
  padding:0 20px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(12px)}
.topbar-main,.topbar-actions,.tabs{display:flex;align-items:center}
.topbar-main{gap:18px;min-width:0}.topbar-actions{gap:10px}.tabs{gap:4px;flex-wrap:wrap}
.topbar-divider{width:1px;height:18px;background:var(--line2)}
.brand{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);letter-spacing:.2em}
.brand i{width:8px;height:8px;background:var(--accent);display:block}
.tab{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--fg2);padding:6px 10px;cursor:pointer}
.tab.on{color:#0b0c0e;background:var(--accent)}
.btn{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--fg2);
  border:1px solid var(--line2);background:transparent;padding:6px 10px;cursor:pointer}
.btn:hover{color:var(--fg);border-color:var(--fg3)}
.btn:disabled{opacity:.55;cursor:wait}

.auth{min-height:100vh;display:flex;align-items:center;justify-content:center}
.auth-card{width:344px;display:flex;flex-direction:column;gap:26px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--fg2)}
.field input{width:100%;background:var(--panel);border:1px solid var(--line2);color:var(--fg);
  font:400 13px/1 var(--mono);padding:11px 12px;outline:none}
.field input:focus{border-color:var(--accent)}
.submit{margin-top:6px;background:var(--accent);border:none;color:#0b0c0e;
  font:600 11px/1 var(--mono);letter-spacing:.14em;padding:13px 0;cursor:pointer}
.submit:hover{filter:brightness(1.12)}
.error{display:flex;gap:9px;border-left:2px solid var(--down);background:var(--panel);
  padding:10px 12px;font:400 12px/1.4 var(--mono);color:var(--down)}

.wrap{padding:24px 20px 60px}
h1{font:600 18px/1.3 var(--sans);margin:0 0 16px}

/* Sits outside .wrap (after the table's closing div), so it needs its own
   matching gutter or the button/count sit flush against the viewport edge. */
.showall-wrap{padding:0 20px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* Stat strip */
/* Story: a quiet, collapsible aside. A one-line strip by default; a rail beside work pages on wide screens. */
.story-card{border:1px solid var(--line);background:var(--panel);border-radius:6px}
.story-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:40px;padding:8px 14px}
.story-card>summary::-webkit-details-marker{display:none}
.story-card>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.story-title{font:500 15px/1.4 var(--sans);color:var(--fg);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-card[open] .story-title{white-space:normal}
.story-lede{display:none;color:var(--fg2);font-size:13px;line-height:1.6}
.story-meta{display:contents}
.story-kind{order:-1;font:500 11px/1.4 var(--mono);color:var(--fg2);white-space:nowrap}
.story-toggle{font-size:12px;color:var(--accent);white-space:nowrap}
.story-card[open] .when-closed,.story-card:not([open]) .when-open{display:none}
.story-full{padding:0 14px 16px;max-width:75ch}
.story-body,.story-punchline,.story-reflection{line-height:1.7;margin:10px 0}
.story-body{color:var(--fg2)}
.story-punchline{font-weight:500}
.story-reflection{color:var(--fg2);padding-top:12px;border-top:1px solid var(--line)}
.story-reflection strong{color:var(--fg);display:block;font-size:12px;margin-bottom:3px}
.story-source{font-size:12px;overflow-wrap:anywhere}
.story-foot{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:12px;font-size:12px}
.story-foot .hoot{margin-top:0}
.story-foot .hoot-button svg{width:44px;height:auto}
.story-note{margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:6px;background:var(--panel);font-size:13px}
.story-strip{display:block;margin:16px 20px 0}
.with-story{display:block}
.page-main{min-width:0}
.story-pane{display:block;margin:0 20px 24px}
.table-scroll{overflow-x:auto}
.curiosity-quiet .story-card .hoot{display:none}
.story-label{font:500 10px/1.5 var(--mono);letter-spacing:.14em;color:var(--accent)}
.curiosity-intro,.cabinet-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.hoot{display:flex;align-items:center;gap:12px;max-width:430px;margin-top:12px}
.hoot-button{border:0;background:transparent;cursor:pointer;padding:0;flex-shrink:0;border-radius:12px}
.hoot-button:hover{background:var(--accentSoft);transform:rotate(-3deg)}
.hoot-line{color:var(--fg2);font-size:12px;line-height:1.5;margin:5px 0}
.hoot-button svg{display:block}.hat-party,.hat-space{display:none}
.hoot-button[data-hat="party"] .hat-scholar,.hoot-button[data-hat="space"] .hat-scholar{display:none}
.hoot-button[data-hat="party"] .hat-party,.hoot-button[data-hat="space"] .hat-space{display:block}
.quiet-switch{font-size:12px;color:var(--fg2);display:flex;align-items:center;gap:7px;cursor:pointer}
.quiet-switch{margin-top:8px}.curiosity-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px}
.curiosity-actions .btn,.cabinet-feedback .btn{min-height:36px;line-height:1.4;letter-spacing:0;font:500 12px/1.4 var(--sans)}
.btn[aria-pressed="true"]{background:var(--accentSoft);color:var(--accent);border-color:var(--accent)}
.curiosity-status{min-height:18px;font-size:12px;color:var(--fg2);margin:8px 0 0}
.quiz-panel{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.quiz-panel summary,.cabinet-story summary{cursor:pointer;color:var(--accent);padding:8px 0}
.quiz-choice{background:var(--panel2);padding:14px;margin:10px 0;border:1px solid var(--line);border-radius:6px}
.quiz-guess{font:inherit;text-align:left;line-height:1.6;width:100%;letter-spacing:0;padding:10px}
.quiz-verdict{color:var(--accent);font-weight:600}.quiz-error{color:var(--down)}
.cabinet h1{font-size:30px;margin:10px 0}.cabinet-heading{margin-bottom:20px}
.cabinet-collections{display:flex;flex-wrap:wrap;gap:10px}.cabinet-collections .btn{line-height:1.5}
.cabinet-filters{display:flex;gap:14px;align-items:end;flex-wrap:wrap;background:var(--panel);padding:18px;border:1px solid var(--line)}
.cabinet-filters label{display:flex;flex-direction:column;gap:6px;color:var(--fg2);flex:1 1 180px;min-width:0}
.cabinet-filters input,.cabinet-filters select{font:inherit;min-width:0;width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--line2);padding:10px}
.cabinet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px}
.cabinet-story{min-width:0;background:var(--panel);border:1px solid var(--line2);padding:22px;border-radius:8px;overflow-wrap:anywhere}
.cabinet-story h2{font-size:20px;line-height:1.3;margin:12px 0}.cabinet-story p{line-height:1.7}
.cabinet-feedback{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.feedback-status{font-size:12px;color:var(--fg2);width:100%}

.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:20px}
.stat{background:var(--panel);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.run-title{font:600 20px/1.3 var(--sans);margin:0 0 16px}
.run-stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));background:transparent;border:0;gap:0}
.run-stats .stat{border:1px solid var(--line);margin:0 -1px -1px 0}
.stat .k{font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--fg2)}
.stat .v{font:600 16px/1 var(--mono)}

/* Movers chip row */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);
  background:var(--panel);padding:6px 10px;font:500 11px/1 var(--mono);letter-spacing:.04em}
.chip b{font-weight:600}
.chip.up{color:var(--up)} .chip.up b{color:var(--up)}
.chip.down{color:var(--down)} .chip.down b{color:var(--down)}

/* Filter bar */
.filterbar{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.filterbar .search{background:var(--panel);border:1px solid var(--line2);color:var(--fg);
  font:400 12px/1 var(--mono);padding:9px 12px;outline:none;min-width:240px}
.filterbar .search:focus{border-color:var(--accent)}
.toggle{display:flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);
  letter-spacing:.08em;color:var(--fg2);cursor:pointer}
.seg{display:flex;border:1px solid var(--line2)}
.seg-btn{font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--fg2);
  background:transparent;border:none;padding:8px 12px;cursor:pointer}
.seg-btn.on{color:#0b0c0e;background:var(--accent)}
.chipfilter{flex-wrap:wrap;border:none}
.chip-btn{border:1px solid var(--line2);margin-left:-1px}
.chip-btn.on{color:#0b0c0e;background:var(--accent);border-color:var(--accent)}
.clear-filters{margin-left:auto}
.table-meta{min-height:18px;margin:-2px 0 8px;font-size:10px;letter-spacing:.06em}

.ext-link{font:600 9px/1 var(--mono);color:var(--fg3);text-decoration:none;
  margin-left:4px;padding:1px 3px;border:1px solid var(--line2);vertical-align:middle}
.ext-link:hover{color:var(--accent);border-color:var(--accent)}

/* Table */
table{width:100%;border-collapse:collapse;font:13px/1.4 var(--sans)}
thead th{text-align:left;font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--fg2);
  border-bottom:1px solid var(--line2);padding:8px 10px;white-space:nowrap}
th.r,td.r{text-align:right}
/* Sortable column headers: neutral affordance */
thead th[data-sort]{cursor:pointer;position:relative;padding-right:20px}
thead th[data-sort]:focus-visible{outline-offset:-2px;background:var(--rowhover)}
thead th[data-sort]::after{content:'⇅';position:absolute;right:6px;opacity:.3;transition:opacity 150ms}
thead th[data-sort]:hover::after{opacity:.6}
thead th.r[data-sort]{padding-right:22px;padding-left:10px}
/* Active sort indicators */
thead th[data-dir="asc"]::after{content:'↑';opacity:1;color:var(--accent)}
thead th[data-dir="desc"]::after{content:'↓';opacity:1;color:var(--accent)}
thead th[data-dir]::after{transition:opacity 150ms,color 150ms}
tbody td{padding:9px 10px;border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--rowhover)}
.datatable td.company>span{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.datatable td.pincol,.datatable th.pincol{width:28px;padding-left:6px;padding-right:0}

.pin{background:transparent;border:none;color:var(--fg3);cursor:pointer;font-size:14px;
  line-height:1;padding:2px}
.pin:hover{color:var(--accent)}
.pin.on{color:var(--accent)}

.upside-bar{position:relative;display:inline-block;width:60px;height:4px;background:var(--line2);
  vertical-align:middle;margin-right:8px}
.upside-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--up);display:block}

.sector-cell,.price-cell{color:var(--fg2)}
.analysts-cell{color:var(--fg3)}
.now-cell{white-space:nowrap}
.now-cell .ext{display:block;font-size:.72em;color:var(--fg3);letter-spacing:.03em}

svg.spark{display:block;overflow:visible}
svg.spark polyline{fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.spark .spark-mid{stroke:var(--line2);stroke-width:1;stroke-dasharray:2 3}
svg.spark.spark-up polyline{stroke:var(--up)}
svg.spark.spark-down polyline{stroke:var(--down)}
svg.spark.spark-flat polyline{stroke:var(--fg3)}
svg.spark .spark-end{stroke:var(--panel);stroke-width:1.25}
svg.spark-up .spark-end{fill:var(--up)}
svg.spark-down .spark-end{fill:var(--down)}
svg.spark-flat .spark-end{fill:var(--fg3)}

.rating-strongbuy{color:var(--rate-strong);font-weight:600}
.rating-buy{color:var(--rate-buy)}
.rating-hold{color:var(--fg2)}
.rating-sell{color:var(--down)}
.rating-strongsell{color:var(--down);font-weight:600}
.rating-neutral{color:var(--fg3)}

.group-head{font:600 10px/1 var(--mono);letter-spacing:.1em;color:var(--fg2);
  background:var(--rowhover);padding:8px 10px;border-bottom:1px solid var(--line2)}

/* Detail page */
.detail{padding:20px 28px 60px;max-width:1720px;margin:0 auto}
.detail-card{border:1px solid var(--line);background:var(--panel)}
.detail-hero{margin-bottom:14px;padding:18px 20px 0}
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:16px}
.detail-title-row{display:flex;align-items:center;gap:10px}
.detail-title-row h1{font:600 28px/1 var(--mono);letter-spacing:-.02em;margin:0}
.detail-company{font:400 12px/1.3 var(--sans);margin:6px 0 0}
.detail-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.detail-actions .pin{font:600 10px/1 var(--mono);letter-spacing:.08em;border:1px solid var(--line2);padding:7px 10px}
.badge{display:inline-block;font:600 9px/1 var(--mono);letter-spacing:.1em;
  color:var(--up);border:1px solid color-mix(in srgb,var(--up) 45%,var(--line));padding:4px 7px}
.detail-metrics{display:grid;grid-template-columns:1.35fr repeat(3,1fr);margin:0 -20px}
.metric{min-height:78px;padding:14px 20px;border-top:1px solid var(--line);border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:7px}
.metric:last-child{border-right:0}.metric.primary{background:var(--panel2)}
.metric .k{font:500 9px/1 var(--mono);letter-spacing:.12em;color:var(--fg2)}
.metric .v{font:600 20px/1 var(--mono)}.metric.primary .v{font-size:28px}
.metric-note{font:500 9px/1 var(--mono);letter-spacing:.06em}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(480px,.85fr);gap:14px;align-items:start}
.why-card{grid-row:span 2;padding:18px 20px}
.trend-card,.history-card{padding:18px 18px 12px}
.card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-heading h2{font:600 10px/1 var(--mono);letter-spacing:.13em;color:var(--fg2);margin:0}
.card-heading>span{font:500 9px/1 var(--mono);letter-spacing:.08em}

.runlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.runlist li a{display:block;padding:8px 10px;border:1px solid var(--line);font:13px/1 var(--mono)}
.runlist li a:hover{background:var(--rowhover)}
.chart-wrap{overflow:hidden;margin:0}
.history-chart{display:block;min-width:0;width:100%;height:255px}
.history-chart .chart-grid{stroke:var(--line);stroke-width:1}
.history-chart .chart-zero{stroke:var(--fg3);stroke-width:1;stroke-dasharray:4 4}
.history-chart .chart-axis,.history-chart .chart-empty{fill:var(--fg3);font:500 10px/1 var(--mono)}
.history-chart .chart-area{fill:url(#chart-area-fill)}
.history-chart .chart-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.history-chart .chart-dot{fill:var(--panel);stroke:var(--accent);stroke-width:1.5}
.history-chart .chart-dot.latest{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.history-scroll{max-height:260px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.history-card .history-table{font-size:12px}
.history-card thead{position:sticky;top:0;background:var(--panel);z-index:1}
.history-card tbody td{padding:7px 10px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .hoot-button:hover{transform:none}
}

/* ---- WHY THE RATING (stock detail) ---------------------------------- */
.why{margin:0}
.target-range{margin:0 0 14px}
.tr-bar{position:relative;height:8px;background:var(--panel2);border:1px solid var(--line2)}
.tr-tick{position:absolute;top:-3px;width:2px;height:14px;background:var(--fg3);margin-left:-1px}
.tr-tick.mean{background:var(--accent)}
.tr-price{position:absolute;top:-5px;width:10px;height:18px;margin-left:-5px;background:var(--fg);border-radius:2px}
.tr-labels{display:flex;justify-content:space-between;gap:8px;margin-top:6px;
  font:500 10px/1.4 var(--mono);letter-spacing:.06em;color:var(--fg2);flex-wrap:wrap}
.rating-bars{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.rating-row{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:8px;font:500 10px/1 var(--mono);color:var(--fg2)}
.rating-bar{display:flex;height:16px;background:var(--panel2);overflow:hidden}
.rating-bar span{display:flex;align-items:center;justify-content:center;font:600 10px/1 var(--mono);color:#0b0c0e;min-width:0}
.rating-bar .sb{background:var(--up)} .rating-bar .b{background:var(--up);opacity:.7}
.rating-bar .h{background:var(--fg3)} .rating-bar .s{background:var(--down);opacity:.7} .rating-bar .ss{background:var(--down)}
.why .summary{font:500 12px/1.4 var(--mono);margin:0 0 12px}
#analyst-body{max-height:460px;overflow:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.actions{list-style:none;margin:0 0 12px;padding:0;font:500 12px/1.5 var(--mono)}
.actions li{padding:6px 0;border-bottom:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.actions .d{color:var(--fg3)} .actions .up{color:var(--up)} .actions .down{color:var(--down)}
.why .eps{font:500 12px/1.5 var(--mono);margin:0 0 12px}
.valuation{display:flex;gap:16px;flex-wrap:wrap;font:500 12px/1 var(--mono)}
.valuation b{font-weight:500;color:var(--fg2);letter-spacing:.08em;margin-right:4px}

/* Detail navigation and responsive reading space. */
.portfolio{max-width:1720px;margin:auto}
.settings-workspace{max-width:1320px}
.settings-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:24px;align-items:start}
.settings-badge{font:11px/1.5 var(--mono);background:var(--accentSoft);color:var(--accent);padding:6px 10px;border-radius:20px}
.recipient-list{list-style:none;margin:20px 0 28px;padding:0}
.recipient-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.recipient-list small{margin-left:auto;color:var(--fg2);white-space:nowrap}
.recipient-avatar{flex:0 0 32px;display:grid;place-items:center;height:32px;border-radius:50%;background:var(--panel2);color:var(--accent);font-weight:600}
.settings-label{font-weight:600}.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.settings-facts{margin:0}.settings-facts dt{font-weight:600;margin-top:18px}.settings-facts dd{margin:5px 0 0;color:var(--fg2);line-height:1.7}
@media(max-width:800px){.settings-grid{grid-template-columns:minmax(0,1fr);gap:0}.recipient-list small{display:none}.settings-actions .btn{flex:1}.recipient-list li>span:nth-child(2){min-width:0}}
.portfolio-nav{max-width:1680px;margin:24px auto 0;padding:0 20px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.portfolio-nav a{padding:10px 15px;color:var(--fg2);border-radius:7px;font-weight:500;white-space:nowrap}
.portfolio-nav a:hover{background:var(--panel2);color:var(--fg)}
.portfolio-nav a[aria-current="page"]{background:var(--accentSoft);color:var(--accent)}
.workspace-private{margin-left:auto;color:var(--fg2);font:11px/1.5 var(--mono)}
.portfolio-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}
.portfolio .eyebrow{font:500 10px/1.5 var(--mono);letter-spacing:.15em;color:var(--accent);margin:0 0 8px}
.portfolio h1{font:600 clamp(26px,3vw,36px)/1.2 var(--sans);letter-spacing:-.035em;margin:0 0 12px}
.portfolio h2{font:600 17px/1.4 var(--sans);letter-spacing:0}
.portfolio .detail-card{border-radius:12px;margin-bottom:20px;padding:24px;background:var(--panel);border:1px solid var(--line)}
.portfolio .detail-card p{line-height:1.7}
.portfolio .btn{border-radius:6px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;min-height:42px;line-height:1.4}
.portfolio .primary-action{background:var(--accent);color:var(--bg);border-color:var(--accent);white-space:nowrap}
.portfolio .stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
.portfolio .stat .v{display:block;font:600 28px/1.3 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.04em;margin-top:8px}
.portfolio .stats{gap:12px;margin-bottom:24px;background:transparent;border:0}
.portfolio textarea{width:100%;resize:vertical;min-height:100px;font:14px/1.6 var(--sans);padding:12px;background:var(--bg);color:var(--fg);border:1px solid var(--line2);border-radius:6px}
.portfolio td{font-variant-numeric:tabular-nums}
.portfolio [role="alert"]{padding:12px 16px;border:1px solid var(--down);background:var(--panel2);border-radius:4px}
.portfolio [role="alert"]::before{content:"Error";color:var(--down);font-weight:600;margin-right:8px}
.position-warning{padding:10px 14px;border:1px solid var(--line2);background:var(--panel2);border-radius:4px;margin:8px 0}
.portfolio [role="status"]{padding:14px 16px;border:1px solid var(--line2);background:var(--panel2);color:var(--fg2);font-size:13px;border-radius:4px}
.portfolio-context{color:var(--fg2);font-size:13px;line-height:1.6}
.portfolio .stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px}
.portfolio-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(230px,1fr);gap:16px}
.portfolio-positions,.portfolio-allocation{padding:18px;min-width:0}
.portfolio-positions{overflow:auto}
.allocation-label{display:flex;justify-content:space-between;font:12px/1.5 var(--mono);margin-top:14px}
.portfolio meter{display:block;width:100%;height:12px;accent-color:var(--accent)}
@media(max-width:1100px){.portfolio-grid{grid-template-columns:1fr}}
.detail-back{display:inline-block;margin-bottom:14px;font:500 12px/1.4 var(--sans)}
.chart-note{margin:8px 0 0;font:12px/1.5 var(--sans);color:var(--fg2)}
.card-heading{flex-wrap:wrap;line-height:1.4}
.card-heading>span{line-height:1.4}
.detail-card{border-radius:6px}
.plan-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:20px 0}
.plan-fields label{display:flex;flex-direction:column;gap:8px}
.plan-fields input,.plan-fields select{font:inherit;padding:10px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:inherit;min-width:0}
.plan-form details{margin:18px 0}.plan-form summary{cursor:pointer;padding:10px 0}
.plan-form button{margin-top:12px}
.valuation{border-top:1px solid var(--line);padding-top:14px;margin-top:14px;line-height:1.5}
@media (min-width:701px) and (max-width:1100px){
  .detail-grid{grid-template-columns:minmax(0,1fr)}
  .why-card{grid-row:auto}
  .history-chart{height:auto;max-height:300px}
}

/* Wide screens: the story becomes a quiet rail beside work pages (never in Less whimsy mode) */
@media (min-width: 1280px) {
  html:not(.curiosity-quiet) .with-story{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,21vw,320px);gap:32px;align-items:start;padding-right:20px}
  html:not(.curiosity-quiet) .story-pane{position:sticky;top:66px;margin:24px 0 0;max-height:calc(100vh - 86px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  html:not(.curiosity-quiet) .story-pane .story-card>summary{display:block;padding:14px 16px}
  html:not(.curiosity-quiet) .story-pane .story-title{display:block;white-space:normal}
  html:not(.curiosity-quiet) .story-pane .story-lede{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px}
  html:not(.curiosity-quiet) .story-pane .story-card[open] .story-lede{display:none}
  html:not(.curiosity-quiet) .story-pane .story-meta{display:flex;justify-content:space-between;gap:10px;margin-top:10px}
  html:not(.curiosity-quiet) .story-pane .story-full{padding:0 16px 16px}
}
@media (max-width: 700px) {
  .datatable td.company>span{white-space:normal;max-width:none}
  .wrap{padding:16px 12px 48px}
  .showall-wrap{padding:0 12px 20px}

  /* Stat strip: seven tiles in a row does not fit a phone. */
  .stats{grid-template-columns:1fr 1fr}

  /* Filter bar stacks; chips already wrap. */
  .filterbar{flex-direction:column;align-items:stretch;gap:10px}
  .filterbar .search{min-width:0;width:100%}
  .clear-filters{width:100%;margin-left:0;justify-content:center;min-height:44px}
  .topbar{height:auto;min-height:56px;padding:8px 12px;gap:8px;flex-wrap:wrap}
  .topbar-main{gap:8px;flex-wrap:wrap}.topbar-divider{display:none}.topbar-actions{gap:6px;flex-wrap:wrap}
  .brand{letter-spacing:.14em}.tab{padding:10px 8px}
  .topbar .btn{min-height:40px;padding:8px}

  /* One markup, two presentations: re-present the table as cards. */
  table, thead, tbody, tr, td{display:block;width:100%}
  tbody tr{border:1px solid var(--line);margin-bottom:10px;padding:8px 10px;
    background:var(--panel)}
  tbody td{border:none;padding:5px 0;display:flex;justify-content:space-between;
    align-items:center;gap:12px;text-align:left}
  tbody td::before{content:attr(data-label);font:500 10px/1 var(--mono);
    letter-spacing:.1em;color:var(--fg3);flex:0 0 auto}
  td.r{text-align:right}

  /* Group heading cell has no data-label and should not be split like a card row. */
  .group-head{display:block}
  .group-head::before{content:none}

  /* Header row becomes a wrapping strip of tappable sort chips. Non-sortable
     columns (pin, Trend, Rating) have no on-tap action here, so they are hidden;
     the click handlers on th[data-sort] are reused untouched. */
  thead{display:block}
  thead tr{display:flex;flex-wrap:wrap;gap:8px;width:auto;padding:10px 0}
  thead th{display:none}
  thead th[data-sort]{display:inline-flex;align-items:center;gap:4px;width:auto;
    min-height:44px;padding:0 12px;border:1px solid var(--line2);background:var(--panel);
    font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--fg2)}
  thead th[data-sort][aria-sort="ascending"],
  thead th[data-sort][aria-sort="descending"]{color:var(--accent);border-color:var(--accent)}
  /* Desktop absolutely-positions this arrow at right:6px; in a chip that would
     overlap the label, so put it back in flow beside the text. */
  thead th[data-sort]::after{content:'⇅';opacity:.3;position:static;padding-right:0}
  thead th[data-sort][aria-sort="ascending"]::after{content:'↑';opacity:1}
  thead th[data-sort][aria-sort="descending"]::after{content:'↓';opacity:1}

  /* Touch targets. A 14px glyph is not thumb-operable. */
  .pin{min-width:44px;min-height:44px;font-size:18px}
  .chip,.seg-btn{min-height:44px;display:inline-flex;align-items:center}

  /* Only the primary screener table becomes cards. Detail/history tables
     retain their compact tabular meaning and scroll if space is tight. */
  .history-table{display:table;min-width:300px}
  .history-table thead{display:table-header-group}
  .history-table tbody{display:table-row-group}
  .history-table tr{display:table-row;border:none;margin:0;padding:0;background:transparent}
  .history-table th,.history-table td{display:table-cell;width:auto;padding:9px 10px;border-bottom:1px solid var(--line)}
  .history-table td::before{content:none}
  .detail{padding:10px 12px 48px}
  .detail-hero{padding:14px 12px 0}
  .detail-head{flex-direction:column;gap:12px}.detail-actions{justify-content:flex-start}
  .detail-actions .btn,.detail-actions .pin{min-height:40px;display:inline-flex;align-items:center}
  .detail-metrics{grid-template-columns:1fr 1fr;margin:0 -12px}
  .metric{padding:10px 12px}.metric:nth-child(2){border-right:0}
  .detail-grid{grid-template-columns:1fr}
  .why-card{grid-row:auto}.history-scroll{max-height:260px}
  .history-chart{min-width:480px;height:auto}
  .chart-wrap{overflow-x:auto}
  #analyst-body{max-height:360px}

  .portfolio-nav{margin-top:16px;padding:0 12px;gap:4px}
  .portfolio-nav a{padding:9px 11px;font-size:12px}
  .workspace-private{width:100%;margin:4px 0 0 11px;font-size:10px}
  .portfolio-hero{align-items:stretch;flex-direction:column;gap:12px}
  .portfolio .detail-card{padding:16px;border-radius:9px}
  .portfolio .stat{padding:14px}
  .portfolio .stat .v{font-size:24px}
  .portfolio td{overflow-wrap:anywhere}
  .portfolio .primary-action{white-space:normal}
  .portfolio .plan-fields{grid-template-columns:minmax(0,1fr)}
  .portfolio .stats{grid-template-columns:1fr 1fr}
}