/* Forecast deck contents. */

/* ---- hero: the BLEND-NQ reading, and its uncertainty beside it ----------
   Flat material, no gradient wash: the number is the hero, not the card. */
.hero{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;
  padding:22px 18px 18px;border-radius:var(--radius);margin:10px 0 14px;
  background:var(--fill);
  border:.5px solid var(--stroke);
}
.hero .art{width:72px;height:72px;flex:none}
.hero .read{min-width:0}
.hero .read .eyebrow{color:var(--signal)}
.hero .big{display:flex;align-items:baseline;gap:8px;margin:2px 0 1px}
.hero .big b{font-size:52px;font-weight:650;line-height:.95;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.hero .big span{font-size:15px;color:var(--ink-2)}
.hero .sub{font-size:13px;color:var(--ink-2);margin:0}
.hero .band{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  height:26px;padding:0 10px;border-radius:999px;
  background:var(--fill);border:.5px solid var(--stroke);
  font-size:11.5px;color:var(--ink-2);
}
.hero .band b{font-weight:650;color:var(--ink)}
.hero .band .tick{width:6px;height:6px;border-radius:999px;background:var(--signal)}

/* ---- four signals ------------------------------------------------------- */
.signals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.signal{
  padding:10px 11px;border-radius:var(--radius-sm);
  background:var(--fill);border:.5px solid var(--stroke);
}
.signal .eyebrow{display:block;margin-bottom:5px}
.signal b{font-size:17px;font-weight:600}
.signal i{font-size:10.5px;font-style:normal;color:var(--ink-3);margin-left:2px}

/* ---- section heading ---------------------------------------------------- */
.sect{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 2px 9px}
/* Two eyebrows in one row: the left one names the section and may wrap, the
   right one is a short qualifier and must never be broken across lines. */
.sect .eyebrow:last-child{flex:none;text-align:right;white-space:nowrap}
.sect .eyebrow{color:var(--ink-3)}
.sect a,.sect button{font-size:12.5px;font-weight:600;color:var(--signal)}

/* ---- day accordion ------------------------------------------------------
   Collapsed carries the decision: sky, wind range, rain. Expanded adds the
   hour-by-hour and the sea state, because that is the second question, not
   the first. */
.days{border-radius:var(--radius);overflow:hidden;border:.5px solid var(--stroke);
  background:var(--fill)}
.day + .day{border-top:.5px solid var(--stroke)}
.day.open{background:var(--tint)}
.dayhead{
  width:100%;display:grid;
  grid-template-columns:34px 68px 34px minmax(0,1fr) 46px 16px;
  align-items:center;gap:10px;padding:11px 13px;text-align:left;
}
.dayhead .g{width:34px;height:34px}
.dayhead .nm{font-size:13.5px;font-weight:650;white-space:nowrap}
.dayhead .nm small{display:flex;align-items:center;gap:3px;margin-top:2px;
  font-size:10.5px;font-weight:500;color:var(--ink-3)}
.dayhead .drop{width:9px;height:9px;fill:var(--signal);opacity:.75}
/* The day's temperature is its own column, high over low, so a week of rows
   reads down as a temperature column the way the wind reads on the right. */
.dayhead .temp{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;
  font-variant-numeric:tabular-nums}
.dayhead .temp b{font-size:14px;font-weight:600;color:var(--ink)}
.dayhead .temp small{font-size:11px;font-weight:500;color:var(--ink-3)}
.dayhead .bar{position:relative;height:5px;border-radius:999px;background:var(--tile-h)}
.dayhead .bar i{position:absolute;top:0;bottom:0;border-radius:999px}
.dayhead .kn{justify-self:end;text-align:right}
.dayhead .kn b{font-size:15.5px;font-weight:600}
.dayhead .kn small{display:block;font-size:10px;color:var(--ink-3)}
.dayhead .chev{width:16px;height:16px;justify-self:end;opacity:.4;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s var(--ease)}
.day.open .dayhead .chev{transform:rotate(180deg);opacity:.9;color:var(--signal)}

.daybody{padding:0 13px 14px}
.hours{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:none}
.hours::-webkit-scrollbar{display:none}
.hour{
  flex:none;width:58px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px;border-radius:var(--radius-sm);
  background:var(--tile);border:.5px solid transparent;
  transition:border-color .14s var(--ease),background .14s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .hour:hover{background:var(--tile-h)} }
.hour.now{border-color:color-mix(in srgb,var(--now) 65%,transparent);
  background:color-mix(in srgb,var(--now) 14%,var(--tile))}
.hour time{font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hour.now time{color:var(--now);font-weight:700}
.hour img{width:26px;height:26px}
.hour b{display:flex;align-items:center;gap:2px;font-size:12.5px;font-weight:600}
.hour .dir{width:11px;height:11px;fill:none;stroke:var(--ink-2);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.hour em{font-size:9.5px;font-style:normal;color:var(--ink-3)}

/* Four now that air temperature sits beside the sea temperature it is always
   read against. At phone width four 1fr columns would crush the numbers, so
   it wraps to two rows instead of shrinking. */
.seastate{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
@media (max-width:430px){ .seastate{grid-template-columns:repeat(2,1fr)} }
.seastate u{text-decoration:none;display:block;margin-top:1px;
  font:10px var(--mono);color:var(--ink-3)}
.seastate div{padding:8px 10px;border-radius:12px;background:var(--sunk)}
.seastate .eyebrow{display:block;margin-bottom:3px}
.seastate b{font-size:14px;font-weight:600}

/* ---- footer note -------------------------------------------------------- */
.provenance{
  margin:16px 2px 0;font-size:11px;line-height:1.5;color:var(--ink-3);
}
.provenance b{color:var(--ink-2);font-weight:600}

/* ---- desktop: room for more, so show more ------------------------------- */
@media (min-width:1080px){
  .hero{grid-template-columns:auto minmax(0,1fr);padding:16px}
  .hero .art{width:68px;height:68px}
  .hero .big b{font-size:40px}
  .signals{grid-template-columns:repeat(2,1fr)}
  .dayhead{grid-template-columns:32px 68px 34px minmax(0,1fr) 46px 16px}
}

/* ── Destinations inside the deck ─────────────────────────────────────────
   Fishing and the passage planner are not separate screens: they replace the
   deck's body so the map behind never moves and the way back is always the
   same control in the same place. */

.backrow{display:flex;align-items:center;gap:6px;margin:12px 0 14px;padding:7px 12px 7px 8px;
  border:0;border-radius:999px;background:var(--tile);color:var(--ink);
  font:600 13px/1 var(--font);letter-spacing:.01em;cursor:pointer}
.backrow:active{background:var(--tile-a)}
.backrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.vh{margin:0 0 10px;font:600 17px/1.25 var(--font);letter-spacing:-.01em}
.vp{margin:0 0 10px;font:400 13px/1.55 var(--font);color:var(--ink-2)}
.vp b{color:var(--ink);font-weight:600}

/* ── Fishing ──────────────────────────────────────────────────────────── */

.wins{display:flex;flex-direction:column;gap:8px}
.win{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:15px;
  background:var(--tile);border:.5px solid var(--stroke)}
.win.prime{background:var(--prime);
  border-color:var(--prime-edge)}
.win .wt{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.win .wt b{font:600 14px/1.2 var(--font);letter-spacing:-.01em}
.win .wt span{font:600 10.5px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3)}
.win.prime .wt span{color:var(--good)}
.win .ww{font:400 12px/1.35 var(--font);color:var(--ink-2);text-transform:capitalize}

.tideday{margin-top:12px;padding:14px 14px 10px;border-radius:20px;
  background:var(--fill);border:.5px solid var(--stroke)}
.tdhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:10px}
.tdhead b{font:600 13px/1 var(--font)}
.tdmoon{font:500 11px/1.2 var(--font);color:var(--ink-3);text-align:right}
.tdmoon b{font:600 11px/1 var(--font);color:var(--moon);font-variant-numeric:tabular-nums}

/* Height follows the viewBox so the scale stays uniform in both axes. Only
   horizontal drags belong to the chart; vertical ones still scroll the deck. */
.tdwrap{position:relative}
.tdchart{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y;
  cursor:crosshair;-webkit-user-select:none;user-select:none}
.td-bg{fill:var(--chartbg)}
/* Night is always a darkening, in both themes — never an ink tint, which
   in dark mode would make the night the brightest thing on the chart. */
.td-night{fill:#06101c;opacity:var(--night-a)}
.td-twi{fill:#06101c;opacity:calc(var(--night-a) / 2)}
.td-grid{stroke:var(--ink);stroke-opacity:.08;stroke-width:1;stroke-dasharray:2 3}
.td-wcol{fill:var(--good);opacity:.10}
.td-wcol.prime{opacity:.18}
.td-area{fill:var(--signal);opacity:.09}
.td-line{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.td-turn{fill:var(--glass-deck);stroke:var(--signal);stroke-width:1.6}
.td-turn.hi{fill:var(--signal)}
.td-tlabel{font:600 9px var(--font);fill:var(--ink-2);font-variant-numeric:tabular-nums}
.td-tlabel.hi{fill:var(--signal)}
.td-now{stroke:var(--now);stroke-width:1.4;stroke-dasharray:3 3}
.td-track{fill:var(--ink);opacity:.06}
.td-moon{fill:var(--moon);opacity:.55}
.td-over{fill:var(--moon);stroke:var(--glass-deck);stroke-width:1.6}
.td-under{fill:var(--glass-deck);stroke:var(--moon);stroke-width:1.8}
.td-bite{fill:var(--good);opacity:.55}
.td-bite.prime{opacity:1}
.td-cursor{display:none}
.td-cursor.on{display:inline}
.td-cursor line{stroke:var(--ink);stroke-opacity:.45;stroke-width:1}
.td-cursor circle{fill:var(--ink);stroke:var(--glass-deck);stroke-width:2}

.tdtip[hidden]{display:none}
/* Inside the plot's top corner on the far side of the cursor, so it never
   covers the moment being read or spills onto the card above. */
.tdtip{position:absolute;top:4px;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;gap:2px;padding:7px 10px;border-radius:11px;
  background:var(--tip);border:.5px solid var(--stroke-2);box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);white-space:nowrap;
  font:500 11px/1.3 var(--font);color:var(--ink-2);font-variant-numeric:tabular-nums}
.tdtip b{font:650 13px/1.2 var(--font);color:var(--ink)}
.tdtip .tw{color:var(--good);font-weight:600}

.tdaxis{display:flex;justify-content:space-between;margin-top:5px;padding:0 1px}
.tdaxis span{font:500 9.5px/1 var(--font);color:var(--ink-3);letter-spacing:.04em;
  font-variant-numeric:tabular-nums}

.tdkey{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:11px;padding:0 2px}
.tdkey span{display:flex;align-items:center;gap:6px;font:500 10.5px/1 var(--font);
  color:var(--ink-3);letter-spacing:.02em}
.tdkey i{flex:none;width:14px;height:6px;border-radius:3px}
.tdkey .k-bite{background:var(--good);opacity:.55}
.tdkey .k-bite.prime{opacity:1}
.tdkey .k-moon{background:var(--moon);opacity:.55}
.tdkey .k-over,.tdkey .k-under{width:9px;height:9px;border-radius:50%;background:var(--moon)}
.tdkey .k-under{background:transparent;border:1.6px solid var(--moon)}
.tdkey .k-night{background:color-mix(in srgb,#06101c calc(var(--night-a) * 160%),transparent);
  box-shadow:inset 0 0 0 .5px var(--stroke-2)}

.astro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:12px 0 2px}
.astro .orb{min-width:0;display:grid;grid-template-columns:27px minmax(0,1fr) max-content;align-items:center;gap:9px;padding:12px;border-radius:15px;background:var(--fill);border:.5px solid var(--stroke)}
/* The glyph is the only lit thing on the card, so it gets the light: a soft
   radial bloom behind it rather than a flat emoji on a flat tile. */
.astro .orb i{position:relative;isolation:isolate;display:grid;place-items:center;
  width:27px;height:27px;border-radius:999px}
/* z-index:-1 inside an isolated element puts the bloom behind the glyph but
   still in front of the card, which is where light actually is. */
.astro .orb i::before{content:"";position:absolute;inset:-6px;z-index:-1;border-radius:999px;
  background:radial-gradient(circle,var(--glow) 0%,transparent 70%)}
.astro .orb:first-child i{--glow:var(--glow-sun)}
.astro .orb:last-child i{--glow:var(--glow-moon)}
.astro .orb i{font-style:normal;font-size:21px;line-height:1}.astro .orbcopy{min-width:0;display:block}.astro .orbcopy b{display:block;overflow:hidden;text-overflow:ellipsis;font:600 13px/1.15 var(--font);white-space:nowrap}.astro .orbcopy small{display:block;overflow:hidden;margin-top:4px;text-overflow:ellipsis;font:500 10px/1 var(--mono);color:var(--ink-3);white-space:nowrap}.astro .orbvalue{justify-self:end;font:650 13px/1 var(--mono);letter-spacing:-.02em;white-space:nowrap;color:var(--ink)}
@media(max-width:420px){
  .astro{grid-template-columns:1fr;gap:7px}
  .astro .orb{grid-template-columns:28px minmax(0,1fr) auto;padding:11px 12px}
  .astro .orbcopy small{font-size:10.5px}
}
/* Desktop cards remain side by side; their details get a full second row
   rather than competing with the value in a narrow sidebar column. */
@media(min-width:1080px){
  .astro .orb{gap:6px 8px}
  .astro .orbcopy{display:contents}
  .astro .orbcopy b{grid-column:2;grid-row:1}
  .astro .orbvalue{grid-column:3;grid-row:1}
  .astro .orbcopy small{grid-column:1 / -1;grid-row:2;margin:0;
    white-space:normal;overflow:visible;line-height:1.5;color:var(--ink-2)}
}

.spots{display:flex;flex-direction:column;gap:6px}
.spot{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;
  width:100%;padding:10px 12px;border:0;border-radius:14px;text-align:left;cursor:pointer;
  background:var(--tile);color:var(--ink);font:inherit}
.spot:active{background:var(--tile-h)}
.spot b{font:600 13.5px/1.25 var(--font);letter-spacing:-.01em}
.spot span{grid-column:1;font:400 11.5px/1.3 var(--font);color:var(--ink-3)}
.spot i{grid-row:1/3;grid-column:2;font:600 12px/1 var(--mono);font-style:normal;
  color:var(--signal)}

.species{display:flex;flex-wrap:wrap;gap:6px}
.species .sp{padding:6px 11px;border-radius:999px;font:500 12px/1 var(--font);
  color:var(--ink-2);background:var(--tile);
  border:.5px solid var(--stroke)}

/* ── Passage ──────────────────────────────────────────────────────────── */

.pform{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.pf2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pf{display:flex;flex-direction:column;gap:5px;min-width:0}
.pf select{appearance:none;width:100%;padding:10px 30px 10px 12px;border-radius:13px;
  background:var(--tile)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa3ba' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 9px center/15px;
  border:.5px solid var(--stroke);color:var(--ink);
  font:600 13.5px/1.2 var(--font);letter-spacing:-.01em;
  text-overflow:ellipsis;cursor:pointer}
.pf select:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.pf select option{background:var(--opt-bg);color:var(--ink)}
@media (pointer:coarse), (max-width:1079px){
  .pf select{font-size:16px;min-height:44px}
  .backrow{min-height:36px}
}

.psum{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;overflow:hidden;
  border-radius:16px;background:var(--tile)}
.psum>div{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 4px;background:var(--panel)}
.psum .eyebrow{font-size:9.5px}
.psum b{font:600 19px/1 var(--mono);letter-spacing:-.02em}
.psum i{font:500 10px/1 var(--font);font-style:normal;color:var(--ink-3)}

.pverdict{display:flex;flex-direction:column;gap:3px;margin:10px 0 16px;padding:12px 14px;
  border-radius:16px;border:.5px solid color-mix(in srgb,var(--vc) 40%,transparent);
  background:color-mix(in srgb,var(--vc) 11%,transparent)}
.pverdict>b{font:600 14px/1 var(--font);color:var(--vc)}
.pverdict>span{font:400 12.5px/1.45 var(--font);color:var(--ink-2)}
.pverdict .num{color:var(--ink);font-weight:600}

.legs{display:flex;flex-direction:column;gap:1px;border-radius:16px;overflow:hidden;
  background:var(--tile)}
.leg{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;
  padding:10px 13px;background:var(--panel)}
.leg time{font:600 12.5px/1 var(--mono);color:var(--ink-2)}
.leg .lnm{display:flex;flex-direction:column;gap:2px;min-width:0;
  font:500 12.5px/1 var(--mono);color:var(--ink)}
.leg .lnm small{font:400 10.5px/1.2 var(--font);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leg .lw{display:flex;align-items:baseline;gap:3px;color:var(--vc)}
.leg .lw b{font:600 16px/1 var(--mono);letter-spacing:-.02em}
.leg .lw i{font:500 10px/1 var(--font);font-style:normal;color:var(--ink-3)}
.leg .lr{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.leg .lr em{font:600 10px/1 var(--font);font-style:normal;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}
.leg .lr em[data-k="head"]{color:var(--head-wind)}
.leg .lr em[data-k="stern"]{color:var(--good)}
.leg .lr small{font:500 10.5px/1 var(--mono);color:var(--ink-3)}

/* The wide-desktop rhythm column's "right now" strip. */
.rnow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;
  border-radius:16px;background:var(--tile)}
.rnow>div{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 4px;background:var(--panel)}
.rnow .eyebrow{font-size:9.5px}
.rnow b{font:600 19px/1 var(--mono);letter-spacing:-.02em}
.rnow i{font:500 10px/1 var(--font);font-style:normal;color:var(--ink-3)}


/* ---- saved passages ------------------------------------------------------
   A route you plan every weekend should not need retyping every weekend. The
   row reopens it; the cross forgets it. */
.routes{display:grid;gap:4px;margin-bottom:12px}
.rt{display:flex;align-items:center;gap:6px}
.rtgo{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;
  padding:9px 12px;border-radius:13px;text-align:left;
  background:var(--tile);border:.5px solid var(--stroke);color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .rtgo:hover{background:var(--tile-h)} }
.rtgo b{font:600 13px/1.2 var(--font);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtgo span{margin-left:auto;font:500 10.5px/1 var(--mono);color:var(--ink-3);white-space:nowrap}
.rtdel{width:30px;height:30px;flex:none;border-radius:999px;display:grid;place-items:center;
  color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){ .rtdel:hover{background:var(--fill-2);color:var(--ink)} }
.rtdel svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rtsave{margin-top:14px}
.rtsave button{width:100%;height:38px;border-radius:13px;
  background:color-mix(in srgb,var(--signal) 20%,transparent);
  border:.5px solid color-mix(in srgb,var(--signal) 42%,transparent);
  color:var(--ink);font:600 13px/1 var(--font)}
.rtsave button:active{background:color-mix(in srgb,var(--signal) 32%,transparent)}