) and only reveals link affordances on hover/focus. */ .thesis-title-link { display: block; text-decoration: none; color: var(--text); } .thesis-title-link:hover { color: var(--accent); } .thesis-title-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } .idx-scale { font: 11px var(--mono); color: var(--text-faint); letter-spacing: 0; margin: 0 0 6px; text-transform: uppercase; } .idx-val { font-family: var(--mono); font-size: 30px; font-weight: 600; line-height: 1.08; margin: 16px 0 4px; color: var(--text); } .idx-chg { font-family: var(--mono); font-size: 12.5px; } .idx-row-meta { grid-area: meta; min-width: 0; align-self: center; } .idx-row-main { grid-area: identity; min-width: 0; text-align: left; align-self: end; } .idx-row-date { margin-top: 0; color: var(--text-faint); font-size: var(--type-caption-size); text-transform: uppercase; } .idx-row-value { grid-area: value; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; text-align: center; white-space: nowrap; align-self: center; justify-self: end; } .idx-card .idx-val { margin: 0 0 4px; font-size: 24px; } .idx-row-spark { grid-area: spark; min-width: 0; align-self: stretch; display: flex; align-items: center; } .idx-card .spark { width: 100%; height: 48px; margin: 0; display: block; } .idx-spark-panel { display: grid; grid-template-rows: 16px 52px 16px; justify-content: center; gap: 6px; min-height: 96px; width: 100%; } .idx-spark-line { min-width: 0; align-self: center; } .idx-spark-dir { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; font: 11px var(--mono); text-transform: uppercase; color: var(--text-faint); } .idx-spark-dir-high { align-items: start; padding: 0 2px 0 0; } .idx-spark-dir-low { align-items: end; padding: 0 2px 0 0; } .idx-dir-low { color: var(--dir-low); } .idx-dir-high { color: var(--dir-high); } .idx-gauge-value { margin: 0; font-size: 22px; line-height: 0.95; font-variant-numeric: tabular-nums; } .idx-gauge-change { width: 100%; margin-top: -4px; text-align: right; } .idx-row.pos, .idx-row.neg, .idx-row.zero { --spark-color: #3d444c; } .pos { color: var(--pos); } .neg { color: var(--neg); } .zero { color: var(--zero); } .crumb { font-family: var(--mono); font-size: 12.5px; margin: 0; } .crumb a, .seed-note { color: var(--accent); text-decoration: none; } .crumb a { border-bottom: 1px dotted rgba(47, 127, 193, 0.42); } .crumb a:hover { color: var(--accent-3); border-bottom-color: var(--accent-3); } /* Detail header: index identity (left) sits parallel with the big value (top-right) — no boxed panel/padding. */ .detail-eyebrow { margin: 0 0 8px; } .detail-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 40px; flex-wrap: wrap; margin-bottom: 14px; } .detail-id { min-width: min(100%, 520px); } .detail-back-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .back-link { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border: 1px solid var(--border-soft); border-radius: calc(var(--r) - 3px); background: var(--panel); } .back-link:hover { background: var(--surface-hover); } .detail-name { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1.12; margin: 0; text-wrap: balance; color: var(--text); } .detail-val { display: grid; justify-content: flex-end; text-align: right; margin-left: auto; } .detail-val .scale-badge { margin-top: 5px; } .scale-badge { font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); } .seed-note { font-size: 11px; color: var(--mixed); border: 1px solid var(--border-soft); border-radius: 6px; padding: 0 6px; margin-left: 6px; } .resolve-note { margin: -4px 0 12px; padding-left: 2px; font-size: 12px; } /* re-analysis (use case 2) */ .reanalyze-btn { min-width: 0; width: auto; height: 28px; min-height: 28px; margin-left: 12px; padding: 0 12px; font-size: 11.5px; font-weight: 700; border-radius: calc(var(--r) - 2px); border: 1px solid var(--border-soft); background: var(--panel); color: var(--text); box-shadow: none; vertical-align: middle; } .reanalyze-btn:hover { filter: none; transform: none; box-shadow: 0 8px 18px rgba(31, 35, 40, 0.1); } .reanalyze-status { font-family: var(--mono); font-size: 12px; color: var(--accent); margin: 0 0 10px; min-height: 0; } .reanalyze-status:empty { display: none; } .reanalyze-status.err { color: var(--neg); } .detail-desc { margin: 9px 0 0; max-width: 72ch; font-size: 14.5px; line-height: 1.55; color: var(--text-dim, var(--text)); } .evolved-note { margin: -4px 0 12px; padding-left: 2px; font-size: 12px; } #detail > h2 { font-family: var(--mono); font-size: 12.5px; font-weight: 700; text-transform: uppercase; color: var(--text-faint); margin: 24px 0 10px; } .chart-head { display: flex; align-items: center; justify-content: flex-start; margin: 8px 0 10px; } .chart-range { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border-soft); border-radius: calc(var(--r) - 2px); background: rgba(255, 255, 255, 0.72); } .chart-range-button { width: auto; min-width: 38px; height: 26px; min-height: 26px; padding: 0 9px; border: 0; border-radius: calc(var(--r) - 4px); background: transparent; box-shadow: none; color: var(--text-faint); font-size: 11px; } .chart-range-button:hover { transform: none; filter: none; box-shadow: none; color: var(--text); background: var(--surface-hover); } .chart-range-button.active { color: var(--text); background: #ffffff; box-shadow: 0 4px 12px rgba(31, 35, 40, 0.08); } /* Single column: #chart-wrap is the ONLY child (the Index detail's direction rail — a bull/bear pole axis next to the chart — was retired with the Index surface and is never rendered here). A stale second `54px` track used to reserve dead space for that rail, leaving the chart 66px narrower than every other full-width element on the page (header, facet grid, holdings table) — a visible misalignment. */ .chart-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; margin: 0 0 24px; } .chart-wrap { position: relative; background: linear-gradient(rgba(32, 36, 42, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(32, 36, 42, 0.032) 1px, transparent 1px), #ffffff; background-size: 30px 30px, 30px 30px, 100% 100%; border: 1px solid var(--border-soft); border-radius: 12px; padding: 0; overflow: hidden; margin: 0; box-shadow: var(--deck-shadow); } .chart { width: 100%; height: 320px; display: block; } .chart .line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: none; } .chart .area { opacity: 1; } .chart .axis0 { stroke: rgba(133, 142, 154, 0.3); stroke-dasharray: 2 5; } /* axis + annotation type: smaller, lightly tracked, lighter weight — reads as fine captions, not chunky labels */ .chart .ytick, .chart .xtick { fill: var(--text-faint); font: 10px var(--mono); letter-spacing: 0.04em; opacity: 0.85; } .chart .xtick.end { text-anchor: end; } .chart .dot { fill: var(--chart-line); filter: none; } .chart .vline { stroke: rgba(133, 142, 154, 0.34); stroke-dasharray: 2 3; } /* Historical series can still use a quieter prior segment outside the Measurement Details chart. */ .chart .line.prior { stroke: var(--text-faint); opacity: 0.55; stroke-width: 1.6; } .chart .area.prior { opacity: 0.4; } .chart .dot.prior { fill: var(--text-faint); opacity: 0.7; } /* Composition / Recomposition Record tabs — component-local (own data-comp-tab/-panel attributes), independent of the page-level .workspace-tabs wiring in app.js; same visual language, scoped state only. */ .comp-tabs { display: inline-flex; gap: 3px; margin: 28px 0 16px; padding: 3px; border: 1px solid var(--border-soft); border-radius: var(--r); background: rgba(255, 255, 255, 0.72); } .comp-tab { height: 36px; padding: 0 16px; border: 0; border-radius: calc(var(--r) - 2px); background: transparent; color: var(--text-faint); font-family: var(--mono); font-size: 12.5px; font-weight: 700; cursor: pointer; } .comp-tab:hover { color: var(--text); } .comp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .comp-tab.active { background: #ffffff; color: var(--text); box-shadow: 0 4px 12px rgba(31, 35, 40, 0.08); } /* Recomposition Record: each event is its own native disclosure; expanding reveals the diff table. */ .recomp-records { display: flex; flex-direction: column; gap: 2px; } .recomp-empty { padding: 8px 0; } .recomp-record { border-bottom: 1px solid var(--border-soft); } .recomp-record:last-child { border-bottom: none; } .recomp-record > summary { display: flex; align-items: baseline; gap: 12px; padding: 14px 4px; cursor: pointer; list-style: none; } .recomp-record > summary::-webkit-details-marker { display: none; } .recomp-record > summary::before { content: "›"; display: inline-block; width: 12px; color: var(--text-faint); transform: rotate(0deg); transition:transform var(--mf-duration-fast, 120ms) var(--mf-ease); } .recomp-record[open] > summary::before { transform: rotate(90deg); } .recomp-record > summary:hover .recomp-date { color: var(--accent); } .recomp-date { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; } .recomp-summary { color: var(--text-faint); font-size: 13px; } .recomp-detail { padding: 0 4px 18px 20px; } .recomp-rationale { margin: 0 0 12px; font-size: 13px; } .recomp-unavailable, .recomp-filtered { font-size: 12.5px; margin: 10px 0 0; } /* diff sections — Added / Removed / Reweighted, each a labeled group of diff-rows (market | price | sensitivity | weight). One shared column header sits above all three; a section is omitted entirely when it has no rows. */ .diff-row { display: grid; /* price/sensitivity need room for a full before→after comparison ("0.000 → 0.080", "↑0.12 → ↑0.09"), not just a single value — sized for the compare case since Reweighted rows are the ones that actually use it. */ grid-template-columns: minmax(0, 1fr) 130px 130px 220px; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); } .diff-section:last-of-type .diff-row:last-child { border-bottom: none; } .diff-row-head { padding: 0 4px 8px; color: var(--text-faint); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .diff-row-head span:not(:first-child) { text-align: right; } .diff-cell-price, .diff-cell-sens { text-align: right; font-variant-numeric: tabular-nums; } .diff-cell-weight { display: flex; justify-content: flex-end; } /* Measurement recomposition diff: NAV rows are market identity + compact metric cards. Scoped to .nav-recomp so the Index-era 4-col constituent diff stays untouched. */ .nav-recomp .diff-row { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: stretch; } .recomp-facet { font-size: 12px; } /* .sens-cell / .weight-cell carry a margin-right tuned for the constituents table's info-tip icon footprint (see thInfo above); this view has no info-tips on its column headers, so that margin would misalign the cell content against the plain-text "sensitivity" / "weight" headers. Three-class selectors (not two) so these reliably beat the equal-or-lower-specificity base rules regardless of source order. */ .diff-row .diff-cell-sens .sens-cell { margin-right: 0; } .diff-row .diff-cell-weight .weight-cell { margin-right: 0; } .diff-section { margin-top: 18px; } .diff-section:first-of-type { margin-top: 10px; } .diff-section-head { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 6px; font-size: 12px; font-weight: 700; } .diff-section-count { color: var(--text-faint); font-weight: 500; } .diff-section-added .diff-section-label { color: var(--pos); } .diff-section-removed .diff-section-label { color: var(--neg); } .diff-section-reweighted .diff-section-label { color: var(--recomp-marker); } /* price / sensitivity: a single value for Added & Removed, a before→after comparison for Reweighted */ .metric-single { font-variant-numeric: tabular-nums; } .metric-compare { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; } .metric-arrow { color: var(--text-faint); font-size: 11px; } .metric-after { font-weight: 600; } /* weight: reuses the Composition tab's weight-cell/weight-pie/weight-pct verbatim (diffWeightPie in dashboard.js) — the "before" pie is muted/gray, the "after" pie is the normal accent-filled pie, same size so the arc fill is directly comparable at a glance. */ .weight-compare { display: inline-flex; align-items: center; gap: 6px; } /* compound selectors (not just .weight-pie-muted) so these reliably beat the base .weight-pie rule regardless of source order — both are single-class selectors of equal specificity otherwise. */ .weight-pie.weight-pie-muted { background: radial-gradient(circle at center, #ffffff 0 42%, transparent 44%), conic-gradient(var(--text-faint) 0 var(--weight-share), rgba(133, 142, 154, 0.14) var(--weight-share) 100%); border-color: var(--border-soft); opacity: 0.8; } .weight-pie.weight-pie-empty { background: none; border: 1px dashed var(--border-soft); } .weight-delta { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; } /* skeleton rows shown until constituents-history resolves (product register: skeletons, not spinners) */ .diff-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; } .diff-skeleton-row { height: 34px; border-radius: calc(var(--r) - 2px); background: linear-gradient(90deg, var(--bg-soft) 25%, var(--border-soft) 37%, var(--bg-soft) 63%); background-size: 400% 100%; animation: diff-shimmer 1.4s ease-in-out infinite; } @keyframes diff-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .tip { position: fixed; pointer-events: none; background: var(--panel-hi); border: 1px solid var(--border-soft); border-radius: 7px; padding: 6px 10px; font: 12px var(--mono); color: var(--text); z-index: 20; white-space: nowrap; box-shadow: var(--deck-shadow); } .tip .detail-usdc-money { vertical-align: -2px; } /* What-if controls live in the constituents table itself. */ .constituents-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .scenario-reset-main { width: auto; min-width: 0; height: 34px; min-height: 34px; margin-left: auto; padding: 0 14px; border-radius: calc(var(--r) - 2px); border: 1px solid var(--border-soft); background: #ffffff; color: var(--text); box-shadow: 0 4px 12px rgba(31, 35, 40, 0.08); font-size: 11px; } .scenario-reset-main:hover { transform: none; box-shadow: 0 8px 18px rgba(31, 35, 40, 0.1); } .scenario-reset-main:disabled { border-color: var(--border-soft); background: rgba(255, 255, 255, 0.5); box-shadow: none; } .prob-cell { min-width: 250px; text-align: left; } .prob-values { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "context delta" "line delta"; align-items: center; gap: 2px 10px; min-height: 38px; font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; } .prob-context { grid-area: context; color: var(--text-faint); font-size: 10px; font-weight: 700; line-height: 1; text-transform: uppercase; } .prob-line { grid-area: line; display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; text-align: left; } .prob-now { color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.15; } .prob-now.pos { color: var(--pos); } .prob-now.neg { color: var(--neg); } .prob-now.zero { color: var(--text); } .prob-arrow { min-width: 14px; color: var(--text-faint); text-align: center; font-size: 11px; line-height: 1; } .prob-arrow:empty { display: none; } .prob-scenario { color: var(--text-faint); font-size: 14px; font-weight: 700; line-height: 1.15; } .prob-scenario.zero { display: none; } .prob-scenario.pos { color: var(--pos); } .prob-scenario.neg { color: var(--neg); } .prob-delta { grid-area: delta; display: inline-flex; align-items: center; justify-content: center; min-width: 74px; height: 24px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(133, 142, 154, 0.18); background: rgba(133, 142, 154, 0.08); font-size: 11.5px; font-weight: 800; line-height: 1; } .prob-delta:empty { display: none; } .prob-delta.pos { border-color: rgba(22, 148, 92, 0.38); background: rgba(22, 148, 92, 0.11); color: var(--pos); } .prob-delta.neg { border-color: rgba(217, 76, 104, 0.42); background: rgba(217, 76, 104, 0.12); color: var(--neg); } .prob-slider { appearance: none; width: 100%; height: 14px; margin: 7px 0 0; background: transparent; accent-color: var(--accent); vertical-align: middle; } .prob-slider::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: rgba(133, 142, 154, 0.34); } .prob-slider::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 1px solid rgba(47, 127, 193, 0.92); border-radius: 50%; background: var(--accent); box-shadow: 0 2px 5px rgba(31, 35, 40, 0.16); } .prob-slider::-moz-range-track { height: 3px; border-radius: 999px; background: rgba(133, 142, 154, 0.34); } .prob-slider::-moz-range-thumb { width: 12px; height: 12px; border: 1px solid rgba(47, 127, 193, 0.92); border-radius: 50%; background: var(--accent); box-shadow: 0 2px 5px rgba(31, 35, 40, 0.16); } .prob-slider:disabled { opacity: 0.34; } .weight-cell { display: inline-grid; grid-template-columns: 17px auto; align-items: center; gap: 6px; margin-right: 19px; font-variant-numeric: tabular-nums; } .weight-pie { width: 17px; height: 17px; flex: 0 0 17px; justify-self: start; border-radius: 50%; background: radial-gradient(circle at center, #ffffff 0 42%, transparent 44%), conic-gradient(var(--accent) 0 var(--weight-share), rgba(133, 142, 154, 0.18) var(--weight-share) 100%); border: 1px solid rgba(47, 127, 193, 0.38); box-shadow: none; } .weight-pct { justify-self: end; text-align: right; } .constituents-intro { margin: 8px 0 16px; font-size: 13px; line-height: 1.55; color: var(--text-faint); } .constituents-intro .intro-with { color: var(--pos); font-weight: 600; } .constituents-intro .intro-against { color: var(--neg); font-weight: 600; } .th-label { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; margin-left: auto; line-height: 1; white-space: nowrap; } .th-label.weight-head { width: 70px; } .th-label.beta-head { width: 92px; } .info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex: 0 0 17px; margin-left: 0; vertical-align: middle; outline: none; } .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid rgba(133, 142, 154, 0.38); border-radius: 50%; color: var(--text-faint); font-size: 10px; font-weight: 800; line-height: 1; text-transform: none; } .info-bubble { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; display: none; width: min(260px, 64vw); padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 6px; background: #ffffff; box-shadow: var(--deck-shadow-strong); color: var(--text-dim); font: 11px/1.45 var(--mono); text-align: left; text-transform: none; white-space: normal; } .info-tip:hover .info-icon, .info-tip:focus .info-icon, .info-tip:focus-within .info-icon { border-color: rgba(47, 127, 193, 0.68); color: var(--text); } .info-tip:hover .info-bubble, .info-tip:focus .info-bubble, .info-tip:focus-within .info-bubble { display: block; } .tbl tbody tr.scenario-driver td { background: rgba(45, 138, 111, 0.08); } .tbl tbody tr.scenario-driver td:first-child { border-left: 2px solid var(--accent-3); } /* market-name: the primary identifier in any constituent/diff row — bolder + full-contrast so it reads as the headline of the row regardless of whether this particular market has a live link right now (conCell above). */ .market-name { font-weight: 600; color: var(--text); } /* constituent Polymarket deep links + the hover "as of " marker on the constituents table */ .tbl a.mlink, .diff-row a.mlink { color: var(--accent); text-decoration: none; border-bottom: 1px dotted rgba(47, 127, 193, 0.42); } .tbl a.mlink:hover, .diff-row a.mlink:hover { color: var(--accent-3); border-bottom-color: var(--accent-3); } .con-asof { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--text-faint); margin-left: 8px; } .con-asof.hover { color: var(--accent); } .con-asof.scenario { color: var(--accent-3); } .con-hint { font-weight: 400; font-size: 14px; } .movers { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; } .chip { font-family: var(--mono); font-size: 12px; border: 1px solid var(--border-soft); border-radius: 6px; padding: 4px 9px; background: var(--panel); } .tbl-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--r); background: var(--panel); box-shadow: var(--deck-shadow); } .tbl { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: collapse; font-family: var(--mono); font-size: 13.5px; } .tbl col.col-price { width: 250px; } .tbl col.col-weight { width: 96px; } .tbl col.col-beta { width: 136px; } .tbl .weight-col, .tbl .beta-col { text-align: right; } .tbl .sens-cell, .diff-row .sens-cell { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 4px; margin-right: 19px; font-variant-numeric: tabular-nums; } .tbl .sens-cell .sens-dir, .diff-row .sens-cell .sens-dir { font-size: 11px; line-height: 1; } .tbl .sens-cell.sens-pos .sens-dir, .diff-row .sens-cell.sens-pos .sens-dir { color: var(--pos); } .tbl .sens-cell.sens-neg, .diff-row .sens-cell.sens-neg { color: var(--neg); } .tbl .sens-cell.sens-zero, .diff-row .sens-cell.sens-zero { color: var(--text-faint); } .tbl th { text-align: right; color: var(--text-faint); font-weight: 700; padding: 10px 13px; border-bottom: 1px solid var(--border-soft); letter-spacing: 0; background: var(--surface-muted); text-transform: uppercase; } .tbl th:first-child, .tbl td:first-child { text-align: left; } .tbl td { text-align: right; padding: 10px 13px; border-bottom: 1px solid var(--border-soft); } .tbl tbody tr:hover td { background: var(--surface-hover); } .tbl .mono { color: var(--text-dim); } .view-row { margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--r); display: grid; grid-template-columns: minmax(0, 1fr) 150px; grid-auto-rows: min-content; align-items: center; column-gap: 14px; background: var(--panel); } .view-row svg { grid-row: 1 / span 2; grid-column: 2; } .view-head { font-weight: 600; } .view-name { line-height: 1.45; overflow-wrap: anywhere; color: var(--text); } .view-type { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0; font-weight: 400; } .view-val { font-family: var(--mono); font-size: 13px; margin-top: 2px; } .view-flag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0; text-transform: uppercase; color: var(--mixed); border: 1px solid var(--border); padding: 1px 6px; border-radius: 999px; white-space: nowrap; } .stale { color: var(--neg); } /* Local measurement admin */ .admin-main { width: min(1240px, calc(100% - 32px)); } .admin-shell { position: relative; z-index: 1; } .admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 8px 0 14px; } .admin-tools, .admin-meta { display: flex; align-items: center; gap: 10px; min-width: 0; } .admin-filter { width: min(420px, 42vw); min-width: 220px; height: 42px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--border); background: #ffffff; color: var(--text); font-family: var(--mono); font-size: 12.5px; } .admin-filter:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .compact-button, .danger-button { min-width: 0; width: auto; height: 42px; min-height: 42px; padding: 0 14px; font-size: 12px; } .compact-link { display: inline-flex; align-items: center; height: 42px; padding: 0 13px; border: 1px solid var(--border-soft); border-radius: var(--r); color: var(--accent); font-family: var(--mono); font-size: 12px; text-decoration: none; background: var(--panel); } .compact-link:hover { color: var(--accent-3); border-color: rgba(45, 138, 111, 0.44); } .danger-button { border-color: rgba(217, 76, 104, 0.58); background: rgba(217, 76, 104, 0.14); color: var(--neg); box-shadow: none; } .danger-button:hover { box-shadow: 0 8px 18px rgba(31, 35, 40, 0.1); } .admin-state, .admin-count { display: inline-flex; align-items: center; height: 30px; padding: 0 9px; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--panel); color: var(--text-faint); font-family: var(--mono); font-size: 11px; } .admin-state.writer { color: var(--pos); border-color: rgba(22, 148, 92, 0.34); } .admin-state.readonly { color: var(--mixed); border-color: rgba(89, 98, 112, 0.34); } /* pane header — the compact per-tab title + one-line purpose that shows once the shared hero is hidden on the Review / Admin / History tabs (calm, institutional; carries context the hero used to provide). */ .pane-head { margin: 2px 0 16px; } .pane-head h2 { font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.2; color: var(--text); margin: 0 0 4px; } .pane-sub { font-family: var(--mono); font-size: 12.5px; line-height: 1.45; color: var(--text-dim); margin: 0; max-width: 72ch; text-wrap: pretty; } /* admin-only settings row */ .admin-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 2px 0 12px; } .analysis-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 2px 0 0; } .analysis-settings-hint { font-size: 12px; } .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { position: relative; display: inline-block; width: 34px; height: 18px; border-radius: 999px; background: var(--border); transition: background var(--mf-duration-standard, 180ms) var(--mf-ease); } .switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform var(--mf-duration-standard, 180ms) var(--mf-ease); } .switch input:checked + .switch-track { background: var(--pos); } .switch input:checked + .switch-track .switch-knob { transform: translateX(16px); } .switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; } .switch input:disabled + .switch-track { opacity: 0.5; } .switch:has(input:disabled) { cursor: default; } .switch-label { font-size: 12.5px; color: var(--text); } .admin-settings-hint { font-size: 11.5px; } .admin-table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--r); background: var(--panel); box-shadow: var(--deck-shadow); } .admin-table { width: 100%; min-width: 720px; /* keep columns intact on narrow screens; .admin-table-wrap scrolls horizontally instead of squishing the ID into one char per line */ border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; } .admin-table th { text-align: left; color: var(--text-faint); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface-muted); text-transform: uppercase; } .admin-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; /* Scanned rapidly while scrolling a dense table — closer to "hover tens of times" than "occasional", so this stays deliberately shorter than the review queue's row transition above it. */ transition: background var(--mf-duration-fast, 120ms) var(--mf-ease); } .admin-table tbody tr:hover td { background: var(--surface-hover); } .admin-name { min-width: 230px; font-family: var(--mono); font-weight: 600; } .admin-name a { color: var(--text); text-decoration: none; border-bottom: 1px dotted rgba(47, 127, 193, 0.32); } .admin-name a:hover { color: var(--accent); border-bottom-color: var(--accent); } .mono { font-family: var(--mono); } .id-cell { color: var(--text-dim); white-space: nowrap; /* keep the id on one line — the table (min-width) + .admin-table-wrap scroll horizontally instead of char-wrapping */ } .admin-value { display: block; margin-top: 2px; color: var(--text); } .admin-actions { text-align: right; } /* Admin table rows are THESES: the per-share cell carries BOTH directions (a thesis with only one direction shows a muted dash for the missing side, not an empty cell). The two sides sit side by side on one line — stacking them made every row two lines tall, which is half the reason the table needed two screens. */ .admin-nav-pair { display: flex; flex-direction: row; align-items: baseline; gap: 12px; } .admin-nav-side { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; } .admin-nav-side.muted { color: var(--text-faint); } .admin-nav-hist { color: var(--dir-low); font-size: 11px; } /* Index Admin — expandable full-parameter detail */ .idx-expand { appearance: none; width: 18px; height: 18px; margin-right: 7px; padding: 0; border: 1px solid var(--border-soft); border-radius: 5px; background: var(--panel); color: var(--text-dim); font-family: var(--mono); font-size: 10px; line-height: 1; cursor: pointer; vertical-align: baseline; } .idx-expand:hover { color: var(--accent); border-color: var(--accent-soft); } .admin-table tbody tr.idx-open td { background: var(--surface-hover); } .admin-table tbody tr.admin-detail-row td, .admin-table tbody tr.admin-detail-row:hover td { padding: 0 12px 14px; background: var(--surface-muted); } .idx-detail { padding-top: 12px; } .idx-detail-desc { margin: 0 0 10px; max-width: 72ch; color: var(--text-dim); font-size: 12.5px; } .idx-detail-params { display: flex; flex-wrap: wrap; gap: 9px 24px; margin-bottom: 12px; } .idx-detail-param { display: flex; flex-direction: column; gap: 2px; } .idx-detail-param .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } .idx-detail-param .v { font-family: var(--mono); font-size: 13px; color: var(--text); } .idx-detail-param .v.muted { color: var(--text-faint); } .idx-detail-param .v.pos { color: var(--pos); } .idx-detail-param .v.neg { color: var(--neg); } .idx-detail-param .unit { font-size: 10px; color: var(--text-faint); } .idx-detail-note { margin: -4px 0 10px; font-size: 11px; } .idx-con-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--panel); } .idx-con-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; } .idx-con-table th { text-align: right; white-space: nowrap; padding: 7px 10px; border-bottom: 1px solid var(--border-soft); background: var(--surface-muted); color: var(--text-faint); font-weight: 700; cursor: help; } .idx-con-table th:first-child { text-align: left; } .idx-con-table td { text-align: right; white-space: nowrap; padding: 6px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text); } .idx-con-table tbody tr:last-child td { border-bottom: none; } .idx-con-table td.con-market { text-align: left; white-space: normal; min-width: 220px; } .idx-con-table td.pos { color: var(--pos); } .idx-con-table td.neg { color: var(--neg); } .idx-con-table td.zero { color: var(--text-dim); } .idx-con-table .mlink { color: var(--text); text-decoration: none; border-bottom: 1px dotted rgba(47, 127, 193, 0.32); } .idx-con-table .mlink:hover { color: var(--accent); border-bottom-color: var(--accent); } .idx-detail-loading { padding: 14px 2px; font-size: 12px; } .idx-detail-error { padding: 12px 2px; font-size: 12px; color: var(--neg); } .link-retry { appearance: none; border: none; background: none; padding: 0 0 0 6px; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; } /* Local analysis history */ .history-shell { position: relative; z-index: 1; } .history-layout { display: grid; grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr); gap: 16px; align-items: start; } .history-list, .history-detail { min-width: 0; } .history-row { cursor: pointer; } .history-row.selected td { background: var(--accent-soft); } .history-run-button { display: grid; width: 100%; min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; text-align: left; } .history-run-button:hover { transform: none; filter: none; box-shadow: none; } .history-input { color: var(--text); overflow-wrap: anywhere; line-height: 1.45; } .history-run-id { margin-top: 2px; color: var(--text-faint); font-size: 11px; } .status-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--panel); color: var(--text-faint); font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; } .status-badge.complete { color: var(--pos); border-color: rgba(22, 148, 92, 0.34); background: rgba(22, 148, 92, 0.09); } .status-badge.error { color: var(--neg); border-color: rgba(217, 76, 104, 0.38); background: rgba(217, 76, 104, 0.1); } .status-badge.aborted { color: var(--mixed); border-color: rgba(89, 98, 112, 0.36); background: rgba(89, 98, 112, 0.1); } .status-badge.running, .status-badge.pending, .status-badge.retrying { color: var(--accent); border-color: rgba(47, 127, 193, 0.36); background: rgba(47, 127, 193, 0.1); } /* Recompose-run terminal statuses: a run that ended badly reads like an error, one that ended with nothing to do reads like a neutral outcome. */ .status-badge.failed, .status-badge.timed_out { color: var(--neg); border-color: rgba(217, 76, 104, 0.38); background: rgba(217, 76, 104, 0.1); } .status-badge.noop, .status-badge.superseded { color: var(--mixed); border-color: rgba(89, 98, 112, 0.36); background: rgba(89, 98, 112, 0.1); } .recompose-runs { margin-bottom: 18px; } .history-detail { border: 1px solid var(--border-soft); border-radius: var(--r); background: var(--panel); padding: 16px; box-shadow: var(--deck-shadow); } .history-detail-head { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); } .history-detail-head h2 { margin: 9px 0 0; color: var(--text); font-family: var(--mono); font-size: 15px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; } .history-detail-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: 7px; } .history-detail-meta span { height: 24px; padding: 2px 7px; border: 1px solid var(--border-soft); border-radius: 6px; color: var(--text-faint); background: #ffffff; font-size: 11px; } .history-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 14px 0 0; } .history-summary-grid div { min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--border-soft); } .history-summary-grid dt { color: var(--text-faint); font-size: 10.5px; font-weight: 700; text-transform: uppercase; } .history-summary-grid dd { margin: 3px 0 0; color: var(--text); overflow-wrap: anywhere; } .history-section { margin-top: 18px; } .history-section h3 { margin: 0 0 10px; color: var(--text-faint); font-size: 11px; text-transform: uppercase; } .history-artifact { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .history-artifact div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; } .history-label { color: var(--text-faint); font-size: 11px; text-transform: uppercase; } .history-events { display: grid; gap: 8px; } .history-event { border: 1px solid var(--border-soft); border-radius: var(--r); background: #ffffff; overflow: hidden; } .history-event summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; padding: 9px 11px; color: var(--text); font-weight: 600; } .history-event summary span { color: var(--text-faint); font-weight: 400; } .history-event pre { max-height: 360px; margin: 0; padding: 11px; overflow: auto; border-top: 1px solid var(--border-soft); color: var(--text-dim); font-family: var(--mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } @media (max-width: 960px) { .index-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 42px; } .index-hero h1 { font-size: var(--type-title-mobile); } } @media (max-width: 760px) { /* The nav detail header's title ‖ value pairing is unconditional (see .nav-detail-top) — this just keeps the title compact once the column has narrowed a lot. */ .nav-detail-top .detail-name { font-size: 20px; } .view-row { grid-template-columns: 1fr; } .view-row svg { grid-column: 1; grid-row: auto; width: 100%; margin-top: 10px; } .history-layout { grid-template-columns: 1fr; } .history-detail-head, .history-detail-meta { align-items: flex-start; flex-direction: column; justify-content: flex-start; } .history-summary-grid { grid-template-columns: 1fr; } .history-artifact div { grid-template-columns: 1fr; gap: 2px; } .constituents-head { align-items: flex-start; } /* Narrow width: WRAP the toolbar instead of stacking every control full-width (which turned light toolbars like Review's Refresh + Dashboard into a column of full-width blocks). Only the search field goes full-width. */ .admin-toolbar { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; } .admin-tools, .admin-meta { flex-wrap: wrap; align-items: center; } .admin-filter { flex: 1 1 100%; width: 100%; min-width: 0; } /* review detail's sticky publish bar: keep buttons in ≤2 rows (primary full-width, then reject/unpublish) so the sticky bar stays short and doesn't blanket the form. */ .review-actions-final { flex-wrap: wrap; } .review-actions-final .review-actions-spacer { display: none; } .review-actions-final .review-publish { flex: 1 1 100%; } .review-actions-final .danger-button { flex: 1 1 auto; } } @media (max-width: 620px) { .index-main { padding-top: 12px; } .index-hero { gap: 18px; padding: 32px 0 20px; } .index-hero h1 { font-size: var(--type-title-mobile); line-height: 1.12; } .index-hero .sub { font-size: var(--type-body-size); } .index-sort-toolbar, .index-sort-buttons, .index-sort-button { width: 100%; } .index-sort-button { flex: 1 1 30%; } .idx-spark-panel { grid-template-rows: 14px 46px 14px; min-height: 88px; gap: 7px; align-self: center; } .idx-spark-dir { font-size: 10px; } .chart-head { justify-content: stretch; } .chart-range { width: 100%; } .chart-range-button { flex: 1 1 0; min-width: 0; } .chart-layout { grid-template-columns: minmax(0, 1fr); margin-bottom: 22px; } .chart { height: 260px; } /* Quiet, compact chip aligned right — not a full-width primary-looking bar for a control that's disabled until you actually move a slider. */ .scenario-reset-main { height: 30px; min-height: 30px; padding: 0 12px; box-shadow: none; } /* Constituents: a 720px fixed table can't fit a phone — lay each market out as a stacked card instead of forcing a horizontal scroll. The header row is hidden; weight/sensitivity get inline labels via ::before. */ .tbl-wrap { overflow-x: visible; padding: 0 14px; } .tbl { min-width: 0; display: block; font-size: 13px; } .tbl colgroup, .tbl thead { display: none; } .tbl tbody { display: block; } .tbl tbody tr { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "market market" "price price" "weight sens"; align-items: start; gap: 12px 16px; padding: 16px 0; border-bottom: 1px solid var(--border-soft); } .tbl tbody tr:last-child { border-bottom: none; } .tbl td { display: block; padding: 0; border: none; text-align: left; } .tbl td:first-child { grid-area: market; } .tbl td.prob-cell { grid-area: price; min-width: 0; } .tbl td.weight-col { grid-area: weight; } .tbl td.beta-col { grid-area: sens; } .tbl td.weight-col::before, .tbl td.beta-col::before { display: block; margin-bottom: 5px; color: var(--text-faint); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .tbl td.weight-col::before { content: "weight"; } .tbl td.beta-col::before { content: "sensitivity"; } .weight-cell { width: auto; margin-right: 0; } .sens-cell { margin-right: 0; justify-content: flex-start; } .prob-slider { width: 100%; } /* Recomposition diff rows: same stacked treatment as the constituent table above. */ .comp-tabs { width: 100%; } .comp-tab { flex: 1 1 50%; } .diff-row-head { display: none; } .diff-row { grid-template-columns: 1fr 1fr; grid-template-areas: "market market" "price sens" "weight weight"; gap: 8px 16px; padding: 14px 4px; } .diff-cell-market { grid-area: market; } .diff-cell-price { grid-area: price; text-align: left; } .diff-cell-sens { grid-area: sens; text-align: left; } .diff-cell-weight { grid-area: weight; justify-content: flex-start; } .diff-cell-price::before, .diff-cell-sens::before { display: block; margin-bottom: 5px; color: var(--text-faint); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .diff-cell-price::before { content: "price"; } .diff-cell-sens::before { content: "sensitivity"; } /* Measurement recomposition diff has no sensitivity column — stack market / p_dir / weight instead. */ .nav-recomp .diff-row { grid-template-areas: "market market" "price weight"; } .nav-recomp .diff-cell-price::before { content: "p_dir"; } } /* resolved/closed legs — a member pinned at its settled 0/1 value (not a live quote). */ .resolved-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.05em 0.42em; border-radius: 999px; vertical-align: middle; border: 1px solid var(--border); color: var(--text-dim); background: var(--bg-soft); } .resolved-badge.res-yes { color: var(--pos); border-color: rgba(22, 148, 92, 0.35); background: rgba(22, 148, 92, 0.10); } .resolved-badge.res-no { color: var(--neg); border-color: rgba(217, 76, 104, 0.35); background: rgba(217, 76, 104, 0.10); } .resolved-badge.res-closed { color: var(--text-dim); } /* the row's live-quote affordances are moot once settled — mute it so resolved legs read as "done" */ tr.con-resolved { opacity: 0.74; } tr.con-resolved .prob-slider { opacity: 0.5; } /* ── Thematic NAV ($-denominated products, shown alongside the factor indices) ────────────────────── */ /* LONG/SHORT position badge — direction is a POSITION, not a value judgment. The "LONG"/"SHORT" text always carries the meaning (never colour-only); long and short are visually distinct but both fully legible. */ .nav-dir-badge { display: inline-flex; align-items: center; padding: 0 7px; height: 18px; border-radius: 999px; border: 1px solid var(--border-soft); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .nav-dir-badge.long { color: var(--accent); border-color: rgba(47, 127, 193, 0.4); background: rgba(47, 127, 193, 0.12); } .nav-dir-badge.short { color: var(--neg); border-color: rgba(217, 76, 104, 0.42); background: rgba(217, 76, 104, 0.12); } /* Explicit, easy-to-catch LONG/SHORT switch — a prominent segmented control modelled on .chart-range but bigger and bolder. It flips between the long and short of the SAME theme. Both labels stay legible; the active side is filled. */ .nav-dir-switch { display: inline-flex; align-items: stretch; gap: 3px; padding: 3px; border: 1px solid var(--border-soft); border-radius: var(--r); background: var(--panel); box-shadow: var(--deck-shadow); } .nav-dir-switch-btn { width: auto; min-width: 74px; height: 32px; padding: 0 16px; border: 1px solid transparent; border-radius: calc(var(--r) - 4px); background: transparent; box-shadow: none; color: var(--text-dim); font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; } .nav-dir-switch-btn:hover:not(.active):not(:disabled) { color: var(--text); background: var(--surface-hover); } .nav-dir-switch-btn:disabled { opacity: 0.4; cursor: not-allowed; } .nav-dir-switch-btn.long.active { color: #ffffff; background: var(--accent); border-color: var(--accent); } .nav-dir-switch-btn.short.active { color: #ffffff; background: var(--neg); border-color: var(--neg); } /* Compact Long/Short toggle for a LIST row (dashboard card / admin row) — same semantics as .nav-dir-switch (the detail page's bigger switch) but sized to sit inline in a card's value column. Toggling it swaps which side's $/sparkline/move% the row displays; it does NOT navigate (the row itself does, on click outside the toggle). */ .thesis-dir-switch { display: inline-flex; align-items: stretch; gap: 2px; padding: 2px; border: 1px solid var(--border-soft); border-radius: calc(var(--r) - 4px); background: var(--panel); margin-bottom: 6px; } .thesis-dir-btn { width: auto; min-width: 44px; height: 20px; padding: 0 8px; border: 1px solid transparent; border-radius: calc(var(--r) - 6px); background: transparent; box-shadow: none; color: var(--text-dim); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; } .thesis-dir-btn:hover:not(.active) { color: var(--text); background: var(--surface-hover); } .thesis-dir-btn.long.active { color: #ffffff; background: var(--accent); border-color: var(--accent); } .thesis-dir-btn.short.active { color: #ffffff; background: var(--neg); border-color: var(--neg); } /* Group the switch, hero, and context as a right-aligned column (matching .nav-hero). */ .nav-detail-val { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; grid-area: val; } .nav-detail-val .nav-hero-slot { width: 100%; } .nav-dashboard { margin-top: 20px; } .nav-dashboard .idx-list { margin-top: 0; } .nav-dashboard .measurement-list { margin-top: 0; } body.dashboard-view { background: linear-gradient(90deg, rgba(17, 19, 22, 0.026) 1px, transparent 1px), #fffefa; background-size: 96px 100%; } body.dashboard-view::before { opacity: 0.18; background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), transparent 34%), linear-gradient(90deg, transparent 0, rgba(17, 19, 22, 0.026) 1px, transparent 1px); background-size: 100% 100%, 96px 100%; } body.dashboard-view::after { opacity: 0.12; } body.dashboard-view main { width: min(var(--mf-layout-app-max), calc(100% - var(--mf-space-16))); padding: 32px 0 64px; } body.dashboard-view #dashboard, body.dashboard-view .index-main, body.dashboard-view .measurement-list-hero, body.dashboard-view .sr-only { --list-graphite: var(--mf-text-strong, #111316); --list-ink: var(--mf-text-primary, #1b2026); --list-muted: var(--mf-text-secondary, #65707a); --list-faint: var(--mf-text-disabled, #9aa3ad); --list-panel: var(--mf-surface-panel, #fffefa); --list-line: var(--mf-border-subtle, rgba(17, 19, 22, 0.105)); --list-line-strong: var(--mf-border-default, rgba(17, 19, 22, 0.18)); --list-cyan: var(--mf-signal-accent, #74deeb); --list-cyan-soft: var(--mf-color-accent-soft, rgba(116, 222, 235, 0.18)); --list-pos: var(--mf-status-positive, #168765); --list-neg: var(--mf-status-negative, #c85261); --list-sans: var(--mf-font-sans, Inter, "Helvetica Neue", Arial, sans-serif); --list-mono: var(--mf-font-mono, "SF Mono", Menlo, Consolas, monospace); color: var(--list-ink); font-family: var(--list-sans); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } body.dashboard-view .measurement-list-hero { position: relative; z-index: 70; display: block; padding: 14px 0 14px; } body.dashboard-view .measurement-list-hero::before { display: none; } .measurement-list-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "logo tabs actions"; align-items: center; gap: 12px 22px; width: 100%; max-width: none; min-width: 0; } .index-hero .measurement-list-hero-inner { width: 100%; max-width: none; } .measurement-list-logo { grid-area: logo; justify-self: start; display: inline-flex; align-items: center; width: 188px; max-width: 100%; border-bottom: 0; text-decoration: none; } .measurement-list-logo img { display: block; width: 100%; height: auto; } .dashboard-product-tabs { grid-area: tabs; justify-self: center; display: inline-flex; align-items: center; min-width: 0; gap: 30px; padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .dashboard-product-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; height: auto; min-height: 0; min-width: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; color: var(--list-muted); font-family: var(--list-sans); font-size: 14px; font-weight: 560; letter-spacing: 0.005em; line-height: 1; text-decoration: none; transition: color var(--mf-duration-standard, 180ms) var(--mf-ease); } .dashboard-product-tab:hover { color: var(--list-graphite); } .dashboard-product-tab.active { border: 0; background: transparent; color: var(--list-graphite); font-weight: 650; box-shadow: none; } .dashboard-product-tab.active::after { content: ""; position: absolute; right: 0; bottom: -7px; left: 0; height: 2px; border-radius: 2px; background: var(--list-cyan); } .dashboard-product-tab-soon { cursor: default; } .dashboard-product-tab-soon::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 9px); left: 50%; z-index: 90; width: max-content; max-width: 180px; padding: 6px 8px; border: 1px solid rgba(17, 19, 22, 0.11); border-radius: 6px; background: rgba(255, 254, 250, 0.96); color: var(--list-graphite); box-shadow: 0 12px 24px rgba(17, 19, 22, 0.08); font-size: 10.5px; line-height: 1; opacity: 0; pointer-events: none; transform: translate(-50%, -2px); transition: opacity var(--mf-duration-standard, 180ms) var(--mf-ease), transform var(--mf-duration-standard, 180ms) var(--mf-ease); } .dashboard-product-tab-soon:hover, .dashboard-product-tab-soon:focus-visible { color: var(--list-graphite); outline: none; } .dashboard-product-tab-soon:hover::after, .dashboard-product-tab-soon:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } .measurement-list-actions { grid-area: actions; align-self: center; justify-self: end; display: flex; justify-content: flex-end; min-width: 0; } .measurement-list-actions .auth-trigger.is-signed-in { max-width: 168px; } /* Trend taxonomy navigation lives in dashboard-category-navigation.css. */ body.dashboard-view .index-sort-toolbar { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; min-width: 0; max-width: 100%; width: auto; margin: 0; } body.dashboard-view .index-sort-buttons { gap: 4px; padding: 4px; border: 1px solid rgba(17, 19, 22, 0.085); border-radius: 12px; background: rgba(255, 254, 250, 0.64); box-shadow: none; flex-wrap: wrap; min-width: 0; max-width: 100%; overflow-x: visible; scrollbar-width: none; } body.dashboard-view .index-sort-buttons::-webkit-scrollbar { display: none; } body.dashboard-view .index-sort-button { position: relative; flex: 0 0 auto; min-width: 40px; width: auto; height: 30px; min-height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--list-muted); box-shadow: none; font-family: var(--list-sans); font-size: 12px; font-weight: 650; letter-spacing: 0; transition: background var(--mf-duration-standard, 180ms) var(--mf-ease), border-color var(--mf-duration-standard, 180ms) var(--mf-ease), color var(--mf-duration-standard, 180ms) var(--mf-ease), transform var(--mf-duration-standard, 180ms) var(--mf-ease); } body.dashboard-view .index-sort-button:hover { border-color: rgba(17, 19, 22, 0.075); background: rgba(255, 255, 255, 0.58); color: var(--list-graphite); transform: translateY(-1px); box-shadow: none; } body.dashboard-view .index-sort-button:active { transform: translateY(0); } body.dashboard-view .index-sort-button.active { border-color: rgba(83, 191, 205, 0.48); background: rgba(235, 252, 255, 0.78); color: var(--list-graphite); box-shadow: none; } body.dashboard-view .range-custom { flex: 0 0 auto; justify-content: flex-end; flex-wrap: nowrap; margin-top: 0; } body.dashboard-view .range-custom-input, body.dashboard-view .range-custom-apply { height: 30px; min-height: 30px; border-color: rgba(17, 19, 22, 0.095); border-radius: 6px; background: rgba(255, 254, 250, 0.86); color: var(--list-graphite); font-size: 12px; } body.dashboard-view .range-custom-input:focus { outline: none; border-color: rgba(83, 191, 205, 0.68); box-shadow: none; } body.dashboard-view .range-custom-apply { width: auto; min-width: 0; padding: 0 10px; font-family: var(--list-sans); font-weight: var(--mf-font-weight-semibold); letter-spacing: 0; } body.dashboard-view .range-custom-input { font-family: var(--list-sans); font-weight: var(--mf-font-weight-medium); letter-spacing: 0; } body.dashboard-view .range-custom-apply:hover { transform: translateY(-1px); box-shadow: none; border-color: rgba(83, 191, 205, 0.42); background: #f4fdff; } .measurement-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; margin-top: 0; } /* ── Trends list skeleton ───────────────────────────────────────────────────────────────────────── The list used to collapse to a single line of "Loading measurements..." on an otherwise blank page, so every category or range change blanked the whole grid and popped it back. That is the most repeated jarring change in the product — this is the surface users browse. These placeholders hold the card grid's shape while the fetch is in flight, so the layout no longer collapses and rebuilds. Shimmer and register match the .diff-skeleton / .mf-loading-line treatment already used elsewhere ("product register: skeletons, not spinners", per .diff-skeleton above). */ .measurement-skeleton { display: grid; grid-template-rows: 1fr auto; min-height: 232px; overflow: hidden; border: 1px solid var(--list-line); border-radius: 16px; background: rgba(255, 254, 250, 0.76); box-shadow: 0 14px 30px rgba(17, 19, 22, 0.04); } /* Mirrors .measurement-card-main's own columns/areas so the placeholder and the real card put their thumbnail, copy and sparkline in the same places — the swap moves nothing. */ .measurement-skeleton-main { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "image copy" ". spark"; align-items: start; gap: 12px 15px; padding: 20px 20px 8px; } .measurement-skeleton-thumb { grid-area: image; width: 88px; aspect-ratio: 1; border-radius: 16px; } .measurement-skeleton-copy { grid-area: copy; display: grid; gap: 9px; } .measurement-skeleton-spark { grid-area: spark; height: 34px; margin-top: 10px; border-radius: 8px; } .measurement-skeleton-dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 20px 20px; } .measurement-skeleton-dir { height: 54px; border-radius: 12px; } .mf-skel { background: linear-gradient(90deg, rgba(17, 19, 22, 0.06), rgba(116, 222, 235, 0.2), rgba(17, 19, 22, 0.06)); background-size: 200% 100%; animation: mf-shimmer 1.2s linear infinite; } .mf-skel-line { height: 12px; border-radius: 999px; } /* Detail hero skeleton. Columns and gap mirror .nav-detail-top's own three-column grid so the arriving page settles into this shape instead of replacing a blank screen. */ .nav-detail-skeleton { display: grid; grid-template-columns: 168px minmax(300px, 1fr) clamp(320px, 27vw, 390px); align-items: start; column-gap: clamp(20px, 2.4vw, 32px); margin: 3px 0 0; padding: 18px 0 0; } .nav-detail-skeleton-image { height: 195px; border-radius: 18px; } .nav-detail-skeleton-id { display: grid; gap: 11px; min-width: 0; } .nav-detail-skeleton-title { height: 30px; width: 68%; border-radius: 8px; } .nav-detail-skeleton-id .mf-skel-line:nth-child(2) { width: 96%; } .nav-detail-skeleton-id .mf-skel-line:nth-child(3) { width: 80%; } .nav-detail-skeleton-meta { width: 44%; margin-top: 6px; } .nav-detail-skeleton-val { display: grid; gap: 14px; } .nav-detail-skeleton-dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .nav-detail-skeleton-dir { height: 66px; border-radius: 12px; } .nav-detail-skeleton-cta { height: 46px; border-radius: 10px; } @media (max-width: 1024px) { /* Matches the header's own stacking breakpoint. */ .nav-detail-skeleton { grid-template-columns: 1fr; row-gap: 14px; } .nav-detail-skeleton-image { width: 96px; height: 96px; } } /* Uneven widths so the block reads as a title over wrapped description text rather than a bar chart. */ .measurement-skeleton-copy .mf-skel-line:nth-child(1) { width: 72%; } .measurement-skeleton-copy .mf-skel-line:nth-child(2) { width: 92%; } .measurement-skeleton-copy .mf-skel-line:nth-child(3) { width: 56%; } @media (prefers-reduced-motion: reduce) { /* Keep the placeholder blocks — they are the layout, not decoration — but stop the travelling sheen. */ .mf-skel { animation: none; } } .measurement-card { --spark-color: #65707a; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); /* Row 1 (image/title/desc/spark) absorbs whatever extra height the grid row-stretch gives this card over its neighbors (a longer, wrapped title mainly); row 2 (the direction buttons) always sits flush against the bottom, so the buttons line up across a row regardless of how many lines the title took. */ grid-template-rows: 1fr auto; min-height: 0; overflow: hidden; border: 1px solid var(--list-line); border-radius: 16px; background: rgba(255, 254, 250, 0.76); color: var(--list-ink); box-shadow: 0 14px 30px rgba(17, 19, 22, 0.04); cursor: pointer; transition: border-color var(--mf-duration-standard, 180ms) var(--mf-ease), background var(--mf-duration-standard, 180ms) var(--mf-ease), box-shadow var(--mf-duration-standard, 180ms) var(--mf-ease), transform var(--mf-duration-standard, 180ms) var(--mf-ease); } .measurement-card.pos { --direction-tone: #5f8782; --spark-color: #5f8782; } .measurement-card.neg { --direction-tone: #9b6971; --spark-color: #9b6971; } .measurement-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--list-cyan); opacity: 0; transition: opacity var(--mf-duration-standard, 180ms) var(--mf-ease); } .measurement-card:hover { border-color: rgba(83, 191, 205, 0.48); background: rgba(255, 254, 250, 0.92); box-shadow: 0 18px 34px rgba(17, 19, 22, 0.055); transform: translateY(-2px); } .measurement-card:hover::before { opacity: 1; } .measurement-card-main, .measurement-directions { min-width: 0; padding: 20px; } .measurement-card-main { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "image copy" ". spark"; align-items: start; gap: 12px 15px; padding-bottom: 8px; } .measurement-card-image { grid-area: image; width: 88px; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(17, 19, 22, 0.105); border-radius: 16px; background: linear-gradient(135deg, rgba(116, 222, 235, 0.13), rgba(255, 254, 250, 0.72)), rgba(255, 254, 250, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); } .measurement-card-image.has-image { background: #f7f5ef; } .measurement-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Thumbnails are loading="lazy", so they arrive after the card has already painted and snap in. Fading them softens that. Deliberately an ANIMATION keyed off .img-ready rather than an `opacity: 0` floor released by the class: if the onload handler never fires, the default here is a fully visible image (today's behaviour), not an invisible one. A cosmetic fade must not be able to hide the artwork on the main browse surface. Token duration, so reduced-motion collapses it — carrying the literal fallback every design-system token reference in THIS file needs (see the :root alias block). */ .measurement-card-image.img-ready img, .nav-topic-image.img-ready img { animation: mf-img-in var(--mf-duration-standard, 180ms) var(--mf-ease); } @keyframes mf-img-in { from { opacity: 0; } } .measurement-card-image-empty { border-style: dashed; opacity: 0.42; } .measurement-card-copy { grid-area: copy; min-width: 0; max-width: none; } .measurement-card-title { display: block; color: var(--list-graphite); font-family: var(--list-sans); font-size: 20px; font-weight: 650; line-height: 1.08; letter-spacing: -0.01em; text-decoration: none; text-wrap: balance; } .measurement-card-title:hover { color: #11687b; } .measurement-card-auto { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; } /* Quieted for the list card — the rebalanced/created stamp is provenance, not a headline. The detail page's .nav-detail-top .detail-source-row usage (below, near .nav-topic-image) gets the same quiet treatment. */ .measurement-card-auto .measurement-auto-stamp { min-height: 0; padding: 0; border: 0; background: none; color: var(--list-faint); font-weight: 500; } .measurement-card-auto .measurement-live-dot { width: 5px; height: 5px; background: var(--list-faint); box-shadow: none; animation: none; } .measurement-auto-stamp { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; min-width: 0; max-width: 100%; padding: 0 10px; border: 1px solid rgba(83, 191, 205, 0.34); border-radius: 999px; background: rgba(235, 252, 255, 0.68); color: #176273; font-family: var(--list-sans); font-size: 12px; font-weight: 650; letter-spacing: 0; line-height: 1; white-space: nowrap; } .measurement-live-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 999px; background: var(--list-cyan); box-shadow: 0 0 0 0 rgba(116, 222, 235, 0.42); animation: measurement-live-pulse 2.4s ease-out infinite; } /* The live dot pulses forever beside "Rebalanced Nh ago" on every Trends card and on the detail page, and had no reduced-motion cover — an unbounded decorative loop is exactly what the preference exists to stop. The stamp's text carries the meaning on its own, so dropping the pulse costs no information. */ @media (prefers-reduced-motion: reduce) { .measurement-live-dot { animation: none; } } @keyframes measurement-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(116, 222, 235, 0.42); } 70% { box-shadow: 0 0 0 7px rgba(116, 222, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(116, 222, 235, 0); } } .measurement-card-desc { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: var(--list-muted); font-family: var(--list-sans); font-size: 13.5px; line-height: 1.38; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .measurement-card-spark { grid-area: spark; align-self: start; justify-self: center; width: min(100%, 360px); min-width: 0; height: 52px; margin: 8px 0 2px; opacity: 0.72; pointer-events: none; } .measurement-card-spark .spark { display: block; width: 100%; height: 100%; overflow: visible; } .measurement-card-spark .spark path { stroke-width: 1.45; } .measurement-card-spark.is-empty { opacity: 0; } .measurement-card-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .measurement-card-meta > span { display: inline-flex; align-items: center; min-height: 24px; min-width: 0; max-width: 100%; padding: 0 9px; border: 1px solid var(--list-line); border-radius: 999px; background: rgba(255, 254, 250, 0.8); color: var(--list-muted); font-family: var(--list-sans); font-size: 12px; font-weight: 650; letter-spacing: 0; line-height: 1; } .measurement-list { gap: 16px; } .measurement-card { border-color: rgba(17, 19, 22, 0.115); background: linear-gradient(180deg, rgba(255, 254, 250, 0.94), rgba(255, 254, 250, 0.78)), rgba(255, 254, 250, 0.88); box-shadow: 0 18px 36px rgba(17, 19, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.68); } .measurement-card::before { width: 2px; opacity: 0; } .measurement-card:hover::before { opacity: 0.82; } .measurement-card-main { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "image copy" "spark spark"; gap: 12px 15px; padding: 18px 18px 9px; } .measurement-card-image { width: 88px; border-radius: 16px; } .measurement-card-title { font-size: 19px; line-height: 1.08; } .measurement-card-auto { margin-top: 7px; } .measurement-card-desc { margin-top: 9px; color: rgba(83, 94, 104, 0.9); line-height: 1.46; } .measurement-card-meta { margin-top: 9px; } .measurement-card-spark { position: relative; justify-self: stretch; width: 100%; height: 50px; margin: 5px 0 0; opacity: 0.82; } .measurement-card-spark .spark { height: 48px; } .market-source-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; min-width: 0; max-width: 100%; padding: 0 9px; border: 1px solid rgba(17, 19, 22, 0.085); border-radius: 999px; background: rgba(255, 254, 250, 0.72); color: rgba(103, 113, 121, 0.86); font-family: var(--list-sans); font-size: 12px; font-weight: 650; letter-spacing: 0; line-height: 1; white-space: nowrap; } .market-source-prefix { display: inline; } .market-source-logo { display: block; width: auto; height: 14px; max-width: 94px; filter: brightness(0) saturate(100%); opacity: 0.68; } .measurement-directions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; align-content: stretch; gap: 0; padding: 3px; border: 0; border-radius: 13px; background: rgba(17, 19, 22, 0.045); box-shadow: inset 0 1px 2px rgba(17, 19, 22, 0.05); } .measurement-direction-frame { position: relative; margin: 0 18px 18px; padding: 0; border: 0; border-radius: 12px; background: transparent; } .measurement-dir-option { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "value"; grid-template-rows: auto auto; align-items: start; gap: 0; width: 100%; min-width: 0; height: auto; min-height: 0; padding: 10px 13px 11px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--list-muted); box-shadow: none; overflow: hidden; text-align: left; text-transform: none; cursor: pointer; transition: background var(--mf-duration-standard, 180ms) var(--mf-ease), border-color var(--mf-duration-standard, 180ms) var(--mf-ease), box-shadow var(--mf-duration-standard, 180ms) var(--mf-ease); } .measurement-dir-option::before, .measurement-dir-option::after { content: none; } .measurement-dir-option:hover:not(:disabled) { border-color: transparent; background: rgba(255, 254, 250, 0.5); } .measurement-dir-option.active { border-color: rgba(17, 19, 22, 0.05); background: var(--list-panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(17, 19, 22, 0.045), 0 4px 10px rgba(17, 19, 22, 0.06); } .measurement-dir-option.short .measurement-dir-name, .measurement-dir-option.short .measurement-dir-value { justify-self: start; padding-left: 0; text-align: left; } .measurement-dir-name { grid-area: name; overflow: hidden; justify-self: start; padding-right: 0; color: var(--list-faint); font-family: var(--list-sans); font-size: 12px; font-weight: 620; letter-spacing: 0.01em; line-height: 1.08; overflow-wrap: normal; word-break: normal; hyphens: none; text-overflow: clip; white-space: normal; text-align: left; transition: color var(--mf-duration-standard, 180ms) var(--mf-ease); } .measurement-dir-option.active .measurement-dir-name { color: var(--list-muted); font-weight: 660; } .measurement-dir-value { grid-area: value; justify-self: start; margin-top: 3px; color: var(--list-graphite); font-family: var(--list-sans); font-size: 24px; font-weight: 650; line-height: 1; letter-spacing: -0.01em; text-align: left; font-variant-numeric: tabular-nums; transition: color var(--mf-duration-standard, 180ms) var(--mf-ease), font-weight var(--mf-duration-standard, 180ms) var(--mf-ease); } .measurement-dir-value.pos { color: var(--list-pos); } .measurement-dir-value.neg { color: var(--list-neg); } .measurement-dir-option:not(.active) .measurement-dir-value { color: var(--list-muted); font-weight: 560; opacity: 1; } @media (max-width: 1240px) { .measurement-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .measurement-list { grid-template-columns: 1fr; } } @media (max-width: 820px) { body.dashboard-view main { width: min(100% - 24px, 1420px); padding-top: 24px; } .measurement-list-hero-inner { gap: 14px; } .measurement-list-logo { width: 174px; } .dashboard-product-tabs { justify-self: center; } body.dashboard-view .index-sort-toolbar { justify-content: flex-start; } body.dashboard-view .range-custom { justify-content: flex-start; } .measurement-card { grid-template-columns: 1fr; } .measurement-dir-value { font-size: 22px; } } @media (max-width: 760px) { .measurement-list-hero-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo actions" "tabs tabs"; gap: 12px 14px; } .dashboard-product-tabs { justify-self: center; } } @media (max-width: 520px) { .measurement-list-hero-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo actions" "tabs tabs"; align-items: center; gap: 12px 10px; } .measurement-list-logo { width: 142px; max-width: 100%; } .measurement-list-actions { align-self: center; justify-self: end; max-width: min(190px, 52vw); } .measurement-list-actions .auth-shell, .measurement-list-actions .auth-shell-view, .measurement-list-actions .auth-trigger { max-width: 100%; } .dashboard-product-tabs { justify-self: stretch; width: 100%; } .dashboard-product-tab { flex: 1 1 0; min-width: 0; } body.dashboard-view .index-sort-buttons { width: 100%; flex-wrap: wrap; overflow-x: visible; } .category-filter-toolbar, .category-filter-buttons, .category-minor-filter-toolbar, .category-minor-filter-buttons { width: 100%; } body.dashboard-view .index-sort-button { width: auto; flex: 0 0 auto; } body.dashboard-view .range-custom { flex: 1 0 100%; width: 100%; flex-wrap: wrap; justify-content: flex-start; margin-top: 4px; } .measurement-dir-option { padding: 9px 11px 10px; } .measurement-dir-value { font-size: 20px; } .measurement-card-main { grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; } .measurement-card-image { width: 64px; border-radius: 13px; } } /* NAV card — reuses the idx-row grid; the value column is a plain $ readout (no gauge). */ .nav-scale { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .nav-flags { font: 11px var(--mono); color: var(--text-faint); text-transform: none; } .nav-pole { font-size: 12px; margin-top: 3px; line-height: 1.35; } .nav-row-value { justify-content: center; gap: 2px; } .nav-val { font-family: var(--mono); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .idx-card .nav-val { font-size: 22px; margin: 0; } .nav-row-value .scale-badge { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .nav-row-value .idx-gauge-change { position: static; transform: none; margin-top: 2px; } .nav-hero { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 4px; } .nav-hero-value { font-family: var(--mono); font-weight: 600; font-size: 40px; line-height: 1; margin: 0; font-variant-numeric: tabular-nums; color: var(--text); } .nav-hero .idx-gauge-change { position: static; transform: none; font-size: 13px; width: auto; text-align: right; } .nav-hero-scale { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .detail-usdc-money { display: inline-flex; align-items: center; justify-content: flex-end; /* No gap — since the icon is now a plain "$" glyph (not a distinct coin graphic), it should sit flush against the number like normal currency notation ("$0.41", not "$ 0.41"). */ gap: 0; color: currentColor; font-family: inherit; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; } .detail-usdc-icon { flex: 0 0 auto; line-height: 1; } .nav-hero-usdc { gap: 9px; } /* NAV facet-composition cards — the stable skeleton. Own card language (not borrowed): --panel/--border-soft/ --r/--deck-shadow match every other card on the page (.idx-card, #empty), where the retired .xv-basis-card this used to reuse had drifted onto its own --bg-soft/--border/hardcoded-radius, no-shadow treatment. */ .nav-facet-title { margin-top: 26px; } .nav-facet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; } .nav-facet-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--r); box-shadow: var(--deck-shadow); } .nav-facet-head { font-family: var(--mono); font-weight: 600; font-size: 14.5px; line-height: 1.35; color: var(--text); } .nav-facet-rule { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); } .nav-facet-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .nav-facet-members { font-size: 11.5px; color: var(--text-faint); } /* A thin rule separates the editorial facts above (label, rule, held side, member count — the stable skeleton) from the live stats below (weight, $ value) — the same "stable vs. live" split the rest of the page draws between the facet skeleton and the daily-marked holdings table. */ .nav-facet-stats { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border-soft); } .nav-facet-weight-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .nav-facet-weight { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 17px; color: var(--text); } .nav-facet-weight-label { margin-left: 5px; font-size: 10.5px; font-weight: 400; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.02em; } .nav-facet-weight-bar { width: 100%; max-width: 130px; height: 3px; border-radius: 999px; background: var(--border-soft); overflow: hidden; } .nav-facet-weight-bar span { display: block; height: 100%; background: var(--accent-3); border-radius: inherit; } .nav-facet-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-dim); white-space: nowrap; } /* NAV holdings table — reuses .tbl; facet column + a min-width so it scrolls on narrow screens. */ .nav-tbl { table-layout: auto; } .nav-tbl .nav-col-facet { color: var(--text-dim); text-align: left; } .nav-facet-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .nav-chart-note { padding: 20px 16px; } .nav-chart-rebase-note { font-family: var(--mono); font-size: 12px; margin: 6px 0 0; } .nav-chart-rebase-note .detail-usdc-money { vertical-align: -2px; } /* Formal Measurement Detail layout. */ /* The 96px vertical hairline grid is gone: fifteen full-height rules were the single largest line-area on the page, and once the ground carries a real value step the panels no longer need a ruled field behind them to read as objects. DESIGN.md 4.5/4.6 amended alongside this (hairlines-create-structure, and the grid as background signature) — approved rather than assumed. */ body.detail-view, body.portfolio-view { background: var(--mf-color-canvas, #f6f5f2); } body.detail-view main, body.portfolio-view main { width: min(1200px, calc(100% - 64px)); padding: 46px 0 64px; } /* Portfolio keeps the header/product tabs (it is a tab, not a drill-down) but hides the trends surface. */ body.portfolio-view main { padding-top: 8px; } body.portfolio-view #dashboard { display: none; } body.detail-view #detail, body.portfolio-view #detail { --detail-graphite: var(--mf-text-strong, #111316); --detail-ink: var(--mf-text-primary, #1b2026); --detail-muted: var(--mf-text-secondary, #65707a); --detail-faint: var(--mf-text-disabled, #9aa3ad); --detail-paper: var(--mf-surface-subtle, #f6f7f4); --detail-panel: var(--mf-surface-panel, #fffefa); --detail-line: var(--mf-border-subtle, rgba(17, 19, 22, 0.105)); --detail-line-strong: var(--mf-border-default, rgba(17, 19, 22, 0.18)); --detail-cyan: var(--mf-signal-accent, #74deeb); --detail-cyan-soft: var(--mf-color-accent-soft, rgba(116, 222, 235, 0.18)); --detail-chart-line: var(--mf-chart-line, #61777d); --detail-chart-line-prior: var(--mf-chart-line-prior, rgba(101, 112, 122, 0.52)); --detail-chart-area: var(--mf-chart-area, rgba(116, 222, 235, 0.13)); --detail-chart-paper: var(--mf-chart-paper, #fbfcfa); --detail-chart-ink: var(--mf-chart-ink, #182026); --detail-chart-muted: var(--mf-chart-muted, #59666d); --detail-chart-faint: var(--mf-chart-faint, #909a9f); --detail-chart-rule: var(--mf-chart-rule, rgba(24, 32, 38, 0.10)); --detail-chart-rule-strong: var(--mf-chart-rule-strong, rgba(24, 32, 38, 0.28)); --detail-chart-area-pos: var(--mf-chart-area-positive, rgba(22, 135, 101, 0.075)); --detail-chart-area-neg: var(--mf-chart-area-negative, rgba(200, 82, 97, 0.07)); --detail-pos: var(--mf-status-positive, #168765); --detail-neg: var(--mf-status-negative, #c85261); --detail-shadow: var(--mf-shadow-detail, 0 22px 54px rgba(17, 19, 22, 0.065)); --detail-label: rgba(77, 88, 99, 0.86); --detail-copy-muted: rgba(101, 112, 125, 0.86); --detail-copy-soft: rgba(101, 112, 125, 0.74); --detail-sans: var(--mf-font-sans, Inter, "Helvetica Neue", Arial, sans-serif); --detail-mono: var(--mf-font-mono, "SF Mono", Menlo, Consolas, monospace); color: var(--detail-ink); font-family: var(--detail-sans); font-variant-numeric: normal; } :where(body.detail-view #detail) :where(button, input, select, textarea), :where(body.portfolio-view #detail) :where(button, input, select, textarea) { font-family: var(--detail-sans); } body.detail-view #detail .crumb { color: var(--detail-muted); font-family: var(--detail-sans); font-size: 12.5px; font-weight: 560; letter-spacing: 0; } body.detail-view #detail .crumb a { color: var(--detail-graphite); border-bottom-color: rgba(17, 19, 22, 0.22); } body.detail-view #detail .crumb a:hover { color: var(--detail-graphite); border-bottom-color: rgba(17, 19, 22, 0.62); } body.detail-view #detail .back-link { height: 30px; padding: 0 10px; border-color: var(--detail-line); border-radius: 999px; background: rgba(255, 254, 250, 0.68); color: var(--detail-label); font-family: var(--detail-sans); font-size: 12px; font-weight: 650; letter-spacing: 0; } body.detail-view #detail .back-link:hover { background: var(--detail-panel); } body.detail-view #detail .constituents-head, body.detail-view #detail .diff-row-head, body.detail-view #detail .recomp-summary, body.detail-view #detail .status-badge, body.detail-view #detail .resolved-badge { text-transform: none; letter-spacing: 0; } body.detail-view #detail .status-badge, body.detail-view #detail .resolved-badge { border-radius: 0; font-family: var(--detail-sans); font-size: 12px; font-weight: 650; letter-spacing: 0; line-height: 1; } .nav-screen { min-width: 0; min-height: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .nav-screen-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; } .nav-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; min-width: 0; padding: 0; } .nav-detail-logo { display: inline-flex; align-items: center; width: 188px; height: auto; border-bottom: 0; text-decoration: none; } .crumb .nav-detail-logo, .crumb .nav-detail-logo:hover { border-bottom: 0; } .nav-detail-logo img { display: block; width: 100%; height: auto; } @media (max-width: 820px) { .nav-detail-logo { width: 174px; } } .detail-brand-row { position: relative; z-index: 70; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-width: 0; } .auth-shell-detail { margin-left: auto; } .detail-back-row { grid-area: back; display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 0; } /* Three columns now, not two: the topic image sits beside the identity text rather than nested inside it, so it can stretch (align-items:stretch) to match whichever of the OTHER two columns is taller — in practice almost always the Theme Direction column, since its content (two fixed labels, a switch, a Buy button) barely varies, while identity text does. That is what keeps the image's bottom edge flush with the Buy button's without a hardcoded height: the image has no intrinsic height opinion of its own to fight with. */ .nav-detail-top { display: grid; grid-template-columns: 168px minmax(300px, 1fr) clamp(320px, 27vw, 390px); grid-template-areas: "back back ." "image identity val"; align-items: stretch; column-gap: clamp(20px, 2.4vw, 32px); row-gap: 8px; margin: 3px 0 0; padding: 18px 0 0; } .nav-detail-top .detail-id { grid-area: identity; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "desc" "source" "position" "prov"; align-items: start; min-width: 0; } .nav-detail-top .detail-name { grid-area: name; margin: 0; color: var(--detail-graphite); font-family: var(--detail-sans); font-size: 32px; font-weight: 590; letter-spacing: -0.015em; line-height: 1.05; } .nav-detail-top .nav-pole { grid-area: pole; align-self: start; width: max-content; max-width: 100%; margin-top: 2px; border-color: var(--detail-line); background: rgba(255, 254, 250, 0.66); color: var(--detail-muted); font-family: var(--detail-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.055em; text-transform: none; } .nav-detail-top .detail-desc-wrap { grid-area: desc; margin: 8px 0 0; } .nav-detail-top .detail-desc { margin: 0; color: var(--detail-muted); font-family: var(--detail-sans); font-size: 14.5px; line-height: 1.48; } .detail-desc-wrap.is-collapsed .detail-desc { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .detail-desc-toggle { display: inline-flex; align-items: center; justify-content: flex-start; width: auto; min-width: 0; height: auto; min-height: 0; margin: 6px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--detail-graphite); font-family: var(--detail-sans); font-size: 12px; font-weight: 650; letter-spacing: 0; line-height: 1.2; text-align: left; cursor: pointer; } .detail-desc-toggle:hover { transform: none; box-shadow: none; text-decoration: underline; } .detail-desc-toggle:active { transform: none; } .nav-detail-top .detail-source-row { grid-area: source; display: flex; flex-wrap: wrap; align-items: center; justify-self: start; gap: 7px; min-width: 0; margin-top: 10px; } .nav-detail-top .market-source-badge { grid-area: source; justify-self: start; margin-top: 10px; border-color: rgba(88, 99, 108, 0.13); background: rgba(255, 254, 250, 0.54); color: rgba(103, 113, 121, 0.9); font-family: var(--detail-sans); font-size: 12px; font-weight: 650; letter-spacing: 0; line-height: 1; } .nav-detail-top .detail-source-row .market-source-badge, .nav-detail-top .detail-source-row .measurement-auto-stamp { grid-area: auto; margin-top: 0; } .nav-detail-top .detail-source-row .measurement-auto-stamp { font-family: var(--detail-sans); /* Quieted to match the dashboard card's stamp — provenance, not a headline. */ min-height: 0; padding: 0; border: 0; background: none; color: var(--detail-faint); font-weight: 500; } .nav-detail-top .detail-source-row .measurement-live-dot { width: 5px; height: 5px; background: var(--detail-faint); box-shadow: none; animation: none; } .nav-owned-position-host { grid-area: position; display: grid; gap: 6px; width: 100%; max-width: calc(620px + 64px + 15px); margin-top: 12px; } .nav-owned-position-host[hidden] { display: none; } .nav-owned-position { --owned-position-tone: var(--mf-pos); display: grid; grid-template-columns: minmax(0, 1fr) auto auto 18px; align-items: center; gap: 12px; min-width: 0; min-height: 52px; padding: 8px 10px 8px 12px; border: 1px solid rgba(17, 19, 22, 0.12); border-left: 3px solid var(--owned-position-tone); border-radius: 6px; background: rgba(255, 254, 250, 0.82); color: var(--detail-ink); font-family: var(--detail-sans); text-decoration: none; transition: border-color var(--mf-duration-standard, 180ms) var(--mf-ease), background-color var(--mf-duration-standard, 180ms) var(--mf-ease); } .nav-owned-position:hover { border-color: rgba(17, 19, 22, 0.22); border-left-color: var(--owned-position-tone); background: #fffefa; } .nav-owned-position:focus-visible { outline: 2px solid var(--detail-cyan); outline-offset: 2px; } .nav-owned-position[data-position-tone="building"] { --owned-position-tone: #a8641f; } .nav-owned-position[data-position-tone="rebalancing"] { --owned-position-tone: #2775ca; } .nav-owned-position[data-position-tone="attention"] { --owned-position-tone: var(--mf-neg); } .nav-owned-position[data-position-tone="closed"], .nav-owned-position[data-position-tone="neutral"] { --owned-position-tone: var(--detail-faint); } .nav-owned-position-main, .nav-owned-position-value { display: grid; gap: 3px; min-width: 0; } .nav-owned-position-main small, .nav-owned-position-value small { color: var(--detail-faint); font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1; } .nav-owned-position-main strong { overflow: hidden; color: var(--detail-ink); font-size: 13.5px; font-weight: 590; letter-spacing: 0; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .nav-owned-position[data-position-direction="long"] .nav-owned-position-main strong { color: var(--mf-pos); } .nav-owned-position[data-position-direction="short"] .nav-owned-position-main strong { color: var(--mf-neg); } .nav-owned-position-status { display: inline-flex; align-items: center; gap: 6px; color: var(--detail-muted); font-size: 12px; font-weight: 560; line-height: 1; white-space: nowrap; } .nav-owned-position-status i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--owned-position-tone); } .nav-owned-position-value { justify-items: end; padding-left: 12px; border-left: 1px solid rgba(17, 19, 22, 0.1); } .nav-owned-position-amount { color: var(--detail-ink); font-family: var(--detail-mono); font-size: 13.5px; font-weight: 600; } .nav-owned-position .nav-owned-position-amount .mf-usdc-icon { width: 13px; height: 13px; } .nav-owned-position-arrow { display: inline-flex; align-items: center; color: var(--detail-faint); } .nav-owned-position-arrow svg { width: 18px; height: 11px; } @media (max-width: 640px) { .nav-owned-position { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 8px 10px; } .nav-owned-position-value { grid-column: 1 / 3; justify-items: start; padding: 0; border-left: 0; } .nav-owned-position-arrow { grid-column: 3; grid-row: 1 / span 2; } } /* No aspect-ratio: giving it one would make WIDTH follow the stretched height, and that width then eats into the identity-text column's own space — which can wrap the title/description onto more lines, growing the row, growing the image, growing the row again. A fixed column width (168px, set on .nav-detail-top above) breaks that loop; only height responds to the row. */ .nav-detail-top .nav-topic-image { grid-area: image; align-self: stretch; } .nav-topic-image { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--detail-line); border-radius: 18px; background: linear-gradient(135deg, rgba(116, 222, 235, 0.10), rgba(255, 254, 250, 0.72)), rgba(255, 254, 250, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); } .nav-topic-image.has-image { background: var(--detail-panel); } /* position:absolute + inset:0, not width/height:100% in normal flow: a percentage height on the can't resolve until the grid row's own auto-size is known, and the row's auto-size (in the "image" track) needs the img's contribution — a real circular dependency. Percentage-height resolution failing mid-cycle falls back to the img's OWN intrinsic aspect ratio (whatever photo happens to be loaded), which silently overrode the fixed 168px column and made .nav-detail-top's row taller than Theme Direction actually needs — a few pixels in some cases, tens of pixels with a very tall/narrow source photo. Taking the img out of flow removes it from that sizing pass entirely; .nav-topic-image (position:relative) is the sized box. */ .nav-topic-image img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .nav-topic-image-empty { display: block; border-style: dashed; opacity: 0.52; pointer-events: none; } .nav-detail-val { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; gap: 0; grid-area: val; align-self: start; } .nav-detail-val .nav-hero-slot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .nav-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 31px; min-width: 0; } .nav-section-title-wrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .nav-section-head h2 { margin: 0; color: var(--detail-graphite); font-family: var(--detail-sans); font-size: 15px; font-weight: 650; line-height: 1.15; letter-spacing: 0; text-transform: none; } .nav-section-head > span { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid rgba(17, 19, 22, 0.09); border-radius: 999px; background: rgba(255, 254, 250, 0.84); color: var(--detail-label); font-family: var(--detail-mono); font-size: 10.5px; font-weight: 650; line-height: 1.2; letter-spacing: 0.02em; text-align: right; } .nav-direction-panel { position: relative; display: grid; grid-template-rows: auto auto; align-content: start; justify-self: end; gap: 11px; height: auto; width: min(100%, 500px); } .nav-direction-frame { position: relative; padding: 0; border: 0; border-radius: 14px; background: transparent; } .nav-dir-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; padding: 4px; border: 0; border-radius: 14px; background: rgba(17, 19, 22, 0.045); box-shadow: inset 0 1px 2px rgba(17, 19, 22, 0.05); } .nav-dir-switch-btn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy copy" "value price"; grid-template-rows: auto auto; align-items: start; align-content: start; gap: 3px; min-width: 0; min-height: 0; height: auto; overflow: hidden; padding: 14px 18px 15px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--detail-muted); box-shadow: none; text-align: left; text-transform: none; cursor: pointer; transition: background var(--mf-duration-standard, 180ms) var(--mf-ease), border-color var(--mf-duration-standard, 180ms) var(--mf-ease), box-shadow var(--mf-duration-standard, 180ms) var(--mf-ease); } .nav-dir-switch-btn::before, .nav-dir-switch-btn::after { content: none; } .nav-dir-switch-btn:hover:not(:disabled) { border-color: transparent; background: rgba(255, 254, 250, 0.5); } .nav-dir-switch-btn:active:not(:disabled) { transform: scale(0.99); } .nav-dir-switch-btn.long.active, .nav-dir-switch-btn.short.active { color: var(--detail-graphite); border-color: rgba(17, 19, 22, 0.05); background: var(--detail-panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(17, 19, 22, 0.045), 0 4px 10px rgba(17, 19, 22, 0.06); } .nav-dir-copy { grid-area: copy; display: flex; align-items: center; justify-content: flex-start; min-width: 0; padding: 0; text-align: left; z-index: 1; } .nav-dir-switch-btn.short .nav-dir-copy { justify-content: flex-start; text-align: left; } .nav-dir-label { color: var(--detail-faint); font-family: var(--detail-sans); font-size: 13px; font-weight: 620; line-height: 1.15; letter-spacing: 0.01em; overflow-wrap: normal; word-break: normal; hyphens: none; transition: color var(--mf-duration-standard, 180ms) var(--mf-ease); } .nav-dir-switch-btn.active .nav-dir-label { color: var(--detail-muted); font-weight: 660; } .nav-dir-value { grid-area: value; justify-self: start; align-self: baseline; /* min-width:0 lets this grid item actually shrink to its track instead of overflowing into the price column beside it (the grid default is to never size below content — the classic overlap trap); nowrap +hidden is a safety net for an unusually wide percentage, not something normal values should ever hit. */ min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; margin: 4px 0 0; color: var(--detail-graphite); font-family: var(--detail-sans); font-size: 22px; font-weight: 650; line-height: 1; letter-spacing: -0.01em; text-align: left; font-variant-numeric: tabular-nums; z-index: 1; transition: color var(--mf-duration-standard, 180ms) var(--mf-ease), font-weight var(--mf-duration-standard, 180ms) var(--mf-ease); } .nav-dir-switch-btn.short .nav-dir-value { justify-self: start; text-align: left; } .nav-dir-value.pos { color: var(--detail-pos); } .nav-dir-value.neg { color: var(--detail-neg); } .nav-dir-switch-btn:not(.active) .nav-dir-value { color: var(--detail-muted); font-weight: 560; opacity: 1; } /* Share price is deliberately quiet — the % change stays the number your eye lands on first. No pos/neg tint here (that signal already lives on .nav-dir-value); this is just "what a share costs right now". */ .nav-dir-price { grid-area: price; justify-self: end; align-self: baseline; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; margin: 4px 0 0; color: var(--detail-faint); font-family: var(--detail-sans); font-size: 12px; font-weight: 560; line-height: 1.2; text-align: right; font-variant-numeric: tabular-nums; } .nav-analysis-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 390px); align-items: stretch; gap: clamp(28px, 3.4vw, 52px); width: 100%; max-width: 100%; min-width: 0; margin: 0; } .nav-chart-panel, .nav-driver-panel { min-width: 0; } .nav-chart-panel { padding-top: 14px; border-top: 0; } .nav-chart-head { align-items: end; min-height: 58px; margin: 0 0 12px; } .nav-chart-title-block { min-width: min(100%, 430px); } .nav-chart-title-block h2 { margin: 0; color: var(--detail-graphite); font-family: var(--detail-sans); font-size: 15px; font-weight: 650; line-height: 1.15; text-transform: none; } .nav-chart-subtitle { display: inline-flex; align-items: center; gap: 6px; margin: 5px 0 0; color: var(--detail-chart-muted); font-family: var(--detail-sans); font-size: 12px; font-weight: 520; line-height: 1.2; } /* The value is deliberately just a quiet secondary number next to the chart title — the direction switcher in the header owns the % change and stays the page's top visual priority. Its color tracks pos/neg the same way the chart line and direction switcher do (gain vs. the window-open baseline); scrubbing the chart or focusing a Key Event repaints both the number and its color for that specific point. */ .nav-chart-value-amount { color: var(--detail-graphite); font-weight: 660; transition: color var(--mf-duration-standard, 180ms) var(--mf-ease); } .nav-chart-value-amount.pos { color: var(--detail-pos); } .nav-chart-value-amount.neg { color: var(--detail-neg); } .nav-chart-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; max-width: 100%; min-width: 0; margin-left: auto; } .nav-chart-rebase-note { display: none; } .nav-chart-layout { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; } /* Methodology footnote, not a headline — quiet caption below the chart rather than a second paragraph. */ .nav-chart-continuity { margin: 10px 0 0; color: var(--detail-faint); font-family: var(--detail-sans); font-size: 11px; line-height: 1.4; } .nav-chart-panel .chart-range { gap: 2px; padding: 0; border: 0; border-bottom: 1px solid var(--detail-chart-rule-strong); border-radius: 0; background: transparent; box-shadow: none; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .nav-chart-panel .chart-range::-webkit-scrollbar { display: none; } .nav-chart-panel .chart-range-button { position: relative; flex: 0 0 auto; min-width: 38px; height: 34px; min-height: 34px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--detail-muted); font-family: var(--detail-sans); font-size: var(--mf-font-size-label); font-weight: var(--mf-font-weight-semibold); letter-spacing: 0.03em; transition: background var(--mf-duration-standard, 180ms) var(--mf-ease), border-color var(--mf-duration-standard, 180ms) var(--mf-ease), color var(--mf-duration-standard, 180ms) var(--mf-ease), transform var(--mf-duration-standard, 180ms) var(--mf-ease); } .nav-chart-panel .chart-range-button:hover { border-bottom-color: var(--detail-chart-rule-strong); background: transparent; color: var(--detail-graphite); transform: none; } .nav-chart-panel .chart-range-button:active { transform: translateY(0); } .nav-chart-panel .chart-range-button:focus-visible { /* Inset (not the site-wide default 2px outset) so keyboard focus never gets clipped into a stray line by this row's horizontal scroll — the ring stays fully inside the button regardless of scroll position. */ outline: 2px solid var(--detail-cyan); outline-offset: -2px; } .nav-chart-panel .chart-range-button.active { border-bottom-color: var(--detail-cyan); background: transparent; box-shadow: none; color: var(--detail-graphite); } .nav-chart-panel .range-custom { flex: 0 0 auto; margin: 0; gap: 6px; flex-wrap: nowrap; color: var(--detail-copy-soft); } .nav-chart-panel .range-custom-input, .nav-chart-panel .range-custom-apply { height: 30px; min-height: 30px; border-color: rgba(17, 19, 22, 0.095); border-radius: 6px; background: rgba(255, 254, 250, 0.86); color: var(--detail-graphite); font-size: 12px; font-weight: 500; letter-spacing: 0; } .nav-chart-panel .range-custom-input { width: 108px; padding: 0 8px; font-family: var(--detail-sans); } .nav-chart-panel .range-custom-apply { width: auto; min-width: 0; padding: 0 9px; font-family: var(--detail-sans); font-weight: var(--mf-font-weight-semibold); } .nav-chart-panel .range-custom-sep { color: var(--detail-copy-soft); font-size: 11px; } .nav-chart-panel .range-custom-input:focus { border-color: rgba(83, 191, 205, 0.72); box-shadow: none; } .nav-chart-panel .range-custom-apply:hover { box-shadow: none; border-color: rgba(83, 191, 205, 0.42); background: #f4fdff; transform: translateY(-1px); } @media (max-width: 620px) { .nav-chart-controls { width: 100%; justify-content: flex-start; margin-left: 0; } .nav-chart-panel .chart-range { width: 100%; flex-wrap: wrap; overflow-x: visible; } .nav-chart-panel .range-custom { flex: 1 0 100%; width: 100%; justify-content: flex-start; margin-top: 4px; } } .nav-chart-frame { position: relative; min-width: 0; } .nav-chart-frame .chart-wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .nav-chart-frame .chart { height: 288px; } .nav-chart-frame .chart .line { stroke: var(--detail-chart-line); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.05; opacity: 0.96; vector-effect: non-scaling-stroke; } .nav-chart-frame .chart .nav-window-line.pos { stroke: var(--detail-pos); } .nav-chart-frame .chart .nav-window-line.neg { stroke: var(--detail-neg); } .nav-chart-frame .chart .line.prior { stroke: var(--detail-chart-line-prior); stroke-width: 1.35; opacity: 1; } .nav-chart-frame .chart .area { fill: transparent; opacity: 1; } .nav-chart-frame .chart .nav-window-area.pos { fill: var(--detail-chart-area-pos); } .nav-chart-frame .chart .nav-window-area.neg { fill: var(--detail-chart-area-neg); } .nav-chart-frame .chart .area.prior { opacity: 0.38; } .nav-chart-frame .chart .dot { fill: var(--detail-panel); stroke: var(--detail-chart-line); stroke-width: 1.65; vector-effect: non-scaling-stroke; } .nav-chart-frame .chart .dot.pos { stroke: var(--detail-pos); } .nav-chart-frame .chart .dot.neg { stroke: var(--detail-neg); } .nav-chart-frame .chart .nav-window-baseline { stroke: var(--detail-chart-rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; } .nav-chart-frame .chart .nav-window-start-dot, .nav-chart-frame .chart .nav-window-end-dot { fill: var(--detail-chart-paper); stroke: var(--detail-chart-line); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .nav-chart-frame .chart .nav-window-end-dot.pos { stroke: var(--detail-pos); } .nav-chart-frame .chart .nav-window-end-dot.neg { stroke: var(--detail-neg); } /* Only the empty-state "1 tick in this window" hint still uses this — every other tick/gridline/axis label was removed for a Robinhood-style bare line (the exact date/value now only ever surfaces on hover). */ .nav-chart-frame .chart .xtick { fill: var(--detail-copy-soft); font: 10.5px var(--detail-mono); letter-spacing: 0; } body.detail-view #tip.tip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; min-width: 196px; max-width: min(280px, calc(100vw - 24px)); padding: 11px 14px; border: 1px solid rgba(17, 19, 22, 0.07); border-radius: 12px; background: var(--detail-panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(17, 19, 22, 0.05), 0 14px 30px rgba(17, 19, 22, 0.11); color: var(--detail-chart-ink); white-space: normal; } body.detail-view #tip.tip.hidden { display: none; } body.detail-view #tip.tip time { grid-column: 1; color: var(--detail-chart-faint); font-family: var(--detail-sans); font-size: 11px; font-weight: 560; letter-spacing: 0.005em; } body.detail-view #tip.tip .tip-measurement { grid-column: 1; overflow: hidden; color: var(--detail-chart-muted); font-family: var(--detail-sans); font-size: 11.5px; font-weight: 610; text-overflow: ellipsis; white-space: nowrap; } body.detail-view #tip.tip .tip-value { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; font-family: var(--detail-sans); font-size: 17px; font-weight: 680; letter-spacing: -0.012em; } /* Key Events — an append-only news/result history. Events stay out of the chart until a list interaction asks for one focus line, keeping dense sports feeds from turning the price path into a marker wall. */ .nav-chart-frame .chart .news-event-focus-band { fill: rgba(83, 191, 205, 0.075); pointer-events: none; } .nav-chart-frame .chart .news-event-focus-line { stroke: var(--mf-signal-accent-ink); stroke-width: 1.35; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; } .nav-chart-frame .chart .news-event-focus-line.is-pinned { stroke-width: 1.8; stroke-dasharray: none; } .nav-chart-frame .chart .news-event-focus-dot { fill: var(--detail-chart-paper); stroke: var(--mf-signal-accent-ink); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; } .nav-chart-frame .chart .news-event-focus-dot.is-pinned { fill: var(--detail-cyan); } .nav-key-events { display: grid; grid-template-rows: auto minmax(0, 1fr); align-self: stretch; min-width: 0; min-height: 0; padding: 24px 0 0; overflow: hidden; border-top: 1px solid var(--mf-border-default); border-left: 0; color: var(--detail-ink); font-family: var(--detail-sans); } .nav-analysis-grid > .nav-key-events { padding: 14px 0 0 clamp(20px, 2vw, 28px); border-top: 0; border-left: 1px solid var(--mf-border-default); } /* min-height matches .nav-chart-head so "Key Events" sits level with the chart title next to it, even though this header is now a single line where the chart title block is two. */ .nav-key-events-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; margin-bottom: 12px; } .nav-key-events-head h2 { margin: 0; color: var(--detail-graphite); font-family: var(--detail-sans); font-size: 18px; font-weight: 680; letter-spacing: 0; line-height: 1.2; } .nav-key-events-head-meta { display: grid; justify-items: end; gap: 6px; max-width: 150px; color: var(--detail-chart-muted); font-size: 11px; line-height: 1.25; text-align: right; } body.detail-view #detail .nav-key-events :where(button) { width: auto; min-width: 0; height: auto; min-height: 0; margin: 0; border-radius: var(--r); box-shadow: none; font-family: var(--detail-sans); letter-spacing: 0; text-transform: none; } .nav-key-events-restore, .nav-key-events-page button { padding: 6px 10px; border: 1px solid var(--detail-line-strong); border-radius: var(--r); background: var(--detail-panel); color: var(--detail-graphite); font-size: 12px; font-weight: 650; cursor: pointer; } .nav-key-events-restore:hover, .nav-key-events-page button:hover { border-color: rgba(83, 191, 205, 0.58); background: #f4fdff; transform: none; } /* A scroll container still sizes to its content, so this needs to stay definite — it is the viewport height, not a floor. Scaled to the tallest the rail can be without dwarfing the chart column beside it. */ .nav-key-events-scroll { position: relative; min-height: 0; height: clamp(430px, 46vh, 580px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; border-block: 1px solid var(--detail-line-strong); background: rgba(255, 254, 250, 0.42); scrollbar-width: thin; scrollbar-color: var(--detail-line-strong) transparent; } .nav-key-events.has-events .nav-key-events-scroll { height: clamp(430px, 46vh, 580px); } .nav-key-events-list { position: relative; margin: 0; padding: 0; list-style: none; } .nav-key-events-month { position: sticky; top: 0; z-index: 3; padding: 8px 12px 7px 4px; background: var(--detail-chart-paper); color: var(--detail-chart-muted); font-family: var(--detail-sans); font-size: 11px; font-weight: 650; line-height: 1; } .nav-key-event { position: relative; content-visibility: auto; contain-intrinsic-size: 72px; } .nav-key-event article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; margin: 1px 0; padding: 8px 10px; border-radius: var(--r); background: transparent; transition:background var(--mf-duration-standard, 180ms) var(--mf-ease); } .nav-key-event:hover article, .nav-key-event:focus-within article { background: var(--mf-surface-hover); } .nav-key-event.is-selected article { background: var(--mf-surface-selected); } /* The dot carries the curator's 3-5 impact grade, so the highest-stakes events are findable in a scan without spending a row-level chip on it. A ring (not a fill) reads as "selected" so it doesn't fight the impact color. */ .nav-key-event-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mf-border-strong); } .nav-key-event[data-key-event-impact="4"] .nav-key-event-dot { background: var(--detail-chart-muted); } .nav-key-event[data-key-event-impact="5"] .nav-key-event-dot { width: 8px; height: 8px; background: var(--detail-graphite); } .nav-key-event.is-selected .nav-key-event-dot { background: var(--mf-signal-accent-ink); box-shadow: 0 0 0 3px var(--mf-signal-accent); } .nav-key-event.is-outside:not(.is-selected) .nav-key-event-tag.is-note { border-color: rgba(138, 100, 45, 0.42); color: #8a642d; } .nav-key-event-focus { display: block; min-height: 0 !important; padding: 0 !important; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; } .nav-key-event-focus:hover, .nav-key-event-focus:active { background: transparent; filter: none; transform: none !important; } .nav-key-event-focus:disabled { cursor: default; opacity: 1; } .nav-key-event-focus:focus-visible, .nav-key-event-source:focus-visible, .nav-key-events-restore:focus-visible, .nav-key-events-page button:focus-visible, .nav-key-events-scroll:focus-visible { outline: 2px solid var(--mf-signal-accent-ink); outline-offset: -2px; } .nav-key-event-time { flex: none; color: var(--detail-chart-muted); font-family: var(--detail-mono); font-size: 10.5px; font-variant-numeric: tabular-nums; line-height: 1.4; white-space: nowrap; } /* Two lines is the whole row budget. Longer headlines ellipsize; the full text stays reachable through the button tooltip and the source link. */ .nav-key-event-focus strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; color: var(--detail-graphite); font-size: 13.5px; font-weight: 620; line-height: 1.35; } .nav-key-event[data-key-event-impact="5"] .nav-key-event-focus strong { font-weight: 700; } .nav-key-event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-width: 0; color: var(--mf-text-secondary); font-size: 10.5px; line-height: 1.3; } /* No ring. A 999px stroke around a 9.5px word was the densest cluster of line on the page — 7 chips paid 28 painted edges, 22% of the whole detail page, and the rail grows that count with every event it loads. The chip is now a token RECESSED into the paper: page-ground fill on a panel, so the value step that separates panel from canvas does the same job one level down. Radius stays — the pill is the chip's shape identity, not its boundary. */ .nav-key-event-tag { flex: none; padding: 2px 7px; border: 0; border-radius: 999px; background: var(--mf-color-canvas, #f6f5f2); color: var(--detail-chart-muted); font-family: var(--detail-sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap; } /* Pinned keeps its cyan fill — that is a real state signal, and the fill alone now carries it. Ink is explicit: --detail-graphite on this cyan measured 3.93:1, under AA for 9.5px text. That was pre-existing (removing the ring does not touch text contrast) but it surfaced while measuring the de-ringed chips, and --mf-text-strong on the same fill is 11.87:1. */ .nav-key-event-tag.is-pinned { background: var(--mf-signal-accent); color: var(--mf-text-strong, #111316); } /* A note used a dashed ring to read as softer than a solid tag. With rings gone the same distinction is made by absence of fill: the base chips are recessed tokens, a note is bare text on the panel. */ .nav-key-event-tag.is-note { background: transparent; color: var(--detail-muted); } /* Sits on the meta line rather than in a bordered row of its own: one publisher name never justified 30px plus a divider. `flex: 1 1 0` gives it a zero base size, so a long masthead ellipsizes in the space left over instead of wrapping the row to a third line. */ .nav-key-event-source { display: flex; align-items: center; justify-content: flex-end; gap: 3px; flex: 1 1 0; min-width: 0; border-left: 0; color: var(--mf-text-secondary); font-size: 10.5px; font-weight: 650; line-height: 1.3; text-decoration: none; } /* A primary source (a ministry, a regulator, a filing) is stronger evidence than a wire report, and its own name says so better than a generic badge would. */ .nav-key-event-source.is-official { color: var(--detail-graphite); font-weight: 700; } .nav-key-event-source:hover { color: var(--detail-graphite); text-decoration: underline; text-underline-offset: 2px; } .nav-key-event-source > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-key-events-page { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 7px 12px; border-top: 1px solid var(--detail-line); background: var(--detail-chart-paper); color: var(--detail-chart-muted); font-size: 12px; } .nav-key-events-sentinel { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; pointer-events: none; } .nav-key-events-error { color: var(--detail-neg); } .nav-key-events-empty { display: grid; min-height: 260px; place-items: center; padding: 24px; color: var(--detail-chart-muted); font-size: 13px; text-align: center; } .nav-key-event-skeleton { display: grid; align-content: center; gap: 8px; min-height: 74px; padding: 12px 10px; } .nav-key-event-skeleton span { width: min(520px, 68%); height: 12px; border-radius: 4px; background: linear-gradient(90deg, rgba(24, 32, 38, 0.04), rgba(24, 32, 38, 0.1), rgba(24, 32, 38, 0.04)); background-size: 200% 100%; animation: diff-shimmer 1.4s ease-in-out infinite; } .nav-key-event-skeleton span:last-child { width: min(310px, 44%); height: 9px; } @media (max-width: 620px) { .nav-key-events { padding-top: 20px; } .nav-key-events-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; } .nav-key-events-head-meta { justify-items: start; max-width: none; width: 100%; text-align: left; } .nav-key-events.has-events .nav-key-events-scroll { min-height: min(74dvh, 620px); -webkit-overflow-scrolling: touch; } .nav-key-event article { gap: 4px; padding: 11px 10px 12px; } .nav-key-events-month { padding-right: 12px; padding-left: 4px; } } @media (prefers-reduced-motion: reduce) { .nav-key-event article { transition: none; } .nav-key-event-skeleton span { animation: none; } } .nav-driver-panel { display: grid; grid-template-rows: 46px minmax(0, 1fr); gap: 9px; } .nav-driver-list { display: grid; align-content: start; gap: 0; height: auto; min-height: 288px; overflow: auto; overscroll-behavior: contain; padding-right: 0; border: 1px solid var(--detail-line); background: rgba(255, 254, 250, 0.72); scrollbar-gutter: stable; } .nav-driver-list::-webkit-scrollbar { width: 8px; } .nav-driver-list::-webkit-scrollbar-track { background: rgba(17, 19, 22, 0.035); } .nav-driver-list::-webkit-scrollbar-thumb { background: rgba(17, 19, 22, 0.16); } .nav-driver-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 47px; min-width: 0; padding: 7px 11px 7px 14px; border: 0; border-bottom: 1px solid var(--detail-line); border-radius: 0; background: transparent; color: inherit; box-shadow: none; font-weight: 400; text-align: left; cursor: pointer; } .nav-driver-card:last-child { border-bottom: 0; } .nav-driver-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--driver-accent, var(--detail-cyan)); } .nav-driver-card:hover, .nav-driver-card.active { background: #f4fdff; } .nav-driver-card.active { box-shadow: inset 0 0 0 1px rgba(83, 191, 205, 0.42); } .nav-driver-pie { position: relative; grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; justify-self: end; width: 22px; height: 22px; border: 1px solid rgba(17, 19, 22, 0.1); border-radius: 999px; background: conic-gradient(var(--driver-accent, var(--detail-cyan)) var(--driver-share), rgba(17, 19, 22, 0.08) 0); } .nav-driver-pie::after { content: attr(data-tip); position: absolute; top: 50%; right: 32px; z-index: 4; display: none; min-width: 38px; padding: 4px 6px; border: 1px solid rgba(17, 19, 22, 0.1); background: rgba(255, 254, 250, 0.96); box-shadow: none; color: var(--detail-graphite); font-family: var(--detail-mono); font-size: 10.5px; font-weight: 650; text-align: center; white-space: nowrap; transform: translate(4px, -50%); } .nav-driver-pie::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(17, 19, 22, 0.06); border-radius: inherit; background: var(--detail-panel); } .nav-driver-pie:hover::after, .nav-driver-card:focus-visible .nav-driver-pie::after { display: block; } .nav-driver-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nav-driver-name { overflow: hidden; color: var(--detail-graphite); font-family: var(--detail-sans); font-size: 12.5px; font-weight: 680; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .nav-driver-note { display: -webkit-box; overflow: hidden; color: var(--detail-copy-muted); font-family: var(--detail-sans); font-size: 11px; font-weight: 400; line-height: 1.2; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .nav-driver-count { display: none; color: var(--detail-copy-muted); font-family: var(--detail-mono); font-size: 10.5px; font-weight: 650; white-space: nowrap; } .nav-basket-shell { display: grid; gap: 9px; margin-top: 0; } .nav-basket-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 0; } .nav-basket-title { flex: 1 1 auto; margin-right: 0; } .nav-basket-title > span { margin-left: auto; } .nav-basket-tabs.comp-tabs { margin: 0; gap: 3px; padding: 3px; border-color: var(--detail-line); border-radius: 0; background: rgba(255, 254, 250, 0.72); } .nav-basket-tabs.comp-tabs .comp-tab { width: auto; min-width: 92px; height: 28px; padding: 0 10px; border-radius: 0; color: var(--detail-muted); font-family: var(--detail-sans); font-size: 12.5px; font-weight: 650; letter-spacing: 0; white-space: nowrap; } .nav-basket-tabs.comp-tabs .comp-tab:hover { color: var(--detail-graphite); } .nav-basket-tabs.comp-tabs .comp-tab.active { background: #eefdff; box-shadow: inset 0 0 0 1px rgba(83, 191, 205, 0.4); color: var(--detail-graphite); } .nav-factor-clear { display: none; align-items: center; justify-content: center; width: auto; min-width: 0; height: 28px; min-height: 28px; padding: 0 11px; border: 1px solid rgba(83, 191, 205, 0.52); border-radius: 0; background: #effcff; color: var(--detail-graphite); box-shadow: none; font-family: var(--detail-sans); font-size: 12.5px; font-weight: 650; letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: background var(--mf-duration-standard, 180ms) var(--mf-ease), border-color var(--mf-duration-standard, 180ms) var(--mf-ease), color var(--mf-duration-standard, 180ms) var(--mf-ease); } .nav-factor-clear:hover { border-color: rgba(83, 191, 205, 0.48); background: #f4fdff; color: var(--detail-graphite); box-shadow: none; transform: none; } .nav-factor-clear.active { display: inline-flex; } .nav-update-records.recomp-records { gap: 8px; } .nav-recomp .nav-update-record { border: 1px solid var(--detail-line); background: rgba(255, 254, 250, 0.72); } .nav-recomp .nav-update-record:last-child { border-bottom: 1px solid var(--detail-line); } .nav-recomp .nav-update-record[open] { border-color: rgba(83, 191, 205, 0.48); background: rgba(244, 253, 255, 0.5); } .nav-recomp .nav-update-record > summary { display: grid; grid-template-columns: 12px auto minmax(240px, 1fr); grid-template-areas: "twist main stats"; align-items: center; gap: 12px; padding: 12px; } .nav-recomp .nav-update-record > summary::before { grid-column: 1; grid-area: twist; margin-top: 2px; } .nav-update-summary-main { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; grid-area: main; min-width: 0; } .nav-update-record .recomp-date { color: var(--detail-label); font-family: var(--detail-mono); font-size: 11px; font-weight: 650; white-space: nowrap; } .nav-update-record .recomp-summary { color: var(--detail-graphite); font-family: var(--detail-sans); font-size: 13px; font-weight: 650; line-height: 1.28; white-space: normal; } .nav-update-stats { display: flex; grid-area: stats; justify-content: flex-start; flex-wrap: wrap; gap: 6px; min-width: 0; } .nav-update-stat { display: grid; gap: 1px; min-width: 76px; padding: 6px 8px; border: 1px solid rgba(17, 19, 22, 0.08); background: rgba(255, 255, 255, 0.58); text-align: right; } .nav-update-stat b { color: var(--detail-graphite); font-family: var(--detail-mono); font-size: 12px; font-weight: 750; line-height: 1; } .nav-update-stat small { overflow: hidden; color: var(--detail-copy-muted); font-family: var(--detail-mono); font-size: 9.5px; font-weight: 650; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .nav-update-stat.pos b { color: var(--detail-pos); } .nav-update-stat.neg b { color: var(--detail-neg); } .nav-update-stat.warn b { color: var(--recomp-marker); } .nav-update-stat.muted b { color: var(--detail-copy-muted); } .nav-recomp .recomp-detail { padding: 2px 12px 16px 36px; } .nav-recomp .recomp-rationale { margin: 0 0 12px; max-width: 76ch; padding: 10px 12px; border: 1px solid rgba(17, 19, 22, 0.08); border-left: 3px solid rgba(83, 191, 205, 0.58); background: rgba(255, 255, 255, 0.58); color: var(--detail-muted); font-family: var(--detail-sans); font-size: 12.5px; line-height: 1.5; } .nav-recomp .diff-section { margin-top: 14px; max-width: 760px; } .nav-recomp .diff-section-head { padding: 0 0 7px; font-family: var(--detail-sans); text-transform: none; } .nav-recomp .diff-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; align-items: start; gap: 16px; padding: 9px 0; border-color: rgba(17, 19, 22, 0.08); } .nav-recomp .diff-cell-market { display: grid; grid-area: auto; align-content: start; gap: 5px; min-width: 0; } .nav-recomp .recomp-market-title { display: block; min-width: 0; } .nav-recomp .recomp-market-title .mlink, .nav-recomp .recomp-market-title .market-name { color: var(--detail-graphite); font-family: var(--detail-sans); font-size: 13.5px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; text-decoration: none; } .nav-recomp .recomp-market-title .mlink:hover { color: var(--detail-accent); text-decoration: underline; text-underline-offset: 3px; } .nav-recomp .recomp-market-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; } .nav-recomp .recomp-market-meta .resolved-badge { margin: 0; } .nav-recomp .recomp-facet { display: inline-flex; align-items: center; max-width: 100%; min-height: 20px; padding: 2px 7px; border: 1px solid rgba(17, 19, 22, 0.08); background: rgba(255, 255, 255, 0.6); color: var(--detail-copy-muted); font-family: var(--detail-mono); font-size: 10.5px; font-weight: 650; line-height: 1.2; } .nav-recomp .diff-cell-metrics { display: flex; justify-content: flex-end; min-width: 0; } .nav-recomp .diff-metric { display: inline-grid; grid-template-columns: auto auto; align-content: center; align-items: baseline; gap: 8px; min-height: 0; min-width: 0; padding: 2px 0; border: 0; background: transparent; color: var(--detail-graphite); text-align: right; white-space: nowrap; } .nav-recomp .diff-metric small { color: var(--detail-copy-muted); font-family: var(--detail-mono); font-size: 9.5px; font-weight: 650; line-height: 1; } .nav-recomp .diff-metric b, .nav-recomp .metric-before { font-family: var(--detail-mono); font-size: 12.5px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; } .nav-recomp .metric-before { color: var(--detail-copy-muted); font-weight: 650; } .nav-recomp .diff-metric-flow { display: inline-flex; align-items: baseline; justify-content: flex-end; flex-wrap: nowrap; gap: 2px 6px; min-width: 0; } .nav-recomp .diff-metric .pos, .nav-recomp .weight-delta.pos { color: var(--detail-pos); } .nav-recomp .diff-metric .neg, .nav-recomp .weight-delta.neg { color: var(--detail-neg); } .nav-recomp .diff-metric .zero, .nav-recomp .weight-delta.zero { color: var(--detail-copy-muted); } .nav-recomp .weight-delta { display: inline-flex; align-items: center; min-height: 17px; padding: 1px 5px; border: 1px solid rgba(17, 19, 22, 0.08); background: rgba(255, 254, 250, 0.75); font-family: var(--detail-mono); font-size: 10.5px; font-weight: 750; line-height: 1; } .nav-update-empty { margin: 0; padding: 18px 12px; border: 1px solid var(--detail-line); background: rgba(255, 254, 250, 0.72); color: var(--detail-muted); font-family: var(--detail-sans); font-size: 13px; } .nav-holding-list { display: grid; gap: 7px; } .nav-holding-card { display: grid; grid-template-columns: minmax(0, 1fr) 58px 148px; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border: 1px solid var(--detail-line); border-radius: 0; background: rgba(255, 254, 250, 0.72); box-shadow: none; transition: border-color var(--mf-duration-standard, 180ms) var(--mf-ease), background var(--mf-duration-standard, 180ms) var(--mf-ease); } .nav-holding-card:hover { border-color: rgba(17, 19, 22, 0.16); background: var(--detail-panel); } .nav-holding-card a.mlink { color: var(--detail-graphite); text-decoration: none; border-bottom: 1px dotted rgba(17, 19, 22, 0.28); } .nav-holding-card a.mlink:hover { color: var(--detail-graphite); border-bottom-color: rgba(17, 19, 22, 0.6); } .nav-holding-main { min-width: 0; } .nav-holding-market { overflow: hidden; color: var(--detail-graphite); font-family: var(--detail-sans); font-size: 13px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .nav-holding-facet { margin-top: 3px; overflow: hidden; color: var(--detail-copy-muted); font-family: var(--detail-sans); font-size: 11.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .nav-holding-side { display: flex; align-items: center; justify-content: flex-end; } .nav-holding-side span:last-child { color: var(--detail-copy-muted); font-family: var(--detail-mono); font-size: 10.5px; font-weight: 650; } .nav-side-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 22px; padding: 0 9px; border-radius: 0; font-family: var(--detail-sans); font-size: 12px; font-weight: 650; letter-spacing: 0; line-height: 1; } .nav-side-pill.yes { color: var(--detail-pos); border: 1px solid rgba(22, 148, 92, 0.26); background: rgba(22, 148, 92, 0.1); } .nav-side-pill.no { color: var(--detail-neg); border: 1px solid rgba(217, 76, 104, 0.28); background: rgba(217, 76, 104, 0.1); } .nav-holding-side span.nav-side-pill { color: var(--detail-graphite); font-family: var(--detail-sans); font-size: 12px; font-weight: 650; letter-spacing: 0; } .nav-holding-side span.nav-side-pill.yes { color: var(--detail-pos); } .nav-holding-side span.nav-side-pill.no { color: var(--detail-neg); } .nav-holding-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .nav-holding-stats span { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; } .nav-holding-stats b { color: var(--detail-graphite); font-family: var(--detail-mono); font-size: 12.5px; font-weight: 700; line-height: 1.1; } .nav-holding-stats small { color: var(--detail-copy-muted); font-family: var(--detail-mono); font-size: 10.5px; font-weight: 650; line-height: 1.1; } .nav-empty-card { padding: 18px; border: 1px solid var(--detail-line); border-radius: 0; background: var(--detail-panel); } .nav-recomp .diff-row-head { text-transform: none; } /* Admin NAV section. */ .admin-nav-section { margin-top: 26px; } .admin-nav-toolbar { align-items: center; } .admin-nav-head { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text); margin: 0; } /* ── Review tab (PRESENTATION_PIPELINE_PLAN.md) — queue left, editorial detail right. ─────────────────── */ .review-layout { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 18px; } /* Queue column: a sticky "Newest first · shown/total" header over a scrollable, self-refreshing list. The list scrolls on its own so a 40-item queue never pushes the editorial detail off the bottom of the page. */ .review-queue-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: sticky; top: 12px; } .review-queue-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); } .review-queue-shown { font-variant-numeric: tabular-nums; letter-spacing: 0; } .review-queue { display: flex; flex-direction: column; gap: 6px; max-height: calc(100dvh - 190px); overflow-y: auto; padding-right: 2px; } /* The row is a CONTAINER (open + remove are its two buttons) — a button can't nest inside a button. */ .review-item { display: flex; align-items: stretch; gap: 0; min-width: 0; border: 1px solid var(--detail-line); border-radius: 12px; background: rgba(255, 255, 255, 0.72); font-size: 12.5px; /* The row itself owns the transition — .review-item-open's `transition: none` correctly cancels the INHERITED button lift/shadow (it's a flat list row, not a raised CTA), but border-color and background live here on the parent and had no transition of their own, so hover/active snapped instantly. Reviewers move through this queue one row at a time, not dozens of times a minute, so a short ease-out reads as responsive rather than sluggish. */ transition: border-color var(--mf-duration-standard, 180ms) var(--mf-ease), background var(--mf-duration-standard, 180ms) var(--mf-ease); } .review-item-open { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1 1 auto; min-width: 0; width: auto; height: auto; /* override the global button { height: 54px } — the row grows to fit name + badges + blocker */ min-height: 0; padding: 9px 4px 9px 12px; text-align: left; border: 0; border-radius: 12px 0 0 12px; background: transparent; color: var(--text); box-shadow: none; font-size: 12.5px; font-weight: 400; transition: none; } .review-item-open:hover { transform: none; box-shadow: none; } .review-item:hover { border-color: rgba(116, 222, 235, 0.72); background: #ffffff; } .review-item.active { border-color: rgba(116, 222, 235, 0.95); background: rgba(235, 252, 255, 0.78); box-shadow: none; } .review-item-name { font-size: 13px; font-weight: 700; line-height: 1.3; } .review-item-meta { display: flex; flex-wrap: wrap; gap: 4px; } .review-item-age { font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* Remove is deliberately quiet until the row is hovered — it deletes the measurement, so it must not read as a sibling of "open", but it also must not need a trip to the Admin tab. */ .review-item-remove { flex: 0 0 auto; min-width: 0; width: 30px; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0 12px 12px 0; background: transparent; color: var(--text-faint); box-shadow: none; font-size: 12px; font-weight: 700; opacity: 0; transition:opacity var(--mf-duration-fast, 120ms) var(--mf-ease), color var(--mf-duration-fast, 120ms) var(--mf-ease); } .review-item:hover .review-item-remove, .review-item-remove:focus-visible { opacity: 1; } .review-item-remove:hover { transform: none; box-shadow: none; color: var(--neg); background: rgba(217, 76, 104, 0.09); } .review-blockers { font-size: 11px; color: var(--neg); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #ffffff; font-size: 10.5px; font-weight: 700; } /* publication lifecycle badges — shared by the review queue, list cards (local writer), and detail. */ .pub-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-soft); font-family: var(--list-sans, var(--detail-sans, var(--sans))); font-size: 12px; font-weight: 650; letter-spacing: 0; text-transform: none; vertical-align: middle; } .pub-badge.pub-draft { color: var(--text-dim); background: var(--surface-muted); } .pub-badge.pub-review, .pub-badge.pub-in_review { color: var(--accent); border-color: rgba(47, 127, 193, 0.4); background: var(--accent-soft); } .pub-badge.pub-rejected { color: var(--neg); border-color: rgba(217, 76, 104, 0.4); background: rgba(217, 76, 104, 0.09); } .pub-badge.pub-published { color: var(--accent-3); border-color: rgba(45, 138, 111, 0.4); background: rgba(45, 138, 111, 0.09); } .pub-badge.pub-unpublished { color: var(--mixed); background: var(--surface-muted); } .pub-badge.pub-update { color: var(--dir-high); border-color: rgba(47, 111, 159, 0.4); background: rgba(47, 111, 159, 0.09); } .pub-badge.pub-stale { color: var(--dir-low); border-color: rgba(199, 119, 47, 0.4); background: rgba(199, 119, 47, 0.09); } .pub-badge.pub-diverged { color: var(--neg); border-color: rgba(217, 76, 104, 0.4); } .pub-badge.pub-category { color: var(--text); border-color: rgba(116, 222, 235, 0.48); background: rgba(235, 252, 255, 0.8); } .review-detail { min-width: 0; } /* back-to-queue affordance — only shown on narrow screens, where selecting an item hides the queue (below). */ .review-back { display: none; align-items: center; gap: 6px; margin: 0 0 12px; padding: 7px 12px; border: 1px solid var(--border-soft); border-radius: var(--r); background: var(--panel); color: var(--accent); font-family: var(--mono); font-size: 12px; font-weight: 700; cursor: pointer; } .review-back:hover { border-color: rgba(47, 127, 193, 0.5); } .review-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .review-detail-name { font-size: 22px; line-height: 1.15; font-weight: 800; margin: 0; letter-spacing: 0; } /* ── Review detail — composed editorial layout (header · credibility strip · sized editor · media) ────────── */ .rv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; } .rv-head-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rv-provenance { font-family: var(--mono); font-size: 11px; } /* credibility strip — a glanceable one-line gate signal, not a full panel */ .rv-cred-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 18px; padding: 9px 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(47, 127, 193, 0.045); font-family: var(--mono); font-size: 12px; } .rv-cred-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); } .rv-cred-chip b { color: var(--text-faint); font-weight: 700; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; } .rv-cred-chip.ok { color: var(--pos); } .rv-cred-chip.warn { color: var(--dir-low); } .rv-verifier { margin-left: auto; } .rv-verifier > summary { cursor: pointer; color: var(--accent); font-size: 11.5px; font-weight: 700; list-style: none; } .rv-verifier > summary::-webkit-details-marker { display: none; } .rv-verifier > summary::before { content: "▸ "; } .rv-verifier[open] > summary::before { content: "▾ "; } .rv-verifier .review-verification { flex-basis: 100%; margin-top: 8px; max-width: 720px; font-size: 12px; line-height: 1.5; color: var(--text-dim); white-space: pre-wrap; max-height: 150px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: rgba(255, 255, 255, 0.7); } /* editor: a readable form column beside the theme-image aside */ .rv-editor { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 26px; align-items: start; margin: 0 0 16px; } .rv-fields { display: flex; flex-direction: column; gap: 17px; max-width: 620px; min-width: 0; } .rv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .rv-field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; } .rv-field-label .muted { font-size: 11px; font-weight: 400; color: var(--text-faint); letter-spacing: 0; } .rv-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 20px; } /* short fields are sized to their content instead of sprawling the full column width */ .rv-field-title > .review-input { max-width: 440px; } .rv-field-tagline > .review-input { max-width: 560px; } .rv-save { margin-top: 3px; } .rv-media { min-width: 0; } .rv-media .review-image-card { position: sticky; top: 12px; } @media (max-width: 980px) { .rv-editor { grid-template-columns: 1fr; } .rv-field-grid { grid-template-columns: 1fr; } .rv-media .review-image-card { position: static; } .rv-verifier { margin-left: 0; } } .review-panel { margin: 0 0 12px; border: 1px solid var(--detail-line); border-radius: 16px; background: rgba(255, 255, 255, 0.86); padding: 14px 16px; box-shadow: 0 1px 3px rgba(31, 35, 40, 0.04); } .review-panel > summary { cursor: pointer; font-size: 14.5px; line-height: 1.25; font-weight: 800; color: var(--text); } .review-panel > summary::marker { color: var(--text-faint); } /* primary edit surface — lifted + tinted so it reads as the main work area. */ .review-panel-primary { background: #ffffff; border-color: rgba(116, 222, 235, 0.4); box-shadow: 0 6px 18px rgba(31, 35, 40, 0.06); } /* the publish gate — accent rail + soft tint, kept open so credibility is seen before the decision. */ .review-panel-gate { border-left: 3px solid var(--accent); background: rgba(47, 127, 193, 0.05); } .review-panel-gate > summary { color: var(--accent); } /* secondary maintenance panels recede. */ .review-panel-muted { background: var(--surface-muted); box-shadow: none; } .review-panel-muted > summary { color: var(--text-dim); font-weight: 700; } .review-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .review-presentation-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); gap: 18px; align-items: start; } .review-field-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .review-direction-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .review-category-fields { display: grid; grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr); gap: 10px; } .review-label { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; } .review-label .muted { font-size: 11px; font-weight: 400; color: var(--text-faint); letter-spacing: 0; } .review-label-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .review-input { width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid var(--detail-line); border-radius: 10px; background: rgba(255, 255, 255, 0.88); color: var(--text); font-family: var(--mono); font-size: 12.5px; } .review-input:focus { outline: none; border-color: rgba(116, 222, 235, 0.95); box-shadow: 0 0 0 3px rgba(116, 222, 235, 0.16); } .review-counter { color: var(--text-faint); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .review-counter.over { color: var(--neg); font-weight: 700; background: rgba(217, 76, 104, 0.1); padding: 1px 6px; border-radius: 999px; } .review-facets { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .review-facet-row { display: grid; grid-template-columns: minmax(120px, 0.8fr) 1fr 1.2fr; gap: 6px; align-items: center; } .review-facet-id { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Composition audit tree (read-only): Factor head + its market rows, dense on purpose — DESIGN.md §1.1 lets an internal operator surface stay tight so long as it shares the semantic tokens. */ .review-comp { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .review-comp-factor { border: 1px solid var(--mf-border-subtle, var(--border)); border-radius: 6px; overflow: hidden; } .review-comp-factor-head, .review-comp-member { display: grid; gap: 8px; align-items: baseline; padding: 4px 8px; } .review-comp-factor-head { grid-template-columns: 1fr auto 56px; background: var(--mf-surface-sunken, var(--bg-alt)); font-weight: 700; font-size: 12px; } .review-comp-member { grid-template-columns: 1fr 40px 56px 72px; font-size: 11.5px; border-top: 1px solid var(--mf-border-subtle, var(--border)); } .review-comp-member.is-unpriced { opacity: 0.72; } .review-comp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .review-comp-side, .review-comp-count { font-family: var(--mono); font-size: 11px; color: var(--text-dim); } .review-comp-weight { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; } .review-comp-flags { font-size: 10.5px; color: var(--text-faint); text-align: right; } .review-comp-sigma { font-family: var(--mono); font-size: 11px; color: var(--text-dim); } .review-image-upload input[type="file"] { font-size: 11px; padding: 4px; } .review-image-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--detail-line); border-radius: 14px; background: rgba(252, 254, 254, 0.84); } .review-image-head { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--text-dim); } .review-image-preview { display: grid; place-items: center; width: 100%; max-width: 200px; margin: 0 auto; aspect-ratio: 1 / 1; /* matches .measurement-card-image's 1:1 thumbnail; .nav-topic-image is portrait now — it stretches to the detail hero's row height, not a fixed square */ overflow: hidden; border: 1px dashed var(--detail-line); border-radius: 14px; background: rgba(245, 249, 249, 0.72); color: var(--text-faint); font-family: var(--mono); font-size: 11.5px; } .review-image-preview.has-image { border-style: solid; background: #ffffff; } .review-image-preview img { display: block; width: 100%; height: 100%; object-fit: cover; } .review-image-meta { display: flex; flex-direction: column; gap: 3px; min-height: 34px; color: var(--text-dim); font-size: 11.5px; line-height: 1.35; } .review-image-meta a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } .review-image-meta small { color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-image-query-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .review-image-status { min-height: 16px; font-size: 11.5px; } .review-cred { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-dim); } .review-verification { font-size: 12px; } .review-side { font-family: var(--mono); font-size: 11.5px; margin-right: 8px; } .review-blocker-list { list-style: none; margin: 4px 0 10px; padding: 0; color: var(--neg); font-size: 12.5px; } .review-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* the approve/publish bar sticks to the viewport bottom so publish is always reachable on a long form. */ .review-actions-final { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 14px; background: rgba(251, 251, 248, 0.92); backdrop-filter: blur(6px); box-shadow: 0 -2px 12px rgba(31, 35, 40, 0.07); } .review-actions-spacer { flex: 1 1 auto; } .review-publish { border-color: rgba(45, 138, 111, 0.6); background: rgba(45, 138, 111, 0.14); color: var(--accent-3); font-weight: 700; box-shadow: 0 2px 8px rgba(45, 138, 111, 0.12); } .review-publish:hover:not(:disabled) { background: rgba(45, 138, 111, 0.22); box-shadow: 0 4px 12px rgba(45, 138, 111, 0.18); } .review-publish:disabled { opacity: 0.5; cursor: not-allowed; background: var(--surface-muted); color: var(--text-faint); box-shadow: none; } /* blocker banner — prominent, top of the detail, replaces the old faint bottom list. */ .review-blocker-slot:empty { display: none; } .review-blocker-banner { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 11px 14px; border: 1px solid rgba(217, 76, 104, 0.3); border-left: 3px solid var(--neg); border-radius: 12px; background: rgba(217, 76, 104, 0.08); color: var(--text); font-size: 12.5px; line-height: 1.4; } .review-blocker-banner strong { color: var(--neg); } .review-blocker-icon { font-size: 13px; line-height: 1.4; } /* credibility — the publish gate, surfaced as a scannable grid + a verifier readout. */ .review-cred-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 10px; } .review-cred-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .review-cred-key { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); } .review-cred-val { font-size: 12.5px; color: var(--text); line-height: 1.35; } .review-cred-val.ok { color: var(--pos); font-weight: 700; } .review-cred-val.warn { color: var(--dir-low); font-weight: 700; } .review-chips { display: flex; flex-wrap: wrap; gap: 5px; } .review-chip { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(199, 119, 47, 0.35); background: rgba(199, 119, 47, 0.09); color: var(--dir-low); font-family: var(--mono); font-size: 10.5px; font-weight: 600; } .review-ok { color: var(--pos); font-size: 12px; font-weight: 600; } .review-cred-verifier { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 5px; } .review-cred-verifier .review-verification { font-size: 12px; line-height: 1.5; color: var(--text-dim); max-height: 130px; overflow-y: auto; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--border-soft); white-space: pre-wrap; } /* live regenerate status with an inline spinner while streaming. */ .review-status-live { display: inline-flex; align-items: center; gap: 7px; min-height: 18px; font-size: 12px; } .review-status-live:not(:empty)::before { content: ""; width: 11px; height: 11px; border: 2px solid rgba(47, 127, 193, 0.3); border-top-color: var(--accent); border-radius: 50%; animation: review-spin 0.7s linear infinite; } /* empty / loading / error states in the queue + detail. */ .review-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; text-align: center; color: var(--text-faint); padding: 24px; } .review-state p { margin: 0; font-size: 13px; color: var(--text-dim); } .review-state p.muted { font-size: 11.5px; } .review-state-icon { font-size: 26px; line-height: 1; } .review-state-icon.ok { color: var(--pos); } .review-state-icon.warn { color: var(--dir-low); } .review-spinner { width: 22px; height: 22px; border: 2.5px solid rgba(47, 127, 193, 0.2); border-top-color: var(--accent); border-radius: 50%; animation: review-spin 0.7s linear infinite; } @keyframes review-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { /* Same treatment as .mf-transfer-spinner elsewhere in this file — the two-tone ring already reads as "in progress" without spinning it. */ .review-status-live:not(:empty)::before, .review-spinner { animation: none; } } /* preview banner on ?preview=1 detail views. */ .preview-banner { margin: 0 0 12px; padding: 7px 12px; border: 1px dashed rgba(199, 119, 47, 0.55); border-radius: var(--r); color: var(--dir-low); background: rgba(199, 119, 47, 0.07); font-family: var(--mono); font-size: 11.5px; font-weight: 700; } .preview-banner-exit { color: var(--accent); text-decoration: underline; font-weight: 700; } @media (max-width: 880px) { .review-layout { grid-template-columns: 1fr; } .review-presentation-grid { grid-template-columns: 1fr; } .review-direction-fields { grid-template-columns: 1fr; } .review-category-fields { grid-template-columns: 1fr; } .review-cred-grid { grid-template-columns: 1fr; } /* Master-detail: the queue and detail can't sit side-by-side here, so show ONE at a time. With an item selected, hide the queue and give the detail the full width (a "← Queue" button returns to the list). */ .review-layout.review-has-selection .review-queue-col { display: none; } .review-queue-col { position: static; } .review-queue { max-height: none; } .review-back { display: inline-flex; } } @media (max-width: 720px) { /* the NAV card populates the same areas as an index card; keep the value column right-aligned. */ .nav-row-value { align-items: flex-end; text-align: right; } .nav-hero { align-items: flex-start; text-align: left; } .nav-hero .idx-gauge-change, .nav-hero-scale { justify-content: flex-start; } .nav-detail-val { align-items: flex-start; } } @media (max-width: 1024px) { /* The header stacks in lockstep with .nav-analysis-grid below it (same breakpoint): both go full-width at the same point, so the identity column's right edge keeps landing on the chart's right edge instead of drifting narrower while the chart (already single-column here) stays wide. */ .nav-detail-top { grid-template-columns: 1fr; grid-template-areas: "back" "image" "identity" "val"; row-gap: 10px; } /* Stacked layout has no "tallest sibling column" for the image to stretch against, so it goes back to a fixed, modest size of its own instead of the desktop 168px-wide/full-height treatment. */ .nav-topic-image { width: 96px; height: 96px; align-self: start; } .nav-analysis-grid { grid-template-columns: minmax(0, 1fr); } .nav-key-events, .nav-analysis-grid > .nav-key-events { padding: 24px 0 0; border-top: 1px solid var(--mf-border-default); border-left: 0; } .nav-key-events-scroll, .nav-key-events.has-events .nav-key-events-scroll { min-height: clamp(460px, 56vh, 640px); } /* Touch: the source link grows to a full-size target and takes the meta line's height with it, which keeps it inline — no line of its own wedged between the timestamp and the headline. */ .nav-key-event-source, body.detail-view #detail .nav-key-events :where(.nav-key-events-restore, .nav-key-events-page button) { min-height: var(--mf-control-height-touch); } .nav-driver-panel { grid-template-rows: auto auto; } .nav-driver-list { height: auto; min-height: 0; max-height: 280px; grid-template-columns: 1fr; } } @media (min-width: 1025px) and (max-width: 1199px) { .nav-analysis-grid > .nav-key-events .nav-key-events-head { min-height: calc(58px + 2rem); } } @media (max-width: 620px) { .nav-key-events, .nav-analysis-grid > .nav-key-events { padding-top: 20px; } .nav-key-events-scroll, .nav-key-events.has-events .nav-key-events-scroll { min-height: min(74dvh, 620px); -webkit-overflow-scrolling: touch; } } @media (max-width: 800px) { body.detail-view main { width: min(100% - 24px, 1420px); padding-top: 32px; } .nav-detail-logo { width: 174px; height: auto; } .nav-detail-val { align-items: stretch; } .nav-topic-image { width: 64px; height: 64px; } .nav-dir-value { font-size: 20px; } .nav-dir-price { font-size: 12px; } .nav-analysis-grid { margin-top: 18px; } .nav-chart-head { align-items: stretch; flex-direction: column; } .nav-chart-title-block { width: 100%; max-width: none; } .nav-chart-controls { width: 100%; justify-content: flex-start; margin-left: 0; } .nav-chart-panel .chart-range { width: 100%; } .nav-chart-frame { padding-left: 0; } .nav-driver-list { grid-template-columns: 1fr; } .nav-basket-head { align-items: flex-start; flex-wrap: wrap; } .nav-basket-tabs.comp-tabs { width: auto; margin-left: 0; } .nav-holding-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main side" "stats stats"; align-items: start; gap: 10px 12px; } .nav-holding-main { grid-area: main; } .nav-holding-side { grid-area: side; } .nav-holding-stats { grid-area: stats; grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav-holding-stats span { align-items: flex-end; } .nav-recomp .nav-update-record > summary { grid-template-columns: 12px minmax(0, 1fr); grid-template-areas: "twist main" ". stats"; gap: 10px; } .nav-update-stats { justify-content: flex-start; width: 100%; } .nav-update-stat { flex: 1 1 72px; text-align: left; } .nav-update-record .recomp-summary { white-space: normal; } .nav-recomp .recomp-detail { padding: 0 12px 14px; } .nav-recomp .diff-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; } .nav-recomp .diff-cell-metrics { justify-content: flex-end; } } @media (max-width: 520px) { .nav-chart-result-marker { right: 6px; min-width: 82px; padding: 7px 7px 6px; } .nav-chart-result-marker b { font-size: 14px; } .nav-chart-result-marker > span { font-size: 9px; } } @media (max-width: 520px) { .detail-brand-row { align-items: center; } .nav-detail-logo { width: 142px; } .auth-shell-detail { max-width: min(190px, 52vw); } .auth-shell-detail .auth-shell-view, .auth-shell-detail .auth-trigger { max-width: 100%; } .nav-dir-switch-btn { padding: 11px 13px 12px; } .nav-dir-value { font-size: 18px; } .nav-dir-price { font-size: 11px; } .nav-holding-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav-recomp .diff-cell-metrics { justify-content: flex-start; } .nav-recomp .diff-metric { text-align: left; } .nav-recomp .diff-metric-flow { justify-content: flex-start; } } /* ── Image asset placeholders + credit (IMAGE_ASSET_PIPELINE_PLAN.md P2) ───────────────────────── */ .measurement-card-image.is-ph, .nav-topic-image.is-ph { display: flex; align-items: center; justify-content: center; border: none; background: linear-gradient(135deg, hsl(var(--ph-hue, 210) 52% 44%), hsl(calc(var(--ph-hue, 210) + 42) 58% 26%)); } .ph-initials { font: 700 20px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: rgba(255, 255, 255, 0.92); letter-spacing: 0.02em; user-select: none; } .measurement-card-image.is-ph .ph-initials { font-size: 30px; } .nav-topic-image.is-ph .ph-initials { font-size: 37px; } .measurement-card-image.img-failed, .nav-topic-image.img-failed { opacity: 0.6; } .nav-topic-credit { margin: 6px 0 0; max-width: 44ch; font-size: 11px; line-height: 1.3; color: var(--muted, #8a94a6); } .nav-topic-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Per-facet thumbnail (P3) */ .nav-facet-thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; vertical-align: middle; margin-right: 8px; flex: 0 0 auto; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ In-product trading — buy entry, wizard modal, portfolio, custody illustrations. Aligned to DESIGN.md: sans for product language, mono only for numeric/address data, warm-paper surfaces, hairline structure, measured cyan, strong CTAs only at payment/build moments, direction-card conventions. Light warm product only (dark-as-default is a banned pattern). Security copy states only structural guarantees; the live-trade escrow window is disclosed honestly. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ :root { /* Three intentional weight levels. Deliberately only three: no webfont is loaded (Inter is declared but never fetched), so the fallback family resolves every weight in 600-699 to one face and every weight in 700-799 to another — a finer ladder than this renders identically and only reads as precision. */ --mf-pf-weight-body: var(--mf-font-weight-regular, 400); --mf-pf-weight-middle: var(--mf-font-weight-semibold, 600); --mf-pf-weight-heading: var(--mf-font-weight-bold, 700); --mf-sans: var(--mf-font-sans, var(--list-sans, var(--detail-sans, Inter, "Helvetica Neue", Arial, sans-serif))); --mf-mono: var(--mf-font-mono, var(--list-mono, var(--detail-mono, "SF Mono", Menlo, Consolas, monospace))); --mf-canvas: var(--mf-surface-canvas, var(--list-panel, var(--detail-panel, #fffefa))); --mf-paper: var(--mf-surface-subtle, #f6f7f4); --mf-graphite: var(--mf-text-strong, var(--list-graphite, var(--detail-graphite, #111316))); --mf-ink: var(--mf-text-primary, var(--list-ink, var(--detail-ink, #1b2026))); --mf-muted: var(--mf-text-secondary, var(--list-muted, var(--detail-muted, #65707a))); --mf-faint: var(--mf-text-disabled, var(--list-faint, var(--detail-faint, #9aa3ad))); --mf-line: var(--mf-border-subtle, var(--list-line, var(--detail-line, rgba(17, 19, 22, 0.105)))); --mf-line-strong: var(--mf-border-default, var(--list-line-strong, var(--detail-line-strong, rgba(17, 19, 22, 0.18)))); --mf-cyan: var(--mf-signal-accent, var(--list-cyan, var(--detail-cyan, #74deeb))); --mf-cyan-soft: var(--mf-color-accent-soft, var(--list-cyan-soft, var(--detail-cyan-soft, rgba(116, 222, 235, 0.18)))); --mf-cyan-ink: var(--mf-signal-accent-ink, #08758a); --mf-pos: var(--mf-status-positive, var(--list-pos, var(--detail-pos, #168765))); --mf-neg: var(--mf-status-negative, var(--list-neg, var(--detail-neg, #c85261))); --mf-pos-soft: var(--mf-color-positive-soft, rgba(22, 135, 101, 0.11)); --mf-neg-soft: var(--mf-color-negative-soft, rgba(200, 82, 97, 0.10)); --mf-warn: var(--mf-status-warning, #96631c); --mf-warn-soft: var(--mf-color-warning-soft, rgba(150, 99, 28, 0.10)); --mf-radius: var(--mf-radius-md, 8px); --mf-control-radius: var(--mf-radius-sm, 6px); --mf-lift: var(--mf-shadow-overlay, 0 20px 42px rgba(31, 35, 40, 0.13)); --mf-card: var(--mf-shadow-card, 0 18px 36px rgba(17, 19, 22, 0.05)); --mf-ease: var(--mf-ease-standard, cubic-bezier(0.16, 1, 0.3, 1)); } /* INVARIANT for this file: every design-system token referenced anywhere in styles.css MUST carry a literal fallback — `var(--mf-duration-standard, 180ms)`, never bare. public/trading/index.html loads /styles.css WITHOUT /design-system.css, and --mf-duration-* are defined only there. A bare reference is then invalid at computed-value time, which does not fall back to the property's initial value — it invalidates the ENTIRE shorthand, so the transition or animation silently does not run. It fails on one surface only, with no console error and nothing for a test to catch. The aliases above are the reason motion easing is spelled var(--mf-ease) rather than var(--mf-ease-standard) in this file: --mf-ease is defined right here, so it survives standalone. auth.css and trend-detail-trust.css use bare tokens deliberately — both always load beside design-system.css, so the constraint does not apply to them. */ /* Neutralize the global