:root{
    --bg:#F2EFE9;
    --bg2:#FFFFFF;
    --panel:#FFFFFF;
    --panel-hi:#f5f1ea;
    --ink:#251B15;
    --ink-dim:#7a6a5b;
    --ink-faint:#9F8E7D;
    --line:rgba(159,142,125,.28);
    --amber:#2D4A3E;
    --amber-deep:#1f362c;
    --teal:#2f6f66;
    --rust:#b04a26;
    --green:#40794f;
    --blue:#3f6c8c;
    --shadow:0 18px 40px -18px rgba(37,27,21,.16);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--ink);font-family:'Spline Sans Mono',monospace;-webkit-font-smoothing:antialiased}
  body{
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(45,74,62,.07), transparent 60%),
      radial-gradient(900px 500px at 0% 110%, rgba(47,111,102,.06), transparent 55%),
      var(--bg);
    min-height:100vh;
    padding:clamp(18px,4vw,52px);
  }
  .grain{position:fixed;inset:0;pointer-events:none;opacity:.025;z-index:99;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  header{max-width:1500px;margin:0 auto 30px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:36px;
    border-bottom:1px solid var(--line);padding-bottom:28px;position:relative}

  /* r14 — persistent My Saved Waters slot, injected by engine.js INSIDE the
     header, absolutely positioned so it sits even with the eyebrow line
     ("Live USGS Streamflow Data For") at the right edge — no extra vertical
     space. top:18px centers the pill on the eyebrow: home-link row (~13px line
     + 1px pad + 1px border + 12px margin) puts the eyebrow's center ~33px down,
     minus half the 28px pill. On phones the pill compacts to star+count and
     the eyebrow gets right padding so the wide kicker wraps instead of
     colliding. Typography mirrors .home-link. */
  .topbar{position:absolute;top:18px;right:0}
  .my-favs-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    color:var(--amber);border:1px solid var(--line);border-radius:999px;padding:8px 15px;
    transition:.15s;white-space:nowrap;line-height:1}
  a.my-favs-link:hover{border-color:var(--amber-deep);transform:translateY(-1px)}
  .my-favs-link .star{font-size:12px;line-height:1}
  .my-favs-link .n{color:var(--ink-dim)}
  .my-favs-link .n:empty{display:none}
  .my-favs-link.current{border-color:var(--amber-deep);cursor:default;
    background:linear-gradient(180deg,rgba(45,74,62,.14),rgba(31,54,44,.08))}
  @media(max-width:700px){
    .my-favs-link .txt{display:none}
    .my-favs-link{padding:8px 12px}
    .brand .eyebrow{padding-right:64px}
  }

  .home-link{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:600;color:var(--ink-faint);text-decoration:none;margin-bottom:12px;
    border-bottom:1px dotted var(--ink-faint);padding-bottom:1px;transition:.15s}
  .home-link:hover{color:var(--amber);border-bottom-color:var(--amber-deep)}
  .brand .eyebrow{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--amber);font-weight:600}
  .brand h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(30px,5vw,56px);line-height:1.02;color:#2D4A3E;
    letter-spacing:-.02em;margin-top:10px;max-width:20ch;text-wrap:balance}
  .brand h1 em{font-style:italic;font-weight:500;color:var(--ink-dim)}
  .brand p{color:var(--ink-faint);font-size:12.5px;margin-top:34px;max-width:46ch;line-height:1.55}
  .meta{text-align:right;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
  .refresh{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  button.act{background:var(--panel);border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:12px;
    padding:9px 15px;border-radius:8px;cursor:pointer;transition:.18s;letter-spacing:.04em;display:flex;align-items:center;gap:8px}
  button.act:hover{background:var(--panel-hi);border-color:var(--amber-deep)}
  /* Brief success state after a manual refresh completes — makes a fast
     fetch perceptible even when the gauge data is unchanged. */
  button.act.ok{border-color:var(--green);color:var(--green)}
  button.act.ok svg{stroke:var(--green)}
  /* Always-updating "last checked" stamp — ticks on every successful fetch
     regardless of whether any reading changed, so the refresh is never silent. */
  .checked{font-size:11px;color:var(--ink-faint);letter-spacing:.03em;
    margin-left:2px;white-space:nowrap;transition:color .18s}
  .checked.flash{color:var(--green)}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(64,121,79,.6);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(64,121,79,.5)}70%{box-shadow:0 0 0 7px rgba(64,121,79,0)}100%{box-shadow:0 0 0 0 rgba(64,121,79,0)}}

  .strip{
    max-width:1500px;margin:0 auto 24px;
    display:grid;
    grid-template-columns:1fr auto auto auto;
    grid-template-areas:"sub toggle legend search";
    align-items:center;
    column-gap:14px;
    row-gap:12px;
  }
  .strip .toggle{grid-area:toggle}
  .strip .legend{grid-area:legend}
  .strip .search{grid-area:search}
  .substrip{grid-area:sub;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .substrip.hidden{display:none}
  .subchip{font-size:11.5px;letter-spacing:.04em;color:var(--ink-dim);background:var(--bg2);
    border:1px solid var(--line);padding:7px 13px;border-radius:20px;cursor:pointer;
    transition:.14s;user-select:none;
    /* button reset — subchips are now real <button>s for keyboard access */
    font-family:inherit;appearance:none;line-height:1.2}
  .subchip:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
  .subchip:hover{color:var(--ink);border-color:var(--ink-faint)}
  .subchip.on{background:var(--amber);color:#FFFFFF;border-color:var(--amber);font-weight:600}

  /* Favorites chip — leads the region substrip */
  .subchip.fav{display:inline-flex;align-items:center;gap:7px}
  .subchip.fav .fav-star{font-size:12px;line-height:1;color:var(--ink-faint);transition:.14s}
  .subchip.fav:hover .fav-star{color:var(--amber)}
  .subchip.fav.has .fav-star{color:var(--amber)}
  .subchip.fav.on .fav-star{color:#FFFFFF}
  .subchip.fav .fav-count{font-size:10px;font-weight:600;letter-spacing:.04em;
    background:var(--bg2);border:1px solid var(--line);color:var(--ink-dim);
    border-radius:9px;padding:1px 6px;min-width:18px;text-align:center}
  .subchip.fav.on .fav-count{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.25);color:#FFFFFF}
  .subchip.fav .fav-count.zero{display:none}

  /* Per-card favorite toggle (top-right, beside the status pill) */
  .card .top-right{display:flex;align-items:center;gap:9px;flex-shrink:0}
  .fav-btn{appearance:none;background:transparent;border:none;cursor:pointer;
    font-size:17px;line-height:1;color:var(--ink-faint);padding:2px;margin:-2px;
    transition:transform .15s,color .15s;border-radius:6px}
  .fav-btn:hover{color:var(--amber);transform:scale(1.14)}
  .fav-btn.on{color:var(--amber)}
  .fav-btn:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}

  /* Favorites empty state — fishery-first copy, reuses the noresults footprint */
  .fav-empty{grid-column:1/-1;text-align:center;color:var(--ink-faint);padding:48px 20px;
    font-family:'Fraunces',serif}
  .fav-empty .big{font-style:italic;font-size:17px;color:var(--ink-dim);margin-bottom:10px}
  .fav-empty .sm{font-size:12px;font-family:'Spline Sans Mono',monospace;letter-spacing:.02em;line-height:1.7;color:var(--ink-faint)}
  .fav-empty .star-inline{color:var(--amber);font-style:normal}
  .fav-empty .sm a{color:var(--amber);text-decoration:none;border-bottom:1px dotted var(--amber-deep)}
  .fav-empty .sm a:hover{border-bottom-style:solid}

  /* r14 — cross-state note under a state page's Favorites view, linking to /favorites */
  .fav-cross{grid-column:1/-1;text-align:center;padding:22px 20px 10px;font-size:12px;
    font-family:'Spline Sans Mono',monospace;letter-spacing:.02em;color:var(--ink-faint)}
  .fav-cross .star-inline{color:var(--amber)}
  .fav-cross a{color:var(--amber);text-decoration:none;border-bottom:1px dotted var(--amber-deep)}
  .fav-cross a:hover{border-bottom-style:solid}
  .strip .search{background:var(--panel);border:1px solid var(--line);border-radius:9px;
    padding:2px 12px 2px 14px;min-width:210px;display:flex;align-items:center;gap:8px}
  .strip .search:focus-within{border-color:var(--amber-deep)}
  .strip .search svg{width:13px;height:13px;color:var(--ink-faint);flex-shrink:0}
  .strip .search input{background:transparent;border:none;outline:none;color:var(--ink);
    font-family:inherit;font-size:12.5px;padding:8px 0;flex:1;letter-spacing:.02em;min-width:0}
  .strip .search input::placeholder{color:var(--ink-faint)}
  .strip .search button{background:transparent;border:none;color:var(--ink-faint);
    font-size:18px;font-family:inherit;cursor:pointer;padding:0 2px;line-height:1}
  .strip .search button:hover{color:var(--ink)}
  .toggle{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
  .toggle input{appearance:none;width:24px;height:14px;background:var(--panel);border:1px solid var(--line);
    border-radius:9px;cursor:pointer;position:relative;transition:.18s;flex-shrink:0}
  .toggle input:checked{background:var(--amber);border-color:var(--amber)}
  .toggle input::after{content:"";position:absolute;top:1px;left:1px;width:10px;height:10px;border-radius:50%;
    background:var(--ink);transition:.18s}
  .toggle input:checked::after{left:11px;background:#FFFFFF}
  .toggle span{font-size:11px;color:var(--ink-dim);letter-spacing:.04em}
  .toggle:hover span{color:var(--ink)}

  .legend{display:flex;gap:16px;font-size:10.5px;color:var(--ink-faint);letter-spacing:.04em}
  .legend span{display:flex;align-items:center;gap:6px}
  .swatch{width:9px;height:9px;border-radius:2px;display:inline-block}

  .board .card[data-offline="1"]{display:none}
  .board.show-offline .card[data-offline="1"]{display:flex}

  .card.nomatch{display:none}
  .section-head.nomatch{display:none}
  .noresults{grid-column:1/-1;text-align:center;color:var(--ink-faint);font-size:13px;padding:40px 0;
    font-family:'Fraunces',serif;font-style:italic}

  .board{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}

  .section-head{grid-column:1/-1;display:flex;align-items:center;gap:18px;margin:8px 2px 2px}
  .section-head:not(:first-child){margin-top:24px}
  .section-head h2{font-family:'Fraunces',serif;font-weight:900;font-size:15px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--amber);white-space:nowrap}
  .section-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--amber-deep),var(--line) 40%,transparent)}

  /* Card */
  .card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;
    padding:18px 18px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:.2s;
    display:flex;flex-direction:column;min-height:260px}
  .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--amber-deep),var(--amber),transparent);opacity:.8}
  .card:hover{transform:translateY(-3px);border-color:var(--ink-faint)}
  .card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
  .card .name{font-family:'Fraunces',serif;font-weight:600;font-size:17px;line-height:1.15;letter-spacing:-.01em;color:#2D4A3E}
  .card .sid{font-size:10px;color:var(--ink-faint);letter-spacing:.1em;margin-top:5px}

  /* PROXY CARD VARIANT — teal-tinted top stripe and border so it reads as
     "borrowing" data from a different source. */
  .card.is-proxy::before{
    background:linear-gradient(90deg,var(--teal),rgba(47,111,102,.6),transparent);opacity:.85}
  .card.is-proxy{border-color:rgba(47,111,102,.22)}
  .card.is-proxy:hover{border-color:rgba(47,111,102,.45)}

  /* "Reading from" badge — replaces the plain "USGS XXX" subtitle on proxy
     cards. Visually anchored under the fishery name, signaling the data
     source is a different stream. */
  .card .reading-from{
    display:inline-flex;align-items:baseline;gap:6px;
    margin-top:7px;padding:5px 9px 5px 8px;
    background:rgba(47,111,102,.07);
    border:1px solid rgba(47,111,102,.22);
    border-radius:6px;
    font-size:10.5px;line-height:1.3;letter-spacing:.01em;
    color:var(--ink-dim);
    flex-wrap:wrap;
  }
  .card .reading-from .icon{color:var(--teal);font-weight:600;font-size:11px;flex-shrink:0}
  .card .reading-from .lab{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
  .card .reading-from .gauge{color:var(--teal);font-weight:500}
  .card .reading-from .id{color:var(--ink-faint);font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.06em}

  /* Status pill */
  .card .status{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:6px;
    white-space:nowrap;border:1px solid var(--line);color:var(--ink-dim);background:var(--bg);font-weight:600}
  .status.wadeable{color:var(--green);border-color:rgba(64,121,79,.45);background:rgba(64,121,79,.08)}
  .status.floatable{color:var(--teal);border-color:rgba(47,111,102,.45);background:rgba(47,111,102,.08)}
  .status.low{color:#8a6414;border-color:rgba(138,100,20,.45);background:rgba(138,100,20,.06)}
  .status.high{color:var(--rust);border-color:rgba(176,74,38,.45);background:rgba(176,74,38,.08)}
  .status.high-wading{color:#8a6414;border-color:rgba(138,100,20,.45);background:rgba(138,100,20,.06)}
  .status.blown{color:var(--rust);border-color:rgba(176,74,38,.55);background:rgba(176,74,38,.12)}
  .status.offline{color:var(--ink-faint);opacity:.7}
  /* Stage-only: gauge is alive (height and/or temp) but publishes no live CFS —
     distinct from offline so these cards stay visible. */
  .status.stage{color:var(--blue);border-color:rgba(63,108,140,.45);background:rgba(63,108,140,.08)}
  /* Fetch error: WE failed to reach USGS for this station — not the gauge's fault. */
  .status.fetcherr{color:var(--rust);border-color:rgba(176,74,38,.4);background:transparent;opacity:.85}

  /* Thermal-stress label under the water-temp reading */
  .temp-warn{font-size:9.5px;letter-spacing:.05em;margin-top:5px;font-weight:600;text-transform:uppercase}
  .temp-warn.warm{color:#8a6414}
  .temp-warn.hot{color:var(--rust)}

  /* Summary */
  .card .summary{font-family:'Fraunces',serif;font-style:italic;font-weight:400;
    font-size:13px;line-height:1.4;color:var(--ink-dim);margin:14px 0 0}
  .card.is-proxy .summary{margin-top:12px}
  .card .summary + .readings{margin-top:14px}

  /* Readings */
  .readings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
  .reading{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 11px}
  .reading .lab{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:6px}
  .reading .val{font-family:'Fraunces',serif;font-weight:600;font-size:24px;line-height:1;margin-top:6px;letter-spacing:-.02em}
  .reading .val small{font-family:'Spline Sans Mono',monospace;font-size:11px;font-weight:400;color:var(--ink-dim);margin-left:3px;letter-spacing:0}
  .reading.flow .val{color:var(--amber)}
  .reading.temp .val{color:var(--teal)}
  .reading.gh .val{color:var(--blue)}
  .reading .na{color:var(--ink-faint);font-size:14px;font-family:'Spline Sans Mono',monospace;font-weight:400}
  .reading .trend{font-size:10px;color:var(--ink-faint);margin-top:5px;letter-spacing:.03em}
  .reading .trend.up{color:var(--rust)}
  .reading .trend.down{color:var(--blue)}
  .full{grid-column:1/-1}

  /* Ranges */
  .ranges{margin-top:12px;display:flex;flex-direction:column;gap:5px;
    padding:9px 11px;background:rgba(255,255,255,.015);border:1px solid var(--line);border-radius:8px}
  .range{font-size:10.5px;color:var(--ink-dim);letter-spacing:.02em;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
  .range .lab{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
  .range .val{font-family:'Spline Sans Mono',monospace}
  .range.active .val{color:var(--green);font-weight:600}
  .range.active .lab{color:var(--green)}
  .range.bank .val{color:var(--ink-faint);font-style:italic}

  /* Proxy/explanatory notes — teal-tinted on proxy cards (the "why"),
     amber on non-proxy cards (where it carries renames/caveats). */
  .proxy-note{margin-top:9px;font-family:'Fraunces',serif;font-style:italic;font-size:11px;
    color:var(--ink-dim);line-height:1.45;padding:7px 10px;
    background:rgba(47,111,102,.04);border-left:2px solid rgba(47,111,102,.35);border-radius:0 6px 6px 0}
  .card:not(.is-proxy) .proxy-note{
    color:var(--amber);
    background:rgba(45,74,62,.06);
    border-left-color:var(--amber-deep);
  }

  .card .stamp{font-size:9.5px;color:var(--ink-faint);margin-top:11px;letter-spacing:.04em}

  /* Card utility links — a fixed three-cell footer bar. Each label lives in
     its own flex cell so the row can never wrap, no matter how narrow the
     card gets; hidden cells (weather/directions before the station is
     located, or on unlocated proxies) simply drop out and the survivors
     share the width. Cells double as bigger tap targets for phones. */
  .card .card-links{display:flex;margin-top:8px;border-top:1px solid var(--line)}
  .card .card-links a{flex:1;text-align:center;padding:8px 2px 1px;font-size:10px;
    letter-spacing:.06em;color:var(--ink-faint);text-decoration:none;white-space:nowrap;
    transition:color .15s}
  .card .card-links a:not([hidden]) ~ a:not([hidden]){border-left:1px solid var(--line)}
  .card .card-links a:hover{color:var(--amber)}
  /* r14.3 — "on TroutRoutes" gets its own full-width row under the trio;
     margin-top:0 stacks it directly beneath so its border-top is the divider. */
  .card .card-links.tr-row{margin-top:0}
  .card .state-badge{display:none;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
    color:var(--amber);background:rgba(45,74,62,.12);border:1px solid rgba(45,74,62,.3);
    padding:2px 7px;border-radius:5px}
  .board.searching .card .state-badge{display:inline-block}

  .skel{position:relative;overflow:hidden;background:var(--panel-hi);border-radius:6px;color:transparent!important}
  .skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
    animation:sweep 1.3s infinite}
  @keyframes sweep{100%{transform:translateX(100%)}}
  .err{color:var(--rust);font-size:11px;letter-spacing:.03em}

  /* ---- Reserved ad slots (see ADS block in engine.js) --------------------
     A slot is a grid cell matching the card footprint (fixed min-height =
     zero CLS when a network fills it later). Deliberately quieter than a
     gauge card: dashed hairline, no amber top stripe, faint panel — ads must
     read as ads, and the house unit shouldn't compete with live data. */
  .ad-slot{background:var(--bg2);border:1px dashed var(--line);border-radius:14px;
    min-height:260px;padding:14px 18px 18px;position:relative;overflow:hidden;
    display:flex;flex-direction:column}
  .ad-lab{font-size:9px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink-faint);font-weight:600;user-select:none}
  .ad-fill{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
  .ad-house{text-align:center;max-width:34ch}
  .ad-house .big{font-family:'Fraunces',serif;font-style:italic;font-size:17px;
    color:var(--ink-dim);margin-bottom:10px}
  .ad-house .sm{font-size:11px;color:var(--ink-faint);line-height:1.65;
    letter-spacing:.02em;margin-bottom:16px}
  .ad-house .donate-form{display:flex;justify-content:center}

  /* Mobile sticky anchor — mounted by the engine only when ADS.anchor is
     flipped on at fill time; position:fixed, so it never contributes CLS. */
  .ad-anchor{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
    background:linear-gradient(180deg,var(--panel),var(--bg2));
    border-top:1px solid var(--line);
    padding:5px 10px calc(5px + env(safe-area-inset-bottom));
    flex-direction:column;align-items:center;gap:3px}
  .ad-anchor .ad-lab{font-size:8px}
  .ad-anchor-unit{width:100%;max-width:400px;min-height:50px}
  @media(max-width:600px){
    body.has-anchor .ad-anchor{display:flex}
    body.has-anchor{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  }

  .donate-form{margin:0;display:inline}
  button.act-donate{background:linear-gradient(180deg,rgba(45,74,62,.18),rgba(31,54,44,.10));
    border-color:rgba(45,74,62,.45);color:var(--amber);font-weight:600;letter-spacing:.05em}
  button.act-donate:hover{background:linear-gradient(180deg,rgba(45,74,62,.28),rgba(31,54,44,.16));
    border-color:var(--amber);color:#1f362c}

  footer{max-width:1500px;margin:34px auto 0;border-top:1px solid var(--line);padding:22px 0 28px;
    font-size:11px;color:var(--ink-faint);line-height:1.6;display:flex;justify-content:space-between;
    align-items:center;flex-wrap:wrap;gap:32px}
  footer .footer-text{flex:1;min-width:280px;display:flex;flex-direction:column;gap:6px}
  footer a{color:var(--ink-dim);text-decoration:none;border-bottom:1px dotted var(--ink-faint)}
  footer a:hover{color:var(--amber)}
  footer .copyright{margin-top:6px;padding-top:10px;border-top:1px solid var(--line);
    color:var(--ink-faint);letter-spacing:.02em}
  footer .copyright b{color:var(--ink-dim);font-weight:600}
  .donate-footer{flex-shrink:0}
  .banner{max-width:1500px;margin:0 auto 22px;background:linear-gradient(180deg,rgba(176,74,38,.14),rgba(176,74,38,.06));
    border:1px solid rgba(176,74,38,.4);border-left:3px solid var(--rust);border-radius:10px;padding:15px 18px;
    font-size:13px;line-height:1.6;color:var(--ink);letter-spacing:.01em}
  .banner b{color:#8a3d1e}
  .banner code{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:2px 7px;font-size:11.5px;color:var(--amber);white-space:nowrap}
  .banner .bdetail{color:var(--ink-faint);font-size:11px}
  .banner .bretry{margin-left:8px;background:var(--rust);color:#1a0d08;border:none;font-family:inherit;font-weight:600;
    font-size:11.5px;padding:6px 14px;border-radius:7px;cursor:pointer}
  .banner .bretry:hover{filter:brightness(1.12)}
  .spin{animation:rot 1s linear infinite}
  @keyframes rot{100%{transform:rotate(360deg)}}
  @media(max-width:560px){.readings{grid-template-columns:1fr 1fr}.brand p{display:none}}

  @media(max-width:600px){
    .strip{
      grid-template-columns:1fr;
      grid-template-areas:"sub" "search" "toggle";
      column-gap:0;
      row-gap:10px;
      margin-bottom:14px;
    }
    .strip .legend{display:none}
    .strip .toggle{justify-content:flex-end;padding:0 2px}
    .strip .search{padding:2px 8px 2px 12px;min-width:0}
    .strip .search input{font-size:16px;padding:10px 0}
    .strip .search svg{width:15px;height:15px}
    .substrip{gap:4px}
    .subchip{font-size:11px;padding:5px 9px}
    .card .reading-from{font-size:10px}
  }