/* Chip direction, first full surface, second pass: filter toolbar with
     dropdown panels, odds blocks, sticky table header, mobile cards.
     Keylines and hard offsets built from the logo chip; everything reads
     from the base.njk token layer. No raw Tailwind values. */

  .om-wrap { max-width: 1250px; margin: 0 auto; padding: 2.5rem clamp(1rem, 5vw, 2rem) 5rem; }

  /* Preview notice. Sits above the header until the worker is live and the
     prices can be trusted. Delete this block and the matching markup in the
     body when the Oddsmatcher goes live. */
  .om-preview {
    background: var(--coral); color: var(--ink);
    border: var(--keyline-w) solid var(--keyline); border-radius: var(--r-sm);
    box-shadow: var(--shadow-chip);
    padding: 1rem 1.25rem; margin-bottom: 2rem;
    display: flex; align-items: flex-start; gap: 0.85rem;
  }
  .om-preview .oi { width: 22px; height: 22px; stroke-width: 2.5; margin-top: 0.1rem; }
  .om-preview-text { min-width: 0; }
  .om-preview strong {
    display: block; font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.5vw, 1.3rem); font-weight: 700;
    letter-spacing: 0.01em; margin-bottom: 0.25rem;
  }
  .om-preview p { margin: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.5; }
  @media (max-width: 560px) {
    .om-preview { box-shadow: var(--chip-lg) var(--keyline); }
  }

  .om-header {
    text-align: left; margin-bottom: 1.75rem; padding-bottom: 1.1rem;
    border-bottom: var(--keyline-w) solid var(--keyline);
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.25rem; flex-wrap: wrap;
  }
  .om-head-text { flex: 1 1 420px; min-width: 0; }

  /* Jump to the explainer below the table. Chip primitives: ink keyline,
     coral hard offset, presses in on hover like .gate-btn. */
  .om-jump {
    display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
    background: var(--surface); color: var(--ink);
    font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
    padding: 0.5rem 1rem; border: var(--keyline-w) solid var(--keyline);
    border-radius: var(--r-pill); box-shadow: var(--chip-lg) var(--coral);
    text-decoration: none; white-space: nowrap; margin-bottom: 0.2rem;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }
  .om-jump:hover, .om-jump:focus-visible {
    transform: translate(2px, 2px); box-shadow: var(--chip-sm) var(--coral);
  }
  .om-jump .oi { width: 15px; height: 15px; }
  @media (max-width: 560px) { .om-jump { width: 100%; justify-content: center; } }
  .om-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 700; color: var(--ink); margin-bottom: 0.4rem;
  }
  .om-header p { color: var(--ink-60); font-size: 1rem; max-width: 700px; margin: 0; }

  .auth-strip {
    background: var(--wash-2); border: 1px solid var(--rule); border-radius: var(--r-sm);
    padding: 0.75rem 1.1rem; margin-bottom: 1rem; display: flex;
    align-items: center; gap: 0.75rem; font-size: 0.88rem; color: var(--ink-45);
    flex-wrap: wrap;
  }
  .auth-strip.logged-in { border-color: var(--positive-20); background: var(--positive-05); color: var(--positive-strong); }
  .auth-strip a { color: var(--coral-dark); font-weight: 600; text-decoration: none; }
  .auth-strip a:hover { text-decoration: underline; }

  /* Shared focus treatment. */
  .om-wrap button:focus-visible, .om-wrap input:focus-visible, .om-wrap select:focus-visible,
  .calc-card button:focus-visible, .calc-card input:focus-visible, .calc-card select:focus-visible {
    outline: 2px solid var(--coral); outline-offset: 1px;
  }

  /* Inline icons, self-contained (no dependency on the base sprite). */
  .oi { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }

  .om-wrap .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* ── Gate ───────────────────────────────────────────────────── */
  .gate-card {
    background: var(--surface); border: var(--keyline-w) solid var(--keyline); border-radius: var(--r-sm);
    box-shadow: var(--shadow-chip);
    padding: 2.5rem 2rem; text-align: left; max-width: 620px; margin: 2rem auto;
  }
  .gate-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--coral); border: var(--chip-ring) solid var(--keyline);
    display: flex; align-items: center; justify-content: center;
    color: #fff; margin-bottom: 1rem;
  }
  .gate-icon svg { width: 22px; height: 22px; }
  .gate-card h2 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 0.75rem; color: var(--ink); }
  .gate-card p { color: var(--ink-60); margin-bottom: 1.5rem; line-height: 1.6; }
  .gate-btn {
    display: inline-block; background: var(--coral); color: #fff; font-weight: 600;
    padding: 0.7rem 1.6rem; border: var(--keyline-w) solid var(--keyline); border-radius: var(--r-sm);
    box-shadow: var(--chip-lg) var(--keyline); text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }
  .gate-btn:hover { transform: translate(2px, 2px); box-shadow: var(--chip-sm) var(--keyline); }

  /* ── Sport tabs ─────────────────────────────────────────────── */
  .sport-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
  .sport-tab {
    flex: 0 0 auto; border: var(--keyline-w) solid var(--keyline); background: var(--surface);
    border-radius: var(--r-pill); padding: 0.5rem 1.15rem; cursor: pointer;
    font-family: var(--font-body); font-size: 0.92rem; font-weight: 600;
    color: var(--ink-70); display: flex; align-items: center; gap: 0.45rem;
    transition: background 0.12s ease;
  }
  .sport-tab:hover { background: var(--wash-2); }
  .sport-tab.active {
    background: var(--coral); border-color: var(--keyline); color: #fff;
    box-shadow: var(--chip-md) var(--keyline);
  }
  .sport-tab .cnt {
    background: var(--wash); color: var(--ink-45); border-radius: var(--r-pill);
    font-size: 0.72rem; padding: 0.1rem 0.45rem; font-weight: 600;
  }
  .sport-tab.active .cnt { background: #fff; color: var(--coral-dark); }

  /* ── Feed status ────────────────────────────────────────────── */
  .feed-strip {
    display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
    margin-bottom: 1rem; font-size: 0.78rem;
  }
  .feed-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r-pill);
    padding: 0.22rem 0.6rem; color: var(--ink-45); font-weight: 500;
  }
  .feed-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-20); }
  .feed-chip.ok { border-color: var(--positive-20); background: var(--positive-05); color: var(--positive-strong); }
  .feed-chip.ok .feed-dot { background: var(--positive); }
  .feed-chip.bad { border-color: var(--negative-20); background: var(--negative-05); color: var(--negative-deep); }
  .feed-chip.bad .feed-dot { background: var(--negative); }
  .feed-chip.off { opacity: 0.65; }

  /* ── Search + mode + refresh bar ────────────────────────────── */
  .om-bar {
    display: flex; gap: 0.6rem; align-items: stretch; margin-bottom: 0.7rem;
    flex-wrap: wrap;
  }
  .om-refresh-note {
    margin: -0.1rem 0 0.7rem; font-size: 0.82rem; color: var(--ink-70);
  }
  .mode-switch {
    display: inline-flex; background: var(--surface);
    border: var(--keyline-w) solid var(--keyline); border-radius: var(--r-sm); overflow: hidden;
    flex: 0 0 auto;
  }
  .mode-switch button {
    border: 0; background: transparent; border-radius: 0; cursor: pointer;
    padding: 0.45rem 0.9rem; font-family: var(--font-body);
    font-size: 0.83rem; font-weight: 600; color: var(--ink-70);
  }
  .mode-switch button + button { border-left: var(--keyline-w) solid var(--keyline); }
  .mode-switch button.active { background: var(--coral); color: #fff; }

  .om-search { position: relative; flex: 1 1 240px; min-width: 200px; }
  .om-search .oi {
    position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
    color: var(--ink-45); pointer-events: none;
  }
  .om-search input {
    width: 100%; height: 100%; box-sizing: border-box;
    border: 1.5px solid var(--rule); border-radius: var(--r-sm);
    padding: 0.5rem 0.7rem 0.5rem 2.1rem; font-size: 0.9rem; font-family: inherit;
    background: var(--surface); color: var(--ink-strong);
  }
  .om-search input:focus { outline: 2px solid var(--coral-light); border-color: var(--coral); }

  .refresh-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem;
    border: var(--keyline-w-sm) solid var(--keyline); background: var(--surface); border-radius: var(--r-sm);
    padding: 0.45rem 0.85rem; cursor: pointer; font-family: var(--font-body);
    font-size: 0.83rem; font-weight: 600; color: var(--ink-70);
  }
  .refresh-btn:hover { background: var(--wash-2); }
  .refresh-btn .oi { transition: transform 0.4s ease; }
  .refresh-btn.busy .oi { animation: om-spin 0.9s linear infinite; }
  @keyframes om-spin { to { transform: rotate(360deg); } }

  /* ── Filter rail: applied filters live on the table as chips ──
     Not a row of dropdown menus. Every filter you have set is spelled out
     in words on the rail and can be flicked off individually; the full set
     of controls opens as one panel, all of it visible at once. */
  .filter-rail {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.5rem 0.1rem; margin-bottom: 0.2rem;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  }
  .rail-toggle {
    display: inline-flex; align-items: center; gap: 0.45rem; flex: 0 0 auto;
    border: var(--keyline-w) solid var(--keyline); background: var(--surface); border-radius: var(--r-pill);
    padding: 0.38rem 0.95rem; cursor: pointer; font-family: var(--font-body);
    font-size: 0.85rem; font-weight: 600; color: var(--ink);
    transition: box-shadow 0.12s ease, transform 0.12s ease;
  }
  .rail-toggle:hover { box-shadow: var(--chip-md) var(--keyline); }
  .rail-toggle[aria-expanded="true"] {
    background: var(--ink); color: #fff; box-shadow: var(--chip-md) var(--coral);
  }

  .rail-chips { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; flex: 1 1 auto; }
  .rail-hint { font-size: 0.82rem; color: var(--ink-45); }

  /* An applied filter, as a chip you can flick off the table. */
  .fchip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: var(--keyline-w-sm) solid var(--keyline); background: var(--surface);
    border-radius: var(--r-pill); padding: 0.22rem 0.3rem 0.22rem 0.7rem;
    font-size: 0.8rem; font-weight: 600; color: var(--ink);
  }
  .fchip .fchip-key { color: var(--ink-45); font-weight: 500; }
  .fchip button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; padding: 0; cursor: pointer;
    border: 0; border-radius: 50%; background: var(--wash); color: var(--ink-60);
    font-size: 0.7rem; line-height: 1;
  }
  .fchip button:hover { background: var(--coral); color: #fff; }

  .rail-clear {
    flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
    font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
    color: var(--ink-45); text-decoration: underline; text-underline-offset: 2px;
    padding: 0.3rem 0.2rem;
  }
  .rail-clear:hover { color: var(--negative-strong); }
  .rail-clear[hidden] { display: none; }

  /* ── Filter drawer: one panel, everything in it, nothing hidden ── */
  .filter-drawer {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
  }
  .filter-drawer.open { grid-template-rows: 1fr; }
  /* Collapsed content is zero-height but would still be tabbable and
     clickable, so it is taken out of the tree once the close finishes. */
  .drawer-clip { overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.2s; }
  .filter-drawer.open .drawer-clip { visibility: visible; transition-delay: 0s; }
  .drawer-card {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem 0.9rem;
    background: var(--surface); border: var(--keyline-w) solid var(--keyline);
    border-radius: var(--r-sm); box-shadow: var(--shadow-chip);
    padding: 1.1rem; margin: 0.6rem 5px 0.9rem 0;
  }
  .span-2 { grid-column: span 2; }
  .span-4 { grid-column: 1 / -1; }

  .drawer-field label {
    display: block; font-size: 0.72rem; color: var(--ink-45); font-weight: 600;
    margin-bottom: 0.25rem;
  }
  .drawer-field input, .drawer-field select {
    width: 100%; box-sizing: border-box; border: 1.5px solid var(--rule); border-radius: var(--r-sm);
    padding: 0.45rem 0.6rem; font-size: 0.88rem; font-family: inherit;
    background: var(--surface); color: var(--ink-strong);
  }
  .drawer-field input:focus, .drawer-field select:focus { outline: 2px solid var(--coral-light); border-color: var(--coral); }

  /* Section rule with the label sitting on it, ledger style. */
  .drawer-rule {
    display: flex; align-items: center; gap: 0.7rem;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--ink-45); margin-top: 0.35rem;
  }
  .drawer-rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

  .drawer-foot {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    border-top: 1px solid var(--rule); padding-top: 0.85rem; margin-top: 0.35rem;
  }
  .drawer-reset, .drawer-done {
    border: var(--keyline-w-sm) solid var(--keyline); background: var(--surface); border-radius: var(--r-sm);
    padding: 0.45rem 1rem; cursor: pointer; font-family: var(--font-body);
    font-size: 0.83rem; font-weight: 600; color: var(--ink-70);
  }
  .drawer-reset:hover { background: var(--wash-2); }
  .drawer-done { background: var(--coral); border: var(--keyline-w) solid var(--keyline); color: #fff; box-shadow: var(--chip-md) var(--keyline); }
  .drawer-done:hover { background: var(--coral-dark); }

  .chip-row { display: flex; gap: 0.35rem; flex-wrap: wrap; }
  .pick-chip {
    border: 1.5px solid var(--rule); background: var(--surface); border-radius: var(--r-pill);
    padding: 0.3rem 0.8rem; font-size: 0.8rem; cursor: pointer; color: var(--ink-70);
    font-family: var(--font-body);
  }
  .pick-chip:hover { border-color: var(--ink-20); }
  .pick-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }

  .check-list { display: flex; flex-direction: column; gap: 0.1rem; }
  .check-scroll { max-height: 172px; overflow-y: auto; padding-right: 2px; }
  .check-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.28rem 0.4rem;
    font-size: 0.85rem; color: var(--ink-70); cursor: pointer; border-radius: var(--r-sm);
  }
  .check-item:hover { background: var(--wash); }
  .check-item input { width: 15px; height: 15px; accent-color: var(--ink); cursor: pointer; flex: none; }
  .check-empty { font-size: 0.8rem; color: var(--ink-45); padding: 0.3rem 0.4rem; }
  .mk-tag {
    display: inline-block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.02em; color: var(--info-deep); background: var(--info-10);
    border-radius: var(--r-sm); padding: 0.02rem 0.35rem;
  }

  .comm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; align-items: center; }
  .comm-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--ink-70); }
  .comm-input { display: inline-flex; align-items: center; gap: 0.3rem; justify-self: end; }
  .comm-input input {
    width: 3.6rem; padding: 0.32rem 0.45rem; text-align: right; color: var(--ink-70);
    border: 1.5px solid var(--rule); border-radius: var(--r-sm); font-family: var(--font-body); font-size: 0.85rem;
  }
  .comm-input i { font-style: normal; color: var(--ink-45); }
  .comm-note { font-size: 0.75rem; color: var(--ink-45); margin: 0.55rem 0 0; }

  /* Collapsible multi-select (markets / competitions), so the lists are
     tidy by default instead of always sprawled open. Inline expand, no
     absolute popover, so the drawer never clips it. */
  .ms { position: relative; }
  .ms-toggle {
    width: 100%; text-align: left; background: var(--surface); color: var(--ink-70);
    border: 1.5px solid var(--rule); border-radius: var(--r-sm);
    padding: 0.5rem 1.9rem 0.5rem 0.7rem; font-family: var(--font-body); font-size: 0.9rem; cursor: pointer; position: relative;
  }
  .ms-toggle::after {
    content: ''; position: absolute; right: 0.8rem; top: 42%;
    width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--ink-45); border-bottom: 2px solid var(--ink-45);
    transform: rotate(45deg);
  }
  .ms-toggle:hover { border-color: var(--ink-20); }
  .ms-toggle.on { border-color: var(--ink); }
  .ms-toggle.on::after { top: 50%; transform: rotate(-135deg); }
  .ms-panel {
    margin-top: 0.4rem; border: 1px solid var(--rule); border-radius: var(--r-sm);
    padding: 0.35rem 0.45rem; max-height: 220px; overflow-y: auto; background: var(--surface);
  }

  .results-meta {
    font-size: 0.82rem; color: var(--ink-45); margin-bottom: 0.5rem;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  }
  .fresh-chip { font-weight: 600; }
  .fresh-chip.stale { color: var(--caution-deep); }

  /* ── Table. The hero surface, so it wears the chip offset. ──── */
  .om-table-card {
    background: var(--surface); border: var(--keyline-w) solid var(--keyline);
    border-radius: var(--r-sm); box-shadow: var(--shadow-chip); overflow: hidden;
    margin-right: 5px; /* keep the offset shadow inside the wrap on small screens */
  }
  .om-scroll { overflow: auto; max-height: 70vh; }
  table.om { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.88rem; }
  table.om th {
    position: sticky; top: 0; z-index: 5;
    text-align: left; padding: 0.7rem 0.8rem; background: var(--canvas);
    border-bottom: var(--keyline-w) solid var(--keyline); font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--ink-45); white-space: nowrap;
  }
  table.om th.sortable { cursor: pointer; user-select: none; }
  table.om th.sortable:hover { color: var(--ink); }
  table.om th .arrow { opacity: 0.45; font-size: 0.65rem; }
  table.om td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--wash); vertical-align: middle; }
  tr.om-row { cursor: pointer; }
  tr.om-row:hover td { background: var(--wash-2); }
  table.om tbody tr:last-child td { border-bottom: 0; }

  .ev-name { font-weight: 600; color: var(--ink-strong); }
  .ev-meta { font-size: 0.74rem; color: var(--ink-45); margin-top: 0.1rem; }
  .sel-name { font-weight: 600; color: var(--ink-strong); }
  .runner-no {
    display: inline-block; min-width: 1.25rem; text-align: center;
    background: var(--wash); color: var(--ink-45); border-radius: var(--r-sm);
    font-size: 0.72rem; padding: 0.05rem 0.25rem; margin-right: 0.35rem; font-weight: 600;
  }

  .pill {
    display: inline-block; border-radius: var(--r-pill); padding: 0.14rem 0.5rem;
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  }
  .pill-0 { background: var(--info-05); color: var(--info-strong); }
  .pill-1 { background: var(--positive-05); color: var(--positive-strong); }
  .pill-2 { background: var(--caution-05); color: var(--caution-deep); }
  .pill-3 { background: var(--negative-05); color: var(--negative-strong); }
  .pill-4 { background: var(--wash); color: var(--ink-70); }
  .pill-5 { background: var(--info-20); color: var(--info-strong); }
  .pill-6 { background: var(--positive-10); color: var(--positive-deep); }
  .pill-7 { background: var(--caution-10); color: var(--caution-deep); }
  .pill-8 { background: var(--negative-10); color: var(--negative-deep); }
  .pill-9 { background: var(--wash-2); color: var(--ink-80); }
  .om-small-note { font-size: 0.85rem; }
  .om-small-note.narrow { max-width: 420px; margin: 0.5rem auto 0; }
  .om .td-actions { white-space: nowrap; }
  .skel.w60 { width: 60%; height: 0.9rem; }
  .skel.w40 { width: 40%; height: 0.7rem; margin-top: 0.35rem; }
  .skel.w70 { width: 70%; height: 0.9rem; }
  .skel.wback { width: 3.5rem; height: 1.4rem; }
  .skel.wlay { width: 4.5rem; height: 1.4rem; }
  .skel.wmetric { width: 4rem; height: 1.4rem; border-radius: var(--r-pill); }
  .skel.wql { width: 3rem; height: 0.9rem; }
  .skel.wactions { width: 3.5rem; height: 1.4rem; }

  /* Odds blocks: the price is the point, so it gets the biggest type in the row. */
  .odds-block { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.12rem; }
  .ob-odds {
    font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.02rem;
    color: var(--ink-strong); line-height: 1.1;
  }
  .ob-sub { font-size: 0.72rem; color: var(--ink-45); white-space: nowrap; }
  .ex-name { font-size: 0.72rem; font-weight: 600; color: var(--ink-70); }
  .delayed-tag {
    background: var(--caution-10); color: var(--caution-deep); border-radius: var(--r-sm);
    font-size: 0.64rem; padding: 0.05rem 0.3rem; font-weight: 700; margin-left: 0.3rem;
  }

  .rating-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border-radius: var(--r-pill); padding: 0.28rem 0.7rem;
    font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.85rem;
    white-space: nowrap;
  }
  .rating-pill .rp-dot { width: 7px; height: 7px; border-radius: 50%; }
  .rating-pill.hot { background: var(--positive-10); color: var(--positive-deep); }
  .rating-pill.hot .rp-dot { background: var(--positive); }
  .rating-pill.warm { background: var(--caution-10); color: var(--caution-deep); }
  .rating-pill.warm .rp-dot { background: var(--caution); }
  .rating-pill.cold { background: var(--wash); color: var(--ink-60); }
  .rating-pill.cold .rp-dot { background: var(--ink-20); }

  .ql { font-variant-numeric: tabular-nums; font-weight: 600; }
  .ql.neg { color: var(--negative-strong); }
  .ql.pos { color: var(--positive-strong); }
  .m-label { display: none; }

  .icon-btn {
    border: 1.5px solid var(--rule); background: var(--surface); border-radius: var(--r-sm);
    padding: 0.3rem 0.45rem; cursor: pointer; font-size: 0.85rem;
    color: var(--ink-45); margin-left: 0.2rem; line-height: 1;
  }
  .icon-btn:hover { border-color: var(--keyline); color: var(--ink); }

  .more-ex {
    border: 0; background: transparent; color: var(--ink-45); cursor: pointer;
    font-size: 0.72rem; padding: 0.1rem 0; text-decoration: underline;
  }
  .more-ex:hover { color: var(--ink); }
  .ex-detail td { background: var(--canvas); font-size: 0.8rem; color: var(--ink-70); }
  .ex-detail .ex-row { display: flex; gap: 1.1rem; flex-wrap: wrap; }

  .om-empty { padding: 3rem 1.5rem; text-align: center; color: var(--ink-60); }
  .om-legend { font-size: 0.76rem; color: var(--ink-45); margin-top: 1.1rem; line-height: 1.7; }

  /* Skeleton rows while prices load. */
  .skel { display: inline-block; border-radius: var(--r-sm); background: var(--wash); position: relative; overflow: hidden; }
  .skel::after {
    content: ""; position: absolute; inset: 0;
    background: var(--wash-2);
    animation: om-shimmer 1.2s infinite;
  }
  @keyframes om-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

  .arb-banner {
    background: var(--caution-05); border: 1px solid var(--caution-20); color: var(--caution-deep);
    border-radius: var(--r-sm); padding: 0.6rem 0.9rem; font-size: 0.82rem; margin-bottom: 0.75rem;
  }
  .arb-banner button {
    border: 0; background: transparent; color: var(--caution-deep); text-decoration: underline;
    cursor: pointer; font-weight: 600; font-size: 0.82rem;
  }

  .pager { display: flex; gap: 0.5rem; justify-content: center; align-items: center; padding: 0.9rem; border-top: 1px solid var(--wash); }
  .pager button {
    border: var(--keyline-w-sm) solid var(--keyline); background: var(--surface); border-radius: var(--r-sm);
    padding: 0.35rem 0.8rem; cursor: pointer; font-size: 0.85rem; color: var(--ink-70);
  }
  .pager button:hover:not(:disabled) { background: var(--wash-2); }
  .pager button:disabled { opacity: 0.4; cursor: default; }

  /* ── Calculator ─────────────────────────────────────────────── */
  .calc-overlay {
    display: none; position: fixed; inset: 0; background: rgba(26, 35, 50, .55);
    z-index: 900; align-items: center; justify-content: center; padding: 1rem;
  }
  .calc-overlay.open { display: flex; }
  .calc-card {
    background: var(--surface); border: var(--keyline-w) solid var(--keyline); border-radius: var(--r-sm);
    box-shadow: var(--shadow-chip); width: 100%; max-width: 500px;
    max-height: 92vh; overflow-y: auto; padding: 1.5rem;
  }
  .calc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
  .calc-head h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 0; color: var(--ink); }
  .calc-sub { font-size: 0.82rem; color: var(--ink-45); margin: 0.15rem 0 1rem; }
  .calc-close { border: 0; background: transparent; font-size: 1.4rem; cursor: pointer; color: var(--ink-45); line-height: 1; }
  .calc-close:hover { color: var(--ink); }
  .calc-modes {
    display: flex; background: var(--surface); border: var(--keyline-w) solid var(--keyline);
    border-radius: var(--r-sm); overflow: hidden; margin-bottom: 1rem;
  }
  .calc-modes button {
    flex: 1; border: 0; background: transparent; border-radius: 0; cursor: pointer;
    padding: 0.45rem 0.3rem; font-size: 0.78rem; font-weight: 600; color: var(--ink-70);
    font-family: var(--font-body);
  }
  .calc-modes button + button { border-left: var(--keyline-w) solid var(--keyline); }
  .calc-modes button.active { background: var(--coral); color: #fff; }
  .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1.1rem; }
  .calc-field label { display: block; font-size: 0.72rem; color: var(--ink-45); font-weight: 600; margin-bottom: 0.2rem; }
  .calc-field input, .calc-field select {
    width: 100%; box-sizing: border-box; border: 1.5px solid var(--rule); border-radius: var(--r-sm);
    padding: 0.5rem 0.6rem; font-size: 0.95rem; font-family: inherit; color: var(--ink-strong);
  }
  .calc-field input:focus, .calc-field select:focus { outline: 2px solid var(--coral-light); border-color: var(--coral); }
  .calc-hero {
    background: var(--wash-2); border: var(--keyline-w) solid var(--keyline); border-radius: var(--r-sm);
    padding: 1rem; text-align: center; margin-bottom: 1rem;
  }
  .hero-label { font-size: 0.74rem; color: var(--ink-45); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
  .hero-value { font-size: 2rem; font-weight: 800; color: var(--coral-dark); font-variant-numeric: tabular-nums; }
  .hero-liability { font-size: 0.8rem; color: var(--ink-45); }

  .calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
  .out-block { border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 0.65rem 0.75rem; background: var(--wash-2); }
  .out-title {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.74rem; font-weight: 700; color: var(--ink-70); margin-bottom: 0.45rem;
  }
  .out-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .out-dot.back { background: var(--positive); }
  .out-dot.lay { background: var(--info); }
  .out-row { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ink-60); padding: 0.1rem 0; }
  .out-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
  .out-row.total { border-top: 1px solid var(--rule); margin-top: 0.3rem; padding-top: 0.35rem; color: var(--ink); font-weight: 700; }
  .out-row .pos { color: var(--positive-strong); }
  .out-row .neg { color: var(--negative-strong); }

  .calc-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .calc-actions button, .calc-actions a {
    flex: 1; border: var(--keyline-w-sm) solid var(--keyline); background: var(--surface); border-radius: var(--r-sm);
    padding: 0.55rem; cursor: pointer; font-size: 0.85rem; font-weight: 600;
    color: var(--ink-70); text-align: center; text-decoration: none;
  }
  .calc-actions button:hover:not(:disabled), .calc-actions a:hover { background: var(--wash-2); }
  .calc-actions button.primary { background: var(--coral); border: var(--keyline-w) solid var(--keyline); color: #fff; box-shadow: var(--chip-md) var(--keyline); }
  .calc-actions button.primary:hover:not(:disabled) { background: var(--coral-dark); }
  .calc-note { font-size: 0.75rem; color: var(--ink-45); margin-top: 0.8rem; line-height: 1.6; }

  @media (prefers-reduced-motion: reduce) {
    .om-wrap *, .calc-card * { transition: none !important; animation: none !important; }
    .skel::after { display: none; }
  }

  /* ── Mobile: rows become cards ──────────────────────────────── */
  @media (max-width: 720px) {
    .om-scroll { max-height: none; overflow: visible; }
    table.om, table.om tbody { display: block; }
    table.om thead { display: none; }
    tr.om-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.9rem;
      padding: 0.85rem 0.95rem; border-bottom: 1px solid var(--rule);
    }
    tr.om-row td { display: block; border: 0; padding: 0; }
    tr.om-row td.td-event, tr.om-row td.td-sel, tr.om-row td.td-book, tr.om-row td.td-actions { grid-column: 1 / -1; }
    tr.om-row td.td-book { display: flex; align-items: center; gap: 0.45rem; }
    tr.om-row td.td-metric, tr.om-row td.td-ql {
      display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
    }
    tr.om-row td.td-actions { display: flex; gap: 0.45rem; padding-top: 0.15rem; }
    tr.om-row td.td-actions .icon-btn { margin-left: 0; padding: 0.4rem 0.75rem; }
    .m-label { flex: 0 0 auto; }
    .m-label { display: inline; font-size: 0.72rem; color: var(--ink-45); font-weight: 600; }
    tr.ex-detail { display: block; padding: 0.5rem 0.95rem; border-bottom: 1px solid var(--rule); }
    tr.ex-detail td { display: block; border: 0; }
    .drawer-card { grid-template-columns: repeat(2, 1fr); padding: 0.9rem; }
    .drawer-foot { flex-direction: column-reverse; }
    .drawer-reset, .drawer-done { width: 100%; }
    .calc-grid, .calc-out { grid-template-columns: 1fr; }
  }

  /* ── Public shell ───────────────────────────────────────────────
     Static, always rendered, indexable. Sits above the gate so the
     page says something to a crawler and to a non-member. Chip
     direction, reads from the base.njk token layer. */
  .om-public { scroll-margin-top: 6rem; margin-top: 3.5rem; padding-top: 2rem; border-top: var(--keyline-w) solid var(--keyline); }
  .om-public > h2:first-child { margin-top: 0; }
  .om-public h2 {
    font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
    color: var(--ink); margin: 2rem 0 0.6rem;
  }
  .om-public p { color: var(--ink-60); line-height: 1.7; margin-bottom: 0.9rem; max-width: 720px; }
  .om-public a { color: var(--coral-dark); font-weight: 600; }

  .om-covers { list-style: none; padding: 0; margin: 0 0 1rem; max-width: 720px; }
  .om-covers li {
    padding: 0.7rem 0 0.7rem 1.4rem; border-bottom: 1px solid var(--rule);
    color: var(--ink-60); line-height: 1.6; position: relative;
  }
  .om-covers li:before {
    content: ""; position: absolute; left: 0; top: 1.15rem;
    width: 6px; height: 6px; background: var(--coral); border-radius: 50%;
  }
  .om-covers li strong { color: var(--ink); font-weight: 600; }

  .om-sample-note { font-size: 0.82rem; color: var(--ink-45); margin-bottom: 0.6rem; }
  .om-sample-wrap { overflow-x: auto; margin-bottom: 1rem; }
  table.om-sample {
    width: 100%; min-width: 620px; border-collapse: collapse;
    border: var(--keyline-w) solid var(--keyline); background: var(--surface);
    box-shadow: var(--shadow-chip); font-size: 0.87rem;
  }
  table.om-sample th {
    text-align: left; font-size: 0.7rem; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink-45); font-weight: 700;
    padding: 0.6rem 0.75rem; border-bottom: var(--keyline-w) solid var(--keyline); white-space: nowrap;
  }
  table.om-sample td {
    padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--rule);
    color: var(--ink-60); white-space: nowrap;
  }
  table.om-sample tr:last-child td { border-bottom: 0; }
  table.om-sample td.sel { color: var(--ink); font-weight: 600; white-space: normal; min-width: 170px; }
  table.om-sample td.num { font-variant-numeric: tabular-nums; }

  .om-faq { max-width: 720px; margin-top: 1rem; }
  .om-faq details {
    border: 1px solid var(--rule); border-radius: var(--r-sm);
    background: var(--wash-2); margin-bottom: 0.5rem; padding: 0.85rem 1.1rem;
  }
  .om-faq summary {
    cursor: pointer; font-weight: 600; color: var(--ink); list-style: none;
  }
  .om-faq summary::-webkit-details-marker { display: none; }
  .om-faq details[open] summary { margin-bottom: 0.6rem; }
  .om-faq details p { margin: 0; font-size: 0.93rem; }

  .om-rg { font-size: 0.8rem; color: var(--ink-45); margin-top: 2rem; line-height: 1.6; }