/* Fishing: its own colours, like a chart table on a boat, because the page
   is a thing in the room and not the bench (Clues does the same). Sea blues,
   foam, a sand gold for the good hours and coral for the bad. The bench's
   own theme still supplies the type and the buttons. */
.fi-app{--fi-deep:#041a24;--fi-sea:#0a3446;--fi-sea2:#0e4a5e;--fi-teal:#27c4b0;--fi-foam:#e3f6f3;--fi-mute:#8fb4bb;--fi-sand:#e8c26a;--fi-coral:#f0705f;--fi-line:rgba(160,225,220,.16);
  margin:0 -4px;padding:12px 12px 22px;border-radius:20px;color:var(--fi-foam);
  background:radial-gradient(ellipse 120% 40% at 50% -10%,rgba(39,196,176,.28),transparent 70%),linear-gradient(180deg,var(--fi-sea) 0,var(--fi-deep) 70%)}
.fi-app label,.fi-app summary,.fi-app .fi-line{color:var(--fi-mute)}
.fi-app .btn-s{background:rgba(255,255,255,.06);color:var(--fi-foam);border:1px solid var(--fi-line);border-radius:999px}
.fi-app .btn-s.go{background:var(--fi-teal);color:var(--fi-deep);border-color:var(--fi-teal)}
.fi-spot{display:grid;gap:8px;margin:0 0 14px}
.fi-spot label,#fiTideFold label{font-size:15px}
.fi-in{width:100%;box-sizing:border-box;font:inherit;padding:10px 12px;border-radius:12px;border:1px solid var(--fi-line);background:rgba(0,0,0,.28);color:var(--fi-foam)}
.fi-btns{display:flex;flex-wrap:wrap;gap:8px}
.fi-line{margin:6px 0;font-size:13.5px;line-height:1.5}
.fi-note{font-size:12px}
.fi-eyebrow{display:block;font-size:15px;color:var(--fi-mute)}

/* the hero: how it is right now, and the next tide */
.fi-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;padding:16px;border-radius:18px;margin:0 0 12px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--fi-sea2),var(--fi-sea));border:1px solid var(--fi-line);box-shadow:0 14px 28px -12px rgba(0,0,0,.7)}
.fi-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;opacity:.22;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath d='M0 12c10-8 20-8 30 0s20 8 30 0 20-8 30 0 20 8 30 0v12H0Z' fill='%2327c4b0'/%3E%3C/svg%3E") repeat-x bottom/120px 24px}
.fi-hero>*{position:relative;z-index:1}
.fi-hero-l,.fi-hero-r{display:grid;gap:4px;align-content:start}
.fi-hero-r{text-align:right;justify-items:end}
.fi-big{font-family:'Lexend',sans-serif;font-weight:500;font-size:40px;line-height:1;letter-spacing:.01em}
.fi-tidebig{font-family:'Lexend',sans-serif;font-weight:500;font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.fi-why{font-size:12.5px;line-height:1.4;color:var(--fi-mute)}
.fi-fishes{display:inline-flex;gap:3px}
.fi-fishes svg{width:20px;height:20px;fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.22);stroke-width:1}
.fi-fishes svg.on{fill:var(--fi-sand);stroke:var(--fi-sand)}
.fi-fishes svg .eye{fill:var(--fi-deep);stroke:none}
.fi-fishes.big svg{width:28px;height:28px}
.fi-warn{margin:0 0 12px;padding:11px 14px;border-radius:12px;border:1px solid var(--fi-coral);background:rgba(240,112,95,.12);color:#ffd2c9;font-size:13.5px}
.fi-bestcard{display:grid;gap:4px;padding:12px 16px;border-radius:14px;margin:0 0 12px;background:rgba(232,194,106,.1);border:1px solid rgba(232,194,106,.4)}
.fi-best{margin:0;font-family:'Lexend',sans-serif;font-size:22px;line-height:1.25}

.fi-card{padding:14px 12px;border-radius:16px;margin:0 0 12px;background:rgba(0,0,0,.24);border:1px solid var(--fi-line);display:grid;gap:6px}
.fi-chart{width:100%;height:auto;display:block}
.fi-chart .night{fill:rgba(0,0,0,.34)}
.fi-chart .win{fill:rgba(232,194,106,.16)}
.fi-chart .win.best{fill:rgba(39,196,176,.26)}
.fi-chart .fill{fill:rgba(39,196,176,.22)}
.fi-chart .line{fill:none;stroke:var(--fi-teal);stroke-width:2.4;stroke-linejoin:round}
.fi-chart .dot{fill:var(--fi-foam);stroke:var(--fi-teal);stroke-width:1.5}
.fi-chart .tl{fill:var(--fi-foam);font:600 11px Inter,sans-serif}
.fi-chart .ax{fill:var(--fi-mute);font:10.5px Inter,sans-serif}
.fi-chart .now{stroke:var(--fi-coral);stroke-width:1.5;stroke-dasharray:3 3}
.fi-chart text.now{fill:var(--fi-coral);stroke:none}
.fi-strip{display:flex;align-items:flex-end;gap:2px;height:70px}
.fi-strip i{flex:1;border-radius:3px 3px 0 0;background:var(--fi-coral);opacity:.55}
.fi-strip i.fair{background:var(--fi-sand);opacity:.8}
.fi-strip i.good{background:var(--fi-teal);opacity:.9}
.fi-strip i.best{background:var(--fi-teal);opacity:1;box-shadow:0 0 8px rgba(39,196,176,.6)}
.fi-strip-ax{display:flex;gap:2px;margin-top:3px}
.fi-strip-ax span{flex:1;min-width:0;font-size:9.5px;color:var(--fi-mute);text-align:left;white-space:nowrap;overflow:visible}

.fi-wins{display:grid;gap:8px;margin:0 0 12px}
.fi-win{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:12px 14px;border-radius:14px;border:1px solid var(--fi-line);background:rgba(255,255,255,.04)}
.fi-win p{grid-column:1/-1;margin:2px 0 0}
.fi-win .fi-grade{display:none}
.fi-win.best{border-color:var(--fi-teal);background:rgba(39,196,176,.1)}
.fi-win.good{border-color:rgba(39,196,176,.5)}
.fi-win.fair{border-color:rgba(232,194,106,.5)}
.fi-win.poor{opacity:.75;border-color:rgba(240,112,95,.5)}

.fi-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.fi-tile{display:grid;gap:2px;align-content:start;padding:11px 12px;border-radius:14px;background:rgba(0,0,0,.24);border:1px solid var(--fi-line);min-width:0}
.fi-tile .k{font-size:15px;color:var(--fi-mute)}
.fi-tile b{font-family:'Lexend',sans-serif;font-weight:500;font-size:19px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.fi-tile .s{font-size:12px;color:var(--fi-mute)}
.fi-arrow{width:18px;height:18px;fill:none;stroke:var(--fi-teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fi-sub{margin:8px 0 4px;font-size:15px;color:var(--fi-mute)}
.fi-tide{margin:2px 0;font-variant-numeric:tabular-nums;white-space:pre;font-size:13.5px}
.fi-fold{margin:12px 0 0}
.fi-fold summary{cursor:pointer;padding:8px 0}
@media (max-width:380px){.fi-tiles{grid-template-columns:repeat(2,1fr)}.fi-big{font-size:34px}}
@media (prefers-reduced-motion:reduce){.fi-strip i{transition:none}}
.fi-picks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fi-sel{display:grid;gap:4px;min-width:0}
.fi-sel label{font-size:15px}
select.fi-in{appearance:auto}
.fi-app a{color:var(--fi-teal)}

/* The answer first: the spot is one button, its settings a sheet. */
.fi-change{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;margin:0 0 12px;padding:10px 16px;box-sizing:border-box;
  font:inherit;font-size:16px;text-align:left;cursor:pointer;color:var(--fi-foam);background:rgba(0,0,0,.24);border:1px solid var(--fi-line);border-radius:14px}
.fi-change-what{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Lexend',sans-serif;font-weight:500}
.fi-change-go{flex:none;font-size:13.5px;color:var(--fi-teal)}
#fiScrim{align-items:flex-end;padding:0}
.fi-app.fi-sheet{width:100%;max-width:560px;max-height:88vh;overflow-y:auto;margin:0 auto;box-sizing:border-box;
  padding:16px 16px calc(22px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;border:1px solid var(--fi-line);border-bottom:none}
.fi-sheet .fi-spot{margin:0}
.fi-sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.fi-app .btn-s,.fi-app .fi-in{min-height:44px}
/* list-item keeps the fold's triangle; padding makes it 44px tall */
.fi-fold summary{padding:12px 0;line-height:20px}
.fi-boxfold{margin:0 0 12px;padding:0 12px;border-radius:16px;background:rgba(0,0,0,.24);border:1px solid var(--fi-line)}
.fi-boxfold[open]{padding-bottom:12px}
.fi-boxfold .fi-wins{margin:0}
#fiSources{color:var(--fi-foam)}