/* ===========================================================
   AI Chef — kitchen instrument
   Dark, high contrast, glanceable from two metres with wet hands.
   Type carries the hierarchy. One accent colour means "heat / now".
   =========================================================== */

:root{
  --bg:#0B0B0C;
  --panel:#141417;
  --panel-2:#1B1B20;
  --panel-3:#232329;
  --line:#2B2B33;
  --line-2:#3A3A44;

  --text:#F6F4F0;
  --text-2:#A8A49D;
  --text-3:#6C6963;

  --ember:#FF8A3D;
  --ember-dim:#3A2113;
  --ready:#79D98C;
  --ready-dim:#14301B;
  --alert:#FF6B5E;
  --alert-dim:#361714;

  --serif:"Frank Ruhl Libre",Georgia,serif;
  --sans:"Assistant","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --r:18px;
  --gap:clamp(12px,1.6vw,22px);
  --pad:clamp(16px,2.2vw,30px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
.hidden{display:none !important}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
img{max-width:100%;display:block}

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-3);
}
.muted-small{font-family:var(--mono);font-size:12px;color:var(--text-3)}

/* ---------- entry screens: gate + boot ---------- */

.boot{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(120% 90% at 50% 0%, #191319 0%, var(--bg) 60%);
  z-index:60;
}
.boot-card{
  width:min(460px,100%);
  text-align:center;
}
.boot-logo{
  width:66px;height:66px;
  margin:0 auto 26px;
  border-radius:50%;
  background:var(--text);
  padding:11px;
}
.boot .eyebrow{margin-bottom:14px}
.boot-card h1{
  font-family:var(--serif);
  font-weight:800;
  font-size:clamp(34px,6.2vw,52px);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 16px;
}
.boot-card p{
  color:var(--text-2);
  font-size:17px;
  line-height:1.6;
  margin:0 auto 30px;
  max-width:34ch;
}
.primary-xl{
  width:100%;
  min-height:62px;
  border-radius:14px;
  background:var(--text);
  color:#101012;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
  transition:transform .12s ease,opacity .12s ease;
}
.primary-xl:active{transform:scale(.985)}
.primary-xl:disabled{opacity:.45;cursor:default}

.gate-input{
  width:100%;
  margin:0 0 12px;
  min-height:60px;
  padding:0 18px;
  font-size:20px;
  font-family:var(--mono);
  text-align:center;
  letter-spacing:.3em;
  border-radius:14px;
  border:1px solid var(--line-2);
  background:var(--panel);
  color:var(--text);
  outline:none;
}
.gate-input:focus{border-color:var(--ember);background:var(--panel-2)}
.gate-input::placeholder{letter-spacing:normal;color:var(--text-3)}

.boot-status{
  margin-top:16px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--text-3);
  min-height:18px;
}
.boot-status.ok{color:var(--ready)}
.boot-status.error{color:var(--alert)}
.privacy{
  margin-top:26px !important;
  font-size:12.5px !important;
  line-height:1.65;
  color:var(--text-3) !important;
}

/* ---------- app shell ---------- */

.app{min-height:100dvh}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px var(--pad) 12px;
}
/* Without this the title is the flex item that gives way, and on a phone it
   collapses to one word per line while the status pills keep their full width. */
.topbar-title{min-width:0;flex:1 1 auto}
.topbar h1{
  font-family:var(--serif);
  font-size:clamp(19px,2.2vw,24px);
  font-weight:700;
  margin:3px 0 0;
  letter-spacing:-.01em;
}
.top-actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:46px;height:46px;
  border-radius:12px;
  background:var(--panel);
  border:1px solid var(--line);
  font-size:17px;
  display:grid;place-items:center;
}
.icon-btn:active{background:var(--panel-2)}

.live-badge{
  display:inline-flex;align-items:center;gap:9px;
  height:38px;padding:0 15px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--line);
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-2);
  white-space:nowrap;
}
.live-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--text-3);
  flex:none;
}
.live-badge.listening{border-color:#2E4633;color:var(--ready)}
.live-badge.listening .live-dot{background:var(--ready);animation:breathe 2.4s ease-in-out infinite}
.live-badge.thinking{border-color:#4A3720;color:var(--ember)}
.live-badge.thinking .live-dot{background:var(--ember);animation:breathe .9s ease-in-out infinite}
.live-badge.speaking{border-color:#4A3720;color:var(--ember)}
.live-badge.speaking .live-dot{background:var(--ember);box-shadow:0 0 0 4px var(--ember-dim)}
.live-badge.error{border-color:#4A2320;color:var(--alert)}
.live-badge.error .live-dot{background:var(--alert)}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

/* step rail: eight marks, not a percentage bar */
.progress-track{
  display:flex;
  gap:5px;
  padding:0 var(--pad) 16px;
}
.progress-track i{
  flex:1;
  height:3px;
  border-radius:2px;
  background:var(--line);
  transition:background .35s ease;
}
.progress-track i.done{background:var(--line-2)}
.progress-track i.current{background:var(--ember)}
/* legacy fill element, kept harmless if present */
#progressFill{display:none}

.main-grid{
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:var(--gap);
  padding:0 var(--pad) calc(112px + env(safe-area-inset-bottom));
  align-items:start;
  min-height:0;
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--pad);
}
.card-label-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:14px;
}

/* ---------- the step: this is the hero ---------- */

.right-stack{display:flex;flex-direction:column;gap:var(--gap);min-width:0}

.action-card{
  background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel) 100%);
  border-color:var(--line-2);
  position:relative;
  overflow:hidden;
}
.action-card::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:3px;
  background:var(--ember);
}
.action-card h2{
  font-family:var(--serif);
  font-weight:800;
  font-size:clamp(30px,4.4vw,50px);
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0 0 12px;
  text-wrap:balance;
}
.action-card p{
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.55;
  color:var(--text-2);
  margin:0;
  max-width:46ch;
}
.eta{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--text-2);
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 12px;
  white-space:nowrap;
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{
  font-size:14.5px;
  font-weight:600;
  color:var(--text-2);
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 13px;
}

.parallel-card{
  display:flex;align-items:center;gap:14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px var(--pad);
}
.parallel-icon{
  width:38px;height:38px;flex:none;
  border-radius:11px;
  background:var(--panel-3);
  display:grid;place-items:center;
  color:var(--text-2);
  font-size:15px;
}
.parallel-card>div:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.parallel-card strong{font-size:15.5px;font-weight:600;line-height:1.4}

.timers-card{padding:16px var(--pad)}
.timers-card .card-label-row{margin-bottom:10px}
.timer-row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;
  padding:9px 0;
  border-top:1px solid var(--line);
}
.timer-row:first-child{border-top:0}
.timer-row span{font-size:15.5px;color:var(--text-2)}
.timer-row strong{
  font-family:var(--mono);
  font-size:26px;
  font-weight:500;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.timer-row.urgent strong{color:var(--ember)}

/* ---------- visual target ---------- */

.visual-card{
  padding:var(--pad);
  position:sticky;
  top:var(--gap);
}
.visual-card h2{
  font-family:var(--sans);
  font-size:15px;
  font-weight:600;
  color:var(--text-2);
  margin:0 0 14px;
}
/* Nothing is ever cropped: the reference frame matches the asset ratio and
   the image is contained, so the whole picture is always visible. */
.reference-wrap{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:var(--panel-3);
  aspect-ratio:4/3;
}
.reference-wrap>img{
  width:100%;height:100%;
  object-fit:contain;
}
.target-card{
  margin-top:14px;
  display:flex;flex-direction:column;gap:5px;
}
.target-card span{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
}
.target-card strong{
  font-size:17px;
  font-weight:600;
  line-height:1.45;
}

.vision-result{
  position:absolute;
  inset-inline:10px;
  inset-block-end:10px;
  background:rgba(11,11,12,.93);
  backdrop-filter:blur(8px);
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:5px;
}
.vision-result #visionBadge{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.18em;
  color:var(--ember);
}
.vision-result strong{font-size:17px;font-weight:700}
.vision-result p{margin:0;font-size:14px;line-height:1.5;color:var(--text-2)}

/* ---------- chef strip ---------- */

/* The control bar is fixed to the bottom edge at every size. Hands are busy,
   the device is propped up, the buttons must never scroll away. */
.chef-card{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:50;
  background:linear-gradient(180deg,rgba(11,11,12,.82),var(--bg) 42%);
  border-top:1px solid var(--line);
  padding:14px var(--pad) max(14px,env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:var(--gap);
  backdrop-filter:blur(12px);
}
/* A hard line across a photograph reads as a rendering fault. The page fades into
   the dock instead of being guillotined by it. */
.chef-card::before{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:100%;
  height:28px;
  background:linear-gradient(180deg,rgba(11,11,12,0),rgba(11,11,12,.72));
  pointer-events:none;
}
.chef-main{display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0}
.chef-avatar{
  width:52px;height:52px;flex:none;
  border-radius:50%;
  background:var(--panel-3);
  border:1px solid var(--line-2);
  display:grid;place-items:center;
  padding:9px;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.chef-avatar img{width:100%;filter:invert(1) brightness(1.6)}
.chef-avatar.speaking{border-color:var(--ember);box-shadow:0 0 0 5px var(--ember-dim)}
.chef-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 0;overflow:hidden}
.chef-copy span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);
}
.chef-copy strong{
  font-size:clamp(16px,1.7vw,20px);
  font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.chef-copy small{
  font-size:13px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.eyes-btn{
  flex:none;
  min-height:56px;padding:0 22px;
  border-radius:14px;
  background:var(--ember);
  color:#1A0E05;
  font-size:16px;font-weight:700;
}
.eyes-btn:active{filter:brightness(.92)}
.chef-actions{display:flex;gap:9px;flex:0 0 auto}
.chef-actions button{
  min-height:56px;min-width:86px;padding:0 16px;
  border-radius:14px;
  background:var(--panel-2);
  border:1px solid var(--line);
  font-size:14.5px;font-weight:600;color:var(--text-2);
}
.chef-actions button.active{
  background:var(--ember-dim);
  border-color:var(--ember);
  color:var(--ember);
}

/* ---------- camera overlay ---------- */

.camera-overlay{position:fixed;inset:0;z-index:80;background:#000}
.camera-overlay video{width:100%;height:100%;object-fit:cover}
.camera-shade{
  position:absolute;inset:0;
  background:radial-gradient(60% 45% at 50% 45%,transparent 0%,rgba(0,0,0,.72) 100%);
  pointer-events:none;
}
.camera-head{
  position:absolute;inset-block-start:0;inset-inline:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:max(16px,env(safe-area-inset-top)) 20px 16px;
}
.camera-head span{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ember);
}
.camera-head button{font-size:30px;line-height:1;color:#fff;width:48px;height:48px}
.camera-guide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;pointer-events:none;
}
.camera-guide .frame{
  width:min(70vw,320px);aspect-ratio:1;
  border:2px solid rgba(255,255,255,.85);
  border-radius:24px;
}
.camera-guide p{margin:0;color:#fff;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.camera-bottom{
  position:absolute;inset-block-end:0;inset-inline:0;
  display:grid;place-items:center;
  padding:0 0 max(28px,env(safe-area-inset-bottom));
}
.capture-btn{
  width:78px;height:78px;border-radius:50%;
  background:rgba(255,255,255,.2);
  display:grid;place-items:center;
}
.capture-btn span{width:60px;height:60px;border-radius:50%;background:#fff;display:block}
.capture-btn:disabled{opacity:.5}

/* ---------- transcript drawer ---------- */

.drawer{position:fixed;inset:0;z-index:70}
.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.drawer-panel{
  position:absolute;inset-block:0;inset-inline-start:0;
  width:min(460px,92vw);
  background:var(--panel);
  border-inline-end:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:var(--pad);
  gap:16px;
}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.drawer-head h2{font-family:var(--serif);font-size:24px;margin:5px 0 0;font-weight:700}
.drawer-head button{font-size:28px;line-height:1;color:var(--text-2);width:44px;height:44px}
.transcript-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding-inline-end:4px}
.msg{
  padding:11px 14px;border-radius:13px;font-size:15px;line-height:1.5;
  max-width:88%;
}
.msg.user{background:var(--panel-3);align-self:flex-start;border-end-start-radius:4px}
.msg.chef{background:var(--ember-dim);color:#FFD9BC;align-self:flex-end;border-end-end-radius:4px}
.debug-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line);padding-top:14px;
}
.debug-row span{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.debug-row button{
  font-size:13.5px;color:var(--text-2);
  border:1px solid var(--line);border-radius:10px;padding:9px 14px;
}

/* ---------- toast ---------- */

.toast{
  position:fixed;
  inset-block-end:calc(96px + env(safe-area-inset-bottom));
  inset-inline:0;
  margin-inline:auto;
  width:max-content;max-width:88vw;
  background:var(--text);color:#101012;
  font-size:15px;font-weight:600;
  padding:13px 20px;border-radius:13px;
  z-index:90;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}

/* ---------- recomposition, not stacking ---------- */

/* Single column when the screen is narrow, or on any portrait tablet.
   A landscape tablet keeps two columns: that is the real kitchen posture. */
@media (max-width:900px), (max-width:1180px) and (orientation:portrait){
  /* Mobile is a recomposition. The stack becomes one column and the reference
     image slots in directly under the instruction it belongs to, instead of
     being exiled to the bottom of the page. */
  .main-grid{
    grid-template-columns:1fr;
    gap:var(--gap);
    padding-bottom:calc(232px + env(safe-area-inset-bottom));
  }
  .right-stack{display:contents}
  .action-card{order:1}
  .visual-card{order:2;position:static}
  .parallel-card{order:3}
  .timers-card{order:4}

  /* The control strip is the one thing that must never scroll away:
     hands are busy, the tablet is propped up, the buttons stay put. */
  .chef-card{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  /* eyesBtn lives inside .chef-main, so the strip is recomposed there:
     avatar + line on the first row, the Chef Eyes button spanning the second. */
  .chef-main{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:12px 13px;
  }
  .chef-copy strong{-webkit-line-clamp:1}
  .eyes-btn{grid-column:1 / -1;width:100%;min-height:60px}
  .chef-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
  .chef-actions button{min-width:0;width:100%}
}

/* Phones: the control bar was eating a third of the screen. It collapses to two
   compact rows — identity line, then every control in a single row — so the
   cooking content keeps the screen and nothing is hidden behind a menu. */
@media(max-width:560px){
  .chef-card{
    display:grid;
    grid-template-columns:1.55fr 1fr 1fr 1fr 1fr;   /* eyes + four controls */
    gap:6px;
    align-items:center;
    padding:8px var(--pad) max(8px,env(safe-area-inset-bottom));
  }
  .chef-main{display:contents}
  .chef-actions{display:contents}

  /* The avatar is decoration, and on a phone it costs the chef's own sentence
     the width it needs to be read. The line gets the whole row instead. */
  .chef-avatar{display:none}
  .chef-copy{grid-column:1 / -1;grid-row:1;gap:0}
  .chef-copy span{display:none}          /* the live badge up top already says the state */
  .chef-copy small{display:none}          /* the heard line lives in the transcript drawer */
  .chef-copy strong{
    font-size:14.5px;
    line-height:1.4;
    -webkit-line-clamp:3;
  }

  .eyes-btn{grid-column:1;grid-row:2;min-height:48px;padding:0 6px;font-size:13.5px;white-space:nowrap}
  .chef-actions>button{grid-row:2;min-height:48px;min-width:0;padding:0 2px;font-size:11px;letter-spacing:-.01em;white-space:nowrap}

  /* The presenter bar is a direct child of the dock grid, so without an explicit
     placement it is auto-flowed into whichever cell is free and lands in the
     middle of the button row, one word per line. It gets its own row. */
  .presenter-bar{
    grid-column:1 / -1;
    grid-row:3;
    margin-top:2px;
    padding-top:8px;
    gap:6px;
  }
  .presenter-bar span{display:none}      /* the label is not worth a row on a phone */
  .presenter-bar button{flex:1;min-height:42px}

  .toast{inset-block-end:calc(var(--dock-h,126px) + 12px + env(safe-area-inset-bottom))}

  .topbar{padding-block:12px 10px;gap:9px}
  .topbar h1{font-size:clamp(17px,5vw,21px)}
  .topbar .eyebrow{font-size:10px;letter-spacing:.12em}
  .top-actions{gap:6px}
  .icon-btn{width:40px;height:40px;font-size:15px}
  /* The live badge becomes its dot. The colour and the pulse carry the state, and
     the words were costing the recipe's own name the width to sit on one line. */
  .live-badge{height:32px;width:32px;padding:0;justify-content:center;gap:0}
  .live-badge span:not(.live-dot){display:none}
  .gate-badge{font-size:9.5px;padding:4px 7px;letter-spacing:.03em}

  .action-card h2{font-size:clamp(28px,8.5vw,36px)}
  .eta{font-size:11px;padding:5px 10px}
}

/* The dock is fixed at the bottom and its height changes with the chef's line and
   with presenter mode, so the space the page reserves for it is measured at
   runtime rather than guessed. app.js keeps --dock-h up to date. */
@media (max-width:900px), (max-width:1180px) and (orientation:portrait){
  .main-grid{padding-bottom:calc(var(--dock-h,232px) + 20px + env(safe-area-inset-bottom))}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}


/* Name prompt on the boot screen. The chef needs it to shout for you. */
.name-why{
  color:var(--text-3); font-size:13.5px; line-height:1.5;
  margin:-4px 0 14px; max-width:34ch;
}

/* Timer alarm. Deliberately loud visually as well as audibly: if the phone is
   across the counter and the user is not looking, the whole screen changes. */
.alarm-veil{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:var(--pad); text-align:center;
  background:var(--alert); color:#0B0B0C;
  animation:alarm-pulse 1s steps(1,end) infinite;
}
.alarm-veil[hidden]{display:none}
@keyframes alarm-pulse{ 0%{filter:brightness(1)} 50%{filter:brightness(.72)} 100%{filter:brightness(1)} }
.alarm-label{ font-family:var(--serif); font-size:clamp(30px,9vw,54px); font-weight:800; line-height:1.05; letter-spacing:-.02em }
.alarm-sub{ font-size:17px; font-weight:600; opacity:.8 }
.alarm-stop{
  margin-top:6px; min-height:64px; padding:0 34px; border:0; border-radius:999px;
  background:#0B0B0C; color:#fff; font:inherit; font-size:18px; font-weight:700; cursor:pointer;
}
@media (prefers-reduced-motion:reduce){ .alarm-veil{animation:none} }

/* --- Voice enrollment ---------------------------------------------------- */
/* One card, two stages. Which one is showing is data, not a class, so the
   markup never has to be rebuilt between them. */
#enrollStage .enroll-offer,
#enrollStage .enroll-recording{display:none}
#enrollStage[data-stage="offer"] .enroll-offer{display:block}
#enrollStage[data-stage="recording"] .enroll-recording{display:block}

.ghost-btn{
  width:100%;
  min-height:48px;
  margin-top:10px;
  border-radius:14px;
  background:transparent;
  border:1px solid var(--line-2);
  color:var(--text-2);
  font-size:15px;
}
.ghost-btn:active{background:var(--panel)}

/* The passage is the interface during recording: large, comfortable, and paced
   so that reading it aloud at a normal speed takes about the time we need. */
.enroll-script{
  text-align:right;
  font-family:var(--serif);
  font-size:19px !important;
  line-height:2 !important;
  color:var(--text) !important;
  max-width:none !important;
  margin:0 0 26px !important;
}
.enroll-meter{
  height:6px;
  border-radius:99px;
  background:var(--panel-2);
  overflow:hidden;
}
.enroll-meter>div{
  height:100%;
  width:0;
  border-radius:99px;
  background:var(--ember);
  transition:width .12s linear;
}
.enroll-count{
  margin-top:12px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--text-3);
}

/* --- Speaker gate badge --------------------------------------------------- */
/* Deliberately quiet. It exists so that when the chef does not answer, the reason
   is visible instead of mysterious — not to be watched while cooking. */
.gate-badge{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  padding:5px 9px;
  border-radius:99px;
  border:1px solid var(--line-2);
  color:var(--text-3);
  white-space:nowrap;
}
.gate-badge[data-state="open"]{border-color:#2E4633;color:var(--ready)}
.gate-badge[data-state="unsure"]{border-color:#4A3720;color:var(--ember)}
.gate-badge[data-state="closed"]{border-color:var(--line-2);color:var(--text-3);opacity:.6}

/* --- What the kitchen taught the chef -------------------------------------- */
/* A pending note is deliberately unfinished-looking: dashed, waiting. It settles
   into a solid card only once the person who said it has confirmed the wording. */
.notes-card{border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px;background:var(--panel)}
.note{
  border-right:3px solid var(--ember);
  padding:2px 12px 2px;
  margin:12px 0;
}
.note.pending{
  border-right-style:dashed;
  opacity:.92;
}
.note-who{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.07em;
  color:var(--ember);
  margin-bottom:5px;
}
.note strong{display:block;font-weight:500;font-size:15.5px;line-height:1.55;color:var(--text)}
.note-where{display:block;margin-top:5px;font-size:12px;color:var(--text-3)}
.note-actions{display:flex;gap:8px;margin-top:10px}
.note-actions button{
  flex:1;
  min-height:38px;
  border-radius:10px;
  border:1px solid var(--line-2);
  background:var(--panel-2);
  color:var(--text-2);
  font-size:13.5px;
}
.note-actions button[data-yes]{background:var(--ember);border-color:var(--ember);color:#141210;font-weight:600}

/* The badge on the step being cooked. This is the payoff: the guidance someone gave
   out loud, showing up at the exact moment it changes what to do. */
.step-note{
  margin:14px 0 0;
  padding:10px 13px;
  border-radius:10px;
  background:var(--ember-dim);
  border:1px solid #4A3720;
  color:#F3D9C2;
  font-size:14.5px;
  line-height:1.6;
}

/* --- Recipe credit and presenter fallback ---------------------------------- */
.credit{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 22px;
  padding:12px 14px;
  border:1px solid var(--line-2);
  border-radius:14px;
  background:var(--panel);
  text-align:right;
}
.credit img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.credit strong{display:block;font-size:15px;font-weight:600;color:var(--text)}
.credit span{display:block;margin-top:2px;font-size:12.5px;color:var(--text-3);line-height:1.5}

/* Deliberately plain. It is a safety net, not part of the product, and it says so. */
/* An author `display` beats the user agent's [hidden] rule, so without this the
   presenter bar was on screen for everyone, not only under ?present=1. */
.presenter-bar[hidden]{display:none !important}
.presenter-bar{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--line-2);
}
.presenter-bar span{
  flex:1;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.07em;
  color:var(--text-3);
}
.presenter-bar button{
  min-height:38px;
  padding:7px 14px;
  border-radius:10px;
  border:1px solid var(--line-2);
  background:var(--panel);
  color:var(--text-2);
  font-size:13.5px;
}