/*
Theme Name: HavilahWin Ice Hockey
Theme URI: https://icehockey.havilahwin.com
Author: HavilahWin
Description: Ice hockey betting systems, powered by the Formline engine. A standalone theme for icehockey.havilahwin.com: NHL, NCAA and international hockey, with the moneyline, regulation three-way, puck line and hockey goal lines. Rule builder, prediction engine (Poisson + Dixon-Coles, Shin devigging, 26-signal layer), best picks, build-to-target accumulators, value bets, slip tracking, owner panel, PayPal + Flutterwave billing.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: formline
*/

/*
 * Fonts are enqueued from functions.php, not @import-ed here — an @import inside the
 * stylesheet blocks rendering until it resolves. For an EU-hosted site, self-host the
 * two families in assets/fonts/ and drop the remote handle entirely; a Google Fonts
 * request leaks visitor IPs to a third party.
 */

:root {
  /* HavilahWin Ice Hockey — The Sheet.
     Not football's navy. A cold near-black chrome, the goal light for the accent, ice for
     the secondary, and no rounded corners anywhere: this reads as a printed sheet where
     football reads as a dashboard.

     Contrast is measured, not estimated. Five values differ from the design handoff
     because they failed WCAG at the size they are used:
       caption  #8a8785 -> #6b6867   3.19:1 -> 4.94:1
       accent under white  #ec3013 -> #c8270e   4.20:1 -> 5.60:1
       state border  #b3b0ae -> #8f8c8a   2.16:1 -> 3.34:1
       body #3c3a38 promoted from undeclared use
       success #166043 added — the handoff had no positive colour, so "beating forecast"
       and "well under forecast" would both have been red. */

  --navy-900:#14171a; --navy-800:#1e2226; --navy-700:#2c3237; --dline:#2c3237;
  --canvas:#f3f2f2; --panel:#ffffff; --line:#d8d6d5; --line-2:#e9e8e7; --well:#f8f8f7;
  --ink:#201e1d; --ink-2:#3c3a38; --ink-3:#6b6867;

  /* The goal light replaces the sea blue. --sea is the accent everywhere in the shared
     components, so remapping it here re-skins the whole app in one place. */
  --sea:#c8270e; --sea-2:#ec3013; --sea-soft:#fff2ef;

  --win:#166043; --draw:#8a5a12; --loss:#b8250c;

  /* Ice, for overtime pips, modelled prices and the secondary series in charts. */
  --frost:#e4edf0; --frost-2:#c9dde3; --cold:#2a5f6e; --edge:#8f8c8a;

  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* Radius zero everywhere. The only exception is the logo mark. */
.hw-hockey .fl-card, .hw-hockey .fl-btn, .hw-hockey .fl-chip, .hw-hockey .fl-seg,
.hw-hockey .fl-seg button, .hw-hockey .fl-px, .hw-hockey .fl-pip, .hw-hockey .fl-badge,
.hw-hockey .fl-systab, .hw-hockey .fl-src, .hw-hockey .fl-out, .hw-hockey input,
.hw-hockey select, .hw-hockey .fl-slipcard { border-radius:0 !important; }

/* Sections are ruled, not shadowed. Nothing floats. */
.hw-hockey .fl-card { border:2px solid var(--ink); box-shadow:none; }
.hw-hockey .fl-btn-pri { background:var(--sea); }
.hw-hockey .fl-btn-pri:hover { background:#a81f09; }
.hw-hockey .fl-tab.on { border-bottom-color:var(--sea-2); }
.hw-hockey .fl-panetab.on { border-bottom-color:var(--sea-2); }
.hw-hockey .m, .hw-hockey .fl-mono { font-variant-numeric:tabular-nums; }

/* Overtime is a third outcome and takes a standings point, so it is neither a win nor a
   plain defeat. The letters are always drawn — colour never carries it alone. */
.hw-hockey .fl-pip.W  { background:var(--ink); color:#fff; border:0; }
.hw-hockey .fl-pip.L  { background:#fff; border:1px solid var(--edge); color:var(--ink-3); }
.hw-hockey .fl-pip.OT { background:var(--frost); border:1px solid var(--cold); color:var(--cold); font-size:7.5px; }

/* A price the engine made because no bookmaker offered one: pattern AND colour AND the
   word "model", so no single signal has to carry it. */
.hw-hockey .fl-px.modelled {
  background:repeating-linear-gradient(45deg,#f3f2f2 0 5px,#fff 5px 10px);
  border-color:var(--edge); }
.hw-hockey .fl-px.modelled .fl-px-v { color:var(--cold); font-style:normal; }


*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { background:var(--canvas); font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased; font-size:14px; }
a { color:var(--sea); text-decoration:none; }
a:hover { color:var(--sea-2); }
img { max-width:100%; display:block; }
:focus-visible { outline:2px solid var(--sea); outline-offset:2px; }

.m { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.cap { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.capd { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#6E88AB; }

/* shell */
.fl-app { width:100%; max-width:1440px; margin:0 auto; min-height:100vh; }
.fl-mast { background:var(--navy-900); height:54px; display:flex; align-items:stretch; gap:20px; padding:0 22px; position:relative; z-index:60; }
.fl-brand { display:flex; align-items:center; gap:9px; font-size:17px; font-weight:700; letter-spacing:-.02em; color:#fff; }
.fl-brand i { width:26px; height:26px; border-radius:6px; background:var(--sea); display:grid; place-items:center; gap:2px; padding:6px 5px; }
.fl-brand i span { display:block; height:2.5px; background:#fff; border-radius:2px; }
.fl-tab { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#93AAC8; padding:0 12px; display:flex; align-items:center; gap:6px; border:none; border-bottom:2px solid transparent; background:none; cursor:pointer; white-space:nowrap; }
.fl-tab:hover { color:#fff; }
.fl-tab.on { color:#fff; border-bottom-color:var(--sea-2); }
.fl-bar { background:var(--navy-800); border-bottom:1px solid var(--dline); height:44px; display:flex; align-items:stretch; position:relative; z-index:50; }
.fl-bar > div, .fl-bar > button { display:flex; align-items:center; gap:9px; padding:0 18px; border-right:1px solid var(--dline); white-space:nowrap; flex:none; background:none; border-top:0; border-bottom:0; border-left:0; cursor:pointer; font-family:var(--sans); color:#fff; }
.fl-body { display:flex; align-items:flex-start; }
.fl-main { flex:1; min-width:0; padding:20px 22px 60px; }
.fl-narrow { max-width:1060px; margin:0 auto; }

/* controls */
select.fl-chip, input.fl-chip, textarea.fl-chip {
  font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink); min-height:31px; padding:0 9px;
  background:var(--panel); border:1px solid var(--line); border-radius:5px; width:100%;
}
textarea.fl-chip { padding:10px; line-height:1.6; font-family:var(--sans); font-size:13px; resize:vertical; display:block; }
select.fl-chip { appearance:none; cursor:pointer; padding-right:22px;
  background:var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none'><path d='M0 0l4 5 4-5z' fill='%237C8DA5'/></svg>") no-repeat right 8px center; }
select.fl-chip:hover, input.fl-chip:hover { border-color:#B8C6D8; }
.fl-btn { font-family:var(--sans); font-weight:600; font-size:13px; border-radius:6px; border:1px solid transparent; cursor:pointer; height:34px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.fl-btn-pri { background:var(--sea); color:#fff; box-shadow:0 1px 2px rgba(13,23,39,.18); }
.fl-btn-pri:hover { background:#1259B0; }
.fl-btn-sec { background:var(--panel); color:var(--ink); border-color:var(--line); }
.fl-btn-sec:hover { border-color:#B8C6D8; background:var(--well); }
.fl-btn-dk { background:rgba(255,255,255,.09); color:#EAF1FA; border-color:rgba(255,255,255,.16); }
.fl-ico { width:31px; height:31px; border:1px solid var(--line); background:var(--panel); border-radius:5px; cursor:pointer; color:var(--ink-3); font-size:12px; display:grid; place-items:center; }
.fl-ico:hover { color:var(--sea); border-color:var(--sea); }
.fl-seg { display:flex; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.fl-seg button { border:none; cursor:pointer; font-family:var(--mono); font-size:11.5px; padding:6px 10px; background:var(--panel); color:var(--ink-2); }
.fl-seg button.on { background:var(--sea); color:#fff; font-weight:700; }
.fl-sw { width:38px; height:21px; border-radius:20px; border:none; cursor:pointer; position:relative; background:var(--line); }
.fl-sw.on { background:var(--sea); }
.fl-sw i { position:absolute; top:2.5px; left:2.5px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .15s; }
.fl-sw.on i { left:19px; }

/* surfaces */
.fl-card { background:var(--panel); border:1px solid var(--line); border-radius:9px; box-shadow:0 1px 3px rgba(13,23,39,.05); }
.fl-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.fl-tbl th { text-align:left; font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:500; padding:9px 12px; border-bottom:1px solid var(--line); }
.fl-tbl td { padding:9px 12px; border-bottom:1px solid var(--line-2); }
.fl-tbl tbody tr:hover { background:var(--well); }
.fl-bar-meter { height:5px; background:var(--line-2); border-radius:3px; overflow:hidden; }
.fl-bar-meter i { display:block; height:100%; background:var(--sea); }

/* fixtures */
.fl-fx { display:flex; align-items:center; gap:12px; padding:9px 13px 9px 10px; border-bottom:1px solid var(--line-2); border-left:3px solid transparent; }
.fl-fx:hover { background:var(--well); }
.fl-fx.fit { border-left-color:var(--sea); background:#F5FAFF; }
.fl-lg-head { display:flex; align-items:center; gap:11px; padding:9px 13px; background:var(--navy-800); border-radius:8px 8px 0 0; }
.fl-pip { position:relative; width:17px; height:17px; border-radius:4px; display:grid; place-items:center; font-family:var(--mono); font-size:9px; font-weight:700; color:#fff; cursor:default; }
.fl-pip.W { background:var(--win); } .fl-pip.D { background:var(--draw); } .fl-pip.L { background:var(--loss); }
.fl-pip .tip {
  position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%);
  background:var(--navy-900); color:#EAF1FA; padding:7px 10px; border-radius:6px; white-space:nowrap;
  font-family:var(--mono); font-size:10.5px; line-height:1.5; letter-spacing:0; text-transform:none;
  opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:60; box-shadow:0 6px 20px rgba(7,18,35,.28);
}
.fl-pip:hover .tip { opacity:1; }
.fl-price { width:50px; text-align:center; padding:4px 0 5px; border:1px solid var(--line); border-radius:5px; }
.fl-price.hot { border-color:#CFE1FB; background:var(--sea-soft); color:var(--sea); }

/* slip rail */
.fl-slip { width:328px; flex:none; background:var(--navy-900); color:#E7EDF4; padding:18px 18px 34px; position:sticky; top:0; align-self:flex-start; max-height:100vh; overflow:auto; min-height:100vh; }
.fl-slip.mini { width:54px; padding:16px 0; display:flex; flex-direction:column; align-items:center; gap:14px; }

/* modal */
.fl-modal { position:fixed; inset:0; background:rgba(7,18,35,.55); display:grid; place-items:center; z-index:200; padding:32px; }
.fl-modal > div { background:var(--panel); border-radius:12px; box-shadow:0 30px 80px rgba(7,18,35,.4); overflow:hidden; }

.fl-modal > div { max-width:min(94vw, 1000px); max-height:88vh; overflow:auto; }
.fl-tbl th, .fl-tbl td { white-space:nowrap; }
.fl-pip:focus-visible .tip { opacity:1; }
.fl-slip { scrollbar-width:thin; }

@media (max-width:900px) {
  .fl-body { flex-direction:column-reverse; }
  .fl-slip, .fl-slip.mini { width:100%; min-height:0; max-height:none; position:sticky; top:0; z-index:40; }
  .fl-slip.mini { flex-direction:row; justify-content:center; padding:10px; }
  .fl-mast { overflow-x:auto; height:auto; flex-wrap:wrap; padding:8px 14px; gap:10px; }
  .fl-bar { height:auto; flex-wrap:wrap; }
  .fl-bar > div, .fl-bar > button { padding:8px 12px; }
  .fl-main { padding:14px 12px 48px; }
  .fl-fx { flex-wrap:wrap; row-gap:6px; }
  /* Fixed inline widths are fine on a desk and wrong on a phone. */
  .fl-fx > div { width:auto !important; min-width:0; }
  .fl-fx > div:nth-child(2) { width:76px !important; flex:none; }
  .fl-card > div[style*="flex"] > div { min-width:0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}

.fl-footer-nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:18px; padding:0; margin:0; }
.fl-footer-nav a { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.fl-footer-nav a:hover { color:var(--sea); }

/* ============================================================ v7.9.4 components
   Systems builder, slips, ledger and the motion layer. Everything here respects
   prefers-reduced-motion: animation is a way of showing what changed, never a
   requirement for reading the page. */

/* -- motion ------------------------------------------------------------------ */
@keyframes fl-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes fl-fade { from { opacity:0; } to { opacity:1; } }
@keyframes fl-pop  { 0% { transform:scale(.86); } 60% { transform:scale(1.06); } 100% { transform:scale(1); } }
@keyframes fl-sweep { from { background-position:-180% 0; } to { background-position:180% 0; } }
@keyframes fl-count { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

.fl-rise { animation:fl-rise .34s cubic-bezier(.22,.68,.36,1) both; }
.fl-card { transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.fl-btn { transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.fl-btn:active { transform:translateY(1px); }
.fl-ico { transition:background .15s ease, color .15s ease, transform .15s ease; }
.fl-ico:hover { transform:rotate(90deg); }
.fl-seg button { transition:background .15s ease, color .15s ease; }
.fl-fx { transition:background .16s ease, border-left-color .16s ease; }
.fl-pip { transition:transform .14s ease; }
.fl-pip:hover, .fl-pip:focus-visible { transform:translateY(-2px) scale(1.12); z-index:3; }
.fl-pip .tip { transition:opacity .14s ease, transform .14s ease; transform:translate(-50%,4px); }
.fl-pip:hover .tip, .fl-pip:focus-visible .tip { transform:translate(-50%,0); }
.fl-busy { background:linear-gradient(90deg,var(--line-2) 25%,var(--panel) 50%,var(--line-2) 75%);
  background-size:180% 100%; animation:fl-sweep 1.15s linear infinite; }

@media (prefers-reduced-motion:reduce) {
  .fl-rise, .fl-busy { animation:none; }
  * { transition-duration:.01ms !important; }
  .fl-ico:hover, .fl-pip:hover { transform:none; }
}

/* -- systems: tabs ----------------------------------------------------------- */
.fl-sys-tabs { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:14px; }
.fl-systab { display:flex; align-items:center; gap:9px; padding:9px 14px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:8px; font:600 13.5px var(--sans);
  color:var(--ink-2); transition:border-color .15s ease, color .15s ease, background .15s ease; }
.fl-systab:hover { border-color:var(--sea); color:var(--ink); }
.fl-systab.on { border-color:var(--sea); color:var(--sea); background:#F5FAFF; box-shadow:inset 0 -2px 0 var(--sea); }
.fl-systab-n { font-size:10px; letter-spacing:.08em; color:var(--ink-3); }
.fl-systab-b { font-size:10px; padding:2px 7px; border-radius:20px; background:var(--sea); color:#fff; animation:fl-pop .3s ease both; }
.fl-systab-tpl { margin-left:auto; }

/* -- systems: builder -------------------------------------------------------- */
.fl-title-input { border:0; background:none; padding:0; width:100%;
  font:700 19px var(--sans); letter-spacing:-.02em; color:var(--ink); }
.fl-title-input:focus { outline:none; box-shadow:0 2px 0 var(--sea); }
.fl-sys-desc { font-size:12.5px; color:var(--ink-2); line-height:1.6; margin-top:5px; max-width:62ch; }
.fl-bignum { font-size:34px; font-weight:700; line-height:1; color:var(--sea); animation:fl-count .3s ease both; }
.fl-cond { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  padding:13px 18px; border-bottom:1px solid var(--line-2); background:var(--well); }
.fl-cond:hover { background:#F3F7FC; }
.fl-cond-n { font-size:10.5px; color:var(--ink-3); align-self:center; width:20px; }
.fl-field { display:flex; flex-direction:column; gap:4px; }
.fl-hint { font-size:11px; color:var(--ink-3); padding-bottom:9px; }
.fl-pass { font-size:11px; color:var(--ink-3); padding-bottom:9px; }
.fl-funnel { font-size:11.5px; color:var(--ink-3); letter-spacing:.02em; }

/* -- systems: fixture rows --------------------------------------------------- */
.fl-fx.picked { background:#EEF6FF; border-left-color:var(--sea); }
.fl-check { width:17px; height:17px; accent-color:var(--sea); cursor:pointer; }
.fl-fx-name { border:0; background:none; padding:0; cursor:pointer; text-align:left;
  font:600 14.5px var(--sans); letter-spacing:-.015em; color:var(--ink); }
.fl-fx-name:hover { color:var(--sea); }
.fl-fitbadge { font-size:10px; padding:2px 8px; border-radius:20px; background:var(--sea); color:#fff; }
.fl-px { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:52px;
  padding:5px 7px; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.fl-px.on { border-color:var(--sea); background:#F0F7FF; }
.fl-px.modelled .fl-px-v { color:var(--ink-3); font-style:italic; }
.fl-px-l { font-size:9px; letter-spacing:.06em; color:var(--ink-3); }
.fl-px-v { font-size:12.5px; font-weight:700; }

/* -- slips ------------------------------------------------------------------- */
.fl-h1 { font:700 27px var(--sans); letter-spacing:-.03em; margin:2px 0 0; }
.fl-badge { font-size:9.5px; letter-spacing:.1em; padding:3px 9px; border-radius:4px; color:#fff; }
.fl-leg { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 16px; border-bottom:1px solid var(--line-2); }
.fl-leg:last-child { border-bottom:0; }
.fl-legres { width:19px; height:19px; border-radius:4px; display:grid; place-items:center;
  font-size:9.5px; font-weight:700; flex:none; }

/* -- owner: stats and ledger ------------------------------------------------- */
.fl-stat { padding:14px 18px; border-right:1px solid var(--line-2); flex:1; min-width:132px; }
.fl-stat:last-child { border-right:0; }
.fl-stat-v { font-size:23px; font-weight:700; line-height:1; margin-top:4px; animation:fl-count .3s ease both; }
.fl-stat-s { font-size:10.5px; color:var(--ink-3); margin-top:5px; }
.fl-scroll { overflow:auto; }
.fl-scroll::-webkit-scrollbar { width:9px; height:9px; }
.fl-scroll::-webkit-scrollbar-thumb { background:var(--line); border-radius:6px; }
.fl-scroll::-webkit-scrollbar-thumb:hover { background:#B8C6D8; }
.fl-scroll thead th { position:sticky; top:0; background:var(--panel); z-index:2; }
.fl-src { font-size:9.5px; letter-spacing:.08em; padding:3px 8px; border-radius:4px; }
.fl-out { font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:4px; color:#fff; }

/* -- checkout ---------------------------------------------------------------- */
.fl-charge { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:13px; padding:11px 13px; background:var(--well); border:1px solid var(--line); border-radius:8px; }
.fl-charge-v { font-size:19px; font-weight:700; }
.fl-gw { width:100%; height:auto; padding:14px 15px; justify-content:flex-start; gap:13px; }
.fl-gw:hover { border-color:var(--sea); }
.fl-gw-mark { width:34px; height:34px; border-radius:7px; display:grid; place-items:center;
  color:#fff; font:700 17px var(--sans); font-style:italic; flex:none; }
.fl-gw-slot { display:flex; align-items:center; justify-content:flex-start;
  width:112px; height:34px; flex:none; }
.fl-gw-mark-img { max-width:112px; height:26px; width:auto; object-fit:contain;
  object-position:left center; display:block; }
@media (max-width:420px) {
  .fl-gw-slot { width:92px; }
  .fl-gw-mark-img { max-width:92px; height:22px; }
}

@media (max-width:720px) {
  .fl-cond { gap:10px; }
  .fl-stat { min-width:50%; border-right:0; border-bottom:1px solid var(--line-2); }
  .fl-px { min-width:44px; }
}

/* ====================================================== v7.9.5 app shell & mobile
   The app is used on a phone far more than on a desktop, and it was laid out the other
   way round: a scrolling tab strip that hid its own destinations, tables that forced
   horizontal panning, and controls below the comfortable thumb reach. */

.fl-app { min-height:100dvh; }
body { overscroll-behavior-y:none; -webkit-tap-highlight-color:transparent; }
@supports (padding:env(safe-area-inset-left)) {
  .fl-mast, .fl-bar { padding-left:max(14px,env(safe-area-inset-left));
                        padding-right:max(14px,env(safe-area-inset-right)); }
}

/* Bottom navigation — phones only. */
.fl-bottomnav { display:none; }
@media (max-width:820px) {
  .fl-bottomnav {
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    display:grid; grid-template-columns:repeat(5,1fr);
    background:var(--navy-900); border-top:1px solid rgba(255,255,255,.08);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 22px rgba(7,18,35,.28);
  }
  .fl-bn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    border:0; background:none; cursor:pointer; padding:9px 4px 8px; color:#8FA8C7;
    min-height:56px; font-family:var(--sans); transition:color .15s ease; }
  .fl-bn.on { color:#fff; box-shadow:inset 0 2px 0 var(--sea); }
  .fl-bn.locked { opacity:.45; }
  .fl-bn-i { font-size:16px; line-height:1; }
  .fl-bn-l { font-size:10px; letter-spacing:.02em; }
  /* The top tab strip is hidden, not duplicated. */
  .fl-mast nav[role="tablist"] { display:none; }
  .fl-body { padding-bottom:78px; }
  .fl-main { padding:14px 14px 0; }
}

/* Touch targets and phone layout. */
@media (max-width:820px) {
  .fl-btn, .fl-ico, .fl-seg button, .fl-systab { min-height:42px; }
  .fl-check { width:22px; height:22px; }
  .fl-card { border-radius:12px; }
  .fl-h1 { font-size:23px; }
  .fl-bar { overflow-x:auto; gap:8px; scrollbar-width:none; }
  .fl-bar::-webkit-scrollbar { display:none; }
  /* Tables scroll inside their own card rather than widening the page. */
  .fl-scroll, .fl-card > table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .fl-seg { overflow-x:auto; scrollbar-width:none; }
  .fl-seg::-webkit-scrollbar { display:none; }
  .fl-stat { min-width:calc(50% - 1px); }
}

/* Fixture rows reflow instead of clipping. */
@media (max-width:640px) {
  .fl-fx { align-items:flex-start; padding:11px 12px; }
  .fl-fx > div:nth-child(2) { width:66px !important; }
  .fl-px { min-width:0; flex:1; padding:5px 4px; }
  .fl-px-v { font-size:11.5px; }
  .fl-pip { width:15px; height:15px; font-size:8px; }
  .fl-cond { padding:12px; }
  .fl-field { flex:1 1 128px; }
  .fl-leg > span:nth-child(3) { width:auto !important; flex:1 1 100%; }
  .fl-slip .fl-badge { order:-1; }
}

/* Tooltips flip to the right edge rather than off-screen on a narrow viewport. */
@media (max-width:640px) {
  .fl-pip .tip { left:0; transform:translate(0,4px); max-width:64vw; white-space:normal; }
  .fl-pip:hover .tip, .fl-pip:focus-visible .tip { transform:translate(0,0); }
}

/* Installed-app mode: no browser chrome, so the top bar carries the status area. */
@media (display-mode:standalone) {
  .fl-mast { padding-top:max(10px,env(safe-area-inset-top)); }
}

/* Install affordance. */
.fl-install { white-space:nowrap; }
.fl-iosnote { display:flex; align-items:center; gap:12px; padding:11px 16px;
  background:#0F2136; color:#CFE0F5; font-size:12.5px; line-height:1.55;
  border-bottom:1px solid rgba(255,255,255,.08); }
.fl-iosnote .fl-ico { background:none; border-color:rgba(255,255,255,.2); color:#CFE0F5; flex:none; }
@media (max-width:820px) { .fl-install { padding:0 10px; font-size:12px; } }

/* Phone safety net.
   Most inline widths in the app sit inside wrapping flex rows, so they reflow rather than
   overflow. These are the ones that do not: form controls given a desk-sized width, and
   the slip leg columns. A single stray fixed width produces a horizontal scrollbar on the
   whole document, which is the difference between "responsive" and "shrunk". */
@media (max-width:640px) {
  input.fl-chip, select.fl-chip, textarea.fl-chip { max-width:100%; }
  .fl-field { min-width:0; }
  .fl-cond > .fl-field select.fl-chip { min-width:0; width:100%; }
  .fl-leg > span[style*="width:"] { width:auto !important; }
  .fl-charge { flex-wrap:wrap; }
  .fl-card > div[style*="min-width"] { min-width:0 !important; }
  input[type="range"] { width:100% !important; }
}
/* Nothing may widen the document itself. overflow-x is set on the wrapper, not on body,
   because clipping body breaks position:sticky for the slip rail and table headers. */
.fl-app { overflow-x:clip; }
@supports not (overflow:clip) { .fl-app { overflow-x:hidden; } }

/* ============================================== v7.9.7 engine performance panels */
.fl-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; align-items:start; }
@media (max-width:900px) { .fl-grid2 { grid-template-columns:1fr; } }

.fl-cardhead { display:flex; align-items:baseline; flex-wrap:wrap;
  padding:13px 16px; border-bottom:1px solid var(--line-2); font-size:14.5px; font-weight:700; }

.fl-mkt { padding:11px 16px; border-bottom:1px solid var(--line-2); }
.fl-mkt:last-child { border-bottom:0; }
.fl-mkt:hover { background:var(--well); }
.fl-mkt.thin { opacity:.48; }
.fl-mkt .fl-bar-meter { height:6px; }
.fl-mkt .fl-bar-meter i { transition:width .45s cubic-bezier(.22,.68,.36,1); }

.fl-note { margin:0; padding:11px 16px; font-size:11.5px; line-height:1.6; color:var(--ink-3); }

@media (max-width:640px) {
  .fl-mkt { padding:11px 12px; }
  .fl-cardhead { padding:12px; }
}

/* ================================================== v7.12 mobile shell, properly
   Written against real screenshots rather than assumption. Three things made the
   phone layout unusable and all three were inline styles winning over this file. */

/* The tab strip is a class now, so it can actually be hidden. */
.fl-tabs { display:flex; align-items:stretch; overflow-x:auto; scrollbar-width:none; }
.fl-tabs::-webkit-scrollbar { display:none; }
.fl-mast-right { display:flex; align-items:center; gap:10px; padding-left:12px; }
.fl-tierbadge { font-size:9.5px; letter-spacing:.12em; padding:5px 9px; background:rgba(255,255,255,.1); }
.fl-stat-v.long { font-size:15px; line-height:1.3; word-break:break-word; }

/* Collapsible filters. Open by default on a desk, closed on a phone. */
.fl-filtertoggle { display:none; }
.fl-filtercount { font-size:10px; padding:2px 7px; border-radius:20px; background:var(--sea); color:#fff; }

@media (max-width:820px) {
  /* One masthead row: identity and account. Everything else lives a tap away. */
  .fl-mast { height:auto; padding:8px 12px; gap:10px; flex-wrap:nowrap; align-items:center; overflow:visible; }
  .fl-tabs { display:none; }
  .fl-deskonly { display:none !important; }
  .fl-mast-right { padding-left:0; margin-left:auto; gap:6px; }

  /* The pool bar: one compact scrolling line, not three stacked. */
  .fl-bar { flex-wrap:nowrap; overflow-x:auto; height:auto; padding:7px 12px; gap:6px; }
  .fl-bar > div, .fl-bar > button { padding:5px 9px; white-space:nowrap; flex:none; }
  .fl-bar .capd { font-size:9px; }

  /* The slip belongs at the bottom, in thumb reach — and only when it holds something. */
  .fl-body { flex-direction:column; }
  .fl-slip.mini.empty { display:none; }
  .fl-slip.mini {
    position:fixed; left:0; right:0; bottom:calc(56px + env(safe-area-inset-bottom));
    z-index:45; width:auto; min-height:0; max-height:none; padding:0;
    background:var(--sea); border-top:1px solid rgba(255,255,255,.15);
    box-shadow:0 -6px 18px rgba(7,18,35,.25);
  }
  .fl-slipopen { display:flex; align-items:center; gap:11px; width:100%;
    border:0; background:none; cursor:pointer; padding:12px 16px; color:#fff;
    font-family:var(--sans); font-size:13.5px; text-align:left; }
  .fl-slipcount { min-width:22px; height:22px; border-radius:11px; display:grid; place-items:center;
    background:rgba(255,255,255,.22); font-size:11px; font-weight:700; }
  .fl-sliptext { flex:1; }
  .fl-slipodds { font-size:14px; font-weight:700; }
  .fl-slip:not(.mini) { width:100%; position:static; border-radius:12px; margin-bottom:12px; }

  /* Filters collapse. The results are what the page is for. */
  .fl-filtertoggle { display:flex; align-items:center; gap:10px; width:100%;
    padding:12px 14px; margin-bottom:12px; cursor:pointer;
    background:var(--panel); border:1px solid var(--line); border-radius:10px; }
  .fl-filters:not(.open) .fl-filterbody { display:none; }

  .fl-main { padding:12px 12px 0; }
  .fl-body { padding-bottom:86px; }
}

/* The collapsed slip sits above the bottom bar; give it room. */
@media (max-width:820px) { .fl-bottomnav { min-height:56px; } }

@media (max-width:560px) {
  .fl-mast { padding:7px 10px; }
  .fl-h1 { font-size:21px; }
  .fl-stat { min-width:calc(50% - 1px); padding:11px 12px; }
  .fl-stat-v { font-size:20px; }
  .fl-card { border-radius:10px; }
}

/* Pick and value rows on a phone.
   Six fixed pixel widths inside a wrapping flex row produced the scattered layout in
   testing: a selection stranded on the far right, a price orphaned on its own line. The
   widths are overridden and the children reordered into two readable lines:

     [✓] [date]  Fixture name            price
         Selection
         confidence meter   edge   source                                            */
@media (max-width:640px) {
  .fl-fx-pick { flex-wrap:wrap; row-gap:7px; column-gap:10px; padding:13px 12px; align-items:center; }
  .fl-fx-pick > * { width:auto !important; min-width:0 !important; }
  .fl-fx-pick > :nth-child(1) { order:1; flex:none; }
  .fl-fx-pick > :nth-child(2) { order:2; flex:none; min-width:54px !important; }
  .fl-fx-pick > :nth-child(3) { order:3; flex:1 1 auto; }
  .fl-fx-pick > :nth-child(8) { order:4; flex:none; margin-left:auto; font-size:16px; }
  .fl-fx-pick > :nth-child(4) { order:5; flex:1 1 100%; }
  .fl-fx-pick > :nth-child(5) { order:6; flex:1 1 55%; }
  .fl-fx-pick > :nth-child(6) { order:7; flex:none; text-align:left !important; }
  .fl-fx-pick > :nth-child(7) { order:8; flex:none; }
  /* The date reads as one line, not three stacked words. */
  .fl-fx-pick > :nth-child(2) > div { display:inline; }
  .fl-fx-pick > :nth-child(2) > div + div::before { content:' · '; }
}

/* The pool bar on a phone carries three useful controls and one status line that is not
   actionable. The status goes; the controls stay on one scrolling line. */
@media (max-width:820px) {
  .fl-bar-gap, .fl-bar-feed { display:none; }
}

/* =================================================== v7.12.2 layout corrections */

/* My slips cards. Previously these carried .fl-slip — the bet slip RAIL — and inherited a
   fixed 328px navy sticky column, which is why the page was unusable on a desk and only
   looked right on a phone, where a mobile override reset the width by accident. */
.fl-slipcard { margin-bottom:14px; overflow:hidden; }
.fl-slipcard .fl-leg > span:nth-child(3) { flex:1 1 200px; }
@media (min-width:821px) {
  .fl-slipcard .fl-leg { padding:10px 18px; }
  .fl-slipcard .fl-leg > span:nth-child(2) { flex:1 1 220px; }
  .fl-slipcard .fl-leg > span:nth-child(4) { width:96px; text-align:right; }
  .fl-slipcard .fl-leg > span:nth-child(5) { width:72px; }
}

/* Stat strips lay out as a grid rather than five cells fighting over 390px. */
.fl-statgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.fl-statgrid > .fl-stat { min-width:0; }
@media (max-width:640px) {
  .fl-statgrid { grid-template-columns:1fr 1fr; }
  .fl-statgrid > .fl-stat:nth-child(odd) { border-right:1px solid var(--line-2); }
  .fl-statgrid > .fl-stat { border-bottom:1px solid var(--line-2); }
}

/* The systems builder on a phone. */
@media (max-width:820px) {
  /* Templates sat alone on its own line because of margin-left:auto. */
  .fl-systab-tpl { margin-left:0; }
  .fl-sys-tabs { gap:7px; }
  .fl-systab { padding:8px 11px; font-size:13px; }

  /* The scan counter read as a stray dash beside the words "NOT RUN YET". */
  .fl-bignum { font-size:26px; }
  .fl-cond { padding:12px 12px 14px; gap:10px 12px; }
  .fl-field { flex:1 1 calc(50% - 6px); min-width:0; }
  .fl-cond .fl-hint { flex:1 1 100%; padding-bottom:0; }
  .fl-cond > .fl-ico { margin-left:auto; }
  .fl-cond-n { flex:0 0 100%; }

  /* The day stepper does not need to be a 42px slab on each side. */
  .fl-bar .fl-ico { min-height:32px; width:32px; padding:0; }
}

/* Build to target chrome: the target ladder scrolls rather than wrapping to three rows. */
@media (max-width:820px) {
  .fl-target-row { display:flex; gap:9px; align-items:center; }
  .fl-target-row .fl-seg { overflow-x:auto; flex:1; }
}

/* Page headers: title on the left, controls on the right, stacking cleanly when narrow. */
.fl-pagehead { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:13px; }
.fl-pagehead-t { flex:1; min-width:180px; }
.fl-target-row { display:flex; gap:9px; align-items:center; }
@media (max-width:820px) {
  .fl-pagehead { gap:11px; }
  .fl-pagehead-t { flex:1 1 100%; }
  .fl-target-row { flex:1 1 100%; }
  .fl-target-row .fl-seg { flex:1; overflow-x:auto; scrollbar-width:none; }
  .fl-target-row .fl-seg::-webkit-scrollbar { display:none; }
  .fl-target-row .fl-btn { flex:none; }
}

/* ============================================ v7.12.3 auth, overflow, conditions */

/* iOS inflates text inside any block wider than the viewport. Combined with a card that
   was overflowing, the explanatory notes on the owner page rendered at roughly three times
   their size. Turning the heuristic off means the type is the size it is declared to be. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* Nothing may push its own card wider than the screen. Scroll containers scroll; they do
   not stretch their parent and get clipped by the app wrapper. */
.fl-scroll { max-width:100%; }
.fl-tbl { width:100%; }

/* Sign in and create account.
   The form is the reason anyone is on this screen, so on a phone it comes first and the
   marketing panel follows, reduced to the three figures that are actually informative. */
.fl-authgrid { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr;
  border:1px solid var(--line); background:var(--panel); overflow:hidden; border-radius:12px; }
.fl-authside { background:var(--navy-900); color:#E7EDF4; padding:34px 36px;
  display:flex; flex-direction:column; justify-content:space-between; gap:32px; }
.fl-authstats { display:flex; flex-wrap:wrap; gap:24px; }
.fl-authpane { padding:34px 36px; }
@media (min-width:821px) {
  .fl-authgrid { grid-template-columns:1fr 1fr; }
}
@media (max-width:820px) {
  .fl-authgrid { border-radius:12px; }
  .fl-authpane { order:1; padding:24px 20px; }
  .fl-authside { order:2; padding:22px 20px; gap:18px; }
  .fl-authside h2 { font-size:20px !important; }
  .fl-authside p { font-size:13px !important; }
  .fl-authstats { gap:18px; }
  .fl-authgrid input { width:100%; box-sizing:border-box; }
}

/* Market accuracy rows: the figures earn their own line rather than being pushed off. */
.fl-mkt-gap { flex:1; min-width:10px; }
.fl-mkt-fig { font-size:13px; font-weight:700; }
.fl-mkt-vs { font-size:11px; color:var(--ink-3); }
@media (max-width:560px) {
  .fl-mkt-gap { display:none; }
  .fl-mkt-fig { margin-left:auto; }
  .fl-mkt-vs { flex:1 1 100%; }
}

/* Condition rows read as small cards: a header line that carries the number, how many
   fixtures pass and the delete control, then the fields two-up beneath it. */
@media (max-width:820px) {
  .fl-cond { position:relative; padding:34px 12px 14px; }
  .fl-cond-n { position:absolute; top:11px; left:12px; flex:0 0 auto; }
  .fl-cond > .fl-pass { position:absolute; top:11px; right:46px; padding-bottom:0; }
  .fl-cond > .fl-ico { position:absolute; top:6px; right:8px; margin:0; }
  .fl-cond .fl-hint { flex:1 1 100%; padding-bottom:0; margin-top:-4px; }
}

/* Responsive grids, stated rather than inferred.
   `repeat(auto-fit, minmax(Npx, 1fr))` asks the browser to work out the track count from
   the available width. On the phone the sign-in grid resolved to two 320px tracks inside a
   390px viewport and pushed the form off the screen, where the app wrapper clipped it — so
   the form could not be reached at all. Rather than work out which engine was right, these
   now say what they mean: one column until there is genuinely room for two. */
.fl-autogrid { display:grid; grid-template-columns:1fr; }
@media (min-width:560px)  { .fl-autogrid.g220 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } }
@media (min-width:600px)  { .fl-autogrid.g240 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } }
@media (min-width:620px)  { .fl-autogrid.g250 { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); } }
@media (min-width:640px)  { .fl-autogrid.g260 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } }

/* Wordmark: HavilahWin, with the sport beside it rather than inside it. The brand stays one
   thing across every sport and only the trailing word changes. */
.fl-wordmark { display:inline-flex; align-items:baseline; gap:7px; }
.fl-wordmark .accent { color:var(--sea-2); }
.fl-sportmark { font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#8FA8C7; font-weight:500; }
@media (max-width:560px) { .fl-sportmark { display:none; } }

/* Form pips. Three states because hockey has three: an overtime loss takes a point, so it
   is neither a win nor a plain defeat. The letter is always drawn — colour never carries
   the meaning alone. */
.fl-pips { display:flex; gap:2px; }
.fl-pip.OT { background:var(--sea-soft); border:1px solid var(--sea); color:var(--sea); font-size:7.5px; }
.hk .fl-pip.W  { background:var(--hk-ink); color:#fff; border:0; }
.hk .fl-pip.L  { background:#fff; border:1px solid var(--hk-edge); color:var(--hk-ink-3); }
.hk .fl-pip.OT { background:var(--hk-frost); border:1px solid var(--hk-cold); color:var(--hk-cold); }

/* ============================================ v8.4 systems panes & new system */

/* Builder | Results. Two panes rather than one long scroll: a builder tall enough to write
   a rule in pushes every result off a phone screen otherwise. Both are visible from 1024
   up, where there is room for them side by side. */
.fl-panetabs { display:flex; gap:0; margin-bottom:14px; border-bottom:2px solid var(--line); }
.fl-panetab { display:flex; align-items:center; gap:8px; padding:0 18px; min-height:44px;
  border:0; border-bottom:3px solid transparent; background:none; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:-2px; transition:color .15s ease, border-color .15s ease; }
.fl-panetab:hover { color:var(--ink); }
.fl-panetab.on { color:var(--ink); border-bottom-color:var(--sea); }
.fl-panetab-n { font-size:10px; padding:2px 7px; border-radius:20px; background:var(--sea); color:#fff; }
.fl-pane { display:none; }
.fl-pane.on { display:block; }

@media (min-width:1024px) {
  /* Room for both, so the tabs stop being a switch and become labels. */
  .fl-panetabs { display:none; }
  .fl-pane { display:block; }
}

.fl-systab-new { border-style:dashed; }
.fl-systab-new:hover { border-style:solid; }
.hk .fl-panetab.on { border-bottom-color:var(--hk-goal); color:var(--hk-ink); }
.hk .fl-panetab-n { background:var(--hk-goal-fill); border-radius:0; }

/* ===================================================== The Sheet — components
   Built from the Claude Design phone and desktop prototypes. The prototypes express
   everything as inline styles, which is how mockups are made and not how a theme can
   ship — an inline rule outranks every stylesheet and that is precisely what broke the
   football build three times. So these are the same treatments, expressed as classes. */

/* -- the goalie band ---------------------------------------------------------
   The loudest element on the screen, because no individual moves a hockey price the way
   a starting goaltender does. A red left rule, a solid red exclamation, and the count of
   affected fixtures in the accent — never a small grey chip. */
.hk-goalie {
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 12px; background:#fff;
  border-bottom:1px solid var(--line); border-left:4px solid var(--sea-2);
}
.hk-goalie-mark {
  width:18px; height:18px; flex:none; text-align:center;
  background:var(--sea-2); color:#fff;
  font:800 12px/18px var(--sans);
}
.hk-goalie-head {
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--loss);
}
.hk-goalie-body { font:500 12px/1.45 var(--sans); color:var(--ink-2); margin-top:3px; }

/* -- price cells -------------------------------------------------------------
   Two-way is HEAVY: its own button, 2px ink border. Three-way regulation is LIGHT: one
   hairline strip divided by rules, with the tie in accent and stamped 3-way · 60 min.
   Different objects, never the same column — a customer who backs a two-way thinking it
   was regulation has been misled by the design, and that mistake costs real money. */
.hk-px2 {
  display:flex; flex-direction:column; gap:2px;
  padding:7px 9px; background:#fff; border:2px solid var(--ink); min-width:74px;
}
.hk-px2 .lab { font-family:var(--mono); font-size:9px; color:var(--ink-3); }
.hk-px2 .val { font-family:var(--mono); font-size:15px; font-weight:700; }

.hk-px3 { display:flex; background:#fff; border:1px solid var(--edge); }
.hk-px3 > div { flex:1; padding:7px 9px; border-right:1px solid var(--line); }
.hk-px3 > div:last-child { border-right:0; }
.hk-px3 .lab { font-family:var(--mono); font-size:9px; color:var(--ink-3); }
.hk-px3 .val { font-family:var(--mono); font-size:14px; }
.hk-px3 .tie .lab, .hk-px3 .tie .val { color:var(--loss); }
.hk-px3-stamp {
  font-family:var(--mono); font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-top:4px;
}

/* A price the engine made because no book offered one: hatch, colour AND the word. */
.hk-pxm {
  background:repeating-linear-gradient(45deg,#f3f2f2 0 5px,#fff 5px 10px);
  border:2px solid var(--edge);
}
.hk-pxm .lab, .hk-pxm .val { color:var(--cold); }

/* -- captioned field, the design's basic unit -------------------------------
   Every control carries its caption above it. In this direction the captioned fields ARE
   the sentence, which is why the plain-English rule is a summary rather than the hero. */
.hk-cap {
  font-family:var(--mono); font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.hk-fields { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-top:10px; }
@media (max-width:560px) { .hk-fields { grid-template-columns:1fr 1fr; } }
.hk-fields .v { font:600 12px var(--sans); margin-top:3px; }

/* -- the rule summary, in a frost box ---------------------------------------- */
.hk-rule-box {
  background:var(--frost); border-left:3px solid var(--cold);
  padding:12px 14px; font:500 16px/1.5 var(--sans); color:var(--ink);
}

/* -- fit counter and funnel -------------------------------------------------- */
.hk-fit { font-family:var(--mono); font-size:34px; font-weight:700; line-height:1; color:var(--sea); }
.hk-fit-cap { font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.4; }
.hk-funnel { font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.02em; }

/* -- thin evidence: 42% opacity, an em dash, and NO verdict at all ------------
   The most distinctive thing about this product. Row height stays identical to a normal
   row so it reads as deliberate rather than broken. */
.hk-thin { opacity:.42; }
.hk-thin .verdict { visibility:hidden; }

/* -- motion: every animation shows a change ---------------------------------- */
@keyframes hkgoal { 0%{box-shadow:0 0 0 0 rgba(236,48,19,.55)} 100%{box-shadow:0 0 0 12px rgba(236,48,19,0)} }
@keyframes hkfill { from{width:0} }
.hk-won-pulse { animation:hkgoal 400ms var(--hk-ease,ease-out) 1; }
.hw-hockey .fl-bar-meter i { animation:hkfill 320ms cubic-bezier(.22,.68,.36,1) both; }
@media (prefers-reduced-motion:reduce) { .hk-won-pulse, .hw-hockey .fl-bar-meter i { animation:none; } }

/* The price strip lays out as a row on a desk and wraps to a grid on a phone, so a
   two-way button never ends up beside half a three-way strip. */
.hk-prices { display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap; }
.hk-px3wrap { min-width:190px; }
.hk-px2.on { box-shadow:inset 0 0 0 3px var(--ink); }
@media (max-width:640px) {
  .hk-prices { display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%; }
  .hk-px3wrap { grid-column:1 / -1; min-width:0; }
  .hk-px2 { min-width:0; }
}