/* ============================================================================
   ChefKopf · "Feed" — 2026-05-21 social-media restructure + restyle
   ----------------------------------------------------------------------------
   What changed vs. the previous "Ember Lounge" pass:

   • App-shell. A sticky top bar carries the brand mark, primary nav and
     the three-state theme switcher (light · dark · auto). Every page
     opens with it. The legal foot stays, but the brand-foot wordmark is
     quieter — the topbar already signs the page.
   • Cards rebuilt as social posts. Avatar + handle + relative time row
     above the headline; an "Open mix →" action footer below. The card
     still ships as `<div class="card">` for downstream test stability,
     but inside the markup now reads like a social-feed post, not a
     dashboard tile.
   • Single-column feed. Catalogue grid is always-open — the
     <details> collapse retired. Discovery chrome (editorial hero +
     activity strip) sits ABOVE the feed on the default view;
     filtered/search views drop the chrome and lead with results.
   • Catalogue filter menu (replace-mood-with-tag-search). The mood/
     Stimmung atlas was retired in favour of a real tag-filter menu — a
     collapsed <details> GET form over the ?tag / ?brand / ?strength
     facets that rides in the feed toolbar and auto-opens when a facet
     is active. See section 10 (.catalogue-filter).
   • Theme switcher. `data-theme="light"` and `data-theme="dark"` on
     <html> pin the palette (cookie-driven). Without an override the
     stylesheet still respects prefers-color-scheme. A tiny inline
     <script> in <head> stamps the attribute pre-paint to kill FOUC.
   • Atmosphere dialled back. The double radial-vignette on body was
     loud; replaced with a single subtle warm gradient anchored to the
     top of the page where the app-bar lives. Cards rely on their own
     soft elevation instead of competing with the page background.
   • Editorial hero tightened. From a magazine cover down to a pinned
     post — same `.editorial-hero` class name, smaller padding, less
     ornament.
   • Other previously-asserted class names + canonical ordering preserved
     (.editorial-hero, .editorial-title, .editorial-eyebrow, .card,
     .new-mix-link, .sort, .sort-link, .recent-search-chip, etc.).
   ========================================================================== */


/* ----------------------------------------------------------------------------
   0. Display typeface — self-hosted Fraunces (variable, latin subset)
   ----------------------------------------------------------------------------
   The single biggest "reinvention" lever: a warm, high-contrast editorial
   soft-serif on every headline + the wordmark. Self-hosted (NOT hot-linked
   from Google) so a German-facing app leaks zero visitor IPs to Google on
   load. font-display: swap → first paint uses the serif fallback, no
   blocking. One variable file per axis covers the full 100–900 range.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/font/fraunces-normal.woff2") format("woff2");
  /* Slight optical-size + softness tuning baked into the variable file. */
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/font/fraunces-italic.woff2") format("woff2");
}

/* ----------------------------------------------------------------------------
   1. Design tokens — light is the default, dark overrides via data-theme.
   -------------------------------------------------------------------------- */

:root {
  /* ── Brass accent family ──────────────────────────────────────────────
     The "Smoke & Brass" reinvention retires the bright red-orange ember
     (#c2410c) for a burnished BRASS-AMBER — the colour of lamplight through
     a glass base, of aged brass on a Kaloud, of whisky. Warmer, more
     golden, unmistakably "lounge" rather than "alert". Token NAMES are
     unchanged (300+ rules reference --ck-ember*), only the values move.
     --ck-ember carries large fills (CTAs, wordmark K, avatars, focus ring);
     --ck-link routes small text to an AA-safe darker brass. */
  --ck-ember:        #a45c0e;   /* primary brass — 4.7:1 white-on-fill */
  --ck-ember-hot:    #80470a;   /* hover/pressed + AA link hue (6.3:1) */
  --ck-ember-soft:   #f6e7c9;   /* pale brass wash (active ghost, hovers) */
  --ck-ember-glow:   rgba(164, 92, 14, .24);
  /* Text colour that rides on top of an --ck-ember fill. Light: white
     (4.7:1 on the deep brass). Dark mode flips it to espresso, because the
     dark-mode brass goes BRIGHT and needs dark text (see §21). */
  --ck-on-ember:     #ffffff;

  /* Semantic link/small-accent color (fix-ember-link-contrast, 2026-05-30).
     Bright --ck-ember (#c2410c) measured below the 4.5:1 AA floor for
     normal-size text on the warm surfaces (~4.4 on surface-deep/ember-soft).
     --ck-link routes small-text links + accents to the AA-safe ember-hot
     in light mode (6.2–7.3:1) and is overridden to a LIGHTER ember in the
     dark blocks below — because on the dark surface a darker hue REDUCES
     contrast, so dark mode needs the opposite shift. Large fills (buttons,
     avatars, brand K) keep bright --ck-ember: they pass the 3:1 large-text /
     UI-component bar and carry the brand pop. */
  --ck-link:         var(--ck-ember-hot);

  /* ── Warm stone neutrals ──────────────────────────────────────────────
     Espresso-to-paper, all on a warm (yellow-brown) axis — never a cold
     grey. The page reads like aged paper under lamplight. */
  --ck-coal:         #221813;
  --ck-smoke:        #5c4f43;
  --ck-ash:          #b1a594;
  /* Muted *text* role (fix-ash-metadata-contrast, 2026-05-30).
     --ck-ash (#a8a29e) is ~2.3:1 on white — far below the 4.5:1 AA floor —
     yet it was carrying real text (mix-card timestamps, changelog dates,
     the coach disclaimer, the DNA sample line). --ck-ash is now reserved
     strictly for non-text decoration (borders, scrollbar, dashed underlines).
     --ck-ash-text is the dimmest *readable* tier: lighter than --ck-smoke so
     timestamps stay secondary, but ≥4.5:1 on every light surface (5.7:1 white,
     4.85:1 ember-soft). Dark mode flips it lighter — see the dark scopes. */
  --ck-ash-text:     #6e6052;
  --ck-haze:         #e7dfd1;
  --ck-haze-strong:  #d6cab4;
  --ck-surface:      #faf6ee;
  --ck-surface-raised:#fffdf9;
  --ck-surface-deep: #f2ebdc;
  --ck-surface-app:  rgba(250,246,238,.82);

  --ck-success-bg:   #ebf6ee;
  --ck-success-fg:   #1f5132;
  --ck-success-rail: #2f6b44;
  --ck-success-edge: #c7e0cf;

  --ck-info-bg:      #eaf2fb;
  --ck-info-fg:      #1c3d6b;
  --ck-info-rail:    #2c5a99;
  --ck-info-edge:    #c2d4ec;

  --ck-warning-bg:   #fdf3dd;
  --ck-warning-fg:   #6b4226;
  --ck-warning-rail: #a76f10;
  --ck-warning-edge: #ead9aa;

  --ck-danger-bg:    #fde8e8;
  --ck-danger-fg:    #7a1010;
  --ck-danger-rail:  #b91c1c;
  --ck-danger-edge:  #f1c0c0;

  --ck-brass:        #a8761f;
  --ck-leaf:         #3c6b4a;
  --ck-leaf-soft:    #dde9de;
  --ck-honey:        #9a6710;
  --ck-honey-soft:   #f7e8c8;
  --ck-danger:       #b3261e;
  --ck-danger-soft:  #f8e7e3;

  /* Softer, more "designed" radii than the MVP defaults. */
  --ck-r-sm:    9px;
  --ck-r-md:    16px;
  --ck-r-lg:    24px;
  --ck-r-pill:  999px;

  /* Warm, brass-tinted elevation — soft and low, never a hard grey drop. */
  --ck-shadow-card:  0 1px 1px rgba(40,26,12,.04), 0 6px 18px -10px rgba(40,26,12,.18);
  --ck-shadow-hover: 0 1px 1px rgba(40,26,12,.05), 0 16px 34px -14px rgba(40,26,12,.26);
  --ck-shadow-btn:   0 1px 0 rgba(90,46,6,.28), 0 4px 12px -4px rgba(120,66,10,.34);
  --ck-shadow-glow:  0 0 0 1px rgba(164,92,14,.30), 0 8px 26px -10px rgba(164,92,14,.40);
  --ck-shadow-bar:   0 1px 0 rgba(40,26,12,.05), 0 10px 26px -18px rgba(40,26,12,.22);
  --ck-shadow-inset: inset 0 1px 0 rgba(255,255,255,.7);

  /* Editorial type scale. h1 fluidly scales up on wide screens (the display
     serif earns the drama); everything else is a fixed rem step. */
  --ck-fs-h1:   clamp(2rem, 1.5rem + 2.2vw, 2.85rem);
  --ck-fs-h2:   1.2rem;
  --ck-fs-h3:   1rem;
  --ck-fs-body: 1rem;
  --ck-fs-sm:   .875rem;
  --ck-fs-xs:   .78rem;

  --ck-s1: .25rem;
  --ck-s2: .5rem;
  --ck-s3: 1rem;
  --ck-s4: 2rem;

  --ck-appbar-h: 60px;
  --ck-feed-max: 660px;     /* readable single-column measure */
  --ck-shell-max: 1120px;   /* full desktop content frame */
  --ck-bottomnav-h: 60px;   /* mobile bottom tab bar */

  /* Display = self-hosted Fraunces (a warm, high-contrast editorial soft-
     serif), with a graceful serif fallback for the pre-swap paint. Body +
     UI stay on the zero-byte system sans stack — no FOUT on running copy. */
  --ck-stack-display: "Fraunces","Hoefler Text",Georgia,"Times New Roman",serif;
  --ck-stack-body:    ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ck-stack-mono:    ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}


/* ----------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; min-height: 100%; overflow-x: hidden }
/* Nothing may bleed past the viewport — the recurring horizontal-overflow
   bug (clipped titles, cut-off leads, off-screen cards) is killed at the
   root: long words break, media + tables never exceed their column. */
h1, h2, h3, p, li, dd, dt, .page-lead, .byline { overflow-wrap: break-word }
img, svg, video, table, pre { max-width: 100% }

/* "Smoke & Brass" reinvention: body is now a FULL-WIDTH canvas (centering
   moved onto .appbar-inner + main), so the sticky bar spans the viewport
   and the warm atmosphere fills the whole screen on desktop — no more
   660px island marooned in empty space. */
body {
  margin: 0;
  /* room for the mobile bottom-nav; cleared on desktop in §3. */
  padding: 0 0 calc(var(--ck-bottomnav-h) + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  font-family: var(--ck-stack-body);
  font-size: var(--ck-fs-body);
  line-height: 1.55;
  color: var(--ck-coal);
  background-color: var(--ck-surface);
  /* Two stacked warm glows — a broad amber wash from the top (lamplight)
     and a fainter brass ember anchored bottom-right — plus a near-invisible
     grain so large dark fills never band on OLED. */
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(214, 158, 70, .20), transparent 60%),
    radial-gradient(80% 50% at 100% 0%, rgba(164, 92, 14, .10), transparent 55%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ck-ember); color: var(--ck-on-ember) }

/* main is the centred reading column on every route; wide/grid pages opt
   out via main.is-wide (home feed, catalogues). The horizontal padding is
   the thumb gutter that every route inherits. */
main {
  display: block;
  width: 100%;
  max-width: var(--ck-feed-max);
  margin: 0 auto;
  padding: var(--ck-s4) var(--ck-s3) var(--ck-s3);
}
main.is-wide { max-width: var(--ck-shell-max) }
main.is-wide .page-shell { max-width: none }

/* Form controls inherit the page family. The comment composer's bare
   <textarea> previously fell back to the UA monospace default. */
textarea, input, select { font-family: inherit }

/* Inline SVG icon set (src/icons.ts) — 1em stroke icons on currentColor,
   so every icon picks up its parent's text colour in both themes. */
.icon { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.12em }

/* Anchor jumps (e.g. /#catalogue, /me#shelf) land below the sticky bar. */
[id] { scroll-margin-top: calc(var(--ck-appbar-h) + .5rem) }

/* Cross-document view transitions — a free ~200ms crossfade between
   server-rendered pages on Chromium + Safari 18; inert elsewhere.
   Disabled for reduced-motion users below (§22). */
@view-transition { navigation: auto }

.page-shell { padding: 0; max-width: var(--ck-feed-max); margin: 0 auto }

h1, h2, h3 { margin-top: 0; line-height: 1.15; color: var(--ck-coal) }
/* Display serif headlines — the editorial heart of the reinvention. Fraunces
   at a heavy optical weight with tight tracking reads like a spirits-brand
   masthead, not an app title. */
h1 {
  font-family: var(--ck-stack-display);
  font-weight: 600;
  font-size: var(--ck-fs-h1);
  letter-spacing: -.018em;
  line-height: 1.05;
  margin: 0 0 var(--ck-s3);
  font-optical-sizing: auto;
}
h2 {
  font-family: var(--ck-stack-display);
  font-size: var(--ck-fs-h2);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 var(--ck-s2);
}
h3 { font-size: var(--ck-fs-h3); font-weight: 600 }
a { color: var(--ck-link); text-underline-offset: .15em; transition: color .14s ease }
a:hover { color: var(--ck-ember-hot) }
p { margin: 0 0 1rem }


/* ----------------------------------------------------------------------------
   3. Brand mark + sticky app-bar
   -------------------------------------------------------------------------- */

.brand {
  font-family: var(--ck-stack-display);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ck-coal);
}
.brand-k {
  color: var(--ck-ember);
}
.brand-tag {
  font-weight: 500;
  font-size: 1rem;
  color: var(--ck-smoke);
  letter-spacing: 0;
  margin-left: .35rem;
}
.feed-heading {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.005em;
  margin: var(--ck-s3) 0 var(--ck-s2);
  text-transform: uppercase;
  color: var(--ck-smoke);
}
.feed-heading .brand-tag { color: var(--ck-coal); text-transform: none; font-size: .95rem }

/* value-prop-tagline — the one above-the-fold positioning line on the
   default home view. Muted (--ck-smoke) so it reads as orientation copy,
   not a headline, and does not fight the ember editorial hero below it.
   max-width keeps the ~10-word line comfortably readable on wide screens. */
.home-lede {
  margin: var(--ck-s3) 0;
  max-width: 38rem;
  font-size: var(--ck-fs-body);
  line-height: 1.5;
  color: var(--ck-smoke);
}

.brand-foot {
  margin-top: var(--ck-s4);
  padding: var(--ck-s3) var(--ck-s3) 0;
  border-top: 1px solid var(--ck-haze);
  font-family: var(--ck-stack-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--ck-ash-text);
  text-align: center;
  max-width: var(--ck-feed-max);
  margin-left: auto;
  margin-right: auto;
}
.brand-foot .brand-k { color: var(--ck-ember) }

/* Full-bleed sticky bar; the centred row lives in .appbar-inner so the bar
   spans the viewport (frosted glass) while content aligns to the shell. */
.appbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ck-surface-app);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--ck-haze);
  box-shadow: var(--ck-shadow-bar);
}
.appbar-inner {
  display: flex;
  align-items: center;
  gap: var(--ck-s2);
  height: var(--ck-appbar-h);
  max-width: var(--ck-shell-max);
  margin: 0 auto;
  padding: 0 var(--ck-s3);
}
.appbar-brand {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--ck-stack-display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -.02em;
  color: var(--ck-coal);
  text-decoration: none;
  white-space: nowrap;
}
.appbar-brand:hover { color: var(--ck-coal) }
.appbar-brand .brand-k { color: var(--ck-ember) }
.appbar-logo, .appbar-wordmark { color: var(--ck-coal) }
.appbar-nav {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  margin-left: auto;
  flex-wrap: nowrap;
}
.appbar-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 .9rem;
  border-radius: var(--ck-r-pill);
  color: var(--ck-smoke);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.appbar-link:hover { background: var(--ck-ember-soft); color: var(--ck-ember-hot) }
/* Flat by design — a solid brass fill, no raised drop-shadow. */
.appbar-link--cta {
  background: var(--ck-ember);
  color: var(--ck-on-ember);
}
.appbar-link--cta:hover { background: var(--ck-ember-hot); color: var(--ck-on-ember) }
.appbar-link--active { color: var(--ck-ember-hot); font-weight: 700; box-shadow: inset 0 -2px 0 0 var(--ck-ember) }
.appbar-link--cta.appbar-link--active { color: var(--ck-on-ember); box-shadow: inset 0 -2px 0 0 rgba(255,255,255,.7) }
.appbar-link:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: 2px }

.appbar-theme {
  display: inline-flex;
  align-items: center;
  margin-left: .35rem;
  padding: 3px;
  background: var(--ck-surface-deep);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-pill);
}
.appbar-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--ck-r-pill);
  color: var(--ck-smoke);
  text-decoration: none;
  font-size: .95rem;
  transition: background .14s ease, color .14s ease;
}
.appbar-theme-btn:hover { color: var(--ck-ember) }
.appbar-theme-btn[data-active="true"] {
  background: var(--ck-surface-raised);
  color: var(--ck-link);
  box-shadow: 0 1px 3px rgba(40,26,12,.16);
}
.appbar-theme-btn:focus-visible { outline: 2px solid var(--ck-ember); outline-offset: 1px }

/* ── Mobile bottom tab bar ─────────────────────────────────────────────
   The three core-loop destinations move OFF the cramped top bar (which
   overflowed at 390px) into a fixed bottom tab bar — the native-app
   pattern, always a thumb-reach away. Hidden ≥720px where the top nav
   takes over. Zero JS: plain links with an active marker. */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  height: var(--ck-bottomnav-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--ck-surface-app);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-top: 1px solid var(--ck-haze);
  box-shadow: 0 -8px 24px -18px rgba(40,26,12,.4);
}
.bottom-nav-link {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  color: var(--ck-smoke);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  transition: color .14s ease;
}
.bottom-nav-link .icon { width: 22px; height: 22px }
.bottom-nav-link:hover { color: var(--ck-ember-hot) }
.bottom-nav-link[aria-current="page"] { color: var(--ck-ember) }
.bottom-nav-link--cta .bottom-nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 28px;
  margin-top: -2px;
  border-radius: var(--ck-r-pill);
  background: var(--ck-ember);
  color: var(--ck-on-ember);
}
.bottom-nav-link--cta .bottom-nav-ico .icon { width: 20px; height: 20px }
.bottom-nav-link--cta[aria-current="page"] { color: var(--ck-ember) }
.bottom-nav-link:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: -3px }

/* Desktop: top nav carries the verbs, no bottom bar, no bottom padding. */
@media (min-width: 720px) {
  .bottom-nav { display: none }
  body { padding-bottom: var(--ck-s4) }
}
/* Mobile: the top bar shows only the wordmark + theme switcher (the nav
   lives at the bottom), so the row never overflows. */
@media (max-width: 719.98px) {
  .appbar-nav { display: none }
  .appbar-inner { padding: 0 var(--ck-s3) }
}


/* ----------------------------------------------------------------------------
   4. Feed + social cards
   -------------------------------------------------------------------------- */

.feed-toolbar {
  margin: var(--ck-s2) 0 var(--ck-s3);
  padding: var(--ck-s3);
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-md);
  box-shadow: var(--ck-shadow-card);
}
.feed-toolbar-row {
  display: flex;
  align-items: center;
  gap: var(--ck-s2);
  flex-wrap: wrap;
  margin-bottom: var(--ck-s2);
}
.feed-random-link { margin: 0 0 0 auto }

.feed {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* On the wide (desktop) home shell the feed becomes a two-column masonry-
   ish grid so cards fill the frame instead of stranding a narrow column in
   empty space. Cards drop their bottom-margin inside the grid (gap handles
   spacing). */
main.is-wide .feed {
  display: grid;
  gap: var(--ck-s3);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  main.is-wide .feed { grid-template-columns: 1fr 1fr }
  main.is-wide .feed .card { margin-bottom: 0 }
}

.card {
  position: relative;
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-md);
  padding: var(--ck-s3) calc(var(--ck-s3) * 1.15);
  margin-bottom: var(--ck-s3);
  box-shadow: var(--ck-shadow-card);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.card:hover {
  border-color: var(--ck-haze-strong);
  box-shadow: var(--ck-shadow-hover);
  transform: translateY(-1px);
}
.card h2 { font-size: 1.35rem; margin: var(--ck-s1) 0 .3rem; font-weight: 600; line-height: 1.12 }
.card h2 a { color: var(--ck-coal); text-decoration: none }
.card h2 a:hover { color: var(--ck-ember) }
/* ui-refurbish (2026-06-10): the whole card is the tap target. The title
   link stretches across the card via ::after (replacing the "Open →"
   footer row — one full row saved per card); inner links (avatar, tag
   chips, setup badges) lift above the overlay so they stay tappable. */
.card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit }
.card .mix-card-head, .card .tags-row, .card .setup-row { position: relative; z-index: 1 }
.card p { margin: 0; color: var(--ck-smoke); font-size: var(--ck-fs-sm) }
.card-view { padding: 0 }

.mix-card-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .65rem;
}
.mix-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ck-r-pill);
  background: linear-gradient(140deg, var(--ck-ember) 0%, var(--ck-brass) 55%, var(--ck-honey) 100%);
  color: var(--ck-on-ember);
  font-family: var(--ck-stack-display);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .01em;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 3px 8px -3px rgba(120,66,10,.45);
}
.mix-avatar:hover { transform: scale(1.05); color: var(--ck-on-ember) }
.mix-card-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.mix-card-handle { font-weight: 600; color: var(--ck-coal); font-size: .92rem }
.mix-card-time { color: var(--ck-ash-text); font-size: .8rem }

.mix-card-ingredients {
  margin: 0 0 .25rem !important;
  color: var(--ck-smoke);
  font-size: .92rem;
  line-height: 1.5;
}

/* ui-refurbish (2026-06-10): per-card like count as a quiet head-row chip
   (replacing the inline "· 👍 N" emoji run). The "Open →" action footer
   was retired — the stretched title link covers the card. */
.mix-card-likes {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
  color: var(--ck-ash-text);
  font-size: var(--ck-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mix-card-likes .icon { width: 15px; height: 15px }


/* ----------------------------------------------------------------------------
   5. Buttons & link-buttons
   -------------------------------------------------------------------------- */

/* ui-refurbish (2026-06-10): the bare-submit primary default is wrapped in
   :where() so its specificity is ZERO. Before, button[type="submit"]
   (0,1,1) silently beat the .btn-ghost/.btn-danger primitives (0,1,0) and
   every classed submit button rendered as a filled ember slab — the mix
   detail page showed four "primaries". Unclassed submits keep this look. */
:where(button[type="submit"]) {
  background: var(--ck-ember);
  color: var(--ck-on-ember);
  border: none;
  padding: .7rem 1.45rem;
  border-radius: var(--ck-r-sm);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  min-height: 44px;
  box-shadow: var(--ck-shadow-btn), inset 0 1px 0 rgba(255,255,255,.18);
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
}
:where(button[type="submit"]):hover  { background: var(--ck-ember-hot); transform: translateY(-1px); box-shadow: var(--ck-shadow-btn), var(--ck-shadow-glow) }
:where(button[type="submit"]):active { transform: translateY(0) }
button[type="submit"]:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: 2px }

.new-mix-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 38px;
  padding: .45rem 1rem;
  margin: 0 .35rem .35rem 0;
  background: var(--ck-surface-raised);
  color: var(--ck-coal);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-pill);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.new-mix-link:hover { border-color: var(--ck-ember); color: var(--ck-ember); background: var(--ck-ember-soft) }
.new-mix-link:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: 2px }

.upvote, .follow-form { margin: .5rem 0 }
/* restyle-mix-detail-action-hierarchy — inline action row. ui-refurbish:
   buttons size to their content (the full-width slab treatment made every
   action read as a primary banner). */
.mix-action-bar { display: flex; flex-wrap: wrap; gap: var(--ck-s2); margin: var(--ck-s3) 0 var(--ck-s2) }
.mix-action-bar > form { margin: 0 }
.mix-action-bar > form > button { justify-content: center }
/* mix-collections */
.collections-list { list-style: none; padding: 0; margin: .5rem 0 }
.collections-item { display: flex; align-items: center; justify-content: space-between; gap: var(--ck-s2); min-height: 44px; border-bottom: 1px solid var(--ck-haze) }
.collections-item a { display: flex; align-items: center; flex: 1; min-height: 44px }
.collections-count { flex: 0 0 auto; color: var(--ck-smoke); font-size: var(--ck-fs-sm) }
.collection-create-form, .add-collection-form { margin: 1rem 0; display: flex; flex-direction: column; gap: .35rem }
.add-collection-form { margin: var(--ck-s2) 0 0 }
/* ui-refurbish (2026-06-10): add-to-collection rides a collapsed <details>
   (the .mix-qr disclosure pattern) so the mid-page keeps one quiet row. */
.add-collection { margin: var(--ck-s3) 0 }
.add-collection > summary { cursor: pointer; color: var(--ck-link); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center }
.add-collection > summary:hover { color: var(--ck-ember-hot) }
.add-collection[open] > summary { margin-bottom: var(--ck-s1) }
.comments { margin-top: 2rem; border-top: 1px solid var(--ck-haze); padding-top: 1rem }
.comment { border-left: 3px solid var(--ck-haze); padding: .25rem .75rem; margin: .5rem 0 }
.comment-meta { color: var(--ck-smoke); font-size: var(--ck-fs-sm); margin: 0 0 .25rem; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem }
.comment-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ck-r-pill);
  background: linear-gradient(140deg, var(--ck-ember) 0%, var(--ck-brass) 55%, var(--ck-honey) 100%);
  color: var(--ck-on-ember);
  font-family: var(--ck-stack-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .01em;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 6px -2px rgba(154,52,18,.35);
}
.comment-author { font-weight: 600; color: var(--ck-coal) }
.comment-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere }
.comments-empty { color: var(--ck-smoke); font-style: italic }
.comment-form { margin-top: 1rem; display: flex; flex-direction: column; gap: .35rem }
.collection-card { margin-bottom: 1rem }
.collection-remove-form { margin-top: .25rem }
/* confirm-collection-delete — delete control is now an <a> to /delete-confirm;
   the .btn-danger primitive only tints, so give the link the button box (44px
   tap target). Confirm page rows the button + cancel; undo is a bare <button>
   riding .info-banner-link. */
.collection-delete-link { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1.2rem; border: 1px solid var(--ck-danger-edge); border-radius: var(--ck-r-sm); background: var(--ck-surface-raised); font-size: .95rem; text-decoration: none }
.collection-delete-confirm-form { display: flex; align-items: center; gap: var(--ck-s3); flex-wrap: wrap; margin-top: var(--ck-s3) }
.collection-delete-cancel { min-height: 44px; display: inline-flex; align-items: center; color: var(--ck-link) }
.collection-remove-undo { display: inline }
.collection-remove-undo-btn { background: none; border: none; padding: 0; cursor: pointer; font: inherit }
/* public-collection-view */
.collection-share { margin: .75rem 0 }
.collection-share summary { cursor: pointer; color: var(--ck-link) }
.collection-share-url { width: 100%; font-family: monospace; font-size: var(--ck-fs-sm); margin-top: .35rem }
.collection-feed-link, .collection-home-link { margin: .5rem 0; font-size: var(--ck-fs-sm) }
.collection-acquire-cta { margin: var(--ck-s4) 0 var(--ck-s3) }
.btn-primary, .btn-ghost, .upvote-btn, .dislike-btn, .follow-btn {
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-sm);
  padding: .6rem 1.2rem;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--ck-s2);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
/* tertiary action — surface-raised, haze border, ember on hover/focus */
.btn-ghost { color: var(--ck-smoke) }
.btn-ghost:hover { border-color: var(--ck-ember); color: var(--ck-ember); background: var(--ck-ember-soft) }
/* destructive action — quiet until intent, then danger-soft */
.btn-danger {
  color: var(--ck-smoke);
  border-color: var(--ck-danger-edge);
}
.btn-danger:hover { background: var(--ck-danger-bg); border-color: var(--ck-danger-rail); color: var(--ck-danger-fg) }
/* primary action — filled ember, the single highest-emphasis control */
.btn-primary { background: var(--ck-ember); border-color: var(--ck-ember); color: var(--ck-on-ember); font-weight: 700; text-decoration: none; box-shadow: var(--ck-shadow-btn) }
.btn-primary:hover { background: var(--ck-ember-hot); border-color: var(--ck-ember-hot); color: var(--ck-on-ember) }
/* discoverable-new-mix-cta — the zero-result "upload a mix" recovery CTA (reuses the .btn-primary primitive) */
.search-empty-cta { margin: var(--ck-s2) 0 0 }
.btn-ghost:focus-visible,
.btn-danger:focus-visible,
.btn-primary:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: 2px }
.upvote-btn { color: var(--ck-smoke) }
.upvote-btn:hover { border-color: var(--ck-ember); color: var(--ck-ember); background: var(--ck-ember-soft) }
.upvote-btn[data-state="active"] {
  background: var(--ck-ember-soft);
  border-color: var(--ck-ember);
  color: var(--ck-ember-hot);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--ck-ember-glow);
}
/* .dislike-btn — reused by the admin comment/mix delete buttons (neutral
   grey; the detail "Nichts für mich" control that owned the data-state
   variant was removed in remove-disliked). */
.dislike-btn { color: var(--ck-smoke) }
.dislike-btn:hover { background: var(--ck-surface-deep); border-color: var(--ck-ash) }
.follow-btn { color: var(--ck-smoke) }
.follow-btn:hover { background: var(--ck-leaf-soft); border-color: var(--ck-leaf); color: var(--ck-leaf) }
.follow-btn[data-state="active"] {
  background: var(--ck-leaf-soft);
  border-color: var(--ck-leaf);
  color: var(--ck-leaf);
  font-weight: 600;
}
.upvote-btn:focus-visible,
.dislike-btn:focus-visible,
.follow-btn:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: 2px }

.share-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--ck-link);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.share-btn:hover { color: var(--ck-ember-hot) }
.share-btn:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: 2px; border-radius: var(--ck-r-sm) }


/* ----------------------------------------------------------------------------
   6. Banners / snackbars
   -------------------------------------------------------------------------- */

.info-banner {
  position: relative;
  background: var(--ck-success-bg);
  color: var(--ck-success-fg);
  border: 1px solid var(--ck-success-edge);
  border-left: 4px solid var(--ck-success-rail);
  padding: .8rem 1rem .8rem 2.6rem;
  margin: 0 0 1rem;
  border-radius: var(--ck-r-md);
  font-weight: 500;
  line-height: 1.45;
}
.info-banner::before {
  content: "✓";
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ck-success-rail);
  color: #fff;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}
/* collection-add-confirmation — "view collection" link in the success banner.
   Inherits success-fg (AA on success-bg, auto-flips in dark) not the ember
   --ck-link (unverified on green); underlined + house ember focus ring. */
.info-banner-link { color: var(--ck-success-fg); font-weight: 600; text-decoration: underline; white-space: nowrap }
.info-banner-link:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: 2px; border-radius: var(--ck-r-sm) }
/* comment-shelf-buy-feedback — flipped "on your shelf" row pinned atop /me/buy.
   Success quad so it auto-flips in dark mode; badge reads as a settled state,
   not a tap target (no button). */
.buy-row--added .buy-row-flavour { color: var(--ck-success-fg) }
.buy-row-added-badge { display: inline-block; background: var(--ck-success-bg); color: var(--ck-success-fg); border: 1px solid var(--ck-success-edge); border-radius: var(--ck-r-pill); padding: .2rem .6rem; font-weight: 600; font-size: var(--ck-fs-sm) }

.errors {
  background: var(--ck-danger-bg);
  border: 1px solid var(--ck-danger-edge);
  border-left: 4px solid var(--ck-danger-rail);
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--ck-r-md);
  color: var(--ck-danger-fg);
  font-weight: 500;
}
.errors ul { margin: 0; padding-left: 1.25rem; color: var(--ck-danger-fg) }
.errors li { margin: .1rem 0 }

.errors-inline {
  margin: .35rem 0 .75rem;
  padding: .65rem .9rem;
  background: var(--ck-danger-bg);
  color: var(--ck-danger-fg);
  border: 1px solid var(--ck-danger-edge);
  border-left: 4px solid var(--ck-danger-rail);
  border-radius: var(--ck-r-md);
  font-weight: 600;
}

.delete-confirm {
  background: var(--ck-danger-bg);
  border: 1px solid var(--ck-danger-edge);
  border-left: 4px solid var(--ck-danger-rail);
  padding: 1.15rem 1.3rem;
  border-radius: var(--ck-r-md);
  margin: 1rem 0;
  color: var(--ck-danger-fg);
}
.delete-confirm h2 { color: var(--ck-danger-fg); margin: 0 0 .5rem }
.delete-confirm form { margin-top: 1rem }
.delete-confirm button[type="submit"]        { background: var(--ck-danger-rail); box-shadow: 0 1px 0 rgba(185,28,28,.32), 0 2px 6px rgba(185,28,28,.22) }
.delete-confirm button[type="submit"]:hover  { background: #7f1d1d }

.notes {
  background: var(--ck-warning-bg);
  border: 1px solid var(--ck-warning-edge);
  border-left: 4px solid var(--ck-warning-rail);
  padding: .8rem 1rem;
  margin: 1rem 0;
  border-radius: var(--ck-r-md);
  color: var(--ck-warning-fg);
  font-weight: 500;
}

.duplicate-hint,
.brand-typo-hint {
  margin: .5rem 0 1rem;
  padding: .85rem 1rem;
  background: var(--ck-warning-bg);
  border: 1px solid var(--ck-warning-edge);
  border-left: 4px solid var(--ck-warning-rail);
  border-radius: var(--ck-r-md);
  color: var(--ck-warning-fg);
}

.own-note {
  background: var(--ck-info-bg);
  color: var(--ck-info-fg);
  border-left: 4px solid var(--ck-info-rail);
  padding: .6rem .9rem;
  margin: .5rem 0 1rem;
  border-radius: 0 var(--ck-r-md) var(--ck-r-md) 0;
  font-size: .92rem;
}
.own-note a { color: var(--ck-info-fg); font-weight: 600 }


/* ----------------------------------------------------------------------------
   7. Forms & inputs
   -------------------------------------------------------------------------- */

.form-group { margin-bottom: 1rem }
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--ck-coal);
  font-size: .95rem;
}
.form-hint { margin: 0 0 .4rem; color: var(--ck-smoke); font-size: var(--ck-fs-sm) }

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="search"],
.form-group textarea,
.form-group select,
.setup-fieldset select,
.add-collection-form select,
.collection-create-form input[type="text"],
.add-collection-form input[type="text"] {
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-sm);
  font-size: 1rem;
  box-sizing: border-box;
  background: var(--ck-surface-raised);
  color: var(--ck-coal);
  font-family: inherit;
  transition: border-color .14s ease, box-shadow .14s ease;
}
/* collection name fields sit outside .form-group; give them the 44px touch
   minimum so they read as normal inputs (plain-collection-name-input). */
.add-collection-form select,
.collection-create-form input[type="text"],
.add-collection-form input[type="text"] { min-height: 44px }
.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover { border-color: var(--ck-ash) }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.search input[type="search"]:focus {
  outline: none;
  border-color: var(--ck-ember);
  box-shadow: 0 0 0 3px var(--ck-ember-glow);
}

/* ui-refurbish (2026-06-10): each tobacco entry is a numbered, bordered
   group — before, nine placeholder-only inputs ran together as one
   undifferentiated column and row boundaries were invisible. */
.tobacco-card {
  position: relative;
  margin: 0 0 var(--ck-s2);
  padding: var(--ck-s2) var(--ck-s2) var(--ck-s2) 2.6rem;
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-md);
}
.tobacco-card-n {
  position: absolute;
  left: .65rem;
  top: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--ck-r-pill);
  background: var(--ck-ember-soft);
  color: var(--ck-link);
  font-weight: 700;
  font-size: var(--ck-fs-sm);
  font-variant-numeric: tabular-nums;
}
.tobacco-card .tobacco-row { margin-bottom: 0 }

.tobacco-row { display: flex; gap: .5rem; margin-bottom: .5rem }
.tobacco-row input { flex: 1 }
.tobacco-row .pct { flex: 0 0 80px }
/* The bare strength <select> must not dictate row width via its intrinsic min-size. */
.tobacco-row select { flex: 1; min-width: 0; width: auto }
/* Mobile reflow: at narrow widths the brand/flavour text inputs collapse to
   unreadable ~50px slivers. Wrap the row so each text input gets a full line,
   keeping % + strength on a shared second line. */
@media (max-width: 560px) {
  .tobacco-row { flex-wrap: wrap }
  .tobacco-row input[type="text"] { flex: 1 1 100% }
  .tobacco-row .pct { flex: 0 0 5rem }
  .tobacco-row select { flex: 1 1 auto }
}

.tags-fieldset,
.setup-fieldset {
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-md);
  padding: .9rem 1rem;
  margin: 0;
  background: var(--ck-surface-raised);
}
.tags-fieldset legend,
.setup-fieldset legend { font-weight: 600; padding: 0 .4rem; color: var(--ck-coal) }

.tag-options { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem }
.tag-option {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: 34px;
  cursor: pointer;
  padding: .2rem .7rem;
  border-radius: var(--ck-r-pill);
  font-size: .95rem;
  border: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease;
}
.tag-option:hover { background: #f4ecdf; border-color: var(--ck-brass) }
.tag-option input[type="checkbox"] { width: auto; cursor: pointer; accent-color: var(--ck-ember) }

.setup-fieldset .form-group {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: .5rem;
  align-items: center;
  margin-bottom: .5rem;
}
.setup-fieldset .form-group:last-child { margin-bottom: 0 }
.setup-fieldset .form-group label { margin: 0 }


/* ----------------------------------------------------------------------------
   8. Search + sort tabs + recent searches
   -------------------------------------------------------------------------- */

.search { display: flex; gap: var(--ck-s2); margin-bottom: var(--ck-s3); flex-wrap: wrap }
.search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: .65rem .85rem;
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-pill);
  font-size: .95rem;
  box-sizing: border-box;
  background: var(--ck-surface-raised);
  color: var(--ck-coal);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.search input[type="search"]:hover { border-color: var(--ck-ash) }
.search button[type="submit"] { min-height: 40px; padding: .55rem 1.2rem; border-radius: var(--ck-r-pill); white-space: nowrap }

.search-status { margin-bottom: .75rem; color: var(--ck-smoke); font-size: var(--ck-fs-sm) }
.search-status a { color: var(--ck-link) }
.search-suggest { margin: .25rem 0 1rem; color: var(--ck-smoke); font-size: var(--ck-fs-sm) }
.search-suggest-lead { color: var(--ck-coal); font-weight: 600; margin-right: .4rem }
.search-suggest a { color: var(--ck-link); text-decoration: none; border-bottom: 1px dashed var(--ck-link) }
.search-suggest a:hover { border-bottom-style: solid }
.empty { color: var(--ck-smoke); font-size: var(--ck-fs-sm); font-style: italic }
/* page-header-empty-state-helpers — pageHeader() lead block (replaces the
   formerly-styleless collections/changelog lead classes) + the
   emptyState(card:true) louder first-run card. */
.page-lead { color: var(--ck-smoke); font-size: var(--ck-fs-body); line-height: 1.5; max-width: 38rem; margin: var(--ck-s2) 0 var(--ck-s3) }
.empty-state { background: var(--ck-surface-raised); border: 1px dashed var(--ck-haze); border-radius: var(--ck-r-md); padding: var(--ck-s4); text-align: center; margin: var(--ck-s3) 0 }
.empty-state .empty { font-style: normal }

.sort {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .15rem;
  margin: 0;
  padding: .2rem;
  background: var(--ck-surface-deep);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-pill);
}
.sort-link {
  padding: .35rem .8rem;
  text-decoration: none;
  color: var(--ck-smoke);
  border: none;
  border-radius: var(--ck-r-pill);
  display: inline-block;
  min-height: 30px;
  box-sizing: border-box;
  font-weight: 600;
  font-size: .85rem;
  transition: background .14s ease, color .14s ease;
}
.sort-link:hover:not([data-active="true"]) { color: var(--ck-ember); background: var(--ck-ember-soft) }
.sort-link[data-active="true"] {
  background: var(--ck-surface-raised);
  color: var(--ck-link);
  box-shadow: 0 1px 0 rgba(28,25,23,.08), 0 1px 3px rgba(28,25,23,.08);
}

.recent-searches {
  margin: .25rem 0 .25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  font-size: .82rem;
  color: var(--ck-smoke);
}
.recent-searches-label { font-weight: 600; margin-right: .15rem }
.recent-search-chip {
  display: inline-block;
  padding: .2rem .65rem;
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-pill);
  color: var(--ck-coal);
  text-decoration: none;
  background: var(--ck-surface-raised);
  transition: border-color .14s, color .14s, background .14s;
}
.recent-search-chip:hover { border-color: var(--ck-ember); color: var(--ck-ember); background: var(--ck-ember-soft) }


/* ----------------------------------------------------------------------------
   9. Tags / chips / badges
   -------------------------------------------------------------------------- */

.tags-row { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem }
.tag {
  display: inline-block;
  background: #f4ecdf;
  color: #6b4226;
  border: 1px solid var(--ck-brass);
  border-radius: var(--ck-r-pill);
  padding: .18rem .75rem;
  font-size: var(--ck-fs-xs);
  font-weight: 500;
  line-height: 1.4;
}
a.tag { text-decoration: none; color: inherit; transition: background .14s ease }
a.tag:hover { background: #ecdfca }

.setup-row {
  margin: .35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: var(--ck-fs-xs);
  color: var(--ck-smoke);
}
.setup-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--ck-surface-deep);
  color: var(--ck-coal);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-pill);
  padding: .18rem .65rem;
  line-height: 1.4;
  text-decoration: none;
}
a.setup-badge:hover { filter: brightness(.96); border-color: var(--ck-coal); text-decoration: none }
.setup-badge .label { color: var(--ck-smoke); font-weight: 500 }
.setup-badge .value { font-weight: 600; color: var(--ck-coal) }

.setup-section { margin: .5rem 0 1rem }
.setup-section h2 { font-size: 1rem; margin: 0 0 .4rem; color: var(--ck-smoke); font-weight: 600 }

.shelf-row { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem }

.shelf-badge {
  display: inline-flex;
  align-items: center;
  background: var(--ck-leaf-soft);
  color: var(--ck-success-fg);
  border: 1px solid #a3c3a8;
  border-radius: var(--ck-r-pill);
  padding: .18rem .75rem;
  font-size: var(--ck-fs-xs);
  font-weight: 600;
  line-height: 1.4;
}
.shelf-badge.near {
  background: var(--ck-honey-soft);
  color: var(--ck-warning-fg);
  border-color: #e6c98a;
}

.popular-row { margin: .35rem 0 0 }
.popular-badge { font-weight: 700 }

/* Legacy tier badges (tokenize-legacy-badges, 2026-05-30): tint via the
   --ck-success/warning/danger quads they mirrored, not raw hex — so the dark
   scopes flip them by token reassignment alone. Shape is inherited from the
   .setup-badge base in the markup class chain. light→success, medium→warning,
   strong→danger. extreme shares the danger quad (its fg/bg clears AA in both
   modes; a filled rail cannot, the rail lightness flips) but is lifted above
   strong by a heavier weight + solid rail border. */
.popular-badge,
.strength-medium {
  background: var(--ck-warning-bg);
  color: var(--ck-warning-fg);
  border-color: var(--ck-warning-edge);
}
.strength-light {
  background: var(--ck-success-bg);
  color: var(--ck-success-fg);
  border-color: var(--ck-success-edge);
}
.strength-strong,
.strength-extreme {
  background: var(--ck-danger-bg);
  color: var(--ck-danger-fg);
  border-color: var(--ck-danger-edge);
}
.strength-badge { font-weight: 600 }
.strength-extreme { font-weight: 700; border-color: var(--ck-danger-rail) }
.strength-meter { width: 2.4em; height: .5em; vertical-align: middle; margin-left: .35em; border-radius: .25em }

a.ingredient-link,
a.author-link { text-decoration: underline dotted; text-underline-offset: 2px; color: inherit }
a.ingredient-link:hover,
a.author-link:hover { color: var(--ck-ember) }


/* ----------------------------------------------------------------------------
   10. Editorial hero + catalogue filter menu + landing chrome
   -------------------------------------------------------------------------- */

/* last-visit-fresh-badge — minimalist "X new since your last visit" line
   above the editorial hero. Single-line subtle ink, not a banner — keeps
   the home page calm while delivering the personal-stream signal. */
.fresh-since {
  margin: 0 0 var(--ck-s3);
  padding: 0 var(--ck-s2);
  font-size: var(--ck-fs-sm);
  color: var(--ck-smoke);
  text-align: center;
}
.fresh-since-link {
  color: var(--ck-ember-hot);
  text-decoration: none;
  border-bottom: 1px dashed var(--ck-ash);
}
.fresh-since-link:hover {
  border-bottom-color: var(--ck-ember);
  border-bottom-style: solid;
}
.fresh-since-when {
  color: var(--ck-ash-text);
  font-variant-numeric: tabular-nums;
}

/* ui-refurbish (2026-06-10): hero slimmed from a magazine block to a
   pinned-post row — the above-the-fold budget belongs to the catalogue
   ("find a mix in under 10s"). Title row carries the CTA inline. */
.editorial-hero {
  position: relative;
  margin: var(--ck-s2) 0 var(--ck-s4);
  padding: var(--ck-s4) calc(var(--ck-s3) * 1.4);
  border-radius: var(--ck-r-lg);
  background:
    radial-gradient(120% 130% at 0% 0%, var(--ck-ember-soft) 0%, transparent 55%),
    linear-gradient(135deg, var(--ck-hero-gradient-from) 0%, var(--ck-surface-raised) 70%);
  border: 1px solid var(--ck-haze);
  box-shadow: var(--ck-shadow-card);
  overflow: hidden;
}
/* a fine brass top hairline reads as "featured" without shouting */
.editorial-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ck-ember), var(--ck-brass) 60%, transparent);
}
.editorial-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--ck-fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ck-ember-hot);
  margin: 0 0 .35rem;
}
.editorial-eyebrow::before {
  content: "";
  width: .5rem;
  height: .5rem;
  background: var(--ck-ember);
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--ck-ember-glow);
}
.editorial-title {
  font-family: var(--ck-stack-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: var(--ck-coal);
  margin: 0 0 var(--ck-s2);
}
.editorial-title a { color: inherit; text-decoration: none }
.editorial-title a:hover { color: var(--ck-ember) }
.editorial-teaser {
  font-size: .9rem;
  color: var(--ck-smoke);
  margin: 0 0 var(--ck-s2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.editorial-cta {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: .4rem 1rem;
  background: var(--ck-ember);
  color: var(--ck-on-ember);
  border-radius: var(--ck-r-pill);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: var(--ck-shadow-btn);
}
.editorial-cta:hover { background: var(--ck-ember-hot); color: var(--ck-on-ember) }
.editorial-cta:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: 2px }
.editorial-archive-link {
  display: inline-block;
  margin-left: var(--ck-s3);
  color: var(--ck-smoke);
  text-decoration: none;
  font-size: var(--ck-fs-sm);
  font-weight: 500;
  border-bottom: 1px dashed var(--ck-ash);
}
.editorial-archive-link:hover { color: var(--ck-ember); border-bottom-color: var(--ck-ember); border-bottom-style: solid }

/* replace-mood-with-tag-search — the catalogue filter menu (a no-JS
   <details> GET form over the ?tag / ?brand / ?strength facets) replaces
   the retired mood/Stimmung atlas. Collapsed by default, auto-open when a
   facet is active. */
.catalogue-filter { margin: var(--ck-s2) 0 0 }
.filter-summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--ck-fs-sm);
  color: var(--ck-smoke);
  padding: .35rem .2rem;
  min-height: 32px;
  list-style: none;
}
.filter-summary::-webkit-details-marker { display: none }
.filter-summary::before { content: "⚙"; opacity: .7 }
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 .35rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--ck-on-ember);
  background: var(--ck-ember);
  border-radius: 999px;
}
.filter-form {
  margin: var(--ck-s2) 0 0;
  padding: var(--ck-s2);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-md);
  background: var(--ck-surface-raised);
}
.filter-fieldset { border: 0; padding: 0; margin: 0 0 var(--ck-s2) }
.filter-fieldset legend,
.filter-facet-legend {
  font-size: var(--ck-fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ck-smoke);
  font-weight: 700;
  margin-bottom: .35rem;
  display: block;
}
.filter-checks { display: flex; flex-wrap: wrap; gap: .4rem .8rem }
.filter-check {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--ck-fs-sm);
  min-height: 32px;
  cursor: pointer;
}
.filter-check input { width: 18px; height: 18px; accent-color: var(--ck-ember) }
.filter-facet-row { display: flex; flex-wrap: wrap; gap: var(--ck-s2); margin-bottom: var(--ck-s2) }
.filter-facet { flex: 1 1 160px; min-width: 0 }
.filter-facet select {
  width: 100%;
  min-height: 44px;
  padding: .5rem .65rem;
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-sm);
  background: var(--ck-surface);
  color: var(--ck-coal);
  font: inherit;
}
.filter-actions { display: flex; flex-wrap: wrap; gap: var(--ck-s2); align-items: center }
.filter-apply, .filter-reset-btn { min-height: 44px }
.filter-active { margin: var(--ck-s2) 0 0; font-size: var(--ck-fs-sm); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem }
.filter-active-label { color: var(--ck-smoke); font-weight: 700 }
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: .15rem .55rem;
  background: var(--ck-haze);
  color: var(--ck-coal);
  border-radius: var(--ck-r-pill);
  font-size: var(--ck-fs-xs);
  font-weight: 600;
}
.filter-reset { color: var(--ck-ember); font-weight: 600 }

.catalogue-collapse { margin: var(--ck-s3) 0 var(--ck-s3) }
.catalogue-collapse.feed { padding: 0 }


/* ----------------------------------------------------------------------------
   11. Mix detail
   -------------------------------------------------------------------------- */

.mix-title {
  font-family: var(--ck-stack-display);
  font-size: clamp(1.9rem, 1.4rem + 3vw, 2.7rem);
  line-height: 1.05;
  margin-bottom: var(--ck-s2);
  letter-spacing: -.018em;
  font-weight: 600;
  overflow-wrap: break-word;
}
.mix-title .p-name { overflow-wrap: anywhere }
.byline { color: var(--ck-smoke); font-size: var(--ck-fs-sm); margin-top: 0; margin-bottom: 1rem; font-style: italic }
.meta { color: var(--ck-smoke); font-size: var(--ck-fs-sm); margin-top: 1rem }
.back {
  margin-top: var(--ck-s4);
  display: inline-block;
  color: var(--ck-smoke);
  text-decoration: none;
  border-bottom: 1px dashed var(--ck-ash);
}
.back:hover { color: var(--ck-ember); border-bottom-color: var(--ck-ember); border-bottom-style: solid }

/* table-layout: fixed so a long flavour/brand cell can never force the
   table (and with it the whole page) wider than its column — the root of
   the clipped-title horizontal overflow. Cells wrap instead. */
table { border-collapse: collapse; width: 100%; table-layout: fixed }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--ck-haze); overflow-wrap: anywhere }
th { font-weight: 600; background: var(--ck-surface-deep); color: var(--ck-coal) }

/* Recipe ingredient table (mix detail) — an editorial "menu" treatment:
   a hairline-framed card, brass small-caps column heads, a narrow tabular
   right-aligned % column, and the brand set in the display serif. */
.h-recipe table {
  margin: var(--ck-s3) 0 var(--ck-s4);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-md);
  overflow: hidden;
  box-shadow: var(--ck-shadow-card);
  background: var(--ck-surface-raised);
}
.h-recipe thead th {
  background: var(--ck-surface-deep);
  color: var(--ck-ash-text);
  font-size: var(--ck-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.h-recipe tbody td { font-size: 1.02rem; vertical-align: baseline }
.h-recipe tbody tr:last-child td { border-bottom: none }
.h-recipe tbody td:first-child { font-family: var(--ck-stack-display); font-weight: 600; color: var(--ck-coal) }
.h-recipe tbody td:first-child a { color: inherit }
.h-recipe th:nth-child(3), .h-recipe td:nth-child(3) {
  width: 4.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ck-link);
  font-weight: 600;
}

.upvote { margin: 1rem 0 }

.similar-mixes {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ck-haze);
}
.similar-mixes h2 { font-size: var(--ck-fs-h2); margin-bottom: .85rem; color: var(--ck-smoke) }
.similar-list .card { padding: .8rem 1.05rem }
.similar-item { margin-bottom: .5rem }
.similar-item .card { margin-bottom: .25rem }

.compare-cta {
  display: inline-block;
  margin: 0 0 .5rem .25rem;
  padding: .1rem .5rem;
  color: var(--ck-link);
  font-size: var(--ck-fs-sm);
  text-decoration: none;
  border-bottom: 1px dashed var(--ck-link);
}
.compare-cta:hover { color: var(--ck-ember-hot); border-bottom-style: solid }

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ck-s3); margin: var(--ck-s3) 0 }
.compare-grid > div { min-width: 0 }
@media (max-width: 600px) { .compare-grid { grid-template-columns: 1fr } }

.recent-views {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ck-haze);
}
.recent-views h2 { font-size: var(--ck-fs-h2); margin-bottom: .85rem; color: var(--ck-smoke) }

.owner-actions { margin: .5rem 0; color: var(--ck-smoke); font-size: .9rem }
.owner-actions a { color: var(--ck-smoke); text-decoration: underline }
.owner-actions a:hover { color: var(--ck-ember) }


/* ----------------------------------------------------------------------------
   12. Activity strip + brand pairs + tag-hub
   -------------------------------------------------------------------------- */

.activity-strip {
  margin: var(--ck-s3) 0;
  padding: .85rem 1.05rem;
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-haze);
  border-left: 4px solid var(--ck-warning-rail);
  border-radius: var(--ck-r-md);
  box-shadow: var(--ck-shadow-card);
}
.activity-strip h2 { font-size: .95rem; margin: 0 0 .45rem; color: var(--ck-coal) }
.activity-strip ul,
.activity-list { list-style: none; padding: 0; margin: 0 }
.activity-strip li,
.activity-list li {
  padding: .3rem 0;
  font-size: .9rem;
  border-bottom: 1px solid var(--ck-haze);
}
.activity-strip li:last-child,
.activity-list li:last-child { border-bottom: none }
.activity-strip .when,
.activity-list .when { color: var(--ck-ash-text); font-size: .82rem }
.activity-more {
  display: inline-block;
  margin-top: .45rem;
  font-size: .85rem;
  color: var(--ck-link);
  text-decoration: none;
  font-weight: 600;
}
.activity-more:hover { color: var(--ck-ember-hot); text-decoration: underline }

.brand-pairs { margin: .5rem 0 1rem; font-size: .92rem; color: var(--ck-smoke); line-height: 1.5 }
.brand-pairs a { color: var(--ck-smoke); text-decoration: underline dotted; text-underline-offset: 2px }
.brand-pairs a:hover { color: var(--ck-ember) }

.brand-strength { margin: 1rem 0 1.25rem }
.brand-filter, .author-filter { margin: .5rem 0 .75rem }

.tag-hub {
  list-style: none;
  padding: 0;
  margin: var(--ck-s3) 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ck-s2);
}
.tag-hub li { margin: 0; padding: 0 }
.tag-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  padding: .9rem 1.05rem;
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-md);
  text-decoration: none;
  color: var(--ck-coal);
  font-weight: 600;
  box-shadow: var(--ck-shadow-card);
}
.tag-tile:hover {
  border-color: var(--ck-ember);
  color: var(--ck-ember);
  box-shadow: var(--ck-shadow-hover);
}
.tag-tile-label { font-size: 1.05rem; text-transform: capitalize }
.tag-tile-count { font-size: var(--ck-fs-xs); color: var(--ck-smoke); font-weight: 500 }
.tag-tile-teaser { margin: .2rem 0 .5rem; font-size: .85rem; color: var(--ck-smoke); padding-left: .9rem }
.tag-tile-teaser a { color: var(--ck-smoke); text-decoration: underline dotted }
.tag-tile-teaser a:hover { color: var(--ck-ember) }
.tag-tile-pairs { margin: .1rem 0 .5rem; font-size: .78rem; color: var(--ck-smoke); padding-left: .9rem; line-height: 1.3 }
.tag-tile-pairs a { color: var(--ck-smoke); text-decoration: underline dotted }
.tag-tile-pairs a:hover { color: var(--ck-ember) }
@media (min-width: 640px) { .tag-hub { grid-template-columns: repeat(4, 1fr) } }


/* ----------------------------------------------------------------------------
   13. Stats / status
   -------------------------------------------------------------------------- */

.stats-totals,
.stats-list { list-style: none; padding: 0; margin: 0 0 1rem }
.stats-totals li { margin: .25rem 0 }
.stats-totals strong { font-size: 1.25rem; color: var(--ck-ember); font-family: var(--ck-stack-display); font-weight: 800 }
.stats-list li { padding: .35rem 0; border-bottom: 1px solid var(--ck-haze) }
.stats-list li:last-child { border-bottom: none }

.stats-bars { list-style: none; padding: 0; margin: 0 0 1rem }
.stats-bars li {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .3rem 0;
  font-size: var(--ck-fs-sm);
}
.stats-bars .bar-label { flex: 0 0 6rem; color: var(--ck-coal); font-weight: 500 }
.stats-bars .bar {
  flex: 1;
  height: .65rem;
  background: var(--ck-haze);
  border-radius: var(--ck-r-pill);
  overflow: hidden;
}
.stats-bars .bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ck-ember) 0%, var(--ck-honey) 100%);
  border-radius: inherit;
}
.stats-bars .bar-count {
  flex: 0 0 2.2rem;
  text-align: right;
  color: var(--ck-smoke);
  font-variant-numeric: tabular-nums;
}
.stats-range { color: var(--ck-smoke); font-size: var(--ck-fs-sm); margin: 0 0 1rem }
.stats-queries-hint { color: var(--ck-smoke); font-size: var(--ck-fs-sm); margin: .5rem 0 1rem }

.status-table {
  margin: 1rem 0;
  border-collapse: collapse;
  width: 100%;
  max-width: 640px;
  font-size: var(--ck-fs-sm);
}
.status-table th,
.status-table td {
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--ck-haze);
  text-align: left;
  vertical-align: top;
}
.status-table th {
  color: var(--ck-smoke);
  font-weight: 600;
  width: 38%;
  white-space: nowrap;
  background: var(--ck-surface-deep);
}
.status-table td { font-family: var(--ck-stack-mono); color: var(--ck-coal); word-break: break-all }
.admin-nav { margin: .35rem 0 1rem }
.admin-nav a { color: var(--ck-link); text-decoration: none; font-weight: 600 }
.admin-nav a:hover { text-decoration: underline }


/* ----------------------------------------------------------------------------
   14. Live coach
   -------------------------------------------------------------------------- */

.coach-cta {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  margin: .75rem 0 1rem;
  padding: .7rem 1.25rem;
  background: var(--ck-ember);
  color: var(--ck-on-ember);
  border-radius: var(--ck-r-pill);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--ck-shadow-btn);
}
.coach-cta:hover { background: var(--ck-ember-hot); color: var(--ck-on-ember) }
.coach-cta-dur { font-weight: 500; opacity: .85; font-size: .85rem }

.coach-clock {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1rem 0;
  padding: .9rem 1.1rem;
  background: var(--ck-surface-deep);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-md);
}
.coach-clock-time { font-family: var(--ck-stack-mono); font-size: 1.5rem; font-weight: 700; color: var(--ck-ember); font-variant-numeric: tabular-nums }
.coach-clock-label { color: var(--ck-smoke); font-size: var(--ck-fs-sm) }

.coach-event {
  margin: .3rem 0;
  padding: .55rem .85rem;
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-haze);
  border-left: 3px solid var(--ck-ash);
  border-radius: var(--ck-r-sm);
  font-size: .92rem;
}
.coach-event-time { font-family: var(--ck-stack-mono); color: var(--ck-smoke); font-size: .82rem; margin-right: .5rem }
.coach-event[data-now="true"] {
  border-left-color: var(--ck-ember);
  background: var(--ck-ember-soft);
}
.coach-disclaimer { color: var(--ck-ash-text); font-size: var(--ck-fs-xs); margin-top: .75rem; font-style: italic }
.coach-list { list-style: none; padding: 0; margin: 0 }


/* ----------------------------------------------------------------------------
   15. Bowls-lit counter + PWA hint
   -------------------------------------------------------------------------- */

.bowls-lit-counter {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .7rem;
  background: var(--ck-honey-soft);
  color: var(--ck-warning-fg);
  border: 1px solid #e6c98a;
  border-radius: var(--ck-r-pill);
  font-size: var(--ck-fs-sm);
  font-weight: 600;
}
.bowls-lit-counter strong { color: var(--ck-ember); font-family: var(--ck-stack-display); font-weight: 800 }

.bowls-lit-form { display: inline-block; margin: 0 0 .5rem .5rem }
.bowls-lit-btn {
  background: var(--ck-ember);
  color: var(--ck-on-ember);
  border: none;
  padding: .55rem 1rem;
  border-radius: var(--ck-r-pill);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 38px;
  box-shadow: var(--ck-shadow-btn);
}
.bowls-lit-btn:hover { background: var(--ck-ember-hot) }
.bowls-lit-flash {
  background: var(--ck-success-bg);
  color: var(--ck-success-fg);
  border: 1px solid var(--ck-success-edge);
  border-left: 4px solid var(--ck-success-rail);
  padding: .75rem 1rem;
  border-radius: var(--ck-r-md);
  margin: .5rem 0 1rem;
}

.pwa-hint {
  margin: .5rem 0 1rem;
  padding: .9rem 1rem;
  background: var(--ck-info-bg);
  border: 1px solid var(--ck-info-edge);
  border-left: 4px solid var(--ck-info-rail);
  border-radius: var(--ck-r-md);
  color: var(--ck-info-fg);
}
.pwa-hint-lead { margin: 0 0 .35rem; font-weight: 600 }
.pwa-hint-steps { margin: 0 0 .55rem; font-size: var(--ck-fs-sm) }
.pwa-hint-form { display: inline-block; margin: 0 }
.pwa-hint-dismiss {
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-info-edge);
  color: var(--ck-info-fg);
  padding: .4rem .9rem;
  border-radius: var(--ck-r-sm);
  font-size: .85rem;
  cursor: pointer;
  min-height: 34px;
}
.pwa-hint-dismiss:hover { background: var(--ck-info-bg); border-color: var(--ck-info-rail) }

/* home-shelf-loop-callout — first-run nudge in the discovery chrome. Ember
   action rail (not the neutral info quad), filled CTA + quiet dismiss; mirrors
   .pwa-hint geometry. Actions wrap on narrow viewports. */
/* ui-refurbish (2026-06-10): slimmed from a stacked banner (lead + two
   44px buttons ≈ 150px tall) to a compact single-rail note. The CTA is a
   link-weight action; dismiss stays a quiet text button. */
.shelf-callout {
  margin: 0 0 var(--ck-s2);
  padding: calc(var(--ck-s2) * 1.4) var(--ck-s3);
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-haze);
  border-left: 4px solid var(--ck-ember);
  border-radius: var(--ck-r-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ck-s1) var(--ck-s3);
}
.shelf-callout-lead { margin: 0; color: var(--ck-smoke); line-height: 1.45; font-size: var(--ck-fs-sm); flex: 1 1 16rem }
.shelf-callout-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ck-s2) }
.shelf-callout-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--ck-s2);
  color: var(--ck-link); font-weight: 700; font-size: var(--ck-fs-sm);
  text-decoration: none; border-radius: var(--ck-r-sm);
}
.shelf-callout-cta:hover { color: var(--ck-ember-hot); text-decoration: underline }
.shelf-callout-cta:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: 2px }
.shelf-callout-form { display: inline-block; margin: 0 }
.shelf-callout-dismiss {
  background: none; border: none; color: var(--ck-ash-text);
  padding: var(--ck-s2); min-height: 44px; font-size: var(--ck-fs-sm); cursor: pointer;
}
.shelf-callout-dismiss:hover { text-decoration: underline }
.shelf-callout-dismiss:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: 2px; border-radius: var(--ck-r-sm) }


/* ----------------------------------------------------------------------------
   16. Tonight + Shelf form + Shop list
   -------------------------------------------------------------------------- */

.tonight-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 .25rem .5rem 0;
  padding: .55rem 1rem;
  background: var(--ck-ember);
  color: var(--ck-on-ember);
  border-radius: var(--ck-r-pill);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: var(--ck-shadow-btn);
}
.tonight-link:hover { background: var(--ck-ember-hot); color: var(--ck-on-ember) }

/* expand-global-nav — /me hub tile row (Shelf · Collections · Buildable)
   and the shared /me/* secondary nav. Tiles are equal-weight cards; the
   row wraps to a 2-col-ish grid on phones and stays a single comfortable
   row on wider screens. Mirrors the raised-surface visual language (raised
   surface, haze border, lift on hover) so it reads as one component
   family. The subnav is a quiet pill strip giving every leaf scent home. */
.me-hub-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--ck-s2);
  margin: var(--ck-s3) 0;
}
.me-tile {
  display: flex;
  flex-direction: column;
  gap: var(--ck-s1);
  min-height: 80px;
  padding: var(--ck-s3);
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-md);
  text-decoration: none;
  color: var(--ck-coal);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.me-tile:hover {
  transform: translateY(-1px);
  box-shadow: var(--ck-shadow-card);
  border-color: var(--ck-ember);
}
.me-tile:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: 2px }
.me-tile-icon { font-size: 1.4rem; line-height: 1; color: var(--ck-link) }
.me-tile-icon .icon { width: 22px; height: 22px }
.me-tile-label { font-weight: 700; font-size: .95rem }
.me-tile-count { color: var(--ck-smoke); font-size: .85rem }
.me-tile-count--empty { color: var(--ck-ash-text); font-style: italic }

.me-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-s1);
  margin: 0 0 var(--ck-s3);
}
.me-subnav-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 .85rem;
  border-radius: var(--ck-r-pill);
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-haze);
  color: var(--ck-smoke);
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.me-subnav-link:hover { background: var(--ck-ember-soft); color: var(--ck-ember-hot) }
.me-subnav-link[aria-current="page"] {
  background: var(--ck-ember);
  border-color: var(--ck-ember);
  color: var(--ck-on-ember);
}
.me-subnav-link:focus-visible { outline: 3px solid var(--ck-ember); outline-offset: 2px }

.shelf-form {
  margin: 1rem 0;
  padding: 1rem 1.15rem;
  background: var(--ck-success-bg);
  border: 1px solid var(--ck-success-edge);
  border-left: 4px solid var(--ck-success-rail);
  border-radius: var(--ck-r-md);
}
.shelf-form label { font-weight: 600; color: var(--ck-success-fg) }
.shelf-form .form-hint { color: var(--ck-success-fg); opacity: .9 }
/* structured-shelf-add — current entries render as removable chips; the
   add form is two datalist-backed inputs (brand + flavour). */
.shelf-chips { list-style: none; margin: .75rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem }
.shelf-chip {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 32px;
  padding: .2rem .25rem .2rem .6rem; background: var(--ck-surface-raised);
  border: 1px solid var(--ck-success-edge); border-radius: var(--ck-r-pill);
  font-size: var(--ck-fs-sm); color: var(--ck-coal);
}
.shelf-chip form { display: inline-flex; margin: 0 }
.shelf-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; min-height: 28px; padding: 0; border: none;
  border-radius: 50%; background: transparent; color: var(--ck-smoke);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.shelf-chip-remove:hover { background: var(--ck-haze); color: var(--ck-coal) }
.shelf-chip-remove:focus-visible { outline: 2px solid var(--ck-ember); outline-offset: 1px }
.shelf-empty { margin: .75rem 0; color: var(--ck-success-fg); opacity: .9; font-size: var(--ck-fs-sm) }
.shelf-add-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem }
.shelf-add-form .form-group { flex: 1 1 8rem; margin: 0 }
.shelf-add-form input[type="text"] { min-height: 44px }
.shelf-add-form .btn-primary { flex: 0 0 auto }

/* ----------------------------------------------------------------------------
   17. Mix DNA surface
   -------------------------------------------------------------------------- */

.dna-archetype-card {
  position: relative;
  margin: 0 0 var(--ck-s3);
  padding: calc(var(--ck-s3) * 1.1) var(--ck-s3) calc(var(--ck-s3) * 1.1);
  border-radius: var(--ck-r-md);
  background: linear-gradient(135deg, var(--ck-hero-gradient-from) 0%, var(--ck-surface-raised) 75%);
  border: 1px solid var(--ck-haze);
  box-shadow: var(--ck-shadow-card);
}
.dna-eyebrow {
  display: inline-block;
  font-size: var(--ck-fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ck-ember-hot);
  margin: 0 0 .35rem;
}
.dna-archetype-name {
  font-family: var(--ck-stack-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  color: var(--ck-coal);
  margin: 0 0 .35rem;
}
.dna-tagline { font-size: 1rem; color: var(--ck-smoke); margin: 0 0 .5rem }
.dna-sample { color: var(--ck-ash-text); font-size: var(--ck-fs-sm); margin: 0 }
.dna-h2 { margin: 1.25rem 0 .65rem }

.dna-bars { list-style: none; padding: 0; margin: 0 0 1rem }
.dna-bar-row {
  display: grid;
  grid-template-columns: 7rem 1fr 3rem;
  gap: .65rem;
  align-items: center;
  margin: .3rem 0;
  font-size: var(--ck-fs-sm);
}
.dna-bar-label a { color: var(--ck-coal); font-weight: 600; text-decoration: none; text-transform: capitalize }
.dna-bar-label a:hover { color: var(--ck-ember) }
.dna-bar {
  height: .7rem;
  background: var(--ck-haze);
  border-radius: var(--ck-r-pill);
  overflow: hidden;
}
.dna-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ck-ember) 0%, var(--ck-honey) 100%);
}
.dna-bar-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ck-smoke) }

.dna-brand-bubbles { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem }
.dna-bubble {
  display: inline-flex;
  align-items: center;
  padding: .25rem .75rem;
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-pill);
  text-decoration: none;
  color: var(--ck-coal);
  font-weight: 600;
}
.dna-bubble:hover { border-color: var(--ck-ember); color: var(--ck-ember) }
.dna-bubble[data-w="1"] { font-size: .82rem }
.dna-bubble[data-w="2"] { font-size: .92rem }
.dna-bubble[data-w="3"] { font-size: 1rem; background: var(--ck-ember-soft); border-color: var(--ck-ember); color: var(--ck-ember-hot) }

.dna-match-wrap { margin-bottom: var(--ck-s2) }
.dna-match-row { margin: 0 0 .3rem }
.dna-match-badge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: var(--ck-r-pill);
  font-size: var(--ck-fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
}
.dna-match-badge[data-tier="top"]  { background: var(--ck-ember-soft); color: var(--ck-ember-hot); border: 1px solid var(--ck-ember) }
.dna-match-badge[data-tier="high"] { background: var(--ck-honey-soft); color: var(--ck-warning-fg); border: 1px solid #e6c98a }
.dna-match-badge[data-tier="mid"]  { background: var(--ck-surface-deep); color: var(--ck-coal); border: 1px solid var(--ck-haze) }

.dna-matches-empty { color: var(--ck-smoke); font-style: italic }
.dna-empty { padding: var(--ck-s4) 0; text-align: center }
.dna-empty-lead { color: var(--ck-smoke); font-size: 1.05rem; max-width: 36ch; margin: .5rem auto 1rem }
.dna-empty-cta { margin-top: 1rem }
.dna-link { color: var(--ck-link); text-decoration: none; font-weight: 600 }
.dna-link:hover { text-decoration: underline }


/* ----------------------------------------------------------------------------
   18. Motd banner / following / changelog
   -------------------------------------------------------------------------- */

.motd-banner {
  margin: .5rem 0 1rem;
  padding: .8rem 1rem;
  background: var(--ck-surface-raised);
  border: 1px solid var(--ck-haze);
  border-left: 4px solid var(--ck-ember);
  border-radius: var(--ck-r-md);
  font-size: .95rem;
}
.motd-banner strong { color: var(--ck-link) }
.motd-banner a { color: var(--ck-coal); font-weight: 600; text-decoration: none }
.motd-banner a:hover { color: var(--ck-ember) }

.changelog-list { list-style: none; padding: 0; margin: 0 }
.changelog-entry {
  padding: .8rem 0;
  border-bottom: 1px solid var(--ck-haze);
}
.changelog-entry:last-child { border-bottom: none }
.changelog-when { color: var(--ck-ash-text); font-size: var(--ck-fs-sm); margin-right: .5rem }
.changelog-sha code {
  background: var(--ck-surface-deep);
  border-radius: var(--ck-r-sm);
  padding: 0 .35rem;
  font-family: var(--ck-stack-mono);
  font-size: .85rem;
  color: var(--ck-smoke);
}

.me-auth {
  margin: 1rem 0;
  padding: .85rem 1rem;
  background: var(--ck-surface-deep);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-md);
  font-size: .95rem;
}
.me-auth a { color: var(--ck-link); font-weight: 600; text-decoration: none }
.me-auth a:hover { text-decoration: underline }
.me-auth-logout button { background: var(--ck-surface-raised); color: var(--ck-coal); border: 1px solid var(--ck-ash); border-radius: var(--ck-r-sm); padding: .4rem .9rem; font-size: .85rem; cursor: pointer; box-shadow: none }
.me-auth-logout button:hover { background: var(--ck-surface-deep) }


/* ----------------------------------------------------------------------------
   19. Legal / forget / device-link / login
   -------------------------------------------------------------------------- */

.legal-foot {
  margin: var(--ck-s4) auto 1rem;
  padding: 0 var(--ck-s3);
  max-width: var(--ck-feed-max);
  font-size: var(--ck-fs-sm);
  color: var(--ck-smoke);
  text-align: center;
}
.legal-foot a { color: var(--ck-smoke); text-decoration: none; border-bottom: 1px dashed var(--ck-ash) }
.legal-foot a:hover { color: var(--ck-ember); border-bottom-color: var(--ck-ember); border-bottom-style: solid }

.legal-page {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--ck-s3) var(--ck-s3) var(--ck-s4);
}
.legal-page h1 { margin-bottom: var(--ck-s3); }
.legal-section { margin-top: var(--ck-s4); }
.legal-section h2 {
  font-size: var(--ck-fs-md);
  font-weight: 600;
  margin-bottom: var(--ck-s2);
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--ck-ash);
}
.legal-section h3 {
  font-size: var(--ck-fs-base);
  font-weight: 600;
  margin: var(--ck-s3) 0 var(--ck-s1);
}
.legal-section p, .legal-list li { line-height: 1.6; color: var(--ck-text); }
.legal-section p + p { margin-top: var(--ck-s2); }
.legal-intro { line-height: 1.6; margin-bottom: var(--ck-s2); color: var(--ck-smoke); }
.legal-address {
  font-style: normal;
  line-height: 1.8;
  background: var(--ck-surface-deep);
  border-radius: var(--ck-r);
  padding: var(--ck-s2) var(--ck-s3);
  display: inline-block;
  margin-top: var(--ck-s1);
}
.legal-list {
  margin: var(--ck-s2) 0;
  padding-left: var(--ck-s3);
  display: flex;
  flex-direction: column;
  gap: var(--ck-s1);
}
.legal-cookie-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ck-fs-sm);
  margin-top: var(--ck-s2);
}
.legal-cookie-table th {
  text-align: left;
  font-weight: 600;
  padding: .4rem .6rem;
  border-bottom: 2px solid var(--ck-ash);
  white-space: nowrap;
}
.legal-cookie-table td {
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--ck-surface-deep);
  vertical-align: top;
  line-height: 1.5;
}
.legal-cookie-table tr:last-child td { border-bottom: none; }
.legal-cookie-table code {
  background: var(--ck-surface-deep);
  border-radius: var(--ck-r-sm);
  padding: 0 .35rem;
  font-family: var(--ck-stack-mono);
  white-space: nowrap;
}
.legal-updated {
  margin-top: var(--ck-s4);
  font-size: var(--ck-fs-sm);
  color: var(--ck-smoke);
}
.legal-cookies code {
  background: var(--ck-surface-deep);
  border-radius: var(--ck-r-sm);
  padding: 0 .35rem;
  font-family: var(--ck-stack-mono);
}

/* kbd-hotkey-hints — collapsible <details> with semantic <kbd> caps.
   Surfaces the iter-80 hotkey chords without dispatching JS; degrades
   to a static caret-marker on browsers that don't render <details>. */
.kbd-hints {
  margin: 0 auto var(--ck-s4);
  padding: 0 var(--ck-s3);
  max-width: var(--ck-feed-max);
  font-size: var(--ck-fs-sm);
  color: var(--ck-smoke);
  text-align: center;
}
.kbd-hints summary {
  cursor: pointer;
  color: var(--ck-smoke);
  display: inline-block;
  padding: .15rem .35rem;
  border-radius: var(--ck-r-sm);
}
.kbd-hints summary:hover { color: var(--ck-ember) }
.kbd-hints .kbd-row { margin: .35rem 0; line-height: 1.6 }
.kbd-hints kbd {
  font-family: var(--ck-stack-mono);
  font-size: var(--ck-fs-sm);
  background: var(--ck-surface-deep);
  border: 1px solid var(--ck-ash);
  border-bottom-width: 2px;
  border-radius: var(--ck-r-sm);
  padding: .05rem .4rem;
  color: var(--ck-coal);
  min-width: 1.4em;
  display: inline-block;
  text-align: center;
}

.forget-form, .login-form { max-width: 440px }
.forgotten-confirm { padding: 1rem; background: var(--ck-success-bg); border: 1px solid var(--ck-success-edge); border-radius: var(--ck-r-md); color: var(--ck-success-fg) }

.device-link-url {
  display: inline-block;
  margin: .5rem 0;
  padding: .35rem .7rem;
  background: var(--ck-surface-deep);
  border-radius: var(--ck-r-sm);
  font-family: var(--ck-stack-mono);
  font-size: .85rem;
  word-break: break-all;
}
.device-link-qr svg { background: var(--ck-surface-raised); padding: .5rem; border-radius: var(--ck-r-md); box-shadow: var(--ck-shadow-card) }
.device-link-refresh {
  background: var(--ck-surface-raised);
  color: var(--ck-coal);
  border: 1px solid var(--ck-haze);
  border-radius: var(--ck-r-sm);
  padding: .4rem 1rem;
  font-size: .9rem;
  cursor: pointer;
  min-height: 36px;
  box-shadow: none;
}
.device-link-refresh:hover { border-color: var(--ck-ember); color: var(--ck-ember) }

.brand-typo-hint code,
.duplicate-hint code { background: var(--ck-surface-raised); border-radius: var(--ck-r-sm); padding: 0 .35rem; font-family: var(--ck-stack-mono); font-size: .9rem }


/* ----------------------------------------------------------------------------
   20. Skip link (a11y)
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--ck-ember);
  color: var(--ck-on-ember);
  padding: .65rem 1rem;
  border-radius: var(--ck-r-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--ck-shadow-btn);
}

/* sr-only — visually-hidden but readable to assistive tech (home-heading-
   hierarchy document <h1>; reusable for any off-screen label/heading). The
   clip-path + 1px box keeps it out of the visual flow while leaving it in
   the a11y tree — display:none would drop it from the heading outline. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ----------------------------------------------------------------------------
   21. Dark mode
   Three states, layered so they cooperate cleanly:
     • Light is the default (the :root block above).
     • prefers-color-scheme: dark → :root inside the @media block swaps
       every palette var. Wrapped in :not([data-theme="light"]) so an
       explicit light override defeats the OS preference.
     • [data-theme="dark"] forces dark regardless of OS preference.
   A single utility var (`--ck-hero-gradient-from`) handles the only
   hard-coded surface gradient that needs to flip with the palette;
   every other dark-mode tweak is driven through cascading vars.
   -------------------------------------------------------------------------- */

:root { --ck-hero-gradient-from: #f6e7c9 }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ck-coal:          #f3ebdc;
    --ck-smoke:         #c0b4a1;
    --ck-ash:           #6f6357;
    /* Dark muted-text tier: dimmer than --ck-smoke yet ≥5.1:1 on every dark
       surface (the un-overridden #7a716a ash would be ~3.3–4.0:1, below AA). */
    --ck-ash-text:      #a89a88;
    --ck-haze:          #38302a;
    --ck-haze-strong:   #4c4239;
    --ck-surface:       #15110d;
    --ck-surface-raised:#211b15;
    --ck-surface-deep:  #2c241c;
    --ck-surface-app:   rgba(21,17,13,.82);
    --ck-ember:         #e0a23f;
    --ck-ember-hot:     #f0bd6a;
    --ck-on-ember:      #241a0d;
    --ck-brass:         #cf9b3f;
    --ck-honey:         #e0a23f;
    --ck-ember-soft:    #3a2c16;
    --ck-ember-glow:    rgba(224,162,63,.34);
    /* Dark mode flips the link hue lighter — #f0884f reads 6.2–7.5:1 on the
       dark surfaces (the un-overridden ember-hot #9a3412 would be ~2.4:1). */
    --ck-link:          #f0bd6a;
    --ck-success-bg:    #1c2e22;
    --ck-success-fg:    #b9e0c6;
    --ck-success-rail:  #4a8a64;
    --ck-success-edge:  #2e4a35;
    --ck-info-bg:       #1a2536;
    --ck-info-fg:       #c8d8ee;
    --ck-info-rail:     #4a7ec0;
    --ck-info-edge:     #2a3e5c;
    --ck-warning-bg:    #2a1f0e;
    --ck-warning-fg:    #f0d6a8;
    --ck-warning-rail:  #c89a40;
    --ck-warning-edge:  #4a3826;
    --ck-danger-bg:     #2e0e0e;
    --ck-danger-fg:     #f0c0c0;
    --ck-danger-rail:   #d04848;
    --ck-danger-edge:   #5a2222;
    --ck-leaf-soft:     #1f3324;
    --ck-honey-soft:    #2a1f0e;
    --ck-danger-soft:   #2e0e0e;
    --ck-hero-gradient-from: #2a1f0e;
    --ck-shadow-card:   0 1px 0 rgba(0,0,0,.5), 0 4px 14px -8px rgba(0,0,0,.7);
    --ck-shadow-hover:  0 1px 0 rgba(0,0,0,.55), 0 10px 24px -10px rgba(0,0,0,.8);
    --ck-shadow-bar:    0 1px 0 rgba(0,0,0,.45), 0 4px 16px -10px rgba(0,0,0,.6);
    --ck-shadow-btn:    0 1px 0 rgba(120,70,10,.55), 0 4px 12px -4px rgba(224,162,63,.30);
    --ck-shadow-glow:   0 0 0 1px rgba(224,162,63,.34), 0 8px 26px -10px rgba(224,162,63,.42);
    --ck-shadow-inset:  inset 0 1px 0 rgba(255,255,255,.06);
  }
  :root:not([data-theme="light"]) body {
    background-image: radial-gradient(120% 60% at 50% -10%, rgba(224,162,63,.16), transparent 60%), radial-gradient(80% 50% at 100% 0%, rgba(224,162,63,.08), transparent 55%);
  }
  :root:not([data-theme="light"]) .tag { background: #3a2c1e; color: #f0d6a8 }
  :root:not([data-theme="light"]) a.tag:hover { background: #4a3826 }
  :root:not([data-theme="light"]) .recent-search-chip:hover { background: #3a2014 }
}

[data-theme="dark"] {
  --ck-coal:          #f3ebdc;
  --ck-smoke:         #c0b4a1;
  --ck-ash:           #6f6357;
  /* Dark muted-text tier — see the prefers-color-scheme block. */
  --ck-ash-text:      #a89a88;
  --ck-haze:          #38302a;
  --ck-haze-strong:   #4c4239;
  --ck-surface:       #15110d;
  --ck-surface-raised:#211b15;
  --ck-surface-deep:  #2c241c;
  --ck-surface-app:   rgba(21,17,13,.82);
  --ck-ember:         #e0a23f;
    --ck-ember-hot:     #f0bd6a;
    --ck-on-ember:      #241a0d;
    --ck-brass:         #cf9b3f;
    --ck-honey:         #e0a23f;
    --ck-ember-soft:    #3a2c16;
  --ck-ember-glow:    rgba(224,162,63,.34);
  /* Dark mode flips the link hue lighter — see the prefers-color-scheme block. */
  --ck-link:          #f0bd6a;
  --ck-success-bg:    #1c2e22;
  --ck-success-fg:    #b9e0c6;
  --ck-success-rail:  #4a8a64;
  --ck-success-edge:  #2e4a35;
  --ck-info-bg:       #1a2536;
  --ck-info-fg:       #c8d8ee;
  --ck-info-rail:     #4a7ec0;
  --ck-info-edge:     #2a3e5c;
  --ck-warning-bg:    #2a1f0e;
  --ck-warning-fg:    #f0d6a8;
  --ck-warning-rail:  #c89a40;
  --ck-warning-edge:  #4a3826;
  --ck-danger-bg:     #2e0e0e;
  --ck-danger-fg:     #f0c0c0;
  --ck-danger-rail:   #d04848;
  --ck-danger-edge:   #5a2222;
  --ck-leaf-soft:     #1f3324;
  --ck-honey-soft:    #2a1f0e;
  --ck-danger-soft:   #2e0e0e;
  --ck-hero-gradient-from: #2a1f0e;
  --ck-shadow-card:   0 1px 0 rgba(0,0,0,.5), 0 4px 14px -8px rgba(0,0,0,.7);
  --ck-shadow-hover:  0 1px 0 rgba(0,0,0,.55), 0 10px 24px -10px rgba(0,0,0,.8);
  --ck-shadow-bar:    0 1px 0 rgba(0,0,0,.45), 0 4px 16px -10px rgba(0,0,0,.6);
  --ck-shadow-btn:    0 1px 0 rgba(120,70,10,.55), 0 4px 12px -4px rgba(224,162,63,.30);
  --ck-shadow-glow:   0 0 0 1px rgba(224,162,63,.34), 0 8px 26px -10px rgba(224,162,63,.42);
  --ck-shadow-inset:  inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] body {
  background-image: radial-gradient(120% 60% at 50% -10%, rgba(224,162,63,.16), transparent 60%), radial-gradient(80% 50% at 100% 0%, rgba(224,162,63,.08), transparent 55%);
}
[data-theme="dark"] .tag { background: #3a2c1e; color: #f0d6a8 }
[data-theme="dark"] a.tag:hover { background: #4a3826 }
[data-theme="dark"] .recent-search-chip:hover { background: #3a2014 }


/* ----------------------------------------------------------------------------
   22. Reduced motion + print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .mix-avatar:hover, button[type="submit"]:hover { transform: none }
  /* Cross-document crossfade off for reduced-motion users. */
  @view-transition { navigation: none }
}

@media print {
  body { max-width: none; background: #fff !important; color: #000; padding: .5cm; background-image: none }
  .appbar, .brand-foot, .back, .activity-strip, .sort, .search, .search-status,
  .recent-searches, .new-mix-link, .upvote, .mix-action-bar,
  .share-btn, .editorial-hero, .catalogue-filter,
  .owner-actions, .similar-mixes, .shelf-form, .duplicate-hint,
  .byline, .pwa-hint, .shelf-callout, .mix-qr, .coach-cta, .legal-foot,
  .skip-link, .tonight-link, .dna-link, .mix-card-head { display: none !important }
  .card, .card:hover {
    border: 1px solid #999;
    box-shadow: none;
    transform: none;
    break-inside: avoid;
    background: #fff !important;
    color: #000 !important;
  }
  .mix-title { font-size: 1.8rem }
  h1, h2 { color: #000 !important }
  a { color: #000 !important; text-decoration: underline }
  main { margin: 0 !important; padding: 0 !important }
  .card-view { padding: 0 }
  .tag { border: 1px solid #999; color: #000; background: none }
  .setup-badge { border: 1px solid #999; background: none }
  .notes { border-left: 3px solid #666; background: #f5f5f5; color: #000 }
}
