/* ============================================================================
   1982 — AlphaMadera amber phosphor theme
   ============================================================================

   A theme layer, not a rewrite. Everything here is scoped to
   html[data-theme="1982"], so the file is inert until the attribute is set
   and the existing stylesheets are left untouched.

   Reference: the Bloomberg Market Master (1982) and the IBM 3279 amber tube —
   the actual ancestors of a financial research terminal, rather than the
   green VT100 that "retro terminal" usually defaults to.

   Three rules govern everything below:
     1. One display face, one data face. No third.
     2. Four type sizes. Not five.
     3. Colour carries meaning or it does not appear. Amber is the interface;
        green and red appear ONLY on a price delta.

   The type tiers bind to this codebase's own naming convention
   (`*-label` / `*-value` / `*-title`), which is consistent enough to act as
   the design system. That is why this file is short.
   ---------------------------------------------------------------------- */

/* --- The display face ------------------------------------------------------
   IBM MDA, the text-mode adapter that shipped with the IBM PC 5150 and drove
   the monochrome monitors in 1982 trading rooms. A 9x14 bitmap cell, so it
   renders crisp at 14px and 28px and blurs at anything between — which is why
   the display tier below uses exactly those two sizes.

   "The Ultimate Oldschool PC Font Pack" v2.2 by VileR (int10h.org),
   licensed CC BY-SA 4.0. Full licence in fonts/LICENSE-oldschool-pc-fonts.txt.

   Loaded lazily: `font-display: swap` plus the fact that nothing requests the
   family unless data-theme is 1982, so the default theme never fetches it. */
@font-face {
    font-family: "WebPlus IBM MDA";
    src: url("../fonts/WebPlus_IBM_MDA.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html[data-theme="1982"] {
    /* --- Phosphor ------------------------------------------------------ */
    --p-black: #0b0a08;        /* CRT glass. Warm black; blue-black reads LCD */
    --p-surface: #100e0a;      /* one step off the glass */
    --p-surface-2: #17130c;    /* panel fill */
    --p-amber: #ffb000;        /* P3 amber, full burn */
    --p-amber-hi: #ffc94d;     /* over-burn: hover, focus */
    --p-amber-dim: #b37800;    /* secondary text */
    --p-amber-ghost: #6b4a00;  /* rules, tertiary, disabled */
    --p-amber-trace: #2a1f0a;  /* hairlines, fills, dead pixels */

    /* Meaning-bearing colour. Price deltas only — nowhere else. */
    --p-up: #33ff33;
    --p-down: #ff4a1c;

    /* --- Type ----------------------------------------------------------- */
    --font-display: "WebPlus IBM MDA", ui-monospace, SFMono-Regular, "SF Mono",
        Menlo, Consolas, monospace;
    --font-data: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        monospace;

    /* Four sizes. The entire site.

       The two display sizes are pinned to the MDA cell (14px native, 28px at
       2x) because a bitmap face only renders crisp on its own multiples. That
       puts the label tier at 14px against 13px data — near-identical, which is
       the period-correct outcome: a 1982 terminal had ONE cell size and
       separated chrome from data with case, tracking and intensity rather than
       scale. The size scale does less work here so the voice does more. */
    --t-label: 14px;   /* eyebrows, column heads, keys, chrome — MDA native */
    --t-data: 13px;    /* tables, body, values — the working tier */
    --t-head: 28px;    /* section and page heads — MDA at 2x */
    --t-hero: 34px;    /* the one number that matters on a page */

    --lh: 20px;        /* baseline grid; every line box is a multiple */
    --cell: 8px;       /* character cell; every gap is a multiple */
    --track: 0.14em;   /* tracking for uppercase chrome */

    /* --- Remap the app's existing tokens -------------------------------- */
    /* Every component already reading these follows the theme for free.
       --terminal-green is the highest-leverage line in this file: the
       codebase routes a large amount of accent colour through it. */
    --bg-primary: var(--p-black);
    --bg-secondary: var(--p-surface);
    --bg-tertiary: var(--p-surface-2);
    --text-primary: var(--p-amber);
    --text-secondary: var(--p-amber-dim);
    /* Deliberately NOT --p-amber-ghost: ghost is 2.3:1 on the glass, which is
       fine for a rule and fails WCAG AA for a glyph. Tertiary text stops at
       the dim tier (5.2:1) and ghost is reserved for hairlines. */
    --text-dim: var(--p-amber-dim);
    --accent: var(--p-amber);
    --accent-hover: var(--p-amber-hi);
    --positive: var(--p-up);
    --negative: var(--p-down);
    --border: var(--p-amber-ghost);
    --terminal-green: var(--p-amber);
    --aw-font-mono: var(--font-data);
    --aw-font-sans: var(--font-data);
    --font-mono: var(--font-data);
}

/* ============================================================================
   1. Strip the decade that came after
   ========================================================================= */

/* A 1982 raster has no rounded corners and no drop shadows. These are
   `!important` because the existing rules are scattered across 148 radius
   and 39 shadow declarations, some already `!important`. */
html[data-theme="1982"] *,
html[data-theme="1982"] *::before,
html[data-theme="1982"] *::after {
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none;
}

html[data-theme="1982"] body {
    background: var(--p-black);
    color: var(--p-amber);
    font-family: var(--font-data);
    font-size: var(--t-data);
    line-height: var(--lh);
    /* Phosphor bloom. The only "effect" in the theme, and it is doing real
       work: it is what separates emitted light from printed ink. */
    text-shadow: 0 0 2px rgba(255, 176, 0, 0.35);
}

/* Kill decorative gradients on chrome, but never touch charts, canvas, or
   anything carrying an image — those are data. */
html[data-theme="1982"] .header,
html[data-theme="1982"] .footer,
html[data-theme="1982"] .sidebar,
html[data-theme="1982"] [class*="-card"],
html[data-theme="1982"] [class*="-panel"],
html[data-theme="1982"] [class*="-section"],
html[data-theme="1982"] button,
html[data-theme="1982"] .btn {
    background-image: none;
}

/* ============================================================================
   2. One face, four sizes
   ========================================================================= */

/* The sweep. `svg` and `canvas` are excluded so icon and chart geometry,
   which is sized in ems in places, is not rescaled. */
html[data-theme="1982"] body *:not(svg):not(svg *):not(canvas) {
    font-family: var(--font-data);
    letter-spacing: 0;
}

/* Everything lands on the working tier unless promoted below.

   `!important` on the four tier rules is deliberate. This layer's entire job
   is to override ~60 inherited font sizes spread across six stylesheets, many
   set from class rules that outrank any reasonable theme selector. Without it
   the "four sizes" promise is decorative — measured, 49 elements leaked
   through on the first pass. It is confined to `font-size` on the four tiers
   and nowhere else in this file. */
html[data-theme="1982"] body p,
html[data-theme="1982"] body li,
html[data-theme="1982"] body td,
html[data-theme="1982"] body th,
html[data-theme="1982"] body tr,
html[data-theme="1982"] body table,
html[data-theme="1982"] body thead,
html[data-theme="1982"] body tbody,
html[data-theme="1982"] body a,
html[data-theme="1982"] body span,
html[data-theme="1982"] body div,
html[data-theme="1982"] body input,
html[data-theme="1982"] body select,
html[data-theme="1982"] body textarea {
    font-size: var(--t-data) !important;
    line-height: var(--lh);
}

/* --- Label tier: the chrome voice --------------------------------------- */
/* Uppercase, tracked, dim. This is what a terminal uses for anything that
   is not itself data: column heads, field names, keys, eyebrows. */
html[data-theme="1982"] [class*="-label"],
html[data-theme="1982"] [class*="-eyebrow"],
html[data-theme="1982"] [class*="-hint"],
html[data-theme="1982"] [class*="-caption"],
html[data-theme="1982"] th,
html[data-theme="1982"] legend,
html[data-theme="1982"] label,
html[data-theme="1982"] .sidebar-section-header {
    font-family: var(--font-display) !important;
    font-size: var(--t-label) !important;
    font-weight: 400;
    line-height: var(--lh);
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--p-amber-dim);
}

/* --- Value tier: the data voice ----------------------------------------- */
/* Tabular figures are non-negotiable — a column of prices that does not
   align on the decimal is not a terminal, it is a web page. */
html[data-theme="1982"] [class*="-value"],
html[data-theme="1982"] [class*="-price"],
html[data-theme="1982"] [class*="-metric"],
html[data-theme="1982"] td,
html[data-theme="1982"] .num,
html[data-theme="1982"] input {
    font-family: var(--font-data);
    font-size: var(--t-data) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
    color: var(--p-amber);
}

/* Any number, anywhere, sits on the grid. */
html[data-theme="1982"] table,
html[data-theme="1982"] [class*="-table"] {
    font-variant-numeric: tabular-nums;
    border-collapse: collapse;
}

/* --- Head tier ---------------------------------------------------------- */
html[data-theme="1982"] h1,
html[data-theme="1982"] h2,
html[data-theme="1982"] h3,
html[data-theme="1982"] h4,
html[data-theme="1982"] h5,
html[data-theme="1982"] h6,
html[data-theme="1982"] [class*="-title"],
html[data-theme="1982"] [class*="-header"] {
    font-family: var(--font-display) !important;
    font-size: var(--t-head) !important;
    font-weight: 700;
    line-height: var(--lh);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--p-amber);
    margin: 0 0 var(--cell);
}

/* Sub-heads drop to the label tier rather than inventing a fifth size. */
html[data-theme="1982"] h4,
html[data-theme="1982"] h5,
html[data-theme="1982"] h6 {
    font-size: var(--t-label) !important;
    letter-spacing: var(--track);
    color: var(--p-amber-dim);
}

/* --- Hero tier: one per page --------------------------------------------
   `.live-price-value` is reused everywhere a price renders: the desktop
   stock/fund headline (#live-price), mobile pages, commodities, market-index
   ticker rows, fund badges, and stock2's compact metrics row. A blanket
   class match promoted the price to 34px in ALL of those — including dense
   rows where it was never meant to be a hero number, which is what made
   stock2's PRICE value balloon next to a normal-sized AFTER HOURS value.
   #live-price is the one container that is genuinely a standalone headline
   price (desktop /stock and /fund pages only). */
html[data-theme="1982"] .stock-price,
html[data-theme="1982"] #live-price .live-price-value,
html[data-theme="1982"] .hero-value,
html[data-theme="1982"] [class*="-hero-value"] {
    font-family: var(--font-data);
    font-size: var(--t-hero) !important;
    font-weight: 700;
    line-height: calc(var(--lh) * 2);
    font-variant-numeric: tabular-nums;
    color: var(--p-amber);
    text-shadow: 0 0 6px rgba(255, 176, 0, 0.45);
}

/* ============================================================================
   3. Rules are characters, not borders
   ========================================================================= */

/* Panels are drawn boxes. A single hairline in trace amber reads as the
   phosphor rule it is imitating, and never as a Material card.

   `:not([class*="__"])` is load-bearing. `[class*="-card"]` is a SUBSTRING
   match and this codebase is BEM, so it also matches every child of a
   `signal-card` — `signal-card__top`, `signal-card__hero`, and so on — which
   drew a border around every element inside every card. BEM children always
   carry `__`; block-level elements never do. */
html[data-theme="1982"] [class*="-card"]:not([class*="__"]),
html[data-theme="1982"] [class*="-panel"]:not([class*="__"]),
html[data-theme="1982"] [class*="-section"]:not([class*="__"]):not(.sidebar-section),
html[data-theme="1982"] .stock-detail-container,
html[data-theme="1982"] .ticker-info {
    background: var(--p-surface);
    border: 1px solid var(--p-amber-ghost);
    padding: var(--lh) calc(var(--cell) * 2);
}

/* Anything nested inside a drawn box is content, not another box. */
html[data-theme="1982"] [class*="-card"] [class*="__"],
html[data-theme="1982"] [class*="-panel"] [class*="__"] {
    border: 0;
    background: transparent;
}

/* Section heads carry a box-drawing rule that runs to the end of the line —
   the terminal convention for "this region starts here". The filler is a
   real ─ character on the character grid, clipped by overflow. */
html[data-theme="1982"] [class*="-section"] > h2,
html[data-theme="1982"] [class*="-section"] > h3,
html[data-theme="1982"] [class*="-card"] > h2,
html[data-theme="1982"] [class*="-card"] > h3,
html[data-theme="1982"] .section-header h2 {
    display: flex;
    align-items: baseline;
    gap: var(--cell);
    overflow: hidden;
    white-space: nowrap;
}

html[data-theme="1982"] [class*="-section"] > h2::before,
html[data-theme="1982"] [class*="-section"] > h3::before,
html[data-theme="1982"] [class*="-card"] > h2::before,
html[data-theme="1982"] [class*="-card"] > h3::before,
html[data-theme="1982"] .section-header h2::before {
    content: "\250C\2500";  /* ┌─ — replaces the codebase's "// " eyebrow,
                               which is a code-comment idiom from the wrong
                               decade. Box drawing is what a 1982 terminal
                               had instead. */
    color: var(--p-amber-ghost);
    flex: 0 0 auto;
    margin-right: var(--cell);
}

html[data-theme="1982"] [class*="-section"] > h2::after,
html[data-theme="1982"] [class*="-section"] > h3::after,
html[data-theme="1982"] [class*="-card"] > h2::after,
html[data-theme="1982"] [class*="-card"] > h3::after,
html[data-theme="1982"] .section-header h2::after {
    content: "\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500";
    color: var(--p-amber-ghost);
    flex: 1 1 auto;
    overflow: hidden;
    letter-spacing: 0;
}

/* Table rules: horizontal only, trace weight. Vertical rules in a dense
   financial table are noise — the character grid already aligns the columns. */
html[data-theme="1982"] table td,
html[data-theme="1982"] table th {
    border: 0;
    border-bottom: 1px solid var(--p-amber-trace);
    padding: 0 calc(var(--cell) * 1.5);
    height: var(--lh);
}

html[data-theme="1982"] table th {
    border-bottom: 1px solid var(--p-amber-ghost);
}

/* ============================================================================
   4. Reverse video
   ========================================================================= */

/* A 1982 terminal cannot tint a link on hover — it has one colour. It swaps
   foreground and background instead. This is period-correct, it is more
   legible than a tint, and it satisfies the house rule that links never
   gain an underline. */
html[data-theme="1982"] a {
    color: var(--p-amber);
    text-decoration: none;
}

html[data-theme="1982"] a:hover,
html[data-theme="1982"] a:focus-visible,
html[data-theme="1982"] button:hover,
html[data-theme="1982"] .sidebar-nav-item:hover,
html[data-theme="1982"] .sidebar-subnav-item:hover,
html[data-theme="1982"] tbody tr:hover {
    background: var(--p-amber);
    color: var(--p-black);
    text-decoration: none;
    text-shadow: none;
}

/* Reverse video has to reach the children or a nested span stays amber-on-amber
   and vanishes. */
html[data-theme="1982"] a:hover *,
html[data-theme="1982"] button:hover *,
html[data-theme="1982"] .sidebar-nav-item:hover *,
html[data-theme="1982"] .sidebar-subnav-item:hover *,
html[data-theme="1982"] tbody tr:hover td {
    color: var(--p-black);
    text-shadow: none;
}

/* The active nav item is permanently reversed — the terminal's "you are here". */
html[data-theme="1982"] .sidebar-nav-item.active,
html[data-theme="1982"] .sidebar-subnav-item.active {
    background: var(--p-amber);
    color: var(--p-black);
    text-shadow: none;
}

html[data-theme="1982"] .sidebar-nav-item.active *,
html[data-theme="1982"] .sidebar-subnav-item.active * {
    color: var(--p-black);
    text-shadow: none;
}

/* Keyboard focus stays visible and unmistakable. */
html[data-theme="1982"] :focus-visible {
    outline: 2px solid var(--p-amber-hi);
    outline-offset: 0;
}

/* ============================================================================
   5. Controls
   ========================================================================= */

html[data-theme="1982"] button,
html[data-theme="1982"] .btn,
html[data-theme="1982"] .terminal-button,
html[data-theme="1982"] input,
html[data-theme="1982"] select,
html[data-theme="1982"] textarea {
    background: transparent;
    border: 1px solid var(--p-amber-ghost);
    color: var(--p-amber);
    font-family: var(--font-display) !important;
    font-size: var(--t-label) !important;
    letter-spacing: var(--track);
    text-transform: uppercase;
    /* Vertical padding is forced to zero, and it has to be `!important`:
       these elements are `box-sizing: border-box`, and some carry an inline
       `style="padding: 8px 16px"` that no selector can outrank. With a one-row
       height that padding left 4px of content box for 18px of content, so the
       label rendered 9px BELOW the button's own bottom border. */
    padding: 0 var(--cell) !important;
    height: var(--lh);
    line-height: var(--lh);
}

/* Centre the label in the box geometrically rather than by line-height. A
   bitmap face's baseline metrics do not track its em box the way an outline
   font's do, so `line-height` alone leaves the glyphs sitting low. Flex
   centring is indifferent to font metrics. */
html[data-theme="1982"] button,
html[data-theme="1982"] .btn,
html[data-theme="1982"] .terminal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tracking adds its gap AFTER the last glyph too, so a centred tracked label
   sits visibly left of centre. Pull the trailing gap back off. */
html[data-theme="1982"] button .text,
html[data-theme="1982"] .btn .text,
html[data-theme="1982"] .terminal-button .text {
    margin-right: calc(var(--track) * -1);
}

html[data-theme="1982"] input,
html[data-theme="1982"] textarea {
    font-family: var(--font-data);
    text-transform: none;
    letter-spacing: 0;
}

html[data-theme="1982"] ::placeholder {
    color: var(--p-amber-ghost);
    text-transform: uppercase;
    letter-spacing: var(--track);
    font-size: var(--t-label);
}

/* ============================================================================
   6. Price deltas — the only place a second hue is allowed
   ========================================================================= */

html[data-theme="1982"] .positive,
html[data-theme="1982"] .stock-change.positive,
html[data-theme="1982"] [class*="-change"].positive,
html[data-theme="1982"] .up {
    color: var(--p-up);
    text-shadow: 0 0 2px rgba(51, 255, 51, 0.35);
}

html[data-theme="1982"] .negative,
html[data-theme="1982"] .stock-change.negative,
html[data-theme="1982"] [class*="-change"].negative,
html[data-theme="1982"] .down {
    color: var(--p-down);
    text-shadow: 0 0 2px rgba(255, 74, 28, 0.35);
}

/* ============================================================================
   7. Signature: the status line
   ========================================================================= */

/* The one thing this design is remembered by. A fixed function-key legend,
   the market clock, and a blinking block cursor — the bottom two lines of
   every terminal screen made between 1978 and 1990. */
html[data-theme="1982"] .status-line {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: calc(var(--cell) * 2);
    height: var(--lh);
    padding: 0 var(--cell);
    background: var(--p-black);
    border-top: 1px solid var(--p-amber-ghost);
    font-family: var(--font-display) !important;
    font-size: var(--t-label);
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--p-amber-dim);
    white-space: nowrap;
    overflow: hidden;
}

html[data-theme="1982"] .status-line__key {
    color: var(--p-amber);
}

html[data-theme="1982"] .status-line__prompt {
    color: var(--p-amber);
    font-size: var(--t-label);
    letter-spacing: var(--track);
    margin: 0;
}

html[data-theme="1982"] .status-line__caret {
    color: var(--p-amber);
    margin-left: calc(var(--cell) * -1);
}

/* The command line is bare text on the glass — no field chrome. A box around
   it would make it a form input; without one it reads as a prompt. */
html[data-theme="1982"] .status-line__input {
    flex: 0 0 24ch;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    height: var(--lh);
    color: var(--p-amber);
    caret-color: var(--p-amber);
    font-family: var(--font-data);
    font-size: var(--t-data) !important;
    letter-spacing: 0;
    text-transform: uppercase;
}

html[data-theme="1982"] .status-line__input::placeholder {
    color: var(--p-amber-ghost);
    text-transform: uppercase;
    letter-spacing: var(--track);
    font-size: var(--t-label);
}

html[data-theme="1982"] .status-line__msg {
    color: var(--p-amber-hi);
    font-size: var(--t-label);
    letter-spacing: var(--track);
}

html[data-theme="1982"] .status-line__spacer {
    flex: 1 1 auto;
}

html[data-theme="1982"] .status-line__clock {
    color: var(--p-amber);
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* The idle cursor. It blinks while the prompt is unfocused and yields to the
   real text caret the moment you start typing — two cursors on one line is a
   rendering bug, not a period detail. */
html[data-theme="1982"] .status-line:focus-within .status-line__cursor {
    display: none;
}

/* The only animation in the theme. */
html[data-theme="1982"] .status-line__cursor {
    display: inline-block;
    width: var(--cell);
    height: 14px;
    background: var(--p-amber);
    animation: phosphor-blink 1s steps(1, end) infinite;
}

@keyframes phosphor-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* Clear the fixed status line so it never covers the last row of a table. */
html[data-theme="1982"] body {
    padding-bottom: var(--lh);
}

/* ============================================================================
   8. Mobile
   ========================================================================= */

/* The mobile tab bar fits five labels across 375px with no room to spare.
   Tracking them at 0.14em overflows the bar and runs ALPHAWIRE into
   ALPHABLOG. The label tier keeps its case here and gives up its tracking —
   the bar is the one place where fit beats voice. */
html[data-theme="1982"] .m-tab-label {
    letter-spacing: 0;
}

/* No command line on mobile: it is fixed to the bottom edge, which the tab
   bar already owns. The palette and the type scale carry the theme here. */
html[data-theme="1982"] .m-tab-bar ~ .status-line,
html[data-theme="1982"] body:has(.m-tab-bar) .status-line {
    display: none;
}

/* ============================================================================
   9. Page-specific corrections
   ========================================================================= */

/* stock2's PRICE / AFTER HOURS row: one size, one face, colour-only
   differentiation (requested 2026-08-13; base rule lives in stock2.css).

   That base rule loses here on its own. `.live-price-label` and
   `.live-price-change` both contain the substring "price", so besides the
   intended `[class*="-label"]` match they ALSO match this file's
   `[class*="-price"]` value-tier selector (written for `.stock-price` /
   `.live-price-value`, not label/change siblings — a substring collision,
   same shape as the `-card` vs `__` BEM bug fixed earlier in this file).
   Two tier rules landing on one element, both `!important`, are resolved by
   selector specificity, and every generic tier selector in this file carries
   an `html[data-theme="1982"]` prefix that stock2.css's page-level rule
   does not — so the tier rule wins regardless of source order. Re-declaring
   the same override here, with that prefix, is the fix: it is not a second
   opinion, it is the first rule made able to actually win. */
html[data-theme="1982"] .stock2-metrics .live-price-label,
html[data-theme="1982"] .stock2-metrics .live-price-value,
html[data-theme="1982"] .stock2-metrics .live-price-change,
html[data-theme="1982"] .stock2-metrics .after-market-label,
html[data-theme="1982"] .stock2-metrics .after-market-value,
html[data-theme="1982"] .stock2-metrics .after-market-change {
    font-family: var(--font-data) !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    /* Not `none`: the label markup is mixed case ("PRICE:" vs "After
       Hours:" in the source HTML) — forcing uppercase here is what makes
       them read as the same voice rather than un-doing it. */
    text-transform: uppercase !important;
}

html[data-theme="1982"] .stock2-metrics .live-price-label,
html[data-theme="1982"] .stock2-metrics .after-market-label {
    color: var(--p-amber-dim) !important;
}

html[data-theme="1982"] .stock2-metrics .live-price-value,
html[data-theme="1982"] .stock2-metrics .after-market-value {
    color: var(--p-amber) !important;
}

/* Compare dropdown in chart: bare input prompt inside the dropdown container, no inner box */
html[data-theme="1982"] [data-compare-dropdown] input {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    padding: 2px 0 !important;
    font-family: var(--font-data) !important;
    font-size: 12px !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

html[data-theme="1982"] [data-compare-dropdown] input::placeholder {
    font-family: var(--font-data) !important;
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
    color: var(--p-amber-ghost) !important;
    text-transform: uppercase !important;
}

/* ============================================================================
   10. Quality floor
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    html[data-theme="1982"] .status-line__cursor {
        animation: none;
        opacity: 1;
    }
}

/* Below the 1200px layout width the status line loses the function keys and
   keeps the clock — the legend is chrome, the clock is information. */
@media (max-width: 820px) {
    html[data-theme="1982"] .status-line__key {
        display: none;
    }
}