/* The Curves desk widget (#cw-market, Analysis, Review and the contract drawer).
   It composes the house classes rather than carrying copies: curve-workspace.js adds .panel,
   .panel-title and .btn-segment to the widget's static chrome at mount, and renders its tables
   as .data-table and its states as .empty-state / .skeleton. What remains here is only what the
   house does not define: the widget's layout, the sticky row-header matrix, the clickable data
   cell, and the display-tier hero in the contract drawer.
   Every colour is a token or a colour-mix of one. Chrome is --font-sans; numerals are --font-mono
   with tabular figures. Hierarchy comes from size, colour and tracking. */
.curve-desk-enabled #sub-curves > :not(#cw-market),
.curve-desk-enabled #sub-livecurve,
.curve-desk-enabled .sub-tab-btn[data-sub="livecurve"],
.curve-desk-enabled .sub-tab-btn[data-sub="context"],
.curve-desk-enabled .sub-tab-btn[data-sub="curvehistory"] { display: none !important; }
#tab-curves [hidden] { display: none !important; }

/* ----- Surfaces: the house panel, stacked on the page ground ----- */
#tab-curves .cw-toolbar.panel, #tab-curves .cw-panel.panel { margin-bottom: var(--sp-4); }
.cw-toolbar-main, .cw-inline, .cw-pair-controls, .cw-saved-row { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.cw-inline { align-items: center; }

/* ----- Controls: micro caption over a control on the page ground with the 3:1 edge ----- */
#tab-curves .cw-toolbar label, #tab-curves .cw-panel label { display: flex; flex-direction: column; gap: var(--sp-1); font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-normal); color: var(--text-dim); }
#tab-curves .cw-toolbar select, #tab-curves .cw-toolbar input, #tab-curves .cw-panel select, #tab-curves .cw-saved-row input { background: var(--bg-primary); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-2); min-height: 32px; max-width: 100%; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; text-transform: none; }
#tab-curves .cw-toolbar input[type="date"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#tab-curves .cw-toolbar label > span { display: inline-flex; align-items: center; min-height: 32px; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }
.cw-toolbar-main > button { margin-left: auto; }
#tab-curves .btn-ghost[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.cw-segment { display: inline-flex; }

/* Frame identity: dates and build times are data, so mono; the frame label takes the ink. */
.cw-context-line { display: flex; gap: var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-muted); }
#cw-frame-label { color: var(--text); }
#cw-status { padding-top: var(--sp-2); font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; color: var(--amber); }

/* ----- Section heads: the house title, its subtitle aligned to the title text ----- */
.cw-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-3); flex-wrap: wrap; }
.cw-section-head > div:first-child { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.cw-section-head .panel-title, .cw-detail-head .panel-title { margin-bottom: 0; }
.cw-section-head > div > .cw-muted { padding-left: calc(var(--sp-3) + 3px); }
.cw-muted { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.cw-saved-row { align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-3); }
.cw-saved-row label { flex-direction: row; align-items: center; gap: var(--sp-2); }
#cw-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* ----- Tables: the house table. The matrix adds a sticky row-header column on top of it.
   Separate borders keep each divider attached to its sticky cell; collapsed borders scroll away
   from a sticky cell, which is the one reason the house table's border model is overridden. ----- */
.cw-table-scroll { overflow: auto; max-height: 65vh; scrollbar-width: thin; }
.data-table.cw-matrix { border-collapse: separate; border-spacing: 0; }
.data-table.cw-matrix thead th { text-align: right; white-space: nowrap; z-index: 2; }
#cw-matrix .data-table thead th:not(.cw-tenor) { font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--track-tight); padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.data-table.cw-matrix th.cw-tenor { position: sticky; left: 0; text-align: left; background-color: var(--bg-card); }
.data-table.cw-matrix thead th.cw-tenor { z-index: 3; }
.data-table.cw-matrix tbody th.cw-tenor { z-index: 1; padding: var(--sp-2) var(--sp-3); min-width: 80px; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; border-bottom: 1px solid var(--border-subtle); }
.data-table.cw-matrix tbody tr:nth-child(even) th.cw-tenor { background-image: linear-gradient(var(--surface-tint-1), var(--surface-tint-1)); }
.data-table.cw-matrix tbody tr:hover th.cw-tenor { background-image: linear-gradient(var(--surface-tint-2), var(--surface-tint-2)); }
.data-table.cw-matrix tbody td { padding: 0; }
.data-table.cw-matrix .cw-product-end { border-right: 2px solid var(--border-light); }
.data-table td.cw-text-cell { font-family: var(--font-sans); white-space: normal; }
.data-table td.cw-number-cell { text-align: right; }

/* The clickable data cell. A mark is a datum the trader selects, not an action, so it keeps the
   cell's mono type and gets only a hover and the house focus ring; the house has no class for a
   selectable cell and .btn-ghost would turn a 300-cell grid into a keypad. */
.cw-cell { display: flex; justify-content: flex-end; align-items: baseline; gap: var(--sp-2); width: 100%; min-height: 36px; padding: var(--sp-2) var(--sp-3); background: transparent; border: 0; border-radius: 0; font: inherit; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.cw-matrix .cw-cell { font-size: var(--text-base); }
button.cw-cell { cursor: pointer; color: inherit; transition: background 0.15s; }
button.cw-cell:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cw-price { min-width: 45px; }
.cw-move { min-width: 40px; font-size: var(--text-xs); color: var(--text-muted); }
.cw-up { color: var(--positive); } .cw-down { color: var(--negative); }
.cw-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); vertical-align: middle; flex: 0 0 4px; }
.cw-constructed { background: transparent; outline: 1px solid var(--text-muted); }
.cw-pinned-mark { font-size: var(--text-xs); color: var(--amber); }

/* ----- States: the house skeleton while a frame loads; text for screen readers only ----- */
.cw-loading { display: grid; gap: var(--sp-3); padding: var(--sp-3) 0; }
.cw-loading .skeleton-bar:nth-child(2) { width: 72%; }
.cw-loading .skeleton-bar:nth-child(3) { width: 88%; }
.cw-loading .skeleton-bar:nth-child(4) { width: 64%; }
.cw-chart > .cw-loading { height: 100%; padding: 0; }
.cw-chart > .cw-loading .skeleton-block { height: 100%; margin: 0; }
.cw-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----- Footnotes, stats, charts ----- */
.cw-footnote { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-2); font-family: var(--font-sans); font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); }
.cw-footnote i { margin: 0 var(--sp-1) 0 var(--sp-2); }
.cw-pad, .cw-weekly { margin: 0; }
.cw-export-actions + .cw-pad { padding-top: var(--sp-3); }
.cw-chart { height: 340px; min-width: 0; }
.cw-pair-controls { padding-bottom: var(--sp-3); }
.cw-pair-controls label { flex: 1; min-width: 170px; }
/* A stat: caption, numeral, note. The pair spread is the Relative value panel's KPI and sits on
   the 3xl tier; supporting stats sit one tier down. */
.cw-stats { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); padding: var(--sp-3) 0; border-top: 1px solid var(--border-subtle); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); }
.cw-stat { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.cw-stat > span:first-child { font-family: var(--font-sans); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--track-normal); color: var(--text-dim); }
.cw-stat > strong { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--text); }
.cw-stat > strong + span { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-muted); }
#cw-pair-stats .cw-stat:first-child > strong { font-size: var(--text-3xl); letter-spacing: var(--track-display); }
.cw-export-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cw-edition { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-subtle); font-family: var(--font-sans); font-size: var(--text-sm); }
.cw-edition strong { font-family: var(--font-mono); font-weight: 400; color: var(--text); }
.cw-edition .cw-muted { font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.cw-edition-links { display: flex; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-2); }

/* ----- Contract drawer: the raised surface, the selected mark on the display tier ----- */
.cw-detail { position: fixed; z-index: var(--z-drawer); top: calc(var(--top-bar-h) + var(--sp-3)); right: var(--sp-4); bottom: var(--sp-4); width: min(440px, calc(100vw - 2 * var(--sp-4))); overflow: auto; scrollbar-width: thin; background: var(--surface-elevated); color: var(--text); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); }
.cw-detail-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4); position: sticky; top: 0; z-index: 2; background: var(--surface-elevated); border-bottom: 1px solid var(--border); }
.cw-detail-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.cw-detail-head > div > .cw-muted { padding-left: calc(var(--sp-3) + 3px); font-family: var(--font-mono); font-size: var(--text-xs); }
.cw-detail-hero { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.cw-detail-hero > div, .cw-detail-grid > div { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.cw-detail-hero .cw-muted, .cw-detail-grid .cw-muted { font-family: var(--font-sans); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--track-normal); color: var(--text-muted); }
.cw-detail-hero strong, .cw-detail-grid strong { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.cw-detail-hero > div:first-child strong { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--track-display); }
.cw-detail-hero > div + div strong { font-size: var(--text-2xl); line-height: 1.1; }
.cw-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); padding: var(--sp-4); border-top: 1px solid var(--border-subtle); }
.cw-detail-grid strong { font-size: var(--text-xl); line-height: 1.15; }
.cw-detail-hero small, .cw-detail-grid small { font-family: var(--font-sans); font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); }
.cw-detail .cw-chart { height: 230px; }
.cw-detail .cw-footnote { padding: var(--sp-2) var(--sp-4) 0; }
.cw-detail details { margin: 0 var(--sp-4) var(--sp-4); font-family: var(--font-sans); font-size: var(--text-sm); }
.cw-detail summary { cursor: pointer; padding: var(--sp-2) 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-tight); color: var(--text-muted); }
.cw-detail .data-table { margin: var(--sp-2) 0; }
.cw-evidence { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.55; color: var(--text-muted); background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--sp-3); max-height: 340px; overflow: auto; }
.cw-trace { padding-left: var(--sp-4); font-size: var(--text-xs); line-height: 1.6; }
.cw-trace li { margin-bottom: var(--sp-2); }
.cw-trace strong { font-weight: 600; color: var(--text); }

/* ----- Focus: the house ring on every control in the widget ----- */
#tab-curves .cw-cell:focus-visible, #tab-curves .btn-ghost:focus-visible, #tab-curves .btn-primary:focus-visible, #tab-curves .btn-segment:focus-visible,
#tab-curves select:focus-visible, #tab-curves input:focus-visible, #tab-curves summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#tab-curves .cw-cell:focus-visible { position: relative; z-index: 1; }

@media (max-width: 900px) { .cw-toolbar-main { gap: var(--sp-2); } .cw-toolbar-main label { flex: 1; min-width: 120px; } .cw-inline { width: 100%; } .cw-cell { padding: var(--sp-2); gap: var(--sp-1); } .cw-chart { height: 280px; } .cw-detail-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cw-panel *, .cw-detail * { transition: none !important; } }