/* ==========================================================================
   MACRO DASHBOARD — page-scoped styles
   WHY a dedicated file: the page template stays a pure shell, and these rules
   are enqueued only on the dashboard template so they can never leak into the
   company pages. All colors reference the Chevron tokens in style.css.
   ========================================================================== */

body.page-template-page-macro-dashboard .content-area,
body.page-template-page-macro-dashboard .site-main {
    padding-top: 0 !important; margin-top: 0 !important;
}

#page-loader { position: fixed; inset: 0; display: flex; align-items: center;
    justify-content: center; background: rgba(255,255,255,0.85); z-index: 9999;
    transition: opacity .3s ease; }
#page-loader.hidden { opacity: 0; pointer-events: none; }
.spinner { width: 60px; height: 60px; border: 6px solid #ccc;
    border-top-color: var(--sf-blue); border-radius: 50%;
    animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.macro-chart { width: 100%; background: var(--sf-white);
    border: 1px solid var(--sf-grey-border); margin-bottom: 1.5em; }

/* WHY square via aspect-ratio: the clock's two axes are the same unit scale,
   so any non-square render distorts the quadrant geometry. aspect-ratio is
   the standard responsive mechanism — the box stays 1:1 at every viewport
   width with no JS measurement; ECharts simply reads the resolved size.
   WHY shared with the spider: both squares live in .macro-clock-row columns
   now — the column owns max-width/centering, the chart owns only its 1:1. */
#compass-chart,
#spider-chart {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
    margin-bottom: 0.75em;
}
/* WHY fallback: aspect-ratio has been baseline since 2021; the guard only
   protects the long tail of frozen corporate browsers from a 0-height div. */
@supports not (aspect-ratio: 1 / 1) {
    #compass-chart, #spider-chart { height: 640px; max-width: 640px; }
}

/* WHY full width: the regime history oscillator is a time series — width IS
   resolution here, unlike the clock where geometry must stay square. */
#regime-chart { height: 420px; }
#sector-chart { height: 760px; }
/* WHY same height as sector: the industry summary is the same two-pane
   layout (oscillator + breadth); differing heights would read as a bug. */
#industry-chart { height: 760px; }

/* WHY a distinct intro class: orientation copy is primary content (body
   color, upright), unlike .macro-note which is a receding italic caption. */
.macro-intro { font-size: 0.95rem; color: var(--sf-text);
    margin: 0.75em 0 1.25em; max-width: 90ch; line-height: 1.55; }

.macro-note { font-size: 0.85rem; color: var(--sf-grey-muted);
    font-style: italic; margin: 0.5em 0 1.5em; max-width: 90ch; }
.macro-subhead { font-size: 1.05rem; color: var(--sf-text);
    margin: 0.5em 0 0.5em; }

/* --- Sector toolbar (select + cross-link CTA) --------------------------------
   WHY: the select IS a user selection — per the accent policy its chosen
   value renders red/semibold, and focus gets the same red ring as the two
   chrome-level inputs (company search, paywall). The old dotted black
   rectangle was the browser's default focus outline. */
.macro-sector-toolbar { display: flex; align-items: center; flex-wrap: wrap;
    gap: 12px; margin: 0.25em 0 1em; }
.macro-toolbar-label { font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--sf-grey-muted); }
.macro-toolbar-hint { font-size: 0.8rem; color: var(--sf-grey-muted);
    font-style: italic; }

#sector-select {
    font-size: 1rem; font-weight: 600; padding: 6px 34px 6px 12px;
    border: 1px solid var(--sf-grey-border); border-radius: 2px;
    color: var(--sf-red);            /* WHY: the current selection carries the accent */
    background-color: var(--sf-white);
    /* WHY custom chevron: appearance:none removes the OS arrow along with
       the OS chrome; the inline SVG restores one in the muted token grey. */
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7683'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
#sector-select:focus {
    outline: none;
    border-color: var(--sf-red);
    box-shadow: 0 1px 0 0 var(--sf-red);
}
/* WHY: the OPEN option list should read as data, not a wall of red */
#sector-select option { color: var(--sf-text); font-weight: 400; }

/* Cross-link CTA — the one filled-blue primary in this toolbar, mirroring
   the Strong + Strong button on the insider table.
   WHY the id selector + !important on color: the sitewide
   .site a:not(.wp-block-button__link) rule pins link color blue at higher
   effective specificity; this must render white-on-blue regardless. */
#sector-buys-link {
    display: inline-block; padding: 8px 16px;
    background: var(--sf-blue); color: var(--sf-white) !important;
    border: 1px solid var(--sf-blue); border-radius: 2px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    text-decoration: none; line-height: 1.2;
}
#sector-buys-link:hover {
    background: var(--sf-navy); border-color: var(--sf-navy);
}


.macro-error { background: #fff9b8; border: 1px solid #f1e7a9;
    padding: 0.75em; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Compass legend (HTML/CSS, not ECharts)
   WHY: the clock mixes symbols an ECharts legend cannot draw faithfully —
   a gradient path, an X target, a dotted projection. HTML swatches render
   each exactly, wrap gracefully on phones, and never show a circle-on-line.
   -------------------------------------------------------------------------- */
.macro-legend { display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px 22px; max-width: 680px; margin: 0 auto 1em;
    font-size: 0.82rem; color: var(--sf-text); }
.mlg-item { display: inline-flex; align-items: center; white-space: nowrap; }
.mlg-swatch { display: inline-block; margin-right: 7px; flex: 0 0 auto; }
/* WHY this exact ramp: mirrors the compass visualMap inRange verbatim
   (border grey -> chart grey -> structural blue -> navy) — the legend must
   never disagree with the plotted path fade. */
.mlg-path { width: 22px; height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, #D6DCE2, #8A99A8, #0054A4, #16273B); }
.mlg-now { width: 11px; height: 11px; border-radius: 50%;
    background: var(--sf-red); border: 2px solid var(--sf-white);
    box-shadow: 0 0 0 1px var(--sf-red); }
.mlg-year { width: 9px; height: 9px; background: var(--sf-blue);
    transform: rotate(45deg); }
.mlg-fcast { width: 22px; height: 4px; border-radius: 2px;
    background: var(--sf-red); }
/* WHY a text glyph: the on-chart target is literally an X; drawing the same
   glyph is the only representation that can't be misread. */
.mlg-target { color: var(--sf-red); font-weight: 700; font-size: 1rem;
    line-height: 1; margin-right: 7px; }
.mlg-future { width: 22px; height: 0; border-top: 3px dotted var(--sf-red); }

/* --------------------------------------------------------------------------
   Tabulator tables (hotlist + X-Ray)
   WHY: mirrors the insider-buys table conventions — quiet institutional grey,
   trimmed native sort arrows (~12px, not Tabulator's ~25px gutter), row hover
   in the same #EAF0F6 used by the ticker search highlight.
   -------------------------------------------------------------------------- */
.macro-table { margin-bottom: 1.5em; background: var(--sf-white);
    border: 1px solid var(--sf-grey-border); }
/* WHY fixed height: switches Tabulator into virtual-DOM rendering, same as
   the insider-buys table — ~60 rows render instantly and scroll inside. */
#industry-table { height: 480px; }
#sector-xray-table { max-height: 320px; }

.macro-table .tabulator-col .tabulator-col-sorter {
    width: 12px; flex: 0 0 12px; padding: 0; margin: 0 0 0 2px;
}
.macro-table .tabulator-col.tabulator-sortable .tabulator-col-title {
    padding-right: 0;
}
.macro-table .tabulator-col-content { background: var(--sf-grey-panel); }
.macro-table .tabulator-row { cursor: pointer; }
.macro-table .tabulator-row:hover { background-color: #EAF0F6 !important; }
/* WHY inset box-shadow (not border-left): a border adds 3px to the row's box
   and visibly nudged every cell right on selection — the "ugly shift". The
   shadow paints INSIDE the existing geometry: selection changes color, never
   layout. The industry name goes semibold so the current subject of the page
   reads even in peripheral vision while scrolling the chart below. */
.macro-table .tabulator-row.macro-row-active {
    background-color: var(--sf-blue-wash) !important;
    box-shadow: inset 3px 0 0 0 var(--sf-red);
}
.macro-table .tabulator-row.macro-row-active .tabulator-cell:first-of-type {
    font-weight: 600;
}

/* WHY a quiet outline chip (not a filled button on ~60 rows): matches the
   insider-table toolbar rule — one filled primary per surface; sixty filled
   blue buttons would out-shout the data. */
.macro-table .macro-buys-link {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sf-blue);
    background: var(--sf-white);
    border: 1px solid var(--sf-grey-border);
    border-radius: 2px;
    text-decoration: none;
    white-space: nowrap;
}
.macro-table .macro-buys-link:hover {
    border-color: var(--sf-blue);
    background: var(--sf-blue-wash);
}

/* Signal zone text — same visual grammar as the insider table's
   bucket-strong / bucket-weak so a returning user reads it instantly. */
.sig-long  { color: #1a7f37; font-weight: bold; }
.sig-short { color: #c00000; font-weight: bold; }
.sig-lean  { color: var(--sf-grey-muted); }

/* Z-score cell emphasis at the actionable thresholds only.
   WHY only at ±1.5: coloring every value turns the column into noise;
   color marks the same lines the chart draws dashed. */
.z-hot  { color: #1a7f37; font-weight: bold; }
.z-cold { color: #c00000; font-weight: bold; }

/* WHY: the anonymity gate can freeze a thin industry's last reading days
   behind the cutoff; a stale date must visibly recede, not rank as fresh. */
.stale-date { color: var(--sf-grey-muted); font-style: italic; }

/* WHY: only the Industry column carries a search box; quiet styling matches
   the insider-buys filter row so the two tables read as one product. */
.macro-table .tabulator-header-filter input {
    font-size: 11px; padding: 3px 4px; border: 1px solid #c8c8c8;
    border-radius: 2px; box-sizing: border-box; background: #fff; width: 100%;
}
.macro-table .tabulator-header-filter input:focus {
    outline: none; border-color: var(--sf-blue);
}

/* ==========================================================================
   INDUSTRY GROUP TIER — 2026-07 (append-only section)
   Breadcrumb trail, quadrant drilldown grid, and the Industry Group tab.
   WHY append-only: mirrors the style.css "INSTITUTIONAL SKIN v2" convention
   — every rule for the new tier has one home, and the diff against the
   previous file is a pure addition.
   ========================================================================== */

/* --- Breadcrumb trail --------------------------------------------------------
   WHY red current crumb: red marks the user's CURRENT selection — the same
   accent grammar as the regime-group dropdown's chosen value and the active
   tab underline. Ancestor crumbs are blue navigation objects, the same
   grammar as tickers in tables (blue + semibold = "click me"). */
.macro-crumbs {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 8px;
    margin: 0 0 1em;
    font-size: 0.85rem;
    color: var(--sf-grey-muted);
}
.macro-crumbs .crumb-link {
    color: var(--sf-blue);
    font-weight: 600;
    cursor: pointer;
}
.macro-crumbs .crumb-link:hover { text-decoration: underline; }
.macro-crumbs .crumb-current {
    color: var(--sf-red);
    font-weight: 600;
}
.macro-crumbs .crumb-sep { color: var(--sf-grey-muted); }

/* --- Quadrant drilldown grid (Macro Regime tab) ------------------------------
   WHY a 2x2 grid: JS renders cards row-major in the order Recovery,
   Overheat, Reflation, Stagflation, which mirrors the clock geometry
   (Recovery TL, Overheat TR, Reflation BL, Stagflation BR) — the tables
   read as the clock unrolled into lists. Collapses to one column on
   phones so rows never crush below tap-target size. */
.macro-quadrant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 1.5em;
}
@media (max-width: 760px) {
    .macro-quadrant-grid { grid-template-columns: 1fr; }
}
/* WHY uppercase micro-heading (not .macro-subhead): the quadrant name is a
   category label over a small card, same typographic role as the toolbar
   label — a full subhead over four small tables reads too heavy. */
.macro-quadrant-title {
    margin: 0 0 0.4em;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sf-text);
}
/* WHY no fixed height on quadrant tables: <=6 rows per quadrant — natural
   height needs no virtual DOM, and the 2x2 cards stay compact and aligned. */
.macro-quadrant-grid .macro-table { margin-bottom: 0; }

/* --- Industry Group tab ------------------------------------------------------
   WHY 760px like sector/industry: the group summary is the identical
   two-pane (oscillator + breadth) layout; differing heights would read as
   a bug. */
#group-chart { height: 760px; }
/* WHY fixed height: switches Tabulator into virtual-DOM rendering, same
   convention as #industry-table — ~43 groups render instantly and scroll
   inside; shorter than the industry table because the row count is. */
#group-table { height: 420px; }
#group-xray-table { max-height: 320px; }
/* WHY max-height (not fixed): most regime groups hold a handful of industry
   groups — the table should hug its rows and only scroll past ~8. */
#sector-groups-table { max-height: 360px; }

/* ==========================================================================
   CLOCK + SPIDER ROW — 2026-07 (append-only section)
   The Macro Regime tab's two squares: regime clock and industry-group radar.
   WHY append-only: mirrors the file's INDUSTRY GROUP TIER convention — every
   rule for this feature has one home and the diff is a pure addition.
   ========================================================================== */

/* WHY flex-wrap (no media query): each column demands 420px ideal / 300px
   floor; when two don't fit, the second wraps below — the exact wide/narrow
   behavior requested, driven by content, not a hardcoded breakpoint.
   WHY justify-content center: when the spider column is hidden (pre-spider
   manifest) the clock re-centers instead of hugging the left edge. */
.macro-clock-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px 24px;
    margin-bottom: 0.75em;
}
.macro-clock-col {
    flex: 1 1 420px;
    max-width: 680px;
    min-width: 300px;
}
/* WHY the legends re-cap here: .macro-legend carries max-width 680px +
   margin auto already; inside a column that is exactly right, so no new
   legend rules are needed — this comment exists so nobody adds any. */

/* Spider legend swatches — same thin-bar grammar as the z-chart legends.
   WHY #8A99A8 (not var(--sf-chart-grey)): the swatch must match the chart
   line exactly, and the JS palette's greyLight is #8A99A8; the two grey
   tokens predate this feature and intentionally differ. */
.mlg-adj { width: 22px; height: 4px; border-radius: 2px; background: var(--sf-blue); }
.mlg-raw { width: 22px; height: 3px; border-radius: 2px; background: #8A99A8; }
.mlg-ring-zero { width: 22px; height: 0; border-top: 2px solid var(--sf-text); }
/* WHY these two hexes: identical to the z-chart Strong Positive/Negative
   markLine colors in macro-dashboard.js — one signal vocabulary sitewide. */
.mlg-ring-pos { width: 22px; height: 0; border-top: 2px dashed #1a7f37; }
.mlg-ring-neg { width: 22px; height: 0; border-top: 2px dashed #c00000; }
/* ==========================================================================
   MACRO POLISH — 2026-07b (append-only section)
   Intro/clock alignment shell, ctrl-zoom hint pill, table filter toolbar.
   WHY append-only: same convention as INDUSTRY GROUP TIER and CLOCK + SPIDER
   ROW — every rule for this iteration has one home; the diff is pure addition.
   ========================================================================== */

/* WHY a shell (not a max-width on the paragraph): .macro-clock-row centers
   itself, so its left edge floats with viewport width — capping the intro
   alone can never align the two. One wrapper gives the intro and the left
   chart the same left edge at every width; the intro keeps its own 90ch cap
   for line length. WHY 1384px: 2 columns x 680px column max + 24px gap.
   KNOWN degraded state: a pre-spider manifest hides the second column and
   the lone clock centers inside the shell — acceptable for legacy uploads. */
.macro-clock-shell { max-width: 1384px; margin: 0 auto; }

/* WHY relative: anchors the absolutely-positioned zoom-hint pill inside
   every chart container without touching each chart's own rules. */
.macro-chart { position: relative; }

/* WHY pointer-events none + no display toggle: the pill must never eat the
   scroll or clicks it exists to protect; opacity transition keeps it a
   whisper. Navy translucent + 2px corners = the same terminal chrome grammar
   as the header/footer, per the design system. */
.macro-zoom-hint {
    position: absolute; top: 10px; right: 12px;
    padding: 5px 12px;
    background: rgba(22, 39, 59, 0.85);
    color: var(--sf-white);
    font-size: 12px; line-height: 1.3;
    border-radius: 2px;
    opacity: 0; pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 5;
}
.macro-zoom-hint.show { opacity: 1; }

/* WHY margin/flex only: the chip inherits the sitewide outline-button skin
   from style.css (.filter-toolbar .button) — defining color here would fork
   the component. Right-aligned so it sits over the table's action column
   side, away from the search box it clears. */
.macro-filter-toolbar { margin: 0 0 0.5em; display: flex; justify-content: flex-end; }