/* =========================================================================
   WISE FISHERMAN - logged-in app. Shares the lookbook tokens so login,
   dashboard, settings, billing and history feel like one brand.
   Light & airy / authoritative. Mobile-first.

   Contrast note: the brand fills (--fair, --sunrise, --sea-bright) are tuned
   for AREAS, not small text. Every token has an "-ink" partner that clears
   WCAG AA (>=4.5:1) on paper/cloud; text uses the ink variant, fills use the
   brand variant. Never set small type in a raw fill color.
   ========================================================================= */
:root{
  --ink:#0C2A39; --sea:#15536E; --sea-bright:#2C7E9B;
  --seaglass:#A9CFCF; --seaglass-soft:#DCEAE9;
  --paper:#FAFAF7; --cloud:#FFFFFF; --mist:#EDF2F2; --line:#D9E2E2;
  --slate:#2F3D44; --slate-soft:#5E6E75;
  --sunrise:#E89A45; --sunrise-deep:#C97E2E; --sunrise-soft:#FBEAD6;
  --prime:#2F8F76; --fair:#DE9F39; --rough:#C2543E;

  /* AA-safe text partners (checked against --paper #FAFAF7) */
  --link-ink:#15536E;      /* 8.1:1  - body links (was --sea-bright, 4.47:1) */
  --prime-ink:#1F6E58;     /* 4.9:1  - go / favorable */
  --fair-ink:#8A5B14;      /* 5.7:1  - marginal (was --fair 2.3:1) */
  --rough-ink:#9E3B28;     /* 5.9:1  - rough / caution */

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --radius:18px; --radius-sm:10px; --radius-pill:999px;
  --shadow-card:0 1px 0 rgba(12,42,57,.03), 0 26px 48px -34px rgba(12,42,57,.30);
  --tap:44px;              /* minimum interactive target */
  --maxw:980px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--slate);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(232,154,69,.12), transparent 60%),
    radial-gradient(1000px 600px at 0% 0%, rgba(169,207,207,.22), transparent 58%),
    linear-gradient(180deg,#FBFBF8, var(--paper) 40%);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 28px}}
a{color:var(--link-ink);text-decoration:none}
a:hover{text-decoration:underline}

/* Accessibility -------------------------------------------------------- */
:focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);
  color:var(--paper);padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;
  font-weight:600}
.skip:focus{left:0;text-decoration:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* App shell: header / brand / nav --------------------------------------- */
.app-header{position:sticky;top:0;z-index:30;
  background:rgba(250,250,247,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.app-header-inner{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:1.25rem;color:var(--ink);
  text-decoration:none;padding:6px 0}
.brand:hover{text-decoration:none}
.brand svg{flex:0 0 auto}
.brand-word{white-space:nowrap}

.nav-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);margin:0;padding:0;background:transparent;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--ink);cursor:pointer;box-shadow:none}
.nav-toggle:hover{background:var(--mist);transform:none}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle .ico-close{display:none}
.nav-toggle[aria-expanded="true"] .ico-open{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:block}

.app-nav{display:none}
.app-nav.open{display:block}
.app-nav{position:absolute;left:0;right:0;top:100%;background:var(--cloud);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-card);padding:8px 0}
.app-nav ul{list-style:none;margin:0;padding:0 20px}
.app-nav li{border-top:1px solid var(--line)}
.app-nav li:first-child{border-top:none}
.app-nav a{display:flex;align-items:center;min-height:var(--tap);
  color:var(--slate);font-weight:600;font-size:1rem;text-decoration:none}
.app-nav a:hover{color:var(--ink);text-decoration:none}
.app-nav a[aria-current="page"]{color:var(--ink)}
.app-nav a[aria-current="page"]::before{content:"";width:4px;height:18px;
  border-radius:2px;background:var(--sunrise);margin-right:10px}

@media(min-width:768px){
  .nav-toggle{display:none}
  .app-nav,.app-nav.open{display:block;position:static;background:none;
    border:none;box-shadow:none;padding:0}
  .app-nav ul{display:flex;align-items:center;gap:22px;padding:0}
  .app-nav li{border:none}
  .app-nav a{min-height:auto;font-size:.92rem;padding:8px 0}
  .app-nav a[aria-current="page"]{border-bottom:2px solid var(--sunrise)}
  .app-nav a[aria-current="page"]::before{display:none}
}

/* Main + headings ------------------------------------------------------ */
main{display:block;padding-bottom:8px}
.page-head{margin:26px 0 4px}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);font-weight:400;
  line-height:1.15}
h1{font-size:clamp(1.7rem,5vw,2.3rem);margin:0 0 6px;letter-spacing:-.01em}
h2{font-size:clamp(1.35rem,4vw,1.6rem);margin:26px 0 10px}
h3{font-size:1.12rem;margin:22px 0 8px;border-bottom:1px solid var(--line);
  padding-bottom:6px}
.sub{color:var(--slate-soft);font-size:.88rem}
.dim{color:var(--slate-soft)}
.narrow{max-width:460px}
.eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sea)}

/* Forms ---------------------------------------------------------------- */
label{display:block;margin:12px 0;font-size:.9rem;color:var(--slate)}
input,select,textarea{width:100%;margin-top:5px;padding:12px;
  background:var(--cloud);border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--ink);
  font-size:16px;  /* 16px stops iOS Safari zooming on focus */
  font-family:var(--font-body);min-height:var(--tap)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sea);
  box-shadow:0 0 0 3px rgba(21,83,110,.15)}
input[type=checkbox]{width:auto;min-height:0;margin:0 10px 0 0}
.field-hint{display:block;color:var(--slate-soft);font-size:.8rem;margin-top:4px}
fieldset{border:none;margin:0;padding:0;min-width:0}

/* Buttons -------------------------------------------------------------- */
button,.btn{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;margin-top:14px;padding:12px 22px;min-height:var(--tap);
  background:var(--sunrise);color:var(--ink);border:1px solid transparent;
  border-radius:var(--radius-pill);font-weight:600;font-size:.95rem;
  cursor:pointer;text-decoration:none;font-family:var(--font-body);
  box-shadow:0 12px 26px -16px rgba(232,154,69,.9);
  transition:transform .15s,background .2s}
button:hover,.btn:hover{background:var(--sunrise-deep);transform:translateY(-1px);
  text-decoration:none}
.btn-ghost,button.ghost{background:var(--mist);color:var(--sea);
  box-shadow:none;border-color:var(--line)}
.btn-ghost:hover,button.ghost:hover{background:var(--seaglass-soft)}
.btn-danger{background:var(--rough);color:#fff;box-shadow:none}
.btn-danger:hover{background:var(--rough-ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media(prefers-reduced-motion:reduce){
  button,.btn{transition:none}
  button:hover,.btn:hover{transform:none}
}

/* Layout grids --------------------------------------------------------- */
.grid2{display:grid;grid-template-columns:1fr;gap:0 18px}
.grid4{display:grid;grid-template-columns:1fr;gap:0 12px}
@media(min-width:640px){
  .grid2{grid-template-columns:1fr 1fr}
  .grid4{grid-template-columns:2fr 1fr 1fr 1fr}
}

/* Chips (species select) ----------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;margin:0;background:var(--mist);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:10px 15px;min-height:var(--tap);font-size:.9rem;color:var(--slate);
  cursor:pointer}
.chip:hover{background:var(--seaglass-soft)}
.chip:has(input:checked){background:var(--sunrise-soft);
  border-color:var(--sunrise);color:var(--ink);font-weight:600}
.chip:focus-within{outline:2px solid var(--sea);outline-offset:2px}
.species-group{margin:0 0 14px}
.species-group-label{display:block;margin:0 0 7px;color:var(--sea)}

/* Flash messages ------------------------------------------------------- */
.flash{padding:12px 16px;border-radius:var(--radius-sm);margin:12px 0;
  font-size:.92rem;border:1px solid transparent}
.flash.ok{background:rgba(47,143,118,.10);color:var(--prime-ink);
  border-color:rgba(47,143,118,.25)}
.flash.error{background:rgba(194,84,62,.10);color:var(--rough-ink);
  border-color:rgba(194,84,62,.25)}
.flash.warn{background:var(--sunrise-soft);color:var(--fair-ink);
  border-color:rgba(232,154,69,.35)}

/* Cards / panels ------------------------------------------------------- */
.card{background:var(--cloud);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-card);
  padding:16px 18px;margin:12px 0}
.card.notice{border-left:3px solid var(--sunrise)}
.msg{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--cloud);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  font-size:.95rem;box-shadow:var(--shadow-card)}
.cards{display:flex;flex-wrap:wrap;gap:10px}
.pick{border-left:3px solid var(--sunrise)}
.pick-date{font-family:var(--font-display);font-weight:500;color:var(--ink)}

/* Tables: always scrollable rather than clipped on narrow screens ------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-top:6px;border-radius:var(--radius-sm)}
.table-scroll table.grid{margin-top:0}
.table-scroll:focus-visible{outline:2px solid var(--sea)}
table.grid{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:6px;
  min-width:520px}
table.grid th,table.grid td{border:1px solid var(--line);padding:8px;
  text-align:center;white-space:nowrap}
table.grid th{background:var(--mist);color:var(--ink);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:500}
table.grid tr.today td{background:var(--sunrise-soft)}
table.grid td b{font-family:var(--font-mono);color:var(--ink)}
.scroll-hint{font-family:var(--font-mono);font-size:10.5px;
  color:var(--slate-soft);margin-top:4px}
@media(min-width:768px){.scroll-hint{display:none}}

/* Condition badges (color is always paired with a word) ----------------- */
.badge{display:inline-block;padding:2px 10px;border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.04em}
.b-good{background:rgba(47,143,118,.14);color:var(--prime-ink)}
.b-great{background:var(--seaglass-soft);color:var(--sea)}
.b-unsafe{background:rgba(194,84,62,.14);color:var(--rough-ink)}
.b-marg{background:var(--sunrise-soft);color:var(--fair-ink)}
.b-unknown{background:var(--mist);color:var(--slate-soft)}

/* History -------------------------------------------------------------- */
.hist{background:var(--cloud);border:1px solid var(--line);
  border-radius:var(--radius);padding:4px 16px;margin-bottom:8px;
  box-shadow:var(--shadow-card)}
.hist summary{cursor:pointer;color:var(--ink);min-height:var(--tap);
  display:flex;align-items:center;gap:8px}
.hist summary::marker{color:var(--sea)}
.hist .msg{margin:0 0 14px;box-shadow:none}

/* Footer --------------------------------------------------------------- */
.app-footer{margin:40px 0 0;border-top:1px solid var(--line);
  padding:20px 0 34px;color:var(--slate-soft);font-size:.82rem}
.app-footer a{color:var(--slate)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px}
.foot-links a{min-height:32px;display:inline-flex;align-items:center}

/* ---- Lookbook forecast panel (dashboard) ------------------------------ */
.fc-panel{background:linear-gradient(180deg,#FFFFFF,#FCFDFC);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow-card);padding:18px;margin:8px 0 18px}
@media(min-width:768px){.fc-panel{padding:26px}}
.fc-top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;flex-wrap:wrap}
.fc-headline{font-family:var(--font-display);font-weight:400;color:var(--ink);
  font-size:clamp(22px,5vw,32px);line-height:1.12;margin:8px 0 0}
.fc-pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.verdict{font-family:var(--font-mono);font-weight:600;letter-spacing:.06em;
  font-size:1.05rem;padding:5px 15px;border-radius:var(--radius-pill)}
.v-go{background:rgba(47,143,118,.14);color:var(--prime-ink)}
.v-fair{background:var(--sunrise-soft);color:var(--fair-ink)}
.v-rough{background:rgba(194,84,62,.16);color:var(--rough-ink)}
.v-unknown{background:var(--mist);color:var(--slate-soft)}
.pill{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.04em;padding:7px 13px;border-radius:var(--radius-pill)}
.pill .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.pill-prime{background:rgba(47,143,118,.12);color:var(--prime-ink)}
.pill-prime .dot{background:var(--prime)}
.pill-warn{background:rgba(194,84,62,.14);color:var(--rough-ink)}
.pill-warn .dot{background:var(--rough)}
/* alert = caution you plan around (e.g. scattered storms), not a no-go */
.pill-alert{background:var(--sunrise-soft);color:var(--fair-ink)}
.pill-alert .dot{background:var(--sunrise)}

/* Safety band: hazards render ABOVE best-window language, never below. */
.fc-hazards{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;
  padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(194,84,62,.07);border:1px solid rgba(194,84,62,.22)}
.fc-hazards.alert-only{background:var(--sunrise-soft);
  border-color:rgba(232,154,69,.35)}
.fc-hazards .hz-label{font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rough-ink);
  width:100%;margin-bottom:2px}
.fc-hazards.alert-only .hz-label{color:var(--fair-ink)}

.fc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
@media(min-width:700px){.fc-tiles{grid-template-columns:repeat(4,1fr);gap:12px}}
.fc-tiles .tile{background:var(--cloud);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 16px}
.fc-tiles .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-soft)}
.fc-tiles .val{font-family:var(--font-mono);font-size:26px;font-weight:500;
  color:var(--ink);margin-top:6px;line-height:1}
.fc-tiles .val small{font-size:13px;color:var(--slate-soft);font-weight:400}
.fc-tiles .sub{font-size:12.5px;color:var(--slate-soft);margin-top:6px}

/* ---- Unified day-timeline graph (tide + rain + storms + prime + seas) -- */
.fc-timeline{margin-top:22px}
.fc-tl-head{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:8px}
.fc-tl-legend{font-family:var(--font-mono);font-size:11.5px;
  color:var(--slate-soft);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fc-tl-legend .lg{display:inline-block;width:14px;height:0;border-top-width:2px;
  border-top-style:solid;margin-right:3px;vertical-align:middle}
.fc-tl-legend .lg-tide{border-top-color:var(--sea)}
.fc-tl-legend .lg-rain{border-top-style:dashed;border-top-color:var(--sea-bright)}
.fc-tl-legend .lg-prime{height:9px;border:0;background:var(--sunrise);
  opacity:.5;border-radius:2px}
.fc-tl-legend .lg-storm{height:9px;border:0;background:var(--rough);
  opacity:.4;border-radius:2px}
.fc-tl-svg{width:100%;height:160px;display:block;margin-top:8px;
  background:linear-gradient(180deg,rgba(169,207,207,.10),transparent 70%);
  border-radius:var(--radius-sm)}
/* sea-state strip colors (paired with the text label below for a11y) */
.fc-tl-svg .sea-flat{fill:var(--prime);opacity:.55}
.fc-tl-svg .sea-light-chop{fill:var(--fair);opacity:.5}
.fc-tl-svg .sea-moderate{fill:var(--sunrise-deep);opacity:.55}
.fc-tl-svg .sea-rough{fill:var(--rough);opacity:.6}
.fc-tl-svg .sea-unknown{fill:var(--line);opacity:.5}
.fc-tl-axis{display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:11px;color:var(--slate-soft);
  margin-top:2px}
.fc-tl-marks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fc-tl-marks .tl-mark{font-family:var(--font-mono);font-size:11.5px;
  color:var(--slate-soft);background:var(--mist);border-radius:var(--radius-pill);
  padding:4px 11px}
.fc-tl-marks .tl-prime{background:var(--sunrise-soft);color:var(--fair-ink)}
.fc-tl-marks .tl-sea{background:rgba(47,143,118,.12);color:var(--prime-ink)}

/* ---- Three decision scores (safety / fishability / comfort) ------------ */
/* Business plan: three distinct scores, never blended. Color is paired with
   a text word (Favorable/Marginal/Unfavorable) - never color alone. */
.fc-scores{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}
@media(min-width:640px){
  .fc-scores{grid-template-columns:repeat(3,1fr);gap:12px}
}
.score{border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;border-left-width:3px;background:var(--cloud)}
.score .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-soft)}
.score .val{font-family:var(--font-mono);font-size:30px;font-weight:500;
  color:var(--ink);margin-top:4px;line-height:1}
.score .word{font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  letter-spacing:.04em;margin-top:6px}
.score .blurb{font-size:12.5px;color:var(--slate-soft);margin-top:8px;
  line-height:1.5}
.score.s-go{border-left-color:var(--prime)}
.score.s-go .word{color:var(--prime-ink)}
.score.s-fair{border-left-color:var(--fair)}
.score.s-fair .word{color:var(--fair-ink)}
.score.s-rough{border-left-color:var(--rough)}
.score.s-rough .word{color:var(--rough-ink)}
.score.s-unknown{border-left-color:var(--line)}
.score.s-unknown .word{color:var(--slate-soft)}
.fc-meta{font-family:var(--font-mono);font-size:11.5px;color:var(--slate-soft);
  margin-top:14px;line-height:1.6}

/* Locked capability teaser (e.g. raw-data viewer for free users) */
.card.locked{border-style:dashed;background:var(--mist);margin-top:18px}
.card.locked b{color:var(--ink)}

/* Live forecast "building" state (async loader) ------------------------- */
.live-building{display:flex;align-items:center;gap:12px;margin-top:18px;
  color:var(--slate-soft);font-size:.92rem}
.spinner{flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--sea);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}

/* Map picker (settings) ------------------------------------------------- */
.map-box{height:340px;border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;position:relative}
@media(min-width:768px){.map-box{height:440px}}
.map-fallback{padding:16px;color:var(--slate-soft);font-size:.9rem}
.leaflet-container{font-family:var(--font-body)}
.mk-zone{background:var(--sunrise);color:var(--ink);border:2px solid #fff;
  border-radius:50%;width:30px;height:30px;display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:600;font-size:14px;
  box-shadow:0 2px 6px rgba(12,42,57,.4)}