/* ═══════════════════════════════════════════════════════════════════
   Mocca — TWIST layer
   Lean into the coffee metaphor. The runtime IS a brew.
   This file overrides specific landing.css rules; it doesn't fork them.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --mk-crema:    #C8965B;   /* warm crema / dripper bronze */
  --mk-crema-d:  #8B5E2F;
  --mk-stain:    #5A3A20;   /* dark roast stain */
  --mk-paper:    #F5EFE3;   /* receipt / chalk-board cream */
  --mk-paper-2:  #ECE3D0;
  --mk-chalk:    #1A2530;   /* chalkboard ink (navy-tinted) */
  /* Receipt muted-ink — themed at root so the dark variant is a proper
     [data-*]-scoped token (was declared on [data-theme="dark"] .receipt). */
  --mk-receipt-mute: color-mix(in srgb, var(--mk-stain) 60%, var(--fg-2));
}

[data-theme="dark"]{
  --mk-paper:    #1A1410;
  --mk-paper-2:  #221C16;
  --mk-chalk:    #ECE3D0;
  --mk-receipt-mute: color-mix(in srgb, var(--mk-crema) 70%, var(--fg-2));
}

/* ─────────────────────────────────────────────────────────
   HERO — clean background, no decorative rings
   ───────────────────────────────────────────────────────── */
.hero::before{ display:none; }
.hero::after { display:none; }
.hero{position:relative}
.hero .ring-2{display:none}

/* ─────────────────────────────────────────────────────────
   BREW BAR — replaces the live ticker.
   Reads as four-phase brewing: Grind → Bloom → Pour → Pull.
   Drives the eye toward the runtime claim that follows.
   ───────────────────────────────────────────────────────── */
.brew{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:max-content 1fr max-content;
  align-items:center;
  gap:18px;
  padding:14px 18px;
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  margin-bottom:clamp(36px, 6vw, 72px);
  overflow:hidden;
}
[data-theme="dark"] .brew{background:var(--bg-2)}

.brew-l{
  display:flex;align-items:center;gap:10px;
  font:600 11px var(--mk-font-mono);
  text-transform:none;letter-spacing:.14em;color:var(--fg-2);
}
.brew-l .led{
  width:8px;height:8px;border-radius:50%;
  background:var(--mk-crema);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--mk-crema) 50%, transparent);
  animation:brew-pulse 2.2s var(--mk-ease) infinite;
}
@keyframes brew-pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--mk-crema) 60%, transparent)}
  50%    {box-shadow:0 0 0 7px color-mix(in srgb, var(--mk-crema) 0%, transparent)}
}
.brew-l .label{color:var(--fg-1)}

.brew-track{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  min-width:0;
}
.brew-step{
  position:relative;
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:10px;
  padding:6px 10px;
  border-radius:9px;
  font:500 12px var(--mk-font-mono);
  background:var(--bg-2);
  color:var(--fg-2);
  min-width:0;
  transition:background 220ms var(--mk-ease),color 220ms var(--mk-ease);
}
.brew-step .k{
  font-size:10px;letter-spacing:.12em;text-transform:none;
  color:var(--fg-3);font-weight:700;
}
.brew-step .n{
  font-size:13px;font-weight:600;color:var(--fg-1);font-family:var(--mk-font-ui);letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.brew-step .t{
  font-size:10px;color:var(--fg-3);font-variant-numeric:tabular-nums;flex-shrink:0;
}
.brew-step::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;
  width:0;background:linear-gradient(90deg, var(--mk-crema), var(--accent));
  transition:width 320ms var(--mk-ease);
  border-radius:0 0 9px 9px;
}
.brew-step.done::after{width:100%}
.brew-step.live{
  background:color-mix(in srgb, var(--mk-crema) 10%, var(--bg-2));
}
.brew-step.live .n{color:var(--mk-crema-d)}
[data-theme="dark"] .brew-step.live .n{color:var(--mk-crema)}
.brew-step.live::after{
  width:55%;
  animation:brew-fill 1.2s var(--mk-ease) infinite alternate;
}
@keyframes brew-fill{
  from{width:10%}to{width:90%}
}
.brew-step.done{color:var(--fg-1)}
.brew-step.done .k{color:var(--mk-crema-d)}
[data-theme="dark"] .brew-step.done .k{color:var(--mk-crema)}

.brew-r{
  display:flex;align-items:center;gap:8px;
  font:500 11px var(--mk-font-mono);color:var(--fg-2);
  white-space:nowrap;
}
.brew-r .yield{color:var(--mk-crema-d);font-weight:700}
[data-theme="dark"] .brew-r .yield{color:var(--mk-crema)}

@media (max-width: 960px){
  .brew{grid-template-columns:1fr;gap:10px}
  .brew-track{grid-template-columns:repeat(2, 1fr)}
}

/* ─────────────────────────────────────────────────────────
   "Today's pour" badge in hero meta — inline editable
   ───────────────────────────────────────────────────────── */
.pour-badge{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:clamp(20px, 2.4vw, 28px);
  padding:6px 12px 6px 8px;
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:999px;
  font:500 11px var(--mk-font-mono);
  color:var(--fg-2);
  box-shadow:var(--shadow-xs);
  align-self:flex-start;
  width:fit-content;
}
.pour-badge .glyph{
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--mk-crema), var(--mk-stain) 75%);
  position:relative;flex-shrink:0;
  box-shadow:inset -3px -4px 6px rgba(0,0,0,.25);
}
.pour-badge .glyph::after{
  content:"";position:absolute;left:30%;top:18%;width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.55);filter:blur(.5px);
}
.pour-badge .k{color:var(--fg-3);text-transform:none;letter-spacing:.12em;font-weight:700}
.pour-badge .v{
  color:var(--fg-1);font-weight:600;
  outline:none;border-radius:4px;padding:0 3px;
}
.pour-badge .v[contenteditable="true"]{background:var(--accent-soft)}
.pour-badge .sep{color:var(--fg-3);opacity:.7}

/* ─────────────────────────────────────────────────────────
   STEAM motif — quiet wisps rising from the stage on scene-3
   ───────────────────────────────────────────────────────── */
.hero-right{position:relative}
.steam{
  position:absolute;
  inset-inline-start:36px;
  top:-22px;
  display:flex;gap:10px;
  pointer-events:none;
  z-index:5;
  opacity:0;
  transition:opacity 600ms var(--mk-ease);
}
.steam.on{opacity:1}
.steam i{
  display:block;
  width:14px;height:34px;
  border-radius:50%;
  background:linear-gradient(180deg, color-mix(in srgb, var(--fg-1) 12%, transparent), transparent 80%);
  filter:blur(4px);
  transform-origin:bottom center;
  animation:steam-rise 2.6s var(--mk-ease) infinite;
}
.steam i:nth-child(1){animation-delay:0s}
.steam i:nth-child(2){animation-delay:.4s;height:42px}
.steam i:nth-child(3){animation-delay:.8s;height:30px}
@keyframes steam-rise{
  0%   {transform:translateY(8px) scale(.7,.4);opacity:0}
  20%  {opacity:.65}
  60%  {opacity:.45}
  100% {transform:translateY(-40px) scale(1.25,1.4);opacity:0}
}

/* ─────────────────────────────────────────────────────────
   RUNTIME section → MENU CARD (chalkboard / cafe menu)
   ───────────────────────────────────────────────────────── */
.runtime{
  background:
    radial-gradient(80% 60% at 80% 0%, color-mix(in srgb, var(--mk-crema) 5%, transparent), transparent 55%),
    var(--bg-2);
}
[data-theme="dark"] .runtime{
  background:
    radial-gradient(80% 60% at 80% 0%, color-mix(in srgb, var(--mk-crema) 8%, transparent), transparent 55%),
    var(--bg-2);
}

.menu-card{
  position:relative;
  background:var(--mk-paper);
  border:1px solid color-mix(in srgb, var(--mk-stain) 18%, var(--border));
  border-radius:var(--mk-radius-lg);
  padding:clamp(20px, 3vw, 36px) clamp(20px, 3vw, 40px);
  box-shadow:var(--shadow-md);
  /* subtle paper grain */
  background-image:
    radial-gradient(circle at 14% 22%, color-mix(in srgb, var(--mk-stain) 6%, transparent), transparent 45%),
    radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--mk-crema) 8%, transparent), transparent 50%);
  overflow:hidden;
}
[data-theme="dark"] .menu-card{border-color:color-mix(in srgb, var(--mk-crema) 18%, var(--border))}

.menu-hd{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:2px dashed color-mix(in srgb, var(--mk-stain) 26%, transparent);
  color:var(--mk-chalk);
}
[data-theme="dark"] .menu-hd{border-bottom-color:color-mix(in srgb, var(--mk-crema) 30%, transparent)}

.menu-title{
  font-family:var(--mk-font-ui);
  font-weight:800;
  font-size:clamp(28px, 3.4vw, 44px);
  letter-spacing:-.025em;line-height:1;
  margin:0;color:inherit;
}
.menu-sub{
  font:500 11px var(--mk-font-mono);
  text-transform:none;letter-spacing:.18em;
  color:color-mix(in srgb, var(--mk-stain) 65%, var(--fg-2));
}
[data-theme="dark"] .menu-sub{color:color-mix(in srgb, var(--mk-crema) 80%, var(--fg-2))}

.menu-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.menu-row{
  display:grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 2fr) max-content;
  align-items:baseline;gap:0 18px;
  padding:14px 0;
  border-bottom:1px dotted color-mix(in srgb, var(--mk-stain) 22%, transparent);
  color:var(--mk-chalk);
}
[data-theme="dark"] .menu-row{border-bottom-color:color-mix(in srgb, var(--mk-crema) 22%, transparent)}
.menu-row:last-child{border-bottom:0}

.menu-name{
  font-family:var(--mk-font-ui);
  font-weight:700;
  font-size:clamp(20px, 2.2vw, 26px);
  letter-spacing:-.015em;line-height:1.15;
  color:inherit;
  outline:none;
  border-radius:4px;padding:0 2px;
}
.menu-name[contenteditable="true"]:focus{background:color-mix(in srgb, var(--mk-crema) 28%, transparent)}
.menu-tagline{
  font-size:13px;color:color-mix(in srgb, var(--mk-stain) 72%, var(--fg-2));
  font-weight:500;margin-top:4px;
}
[data-theme="dark"] .menu-tagline{color:color-mix(in srgb, var(--mk-crema) 70%, var(--fg-2))}

/* Specs in middle column — tabular dose / yield / grind data */
.menu-specs{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:4px 8px;
  font:500 12px var(--mk-font-mono);
  align-self:center;
}
.menu-specs .k{
  color:color-mix(in srgb, var(--mk-stain) 60%, var(--fg-3));
  text-transform:none;letter-spacing:.08em;font-size:10px;font-weight:600;
}
[data-theme="dark"] .menu-specs .k{color:color-mix(in srgb, var(--mk-crema) 65%, var(--fg-3))}
.menu-specs .leader{
  border-bottom:1px dotted color-mix(in srgb, var(--mk-stain) 30%, transparent);
  height:.6em;align-self:end;min-width:24px;
}
[data-theme="dark"] .menu-specs .leader{border-bottom-color:color-mix(in srgb, var(--mk-crema) 30%, transparent)}
.menu-specs .v{
  color:var(--mk-chalk);font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:end;
}

/* Right column — health + stamp */
.menu-stamp{
  align-self:center;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  font:600 11px var(--mk-font-mono);
}
.menu-price{
  font:800 22px var(--mk-font-ui);
  color:var(--mk-stain);
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
[data-theme="dark"] .menu-price{color:var(--mk-crema)}
.menu-price em{font-style:normal;font-size:11px;color:color-mix(in srgb, var(--mk-stain) 60%, var(--fg-3));margin-inline-start:2px;letter-spacing:.06em;text-transform:none}
[data-theme="dark"] .menu-price em{color:color-mix(in srgb, var(--mk-crema) 60%, var(--fg-3))}

.menu-health{
  display:inline-flex;align-items:center;gap:6px;
  font:700 10px var(--mk-font-mono);
  text-transform:none;letter-spacing:.1em;
  padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb, var(--mk-success) 14%, transparent);
  color:var(--mk-success);
}
.menu-health.warn{background:color-mix(in srgb, var(--mk-warning) 16%, transparent);color:var(--mk-warning)}
.menu-health.info{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent)}
.menu-health .hdot{width:5px;height:5px;border-radius:50%;background:currentColor}

@media (max-width: 720px){
  .menu-row{grid-template-columns:1fr;gap:8px;padding:18px 0}
  .menu-specs{grid-template-columns:auto 1fr auto}
  .menu-stamp{flex-direction:row;align-items:baseline;justify-content:space-between;width:100%}
}

/* Hide the original .domains grid; replaced by .menu-card */
.domains{display:none}

/* ─────────────────────────────────────────────────────────
   PHASES → printed receipt
   ───────────────────────────────────────────────────────── */
.phases{
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 14px,
      color-mix(in srgb, var(--mk-stain) 3%, transparent) 14px 16px
    ),
    var(--bg-1);
}
[data-theme="dark"] .phases{
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 14px,
      color-mix(in srgb, var(--mk-crema) 4%, transparent) 14px 16px
    ),
    var(--bg-1);
}

.receipt{
  --r-bg: var(--mk-paper);
  --r-fg: var(--mk-chalk);
  --r-mute: var(--mk-receipt-mute);
  position:relative;
  width:min(560px, 100%);
  margin:0 auto;
  padding:36px 28px 28px;
  background:var(--r-bg);
  color:var(--r-fg);
  box-shadow:0 24px 48px rgba(20,30,39,.18), 0 6px 16px rgba(20,30,39,.08);
  font-family:var(--mk-font-mono);
  /* perforated top + bottom edge using radial cutouts */
  --tooth: 12px;
  -webkit-mask:
    radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) 0 0/var(--tooth) calc(50% + 1px) repeat-x,
    radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) 0 100%/var(--tooth) calc(50% + 1px) repeat-x;
          mask:
    radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) 0 0/var(--tooth) calc(50% + 1px) repeat-x,
    radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) 0 100%/var(--tooth) calc(50% + 1px) repeat-x;
}
[data-theme="dark"] .receipt{
  box-shadow:0 24px 48px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.3);
}

.receipt-h{
  text-align:center;
  display:flex;flex-direction:column;gap:4px;align-items:center;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px dashed color-mix(in srgb, var(--mk-stain) 35%, transparent);
}
[data-theme="dark"] .receipt-h{border-bottom-color:color-mix(in srgb, var(--mk-crema) 35%, transparent)}
.receipt-h .mark{
  font:800 22px var(--mk-font-ui);letter-spacing:.32em;text-transform:none;
  color:var(--mk-stain);
}
[data-theme="dark"] .receipt-h .mark{color:var(--mk-crema)}
.receipt-h .sub{font-size:11px;color:var(--r-mute);letter-spacing:.18em;text-transform:none}
.receipt-h .meta{font-size:10px;color:var(--r-mute);margin-top:4px}

.receipt-table{
  display:flex;flex-direction:column;gap:0;
  font-size:13px;
}
.r-row{
  display:grid;
  grid-template-columns:max-content 1fr max-content;
  gap:0 8px;
  padding:9px 0;
  align-items:baseline;
  border-bottom:1px dotted color-mix(in srgb, var(--mk-stain) 30%, transparent);
}
[data-theme="dark"] .r-row{border-bottom-color:color-mix(in srgb, var(--mk-crema) 30%, transparent)}
.r-row:last-of-type{border-bottom:0}
.r-k{font-size:11px;letter-spacing:.1em;text-transform:none;color:var(--r-mute);font-weight:600}
.r-leader{
  border-bottom:1px dotted color-mix(in srgb, var(--mk-stain) 32%, transparent);
  height:.6em;align-self:end;
}
[data-theme="dark"] .r-leader{border-bottom-color:color-mix(in srgb, var(--mk-crema) 32%, transparent)}
.r-name{
  font:700 14px var(--mk-font-ui);letter-spacing:-.01em;color:var(--r-fg);
  grid-column:2/3;
  margin-bottom:-2px;
}
.r-d{
  grid-column:1/-1;font-size:12px;line-height:1.5;color:var(--r-mute);
  padding:4px 0 0;
  font-family:var(--mk-font-ui);
}
.r-t{
  font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--r-fg);
  white-space:nowrap;
}

.r-total{
  margin-top:14px;padding-top:12px;
  border-top:2px solid color-mix(in srgb, var(--mk-stain) 60%, transparent);
  display:grid;
  grid-template-columns:1fr max-content;
  align-items:baseline;
  gap:8px;
  font-family:var(--mk-font-ui);
}
[data-theme="dark"] .r-total{border-top-color:color-mix(in srgb, var(--mk-crema) 50%, transparent)}
.r-total-k{font:600 13px var(--mk-font-ui);text-transform:none;letter-spacing:.14em;color:var(--r-fg)}
.r-total-v{font:800 24px var(--mk-font-ui);color:var(--mk-stain);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
[data-theme="dark"] .r-total-v{color:var(--mk-crema)}

.receipt-foot{
  margin-top:18px;
  text-align:center;
  font-size:11px;color:var(--r-mute);
  display:flex;flex-direction:column;gap:4px;
}
.receipt-foot .ty{
  font:700 12px var(--mk-font-ui);letter-spacing:.06em;color:var(--r-fg);text-transform:none;
}
.receipt-barcode{
  margin-top:12px;
  height:36px;
  background-image:repeating-linear-gradient(
    90deg,
    var(--mk-stain) 0 2px,
    transparent 2px 4px,
    var(--mk-stain) 4px 5px,
    transparent 5px 9px,
    var(--mk-stain) 9px 11px,
    transparent 11px 13px,
    var(--mk-stain) 13px 14px,
    transparent 14px 18px
  );
}
[data-theme="dark"] .receipt-barcode{
  background-image:repeating-linear-gradient(
    90deg,
    var(--mk-crema) 0 2px,
    transparent 2px 4px,
    var(--mk-crema) 4px 5px,
    transparent 5px 9px,
    var(--mk-crema) 9px 11px,
    transparent 11px 13px,
    var(--mk-crema) 13px 14px,
    transparent 14px 18px
  );
}

/* coffee-stain ring on receipt */
.receipt::after{
  content:"";
  position:absolute;
  top:60%;inset-inline-end:-50px;
  width:160px;height:160px;
  border-radius:50%;
  background:radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--mk-stain) 22%, transparent) 60%, color-mix(in srgb, var(--mk-stain) 32%, transparent) 62%, transparent 65%);
  filter:blur(.8px);
  pointer-events:none;
  mix-blend-mode:multiply;opacity:.7;
}
[data-theme="dark"] .receipt::after{
  background:radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--mk-crema) 26%, transparent) 60%, color-mix(in srgb, var(--mk-crema) 36%, transparent) 62%, transparent 65%);
  mix-blend-mode:screen;opacity:.4;
}

/* Hide the original waterfall; replaced by .receipt */
.waterfall{display:none}

/* ─────────────────────────────────────────────────────────
   CLOSE — quiet wax-stamp signature
   ───────────────────────────────────────────────────────── */
.close::before{
  background:
    radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--mk-crema) 12%, transparent), transparent 70%);
}
.close-mark{
  position:relative;
  width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mk-crema) 24%, transparent), transparent 70%);
}
.close-mark::after{
  content:"";position:absolute;inset:8px;border-radius:50%;
  border:1.5px dashed color-mix(in srgb, var(--mk-stain) 50%, transparent);
  pointer-events:none;
  animation:slow-spin 36s linear infinite;
}
[data-theme="dark"] .close-mark::after{border-color:color-mix(in srgb, var(--mk-crema) 50%, transparent)}
@keyframes slow-spin{to{transform:rotate(360deg)}}

.close-h em{
  font-style:normal;
  background:linear-gradient(95deg, var(--mk-stain), var(--mk-crema));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;
}
[data-theme="dark"] .close-h em{
  background:linear-gradient(95deg, var(--mk-crema), var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* "ground rules" cluster under close-cta — mocca's tone */
.close-rules{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;
  margin-top:18px;
  font:500 11px var(--mk-font-mono);
  color:var(--fg-2);
}
.close-rules .r{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  background:var(--bg-1);border:1px dashed color-mix(in srgb, var(--mk-stain) 28%, var(--border));
}
[data-theme="dark"] .close-rules .r{border-color:color-mix(in srgb, var(--mk-crema) 28%, var(--border))}
.close-rules .r .mi{font-size:14px;color:var(--mk-crema-d)}
[data-theme="dark"] .close-rules .r .mi{color:var(--mk-crema)}

/* ─────────────────────────────────────────────────────────
   Headline accent — a single confident accent color per .hw
   span (was a 3-stop gradient text-fill; toned down to read
   modern/minimal rather than "extra"). Solid color also keeps
   the opacity crossfade clean between cycling words.
   ───────────────────────────────────────────────────────── */
.hero-h em{ color:inherit; }
.hero-word .hw{
  background:none;
  -webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--accent-text);
  color:var(--accent-text);
}
[data-theme="dark"] .hero-word .hw{
  background:none;
  -webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--accent-text);
  color:var(--accent-text);
}