/* Їжак (HealthKit): PixelKit Paper, the "Sentence" look (pixelkit/plans/2026-10-07-controls).
   A kind of fact keeps one colour: food blue, number green, symptom coral, how I feel violet, medicine sand. Text stays ink. */
:root{--bg:#f3f3f2;--card:#fbfbf7;--text:#141518;--mute:#4f5158;--line:rgba(20,22,26,.13);--rule:rgba(20,22,26,.26);
  --k-food:#3a6cbf;--k-num:#2f8f63;--k-sym:#c04f31;--k-feel:#8256b8;--k-med:#96690a;--k:var(--k-food);
  --mono:ui-monospace,"JetBrains Mono",Menlo,monospace;
  --px:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px),0 4px,2px 4px,2px 2px,4px 2px);
  --soft:color-mix(in srgb,var(--text) 5%,var(--bg));
  --cut:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
main{max-width:760px;margin:0 auto;padding:20px 20px 190px;display:flex;flex-direction:column;gap:18px}
h1{margin:0;font:600 22px/1.3 var(--mono)}
.k-food,.k-drink{--k:var(--k-food)}.k-num{--k:var(--k-num)}.k-symptom{--k:var(--k-sym)}.k-feel,.k-activity{--k:var(--k-feel)}.k-med{--k:var(--k-med)}
button{font:inherit;color:var(--text);background:none;border:0;border-radius:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #3a6cbf;outline-offset:2px}
kbd{font:12px/1 var(--mono);padding:3px 5px;border:1px solid var(--line);color:var(--mute)}
.mute{color:var(--mute)}.m{font-family:var(--mono)}.small{font-size:14px}
/* head: day and the way to other days */
.top{display:flex;align-items:center;gap:8px}.top .grow{flex:1}
.top button{min-width:44px;justify-content:center;color:var(--mute)}.top a{color:var(--mute);font-size:14px}
.day{font:500 15px/1.4 var(--mono);color:var(--mute)}
/* a marked word: glyph in its colour, a thin uneven line under it, never over the letters */
.t{position:relative;isolation:isolate;display:inline;font-weight:600;white-space:nowrap}
.t::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--k);opacity:.55;filter:url(#wob2);z-index:-1}
/* the robocat speaks: one line, then maybe questions */
.ask{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.ask img{width:40px;height:40px;image-rendering:pixelated}
.ask p{margin:0}.ask .say{font-size:18px;line-height:1.7;color:var(--mute)}.ask .say b{color:var(--text)}
.ask .ctx{margin-top:6px;font-size:15px;color:var(--mute)}
.q{margin-top:12px;display:flex;flex-direction:column;gap:6px}.q>b{font-size:16px}
.seg{display:flex;flex-wrap:wrap;gap:2px}
.seg button{color:var(--mute);font-size:16px}
.seg button.on{background:color-mix(in srgb,var(--k) 24%,var(--bg));color:var(--text);font-weight:600}
.seg button.on::before{content:"";width:8px;height:8px;background:var(--k)}
/* the log */
.log{display:flex;flex-direction:column}
.e{display:grid;grid-template-columns:52px minmax(0,1fr) 44px;gap:10px;align-items:start;padding:14px 0;border-top:1px solid var(--line)}
.e time{font:14px/1.9 var(--mono);color:var(--mute)}
.e .s{margin:0;line-height:1.85;color:var(--mute)}.e .said{margin:2px 0 0;font-size:14px;color:var(--mute);opacity:.85}
.e .x{justify-content:center;color:var(--mute);padding:0}
.week{display:flex;flex-direction:column;border-top:1px solid var(--rule);padding-top:10px}
.week h2{margin:0 0 4px;font:500 14px/1.6 var(--mono);color:var(--mute)}
.w{display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px;padding:8px 0;font-size:15px;color:var(--mute);text-align:left;min-height:0;align-items:baseline;width:100%}
.w .d{font:14px/1.6 var(--mono)}.w b{color:var(--text);font-weight:600}.w i{display:inline-block;width:8px;height:8px;background:var(--k-sym);margin-right:6px}
/* the one box: say it or type it */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--bg);box-shadow:inset 0 1px 0 var(--rule);padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
.bar form{max-width:720px;margin:0 auto;display:flex;gap:8px;align-items:center}
.bar input{flex:1;min-width:0;font:inherit;color:var(--text);background:none;border:0;border-bottom:1px solid var(--mute);border-radius:0;padding:10px 0}
.bar input::placeholder{color:var(--mute);opacity:.8}
.cam{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-height:48px;padding:0;flex:none;cursor:pointer;color:var(--mute);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.cam svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pri{min-height:48px;padding:0 20px;font-weight:600;color:var(--bg);background:color-mix(in srgb,var(--text) 88%,var(--bg));clip-path:var(--cut)}
.pri kbd{color:inherit;border-color:currentColor;opacity:.75}
.pri:disabled{opacity:.45}
.draft{max-width:720px;margin:0 auto 12px;display:flex;flex-direction:column;gap:10px}
.draft .acts{display:flex;gap:8px;align-items:center;justify-content:flex-end}.draft .acts .sec{color:var(--mute)}
.hints{max-width:720px;margin:8px auto 0;display:flex;flex-wrap:wrap;gap:2px 4px}.hints button{min-height:36px;font-size:14px;color:var(--mute);padding:0 8px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(150px + env(safe-area-inset-bottom));max-width:min(92vw,560px);display:flex;gap:12px;align-items:center;padding:10px 14px;background:var(--text);color:var(--bg);font-size:15px;z-index:5}
.toast button{color:var(--bg);min-height:36px;text-decoration:underline;text-underline-offset:3px}
.toast[hidden]{display:none}
.own{font-size:14px;color:var(--mute);border-top:1px solid var(--line);padding-top:10px}.own summary{cursor:pointer}.own p{margin:8px 0}.own code{display:block;font:12px/1.6 var(--mono);padding:10px 12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow-wrap:anywhere;user-select:all}
.bad{color:var(--k-sym)}
.join{max-width:420px;padding-top:15vh}.join form{display:flex;flex-direction:column;gap:14px}.join label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--mute)}
.join input{font:inherit;color:var(--text);background:none;border:0;border-bottom:1px solid var(--mute);border-radius:0;padding:10px 0}.join .pri{align-self:flex-start}
.join .ask p{color:var(--mute);font-size:15px}
@media (max-width:560px){html,body{font-size:16px}main{padding:14px 14px 200px}.e{grid-template-columns:46px minmax(0,1fr) 36px;gap:8px}.pri kbd,.hints kbd{display:none}.ask{grid-template-columns:32px minmax(0,1fr);padding:12px}.ask img{width:32px;height:32px}}
/* the likely amount is picked; the row of choices is the easy switch */
.q .qn{font-size:14px;color:var(--mute)}
.seg button{min-height:40px;padding:0 10px}
/* live camera */
.camv{position:fixed;inset:0;z-index:20;background:#151517;display:flex;flex-direction:column}
.camv video{flex:1;min-height:0;width:100%;object-fit:cover}
.camh{position:absolute;left:0;right:0;top:calc(12px + env(safe-area-inset-top));margin:0 16px;padding:8px 12px;background:rgba(21,21,23,.7);color:#ebebe7;font-size:15px;text-align:center}
.camb{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 20px calc(16px + env(safe-area-inset-bottom));background:#151517}
.camb button{color:#ebebe7;justify-self:start}
.shut{width:68px;height:68px;justify-self:center!important;background:#ebebe7;box-shadow:inset 0 0 0 4px #151517,inset 0 0 0 6px #ebebe7;clip-path:var(--cut)}
/* bars, share */
.kbar{display:inline-block;width:72px;height:8px;margin-right:6px;background:var(--line);vertical-align:1px}.kbar i{display:block;height:100%;background:var(--k-num);margin:0;width:0}
.sq{display:inline-block;width:8px;height:8px;background:var(--k-sym);margin-right:6px}
.lnk{min-height:36px;padding:0 10px;font-size:14px;color:var(--text);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
#mkshare{display:flex;gap:8px;flex-wrap:wrap}#mkshare input{flex:1;min-width:160px;font:inherit;font-size:15px;color:var(--text);background:none;border:0;border-bottom:1px solid var(--mute);border-radius:0;padding:6px 0}
.shr{margin-top:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;color:var(--text)}
#plain{white-space:pre-wrap;font:13px/1.6 var(--mono);padding:10px 12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);max-height:260px;overflow:auto}
/* ---------- softer, cosier: pixel-stepped corners on filled areas, no outlines, small pictures instead of line glyphs ---------- */
h1{display:flex;align-items:center;gap:10px;font-size:24px}
.ask{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px 18px;background:var(--soft);box-shadow:none;clip-path:var(--px)}
.hog{flex:none;image-rendering:pixelated;margin-top:2px}
.t .te{margin-right:5px;font-size:.9em}
.pri{clip-path:var(--px)}
.cam,.lnk,.own code,#plain{box-shadow:none;background:var(--soft);clip-path:var(--px)}
.e{border-top:0;padding:12px 0}.log{gap:2px}
.week{border-top:0}
/* portions as pictures: the likely one is already picked */
.pts{display:flex;flex-wrap:wrap;gap:8px}
.pt{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:104px;min-height:0;padding:10px 8px 8px;background:var(--bg);clip-path:var(--px);color:var(--mute);font-size:13px;line-height:1.3;text-align:center}
.pt svg{image-rendering:pixelated;margin-bottom:4px}
.pt b{font:500 15px/1.3 var(--mono);color:var(--text)}
.pt kbd{position:absolute;left:6px;top:6px}
.pt.on{background:color-mix(in srgb,var(--k) 22%,var(--bg));color:var(--text)}
.pt.on b{font-weight:600}
@media (max-width:560px){.pt{min-width:0;flex:1 1 30%;padding:8px 4px 6px}.pt svg{width:66px;height:36px}.pt kbd{display:none}.hog{width:40px;height:auto}}
.foot{margin:0;font-size:14px}.foot a{color:var(--mute)}
.hints button{background:var(--soft);clip-path:var(--px);margin:2px}
/* ---------- keycaps: every button is a soft key with stepped corners and a lower edge; a chosen key is pressed in ---------- */
:root{--key:color-mix(in srgb,var(--text) 6%,var(--bg));--edge:color-mix(in srgb,var(--text) 17%,var(--bg))}
.tg{margin-right:5px;vertical-align:-2px;image-rendering:pixelated}
.meal{display:block;margin:2px 0 6px;image-rendering:pixelated}
.lnk,.cam,.hints button,.top button,.draft .sec{background:var(--key);box-shadow:inset 0 -3px 0 var(--edge);clip-path:var(--px);padding-bottom:3px}
.lnk:active,.cam:active,.hints button:active,.top button:active,.pt:active{box-shadow:inset 0 2px 0 var(--edge);padding-bottom:0;padding-top:3px}
.pri{background:color-mix(in srgb,var(--text) 86%,var(--bg));box-shadow:inset 0 -4px 0 color-mix(in srgb,var(--text) 62%,var(--bg));padding-bottom:4px;clip-path:var(--px)}
.pri:active{box-shadow:inset 0 3px 0 color-mix(in srgb,var(--text) 62%,var(--bg));padding-bottom:0;padding-top:4px}
.pt{background:var(--key);box-shadow:inset 0 -3px 0 var(--edge);padding-bottom:11px}
.pt.on{background:color-mix(in srgb,var(--k) 24%,var(--bg));box-shadow:inset 0 3px 0 color-mix(in srgb,var(--k) 55%,var(--bg));padding-top:13px;padding-bottom:8px}
.top button:disabled{opacity:.4}
/* ---------- the plate first: an entry is its picture, then the words; changing and removing are plain words ---------- */
.e{display:flex;flex-direction:column;gap:2px;padding:14px 0 10px}
.eh{display:flex;align-items:center;gap:6px}.eh .grow{flex:1}.eh time{line-height:1.4}
.mini{min-height:32px;padding:0 10px 3px;font-size:13px;color:var(--mute);background:var(--key);box-shadow:inset 0 -3px 0 var(--edge);clip-path:var(--px)}
.e .meal{margin:4px 0 8px}.e .s{font-size:16px;line-height:1.8}
.qh,.qc{display:flex;align-items:center;gap:8px}.qh .qn,.qc .qn{flex:1}.qc{margin-top:8px}.qc b{color:var(--text);font:500 14px var(--mono)}
.draft{max-height:calc(100dvh - 40px);overflow:auto}
.qc small{font-size:12px;color:var(--mute);white-space:nowrap}
/* ---------- the plate from above (food.js) and the amount slider ---------- */
.stage{display:flex;justify-content:center;background:#fbfbf7;clip-path:var(--px);padding:10px 0;overflow:hidden}
.ptop{max-width:100%;height:auto;image-rendering:pixelated}.ptop [data-i]{cursor:pointer}
.ptop text{font:500 4.3px var(--mono);fill:#3c3e43}.ptop text.on{fill:#141518;font-weight:700}.ptop .pa{font-weight:400;fill:#4f5158}
.fs{image-rendering:pixelated;vertical-align:-3px;margin-right:5px}
.sp{transform-box:fill-box;transform-origin:50% 100%}
.sp.in{animation:pop .42s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d,0ms)}
.sp.on{animation:bob 1s steps(2,jump-none) infinite}
.sp.on.in{animation:pop .42s cubic-bezier(.3,1.5,.5,1) both,bob 1s steps(2,jump-none) .5s infinite;animation-delay:var(--d,0ms),calc(var(--d,0ms) + .5s)}
@keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes bob{0%{transform:translateY(0)}100%{transform:translateY(-1px)}}
@media (prefers-reduced-motion:reduce){.sp.in,.sp.on,.sp.on.in{animation:none}}
.one{display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:var(--soft);clip-path:var(--px)}
.one .nm{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:16px}.one .nm b{font:600 18px var(--mono);white-space:nowrap}
.one .nm span{display:inline-flex;align-items:center;min-width:0}
.marks{display:flex;flex-wrap:wrap;gap:6px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;margin:0;background:none;touch-action:none}
input[type=range]::-webkit-slider-runnable-track{height:8px;background:linear-gradient(90deg,var(--k-food) var(--p,50%),var(--edge) var(--p,50%))}
input[type=range]::-moz-range-track{height:8px;background:var(--edge)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;background:var(--text);clip-path:var(--cut);border:0}
input[type=range]::-moz-range-thumb{width:28px;height:28px;background:var(--text);border:0;border-radius:0}
.stage.sm{display:inline-flex;padding:6px 10px;margin:4px 0 6px;align-self:flex-start}
.draft{display:flex;flex-direction:column;gap:8px}
.one .mini.on{background:color-mix(in srgb,var(--k-food) 24%,var(--bg));box-shadow:inset 0 3px 0 color-mix(in srgb,var(--k-food) 55%,var(--bg));color:var(--text);padding-top:3px;padding-bottom:0}
.one small{font-size:12px;color:var(--mute);margin-left:8px;white-space:nowrap}
.draft .ask{padding:10px 14px}.draft .ask .say{font-size:16px;line-height:1.75}
/* demo notice, share form, shared page */
.demo{margin:0;padding:10px 14px;font-size:14px;color:var(--text);background:color-mix(in srgb,var(--k-feel) 14%,var(--bg));clip-path:var(--px)}.demo a{color:inherit;margin-left:6px}
#mkshare{flex-direction:column;align-items:stretch;gap:10px}#mkshare .lnk{align-self:flex-start}
.cks{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--text)}.cks label{display:inline-flex;align-items:center;gap:6px;min-height:32px}.cks input{width:18px;height:18px;accent-color:var(--text);margin:0}
.shr{padding-top:10px;border-top:1px solid var(--line)}
.dh{margin:14px 0 0;font:500 14px/1.6 var(--mono);color:var(--mute)}
/* ---------- the composer: one clear place to write; read as you type ---------- */
.comp{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding:12px 14px 10px;background:#fbfbf7;clip-path:var(--px)}
.cl{font:600 15px/1.3 var(--mono);color:var(--text)}
.live{min-height:0;font-size:16px;line-height:1.8;color:var(--mute)}.live:empty{display:none}
.comp form{max-width:none;margin:0;display:flex;gap:8px;align-items:center}
.comp #txt{flex:1;min-width:0;font:inherit;font-size:18px;color:var(--text);background:none;border:0;border-bottom:2px solid var(--text);border-radius:0;padding:10px 2px}
.comp .hints{max-width:none;margin:0;align-items:center}.hl{font:13px/1.5 var(--mono);color:var(--mute);margin-right:4px}
.bar{box-shadow:none;background:linear-gradient(180deg,transparent,var(--bg) 18px);padding-top:22px}
.glow{outline:2px solid var(--k-feel);outline-offset:3px}
.tour{max-width:720px;margin:0 auto 8px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:10px 14px;font-size:15px;background:color-mix(in srgb,var(--k-feel) 16%,var(--bg));clip-path:var(--px)}
.tour b{font:600 13px var(--mono)}.tour span{flex:1 1 220px}.tour .tb{flex:0 0 auto;display:flex;gap:6px}
.mini.on{background:color-mix(in srgb,var(--text) 86%,var(--bg));color:var(--bg);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--text) 62%,var(--bg))}
}
/* ---------- one surface for pictures: plates lie on the page itself, the writing box is the only white card ---------- */
.stage,.stage.sm{background:none;clip-path:none;padding:0}.stage{padding:4px 0}
.comp{background:#fbfbf7}
/* levels */
.gr{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;font:700 16px var(--mono);color:#fbfbf7;clip-path:var(--px);padding-bottom:3px}
.g-S{background:#8256b8;box-shadow:inset 0 -3px 0 #5f3d8c}.g-A{background:#2f8f63;box-shadow:inset 0 -3px 0 #1f6846}.g-B{background:#3a6cbf;box-shadow:inset 0 -3px 0 #284d8c}.g-C{background:#96690a;box-shadow:inset 0 -3px 0 #6b4a05}.g-D{background:#b4462d;box-shadow:inset 0 -3px 0 #84301d}.g-n{background:var(--key);color:var(--mute);box-shadow:inset 0 -3px 0 var(--edge)}
.gr.big{width:56px;height:56px;font-size:30px;padding-bottom:5px}
.sl,.sd,.mid{display:flex;flex-direction:column;gap:10px;min-width:0}
.sl h2,.sd h2,.mid h2{margin:14px 0 2px;font:500 13px/1.6 var(--mono);color:var(--mute)}.sl>h2:first-child,.sd>h2:first-child{margin-top:0}
.lvl{display:flex;gap:14px;align-items:center}.lvl b{display:block;font-size:16px}.lvl small{display:block;font-size:13px;color:var(--mute)}
.xp{height:8px;background:var(--edge)}.xp i{display:block;height:100%;background:var(--k-num)}
.rules{display:flex;flex-direction:column;gap:6px}.ck{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:15px;color:var(--mute)}.ck i{width:10px;height:10px;background:var(--edge)}.ck.ok{color:var(--text)}.ck.ok i{background:var(--k-num)}.ck b{font:500 13px var(--mono);color:var(--mute)}.ck.ok b{color:var(--k-num)}
.tiny{font-size:12px;margin:4px 0 0}
.wkl{display:flex;flex-direction:column;gap:4px}.wr{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:38px;padding:0;text-align:left;font-size:15px}.wr small{font:12px var(--mono);color:var(--mute)}
/* one-tap tiles, 1-2-3 offers, side buttons */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.tile{flex-direction:column;gap:2px;min-height:0;padding:10px 4px 10px;background:var(--key);box-shadow:inset 0 -3px 0 var(--edge);clip-path:var(--px);font-size:14px}.tile .fs{margin:0 0 4px}.tile b{font-weight:600}.tile small{font:12px var(--mono);color:var(--mute)}
.tile:active,.act:active,.sg:active{box-shadow:inset 0 2px 0 var(--edge)}
.sgs{max-width:720px;margin:0 auto 8px;display:flex;flex-direction:column;gap:4px}.sgs:empty{display:none}
.sg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:44px;padding:4px 12px 7px;text-align:left;background:var(--key);box-shadow:inset 0 -3px 0 var(--edge);clip-path:var(--px)}
.sg:first-of-type{background:color-mix(in srgb,var(--k-food) 18%,var(--bg));box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--k-food) 45%,var(--bg))}.sg small{font:12px var(--mono);color:var(--mute);white-space:nowrap}.sg span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:center;width:100%;min-height:56px;padding:8px 14px 11px;text-align:left;background:var(--key);box-shadow:inset 0 -3px 0 var(--edge);clip-path:var(--px);color:var(--mute)}
.act svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}.act b{display:block;font-size:15px;font-weight:600;color:var(--text)}.act small{display:block;font-size:12px;line-height:1.35;color:var(--mute)}.act.on svg{color:var(--k-num)}.act:disabled{opacity:.55;cursor:default}
.pair{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.gr.onph{display:none}
/* phone: one column in reading order; the level is a compact row, the side buttons sit two by two */
@media (max-width:979px){
  #app{gap:16px}.gr.onph{display:inline-flex}
  .sl .rules,.sl .xp{display:none}.wkl{flex-direction:row;gap:6px;overflow-x:auto}.wr{display:flex;flex-direction:column;gap:2px;width:auto;min-height:0;font-size:11px;font-family:var(--mono);color:var(--mute)}.wr small{display:none}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sd h2,.sd .foot,.sd #sharein,.sd #plain,.sd .pair{grid-column:1 / -1}.act{min-height:60px;padding:8px 10px 11px;gap:8px}
  .sgs,.comp{max-width:none}.sg small{display:none}.sg{grid-template-columns:auto minmax(0,1fr)}
}
/* wide: level and week left, the day in the middle with the writing box low and central, buttons right */
@media (min-width:980px){
  #app{max-width:1360px;display:grid;grid-template-columns:250px minmax(0,1fr) 280px;grid-template-areas:"top top top" "demo demo demo" "sl ask sd" "sl mid sd";column-gap:48px;row-gap:20px;padding:32px 40px 0;align-items:start}
  #app>.top{grid-area:top}#app>.demo{grid-area:demo}#app>.ask{grid-area:ask}#app>.sl{grid-area:sl;position:sticky;top:24px}#app>.sd{grid-area:sd;position:sticky;top:24px}
  #app>.mid{grid-area:mid;min-height:calc(100vh - 220px);gap:16px}
  .mid>.bar{position:sticky;bottom:0;left:auto;right:auto;margin-top:auto;padding:22px 0 20px;background:linear-gradient(180deg,transparent,var(--bg) 20px)}
  .comp,.sgs,.tour,.draft{max-width:none}.draft{max-height:calc(100vh - 80px)}
  .toast{bottom:28px}
}
/* the notice sits at the top, clear of the writing box */
.toast{top:calc(12px + env(safe-area-inset-top));bottom:auto}
@media (min-width:980px){.toast{bottom:auto}}
.hints:empty{display:none}
.wr .ds{display:none}
@media (max-width:979px){.wr .dl{display:none}.wr .ds{display:inline}.wkl{justify-content:space-between}}
/* the writing box and the reading panel stay above everything that scrolls under them */
.bar{z-index:10}.toast{z-index:30}

/* ---- 7 October, evening: the day as a strip of time, the day by its parts, a level that stays in place, sharing with a term ---- */
.parts{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.pr{display:grid;grid-template-columns:10px 76px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:16px;line-height:1.5}
.pr i{width:10px;height:10px}.pr .pn{font:500 13px var(--mono);color:var(--mute)}.pr .pf .fs{margin-right:4px}.pr b{font:500 13px var(--mono);color:var(--mute);white-space:nowrap}
.split{display:flex;gap:2px;height:8px;margin-top:12px}.split i{min-width:4px}
.ask .say{font-size:18px;line-height:1.6}
.tlw{position:relative;height:232px;flex:none}
.tl{--night:color-mix(in srgb,#3a6cbf 17%,var(--bg));position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;clip-path:var(--px);background:var(--night);overscroll-behavior-x:contain}
.tl::-webkit-scrollbar{display:none}.tl::before,.tl::after{content:"";flex:0 0 50%}
.tlin{position:relative;flex:none;height:100%;background:linear-gradient(90deg,var(--night) 0,var(--night) 19%,color-mix(in srgb,#e0a90f 22%,var(--bg)) 27%,#fbfbf7 38%,#fbfbf7 68%,color-mix(in srgb,#8256b8 20%,var(--bg)) 81%,var(--night) 92%,var(--night) 100%)}
.th{position:absolute;top:5px;translate:-50% 0;font:12px var(--mono);color:var(--mute)}.th::after{content:"";position:absolute;left:50%;top:18px;width:1px;height:210px;background:var(--line)}
.nowm{position:absolute;top:24px;bottom:0;width:2px;margin-left:-1px;background:var(--k-sym);opacity:.45}
.tc{position:absolute;translate:-50% 0;display:inline-flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:0;min-height:0;padding:4px 6px 20px;background:var(--card);box-shadow:inset 0 -3px 0 var(--edge);clip-path:var(--px)}
.tc .fs,.tc .tg{margin:0;vertical-align:0}.tc time{position:absolute;left:0;right:0;bottom:5px;text-align:center;font:11px/1 var(--mono);color:var(--mute)}
.tc.on{background:color-mix(in srgb,var(--k-food) 16%,var(--card));box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--k-food) 50%,var(--bg))}.tc.on time{color:var(--text);font-weight:600}
.tc.in{animation:drop .5s cubic-bezier(.3,1.5,.5,1) both}@keyframes drop{from{opacity:0;transform:translateY(-22px) scale(.7)}to{opacity:1;transform:none}}
.needle{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--text);pointer-events:none}
.needle b{position:absolute;bottom:6px;left:50%;translate:-50% 0;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;font:600 13px/1 var(--mono);color:var(--bg);background:var(--text);clip-path:var(--cut);white-space:nowrap}
.sky{image-rendering:pixelated}.nowb{position:absolute;right:10px;bottom:6px}.nowb[hidden]{display:none}
.det{min-width:0}.det .none{margin:6px 0;color:var(--mute);font-size:15px}.det .e{padding:4px 0 0}
.when{font:600 14px var(--mono)}.draft .acts .grow{flex:1}
.askd{display:flex;flex-direction:column;gap:8px;padding:10px 14px 12px;font-size:15px;background:var(--soft);clip-path:var(--px)}
.prog{align-self:flex-start}.progs{display:flex;flex-direction:column;gap:6px}.act.np{grid-template-columns:minmax(0,1fr);min-height:48px}.act.np.on{background:color-mix(in srgb,var(--k-num) 16%,var(--bg));box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--k-num) 45%,var(--bg))}
.kcs{display:flex;align-items:center;gap:10px}.kcs b{font:600 15px var(--mono)}.kcs .mini{min-width:36px;justify-content:center;font-size:16px}
.wr.cur .dl,.wr.cur .ds{font-weight:700;color:var(--text)}.cks span{font:13px var(--mono);color:var(--mute)}
@media (prefers-reduced-motion:reduce){.tc.in{animation:none}}
@media (max-width:979px){
  #app>.top{order:0}#app>.ask{order:1}#app>.mid{order:2}#app>.sl{order:3}#app>.sd{order:4}
  .tlw{height:226px}.pr{grid-template-columns:10px 68px minmax(0,1fr) auto;font-size:15px}.sl .rules,.sl .xp{display:none}
}
@media (min-width:980px){
  #app{height:100dvh;grid-template-areas:"top top top" "sl ask sd" "sl mid sd";grid-template-rows:auto auto minmax(0,1fr);padding-bottom:0}
  #app>.sl,#app>.sd{position:static;align-self:stretch;min-height:0;overflow:auto;padding-bottom:24px;scrollbar-width:thin}
  #app>.mid{min-height:0;height:100%;gap:12px}.det{flex:1 1 0;min-height:0;overflow:auto}
  .mid>.bar{position:static;flex:0 1 auto;min-height:0;overflow:auto;margin-top:0;padding:4px 0 18px;background:none}
  #app.drafting>.ask{display:none}.draft{max-height:none}
}
/* the strip is low; the needle is a tab at the top, so it never crosses a card */
.tlw{height:150px}.th::after{height:130px}
.needle{top:0;bottom:auto;height:30px;background:var(--text)}.needle b{bottom:auto;top:0}
.nowb{bottom:8px}
.de{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start}.de .stage.sm{margin:0}.de .s{margin-top:4px}
.pw{white-space:nowrap}.pr .pf .fs{margin-right:3px;vertical-align:-5px}
.sgs{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}.sg{width:auto;min-height:40px;grid-template-columns:auto auto;padding:3px 12px 6px}.sg small{display:none}.sgs .hl{flex:0 0 100%}
.draft .stage .ptop{height:min(270px,30vh);width:auto}
@media (max-width:979px){.tlw{height:150px}.pnm{display:none}.pr .pf .fs{margin-right:6px}.pr{grid-template-columns:10px 76px minmax(0,1fr) auto}}

/* ---- the phone: one screen for one job. A line about the day, the strip, the input. Everything else is a second screen below. ---- */
.tn,.more{display:none}.more{padding:0;min-height:0;background:none}
.sheet{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:#fbfbf7;clip-path:var(--px)}.sheet .acts{display:flex;gap:8px;justify-content:flex-end}.sheet .sec{color:var(--mute);background:var(--key);box-shadow:inset 0 -3px 0 var(--edge);clip-path:var(--px);padding:0 14px 3px}.sheet .s{margin:0}
@media (max-width:979px){
  main#app{padding:10px 14px 24px;gap:10px}
  .more{display:inline-flex}.more .gr{display:inline-flex}
  .ask{padding:10px 12px;align-items:center;cursor:pointer;position:relative}.ask .hog{width:34px}.ask .say{font-size:16px;line-height:1.45;padding-right:18px}
  .ask::after{content:"";position:absolute;right:14px;top:22px;width:7px;height:7px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg)}.ask.open::after{transform:rotate(-135deg);top:26px}
  .ask:not(.open) .parts,.ask:not(.open) .split,.ask:not(.open) .ctx{display:none}.ask.open{align-items:start}
  #app>.mid{height:calc(100dvh - 158px);min-height:420px;gap:10px}
  .tlw{flex:1 1 0;height:auto;min-height:124px}.th::after{height:900px}
  .tc{padding:5px 8px 34px;min-width:76px}.tc .fs{width:34px;height:34px}.tn{display:block;position:absolute;left:4px;right:4px;bottom:17px;text-align:center;font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
  .det{display:none}
  .mid>.bar{position:static;flex:0 1 auto;min-height:0;max-height:64dvh;overflow:auto;padding:0;background:none}
  .comp{padding:10px 12px}.comp .cl{display:none}.hints button:nth-of-type(n+5){display:none}
  .sgs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:6px}.sgs .hl{display:none}.sg{flex:none;max-width:70vw}.sg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sg kbd{display:none}.sg{grid-template-columns:minmax(0,1fr)}
  .draft{max-height:none;margin:0;gap:6px}.draft .stage .ptop{height:150px}.draft .ask{padding:8px 10px;cursor:default}.draft .ask::after{display:none}.draft .ask .hog{display:none}.draft .ask{grid-template-columns:minmax(0,1fr)}.draft .ask .say{padding:0;font-size:15px}
  .one{padding:10px 12px}.tour{margin-bottom:6px}
  #app>.sl{margin-top:8px}
}
@media (max-width:979px){.toast{top:calc(62px + env(safe-area-inset-top))}}
/* the notice with undo sits in the corner of the strip */
.tlw .toast{position:absolute;left:10px;right:auto;top:auto;bottom:8px;transform:none;max-width:calc(100% - 110px);padding:6px 12px;font-size:14px;clip-path:var(--cut)}

/* ---- buttons to pick, cards to drag, a plate without a white box ---- */
.hints{gap:8px}.pick{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:6px 16px 9px 12px;font-size:16px;color:var(--text);background:var(--key);box-shadow:inset 0 -3px 0 var(--edge);clip-path:var(--px)}
.pick .fs{margin:0}.pick b{font-weight:600}.pick small{font:12px var(--mono);color:var(--mute)}.pick.txt{padding-left:16px}.pick:active{box-shadow:inset 0 3px 0 var(--edge)}
.hints button.pick{margin:0;font-size:16px;min-height:52px;color:var(--text)}
.mini{min-height:40px;padding:0 14px 3px;font-size:14px}.sg{min-height:48px}
.tc{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}.tc.drag{cursor:grabbing;z-index:5;background:color-mix(in srgb,var(--k-food) 22%,var(--card));box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--k-food) 55%,var(--bg)),0 6px 0 rgba(20,22,26,.08)}
.stage,.stage.sm,.de .stage.sm,.draft .stage,.sheet .stage{background:none;clip-path:none}
@media (max-width:979px){.pick{min-height:56px}.pick small{display:none}}

/* ---- the line that reads itself: coloured words, a grey ending, a list of what comes next ---- */
.linebox{position:relative;flex:1;min-width:0}
.comp .linebox #txt{width:100%;height:48px;line-height:26px;padding:10px 2px;font-size:18px;color:transparent;caret-color:var(--text);position:relative;background:none}
.mirror{position:absolute;left:0;right:0;top:0;height:48px;padding:10px 2px;font-size:18px;line-height:26px;white-space:pre;overflow:hidden;pointer-events:none;color:var(--text)}
.mirror .w-food,.mirror .w-drink{box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--k-food) 45%,transparent)}.mirror .w-num{box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--k-num) 45%,transparent)}.mirror .ghost{color:var(--mute);opacity:.55}
.sugg{display:flex;flex-direction:column;gap:2px}.sugg:empty{display:none}
.it{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;width:100%;min-height:48px;padding:4px 12px;text-align:left;font-size:16px;color:var(--text);clip-path:var(--px)}
.it .il{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.it .il .fs{margin:0;flex:none}.it .il small{font:12px var(--mono);color:var(--mute);margin-left:4px}
.it .why{font:12px var(--mono);color:var(--mute);white-space:nowrap}.it kbd{font:11px var(--mono);padding:2px 5px;border:1px solid var(--rule);color:var(--mute)}
.it.on{background:var(--key);box-shadow:inset 0 -3px 0 var(--edge);padding-bottom:7px}.it:hover{background:var(--soft)}.it.on:hover{background:var(--key)}
@media (max-width:979px){.it{min-height:52px;background:var(--key);box-shadow:inset 0 -3px 0 var(--edge);padding-bottom:7px}.it kbd{display:none}.sugg{gap:6px;order:-1;margin-bottom:6px}.it .why{max-width:38vw;overflow:hidden;text-overflow:ellipsis}}
/* the list keeps its height whatever is in it, so the line never moves; every row carries its number */
.it{grid-template-columns:auto minmax(0,1fr) auto auto;height:48px;min-height:48px}
.it kbd.n{min-width:24px;text-align:center;font:600 13px var(--mono);padding:4px 0;border:0;color:var(--bg);background:color-mix(in srgb,var(--text) 55%,var(--bg));clip-path:var(--cut)}.it.on kbd.n{background:var(--text)}
.sugg{height:298px;gap:2px;overflow:hidden}.sugg:empty{display:flex}.comp .live{min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:979px){.it{height:52px}.it kbd.n{display:inline-block}.sugg{height:226px;gap:6px}.comp .live{min-height:26px}}
/* the list stands above the line and grows upward: the first offer is the row right next to the line */
.comp .cl{order:0}.comp .sugg{order:1;flex-direction:column-reverse;justify-content:flex-start;margin:0}.comp .live{order:2}.comp form{order:3}
@media (max-width:979px){.comp .sugg{order:1;margin:0}}