/* Redside — Central Oregon fishing companion
   Design language: a field instrument for high-desert water.
   Palette drawn from the subject: teal river water, basalt slate, morning gold,
   sage, and the crimson lateral stripe of the redside rainbow — the signature. */

:root {
  --paper: #eff2f1;
  --paper-2: #e4e9e7;
  --card: #ffffff;
  --ink: #17232b;
  --ink-2: #4a5a60;
  --water: #1e6e6b;
  --water-deep: #123b3d;
  --redside: #c4442a;
  --redside-soft: #e06a4f;
  --sage: #8a9a7b;
  --gold: #d9a441;
  --line: #d3dbd8;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(18,59,61,.06), 0 8px 24px rgba(18,59,61,.07);
  --shadow-raised: 0 2px 4px rgba(18,59,61,.08), 0 14px 32px rgba(18,59,61,.12);
  --tab-h: 64px;
  font-synthesis: none;
}

/* Fish This Spot — isolated styles for the photo workflow. */
.spot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spot-head .scenic-kicker { color: var(--water); }
.spot-head h1 { font-size: clamp(1.35rem, 5vw, 1.7rem); }
.spot-head .btn { flex: 0 0 auto; }
.spot-form label:not(.spot-check):not(.spot-file) { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; font-size: .88rem; font-weight: 600; }
.spot-form input:not([type=checkbox]):not([type=file]), .spot-form textarea, .spot-form select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: inherit; font-size: 16px; color: var(--ink); background: var(--card); }
.spot-form .row2 { display: flex; gap: 12px; }
.spot-form .row2 > label { flex: 1; min-width: 0; }
.spot-form .row2 input { min-width: 0; }
.spot-conditions summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.spot-observation-summary p { white-space: pre-wrap; overflow-wrap: anywhere; }
.spot-form h2, .spot-view .panel h2 { font-size: 1.12rem; margin-bottom: 8px; }
.spot-view .panel h3 { font-size: .93rem; margin-top: 16px; }
.spot-form fieldset { min-width: 0; margin: 16px 0; padding: 0; border: 0; }
.spot-form legend { font-weight: 700; margin-bottom: 8px; }
.spot-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .9rem; cursor: pointer; }
.spot-check input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--water); }
.spot-file { position: relative; overflow: hidden; display: inline-flex; align-items: center; cursor: pointer; }
.spot-file input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.spot-file:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.spot-preview { display: block; width: 100%; height: auto; border-radius: 12px; }
.spot-map { height: 290px; border-radius: 12px; background: var(--paper-2); isolation: isolate; z-index: 0; }
.spot-pin { color: white; border: 3px solid white; background: var(--redside); border-radius: 50%; text-align: center; line-height: 26px; box-shadow: 0 2px 8px #0008; }
.spot-arrow { display: grid; place-items: center; color: #f9d76c; background: #123b3de8; border: 2px solid #f9d76c; border-radius: 50%; font-size: 32px; box-shadow: 0 2px 8px #0008; }
.spot-arrow span { display: block; line-height: 1; }
.spot-photo { position: relative; }
.spot-photo > img { display: block; width: 100%; height: auto; border-radius: 12px; }
.spot-zone { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; width: 44px; height: 44px; border: 3px solid white; background: var(--water-deep); color: white; font-size: 20px; font-weight: 700; box-shadow: 0 2px 8px #0008; }
.spot-zone[aria-pressed=true] { background: var(--redside); outline: 3px solid var(--gold); outline-offset: 2px; }
.spot-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.spot-legend .chip { font-size: .75rem; padding: 8px 10px; }
.spot-reasons { padding-left: 18px; }
.spot-reasons li { margin-bottom: 10px; }
.spot-link { color: var(--water); text-decoration: underline; }
.spot-saved { display: flex; flex-direction: column; gap: 5px; }
.spot-saved > span { font-size: .82rem; }
.spot-saved .tag { align-self: flex-start; }
.spot-debug summary { min-height: 44px; cursor: pointer; font-weight: 600; }
.spot-debug pre { font-size: .72rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; }
.spot-view [data-spot-status]:not(:empty) { padding: 12px; border-left: 3px solid var(--water); background: var(--card); border-radius: 4px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(circle at 8% 0%, rgba(30,110,107,.08), transparent 28rem),
    var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { font-family: "Archivo", system-ui, sans-serif; letter-spacing: -.01em; margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
.card, .best-bet, .btn, .chip, .sync-btn, .tab, .back, .score-info-link, .info-btn {
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid rgba(217,164,65,.9);
  outline-offset: 3px;
}
.muted { color: var(--ink-2); }
.small { font-size: .82rem; }

#app { max-width: 560px; min-height: 100dvh; margin: 0 auto; }
.view { padding: calc(14px + env(safe-area-inset-top)) 16px 32px; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } * { transition: none !important; } }

/* ---- Hero / Today ---- */
.hero {
  background: linear-gradient(150deg, #227a76 0%, var(--water-deep) 78%);
  color: #eafcfb; border-radius: 24px; padding: 18px; position: relative; overflow: hidden;
  box-shadow: 0 16px 36px rgba(18,59,61,.18);
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none;
  background: repeating-radial-gradient(ellipse at 105% -5%, transparent 0 27px, rgba(255,255,255,.08) 28px, transparent 30px);
}
.hero::after { /* the redside stripe — a diagonal crimson slash across the hero */
  content: ""; position: absolute; right: -40px; top: -20px; width: 220px; height: 3px;
  background: var(--redside); transform: rotate(38deg); box-shadow: 0 0 18px 2px rgba(196,68,42,.6);
}
.hero > * { position: relative; z-index: 1; }
.hero-topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hero-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.hero-title { font-size: 2rem; line-height: 1.08; margin: 10px 0 15px; font-weight: 700; }
.sync-pill { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-family: "IBM Plex Mono", monospace; font-size: .62rem; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.14); margin: 0; white-space: nowrap; }
.sync-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8ed1ad; box-shadow: 0 0 0 3px rgba(142,209,173,.14); }
.sync-pill.busy { background: rgba(217,164,65,.28); }
.sync-pill.busy::before { background: var(--gold); animation: pulse 1s ease-in-out infinite; }
.sync-pill.offline { background: rgba(196,68,42,.28); }
.sync-pill.offline::before { background: #f1a08e; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.75); } }

.best-bet { display: block; padding: 14px; color: var(--ink); background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.6); border-radius: 18px; box-shadow: var(--shadow-raised); }
.best-bet:active { transform: scale(.985); }
.best-bet-top, .best-bet-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.best-kicker { font-family: "IBM Plex Mono", monospace; font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--redside); }
.best-drive { font-family: "IBM Plex Mono", monospace; font-size: .7rem; color: var(--ink-2); }
.best-bet-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 7px 0 9px; }
.best-bet-copy { min-width: 0; }
.best-bet-copy h2 { font-size: 1.35rem; line-height: 1.12; }
.best-bet-copy p { margin: 4px 0 0; color: var(--ink-2); font-size: .9rem; }
.best-bet-bottom { padding-top: 9px; border-top: 1px solid var(--line); font-family: "IBM Plex Mono", monospace; font-size: .67rem; color: var(--ink-2); }
.best-bet-bottom > span { min-width: 0; }
.best-bet-bottom strong { flex: 0 0 auto; color: var(--water); font-family: "IBM Plex Sans", sans-serif; font-size: .76rem; }
.hero-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 12px; }
.hero-foot p { margin: 0; max-width: 70%; font-size: .78rem; line-height: 1.4; color: rgba(234,252,251,.82); }

.reco { display: flex; gap: 10px; margin-top: 14px; align-items: flex-start; }
.reco.inline { color: var(--ink); margin: 4px 0 12px; }
.reco p { margin: 0; font-size: 1rem; }
.reco-slash { flex: 0 0 4px; align-self: stretch; background: var(--redside); border-radius: 2px; min-height: 38px; }

.filter-row { display: flex; gap: 8px; margin: 16px 0 10px; flex-wrap: wrap; }
.chip { min-height: 42px; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 8px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600; }
.chip.on { background: var(--water); color: #fff; border-color: var(--water); }
.chip.ghost { background: transparent; color: var(--water); border-color: var(--line); font-weight: 600; }
.today-tools { display: flex; align-items: stretch; gap: 8px; margin: 14px 0 16px; }
.drive-toggle { display: flex; flex: 1; min-width: 0; padding: 3px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.58); }
.drive-toggle .chip { flex: 1; min-height: 38px; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; font-size: .78rem; white-space: nowrap; }
.drive-toggle .chip.on { background: var(--card); color: var(--water-deep); box-shadow: 0 2px 8px rgba(18,59,61,.1); }
.sync-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 82px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--water); font-weight: 700; font-size: .78rem; }
.sync-icon { width: 13px; height: 13px; border: 1.8px solid currentColor; border-left-color: transparent; border-radius: 50%; }
.sync-btn.busy .sync-icon { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.list-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 9px; }
.list-head h2 { font-size: 1.05rem; }
.list-head span { font-family: "IBM Plex Mono", monospace; font-size: .68rem; color: var(--ink-2); }

/* ---- Cards ---- */
.cards { display: flex; flex-direction: column; gap: 10px; }
.card { background: rgba(255,255,255,.96); border: 1px solid rgba(211,219,216,.9); border-radius: var(--radius); box-shadow: var(--shadow); }
.water-card { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 12px 13px; }
.water-card:active { transform: scale(.985); box-shadow: 0 1px 3px rgba(18,59,61,.08); }
.card-body { flex: 1; min-width: 0; }
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-top h3 { font-size: 1.06rem; }
.drive { font-family: "IBM Plex Mono", monospace; font-size: .74rem; color: var(--ink-2); white-space: nowrap; }
.card-sub { margin: 2px 0 0; color: var(--ink-2); font-size: .9rem; }
.card-cond { margin: 5px 0 0; font-family: "IBM Plex Mono", monospace; font-size: .7rem; line-height: 1.35; color: var(--water); }
.chev { color: #a9b5b1; font-size: 1.6rem; line-height: 1; }

/* ---- Bite dial ---- */
.dial { flex: 0 0 auto; }
.dial-track { fill: none; stroke: var(--paper-2); stroke-width: 6; }
.dial-fill { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.dial-num { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.15rem; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; }
.dial.hot .dial-fill { stroke: var(--redside); }
.dial.fair .dial-fill { stroke: var(--gold); }
.dial.slow .dial-fill { stroke: var(--sage); }
.score-dial { display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.score-label { margin-top: -2px; font-family: "IBM Plex Mono", monospace; font-size: .59rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.score-label.hot { color: var(--redside); }
.score-label.fair { color: #94701c; }
.score-label.slow { color: #657257; }

/* ---- Page heads ---- */
.page-head { margin-bottom: 14px; }
.page-head h1 { font-size: 1.7rem; }
.page-head .muted { margin: 4px 0 0; }
.scenic-head { min-height: 152px; display: flex; align-items: flex-end; padding: 18px; overflow: hidden; position: relative; border-radius: 22px; color: #fff; box-shadow: var(--shadow-raised); }
.scenic-head::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 15%, rgba(10,29,31,.8) 100%); }
.scenic-head > div { position: relative; z-index: 1; }
.scenic-head h1 { font-size: 1.85rem; color: #fff; }
.scenic-head p { max-width: 310px; margin: 3px 0 0; color: rgba(255,255,255,.86); font-size: .88rem; }
.scenic-kicker { display: block; margin-bottom: 3px; font-family: "IBM Plex Mono", monospace; font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #f3c86b; }
.waters-head { background: url("./assets/river-overlook.jpg") center 43% / cover no-repeat; }
.ask-head { background: url("./assets/riverside-angler.jpg") center 44% / cover no-repeat; }
.log-head { background: url("./assets/river-cast.jpg") center 52% / cover no-repeat; }
.back { display: inline-block; color: var(--water); font-weight: 600; margin-bottom: 10px; }
.sec { font-size: 1.15rem; margin: 22px 0 8px; }

/* ---- Water detail ---- */
.water-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.water-hero h1 { font-size: 1.5rem; }
.intro { font-size: 1rem; color: var(--ink); margin: 0 0 14px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 10px 0; box-shadow: var(--shadow); }
.panel.empty { color: var(--ink-2); }
.panel-head { display: flex; justify-content: space-between; align-items: center; font-family: "Archivo", sans-serif; font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.panel ul { margin: 6px 0 0; padding-left: 18px; }
.panel li { margin: 4px 0; }
.lbl { font-family: "IBM Plex Mono", monospace; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sage); margin: 10px 0 2px; }

/* Instrument gauges */
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.gauge { background: var(--paper); border-radius: 12px; padding: 10px 8px; text-align: center; border: 1px solid var(--line); }
.gauge-val { display: block; font-family: "IBM Plex Mono", monospace; font-size: 1.15rem; font-weight: 600; color: var(--water-deep); }
.gauge-lbl { display: block; font-size: .72rem; font-weight: 700; margin-top: 2px; }
.gauge-sub { display: block; font-size: .64rem; color: var(--ink-2); }

/* Reasons list (why the score) */
.reasons { list-style: none; padding: 0; margin: 0; }
.reasons li { position: relative; padding-left: 20px; margin: 6px 0; font-size: .92rem; }
.reasons li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.reasons li.good::before { content: "▲"; color: var(--water); font-size: .7rem; top: 3px; }
.reasons li.bad::before { content: "▼"; color: var(--redside); font-size: .7rem; top: 3px; }
.reasons li.neutral::before { content: "•"; color: var(--sage); }

/* Species blocks */
.species { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--water); border-radius: 12px; padding: 12px 14px; margin: 10px 0; box-shadow: var(--shadow); }
.species-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.species-head h4 { font-size: 1.05rem; }
.species p { margin: 0; font-size: .93rem; }
.tackle-guide { margin: 12px 0 2px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.tackle-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 1px 8px; font-family: "IBM Plex Mono", monospace; text-transform: uppercase; }
.tackle-head span:first-child { color: var(--water-deep); font-size: .64rem; font-weight: 700; letter-spacing: .06em; }
.tackle-head span:last-child { color: var(--ink-2); font-size: .53rem; letter-spacing: .03em; }
.tackle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 6px; }
.tackle-item { min-width: 0; margin: 0; text-align: center; }
.tackle-art { display: flex; align-items: center; justify-content: center; min-height: 54px; border: 1px solid rgba(211,219,216,.85); border-radius: 9px; background: rgba(255,255,255,.78); color: var(--water-deep); }
.tackle-icon { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tackle-icon .soft-fill { fill: rgba(30,110,107,.11); }
.tackle-icon .accent-fill { fill: var(--gold); stroke: var(--redside); }
.tackle-icon .thick { stroke-width: 4; }
.tackle-item figcaption { margin-top: 4px; overflow-wrap: anywhere; color: var(--ink-2); font-family: "IBM Plex Mono", monospace; font-size: .58rem; line-height: 1.18; }
.tag { font-family: "IBM Plex Mono", monospace; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; font-weight: 600; }
.tag.signature { background: var(--redside); color: #fff; }
.tag.primary { background: rgba(30,110,107,.14); color: var(--water-deep); }
.tag.secondary { background: var(--paper-2); color: var(--ink-2); }
.tag.beginner { background: rgba(217,164,65,.2); color: #8a6a1a; }

/* Regs panel — deliberately alarming-adjacent without being loud */
.regs { border-color: var(--redside); border-left: 4px solid var(--redside); }
.regs .panel-head { color: var(--redside); }
.regs-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Glossary terms */
.term { border: none; background: none; padding: 0; color: var(--water); font: inherit; font-weight: 600; border-bottom: 1px dotted var(--water); }
.term-dot { font-size: .6em; vertical-align: super; margin-left: 1px; color: var(--sage); }

/* Buttons */
.btn { min-height: 44px; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: .92rem; }
.btn.primary { background: var(--water); color: #fff; border-color: var(--water); }
.btn.ghost { background: transparent; color: var(--water); }
.btn.wide { width: 100%; margin: 14px 0 4px; padding: 14px; }

/* Log */
.stat-row { display: flex; gap: 8px; margin-bottom: 6px; }
.stat { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px; text-align: center; box-shadow: var(--shadow); }
.stat-num { display: block; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--water-deep); }
.stat-lbl { font-size: .72rem; color: var(--ink-2); }
.loglist { list-style: none; padding: 0; margin: 8px 0 0; }
.loglist.big { display: flex; flex-direction: column; gap: 8px; }
.log-row { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 34px 10px 12px; }
.loglist:not(.big) .log-row { border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 30px 8px 0; }
.log-row .del { position: absolute; right: 8px; top: 8px; border: none; background: none; color: var(--line); font-size: .9rem; }
.log-row .del:active { color: var(--redside); }
.empty { color: var(--ink-2); padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; list-style: none; }

/* Ask / advisor */
.ask-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ask-box { display: flex; flex-direction: column; gap: 8px; }
.ask-box textarea, .sheet textarea, .sheet input, .sheet select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--card); color: var(--ink); }
.ask-box textarea:focus, .sheet textarea:focus, .sheet input:focus, .sheet select:focus { border-color: var(--water); box-shadow: 0 0 0 3px rgba(30,110,107,.12); }
.answer { margin-top: 14px; }
.ai-note { display: flex; gap: 10px; background: var(--water-deep); color: #eafcfb; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.ai-note p { margin: 0; }
.ai-badge { font-family: "IBM Plex Mono", monospace; font-size: .6rem; background: var(--gold); color: var(--ink); padding: 2px 6px; border-radius: 6px; height: fit-content; font-weight: 700; }

/* Modal sheet + glossary + toast */
.scrim { position: fixed; inset: 0; background: rgba(18,35,43,.5); display: flex; align-items: flex-end; justify-content: center; z-index: 50; animation: fade .2s ease; }
.scrim.light { align-items: center; padding: 20px; }
.sheet { background: var(--paper); width: 100%; max-width: 560px; border-radius: 22px 22px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; max-height: 88vh; overflow-y: auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.sheet .row2 { display: flex; gap: 10px; }
.sheet .row2 label { flex: 1; }
.x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -8px -10px 0; border: none; border-radius: 50%; background: none; font-size: 1.1rem; color: var(--ink-2); }
.x:active { background: var(--paper-2); }
.glossary { background: var(--card); border-radius: 18px; padding: 18px; max-width: 380px; box-shadow: var(--shadow); }
.glossary h4 { text-transform: capitalize; color: var(--water-deep); margin-bottom: 6px; }
.glossary p { margin: 0 0 14px; }
.toast { position: fixed; bottom: calc(var(--tab-h) + 16px); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: .88rem; opacity: 0; transition: all .3s ease; z-index: 60; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Score explainer */
.score-info-link { flex: 0 0 auto; min-height: 32px; margin: 0; background: rgba(255,255,255,.12); color: #eafcfb; border: none; padding: 6px 10px; border-radius: 999px; font-size: .7rem; font-weight: 600; }
.score-info-link:active { background: rgba(255,255,255,.22); }
.info-btn { background: transparent; border: 1px solid var(--line); color: var(--water); font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.info-sheet p { margin: 0 0 4px; font-size: .93rem; }
.info-list { margin: 4px 0 10px; padding-left: 18px; }
.info-list li { margin: 6px 0; font-size: .9rem; }
.info-list.sources li { font-family: "IBM Plex Mono", monospace; font-size: .8rem; }
.info-list.sources a { color: var(--water); font-weight: 600; border-bottom: 1px dotted var(--water); }

/* ---- Bottom tab bar ---- */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding: 5px 6px env(safe-area-inset-bottom); background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid rgba(211,219,216,.9); display: flex; z-index: 40; box-shadow: 0 -8px 24px rgba(18,59,61,.06); }
.tab { flex: 1; min-height: 50px; border: none; border-radius: 13px; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-2); font-size: .66rem; font-weight: 700; }
.tab svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tab.on { color: var(--water-deep); background: rgba(30,110,107,.1); }
.tab.on svg { stroke: var(--water); }

@media (max-width: 370px) {
  .view { padding-left: 12px; padding-right: 12px; }
  .hero { padding: 15px; }
  .hero-title { font-size: 1.75rem; }
  .sync-pill { font-size: .57rem; }
  .best-bet-bottom { align-items: flex-end; }
  .drive-toggle .chip { font-size: .72rem; }
}