/* ==========================================================================
   J.J. — house stylesheet
   Backwoods Barbie / Nanny Fine: leopard, lamé, rhinestone, hot pink, sparkle.
   Public site = light. Composer (/admin) = dark. Both live in this one file.

   Load order:
     1. fonts (Bodoni Moda + Karla)
     2. jj.css
     3. page CSS (layout only — never colour, never pattern)

   Requires one asset: /assets/print.jpg  (pink leopard fur, ~630×315, tileable
   enough to crop). Override the path once via --jj-print if it lives elsewhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* ---- brand colour ---- */
  --jj-purple:        oklch(0.45 0.24 305);   /* post titles, wordmark face   */
  --jj-purple-bright: oklch(0.62 0.22 305);   /* purple on dark surfaces      */
  --jj-yellow:        oklch(0.90 0.18 100);   /* wordmark shadow, hot labels  */
  --jj-pink:          oklch(0.55 0.24 353);   /* primary action               */
  --jj-pink-light:    oklch(0.72 0.19 353);   /* gradient top, offset shadow  */
  --jj-pink-deep:     oklch(0.32 0.13 353);   /* button underside             */
  --jj-turquoise:     oklch(0.60 0.115 196);  /* meta + headings on light     */
  --jj-turquoise-br:  oklch(0.82 0.13 196);   /* meta + headings on dark      */
  --jj-red:           oklch(0.66 0.19 25);    /* destructive only             */
  --jj-green:         oklch(0.62 0.16 155);   /* upload success only          */

  /* ---- ink & paper ---- */
  --jj-ink:           oklch(0.11 0.02 350);   /* the black. always this one.  */
  --jj-ink-soft:      oklch(0.20 0.03 350);   /* device bezels, hairlines     */
  --jj-white:         oklch(0.99 0.02 85);    /* warm white, never #fff       */
  --jj-paper:         oklch(0.965 0.055 355); /* public page ground           */
  --jj-paper-2:       oklch(0.925 0.075 355); /* recessed light panel         */
  --jj-line:          oklch(0.885 0.045 355); /* light hairline               */
  --jj-body:          oklch(0.20 0.03 350);   /* body copy on paper           */
  --jj-body-dim:      oklch(0.38 0.03 350);   /* deks, secondary copy         */

  /* ---- dark surfaces (composer) ---- */
  --jj-dark:          oklch(0.17 0.02 320);
  --jj-dark-surface:  oklch(0.235 0.022 320);
  --jj-dark-line:     oklch(0.30 0.02 320);
  --jj-dark-dim:      oklch(0.70 0.015 320);

  /* ---- patterns ---- */
  --jj-print:         url("/assets/print.jpg");
  --jj-lame: linear-gradient(oklch(0.92 0.12 95), oklch(0.78 0.15 82) 45%, oklch(0.62 0.13 70));
  --jj-lame-ink:      oklch(0.20 0.06 60);    /* text that sits on lamé       */
  --jj-pink-grad:     linear-gradient(var(--jj-pink-light), var(--jj-pink));

  /* ---- type ---- */
  --jj-display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --jj-sans:    Karla, system-ui, -apple-system, sans-serif;
  --jj-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- structure ---- */
  --jj-radius:        14px;   /* cards, panels        */
  --jj-radius-pill:   999px;  /* chips, buttons       */
  --jj-border:        3px;    /* the outline. thick.  */
  --jj-border-thin:   2px;    /* chips, small cards   */
  --jj-offset:        7px;    /* offset shadow throw  */
  --jj-offset-sm:     4px;
  --jj-tap:           48px;   /* minimum target       */
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--jj-paper);
  color: var(--jj-body);
  font: 400 17px/1.5 var(--jj-sans);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a       { color: var(--jj-purple); text-decoration: none; font-weight: 600; }
a:hover { color: oklch(0.36 0.22 305); text-decoration: underline; }

img, video { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--jj-turquoise);
  outline-offset: 2px;
}

::selection { background: var(--jj-yellow); color: var(--jj-ink); }

/* --------------------------------------------------------------------------
   3. TYPE
   Display italic Bodoni for anything that names something. Karla for
   everything a person reads in quantity. Mono, uppercase, tracked out for
   metadata — never for prose.
   -------------------------------------------------------------------------- */

.jj-wordmark {
  font: 700 40px/0.9 var(--jj-display);
  font-style: italic;
  letter-spacing: -0.04em;
  color: var(--jj-purple);
  text-shadow: 4px 4px 0 var(--jj-yellow), 7px 7px 0 var(--jj-ink);
}
.jj-wordmark--lg { font-size: 76px; text-shadow: 5px 5px 0 var(--jj-yellow), 9px 9px 0 var(--jj-ink); }
.jj-wordmark--sm { font-size: 20px; text-shadow: 2px 2px 0 var(--jj-yellow); }
.jj-wordmark sup,
.jj-wordmark .jj-star { font: 400 0.34em var(--jj-sans); color: var(--jj-yellow); vertical-align: super; }

/* post title — purple, always */
.jj-title {
  font: 700 clamp(26px, 7vw, 42px)/0.98 var(--jj-display);
  font-style: italic;
  letter-spacing: -0.03em;
  color: var(--jj-purple);
  margin: 0;
}
.jj-title .jj-ul { border-bottom: 3px solid var(--jj-pink-light); }

/* section heading inside a post — turquoise, always */
.jj-heading {
  font: 700 24px var(--jj-display);
  font-style: italic;
  color: var(--jj-turquoise);
  margin: 0;
}
.jj-heading--on-dark { color: var(--jj-turquoise-br); }
.jj-heading--rule    { border-bottom: 4px solid var(--jj-pink); display: inline-block; }

.jj-dek  { font: 400 16px/1.4 var(--jj-sans); color: var(--jj-body-dim); }
.jj-prose { font: 400 18px/1.5 var(--jj-sans); color: var(--jj-body); }
.jj-prose + .jj-prose { margin-top: 12px; }

/* metadata: mono, caps, tracked. turquoise on light, bright on dark. */
.jj-meta {
  font: 400 11px var(--jj-mono);
  letter-spacing: 0.06em;
  color: var(--jj-turquoise);
  white-space: nowrap;
}
.jj-meta--caps { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
.jj-meta--on-dark { color: var(--jj-turquoise-br); }

/* --------------------------------------------------------------------------
   4. PATTERNS
   One pattern per surface. Patterns butt against each other with no gap —
   that collision is the house move. Never fade, blur, or overlay-tint them.
   -------------------------------------------------------------------------- */

/* leopard: a single crop per surface, so no tile seam is ever visible */
.jj-print {
  background-image: var(--jj-print);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* black-and-white dots — the second pattern, for butting against leopard */
.jj-dots {
  background-color: var(--jj-white);
  background-image: radial-gradient(circle at 50% 50%, var(--jj-ink) 0 5.5px, transparent 6px);
  background-size: 22px 22px;
}

/* rhinestone strip / bezel */
.jj-rhinestone {
  background-color: oklch(0.30 0.02 300);
  background-image:
    radial-gradient(circle at 50% 40%, var(--jj-white) 0 2px, oklch(0.86 0.02 250) 2px 3.4px, transparent 3.6px),
    radial-gradient(circle at 50% 60%, oklch(0.72 0.03 250) 0 2.6px, transparent 2.8px);
  background-size: 11px 100%, 11px 100%;
}

/* gold lamé */
.jj-lame { background: var(--jj-lame); color: var(--jj-lame-ink); }

/* scalloped hem — put directly under a patterned block */
.jj-scallop {
  height: 9px;
  background-color: var(--jj-ink);
  -webkit-mask-image: radial-gradient(circle 9px at 9px 0, transparent 0 9px, black 9.5px);
  -webkit-mask-size: 18px 100%;
  mask-image: radial-gradient(circle 9px at 9px 0, transparent 0 9px, black 9.5px);
  mask-size: 18px 100%;
}

/* band heights — bands are decoration, so they get fixed heights */
.jj-band     { flex: none; height: 22px; }
.jj-band--tall { height: 40px; }
.jj-band--thin { height: 12px; }

/* --------------------------------------------------------------------------
   5. THE OFFSET SHADOW
   Hard, un-blurred, always down-right, always a brand colour. This is the
   single most identity-carrying detail in the system. Never use a soft
   drop shadow on a content element.
   -------------------------------------------------------------------------- */

.jj-pop      { box-shadow: var(--jj-offset) var(--jj-offset) 0 var(--jj-pink-light); }
.jj-pop--sm  { box-shadow: var(--jj-offset-sm) var(--jj-offset-sm) 0 var(--jj-pink-light); }
.jj-pop--pink{ box-shadow: var(--jj-offset) var(--jj-offset) 0 var(--jj-pink); }
.jj-pop--tq  { box-shadow: 3px 3px 0 var(--jj-turquoise-br); }
.jj-pop--gold{ box-shadow: 3px 3px 0 var(--jj-white); }

/* --------------------------------------------------------------------------
   6. PLATES, CHIPS, CARDS
   -------------------------------------------------------------------------- */

/* plate: a solid block that makes type readable on top of a pattern.
   Anything sitting on leopard needs one. No exceptions. */
.jj-plate {
  background: var(--jj-ink);
  color: var(--jj-white);
  border: var(--jj-border-thin) solid var(--jj-white);
  border-radius: var(--jj-radius-pill);
  padding: 6px 11px;
  display: inline-block;
  white-space: nowrap;
}
.jj-plate--display { font: 700 20px/1.1 var(--jj-display); font-style: italic; }
.jj-plate--flat    { border-radius: 4px; border-width: 0; }

/* chip: category / filter / tag. Always outlined, always nowrap. */
.jj-chip {
  display: inline-block;
  font: 700 10px var(--jj-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jj-white);
  background: var(--jj-pink);
  border: var(--jj-border-thin) solid var(--jj-ink);
  border-radius: var(--jj-radius-pill);
  padding: 5px 10px;
  white-space: nowrap;
}
.jj-chip--gold  { background: var(--jj-lame); color: var(--jj-lame-ink); }
.jj-chip--yellow{ background: var(--jj-yellow); color: var(--jj-ink); }
.jj-chip--tq    { background: var(--jj-turquoise-br); color: var(--jj-ink); }
.jj-chip--quiet { background: var(--jj-white); color: var(--jj-ink); }
.jj-chip--lg    { font: 600 13px var(--jj-sans); letter-spacing: 0; text-transform: none; padding: 7px 13px; }

/* card: white, outlined, popped */
.jj-card {
  background: var(--jj-white);
  border: var(--jj-border-thin) solid var(--jj-ink);
  border-radius: 12px;
  padding: 12px 14px;
}
.jj-card--pop   { box-shadow: var(--jj-offset-sm) var(--jj-offset-sm) 0 var(--jj-pink-light); }
.jj-card--block { background: var(--jj-ink); color: var(--jj-white); border: 0; padding: 16px 18px; }

/* photo frame: rhinestone bezel + inner black keyline + pink offset */
.jj-frame {
  position: relative;
  border: 4px solid transparent;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--jj-offset) var(--jj-offset) 0 var(--jj-pink-light),
              0 0 0 4px var(--jj-ink) inset;
  background-color: oklch(0.30 0.02 300);
  background-image:
    radial-gradient(circle at 50% 40%, var(--jj-white) 0 2px, oklch(0.86 0.02 250) 2px 3.4px, transparent 3.6px),
    radial-gradient(circle at 50% 60%, oklch(0.72 0.03 250) 0 2.6px, transparent 2.8px);
  background-size: 11px 100%, 11px 100%;
}
/* plain frame: black outline only. Use for step photos and thumbnails. */
.jj-frame--plain {
  border: var(--jj-border) solid var(--jj-ink);
  border-radius: 13px;
  background: none;
  box-shadow: 5px 5px 0 var(--jj-pink-light);
}
.jj-frame--thumb {
  border: var(--jj-border-thin) solid var(--jj-ink);
  border-radius: 9px;
  box-shadow: none;
  background: none;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   Pink gradient + white outline + a hard underside. Big. One per screen.
   -------------------------------------------------------------------------- */

.jj-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  padding: 0 22px;
  border: var(--jj-border) solid var(--jj-white);
  border-radius: var(--jj-radius-pill);
  background: var(--jj-pink-grad);
  color: var(--jj-white);
  font: 700 18px var(--jj-sans);
  text-shadow: 1px 1px 0 oklch(0.20 0.06 353);
  box-shadow: 0 4px 0 var(--jj-pink-deep);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.jj-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--jj-pink-deep); }

.jj-btn--secondary {
  background: var(--jj-white);
  color: var(--jj-ink);
  border-color: var(--jj-ink);
  text-shadow: none;
  box-shadow: 0 4px 0 var(--jj-ink);
}
.jj-btn--ghost {
  background: none; box-shadow: none; border: 0;
  color: var(--jj-turquoise); text-shadow: none;
  font-weight: 600;
}
.jj-btn--danger { background: var(--jj-red); box-shadow: 0 4px 0 oklch(0.38 0.14 25); }
.jj-btn[disabled], .jj-btn[aria-disabled="true"] {
  background: var(--jj-dark-surface);
  border-color: var(--jj-dark-line);
  color: oklch(0.52 0.015 320);
  text-shadow: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* step number as a lamé coin */
.jj-coin {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: var(--jj-border-thin) solid var(--jj-ink);
  background: var(--jj-lame);
  color: var(--jj-lame-ink);
  font: 700 19px/1 var(--jj-sans);
}

/* --------------------------------------------------------------------------
   8. SPARKLES
   Decoration only. pointer-events:none, aria-hidden, and never load-bearing.
   Position each one absolutely inside a .jj-sparkle-host.
   -------------------------------------------------------------------------- */

@keyframes jj-twinkle {
  0%, 100% { opacity: 0;   transform: scale(0.4) rotate(0deg); }
  45%      { opacity: 1;   transform: scale(1.15) rotate(20deg); }
  70%      { opacity: 0.5; transform: scale(0.8) rotate(-10deg); }
}

.jj-sparkle-host { position: relative; }

.jj-sparkle {
  position: absolute;
  font: 400 14px system-ui;
  color: var(--jj-white);
  text-shadow: 0 0 6px var(--jj-white);
  pointer-events: none;
  animation: jj-twinkle 2.4s ease-in-out infinite;
}
.jj-sparkle:nth-of-type(2n)   { animation-duration: 2.7s; animation-delay: 0.5s; color: var(--jj-turquoise-br); }
.jj-sparkle:nth-of-type(3n)   { animation-duration: 2.2s; animation-delay: 1.1s; color: oklch(0.92 0.12 95); }
.jj-sparkle:nth-of-type(4n)   { animation-duration: 2.9s; animation-delay: 1.6s; }

/* --------------------------------------------------------------------------
   9. MASTHEAD + NAV
   The full stack, top to bottom: leopard field → dots → scallop → rhinestone
   → pink nav. Skip layers going down, never reorder them.
   -------------------------------------------------------------------------- */

.jj-masthead {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 10px;
  background-image: var(--jj-print);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 900px) { .jj-masthead { padding: 16px 56px 18px; } }

.jj-nav {
  display: flex;
  gap: 13px;
  justify-content: center;
  padding: 11px 14px;
  background: var(--jj-pink-grad);
  border-top: var(--jj-border-thin) solid var(--jj-ink);
  border-bottom: var(--jj-border-thin) solid var(--jj-ink);
  font: 700 12px var(--jj-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.jj-nav a { color: var(--jj-white); text-shadow: 1px 1px 0 oklch(0.20 0.06 353); }
.jj-nav a:hover { color: var(--jj-yellow); text-decoration: none; }
.jj-nav .jj-star { color: var(--jj-turquoise-br); pointer-events: none; }

/* post-page bar: flat black, wordmark left, action right */
.jj-postbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 0 18px;
  background: var(--jj-ink);
}
@media (min-width: 900px) { .jj-postbar { min-height: 52px; padding: 0 56px; } }

/* --------------------------------------------------------------------------
   10. RECIPE / PROJECT STRUCTURE
   -------------------------------------------------------------------------- */

/* stat strip: prep / cook / feeds */
.jj-stats {
  display: flex;
  border-top: var(--jj-border-thin) solid var(--jj-ink);
  border-bottom: 1px solid var(--jj-line);
}
.jj-stats > * { flex: 1; padding: 7px 0; }
.jj-stats dt { font: 400 9px var(--jj-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--jj-turquoise); margin: 0; }
.jj-stats dd { font: 600 16px var(--jj-sans); color: var(--jj-ink); margin: 1px 0 0; }

/* ingredients live on a black card so they read in a kitchen */
.jj-ingredients {
  background: var(--jj-ink);
  color: var(--jj-white);
  border-radius: 13px;
  padding: 14px 16px 16px;
}
.jj-ingredients--rhinestone { /* wrap .jj-ingredients in this for the bezel */
  border-radius: 16px;
  padding: 3px;
  box-shadow: var(--jj-offset) var(--jj-offset) 0 var(--jj-pink-light);
}
.jj-ingredient {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 44px;
  border-bottom: 1px solid oklch(0.30 0.03 350);
  cursor: pointer;
  font: 400 17px/1.3 var(--jj-sans);
}
.jj-ingredient:last-child { border-bottom: 0; }
.jj-ingredient__box {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 7px;
  border: 1.5px solid oklch(0.62 0.02 320);
  display: flex; align-items: center; justify-content: center;
  font: 700 13px system-ui;
  color: transparent;
}
.jj-ingredient[aria-checked="true"] .jj-ingredient__box {
  background: var(--jj-pink);
  border-color: var(--jj-pink);
  color: var(--jj-white);
}
.jj-ingredient[aria-checked="true"] .jj-ingredient__text {
  color: oklch(0.62 0.015 320);
  text-decoration: line-through;
}

/* materials / tools — two blocked columns on black */
.jj-spec {
  display: flex;
  gap: 18px;
  background: var(--jj-ink);
  border-radius: var(--jj-radius);
  padding: 14px 16px;
  color: var(--jj-white);
}
.jj-spec > * { flex: 1; }
.jj-spec h3 { font: 700 10px var(--jj-mono); letter-spacing: 0.14em; color: var(--jj-turquoise-br); margin: 0 0 5px; }
.jj-spec ul { list-style: none; margin: 0; padding: 0; font: 400 15px/1.65 var(--jj-sans); }

.jj-step { display: flex; gap: 14px; align-items: flex-start; }
.jj-step + .jj-step { margin-top: 18px; }

/* --------------------------------------------------------------------------
   11. COMPOSER (dark)
   Scope with .jj-dark on the composer root. Same components, dark values.
   -------------------------------------------------------------------------- */

.jj-dark {
  background: var(--jj-dark);
  color: var(--jj-white);
}
.jj-dark .jj-title,
.jj-dark .jj-composer-title {
  color: var(--jj-yellow);
  font: 700 27px/1.05 var(--jj-display);
  font-style: italic;
  letter-spacing: -0.02em;
}
.jj-dark .jj-heading { color: var(--jj-turquoise-br); font-size: 19px; }
.jj-dark .jj-meta    { color: var(--jj-turquoise-br); }
.jj-dark .jj-card    { background: var(--jj-dark-surface); border-color: var(--jj-dark-line); color: var(--jj-white); }
.jj-dark .jj-prose   { color: var(--jj-white); }
.jj-dark a           { color: var(--jj-turquoise-br); }
.jj-dark hr,
.jj-dark .jj-rule    { border: 0; border-top: 1px solid var(--jj-dark-line); margin: 16px 0; }

.jj-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid var(--jj-dark-line);
}
.jj-topbar__type { font: 600 15px var(--jj-sans); color: var(--jj-turquoise-br); }
.jj-topbar__dot  { width: 5px; height: 5px; border-radius: 50%; background: var(--jj-pink-light); }

.jj-actionbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 18px 20px;
  border-top: 1px solid var(--jj-dark-line);
  background: var(--jj-dark-surface);
}
.jj-actionbar .jj-btn { flex: 1; }

.jj-iconbtn {
  flex: none;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px;
  border: var(--jj-border-thin) solid var(--jj-dark-line);
  background: var(--jj-dark);
  color: var(--jj-white);
  font: 400 22px system-ui;
  cursor: pointer;
}
.jj-iconbtn--gold { background: var(--jj-lame); color: var(--jj-lame-ink); border-color: var(--jj-white); }

/* type picker */
.jj-picker-option {
  background: var(--jj-dark-surface);
  border: var(--jj-border-thin) solid var(--jj-dark-line);
  border-radius: 18px;
  padding: 20px;
  cursor: pointer;
}
.jj-picker-option[aria-selected="true"],
.jj-picker-option:hover {
  border: var(--jj-border) solid var(--jj-pink-light);
  box-shadow: 5px 5px 0 var(--jj-pink);
}
.jj-picker-option h3 { font: 700 28px/1 var(--jj-display); font-style: italic; color: var(--jj-white); margin: 0; }
.jj-picker-option p  { font: 400 15px/1.4 var(--jj-sans); color: var(--jj-dark-dim); margin: 6px 0 0; }

/* upload tiles */
.jj-upload {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,…) is mandatory */
  gap: 9px;
}
.jj-upload__tile {
  position: relative;
  min-width: 0;
  height: 104px;
  overflow: hidden;
  border-radius: 11px;
  border: var(--jj-border-thin) solid var(--jj-white);
}
.jj-upload__badge {
  position: absolute; bottom: 6px; right: 6px;
  width: 21px; height: 21px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font: 700 12px system-ui;
  pointer-events: none;
}
.jj-upload__tile[data-state="done"]    .jj-upload__badge { background: var(--jj-green); color: var(--jj-ink); }
.jj-upload__tile[data-state="working"] { border-style: dashed; border-color: var(--jj-pink-light); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; background: var(--jj-dark-surface); }
.jj-upload__tile[data-state="failed"]  { border-color: var(--jj-red); background: oklch(0.28 0.08 25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }

.jj-progress { width: 62px; height: 5px; border-radius: 3px; background: var(--jj-dark-line); overflow: hidden; }
.jj-progress > * { height: 100%; background: var(--jj-pink-light); }

/* recovery / reassurance banner — turquoise, never red, never a toast */
.jj-recovered {
  border: var(--jj-border) solid var(--jj-turquoise-br);
  border-radius: 16px;
  background: oklch(0.26 0.06 196);
  padding: 15px 16px;
  color: var(--jj-white);
}
.jj-recovered h2 { font: 700 21px/1.1 var(--jj-display); font-style: italic; margin: 0; }
.jj-recovered p  { font: 400 16px/1.4 var(--jj-sans); color: oklch(0.93 0.02 196); margin: 6px 0 0; }

/* row menu in the manage view */
.jj-menu {
  background: var(--jj-dark-surface);
  border: var(--jj-border-thin) solid var(--jj-dark-line);
  border-radius: var(--jj-radius);
  overflow: hidden;
  box-shadow: 0 14px 30px -14px oklch(0.10 0.02 320 / 0.8);
}
.jj-menu button {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  border: 0; border-bottom: 1px solid var(--jj-dark-line);
  background: none;
  font: 600 17px var(--jj-sans);
  color: var(--jj-white);
  text-align: left;
  cursor: pointer;
}
.jj-menu button:last-child { border-bottom: 0; }
.jj-menu button:hover      { background: oklch(0.29 0.03 320); }
.jj-menu button .jj-hint   { font: 400 12px var(--jj-mono); color: var(--jj-turquoise-br); }
.jj-menu button.jj-destructive { color: var(--jj-red); }

/* --------------------------------------------------------------------------
   12. UTILITIES
   -------------------------------------------------------------------------- */

.jj-stack   { display: flex; flex-direction: column; }
.jj-row     { display: flex; align-items: center; }
.jj-gap-sm  { gap: 8px; }  .jj-gap { gap: 12px; }  .jj-gap-lg { gap: 20px; }
.jj-grow    { flex: 1; min-width: 0; }
.jj-nowrap  { white-space: nowrap; }
.jj-pad     { padding: 16px 20px; }
.jj-block   { background: var(--jj-ink); color: var(--jj-white); }
.jj-tap     { min-height: var(--jj-tap); min-width: var(--jj-tap); }
.jj-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   13. MOTION + PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .jj-sparkle { animation: none; opacity: 0.85; }
  .jj-btn     { transition: none; }
}

@media print {
  .jj-sparkle, .jj-nav, .jj-actionbar, .jj-band, .jj-scallop { display: none !important; }
  .jj-print, .jj-dots, .jj-rhinestone { background: none !important; }
  .jj-ingredients, .jj-spec, .jj-block { background: none !important; color: #000 !important; }
  .jj-title, .jj-heading { color: #000 !important; text-shadow: none !important; }
  .jj-pop, .jj-card--pop, .jj-frame { box-shadow: none !important; }
  body { background: #fff; }
}


/* ==========================================================================
   14. REMAINING PAGE ELEMENTS
   Everything the 17 boards use that sections 1–13 didn't already cover.
   Same rules: outlined, offset-shadowed, one pattern per surface.
   ========================================================================== */

/* ---- 14.1 hero block (the lead post on home) ----------------------------- */

.jj-hero            { padding: 12px 20px; }
.jj-hero__frame     { height: 104px; }              /* phone: photo height    */
.jj-hero__kicker    { display: flex; align-items: center; gap: 8px; }
.jj-hero__title     { margin: 7px 0 0; }
.jj-hero__dek       { font: 400 14px/1.3 var(--jj-sans); color: var(--jj-body-dim); margin: 5px 0 0; }
@media (min-width: 900px) {
  .jj-hero          { padding: 0; }
  .jj-hero__frame   { height: 150px; }
}

/* ---- 14.2 shelf (the permanent "worth cooking twice" rail) --------------- */
/* A leopard surface holding white cards. The heading MUST be a plate.        */

.jj-shelf {
  padding: 8px 0;
  background-image: var(--jj-print);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--jj-line);
}
.jj-shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 20px 12px;
}
.jj-shelf__rail {
  display: flex;
  gap: 9px;
  padding: 0 20px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.jj-shelf__rail::-webkit-scrollbar { display: none; }
.jj-shelf__item      { width: 122px; flex: none; }
.jj-shelf__item--cut { width: 80px; }              /* deliberate peek at the edge */
.jj-shelf__photo     { height: 50px; }
.jj-shelf__label {                                  /* white card over the print */
  background: var(--jj-white);
  border: var(--jj-border-thin) solid var(--jj-ink);
  border-radius: 10px;
  padding: 5px 7px 6px;
  margin-top: 6px;
  box-shadow: 3px 3px 0 var(--jj-turquoise-br);
}
.jj-shelf__label h4 { font: 600 14px/1.25 var(--jj-sans); color: var(--jj-ink); margin: 0; }

/* ---- 14.3 list row (Lately, more-notes, any short list) ------------------ */
/* On a black panel. White outlined card per row, pink offset, 42px thumb.    */

.jj-list        { background: var(--jj-ink); padding: 14px 14px 16px; }
.jj-list__label {
  align-self: flex-start;
  display: inline-block;
  font: 700 12px var(--jj-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jj-ink);
  background: var(--jj-turquoise-br);
  border: var(--jj-border-thin) solid var(--jj-white);
  border-radius: var(--jj-radius-pill);
  padding: 5px 11px;
  margin-bottom: 8px;
  box-shadow: 2px 2px 0 var(--jj-pink-light);
}
.jj-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 9px;
  margin-bottom: 6px;
  background: var(--jj-white);
  border: var(--jj-border-thin) solid var(--jj-ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--jj-pink-light);
}
.jj-row__thumb { flex: none; width: 42px; height: 42px; border: var(--jj-border-thin) solid var(--jj-ink); border-radius: 9px; overflow: hidden; }
.jj-row__body  { flex: 1; min-width: 0; }
.jj-row__title { font: 500 15px/1.25 var(--jj-sans); color: var(--jj-ink); }
.jj-row__meta  { font: 400 11px var(--jj-mono); color: var(--jj-turquoise); margin-top: 3px; }
.jj-more {                                          /* "ALL 14 NOTES →"       */
  font: 700 11px var(--jj-mono);
  letter-spacing: 0.14em;
  color: var(--jj-turquoise-br);
  padding: 3px 2px 0;
}

/* ---- 14.4 index grid + search + filters --------------------------------- */

.jj-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  background: var(--jj-white);
  border: var(--jj-border) solid var(--jj-ink);
  border-radius: var(--jj-radius-pill);
  font: 400 16px var(--jj-sans);
  color: var(--jj-ink);
}
.jj-search input { flex: 1; border: 0; background: none; font: inherit; color: inherit; outline: none; }
.jj-search input::placeholder { color: oklch(0.52 0.03 350); }
.jj-search__icon { color: var(--jj-pink); font-size: 15px; }

.jj-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.jj-filters button { cursor: pointer; }
.jj-filters button[aria-pressed="false"] { background: var(--jj-white); color: var(--jj-ink); }

.jj-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  align-content: start;
}
@media (min-width: 900px) { .jj-index { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; } }
.jj-index__card  { min-width: 0; }
.jj-index__photo { height: 104px; border: var(--jj-border) solid var(--jj-ink); border-radius: 12px; overflow: hidden; box-shadow: var(--jj-offset-sm) var(--jj-offset-sm) 0 var(--jj-pink-light); }
.jj-index__title { font: 600 15px/1.2 var(--jj-sans); color: var(--jj-ink); margin: 8px 0 0; }

/* ---- 14.5 tags ---------------------------------------------------------- */

.jj-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.jj-tag {
  font: 600 12px var(--jj-mono);
  color: var(--jj-white);
  background: var(--jj-pink);
  border: var(--jj-border-thin) solid var(--jj-ink);
  border-radius: var(--jj-radius-pill);
  padding: 5px 11px;
}
.jj-tag--alt { background: var(--jj-turquoise-br); color: var(--jj-ink); }

/* ---- 14.6 contact block (About) ---------------------------------------- */

.jj-contact       { background: var(--jj-ink); padding: 14px 20px 18px; }
.jj-contact__eyebrow { font: 700 10px var(--jj-mono); letter-spacing: 0.16em; color: var(--jj-turquoise-br); }
.jj-contact__email   { font: 700 22px/1.2 var(--jj-sans); color: var(--jj-yellow); margin-top: 6px; }
.jj-contact__note    { font: 400 14px/1.4 var(--jj-sans); color: oklch(0.78 0.02 320); margin-top: 5px; }

/* ---- 14.7 empty-state placeholders ------------------------------------- */
/* Dashed, colour-coded by what's coming. Never grey, never an icon of a box. */

.jj-placeholder {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  background: var(--jj-white);
  border: var(--jj-border) dashed var(--jj-pink);
  border-radius: var(--jj-radius);
}
.jj-placeholder--tq   { border-color: var(--jj-turquoise); }
.jj-placeholder__swatch {
  flex: none; width: 46px; height: 46px; border-radius: 10px;
  background-image: var(--jj-print); background-size: cover; background-position: center;
}
.jj-placeholder h3 { font: 700 16px var(--jj-sans); color: var(--jj-pink); margin: 0; }
.jj-placeholder--tq h3 { color: var(--jj-turquoise); }
.jj-placeholder p  { font: 400 13px var(--jj-sans); color: var(--jj-body-dim); margin: 2px 0 0; }

/* ---- 14.8 payoff header (the moment after publishing) ------------------ */

.jj-payoff {
  position: relative;
  padding: 20px 20px 22px;
  background-image: var(--jj-print);
  background-size: cover;
  background-position: center;
}
.jj-payoff h1 {
  font: 700 46px/0.92 var(--jj-display);
  font-style: italic;
  letter-spacing: -0.04em;
  color: var(--jj-purple);
  text-shadow: 4px 4px 0 var(--jj-yellow), 7px 7px 0 var(--jj-ink);
  margin: 0;
}
.jj-payoff__where {
  display: inline-block;
  font: 700 15px/1.3 var(--jj-sans);
  color: var(--jj-white);
  background: var(--jj-ink);
  padding: 7px 11px;
  border-radius: var(--jj-radius-pill);
  margin-top: 12px;
}
/* the published post, shown back to him */
.jj-receipt {
  border: var(--jj-border) solid var(--jj-white);
  border-radius: 16px;
  overflow: hidden;
  background: var(--jj-dark-surface);
  box-shadow: var(--jj-offset) var(--jj-offset) 0 var(--jj-pink);
}
.jj-receipt__body { padding: 14px 16px 16px; }

/* ---- 14.9 sign-in ------------------------------------------------------ */

.jj-signin        { padding: 26px 20px 0; }
.jj-signin h1     { font: 700 30px/1.0 var(--jj-display); font-style: italic; letter-spacing: -0.03em; color: var(--jj-yellow); margin: 0; }
.jj-signin p      { font: 400 17px/1.45 var(--jj-sans); color: var(--jj-dark-dim); margin: 10px 0 0; }
.jj-field {
  display: flex;
  align-items: center;
  min-height: 62px;
  padding: 0 18px;
  background: var(--jj-dark-surface);
  border: var(--jj-border-thin) solid var(--jj-turquoise-br);
  border-radius: 16px;
  font: 400 19px var(--jj-sans);
  color: var(--jj-white);
}
.jj-field input { flex: 1; border: 0; background: none; font: inherit; color: inherit; outline: none; }
.jj-signin .jj-btn { min-height: 62px; margin-top: 13px; }

/* ---- 14.10 manage rows ------------------------------------------------- */

.jj-manage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid oklch(0.26 0.02 320);
}
.jj-manage-row__thumb { flex: none; width: 52px; height: 52px; border-radius: 9px; overflow: hidden; }
.jj-manage-row__title { font: 500 16px/1.25 var(--jj-sans); color: var(--jj-white); }
.jj-manage-row__title--untitled { font-style: italic; color: oklch(0.60 0.015 320); }
.jj-manage-row__meta  { font: 400 11px var(--jj-mono); color: var(--jj-turquoise-br); margin-top: 4px; }
.jj-badge {
  flex: none;
  font: 600 10px var(--jj-mono);
  border-radius: 5px;
  padding: 3px 6px;
  white-space: nowrap;
}
.jj-badge--draft  { color: var(--jj-turquoise-br); border: 1px solid oklch(0.45 0.07 196); }
.jj-badge--hidden { color: var(--jj-dark-dim);     border: 1px solid var(--jj-dark-line); }
.jj-dots {
  flex: none;
  width: 34px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font: 400 19px system-ui;
  color: var(--jj-dark-dim);
  background: none; border: 0; cursor: pointer;
}
.jj-dots[aria-expanded="true"] { color: oklch(0.15 0.03 353); background: var(--jj-pink-light); border-radius: 10px; }

/* ---- 14.11 photo tray (composer) -------------------------------------- */

.jj-tray        { display: flex; gap: 9px; }
.jj-tray__item  { width: 86px; height: 86px; border: var(--jj-border-thin) solid var(--jj-white); border-radius: 12px; overflow: hidden; }
.jj-tray__add {
  width: 86px; height: 86px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: var(--jj-border-thin) dashed var(--jj-pink-light);
  border-radius: 12px;
  color: var(--jj-pink-light);
  background: none;
  font: 600 11px var(--jj-mono);
  cursor: pointer;
}
.jj-tray__add span { font: 400 22px system-ui; }

/* ---- 14.12 editable line list (composer ingredients / materials) ------- */
/* Not inputs-in-cards. A borderless line per item with a live caret line.  */

.jj-lines__item {
  display: flex;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid var(--jj-dark-line);
  font: 400 17px/1.3 var(--jj-sans);
  color: var(--jj-white);
}
.jj-lines__next {
  display: flex; align-items: center; gap: 7px;
  min-height: 46px;
  border-bottom: var(--jj-border-thin) solid var(--jj-pink-light);
  font: 400 17px var(--jj-sans);
  color: oklch(0.55 0.015 320);
}
.jj-lines__caret { width: 2px; height: 20px; background: var(--jj-pink-light); }
.jj-lines__empty { font: 400 16px/1.4 var(--jj-sans); color: var(--jj-dark-dim); margin-top: 6px; }
.jj-lines__add {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; margin-top: 11px;
  border: var(--jj-border-thin) dashed var(--jj-dark-line);
  border-radius: var(--jj-radius-pill);
  background: none;
  font: 700 16px var(--jj-sans);
  color: var(--jj-white);
  cursor: pointer;
}