/* ============================================================================
   CHOPCHECK — hub + planner layer
   Rides on css/app.css and its tokens only. No new palette: dawn amber leads,
   water teal supports, lake-ink surfaces, bone ink. Everything interactive
   moves in 150–250 ms and holds its footprint while data loads, so nothing
   jumps. app.css already collapses all motion under prefers-reduced-motion.
   ========================================================================== */

/* --- shared polish ------------------------------------------------------- */
.cc-press{
  transition:transform .16s ease, border-color .18s ease,
             background-color .18s ease, box-shadow .2s ease;
}
.cc-press:active{ transform:scale(.977); }
@media (hover:hover){
  .cc-press:hover{ border-color:var(--border-hi); box-shadow:var(--shadow-lift); }
}

/* skeleton placeholder — same footprint as the number it stands in for */
.skel{
  display:inline-block; position:relative; overflow:hidden;
  background:var(--surface-sunk); border-radius:8px;
  color:transparent !important; min-height:1em; min-width:3.5ch;
}
.skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, oklch(90% .03 85 / .07) 50%, transparent 80%);
  animation:cc-shimmer 1.4s ease-in-out infinite;
}
@keyframes cc-shimmer{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

/* --- HUB ----------------------------------------------------------------- */
/* The big-water verdict paints a moment after load. Its card holds close to
   its final height from the first frame (skeleton rows fill it meanwhile),
   so the gate and buttons below it do not jump when the numbers land. */
#bigwater{ display:block; }
#bigwater .vp-card{ margin:14px 0 0; min-height:430px; }
@media (min-width:701px){ #bigwater .vp-card{ min-height:380px; } }

/* compact current-water panel */
.hubnow{ margin-top:14px; padding:18px var(--pad) 16px; }
.hubnow .verdictline{ margin-top:10px; }
.hubnow .verdictline .score{ font-size:44px; }
.hubnow .callout{ font-size:13.5px; color:var(--on-deep-muted); margin-top:8px; max-width:52ch; line-height:1.5; }
.hubnow .herocta{ display:flex; gap:9px; margin-top:14px; flex-wrap:wrap; }
.hubnow .herocta .btn{ background:var(--signal); color:var(--on-signal); }
.hubnow .herocta .btn.ghost{ background:oklch(94% .02 90 / .13); color:var(--on-deep); border-color:oklch(94% .02 90 / .25); }

/* compact water gate (first run) */
.hubgate{ margin-top:14px; }
.hubgate .scene-body{ min-height:min(44svh, 360px); justify-content:flex-end; }
.hubgate h1{ font-size:clamp(24px,6vw,30px); color:var(--on-deep); margin-top:6px; }
.hubgate .sub{ color:var(--on-deep-muted); font-size:13.5px; margin-top:8px; max-width:46ch; }
.hubgate .herosearch{ margin-top:14px; }

/* glance row — three answers, one line each */
.glance{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.gl{
  display:flex; flex-direction:column; gap:3px; min-height:86px;
  padding:12px 12px 11px; border-radius:var(--r);
  border:1px solid var(--border); background:var(--surface);
  box-shadow:var(--shadow-card); text-align:left; min-width:0;
}
.gl .gl-k{ font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:500; }
.gl .gl-v{ font-family:var(--font-display); font-size:15.5px; font-weight:600; letter-spacing:-.01em; line-height:1.2;
           overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.gl .gl-s{ font-size:11px; color:var(--muted); line-height:1.35; margin-top:auto;
           overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.gl .gl-v .num{ font-size:15.5px; }

/* big obvious buttons */
.bigbtns{ margin-top:14px; }
.bb-primary{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:16px 16px; border-radius:var(--r);
  background:var(--signal); color:var(--on-signal);
  border:1px solid transparent; box-shadow:var(--shadow-card);
  font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.01em;
}
.bb-primary .ic{ width:22px; height:22px; }
.bb-primary .chev{ margin-left:auto; opacity:.75; }
.bb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.bb{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:76px; padding:12px 6px; border-radius:var(--r);
  border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-card);
  text-align:center;
}
.bb .ic{ width:21px; height:21px; color:var(--water); }
.bb b{ font-family:var(--font-ui); font-size:12.5px; font-weight:600; letter-spacing:0; line-height:1.2; }
.rulesline{
  display:flex; align-items:center; gap:9px; margin-top:12px; padding:11px 14px;
  border:1px solid var(--border); border-radius:var(--r); background:var(--surface-sunk);
  font-size:12.5px; color:var(--fg-2);
}
.rulesline .ic{ color:var(--water); }
.rulesline b{ color:var(--fg); }

/* --- PLANNER ------------------------------------------------------------- */
.stepnum{
  width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; flex:none;
  font:600 11.5px var(--font-mono); background:var(--accent-wash); color:var(--accent-ink);
}
.bwin{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.bwin-row{
  display:flex; align-items:center; gap:11px; padding:11px 12px;
  border:1px solid var(--border); border-radius:var(--r); background:var(--surface-sunk);
  text-align:left; width:100%;
}
.bwin-row.lead{ border-color:oklch(77% .155 63 / .4); background:var(--signal-wash); }
.bwin-row .bw-when{ font-family:var(--font-display); font-weight:600; font-size:14.5px; letter-spacing:-.008em; }
.bwin-row .bw-why{ display:block; font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4; }
.bwin-row .pill{ margin-left:auto; flex:none; }

/* boat chips */
.boatrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.boatchip{
  padding:9px 13px; border-radius:var(--r-pill); border:1px solid var(--border-strong);
  background:var(--surface-sunk); color:var(--fg-2); font-size:13px; font-weight:500; cursor:pointer;
}
.boatchip[aria-pressed="true"]{
  background:var(--accent-wash); border-color:oklch(74% .13 72 / .55); color:var(--accent-ink); font-weight:600;
}

/* feeding times + light */
.suntimes{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:4px; }
.suntimes .st{ text-align:center; padding:10px 4px; border-radius:12px; background:var(--surface-sunk); }
.suntimes .st .ic, .suntimes .st .wxi{ color:var(--signal-ink); margin:0 auto 4px; display:block; width:18px; height:18px; }
.suntimes .st b{ display:block; font-family:var(--font-mono); font-size:13.5px; font-weight:600; }
.suntimes .st span{ display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:2px; }
.feedwins{ display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.feedwin{ display:flex; align-items:center; gap:10px; font-size:13px; }
.feedwin .pill{ flex:none; min-width:58px; justify-content:center; }
.feedwin b{ font-family:var(--font-mono); font-weight:600; font-size:13.5px; }
.feedwin span{ color:var(--muted); font-size:12px; }

/* hourly strip for the chosen day — extends app.css .hours/.hour */
.hour .cc-air{ font-family:var(--font-mono); font-size:13px; font-weight:600; margin-top:4px; }
.hour .cc-wind{ font-family:var(--font-mono); font-size:11px; color:var(--fg-2); margin-top:3px; }
.hour .cc-gust{ font-family:var(--font-mono); font-size:9.5px; color:var(--muted); }
.hour .cc-wave{ font-family:var(--font-mono); font-size:11px; color:var(--water-ink); margin-top:3px; }
.hour .cc-pr{ font-family:var(--font-mono); font-size:9.5px; color:var(--muted); margin-top:3px; }
.cc-rowlab{
  display:flex; justify-content:space-between; font-size:10px; color:var(--faint);
  text-transform:uppercase; letter-spacing:.07em; margin-top:8px;
}

/* plan output */
.planhead .verdictline{ margin-top:12px; }
.gonote{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--on-deep); }
.gonote b{ font-weight:650; }
.yourcall{ margin-top:9px; font-size:11px; color:var(--on-deep-muted); }
.towline{ display:flex; align-items:flex-start; gap:9px; margin-top:11px; font-size:13px; color:var(--fg-2); line-height:1.5; }
.towline .ic{ color:var(--water); margin-top:2px; }
#planout .card{ margin-top:14px; }
#planout{ scroll-margin-top:76px; }

/* --- print: the one-page plan ------------------------------------------- */
@media print{
  body{ background:#fff !important; color:#111; font-size:12px; }
  #app-top, #app-bottom, .pagehd, .cols > .stack:first-child,
  [data-od-id="plan-bestwin"], [data-od-id="saved-trips"],
  #hd-trips, #trips, .noprint, .tabbar, .appbar, .brandmark{ display:none !important; }
  .main{ padding:0; max-width:none; }
  #planout{ display:block !important; }
  #planout .card, #planout .bite{
    background:#fff !important; color:#111 !important; border:1px solid #bbb !important;
    box-shadow:none !important; border-radius:8px; padding:10px 12px; margin-top:8px !important;
    page-break-inside:avoid;
  }
  #planout .bite::after{ display:none; }
  #planout h2, #planout h3, #planout b, #planout .name{ color:#111 !important; }
  #planout .eyebrow, #planout .meta, #planout .mut, #planout .sm, #planout .xs,
  #planout .gonote, #planout .yourcall, #planout .towline, #planout p, #planout span,
  #planout dt, #planout dd{ color:#333 !important; }
  #planout .pill, #planout .why{ border:1px solid #999 !important; background:#fff !important; color:#111 !important; }
  #planout .suntimes .st, #planout .bwin-row, #planout .hour{ background:#f4f4f4 !important; }
  #planout .note{ background:#f4f4f4 !important; border:1px solid #bbb; }
  #planout .hours{ overflow:visible; flex-wrap:wrap; }
  #planout .gearrow input{ -webkit-appearance:checkbox; }
  a{ text-decoration:none; color:#111; }
}

/* --- small screens ------------------------------------------------------- */
@media (max-width:420px){
  .bb-grid{ grid-template-columns:repeat(3,1fr); }
  .glance{ grid-template-columns:repeat(3,1fr); }
  .gl .gl-v{ font-size:14px; }
  .suntimes{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:900px){
  .bb-grid{ grid-template-columns:repeat(6,1fr); }
  .glance{ gap:10px; }
}