/* ===== Ask Abdul · the Vader direction (30 Oct 2026) =====
   Loaded after styles.css. Remove the <link> in index.html to go back to the Maison look.
   Obsidian ground, graphite panels, chrome text. One light: saber red, for the number that matters and the one action.
   Panel blue is the only other colour and means good news. Faceted corners, a grille instead of rules, lamps instead of badges. */

:root, :root[data-theme="dark"], :root[data-theme="light"], :root:not([data-theme="light"]) {
  --paper: #0B0B0D; --paper-raised: #16181D; --paper-sunken: #0E0F12; --rule: #2C3038; --rule-strong: #3E434D;
  --ink: #E3E6EB; --ink-muted: #9AA1AB; --ink-faint: #7A818B;
  --gold: #FF3B3F; --gold-line: #FF3B3F; --gold-soft: #2A1214;
  --midnight: #16181D; --midnight-raised: #0B0B0D; --on-midnight: #E3E6EB; --on-midnight-muted: #9AA1AB; --gold-on-midnight: #FF3B3F;
  --positive: #5CC8F2; --positive-soft: #0F2630; --caution: #FF3B3F; --caution-soft: #2A1214; --negative: #FF3B3F; --negative-soft: #2A1214;
  --shadow-float: 0 24px 60px -24px #000000E6; --focus-ring: 0 0 0 2px #0B0B0D, 0 0 0 4px #FF3B3F;
  --r-xs: 0; --r-sm: 0; --r-md: 0;
  --title: "Oswald", "Arial Narrow", Impact, sans-serif;
  --display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --saber: #FF3B3F; --saber-glow: 0 0 10px #FF3B3F; --lamp: #5CC8F2; --lamp-glow: 0 0 10px #5CC8F2;
  --cut: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  --cut-sm: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  --cut-both: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --grille: repeating-linear-gradient(90deg, var(--rule) 0 3px, transparent 3px 9px);
}
html { color-scheme: dark; }
body { -webkit-font-smoothing: antialiased; }

/* ---- type: Oswald for titles and labels, Plex for everything read and every number */
h1, h2, h3, .wordmark, .sugg h3 { font-family: var(--title); font-weight: 500; letter-spacing: .02em; }
h1 { font-size: 28px; } .greeting h1, .greeting.compact h1 { font-size: 26px; } .hero h1 { font-size: 30px; }
.pagehead h1 { font-size: 22px; letter-spacing: .16em; text-transform: uppercase; }
.section-head h3, details.sec > summary, .sec summary { font-family: var(--title); font-size: 15px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow, label.field, .kpi .k, table.list th, .nav a span, .lbl, .verdict .pair .k, .invstrip .k, .region .k, .sticky .k, h2.sect, .tag, .cc, .tick .tg, .ringnum span, .filters > summary { font-family: var(--title); font-weight: 500; letter-spacing: .16em; }
.verdict .big, .verdict .pair .v, .kpi .v, .price, .num, .pin .v, .invstrip .v, .region .v, .mover .n, .demand .n, .cmp td.price, .sticky .num, .lcard .price, .deal .price, .dropcard .price { font-weight: 600; letter-spacing: -.01em; }
.wordmark { font-size: 18px; letter-spacing: .22em; } .wordmark .ask { font-weight: 400; }

/* ---- the mark: the GMT with the red and black bezel */
.brand img { width: 36px; height: 34px; display: block; }

/* ---- header and nav */
.top { border-bottom: 1px solid var(--rule); }
.nav a.active { color: var(--saber); border-bottom-color: var(--saber); }
.badge { border-radius: 0; background: var(--saber); color: #0B0B0D; box-shadow: var(--saber-glow); }
@media (max-width: 720px) {
  .nav { background: var(--paper); border-top: 1px solid var(--rule); }
  .nav a.active::before { content: ""; position: absolute; top: -7px; left: 50%; width: 28px; height: 2px; margin-left: -14px; background: var(--saber); box-shadow: var(--saber-glow); }
}

/* ---- surfaces: one corner cut, chrome line, no radius anywhere */
.card, .kpi, .pin, .lcard, .dropcard, .invcard, .hometabs a, .region, .meter, .sheet-page, details.sec, .invstrip, .filters-body .body, .sticky { border-radius: 0; }
.card, .kpi, .meter, .sheet-page, details.sec, .invstrip, .invcard { clip-path: var(--cut); }
.pin, .hometabs a, .region, .dropcard { clip-path: var(--cut-sm); }
.pin { background: var(--paper-raised); } .pin .up { color: var(--ink); } .pin .down { color: var(--lamp); } .mover .d.up { color: var(--ink); }
.thumb, .lcard .ph, .deal img, .deal .noph, .strip img, .strip .noph, .dropcard img, .dropcard .noph, .sphotos img, .addph, .gcard, .sheet img.full, .sheet .grab, .qr, .skeleton, code, .cc, .tick, .gauge, .gbar, .iconbtn, .iconbtn.sm, pre.preview, .notice, .input, .seg, .seg button, .chip, .chip.sm, .chipsel, .macdot, .chiprow .seg, .chiprow .seg button, .seg.tabs, .seg.tabs button, .seg.tabs .count, .chip .count, .toast, .sheet, .verdict .pair > div, .sugg, .deal .foot details.msg .msg, mark, .filters-body .body, .dot, .livedot, .wadot, .notif .dot, .btn { border-radius: 0; }
.gcard .cap { background: linear-gradient(transparent, rgba(11,11,13,.92)); }
.overlay { background: rgba(0,0,0,.72); }
.sheet { border: 1px solid var(--rule); border-top: 2px solid var(--saber); } .sheet .grab { background: var(--rule-strong); }
.toast { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--saber); }
.lcard.lowest { border-color: var(--saber); }

/* ---- the grille: slits between sections instead of a rule */
.ornament { height: 10px; background: var(--grille); margin: 14px 0; } .ornament::after { display: none; }
h2.sect { margin-top: 26px; } h2.sect::before { content: ""; display: block; height: 10px; background: var(--grille); margin-bottom: 12px; }
.daygroup + .daygroup { padding-top: 14px; background: var(--grille) top / 100% 10px no-repeat; }

/* ---- controls: faceted buttons, spaced capitals */
.btn { font-family: var(--title); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; background: transparent; border-color: var(--rule-strong); clip-path: var(--cut-both); }
.btn:hover { border-color: var(--ink); }
.btn.primary, .btn.gold, .verdict .btn.primary, .btn.wa.primary { background: var(--saber); color: #0B0B0D; border-color: var(--saber); font-weight: 600; }
.btn.primary:hover, .verdict .btn.primary:hover { background: #FF5A5D; border-color: #FF5A5D; }
.btn.ghost { color: var(--ink); clip-path: none; } .btn.danger { color: var(--saber); }
.btn.sm { font-size: 11px; letter-spacing: .12em; }
.seg { background: transparent; border-color: var(--rule); padding: 0; } .seg button { font-family: var(--title); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.seg button.on, .seg.tabs button.on { background: var(--saber); color: #0B0B0D; }
.chip { background: var(--paper-raised); } .chip.on { background: transparent; border-color: var(--saber); color: var(--saber); } .chip.on .muted { color: var(--saber); } .chip.on .tag { background: transparent; }
.chip .count { background: var(--saber); color: #0B0B0D; } .chip.warnchip { border-color: var(--saber); color: var(--saber); }
.chipsel { background: var(--paper-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA1AB' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 12px; }
.tag { background: transparent; border-color: var(--rule); font-size: 10px; } .tag.good, .tag.warn, .tag.bad, .tag.info, .tag.flag { background: transparent; border-color: currentColor; }
.iconbtn { background: var(--paper-raised); } .iconbtn.on { color: var(--lamp); }
.input, select.input, textarea.input { background: var(--paper-raised); border-color: var(--rule-strong); } .input:focus { border-color: var(--saber); }
.searchbox .input { font-family: var(--sans); font-weight: 600; font-size: 17px; border-color: var(--rule); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.searchbox .go { background: transparent; color: var(--saber); }
.toggle input { accent-color: var(--saber); }
.macdot { background: var(--paper-raised); }

/* ---- links: chrome text, a red underline keeps red an accent */
.section-head a, .msglink, .howlink, .linkbtn, .greeting.compact .date a, details.msg summary, .seller-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--saber); text-underline-offset: 3px; }
.liq { color: var(--ink); }

/* ---- notices and alerts: lamps, not coloured bars */
.notice { border: 1px solid var(--rule); border-left-width: 1px; background: var(--paper-raised); color: var(--ink); position: relative; padding-left: 32px; }
.notice.good, .notice.warn, .notice.bad { color: var(--ink); border-left-color: var(--rule); background: var(--paper-raised); }
.notice::before { content: ""; position: absolute; left: 14px; top: 19px; width: 8px; height: 8px; background: var(--ink-muted); }
.notice.good::before { background: var(--lamp); box-shadow: var(--lamp-glow); } .notice.warn::before, .notice.bad::before { background: var(--saber); box-shadow: var(--saber-glow); }
.notif .dot { background: var(--saber); box-shadow: var(--saber-glow); width: 8px; height: 8px; } .notif.read .dot { background: transparent; box-shadow: none; border-color: var(--rule-strong); }
.dot.ok, .wadot.on { background: var(--lamp); box-shadow: var(--lamp-glow); } .dot.warn, .wadot.bad { background: var(--saber); box-shadow: var(--saber-glow); }
.livedot, .wadot.on, .meter.anylive .mhead h3::after { animation: none; box-shadow: var(--lamp-glow); background: var(--lamp); border-radius: 0; }

/* ---- the verdict: graphite panel, red edge, one glowing number */
.verdict { background: var(--paper-raised); border: 1px solid var(--rule); border-top: 2px solid var(--saber); }
.verdict::before { display: none; }
.verdict .eyebrow { color: var(--ink-muted); }
.verdict .big { text-shadow: 0 0 22px rgba(255,59,63,.35); }
.verdict .pair > div { background: var(--paper); border: 1px solid var(--rule); }
.verdict .pair .dog { background: var(--paper); border-color: var(--saber); box-shadow: inset 0 0 24px -14px rgba(255,59,63,.8); }
.verdict .btn { border-color: var(--rule-strong); } .verdict .actions .iconbtn { border-color: var(--rule-strong); }
.verdict .widen .chip { border-color: var(--rule-strong); }
.verdict.stale .big { text-shadow: none; }
.sticky { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--rule); border-top: 2px solid var(--saber); }
.invstrip { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--rule); border-top: 2px solid var(--saber); }
.invstrip .v.up { color: var(--lamp); } .invstrip .v.down { color: var(--saber); }
.region.cheap { background: var(--paper-raised); border-color: var(--saber); }
.tiers tr.rec td { color: var(--saber); }

/* ---- home tiles */
.hometabs a b { font-family: var(--title); font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.hometabs a span { font-size: 11px; }

/* ---- lamps in the meter */
.spark rect { fill: var(--rule-strong); } .gauge.live .spark rect:last-child { fill: var(--saber); }
.gbar i { background: var(--saber); }

.dogverdict .lamp { border-radius: 0; } .dogverdict.fast .lamp { box-shadow: var(--lamp-glow); } .dogverdict.slow .lamp, .dogverdict.very-slow .lamp { box-shadow: var(--saber-glow); } .dogverdict.steady .lamp { background: var(--ink); }
@media (max-width: 400px) { .hometabs a b { font-size: 12px; letter-spacing: .1em; } }

.verdict .pair .dog .dogpct { color: var(--ink); } .verdict .dogverdict .dogchance { color: var(--saber); }

/* ---- buttons instead of dropdowns */
seg-sel, seg-sel button { border-radius: 0; } seg-sel.full button { letter-spacing: .06em; font-size: 11px; padding: 9px 1px; } seg-sel.sm button, .pstatus.sm button { letter-spacing: .06em; }
.segfield .lbl { color: var(--steel); }