/* Kitchen Timer — dark theme per mockups.html "Stack list" design */

:root{
  --bg:#0b0d10;
  --panel:#151a20;
  --panel-2:#1c232b;
  --line:#252d36;
  --text:#e9edf1;
  --dim:#8a95a3;
  --accent:#ff8a3d;      /* warm orange */
  --accent-2:#ffb066;
  --green:#4ade80;
  --red:#ef4444;
  --amber:#facc15;
  --blue:#60a5fa;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:17px}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  overscroll-behavior-y:contain}
button{font-family:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input{font-family:inherit}

/* ---------- header / tabs ---------- */
header.top{
  position:sticky;top:0;z-index:10;
  background:rgba(11,13,16,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:10px 16px 10px}
/* Title, update and ⋯ share one flex row ABOVE the tabs, so no control floats
   over the tab bar or the first card (screen:9), and the update control can
   carry a word instead of a lone glyph (feedback:21). */
.top-bar{display:flex;align-items:center;gap:8px;min-height:44px}
header.top h1{margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:18px;font-weight:700;letter-spacing:.2px;color:var(--dim);text-transform:uppercase}
/* The four tabs share the row instead of scrolling off the right edge ("H…",
   screen:8). If a large text size makes them too wide they wrap to a second
   line rather than cutting a word. */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tab{flex:1 1 auto;padding:10px 8px;min-height:44px;border-radius:999px;background:var(--panel);color:var(--dim);
     font-size:15px;font-weight:600;border:1px solid var(--line);cursor:pointer;white-space:nowrap}
.tab.active{background:var(--accent);color:#1a1004;border-color:var(--accent)}

main{padding:18px 16px;max-width:600px;margin:0 auto;padding-bottom:calc(120px + env(safe-area-inset-bottom))}
section.view{display:none}
section.view.active{display:block}

/* ---------- shared bits ---------- */
.clock{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:-1px}
.btn{border:0;border-radius:12px;padding:12px 16px;min-height:50px;font-weight:700;font-size:16px;cursor:pointer}
.btn.primary{background:var(--accent);color:#1a1004}
.btn.primary:active{background:var(--accent-2)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.ghost:active{background:var(--panel-2)}
.btn.danger{background:transparent;color:var(--red);border:1px solid #4a1f22}
.btn.wide{width:100%}
.row{display:flex;gap:8px}
.toolbar{margin-bottom:12px}
.toolbar.hidden{display:none}

.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
      background:var(--panel-2);color:var(--dim);font-size:11px;font-weight:600}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--line)}
.dot.running{background:var(--green);box-shadow:0 0 0 3px rgba(74,222,128,.15)}
.dot.paused{background:var(--amber)}
.dot.done{background:var(--red);animation:pulse 1s infinite}
.dot.scheduled{background:var(--blue)}
@keyframes pulse{50%{opacity:.4}}

/* ---------- stack list ---------- */
.stack{display:flex;flex-direction:column;gap:10px}
.stack-row{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px 18px}
.stack-row.running{border-color:rgba(74,222,128,.3)}
.stack-row.done{border-color:var(--red);background:linear-gradient(180deg,#2a1416,var(--panel))}
/* A dish waiting for its turn in a finish-together meal: dimmed, because it is
   not cooking yet and must not read like a running timer. */
.stack-row.scheduled{opacity:.62;border-style:dashed}
.stack-row.scheduled .time{color:var(--dim)}
.stack-head{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer}
.stack-head .label{font-size:19px;font-weight:700;overflow-wrap:anywhere}
.stack-head .time{font-size:clamp(44px,14vw,60px);font-weight:800;white-space:nowrap;line-height:1}
.stack-row.done .time{color:var(--red)}
.stack-row.idle .time{color:var(--dim)}
.stack-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;color:var(--dim);font-size:14px}
.stack-meta .expand-link,.sides-cap .expand-link,.stack-head .label .expand-link{color:var(--blue);text-decoration:none;font-weight:700;cursor:pointer;
  background:none;border:0;padding:0 2px;font-size:13px;
  /* kt-v34: a 44px-tall target; the negative margin keeps the line 20px tall */
  min-height:44px;margin:-12px 0;display:inline-flex;align-items:center;
  white-space:nowrap;flex:0 0 auto}
.stack-meta > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A running timer we could not arm a server-side alarm for. Amber, not red:
   the timer itself is still counting down correctly — what's missing is the
   backstop that fires it when the phone is asleep. */
.stack-meta .meta-text.warn{color:var(--amber);font-weight:600}
.progress{height:4px;background:var(--panel-2);border-radius:99px;margin-top:10px;overflow:hidden}
.progress > i{display:block;height:100%;background:var(--accent);border-radius:99px;width:0;
  transition:width .25s linear}
.stack-row.done .progress > i{background:var(--red)}

/* Five tracks, the SAME in every state, so +1m (slot 2) never moves when a
   done timer becomes running (screen:7). Slot 1 is sized in em to the longest
   primary label ("Resume"/"Restart"/"Silence") so it grows with the phone's
   text size instead of clipping; slot 2 fits "+1m". The rest share what's left.
   ✕ is pinned to the last track even when a row has fewer buttons. */
/* kt-v32: ✕ never goes below a 44px thumb target (was 28–36px at 360px). */
.stack-actions{display:grid;gap:6px;margin-top:14px;font-size:15px;
  grid-template-columns:calc(4.5em + 12px) calc(2.6em + 12px) minmax(0,1fr) minmax(0,1.2fr) minmax(44px,.7fr)}
.stack-actions .btn{width:100%;padding:12px 4px;font-size:inherit;white-space:nowrap;overflow:hidden}
.stack-actions .placeholder{visibility:hidden;pointer-events:none}
.stack-actions .restarted{color:var(--green);border-color:rgba(74,222,128,.3);opacity:1}
.stack-actions .span2{grid-column:span 2}
.stack-actions .btn.icon{grid-column:-2;padding-left:0;padding-right:0}
@media (max-width:380px){ .stack-row{padding:16px 12px} }
/* kt-v32: when five buttons can't fit — a narrow phone with large text
   (360px @130% clipped "Reset" to "Rese") — ✕ wraps to its own line under
   Reset instead of squeezing every label. The threshold is in em of the row,
   so it follows the phone's text size, not just its width. The first two
   tracks are unchanged, so +1m keeps its slot in every state. */
.stack-row{container-type:inline-size}
@container (max-width:17.4em){
  .stack-actions{grid-template-columns:calc(4.5em + 12px) calc(2.6em + 12px) minmax(0,1fr) minmax(0,1.2fr)}
}

/* laps */
.lap-list{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;display:none}
.lap-list.open{display:block}
.lap-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.lap-title{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--dim)}
.lap-count{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}

/* vertical timeline */
.lap-timeline{position:relative;padding-left:6px}
.lap-timeline::before{content:"";position:absolute;left:19px;top:12px;bottom:14px;
  width:2px;background:var(--line);border-radius:2px}
.lap-item{position:relative;display:flex;align-items:center;gap:12px;padding:7px 0}
.lap-n{position:relative;z-index:1;flex:0 0 28px;height:28px;border-radius:50%;
  background:var(--panel-2);border:2px solid var(--line);color:var(--dim);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.lap-item.is-last .lap-n{background:var(--accent);border-color:var(--accent);color:#1a1004}
.lap-item.is-next .lap-n{background:transparent;border-style:dashed;border-color:var(--accent);
  color:var(--accent)}
.lap-main{flex:1;min-width:0}
.lap-when{font-size:16px;font-weight:700;color:var(--text);line-height:1.25}
.lap-item.is-next .lap-when{color:var(--accent-2);font-weight:700}
.lap-sub{font-size:12px;color:var(--dim);margin-top:2px;font-variant-numeric:tabular-nums}
.lap-ago{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--accent-2);
  background:rgba(255,138,61,.12);border-radius:999px;padding:4px 9px;white-space:nowrap}
.lap-empty{font-size:13px;color:var(--dim);padding:6px 0;line-height:1.5}
.lap-btn{width:100%;background:linear-gradient(180deg,var(--accent),#d96a1a);color:#1a1004;
         border:0;border-radius:16px;padding:18px;min-height:56px;font-weight:800;font-size:16px;margin-top:10px;cursor:pointer}
.lap-btn:active{filter:brightness(1.1)}

/* ---------- presets / meals rows ---------- */
.item-row{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.item-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.item-head .info{min-width:0;cursor:pointer;flex:1}
.item-head .label{font-size:18px;font-weight:700;overflow-wrap:anywhere}
.item-head .sub{color:var(--dim);font-size:14px;margin-top:4px}
.item-head .item-go{display:flex;gap:8px;flex:none}
.item-actions{display:flex;gap:8px;margin-top:14px}
.item-actions .btn{flex:1;padding:12px 6px;font-size:15px}
.meal-emoji{font-size:30px;line-height:1;margin-right:2px}

/* ---------- history ---------- */
.hist-list{display:flex;flex-direction:column;gap:20px}
.hist-group{display:flex;flex-direction:column;gap:8px}
.hist-day-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:0 4px 2px}
.hist-day-title{font-size:14px;font-weight:800;letter-spacing:.3px;color:var(--text)}
.hist-day-meta{font-size:12px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums}
.hist-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px;
  border-left:3px solid var(--line)}
.hist-row.completed{border-left-color:var(--green)}
.hist-row.stopped{border-left-color:var(--red)}
.hist-main{min-width:0;flex:1}
.hist-label{font-size:17px;font-weight:700;overflow-wrap:anywhere;line-height:1.25}
.hist-sub{color:var(--dim);font-size:13px;margin-top:4px;font-variant-numeric:tabular-nums}
.hist-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.hist-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.hist-badge.done{color:var(--green);background:rgba(74,222,128,.12)}
.hist-badge.stopped{color:var(--red);background:rgba(239,68,68,.12)}
.hist-when{font-size:12px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums}

/* ---------- empty states ---------- */
.empty{text-align:center;color:var(--dim);font-size:16px;line-height:1.6;padding:56px 20px}
.empty.hidden{display:none}
.empty-emoji{font-size:52px;margin-bottom:10px}
.empty b{color:var(--text)}

/* ---------- FAB ---------- */
.fab{position:fixed;right:20px;bottom:calc(24px + env(safe-area-inset-bottom));
     width:68px;height:68px;border-radius:50%;background:var(--accent);color:#1a1004;
     display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;
     box-shadow:0 8px 24px rgba(255,138,61,.35);border:0;cursor:pointer;z-index:20}
.fab:active{background:var(--accent-2)}

/* ---------- sheets ---------- */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:30;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.backdrop.hidden{display:none}
/* --kb-inset / --vv-h come from the visualViewport listener in app.js: when
   the on-screen keyboard overlays the page instead of resizing it, they lift
   the sheet above the keyboard and cap it to the visible height. */
.sheet{position:fixed;left:0;right:0;bottom:var(--kb-inset,0px);z-index:40;
  max-width:520px;margin:0 auto;max-height:88vh;max-height:calc(var(--vv-h,100vh) * .88);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-bottom:0;
  border-radius:20px 20px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));
  animation:sheet-up .22s ease-out}
.sheet.hidden{display:none}
@keyframes sheet-up{from{transform:translateY(40px);opacity:.4}to{transform:translateY(0);opacity:1}}
.sheet-grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:4px auto 12px}
.sheet-title{font-size:18px;font-weight:700;margin-bottom:14px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sheet-head .sheet-title{margin-bottom:0}
.sheet-close{flex:0 0 44px;width:44px;height:44px;background:none;border:0;color:var(--dim);font-size:22px;cursor:pointer;margin-right:-8px}
.sheet-actions{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
/* New-timer actions stick to the bottom of the sheet, so Start stays in view
   with the keyboard up (screen:9) — no dismiss-and-scroll to find it. The bar
   carries the sheet's bottom padding itself (so it sits flush), and
   scroll-padding keeps a focused field from being scrolled in under it. */
#timer-sheet{padding-bottom:0;scroll-padding-bottom:150px}
/* kt-v31: ONE row — Save + ▶ Start (or just "Save preset" when editing one).
   Start is wider because it carries the total ("▶ Start 12:00"). */
.sticky-actions{position:sticky;bottom:0;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:8px;
  margin:18px -18px 0;padding:12px 18px calc(14px + env(safe-area-inset-bottom));background:var(--panel)}
.sticky-actions .btn{min-height:50px;padding:8px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-actions .btn.primary{font-size:17px}
.sticky-actions.editing{grid-template-columns:1fr}
#timer-sheet .hidden{display:none !important}
#planmake-sheet .hidden{display:none !important}   /* kt-snc: same missing rule — the link block and the time field showed from the start */
#signin-sheet .hidden{display:none !important}   /* kt-u1w: the sheet's three states are divs; a bare .hidden has no rule of its own */

.field-label{display:block;font-size:12px;color:var(--dim);font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;margin:14px 0 6px}
.field-label .hint{text-transform:none;letter-spacing:0;font-weight:500}
.field{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:16px;color:var(--text);outline:none;min-height:48px}
.field:focus{border-color:var(--accent)}
.field.emoji{text-align:center;font-size:22px}
.col-emoji{flex:0 0 76px}
.col-name{flex:1}

/* ---------- new timer: big time, nudges, quick chips (kt-v31) ----------
   No wheels: they captured vertical swipes, so scrolling the sheet moved the
   minutes instead. Everything here is a tap target; a vertical swipe anywhere
   scrolls the sheet. */
.timebox{position:relative;display:flex;flex-direction:column;align-items:center;margin:4px 0 2px}
.time-display{font-size:clamp(52px,17vw,68px);font-weight:800;line-height:1.05;padding:4px 18px;border-radius:16px;
  border:2px solid transparent;background:none;color:var(--text);cursor:text;letter-spacing:0;max-width:100%}
.time-display.editing{border-color:var(--accent);background:var(--panel-2)}
.time-display .typed-empty{color:#3b4652}
.time-hint{color:var(--dim);font-size:13px;margin-top:2px;text-align:center}
/* The real input behind the display: focusable (so the numeric keyboard opens)
   but invisible and out of the way. Parked inside the box so focusing it never
   scrolls the sheet somewhere else. */
.digits-input{position:absolute;left:50%;top:0;width:1px;height:1px;opacity:0;border:0;padding:0;
  pointer-events:none;font-size:16px}
.nudge{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.nudge button{min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--text);font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;padding:0 2px}
.nudge button:active{border-color:var(--accent)}
.qchips{display:flex;gap:8px;overflow-x:auto;margin:10px -18px 0;padding:0 18px 4px;scrollbar-width:none;
  overscroll-behavior-x:contain}
.qchips::-webkit-scrollbar{display:none}
.qchip{flex:0 0 auto;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}
.qchip.active{background:var(--accent);border-color:var(--accent);color:#1a1004}

/* "Flip every 4:00?" — four equal cells that never wrap, even at 360px. */
/* the two worded cells get the room; "3" and "4" need little */
.seg.seg4{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.seg.seg4 button{min-width:0;padding:10px 2px;font-size:15px;font-weight:700;color:var(--text);white-space:nowrap}
.seg.seg4 button.active{color:#1a1004}

.more-toggle{display:block;margin-top:18px;width:100%;background:none;border:0;border-top:1px solid var(--line);
  color:var(--dim);font-size:15px;font-weight:700;padding:14px 0 4px;text-align:left;min-height:44px;cursor:pointer}
.more-opts{margin-top:4px}
.more-opts.hidden{display:none}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;
  margin-top:8px;background:var(--panel-2);width:100%;color:var(--text);text-align:left;font-size:15px;
  font-weight:700;cursor:pointer;font-family:inherit}
.opt.hidden{display:none}
.opt.active{border-color:var(--accent)}
.opt small{display:block;color:var(--dim);font-size:13px;margin-top:2px;font-weight:500}
.opt-dot{flex:0 0 18px;height:18px;border-radius:50%;border:2px solid var(--dim);margin-top:2px}
.opt.active .opt-dot{border-color:var(--accent);background:radial-gradient(var(--accent) 45%,transparent 50%)}
.opt-toggle input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
.opt-toggle:has(input:checked){border-color:var(--accent)}
.steps-cfg .preset-row{margin-bottom:8px}
.preset.active{background:var(--accent);border-color:var(--accent);color:#1a1004}

/* multi-side (steps) timer on the board: one bar segment per side */
.sides{display:flex;gap:5px;margin-top:10px}
.sides i{flex:1 1 0;height:5px;border-radius:9px;background:var(--panel-2);position:relative;overflow:hidden;display:block}
.sides i > b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);border-radius:9px}
.stack-row.done .sides i > b{background:var(--red)}
.sides-cap{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;color:var(--dim);font-size:13px;
  font-variant-numeric:tabular-nums;white-space:nowrap;min-height:20px}
.sides-cap .cap-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* "Another side": the primary action on a finished multi-side timer. Full
   width under the action row so the row's slot geometry (+1m never moves)
   is untouched and the label never clips. */
.another-btn{margin-top:8px}

/* kt-v34 flip/step alert: the card pulses and a big "✓ Flipped" covers the
   action row (same box, so neither this card nor the next one moves). */
.stack-actions{position:relative}
/* kt-v35 flip-wait: held at a flip — steady accent, not the pulsing alert */
.stack-row.holding{border-color:var(--accent);background:linear-gradient(180deg,rgba(255,138,61,.08),var(--panel))}
.stack-row.holding .time{color:var(--accent-2)}
.stack-actions .flip-ok-btn{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;
  font-size:18px;padding:8px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stack-row.alerting{border-color:var(--accent);animation:flip-pulse 1.5s ease-in-out infinite}
@keyframes flip-pulse{50%{box-shadow:0 0 0 4px rgba(255,138,61,.35)}}
@media (prefers-reduced-motion:reduce){.stack-row.alerting{animation:none;box-shadow:0 0 0 3px rgba(255,138,61,.35)}}

/* kt-kil ✎ on a card: a small icon at the end of the label line (kt-dl4: it used to share the status line), same 44px target, no new row. */
.stack-head .label{display:flex;align-items:center;gap:2px}
.stack-head .label-text{min-width:0}
/* the ✎ box is a full 44px tall on the label line and the status line starts 12px below it, so ✎ and ⋯ never share a pixel (kt-dl4 review) */
.stack-head .label:has(.edit-link) + .stack-meta{margin-top:12px}
.stack-head .label .edit-link{min-width:44px;min-height:44px;margin:0;padding:0;font-size:18px;line-height:1;
  color:var(--dim);justify-content:center}
.lap-item.edit .lap-n{color:var(--blue)}
.pick-summary .edit-note{margin-top:6px;color:var(--dim)}
.pick-summary .edit-note.warn{color:var(--amber);font-weight:600}
/* kt-v34 ⋯ on a card: a 44px target that doesn't grow the status line. */
.stack-meta .more-link,.sides-cap .more-link{min-width:44px;min-height:44px;margin:-12px -10px -12px 0;
  font-size:22px;line-height:1;letter-spacing:1px;color:var(--dim);display:inline-flex;align-items:center;justify-content:center}
.row-more{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.row-more .btn{width:100%;min-height:44px;font-size:15px}
.row-more .btn.saved{color:var(--ok,#6fcf8a);border-color:var(--ok,#6fcf8a);background:rgba(111,207,138,.12);font-weight:700}
.item-head .sub.step-names{font-size:13px;color:var(--accent-2);overflow-wrap:anywhere}

/* quick chips */
.preset-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.preset-row::-webkit-scrollbar{display:none}
.preset{flex:0 0 auto;padding:10px 14px;min-height:44px;border-radius:12px;background:var(--panel-2);
        border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
.preset:active{border-color:var(--accent)}

/* lap mode segmented control */
.seg{display:flex;gap:6px}
.seg button{flex:1;padding:10px 8px;min-height:44px;border-radius:12px;background:var(--panel-2);
  color:var(--dim);border:1px solid var(--line);font-size:13px;font-weight:600;cursor:pointer}
.seg button.active{background:var(--accent);color:#1a1004;border-color:var(--accent)}
.seg-help{margin-top:8px;color:var(--dim);font-size:13px;line-height:1.5}
.seg{flex-wrap:wrap}
.seg button{flex:1 1 auto;min-width:88px}

/* custom step builder */
.steps-cfg{margin-top:10px}
.steps-cfg.hidden{display:none}
.step-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.step-chip{display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:999px;padding:8px 10px 8px 14px;
  font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.step-chip .n{color:var(--accent-2);font-size:12px;font-weight:800}
.step-chip button{background:none;border:0;color:var(--red);font-size:18px;font-weight:700;
  cursor:pointer;padding:0 2px;line-height:1}
/* kt-v35 steps-inline: tap a step's time to type it, like the big time */
.step-row .st-time{flex:0 0 4.6em;min-height:44px;padding:0 6px;border-radius:12px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--text);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;text-align:center}
.step-row input.st-time{outline:none;border-color:var(--accent);min-width:0;width:4.6em}
.step-row .step-up{flex:0 0 44px;height:44px;background:none;border:1px solid var(--line);border-radius:12px;
  color:var(--dim);font-size:18px;cursor:pointer;line-height:1}
.step-row .step-up:disabled{opacity:.3}
.st-add-inline{width:100%;min-height:44px;margin:2px 0 8px}
/* Steps gets a full-width row under the sizes: easy to find, nothing squeezed */
#flip-seg.has-steps button[data-sides="steps"]{grid-column:1/-1;white-space:normal;line-height:1.25}
/* Narrow (small phone or large text): the name gets its own full-width line
   under the time / ↑ / ×, instead of being squeezed to a sliver. In em, so it
   follows the phone's text size. Inline editor only (kt-v34 rows untouched). */
.step-chips.inline{container-type:inline-size}
@container (max-width:18em){
  .step-chips.inline .step-row{flex-wrap:wrap}
  .step-chips.inline .step-row .n{order:1}
  .step-chips.inline .step-row .st-time{order:2}
  .step-chips.inline .step-row .step-up{order:3;margin-left:auto}
  .step-chips.inline .step-row .step-del{order:4}
  .step-chips.inline .step-row .step-name{order:5;flex:1 1 100%}
}
/* kt-v34: uneven steps as rows, each with an optional name */
.step-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;width:100%}
.step-row .n{flex:0 0 auto;min-width:1em;text-align:center;color:var(--accent-2);font-size:13px;font-weight:800}
.step-row .st{flex:0 0 auto;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.step-row .step-name{flex:1 1 auto;min-width:0;min-height:44px;padding:8px 12px;font-size:16px}
.step-row .step-del{flex:0 0 44px;height:44px;background:none;border:1px solid var(--line);border-radius:12px;
  color:var(--red);font-size:20px;font-weight:700;cursor:pointer;line-height:1}
.step-name-hint{width:100%;color:var(--dim);font-size:12px;line-height:1.4;margin:2px 0 8px}
.step-none{color:var(--dim);font-size:13px;padding:2px 0 6px;line-height:1.5}
.pick-summary{margin-top:16px;padding:12px 14px;border-radius:12px;
  background:rgba(255,138,61,.08);border:1px solid rgba(255,138,61,.25);
  color:var(--accent-2);font-size:14px;font-weight:600;line-height:1.5}
.pick-summary b{color:var(--text);font-variant-numeric:tabular-nums}
.interval-cfg{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--dim);font-size:13px;font-weight:600}
.interval-cfg.hidden{display:none}
.mini-num{width:58px;text-align:center;font-size:20px;font-weight:800;color:var(--text);
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:8px 4px;
  outline:none;min-height:44px;-moz-appearance:textfield;appearance:textfield}
.mini-num::-webkit-outer-spin-button,.mini-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mini-num:focus{border-color:var(--accent)}

/* meal inline timers */
.meal-timers{display:flex;flex-direction:column;gap:6px}
.mt-row{display:flex;align-items:center;gap:10px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:48px}
.mt-row .ml{flex:1;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.mt-row .mtime{color:var(--dim);font-size:14px;font-variant-numeric:tabular-nums}
.mt-row .mdel{background:none;border:0;color:var(--red);font-size:20px;font-weight:700;
  cursor:pointer;padding:4px 6px;line-height:1}
.add-mt{margin-top:8px}
.mt-time{display:flex;align-items:center;gap:6px;margin-top:8px}
.mt-time .mini-num{flex:1;min-width:0}
.mt-sep{color:var(--dim);font-weight:800}
.mt-time .btn{flex:0 0 84px;min-height:44px}

/* meal editor checklist */
.check-list{display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow-y:auto}
.check-item{display:flex;align-items:center;gap:10px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:48px;cursor:pointer}
.check-item input{width:20px;height:20px;accent-color:var(--accent);flex:0 0 auto}
.check-item .cl{flex:1;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.check-item .ct{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.check-none{color:var(--dim);font-size:13px;padding:8px 2px;line-height:1.5}

/* ---------- header menu button ---------- */
header.top{position:sticky}
.top-menu{position:relative;flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  background:var(--panel);border:1px solid var(--line);color:var(--dim);
  font-size:22px;font-weight:800;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center;padding:0}
.top-menu:active{background:var(--panel-2);color:var(--text)}
/* Unread-changelog dot, anchored to the ⋯ button (position:relative above). */
.menu-badge{position:absolute;top:-1px;right:-1px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);display:block}
.menu-badge.hidden{display:none}

/* Update-ready button — a labelled accent pill left of ⋯, hidden until a new
   build is waiting to take over. It used to be a bare 40px ⟳ circle that the
   cook couldn't find or hit (feedback:21, screen:8). */
.top-update{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:44px;min-width:44px;
  padding:0 12px;border-radius:999px;border:0;background:var(--accent);color:#1a1004;
  font-size:15px;font-weight:800;line-height:1;cursor:pointer;white-space:nowrap}
.top-update span{font-size:17px}
.top-update:active{background:var(--accent-2)}
.top-update.hidden{display:none}

/* ---------- help / feedback / bug sheets ---------- */
.sheet-note{color:var(--dim);font-size:14px;line-height:1.5;margin:0 0 6px}
.menu-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.menu-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--panel-2);border:1px solid var(--line);border-radius:16px;
  padding:16px 16px;cursor:pointer;color:var(--text);min-height:64px}
.menu-item:active{border-color:var(--accent)}
a.menu-item{text-decoration:none}   /* the About row is a real link (kt-drv), the rest are buttons */
.menu-item.hidden{display:none}   /* kt-xj4.1: a hidden menu row (My reports, Link an agent) was still shown: .menu-item sets display:flex */
.menu-emoji{font-size:26px;line-height:1;flex:0 0 auto}
.menu-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.menu-main b{font-size:16px;font-weight:700}
.menu-main small{color:var(--dim);font-size:13px;font-weight:500}
.menu-version{color:var(--dim);font-size:12px;text-align:center;margin:12px 0 0}
.menu-legal a{color:var(--dim);display:inline-block;padding:14px 8px}   /* kt-5l6: a 44px-ish tap row under the menu */
/* kt-v34: newer Android app available */
.menu-native-update{margin-top:6px}
.menu-native-update a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--accent-2);font-weight:700;font-size:14px}
.menu-native-update.hidden,.app-update.hidden{display:none}
.app-update{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:8px 8px 8px 14px;border-radius:16px;
  background:rgba(255,138,61,.1);border:1px solid rgba(255,138,61,.35);color:var(--text);font-size:14px;line-height:1.35}
.app-update .au-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.app-update .au-text span{color:var(--dim)}
.app-update .au-get{flex:0 0 auto;min-height:44px;padding:8px 14px;font-size:15px;display:inline-flex;align-items:center;text-decoration:none}
.app-update .au-x{flex:0 0 44px;height:44px;background:none;border:0;color:var(--dim);font-size:18px;cursor:pointer}
.menu-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.menu-dot.hidden{display:none}

/* ---------- what's new (changelog) ---------- */
/* Capped and scrollable: the sheet is bottom-anchored, so an unbounded list
   would push its Close button off-screen on a phone. */
.changelog{max-height:52vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-top:4px}
.cl-entry{padding:14px 0;border-top:1px solid var(--line)}
.cl-entry:first-child{border-top:0;padding-top:4px}
.cl-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cl-version{font-size:15px;font-weight:800;color:var(--text)}
.cl-date{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.cl-new{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:#1a1004;background:var(--accent);padding:2px 7px;border-radius:999px}
.cl-kind{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--dim);margin:10px 0 5px}
.cl-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.cl-list li{font-size:14px;line-height:1.5;color:var(--text)}
.cl-list li::marker{color:var(--accent)}
.cl-list b{font-weight:700}
.menu-arrow{color:var(--dim);font-size:24px;font-weight:700;flex:0 0 auto}
.field.area{min-height:auto;line-height:1.5;resize:vertical;font-family:inherit}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(96px + env(safe-area-inset-bottom));z-index:50;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.4);white-space:nowrap;max-width:90vw;
  overflow:hidden;text-overflow:ellipsis;
  animation:toast-in .18s ease-out}
.toast.hidden{display:none}
.toast-undo{margin-left:12px;min-height:44px;margin-block:-10px;padding:0 10px;background:none;border:0;
  color:var(--accent,#ffb347);font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---- screen recording feedback ---- */
.screen-capture{margin:4px 0 2px}
.screen-status{display:flex;align-items:center;gap:9px;color:var(--dim);
  font-size:14px;font-weight:600;min-height:22px;margin:2px 0 10px}
.rec-dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:var(--red,#ff5b5b);
  box-shadow:0 0 0 0 rgba(255,91,91,.55);animation:recpulse 1.4s ease-out infinite}
@keyframes recpulse{0%{box-shadow:0 0 0 0 rgba(255,91,91,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,91,91,0)}100%{box-shadow:0 0 0 0 rgba(255,91,91,0)}}
.screen-tip{margin-top:8px}
.screen-fallback{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.screen-fallback input[type=file]{padding:10px;font-size:14px}
.screen-fallback-hot{border-top-color:var(--accent);background:rgba(255,138,61,.06);
  border-radius:12px;padding:12px;margin-left:-12px;margin-right:-12px}
.screen-fallback-hot .field-label{color:var(--accent-2)}

/* Recording controls stay available while navigating the app and sheets. */
.recording-bar { position: fixed; top: 8px; left: 12px; right: 12px; z-index: 10000; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #351b22; color: #fff; box-shadow: 0 2px 12px #0006; font-size: 13px; }
.recording-bar.hidden { display: none; }
.recording-bar .btn { flex-shrink: 0; }
.recording-bar .pen-btn { margin-left: auto; padding: 6px 12px; }
.recording-bar .pen-btn.on { background: #c0392b; border-color: #fff; }
.recording-bar .pen-btn.hidden { display: none; }
/* kt-fej: below the bar (10000) so Stop & send / ✏️ stay tappable; transparent to touches until the pen is on */
.pen-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9990; pointer-events: none; touch-action: none; }
.pen-layer.hidden { display: none; }
.pen-layer.pen-on { pointer-events: auto; cursor: crosshair; }
body:has(.recording-bar:not(.hidden)) { padding-top: 90px; }
/* ...and the sticky header parks just below the bar instead of sliding under
   it; the shadow paints over timers scrolling through the gap above it. */
body:has(.recording-bar:not(.hidden)) header.top { top: 90px; box-shadow: 0 -90px 0 var(--bg); }
#screen-sheet .hidden { display: none; }

/* ---------- advanced / help-test / diagnostics (kt-v32) ---------- */
.adv-toggle{font-size:16px}
.adv-item{margin-top:10px}
.adv-hint{margin:6px 2px 0}
.adv-hint.hidden,.checks.hidden,#advanced-sheet .hidden{display:none}
.adv-versions{color:var(--dim);font-size:12px;text-align:center;margin:14px 0 0;line-height:1.6}
.checks{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.checks-empty{color:var(--dim);font-size:14px;line-height:1.5;padding:4px 2px}
.check-card{background:var(--panel-2);border:1px solid var(--accent);border-radius:16px;padding:14px}
.check-count{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent-2)}
.check-title{font-size:17px;font-weight:700;margin:4px 0 8px;overflow-wrap:anywhere}
.check-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.45}
.check-expected{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--text)}
.check-expected b{color:var(--accent-2)}
/* Flex, not a fixed 3-column grid: at large text sizes a label keeps its
   full width and the row wraps instead of clipping "Doesn't". */
.check-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.check-btns .btn{flex:1 1 auto;min-height:48px;padding:8px 10px;font-size:15px;white-space:nowrap}
.check-btns .btn.works{background:var(--green);color:#06210f}
.check-fail{margin-top:10px}
.check-fail .field{min-height:auto}
.check-fail-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.check-fail-btns .btn{flex:1 1 auto;min-height:48px;padding:8px 10px;font-size:15px;white-space:nowrap}
.check-thanks{color:var(--green);font-weight:700;font-size:15px;padding:6px 2px}
.diag-list{margin:4px 0 0;display:flex;flex-direction:column}
.diag-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.diag-row:first-child{border-top:0}
.diag-row dt{color:var(--dim);font-size:14px;flex:0 0 auto;max-width:45%}
.diag-row dd{margin:0;font-size:14px;font-weight:600;text-align:right;overflow-wrap:anywhere;min-width:0}
.diag-row dd.warn{color:var(--amber)}
.diag-row dd small{display:block;color:var(--dim);font-weight:500}
.diag-actions{margin:8px 0 6px;display:flex;flex-direction:column;gap:8px}
.diag-hint{margin:0 2px 6px}
.toast.wrap{white-space:normal;text-align:center;border-radius:16px;max-width:min(90vw,420px);width:max-content;line-height:1.4}

/* ---------- help-test comments + guided check banner (kt-v33) ---------- */
.check-start{width:100%;min-height:48px;margin:2px 0 4px;font-size:16px}
.check-start-hint{margin:0 2px 10px;color:var(--dim);font-size:13px;line-height:1.4}
.check-done{display:flex;flex-direction:column}
.link-btn{background:none;border:0;padding:10px 4px;margin:-10px 0;min-height:44px;color:var(--accent-2);
  font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.check-amend{margin-top:4px}

/* Same visual family as the recording bar: fixed, rounded, above sheets. It
   sits under the recording bar when both are up, and the page + sticky header
   are pushed down by --ckb-h (set in app.js from the banner's real height), so
   Update / ⋯ and the first timer row are never underneath it. */
.check-banner{position:fixed;top:8px;left:12px;right:12px;z-index:9999;max-width:520px;margin:0 auto;
  display:flex;flex-direction:column;gap:6px;padding:6px 8px 8px 12px;border-radius:12px;
  background:#2a2116;border:1px solid var(--accent);color:var(--text);box-shadow:0 2px 12px #0006;
  touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
.check-banner.hidden{display:none}
.check-banner textarea{touch-action:pan-y;user-select:text;-webkit-user-select:text}
.ckb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
.ckb-count{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-2);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ckb-x{flex:0 0 44px;width:44px;height:44px;margin:-6px -6px -6px 0;background:none;border:0;color:var(--dim);font-size:20px;cursor:pointer}
.ckb-main{display:flex;align-items:center;gap:6px}
.ckb-nav{flex:0 0 44px;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--text);font-size:26px;line-height:1;cursor:pointer;padding:0 0 3px}
.ckb-nav:disabled{opacity:.3}
.ckb-nav.hidden{display:none}
.ckb-text{flex:1;min-width:0;font-size:15px;line-height:1.35;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:transform .12s}
.ckb-text.answer{-webkit-line-clamp:4}
.check-banner.noting .ckb-text{-webkit-line-clamp:2}
.check-banner .ckb-text.full{-webkit-line-clamp:unset;display:block}
.ckb-text b{color:var(--accent-2)}
.ckb-thanks{color:var(--green);font-weight:700}
.ckb-answer{display:flex;flex-wrap:wrap;gap:6px}
.ckb-answer.hidden,.ckb-note.hidden{display:none}
.ckb-answer .btn{flex:1 1 auto;min-height:44px;padding:6px 10px;font-size:14px;white-space:nowrap}
.ckb-answer .btn.works{background:var(--green);color:#06210f}
.ckb-answer .btn[aria-expanded="true"]{border-color:var(--accent);background:rgba(255,138,61,.14)}
.check-btns .btn[aria-expanded="true"]{border-color:var(--accent);background:rgba(255,138,61,.14)}
.ckb-note{display:flex;gap:6px;align-items:stretch}
.ckb-note .field{flex:1;min-width:0;min-height:44px;padding:8px 10px;font-size:15px;resize:none}
.ckb-note .btn{flex:0 0 auto;min-height:44px;padding:6px 14px;font-size:15px}
body:has(.recording-bar:not(.hidden)) .check-banner{top:90px}
body:has(.check-banner:not(.hidden)){padding-top:var(--ckb-h,120px)}
body:has(.check-banner:not(.hidden)) header.top{top:var(--ckb-h,120px);box-shadow:0 calc(-1 * var(--ckb-h,120px)) 0 var(--bg)}
body:has(.recording-bar:not(.hidden)):has(.check-banner:not(.hidden)){padding-top:calc(82px + var(--ckb-h,120px))}
body:has(.recording-bar:not(.hidden)):has(.check-banner:not(.hidden)) header.top{top:calc(82px + var(--ckb-h,120px));
  box-shadow:0 calc(-82px - var(--ckb-h,120px)) 0 var(--bg)}
/* A tall sheet stops short of the banner instead of sliding under it. */
body:has(.check-banner:not(.hidden)) .sheet{max-height:min(calc(var(--vv-h,100vh) * .88), calc(var(--vv-h,100vh) - var(--ckb-h,120px)))}
body:has(.recording-bar:not(.hidden)):has(.check-banner:not(.hidden)) .sheet{max-height:min(calc(var(--vv-h,100vh) * .88), calc(var(--vv-h,100vh) - 82px - var(--ckb-h,120px)))}

/* kt-zvy: ⋯ → Link an agent */
.link-url{display:flex;gap:8px;align-items:center;margin:0 0 10px}
.link-url code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px;background:var(--panel2,#161a20);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.link-code-box{margin:6px 0 10px;text-align:center}
.link-code-box.hidden,.link-msg.hidden,#btn-link-make.hidden,#btn-move-make.hidden{display:none}
.link-code{font-size:44px;font-weight:700;letter-spacing:6px;font-variant-numeric:tabular-nums;padding:10px 0}
.link-count{color:var(--dim);font-size:14px;margin-bottom:8px}
.link-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.link-actions .btn.hidden{display:none}
.link-list{list-style:none;margin:6px 0 0;padding:0}
.link-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.link-list li:first-child{border-top:0}
.link-list small{display:block;color:var(--dim)}
.link-empty{color:var(--dim)}

/* ---- My reports (kt-xj4.1) ---- */
#reports-sheet .hidden{display:none !important}
#reports-sheet .sheet-head{justify-content:flex-start}
#reports-sheet .sheet-head .sheet-title{flex:1}
#reports-sheet .sheet-close{flex:0 0 44px;min-height:44px}
#btn-reports-back{margin-left:-8px;margin-right:0}
.rep-row{width:100%;text-align:left}
.rep-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-sub{display:block;margin-top:2px}
.rep-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--panel-2);color:var(--text);font-size:12px;font-weight:700}
.rep-chip.rep-done{background:#1e3a2a;color:#9be3b3}
.rep-chip.rep-declined{background:#3a2326;color:#f0a0a8}
.rep-chip.rep-planned,.rep-chip.rep-triaged{background:#3a2e1a;color:var(--accent-2)}
.rep-new{color:var(--accent-2);font-weight:800}
.rep-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:4px 0 10px}
.rep-head-title{font-weight:800;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.rep-bubble{margin:8px 0;padding:10px 12px;border-radius:14px;background:var(--panel-2);max-width:92%;overflow-wrap:anywhere}
.rep-bubble.you{margin-left:auto;background:#2a2218}
.rep-bubble.system{background:transparent;color:var(--dim);max-width:100%;padding:2px 4px;font-size:14px}
.rep-bubble small{display:block;color:var(--dim);font-size:12px;margin-bottom:2px}
.rep-bubble p{margin:0;line-height:1.45;white-space:pre-wrap}
.rep-ask{margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:14px}
.rep-ask-row{display:flex;gap:8px;margin-top:10px}
.rep-ask-row .btn{flex:1}
.rep-why-row{flex-direction:column}
.rep-why-row .rep-box{width:100%;box-sizing:border-box;min-height:70px}
.rep-reply{display:flex;gap:8px;align-items:flex-end;margin-top:12px}
.rep-box{flex:1;min-width:0;min-height:50px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);padding:10px;font:inherit;resize:vertical}
.rep-related{margin-top:16px}
.rep-related small{display:block;color:var(--dim);margin-bottom:4px}

/* kt-q4q flip-early: "✓ Flipped" any time. A row of its own, 48px, so a messy
   thumb has to mean it; it keeps its place all run so nothing below moves. */
.early-flip-btn{width:100%;min-height:48px;margin-top:8px;font-size:16px;font-weight:700}
.early-flip-btn:disabled{opacity:.35}
.meal-note{margin-top:6px;font-size:13px;color:var(--accent-2);line-height:1.3}

/* kt-4xv: a ±time entry in the flip log — not a flip, so no number, no accent */
.lap-item.adj .lap-n{background:transparent;border:1px solid var(--line);color:var(--dim)}
.lap-item.adj .lap-when{font-size:15px;color:var(--dim)}

/* ---- share (kt-1v4) ---- */
.share-what{margin:4px 0 8px}
.share-what .sw-head{font-size:18px;font-weight:700;margin-bottom:8px;overflow-wrap:anywhere}
.share-what .sw-row{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line)}
.share-what .sw-l{flex:1 1 8em;min-width:0;overflow-wrap:anywhere}
.share-what .sw-t{white-space:nowrap}
.share-what .sw-tag{font-size:13px;color:var(--dim);flex:0 1 auto;max-width:100%;overflow-wrap:anywhere}
.share-actions{margin-top:10px}
.share-link{display:flex;gap:8px;align-items:center;margin:10px 0}
.share-link .field{flex:1;min-width:0}
.share-link.hidden{display:none}
.share-actions .btn.hidden{display:none}
.share-actions{flex-wrap:wrap}
.share-actions #btn-share-start{flex:1 1 100%;order:-1}

/* ---------- the one feedback form (kt-nsh) ---------- */
.ff-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0}
.ff-thumbs.hidden,#ff-record-note.hidden,#ff-file,.ff-reports.hidden{display:none}
.ff-thumb{position:relative;width:76px;display:flex;flex-direction:column;align-items:center;gap:3px}
.ff-thumb img{width:76px;height:76px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--panel-2)}
.ff-thumb-label{font-size:12px;color:var(--dim)}
.ff-thumb-x{position:absolute;top:-8px;right:-8px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--text);font-size:18px;line-height:1;cursor:pointer;padding:0}
.ff-thumb-x::after{content:"";position:absolute;inset:-8px}   /* a 46px tap target around the 30px button */
.ff-tools{margin-top:12px;flex-wrap:wrap}
.ff-tools .btn{flex:1 1 150px}
.ff-tools .btn.hidden{display:none}
.ff-info{margin-top:12px;font-size:13px}
.ff-voice{margin-top:12px}
.ff-voice.hidden,.ff-voice-rec.hidden,.ff-voice-play.hidden{display:none}
.ff-voice-rec{display:flex;align-items:center;gap:10px;font-size:16px}
.ff-voice-rec .btn{margin-left:auto;min-height:44px}
.ff-rec-dot{width:12px;height:12px;border-radius:50%;background:var(--red);animation:ff-pulse 1s ease-in-out infinite}
@keyframes ff-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ff-rec-dot{animation:none}}
.ff-voice-play audio{width:100%;height:44px}
.ff-voice-play .row{margin-top:8px;gap:8px}
.ff-voice-play .btn{flex:1;min-height:44px}
#ff-voice-msg:empty{display:none}
.ff-reports{display:block;margin:12px auto 0;min-height:44px;padding:0 14px;background:none;border:0;color:var(--accent-2);font-weight:700;font-size:15px;cursor:pointer}
.ff-count{margin:4px 0 0;text-align:right}
.ff-count.hidden{display:none}
.ff-count.full{color:var(--red)}

/* ---------- meal plan (kt-3zv) ---------- */
.planmake-row{display:grid;grid-template-columns:1fr 84px;gap:8px;margin-bottom:8px}
#btn-planmake-now[aria-pressed="true"],#btn-planmake-at[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-2)}
#btn-planmake-open{display:block;text-align:center;text-decoration:none}

/* ---------- kt-o4l: Start meal ---------- */
#timers-toolbar{display:flex;flex-direction:column;align-items:stretch;gap:4px}
#timers-toolbar.hidden{display:none}   /* the id rule above beats .toolbar.hidden */
#timers-toolbar .link-btn{align-self:center}
.meal-head{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;margin:6px 0;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;background:var(--card, transparent)}
.meal-head.hidden{display:none}
.meal-head .mh-title{font-weight:700;font-size:15px;line-height:1.3}
.meal-head .mh-ready{font-weight:600;color:var(--dim)}
.meal-head .mh-next,.meal-head .mh-counts{font-size:13px;color:var(--dim);line-height:1.35;margin-top:2px}
.meal-head .mh-next:empty,.meal-head .mh-counts:empty{display:none}
.meal-head .mh-stop{flex:0 0 auto;min-height:44px}
.meal-head.all-done{border-left-color:var(--ok, var(--accent))}
.meal-order{margin-top:6px}
.mo-row{padding:6px 0;border-bottom:1px solid var(--line)}
.mo-line{display:flex;align-items:center;gap:8px}
.mo-line .ml{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-move{min-width:44px;min-height:44px;background:none;border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:16px}
.mo-move:disabled{opacity:.3}
.mo-then{display:block;width:100%;min-height:44px;margin-top:4px;text-align:left;padding:0 12px;border:1px dashed var(--line);border-radius:10px;background:none;color:var(--dim);font:inherit}
.mo-then[aria-pressed="true"]{border-style:solid;border-color:var(--accent);color:var(--text);font-weight:700}
.mo-row.is-then .mo-line{padding-left:14px}
#timers-toolbar .hidden,.meal-order.hidden{display:none !important}
/* kt-cxt: the "For AI assistants" line under the board (server fills it in only while the open door is open) */
.agents-foot{max-width:720px;margin:0 auto;padding:8px 16px 104px;color:var(--dim);font-size:14px}
.agents-foot:empty{padding:0}
.agents-foot a{color:var(--dim);overflow-wrap:anywhere}
.agents-foot .agents-line{margin:0}