/* ============================================================
     JUQHUB / brutalist redesign mockup
     One token block per skin. Every component pulls from tokens,
     so switching skin = swapping variables, nothing else.
     ============================================================ */
  :root {
    --f-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --bw: 2px;
    --maxw: 1180px;
  }

  /* ---------- SKINS (on :root so the whole document, body included, inherits) ---------- */
  :root, :root[data-skin="dark"] {
    --bg:#0c0c0e; --surface:#151518; --surface-2:#1d1d21;
    --ink:#f3f1eb; --muted:#8c8c93; --line:#2a2a30; --line-strong:#3a3a42;
    --accent:#ff5a1e; --accent-ink:#0c0c0e; --accent-soft:rgba(255,90,30,0.14);
    --ok:#33d17a; --scroll:#ff5a1e; --track:#26262c;
    --radius:2px; --shadow:#000000; --lift:0;
  }
  :root[data-skin="light"] {
    --bg:#e7e7e3; --surface:#f7f7f4; --surface-2:#efefe9;
    --ink:#111114; --muted:#63636a; --line:#111114; --line-strong:#111114;
    --accent:#1c34ff; --accent-ink:#ffffff; --accent-soft:rgba(28,52,255,0.10);
    --ok:#0a8a4a; --scroll:#1c34ff; --track:#dcdcd6;
    --radius:2px; --shadow:#111114; --lift:0;
  }
  :root[data-skin="spicy"] {
    --bg:#140a09; --surface:#20100c; --surface-2:#2a1510;
    --ink:#f8ece5; --muted:#b28a7d; --line:#3a1e16; --line-strong:#4d2419;
    --accent:#ff2f1c; --accent-ink:#150807; --accent-soft:rgba(255,47,28,0.16);
    --ok:#e6b23c; --scroll:#ff2f1c; --track:#32190f;
    --radius:2px; --shadow:#ff2f1c; --lift:0;
  }
  :root[data-skin="sweet"] {
    --bg:#fff2f8; --surface:#ffffff; --surface-2:#fff0f7;
    --ink:#3a1030; --muted:#a3708f; --line:#f4bcd8; --line-strong:#eaa0c8;
    --accent:#ff3d97; --accent-ink:#ffffff; --accent-soft:rgba(255,61,151,0.12);
    --ok:#c65fb0; --scroll:#ff3d97; --track:#fbd9e9;
    --radius:18px; --shadow:rgba(255,61,151,0.30); --lift:1;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
    font-family: var(--f-display); line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    transition: background 0.25s, color 0.25s;
  }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--accent); color: var(--accent-ink); }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
  .mono { font-family: var(--f-mono); }

  /* ---------- scrollbars ----------
     Custom + theme-aware, on the page and inside every scrollable panel. Everything uses
     `overflow: auto` and nothing reserves a gutter (no `scrollbar-gutter: stable`, no
     `overflow: scroll`), so a bar exists only when there is actually something to scroll. */
  /* IMPORTANT: do NOT set scrollbar-color/scrollbar-width globally. In Chromium (Chrome, Brave,
     Edge) the standard properties WIN over the ::-webkit-scrollbar pseudo-elements, which makes it
     fall back to the native Fluent scrollbar: rounded thumb + arrow buttons, our border-radius:0
     ignored. So the pseudo-elements are used alone here, and the standard properties are scoped
     to browsers that have no pseudo-element support (Firefox) via @supports. */
  /* One treatment for all four skins: a solid block riding a hard channel. */
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--bg); border-left: var(--bw) solid var(--line-strong); }
  ::-webkit-scrollbar-track:horizontal { border-left: none; border-top: var(--bw) solid var(--line-strong); }
  ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 0; border: none; }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink); }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-corner { background: var(--bg); }
  @supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--scroll) var(--bg); }
  }

  /* ---------- shared blocks ---------- */
  .eyebrow {
    font-family: var(--f-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 2px; display: inline-block; }
  [data-skin="sweet"] .dot { border-radius: 50%; }
  .disp {
    font-weight: 900; font-style: italic; text-transform: uppercase;
    letter-spacing: -0.03em; line-height: 0.94; text-wrap: balance; margin: 0;
  }

  /* Brutalist button: solid accent block, hard offset shadow, presses in on hover.
     Sweet overrides to a soft cloud that lifts. */
  .btn {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    font-family: var(--f-display); font-weight: 800; font-style: italic;
    text-transform: uppercase; letter-spacing: 0.01em; font-size: 15px;
    padding: 13px 20px; border: var(--bw) solid var(--ink);
    background: var(--accent); color: var(--accent-ink); border-radius: var(--radius);
    box-shadow: 5px 5px 0 var(--ink);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s;
  }
  .btn:hover { transform: translate(5px, 5px); box-shadow: 0 0 0 transparent; }
  .btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: 5px 5px 0 var(--line-strong); }
  [data-skin="sweet"] .btn { box-shadow: 0 9px 22px var(--shadow); border-color: transparent; }
  [data-skin="sweet"] .btn:hover { transform: translateY(-3px); box-shadow: 0 16px 34px var(--shadow); }
  [data-skin="sweet"] .btn.ghost { background: var(--surface); color: var(--ink); box-shadow: 0 8px 20px rgba(58,16,48,0.10); }

  /* ============================================================ NAV */
  .nav {
    position: sticky; top: 0; z-index: 40; background: var(--bg);
    border-bottom: var(--bw) solid var(--line-strong);
  }
  .nav-in { display: flex; align-items: center; justify-content: space-between; height: 62px; }
  .brand { font-weight: 900; font-style: italic; font-size: 26px; letter-spacing: -0.04em; text-transform: uppercase; }
  .brand b { color: var(--accent); }
  .nav-right { display: flex; align-items: center; gap: 10px; }
  .chip {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px;
    font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
    border: var(--bw) solid var(--line-strong); border-radius: var(--radius); color: var(--ink);
    background: var(--surface); white-space: nowrap;
  }
  .chip .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 2s infinite; }
  .chip b { color: var(--accent); }
  .nav-signin {
    height: 34px; padding: 0 14px; cursor: pointer; font-family: var(--f-display);
    font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.02em;
    border: var(--bw) solid var(--ink); background: var(--ink); color: var(--bg); border-radius: var(--radius);
  }
  [data-skin="sweet"] .nav-signin { border-color: transparent; }
  @media (max-width: 620px) { .chip.hide-sm { display: none; } .brand { font-size: 22px; } }

  /* ============================================================ ANNOUNCEMENTS (rotating, clickable) */
  .anno { background: var(--accent); color: var(--accent-ink); border-bottom: var(--bw) solid var(--ink); }
  [data-skin="sweet"] .anno { border-bottom-color: transparent; }
  .anno-in { display: flex; align-items: center; gap: 14px; height: 46px; }
  .anno-k { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 7px; border: var(--bw) solid var(--accent-ink); border-radius: var(--radius); flex-shrink: 0; }
  .anno-slides { position: relative; flex: 1; min-width: 0; height: 46px; }
  .anno-slide {
    position: absolute; inset: 0; display: flex; align-items: center; gap: 10px;
    font-family: var(--f-mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--accent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  .anno-slide.on { opacity: 1; pointer-events: auto; }
  .anno-go { font-family: var(--f-display); font-style: italic; font-size: 15px; transition: transform 0.15s; }
  .anno-slide:hover .anno-go { transform: translateX(4px); }
  .anno-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .anno-arrow { cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; font-size: 17px; line-height: 1; background: transparent; border: var(--bw) solid var(--accent-ink); border-radius: var(--radius); color: var(--accent-ink); }
  .anno-arrow:hover { background: var(--accent-ink); color: var(--accent); }
  .anno-dots { display: inline-flex; gap: 5px; }
  .anno-dot { width: 7px; height: 7px; border: none; padding: 0; border-radius: 50%; background: var(--accent-ink); opacity: 0.4; cursor: pointer; }
  .anno-dot.on { opacity: 1; }
  @media (max-width: 640px) { .anno-k, .anno-dots { display: none; } }

  /* ============================================================ HERO */
  .happening { padding: 46px 0 8px; }
  .hap-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
  .hap-head .eyebrow { margin: 0; }
  .hap-switch { display: inline-flex; align-items: center; gap: 9px; }
  .hap-switch .lbl { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .hap-seg { display: inline-flex; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
  .hap-seg button { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 5px 11px; background: var(--surface); color: var(--muted); border: none; border-left: var(--bw) solid var(--line-strong); cursor: pointer; }
  .hap-seg button:first-child { border-left: none; }
  .hap-seg button.on { background: var(--accent); color: var(--accent-ink); }

  /* master-detail: big active card (left) + list of ALL events (right), active marked by accent */
  .spot-stage { display: grid; grid-template-columns: 1.62fr 1fr; gap: 16px; align-items: stretch; }
  .happening[data-count="1"] .spot-stage { grid-template-columns: 1fr; }
  /* list-first variant (mockup toggle, to compare reading order) */
  .happening[data-side="list"] .spot-stage { grid-template-columns: 1fr 1.62fr; }
  .happening[data-side="list"] .spot-detail { order: 2; }
  .happening[data-side="list"] .spot-list { order: 1; }
  @media (max-width: 900px) { .spot-stage { grid-template-columns: 1fr; } }
  @keyframes detailIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* --- the big detail card of whichever event is active --- */
  .spot-detail {
    position: relative; border: var(--bw) solid var(--ink); border-radius: var(--radius);
    background: var(--surface); overflow: hidden; box-shadow: 8px 8px 0 var(--accent); padding: 26px 28px 24px;
  }
  [data-skin="sweet"] .spot-detail { border-color: transparent; box-shadow: 0 18px 44px var(--shadow); }
  .spot-detail-inner { display: flex; flex-direction: column; height: 100%; animation: detailIn 0.34s cubic-bezier(0.2, 0.75, 0.2, 1) both; }
  .spot-top { display: flex; align-items: center; gap: 10px; }
  .spot-ic { font-size: 22px; line-height: 1; flex-shrink: 0; }
  .spot-eyebrow { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .spot-eyebrow .n { color: var(--accent); }
  .spot-detail .disp { font-size: clamp(32px, 4.8vw, 56px); margin: 14px 0 16px; line-height: 1.03; }
  .spot-detail .disp em { color: var(--accent); font-style: italic; }
  .spot-desc { color: var(--muted); font-size: 14.5px; max-width: 52ch; line-height: 1.5; margin-bottom: 20px; }
  .spot-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: auto; }
  .timer { font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
  .timer b { color: var(--ink); font-variant-numeric: tabular-nums; }
  .prog { height: 10px; border: var(--bw) solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); max-width: 320px; margin-bottom: 20px; }
  [data-skin="sweet"] .prog { border-color: var(--line-strong); }
  .prog i { display: block; height: 100%; background: var(--accent); }
  .spot-tag {
    position: absolute; top: 22px; right: 22px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius);
    background: var(--accent); color: var(--accent-ink);
  }

  /* --- the list of all live events on the right --- */
  .spot-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; animation: detailIn 0.34s cubic-bezier(0.2, 0.75, 0.2, 1) both; }
  .spot-litem {
    flex: 1; min-height: 0; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
    padding: 16px 18px; cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
    transition: border-color 0.18s, background 0.18s;
  }
  .spot-litem:hover { border-color: var(--accent); }
  .spot-litem.is-active { border-color: var(--accent); background: var(--accent-soft); cursor: default; }
  [data-skin="sweet"] .spot-litem.is-active { box-shadow: 0 10px 26px var(--shadow); }
  .spot-litem-lead { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
  .spot-litem-txt { min-width: 0; }
  .spot-litem-title { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 19px; letter-spacing: -0.01em; line-height: 1.08; margin-top: 4px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .spot-litem-title em { color: var(--accent); font-style: italic; }
  /* extra detail: only at 2 events, where each card is tall enough to earn it */
  .spot-litem-more { display: none; min-width: 0; }
  .happening[data-count="2"] .spot-litem-more { display: block; }
  .spot-litem-desc { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .spot-litem .prog { margin: 12px 0 0; max-width: none; }
  .spot-litem-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
  .spot-litem-meta .count { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
  .spot-arrow { font-family: var(--f-mono); font-size: 14px; color: var(--muted); transition: color 0.18s, transform 0.18s; }
  .spot-litem:hover .spot-arrow { color: var(--accent); transform: translateX(2px); }
  .spot-litem.is-active .spot-arrow { color: var(--accent); }

  /* ============================================================ FEATURED (Heist) */
  .featured {
    margin: 28px 0 8px; border: var(--bw) solid var(--ink); border-radius: var(--radius);
    background: var(--surface); color: var(--ink); overflow: hidden;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 24px 26px;
    box-shadow: 8px 8px 0 var(--accent);
  }
  [data-skin="sweet"] .featured { border-color: transparent; box-shadow: 0 18px 44px var(--shadow); }
  .featured .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
  .featured .disp { font-size: clamp(28px, 4vw, 44px); margin: 8px 0 6px; }
  .featured .disp em { color: var(--accent); font-style: italic; }
  .featured p { margin: 0; font-size: 13.5px; color: var(--muted); }
  .featured .btn { border-color: var(--ink); }
  @media (max-width: 640px) { .featured { grid-template-columns: 1fr; } }

  /* TWO DAILIES SIDE BY SIDE. Was one full-width band; the Heist and The Panel
     are the same offer (a free thing once a day that pays JuqBuqs) so they get
     the same card twice rather than one band and one afterthought.
     The gap clears the 8px offset shadow with room to spare, and each card
     stacks its own text over its button, because `1fr auto` at half width puts
     a long button label against a long title. */
  .featured-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 28px 0 8px; align-items: stretch; }
  .featured-row .featured { margin: 0; height: 100%; grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .featured-row .featured .btn { justify-self: start; }
  @media (max-width: 860px) { .featured-row { grid-template-columns: 1fr; gap: 22px; } }

  /* ============================================================ LINEUP */
  .section-head { display: flex; align-items: baseline; gap: 14px; margin: 46px 0 16px; }
  .section-head h2 { font-size: 15px; font-family: var(--f-mono); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; }
  .section-head .rule { flex: 1; height: var(--bw); background: var(--line-strong); }
  .section-head .count { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }

  .cat-label { display: flex; align-items: center; gap: 10px; margin: 26px 0 2px; font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .cat-label .n { color: var(--accent); }

  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bw); background: var(--line-strong); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); overflow: hidden; margin-top: 12px; }
  @media (max-width: 780px) { .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }

  .card {
    background: var(--surface); padding: 20px 18px 16px; min-height: 138px;
    display: flex; flex-direction: column; position: relative;
    transition: background 0.18s;
  }
  .card:hover { background: var(--surface-2); }
  .card:hover .card-enter { color: var(--accent); gap: 12px; }
  .card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .glyph { font-size: 22px; line-height: 1; }
  .card-flag { font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 7px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
  .card-title { font-size: 18px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; }
  .card-desc { font-size: 12.5px; color: var(--muted); margin-top: 7px; flex: 1; line-height: 1.4; }
  .card-enter { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); transition: color 0.15s, gap 0.15s; }

  /* ============================================================ IN THE LAB */
  .lab { margin-top: 14px; border: var(--bw) dashed var(--line-strong); border-radius: var(--radius); padding: 16px 18px; }
  .lab-head { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
  .lab-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .lab-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.02em; padding: 8px 12px; border: var(--bw) solid var(--line); border-radius: var(--radius); color: var(--muted); }
  .lab-item b { color: var(--ink); font-family: var(--f-display); font-style: italic; text-transform: uppercase; }

  /* ============================================================ APP VIEW (transition target)
     Demo of the card-expands-into-the-app effect. In production this is the SAME CSS across two
     separate pages via @view-transition { navigation: auto } — no SPA, no bundle. */
  .appview { padding: 30px 0 10px; }
  .app-back {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); cursor: pointer;
    background: none; border: none; padding: 0; margin-bottom: 18px;
  }
  .app-back:hover { color: var(--accent); }
  .app-hero {
    border: var(--bw) solid var(--ink); border-radius: var(--radius); background: var(--surface);
    box-shadow: 8px 8px 0 var(--accent); padding: 24px 26px; overflow: hidden;
  }
  [data-skin="sweet"] .app-hero { border-color: transparent; box-shadow: 0 18px 44px var(--shadow); }
  .app-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
  .app-hero .glyph { font-size: 26px; line-height: 1; }
  .app-hero .disp { font-size: clamp(30px, 4.4vw, 50px); margin: 12px 0 8px; line-height: 1.03; }
  .app-hero .disp em { color: var(--accent); font-style: italic; }
  .app-hero p { margin: 0; color: var(--muted); font-size: 14px; max-width: 54ch; }
  .app-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
  .app-stat { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); padding: 7px 11px; }
  .app-stat b { color: var(--accent); font-size: 13px; }
  .app-body { margin-top: 18px; border: var(--bw) dashed var(--line-strong); border-radius: var(--radius); padding: 30px 20px; text-align: center; }
  .app-body .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
  .app-body .t { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 22px; margin-top: 8px; }
  .app-body .s { font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-top: 8px; }

  /* ---------- page transition effects ----------
     Every effect draws into this one fixed overlay, so swapping the site's transition is a
     one-word change (see TRANSITION in the script). */
  .fx { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; display: none; }
  .fx.on { display: block; }
  .fx-panel { position: absolute; inset: 0; background: var(--accent); display: flex; align-items: center; justify-content: center; will-change: transform; }
  .fx-label { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(34px, 8vw, 92px); color: var(--accent-ink); letter-spacing: -0.03em; white-space: nowrap; }
  .fx-door { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--accent); will-change: transform; }
  .fx-door.t { top: 0; border-bottom: var(--bw) solid var(--accent-ink); }
  .fx-door.b { bottom: 0; border-top: var(--bw) solid var(--accent-ink); }
  .fx-strip { position: absolute; top: 0; bottom: 0; background: var(--accent); will-change: transform; }
  .fx-strip:nth-child(even) { background: var(--ink); }
  .fx-ticker { position: absolute; left: -25%; right: -25%; top: 0; bottom: 0; background: var(--accent); display: flex; flex-direction: column; justify-content: center; gap: 6px; will-change: transform; }
  .fx-tline { font-family: var(--f-mono); font-weight: 700; font-size: clamp(24px, 5vw, 56px); letter-spacing: 0.06em; color: var(--accent-ink); white-space: nowrap; opacity: 0.92; }
  .fx-tline:nth-child(even) { opacity: 0.4; }

  /* used only by the 'morph' effect */
  ::view-transition-group(appmorph) { animation-duration: 0.52s; animation-timing-function: cubic-bezier(0.2, 0.75, 0.2, 1); }
  ::view-transition-old(appmorph) { animation: vtOut 0.2s ease both; }
  ::view-transition-new(appmorph) { animation: vtIn 0.34s ease 0.12s both; }
  @keyframes vtOut { to { opacity: 0; } }
  @keyframes vtIn { from { opacity: 0; } to { opacity: 1; } }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.4s; }
  ::view-transition-group(navbar) { animation-duration: 0.01s; }

  /* ============================================================ FOOTER */
  .footer { margin-top: 56px; border-top: var(--bw) solid var(--line-strong); }
  /* three tracks: disclosure left, social marks dead centre, site links right */
  .footer-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 15px 0 17px; }
  .foot-note { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
  .socials, .foot-links { display: flex; gap: 8px; flex-wrap: wrap; }
  .foot-links { justify-content: flex-end; }
  /* icon-only brand marks */
  .socials a { width: 31px; height: 31px; display: grid; place-items: center; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); }
  .socials a svg { width: 15px; height: 15px; display: block; }
  .foot-links a {
    display: inline-flex; align-items: center; gap: 8px; height: 31px; padding: 0 11px;
    border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
    font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    white-space: nowrap;
  }
  .foot-links a svg { width: 15px; height: 15px; display: block; flex-shrink: 0; }
  .socials a:hover, .foot-links a:hover { border-color: var(--accent); color: var(--accent); }
  @media (max-width: 1000px) {
    .footer-in { grid-template-columns: 1fr; }
    .socials, .foot-links { justify-content: flex-start; }
  }

  /* ============================================================ ACCOUNT + SETTINGS */
  .acct { display: inline-flex; align-items: center; gap: 10px; }
  .acct-wrap { position: relative; }
  .acct-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 6px; cursor: pointer;
    border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink);
    font-family: var(--f-display); font-weight: 800; font-style: italic;
  }
  .acct-btn:hover { border-color: var(--accent); }
  .avatar {
    width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center;
    background: var(--accent); color: var(--accent-ink); border-radius: calc(var(--radius) + 1px);
    font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: 13px;
  }
  /* The picture lies OVER the initial rather than replacing it, so the chip is
     never an empty square: before the image loads, and after one fails. */
  .avatar { position: relative; overflow: hidden; }
  .avatar img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; }
  [data-skin="sweet"] .avatar { border-radius: 50%; }
  .acct-name { font-size: 13px; }
  .caret { font-size: 10px; color: var(--muted); }

  .settings {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 252px;
    background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--radius);
    box-shadow: 7px 7px 0 var(--accent); padding: 14px; display: none;
  }
  [data-skin="sweet"] .settings { border-color: transparent; box-shadow: 0 16px 40px var(--shadow); }
  .settings.open { display: block; }
  .set-head { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 13px; }
  .set-head b { color: var(--ink); }
  .set-sec { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .set-skins { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
  .set-skins button {
    cursor: pointer; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 9px 6px; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--muted);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }
  .set-skins button:hover { color: var(--ink); border-color: var(--ink); }
  .set-skins button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .set-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 14px; font-size: 13px; font-weight: 600; }
  .toggle { position: relative; width: 42px; height: 24px; border: var(--bw) solid var(--line-strong); border-radius: 30px; background: var(--surface-2); cursor: pointer; padding: 0; flex-shrink: 0; }
  .toggle .knob { position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; background: var(--muted); border-radius: 50%; transition: left 0.15s, background 0.15s; }
  .toggle[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
  .toggle[aria-checked="true"] .knob { left: 19px; background: var(--accent); }
  .set-signout {
    width: 100%; cursor: pointer; font-family: var(--f-display); font-weight: 800; font-style: italic; text-transform: uppercase;
    font-size: 12.5px; padding: 10px; border: var(--bw) solid var(--ink); border-radius: var(--radius);
    background: var(--ink); color: var(--bg);
  }
  [data-skin="sweet"] .set-signout { border-color: transparent; }

  /* The way into the admin, drawn only for staff. Outlined rather than filled,
     so the only solid button in the menu stays the one that signs you out. */
  .set-admin {
    display: block; text-align: center; text-decoration: none;
    font-family: var(--f-display); font-weight: 800; font-style: italic; text-transform: uppercase;
    font-size: 12.5px; padding: 10px; margin-bottom: 13px;
    border: var(--bw) solid var(--accent); border-radius: var(--radius);
    background: var(--accent-soft); color: var(--accent);
  }
  .set-admin:hover { background: var(--accent); color: var(--accent-ink); }

  /* JuqBuqs balance panel (click the balance chip) */
  .juqbal-wrap { position: relative; }
  .juqbal-btn { cursor: pointer; font: inherit; }
  .juqbal-btn:hover { border-color: var(--accent); }
  /* The coin that replaced the bank emoji. Block and flex:none so it cannot be
     squashed by the chip's own line-height or stretched by a long balance. */
  .juqbal-coin { width: 18px; height: 18px; display: block; flex: none; }
  .juqbal-cur { color: var(--muted); font-weight: 600; }
  .juqbal-pop {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 440px; max-width: calc(100vw - 24px);
    background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--radius);
    box-shadow: 9px 9px 0 var(--accent); padding: 16px;
    opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.2, 0.75, 0.2, 1);
  }
  [data-skin="sweet"] .juqbal-pop { border-color: transparent; box-shadow: 0 16px 40px var(--shadow); }
  .juqbal-pop.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .juq-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
  .juq-col { min-width: 0; }
  .juq-col-r { border-left: var(--bw) solid var(--line-strong); padding-left: 16px; }
  @media (max-width: 520px) { .juq-cols { grid-template-columns: 1fr; } .juq-col-r { border-left: none; padding-left: 0; border-top: var(--bw) solid var(--line-strong); padding-top: 14px; } }
  .juq-h { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 11px; }
  .juq-bal { font-size: 30px; font-weight: 900; font-style: italic; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.02em; }
  .juq-bal-cur { font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
  .juq-log { margin-top: 15px; display: flex; flex-direction: column; }
  .juq-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: var(--bw) solid var(--line); font-size: 12.5px; }
  .juq-row:first-child { border-top: none; }
  .juq-row-ic { font-size: 15px; line-height: 1; }
  .juq-row-name { flex: 1; min-width: 0; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .juq-row-amt { font-family: var(--f-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
  .juq-row-amt.pos { color: #22c55e; }
  .juq-row-amt.neg { color: #ff5c5c; }

  /* ---------- A ROW YOU CAN OPEN ----------
     The row became a <button>, so everything a button brings has to be taken
     back off it: its own font, its own background, its own alignment. Left as
     a browser default it would render as a grey box with centred 13px system
     text, which is not a subtle difference. */
  .juq-row-open { width: 100%; background: none; border-left: none; border-right: none;
    border-bottom: none; color: inherit; font: inherit; font-size: 12.5px; text-align: left;
    cursor: pointer; }
  .juq-row-open:hover .juq-row-name { color: var(--ink); }
  .juq-row-caret { width: 0; height: 0; border-left: 4px solid transparent;
    border-right: 4px solid transparent; border-top: 5px solid var(--muted);
    transition: transform 0.15s ease; flex: 0 0 auto; }
  .juq-row-open[aria-expanded="true"] .juq-row-caret { transform: rotate(180deg); }

  /* [hidden] loses to any rule that sets display, and this project has been
     bitten by that five times. The drawer is one of them: .juq-sub sets flex. */
  .juq-sub { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 9px 25px; }
  .juq-sub[hidden] { display: none; }
  /* A DAY, NOT A RECEIPT. Date on the left, what it came to on the right, and
     the count only when there is more than one thing in it. */
  .juq-sub-day { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; }
  .juq-sub-when { flex: 1; min-width: 0; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .juq-sub-amt { font-family: var(--f-mono); font-weight: 700; font-variant-numeric: tabular-nums;
    flex: 0 0 auto; }
  .juq-sub-amt.pos { color: #22c55e; }
  .juq-sub-amt.neg { color: #ff5c5c; }
  /* THE REASON GETS THE ROOM AND WRAPS. Truncating it to one line would hide
     the half of the sentence that says what it was actually for, which is the
     only reason this drawer exists. Indented under its day. */
  .juq-sub-why { display: flex; align-items: baseline; gap: 8px; padding-left: 10px;
    border-left: var(--bw) solid var(--line); margin-left: 1px; }
  .juq-sub-why-t { flex: 1; min-width: 0; font-size: 11px; color: var(--muted);
    line-height: 1.4; overflow-wrap: anywhere; }
  .juq-sub-note { font-family: var(--f-mono); font-size: 9.5px; color: var(--muted); line-height: 1.5; }
  .juq-redeem { text-align: center; padding: 6px 4px; }
  .juq-redeem-ic { font-size: 40px; line-height: 1; }
  .juq-redeem-h { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 15px; letter-spacing: -0.01em; margin-top: 10px; }
  .juq-redeem-p { font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

  /* ============================================================ FORECAST DROPDOWN */
  .livebtn { cursor: pointer; }
  .livebtn:hover { border-color: var(--accent); }
  .livebtn.open { background: var(--accent-soft); border-color: var(--accent); }
  .livebtn-cv { transition: transform 0.2s; display: inline-block; }
  .livebtn.open .livebtn-cv { transform: rotate(180deg); }

  /* The way back to closed events, under Happening Now. Quiet on purpose: it
     is a door out of the live section, not a second call to action competing
     with the events above it. */
  .hap-past {
    display: inline-block; margin-top: 14px;
    font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted);
    text-decoration: none;
  }
  .hap-past:hover { color: var(--accent); }

  .fcpop {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 45;
    opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.2, 0.75, 0.2, 1);
  }
  .fcpop.open { opacity: 1; transform: translateY(0); pointer-events: auto; }

  /* The music toggle. It sits OUTSIDE .fc-card deliberately: the card scrolls,
     and a control that scrolls away is a control people report as missing.
     `.wrap` carries 20px of side padding and the card fills the content box, so
     right: 34px lands it inside the card's top corner and clear of its
     scrollbar. In juq.css rather than forecast.css because the navbar is on
     every page and forecast.css is not.
     Styled to match the report card's ✕, which is the other place on the site
     with a control in a corner like this. */
  .fcpop .wrap { position: relative; }
  .fc-jam {
    /* BOTTOM right. The card carries a -4px top margin and a 12px bottom one,
       and .wrap has no vertical padding, so bottom: 24px sits it 12px inside
       the card's bottom edge - the same inset the 34px gives it on the right
       (20px of .wrap padding, then 14px to clear the card's scrollbar). */
    position: absolute; bottom: 24px; right: 34px; z-index: 2;
    width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer;
    background: var(--surface); color: var(--ink);
    border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
  }
  .fc-jam:hover { border-color: var(--accent); color: var(--accent); }
  /* Off reads as off without relying on the icon alone. */
  .fc-jam[aria-pressed="false"] { color: var(--muted); border-color: var(--line); }
  .fc-card {
    margin: -4px 0 12px; background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--radius);
    box-shadow: 9px 9px 0 var(--accent); max-height: calc(100vh - 92px); overflow-y: auto;
    display: grid; grid-template-columns: repeat(4, 1fr);
  }
  [data-skin="sweet"] .fc-card { border-color: transparent; box-shadow: 0 24px 60px var(--shadow); }
  .fc-col { padding: 20px; min-width: 0; }
  .fc-col + .fc-col { border-left: var(--bw) solid var(--line-strong); }
  .fc-h { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 15px; }
  .fc-pct { font-size: 14px; line-height: 1.4; }
  .fc-pct b { color: var(--accent); font-weight: 900; font-style: italic; }
  .fc-face { font-size: 15px; }
  .fc-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); border: var(--bw) solid var(--accent); }
  /* `display` on a class beats the browser's own [hidden] rule, every time.
     The pill used to be REMOVED when there was nothing to say, so this never
     came up; now that two different things can fill it, it is hidden instead,
     and hiding it did nothing. An empty orange box sat under the percentage. */
  .fc-pill[hidden] { display: none; }
  .fc-rows { display: flex; flex-direction: column; margin-top: 16px; }
  .fc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: var(--bw) solid var(--line); font-size: 12.5px; }
  .fc-row:first-child { border-top: none; }
  .fc-row span { color: var(--muted); }
  .fc-row b { font-family: var(--f-mono); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .fc-sub-label { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }

  .dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-items: end; }
  .dow-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .dow-val { font-family: var(--f-mono); font-size: 9px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
  .dow-track { width: 100%; height: 48px; display: flex; align-items: flex-end; }
  .dow-fill { width: 100%; background: var(--accent-soft); border: 1.5px solid var(--accent); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; }
  .dow-bar.today .dow-fill { background: var(--accent); }
  .dow-bar.today .dow-val, .dow-bar.today .dow-day { color: var(--accent); }
  .dow-day { font-family: var(--f-mono); font-size: 9px; font-weight: 700; color: var(--muted); }

  .ov { display: flex; flex-direction: column; gap: 8px; }
  .ov-row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
  .ov-name { width: 64px; flex-shrink: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ov-bar { flex: 1; height: 8px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
  .ov-bar i { display: block; height: 100%; background: var(--accent); }
  .ov-row b { font-family: var(--f-mono); font-size: 11px; font-variant-numeric: tabular-nums; width: 32px; text-align: right; }

  .pto { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
  .pto-big { font-size: 46px; font-weight: 900; font-style: italic; color: var(--accent); line-height: 0.82; font-variant-numeric: tabular-nums; }
  .pto-cap { font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); max-width: 13ch; line-height: 1.35; }

  .cal-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
  .cal-month { font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 13px; }
  .cal-arrow { cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; font-size: 15px; background: transparent; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); color: var(--ink); }
  .cal-arrow:hover { border-color: var(--accent); color: var(--accent); }
  .cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
  .cal-dow span { text-align: center; font-family: var(--f-mono); font-size: 8.5px; font-weight: 700; color: var(--muted); }
  .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .cal-cell { aspect-ratio: 1; display: grid; place-items: center; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; border-radius: calc(var(--radius) - 1px); color: var(--muted); background: var(--surface-2); font-variant-numeric: tabular-nums; }
  .cal-cell.empty { background: transparent; }
  .cal-cell.on { background: var(--accent); color: var(--accent-ink); }
  .cal-cell.half { background: var(--accent-soft); color: var(--accent); border: 1.5px solid var(--accent); }
  .cal-cell.off { background: transparent; border: 1.5px dashed var(--line-strong); }
  .cal-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
  .cal-chip { font-family: var(--f-mono); font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: var(--radius); border: var(--bw) solid var(--line-strong); color: var(--muted); }
  .cal-chip.on { border-color: var(--accent); color: var(--accent); }

  .up { display: block; padding: 11px 0; border-top: var(--bw) solid var(--line); }
  .up:first-of-type { border-top: none; }
  .up-date { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
  .up-date span { color: var(--muted); margin-left: 5px; }
  .up-title { font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 13px; letter-spacing: -0.01em; line-height: 1.15; }
  .up-title .at { color: var(--accent); }
  .up-past { margin-top: 14px; width: 100%; cursor: pointer; font-family: var(--f-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 9px; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--muted); }
  .up-past:hover { border-color: var(--accent); color: var(--ink); }
  .up-past-cv { display: inline-block; transition: transform 0.2s; }
  .up-past.open .up-past-cv { transform: rotate(180deg); }
  .up-pastlist { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
  .up-pastlist.open { grid-template-rows: 1fr; }
  .up-pastlist-in { overflow: hidden; min-height: 0; }
  .up.past { opacity: 0.66; }
  .up.past .up-date { color: var(--muted); }
  .up-seeall { display: block; margin-top: 8px; padding-top: 11px; border-top: var(--bw) solid var(--line); font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
  .up-seeall:hover { text-decoration: underline; }

  .mile { margin-bottom: 18px; }
  .mile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .mile-top span:first-child { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .mile-num { font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mile-num b { color: var(--accent); }
  .mile-bar { height: 12px; border: var(--bw) solid var(--ink); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
  [data-skin="sweet"] .mile-bar { border-color: var(--line-strong); }
  .mile-fill { height: 100%; background: var(--accent); }
  .mile-meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); margin-top: 7px; }
  .mile-meta b { color: var(--ink); }
  .mile-empty { font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); line-height: 1.5; margin-top: 6px; }

  @media (max-width: 900px) {
    .fc-card { grid-template-columns: repeat(2, 1fr); }
    .fc-col:nth-child(3) { border-left: none; }
    .fc-col:nth-child(3), .fc-col:nth-child(4) { border-top: var(--bw) solid var(--line-strong); }
  }
  @media (max-width: 520px) {
    .fc-card { grid-template-columns: 1fr; }
    .fc-col + .fc-col { border-left: none; border-top: var(--bw) solid var(--line-strong); }
  }

  /* ---- hover tooltips ---- */
  [data-tip] { cursor: help; }
  .tip {
    position: fixed; z-index: 200; max-width: 252px; padding: 9px 12px;
    background: var(--surface); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--radius);
    box-shadow: 4px 4px 0 var(--accent); font-family: var(--f-mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.01em;
    pointer-events: none; opacity: 0; transform: translateY(-3px); transition: opacity 0.12s ease, transform 0.12s ease;
  }
  .tip.on { opacity: 1; transform: translateY(0); }
  [data-skin="sweet"] .tip { border-color: transparent; box-shadow: 0 8px 22px var(--shadow); }

  /* ============================================================ JUQBUQ HEIST (vault + scratch) */
  .overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,0.64); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
  .overlay.show { opacity: 1; pointer-events: auto; }
  .mid { position: relative; display: grid; place-items: center; width: 100%; }
  .vault { position: absolute; z-index: 2; width: 320px; height: 320px; transform: scale(0.8); opacity: 0; transition: transform 0.34s cubic-bezier(0.2,1.3,0.3,1), opacity 0.32s; }
  .overlay.show .vault { transform: scale(1); opacity: 1; }
  .overlay.open .vault { opacity: 0; transform: scale(1.12); pointer-events: none; }
  .vault.clunk { animation: clunk 0.16s ease; }
  @keyframes clunk { 0%,100% { transform: translate(0,0); } 30% { transform: translate(-3px,2px); } 65% { transform: translate(2px,-2px); } }
  .door { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--surface-2); border: var(--bw) solid var(--ink); transition: transform 0.5s cubic-bezier(0.7,0,0.25,1); }
  [data-skin="sweet"] .door { border-color: var(--line-strong); }
  .door.left { left: 0; border-right: none; } .door.right { right: 0; border-left: none; }
  .door::before, .door::after { content: ""; position: absolute; width: 11px; height: 11px; border: var(--bw) solid var(--line-strong); border-radius: 2px; }
  .door::before { top: 13px; } .door::after { bottom: 13px; }
  .door.left::before, .door.left::after { left: 13px; } .door.right::before, .door.right::after { right: 13px; }
  .vault.crack .door.left { transform: translateX(-112%); } .vault.crack .door.right { transform: translateX(112%); }
  .door-label { position: absolute; z-index: 3; top: 18px; left: 0; right: 0; text-align: center; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); transition: opacity 0.25s; }
  .vault.crack .door-label { opacity: 0; }
  .dial { position: absolute; z-index: 4; top: 50%; left: 50%; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; background: var(--surface); border: var(--bw) solid var(--ink); box-shadow: 4px 4px 0 var(--accent); transition: opacity 0.3s, transform 0.4s; }
  [data-skin="sweet"] .dial { border-color: var(--line-strong); box-shadow: 0 10px 24px var(--shadow); }
  .vault.crack .dial { opacity: 0; transform: scale(0.55); }
  .dial-wheel { position: absolute; inset: 7px; border-radius: 50%; background: repeating-conic-gradient(from -0.8deg, var(--ink) 0 1.6deg, transparent 1.6deg 12deg); }
  .dial-wheel::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface); }
  .dial-mark { position: absolute; z-index: 2; top: 8px; left: 50%; width: 4px; height: 15px; margin-left: -2px; background: var(--accent); border-radius: 1px; }
  .dial-knob { position: absolute; z-index: 3; inset: 33%; border-radius: 50%; background: var(--surface-2); border: var(--bw) solid var(--line-strong); }
  .dial-knob::before, .dial-knob::after { content: ""; position: absolute; background: var(--accent); }
  .dial-knob::before { left: 50%; top: 18%; bottom: 18%; width: 3px; margin-left: -1.5px; }
  .dial-knob::after { top: 50%; left: 18%; right: 18%; height: 3px; margin-top: -1.5px; }
  .dial-notch { position: absolute; z-index: 5; top: -3px; left: 50%; margin-left: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 13px solid var(--accent); }
  .panel { position: relative; z-index: 1; width: 780px; max-width: 94vw; max-height: 92vh; overflow-y: auto; background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--radius); box-shadow: 9px 9px 0 var(--accent); transform: scale(0.28); opacity: 0; transition: transform 0.46s cubic-bezier(0.2,1,0.3,1), opacity 0.4s; }
  [data-skin="sweet"] .panel { border-color: transparent; box-shadow: 0 26px 64px var(--shadow); }
  .overlay.open .panel { transform: scale(1); opacity: 1; }
  .tabs { display: flex; align-items: center; gap: 4px; padding: 12px 14px; border-bottom: var(--bw) solid var(--line-strong); position: sticky; top: 0; background: var(--surface); z-index: 3; }
  .tab { cursor: pointer; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 8px 11px; border: var(--bw) solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); }
  .tab:hover { color: var(--ink); }
  .tab.on { color: var(--accent-ink); background: var(--accent); }
  .p-bank { margin-left: auto; font-family: var(--f-mono); font-size: 12px; font-weight: 700; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); padding: 6px 10px; }
  .p-bank b { color: var(--accent); font-variant-numeric: tabular-nums; }
  .p-x { cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; font-size: 14px; background: transparent; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); color: var(--ink); }
  .p-x:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .pane { display: none; padding: 18px; } .pane.on { display: block; }
  .t-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
  .t-logo { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 18px; letter-spacing: -0.02em; }
  .t-logo em { color: var(--accent); font-style: italic; }
  .t-date { font-family: var(--f-mono); font-size: 11px; color: var(--muted); } .t-date b { color: var(--ink); }
  .t-sub { font-size: 12.5px; color: var(--muted); margin: 6px 0 12px; }
  .t-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--f-mono); font-size: 11px; color: var(--muted); padding: 10px 12px; border: var(--bw) dashed var(--line-strong); border-radius: var(--radius); margin-bottom: 16px; }
  .t-legend b { color: var(--ink); }
  .t-grid { display: grid; grid-template-columns: 148px 1fr; gap: 16px; align-items: stretch; }
  .t-left { display: flex; flex-direction: column; gap: 8px; }
  @media (max-width: 640px) { .t-grid { grid-template-columns: 1fr; } .lineup { flex-direction: row !important; } .lineup .spot { flex: 1; height: 62px !important; } }
  .sec-lbl { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0; }
  .sec-lbl small { color: var(--muted); font-weight: 700; margin-left: 6px; letter-spacing: 0.04em; }
  .lineup { display: flex; flex-direction: column; gap: 8px; }
  .lineup .spot { height: 58px; }
  .lineup .spot .under { flex-direction: row; gap: 8px; }
  .grid9 { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 9px; }
  .grid9 .spot { min-height: 104px; }
  .getaway { position: relative; flex: 1; min-height: 76px; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
  .spot { position: relative; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
  .spot .under { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; text-align: center; }
  .sym { font-size: 34px; line-height: 1; }
  .getaway .sym { font-size: 28px; }
  .prize { font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 7px; }
  .tag { font-family: var(--f-mono); font-size: 7.5px; font-weight: 700; letter-spacing: 0.06em; padding: 1px 4px; border-radius: 3px; background: var(--accent); color: var(--accent-ink); margin-top: 2px; }
  .mult { font-family: var(--f-mono); font-weight: 800; font-size: 17px; color: var(--accent); }
  .mnote { font-family: var(--f-mono); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .spot canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; z-index: 2; }
  .spot canvas:active { cursor: grabbing; }
  .spot.win { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 2px var(--accent-soft); }
  .spot.win .prize { color: var(--accent); }
  .t-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: var(--bw) solid var(--line-strong); }
  .tally { font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .tally b { font-size: 20px; color: var(--accent); font-style: italic; margin: 0 4px; font-variant-numeric: tabular-nums; }
  .mult-badge { color: var(--accent); }
  .status { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); text-align: right; }
  .status.big { color: var(--accent); font-weight: 700; }
  .o-h { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 15px; margin: 18px 0 8px; }
  .o-h:first-child { margin-top: 0; }
  .o-h small { font-family: var(--f-mono); font-size: 10px; color: var(--muted); font-style: normal; font-weight: 700; text-transform: none; margin-left: 6px; }
  .o-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .o-list li { display: flex; gap: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
  .o-list b { color: var(--ink); }
  .o-list .ic { flex-shrink: 0; font-size: 16px; }
  .pane table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
  .pane th, .pane td { border: var(--bw) solid var(--line); padding: 6px 8px; text-align: left; font-variant-numeric: tabular-nums; }
  .pane th { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
  .pane td b, .pane table b { color: var(--accent); }
  .lb-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: var(--bw) solid var(--line); border-radius: var(--radius); margin-bottom: 6px; }
  .lb-rank { font-family: var(--f-mono); font-weight: 800; color: var(--muted); min-width: 16px; }
  .lb-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lb-amt { font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--ok); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }