/*
 * CoffeeDaddy shared design system.
 * Loaded AFTER each page's inline <style> so equal-specificity rules here win.
 *
 * Contents:
 *   1. Extra tokens shared by both themes
 *   2. Espresso-dark palette  (html[data-theme="dark"])
 *   3. Re-mapping of previously hardcoded colours onto tokens
 *   4. Motion: entrance animations, modal transitions, view transitions
 *   5. Skeleton loading shimmer
 *   6. Theme toggle (segmented control on the Settings page)
 */

/* ---------- 1. Shared tokens (light defaults) ---------- */
:root{
  --on-espresso:#f6ead9;       /* text on espresso/active surfaces */
  --feat-ink:#A86820;          /* featured pill text */
  --feat-line:#F3E2BD;         /* featured pill border */
  --ok-bg:#e6f0e3;  --ok-ink:#3f7339;  --ok-line:#cfe3c9;   /* peak / visited */
  --warn-bg:#f7e9d4;--warn-ink:#9d6a1f;--warn-line:#ecd6b0; /* resting / wishlist */
  --glass:rgba(255,255,255,.65);    /* translucent header pills */
  --glass-hover:rgba(255,255,255,.55);
  --flash:#d9efd6;             /* timer-done flash */
  color-scheme:light;
}

/* ---------- 2. Espresso-dark palette ---------- */
html[data-theme="dark"]{
  --bg:#15100A;
  --bg-grad:#1D150D;
  --surface:#231A11;
  --surface-2:#2E2316;
  --ink:#F1E6D4;
  --ink-soft:#BCA07A;
  --line:#3C2E1D;
  --espresso:#E0A14B;          /* active pills go honey-gold in the dark */
  --caramel:#C8882A;
  --caramel-dk:#A66B1E;
  --gold:#E0A14B;
  --vanilla:#3A2B14;
  --green:#7FB97A;
  --red:#E0785F;
  --shadow:0 6px 22px rgba(0,0,0,.5);
  --shadow-sm:0 2px 8px rgba(0,0,0,.4);
  --on-espresso:#1C120A;
  --feat-ink:#E8B25C;
  --feat-line:#4A3618;
  --ok-bg:#24371F;  --ok-ink:#9CCB95;  --ok-line:#35502E;
  --warn-bg:#3B2C12;--warn-ink:#DDAE5C;--warn-line:#574119;
  --glass:rgba(255,255,255,.06);
  --glass-hover:rgba(255,255,255,.09);
  --flash:#24371F;
  color-scheme:dark;
}

/* Smooth cross-fade when the user flips the theme (added briefly by theme.js) */
html.theme-anim, html.theme-anim *{
  transition:background-color .3s ease, color .3s ease, border-color .3s ease !important;
}

/* ---------- 3. Hardcoded colours → tokens ---------- */
header{background:linear-gradient(150deg,var(--bg) 0%,var(--bg-grad) 100%)}
.nav-tab:hover{background:var(--glass-hover)}
.nav-tab.active{color:var(--on-espresso)}
.sync,.stat{background:var(--glass)}
.sync:hover{background:var(--surface)}
.btn-dark,.chip.open,.chip-row .fchip.on,.m-chip-pick.on,.toast{color:var(--on-espresso)}
.btn-dark svg{stroke:currentColor}
.btn-primary svg{stroke:currentColor}
.toast .toast-action{
  color:inherit;
  border-color:color-mix(in srgb, currentColor 55%, transparent);
}
.toast .toast-action:hover{background:color-mix(in srgb, currentColor 14%, transparent)}
.search svg{stroke:var(--ink-soft)}
.chip.peak{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.chip.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.badge-visited{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.badge-wish{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.featured-pill{color:var(--feat-ink);border-color:var(--feat-line)}
.nb-marker{border-color:var(--feat-line)}
.brew-add input{background:var(--surface)}
.field input:focus,.field textarea:focus{background:var(--surface)}
/* "Open in Maps" pill: token-based so it reads clearly on the map in both themes */
.map-pin{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.map-box:hover .map-pin{background:var(--surface-2)}
/* Dark mode: dim the (always light) Google map tiles so they don't glare */
html[data-theme="dark"] .map-frame{filter:brightness(.72) contrast(1.06) saturate(.8)}
.lp-meta{color:var(--ink-soft)}
/* Timer ring colours follow the theme (CSS wins over SVG attributes) */
.ring-wrap svg circle:first-child{stroke:var(--line)}
#ringFg{stroke:var(--caramel);transition:stroke .25s ease}
.timer-modal.done #ringFg{stroke:var(--green)}
@keyframes flash{0%,100%{background:var(--surface)}50%{background:var(--flash)}}
/* Dark mode: tone the logo drop-shadows down, lift contrast a touch */
html[data-theme="dark"] .logo-icon{filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
html[data-theme="dark"] .logo-text{filter:brightness(1.6) drop-shadow(0 1px 2px rgba(0,0,0,.4))}

/* ---------- 4. Motion ---------- */
/* Cross-page transitions in browsers that support them (progressive). */
@view-transition{navigation:auto}

@media (prefers-reduced-motion: no-preference){
  /* Card / panel entrance: rise + fade, gently staggered */
  @keyframes cdIn{
    from{opacity:0;transform:translateY(10px) scale(.985)}
    to{opacity:1;transform:none}
  }
  .grid>*, .statgrid>*, .panel, .hi-card, .set-section, .now-brewing{
    animation:cdIn .42s cubic-bezier(.22,.7,.3,1) backwards;
  }
  .grid>:nth-child(1),.statgrid>:nth-child(1){animation-delay:.03s}
  .grid>:nth-child(2),.statgrid>:nth-child(2){animation-delay:.06s}
  .grid>:nth-child(3),.statgrid>:nth-child(3){animation-delay:.09s}
  .grid>:nth-child(4),.statgrid>:nth-child(4){animation-delay:.12s}
  .grid>:nth-child(5),.statgrid>:nth-child(5){animation-delay:.15s}
  .grid>:nth-child(6),.statgrid>:nth-child(6){animation-delay:.18s}
  .grid>:nth-child(n+7),.statgrid>:nth-child(n+7){animation-delay:.21s}
  /* After the first paint the page adds .settled — re-renders (search typing,
     sort changes) shouldn't replay the entrance animation. */
  .grid.settled>*{animation:none}

  /* Modal: overlay fades, dialog pops */
  @keyframes cdFade{from{opacity:0}}
  @keyframes cdPop{
    from{opacity:0;transform:translateY(14px) scale(.96)}
    to{opacity:1;transform:none}
  }
  .overlay.open{animation:cdFade .18s ease}
  .overlay.open .modal{animation:cdPop .3s cubic-bezier(.2,.85,.3,1.05)}

  /* Bar charts grow in */
  @keyframes cdGrow{from{width:0}}
  .bar-fill{animation:cdGrow .7s cubic-bezier(.22,.7,.3,1) backwards;animation-delay:.15s}

  /* Buttons get a soft lift on hover (pointer devices only) */
  @media (hover:hover){
    .btn{transition:transform .12s ease, filter .15s ease, box-shadow .15s ease}
    .btn:hover{transform:translateY(-1px)}
    .btn:active{transform:translateY(1px)}
  }
}

/* Keyboard focus is always visible, theme-aware */
:focus-visible{outline:2px solid var(--caramel);outline-offset:2px;border-radius:4px}

/* ---------- 5. Skeleton loading ---------- */
@keyframes cdShimmer{from{background-position:140% 0}to{background-position:-40% 0}}
.skel{
  position:relative;border-radius:10px;
  background:linear-gradient(100deg,
    var(--surface-2) 38%,
    color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 50%,
    var(--surface-2) 62%);
  background-size:220% 100%;
  animation:cdShimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){.skel{animation:none}}
.skel-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:16px;display:flex;flex-direction:column;gap:12px;
}
.skel-line{height:14px}
.skel-line.w60{width:60%}
.skel-line.w40{width:40%}
.skel-block{height:54px}
.skel-btn{height:46px;border-radius:12px}

/* ---------- Overlay: richer backdrop blur ---------- */
.overlay{
  -webkit-backdrop-filter:blur(8px) saturate(1.2);
  backdrop-filter:blur(8px) saturate(1.2);
}

/* ---------- 6. Theme toggle (Settings) ---------- */
.theme-seg{
  display:inline-flex;gap:4px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:12px;padding:4px;
}
.theme-seg button{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:9px;font-size:13.5px;font-weight:600;
  color:var(--ink-soft);background:none;border:none;cursor:pointer;
  font-family:inherit;transition:background .15s ease,color .15s ease;
}
.theme-seg button:hover{color:var(--ink)}
.theme-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.theme-seg button svg{width:15px;height:15px;flex:none}
.theme-hint{font-size:12.5px;color:var(--ink-soft);margin-top:10px}

/* ---------- 7. Glass floating nav ----------
   Replaces the old mobile bottom-nav and desktop header nav tabs.
   Works on all screen sizes: pill centered at bottom on desktop,
   stretches edge-to-edge with margins on mobile. */
/* One source of truth for the floating nav's footprint.
   The FAB, the toast and the page's bottom padding all used to hardcode
   "82px" / "90px" / "74px" against an assumed nav height. When the nav grew
   by 8px (44px touch targets in section 8) the FAB started overlapping it on
   any phone with a home indicator. Deriving all of them from these two
   values means that can't drift again. */
:root{
  --nav-bottom:24px;                 /* distance from the viewport bottom */
  --nav-height:46px;                 /* 2x5px padding + a 36px link       */
  --nav-clear:calc(var(--nav-bottom) + var(--nav-height) + 14px);
}
@media (pointer:coarse){
  :root{ --nav-height:64px; }        /* 2x5px padding + a 44px touch target, +10 slack */
}
@media (max-width:640px){
  :root{ --nav-bottom:max(10px, env(safe-area-inset-bottom)); }
}

.glass-nav{
  position:fixed;bottom:var(--nav-bottom);left:50%;transform:translateX(-50%);
  display:flex;gap:2px;padding:5px;
  background:rgba(247,240,228,.88);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  backdrop-filter:blur(22px) saturate(1.6);
  border:0.5px solid rgba(229,216,192,.9);
  border-radius:999px;
  box-shadow:0 8px 32px rgba(44,26,14,.16), 0 1px 0 rgba(255,255,255,.6) inset;
  z-index:40;
  white-space:nowrap;
}
.glass-nav a{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:999px;
  color:var(--ink-soft);text-decoration:none;
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  transition:color .15s ease, background .18s ease;
}
.glass-nav a:hover{color:var(--ink)}
.glass-nav a.active{background:var(--espresso);color:var(--on-espresso)}
.glass-nav a svg{width:18px;height:18px;flex:none}

html[data-theme="dark"] .glass-nav{
  background:rgba(21,16,10,.82);
  border-color:rgba(60,46,29,.8);
  box-shadow:0 8px 32px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset;
}
html[data-theme="dark"] .glass-nav a:hover{background:rgba(255,255,255,.06)}

/* Fallback: no backdrop-filter support — opaque warm surface */
@supports not (backdrop-filter:blur(1px)){
  .glass-nav{background:var(--surface);border-color:var(--line)}
}

/* Mobile: stretch + icon-only labels stay, slightly tighter padding */
@media(max-width:640px){
  .glass-nav{
    left:10px;right:10px;
    transform:none;justify-content:space-around;
  }
  .glass-nav a{padding:9px 11px;font-size:12.5px;gap:5px}
  /* FAB sits clear of the nav, measured from the nav's own footprint. */
  .fab{display:flex;bottom:var(--nav-clear);right:14px}
}

/* Global: extra bottom clearance so content doesn't hide behind the glass nav.
   body > main has higher specificity (0,0,2) than each page's inline main (0,0,1)
   so this wins without !important, even inside matching @media blocks. */
body > main{
  padding-bottom:calc(var(--nav-clear) + 16px);
}

/* Toast: float above the glass nav */
.toast{bottom:var(--nav-clear)}

/* ---------- 8. Motion, input and target-size hardening ---------- */

/* Honour the OS "reduce motion" setting everywhere, including the cross-page
   view transition and the glass-nav / button micro-interactions above. */
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html.theme-anim, html.theme-anim *{transition:none !important}
}

/* iOS Safari inflates text in landscape unless told not to. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Grey flash on tap looks broken next to the warm palette. */
a, button, [role="button"], .fchip, .card{
  -webkit-tap-highlight-color:rgba(139,94,40,.15);
}

/* Touch targets: WCAG 2.2 asks for 24px minimum, platform guidance for 44px.
   Applied only on coarse pointers so the desktop layout is untouched. */
@media (pointer:coarse){
  .glass-nav a{min-height:44px}
  .x-btn, .icon-btn, .sync, .fb-clear, .star-input .si{min-width:44px;min-height:44px}
  /* These grow past their content, so the content has to be re-centred —
     without this the sync dot sits hard against the left edge of the pill. */
  .x-btn, .icon-btn, .sync, .fb-clear{
    display:inline-flex;align-items:center;justify-content:center;
  }
  .btn{min-height:44px}
}

/* Modals shouldn't scroll the page behind them when they hit their end stop. */
.modal, .modal-body, .sync-pop{overscroll-behavior:contain}

/* The sync pill is a <button> now — reset the UA border/background it inherits
   and keep the focus ring clear of the pill's rounded edge. */
.sync{font-family:inherit;border-radius:999px}
.sync:focus-visible{outline-offset:3px}

/* NOTE: do not add content-visibility:auto to the cards here.
   It was tried in v1.8 and reverted: on iOS Safari the skipped-rendering
   containers thrash the document height as you scroll, which strands the
   position:fixed glass nav mid-page and leaves the page looking frozen.
   The card lists are short enough that it bought nothing anyway. */