/* House style kit v20. The Apple look: system font, grouped background, rounded cards, one warm
   tint, light and dark. Tokens first, then the page, then each piece. This file is the source of
   truth for every value of the default look. Another look (looks/<name>.css) loads after this file
   and changes tokens, and pieces only where it must. */

:root{
  color-scheme:light;
  --bg:#F2F2F7; --card:#FFFFFF; --sum:#F5F5F7;
  --fill:rgba(120,120,128,.12); --fill2:rgba(120,120,128,.07);
  --sep:rgba(60,60,67,.16);
  --label:#1D1D1F; --label2:rgba(60,60,67,.66); --label3:rgba(60,60,67,.40);
  /* The one tint. A project may swap these five, in both themes. Nothing else changes. */
  --tint:#D97757; --tint2:#C4623F; --tintsoft:rgba(217,119,87,.13); --tintline:rgba(217,119,87,.45); --tintglow:#F4A98C;
  --green:#34C759; --orange:#FF9500; --red:#FF3B30; --blue:#007AFF; --pink:#FF2D55; --gray:#8E8E93;
  --greensoft:rgba(52,199,89,.14); --orangesoft:rgba(255,149,0,.14); --redsoft:rgba(255,59,48,.10);
  --bluesoft:rgba(0,122,255,.11); --pinksoft:rgba(255,45,85,.11); --graysoft:rgba(142,142,147,.15);
  --busy:#D97757; --busy2:#F2A65A; --busy3:#E3685A;   /* the busy status pill's gradient, from the tint. A look with its own tint sets these too. */
  --glass:rgba(242,242,247,.86); --smoke:rgba(28,28,30,.86); --segon:#FFFFFF;
  --shadow:0 1px 1px rgba(0,0,0,.03),0 8px 26px rgba(0,0,0,.055);
  --ease:cubic-bezier(.2,.8,.2,1);
  --r-card:22px; --r-box:16px; --r-btn:14px; --r-field:12px; --r-pill:999px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --font-title:var(--font); --track:-.01em;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000; --card:#1C1C1E; --sum:#2C2C2E;
  --fill:rgba(118,118,128,.24); --fill2:rgba(118,118,128,.14);
  --sep:rgba(84,84,88,.55);
  --label:#F5F5F7; --label2:rgba(235,235,245,.64); --label3:rgba(235,235,245,.34);
  --tint:#E48A6C; --tint2:#D97757; --tintsoft:rgba(228,138,108,.17); --tintline:rgba(228,138,108,.45); --tintglow:#F4A98C;
  --green:#30D158; --orange:#FF9F0A; --red:#FF453A; --blue:#0A84FF; --pink:#FF375F; --gray:#98989D;
  --greensoft:rgba(48,209,88,.17); --orangesoft:rgba(255,159,10,.17); --redsoft:rgba(255,69,58,.17);
  --bluesoft:rgba(10,132,255,.2); --pinksoft:rgba(255,55,95,.2); --graysoft:rgba(152,152,157,.2);
  --glass:rgba(18,18,20,.84); --smoke:rgba(44,44,46,.9); --segon:#636366;
  --shadow:0 0 #0000;   /* not none: a ring like .card.attn lists it after a comma, and none there voids the whole rule */
}

/* ---------- the page ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--label);font:17px/1.47 var(--font);-webkit-font-smoothing:antialiased;letter-spacing:var(--track)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
button:disabled{cursor:default}
:where(button,a,summary,[role="button"]):focus-visible{outline:none;box-shadow:0 0 0 3px var(--tintsoft)}
a{color:var(--tint)}
[hidden]{display:none!important}
.wrap{max-width:620px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 40px)}
.wrap.wide{max-width:1080px}
main{margin-top:22px;display:flex;flex-direction:column;gap:14px}

/* header: a mark on the left, small controls on the right, then a large title and one line */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.mark{display:block;width:26px;height:26px;color:var(--label)}
.me{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--label2)}
.me button{color:var(--tint);font-size:15px}
h1{font-family:var(--font-title);font-size:34px;line-height:41px;font-weight:700;letter-spacing:.003em;margin:10px 0 6px}
.sub{margin:0 0 16px;color:var(--label2);font-size:15px;line-height:21px}
.iconbtn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--label2);transition:background .2s}
.iconbtn:hover{background:var(--fill2)}
.iconbtn svg{width:20px;height:20px}

/* status pill: one live fact about the whole page, in a slow gradient of its colour */
.statuspill{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#fff;padding:8px 16px 8px 13px;border-radius:var(--r-pill);
  background:linear-gradient(115deg,var(--g1),var(--g2),var(--g3),var(--g1));background-size:300% 100%;animation:flow 7s ease-in-out infinite;box-shadow:0 6px 18px var(--gs)}
.statuspill .dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:0 0 auto;animation:beacon 2.2s ease-out infinite}
.statuspill.ok{--g1:#34C759;--g2:#30D0A0;--g3:#1DB954;--gs:rgba(52,199,89,.30)}
.statuspill.busy{--g1:var(--busy);--g2:var(--busy2);--g3:var(--busy3);--gs:color-mix(in srgb,var(--busy) 30%,transparent)}
.statuspill.off{--g1:#FF3B30;--g2:#FF6B6B;--g3:#E0245E;--gs:rgba(255,59,48,.30)}
.statuspill.wait{--g1:#8E8E93;--g2:#AEAEB2;--g3:#7C7C80;--gs:rgba(0,0,0,.10)}
@keyframes flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);padding:20px 18px 16px;transition:box-shadow .35s}
.card.attn{box-shadow:0 0 0 2px var(--orange),var(--shadow)}
.card.stop{box-shadow:0 0 0 2px var(--red),var(--shadow)}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card h2{font-family:var(--font-title);font-size:21px;line-height:26px;font-weight:600;margin:0;letter-spacing:.005em}
.desc{margin:6px 0 0;color:var(--label2);font-size:15px;line-height:21px}
.bullets{list-style:none;margin:8px 0 0;padding:0}
.bullets li{position:relative;padding-left:16px;font-size:15px;line-height:21px;color:var(--label2);margin:3px 0}
.bullets li::before{content:'•';position:absolute;left:3px;color:var(--label3)}

/* chip: one or two words of state, top right of a card */
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);background:var(--fill2);color:var(--label2);white-space:nowrap;margin-top:1px}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.working{color:var(--tint);background:var(--tintsoft)}
.chip.working i{animation:blink 1.4s ease-in-out infinite}
.chip.queued{color:var(--orange);background:var(--orangesoft)}
.chip.needs{color:#fff;background:var(--orange)}
.chip.done{color:var(--green);background:var(--greensoft)}
.chip.info{color:var(--blue);background:var(--bluesoft)}
.chip.fail{color:var(--red);background:var(--redsoft)}
.chip.block{color:#fff;background:var(--red)}
.chip.needs i,.chip.block i{background:#fff}
@keyframes blink{50%{opacity:.3}}

/* ---------- buttons ---------- */
/* big button: the one main action of a card, full width */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border-radius:var(--r-btn);font-size:17px;font-weight:600;margin-top:16px;text-align:center;text-decoration:none;transition:transform .12s,opacity .2s,background .2s}
.btn.primary{background:var(--tint);color:#fff}
.btn.primary:active{background:var(--tint2)}
.btn.tinted{background:var(--tintsoft);color:var(--tint)}
.btn.plain{background:var(--fill2);color:var(--label)}
.btn.danger{background:var(--redsoft);color:var(--red)}
.btn.fit{width:auto;padding:0 22px}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;transform:none}
.btn svg{width:20px;height:20px}

/* small pill button: second-rank actions in a row */
.sbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--r-pill);background:var(--fill2);color:var(--label);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;transition:background .2s,color .2s,transform .12s}
.sbtn:hover{background:var(--fill)}
.sbtn:active{transform:scale(.97)}
.sbtn:disabled{opacity:.4;transform:none}
.sbtn.tint{background:var(--tint);color:#fff}
.sbtn.soft{background:var(--tintsoft);color:var(--tint)}
.sbtn.good{background:var(--greensoft);color:var(--green)}
.sbtn.bad{background:var(--redsoft);color:var(--red)}
.sbtn.sure{background:var(--red);color:#fff}
.sbtn svg{width:15px;height:15px}

/* outline button: an optional extra, like "Add a note". Its page icon writes itself on hover. */
.obtn{display:flex;width:fit-content;align-items:center;gap:9px;height:40px;padding:0 16px 0 13px;margin-top:16px;border-radius:var(--r-field);border:1px solid var(--tintline);color:var(--tint);font-size:15px;font-weight:500;text-decoration:none;transition:background .2s,border-color .2s}
.obtn:hover{background:var(--tintsoft);border-color:var(--tint)}
.obtn svg{width:20px;height:20px;flex:0 0 auto}
.obtn .w{stroke-dasharray:1;stroke-dashoffset:0}
.obtn:hover .w{animation:write 2.4s cubic-bezier(.45,.05,.3,1) infinite both}
.obtn:hover .w2{animation-delay:.35s}
.obtn:hover .w3{animation-delay:.7s}
@keyframes write{0%{stroke-dashoffset:1}28%{stroke-dashoffset:0}80%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:1}}

/* text links, and the row that holds them under a card's button */
.links{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;min-height:32px}
.link{display:inline-flex;align-items:center;gap:5px;color:var(--tint);font-size:15px;font-weight:500;padding:6px 0;text-decoration:none}
.link.red{color:var(--red)}
.link.gray{color:var(--label2)}
.link svg{width:15px;height:15px}

/* round check, like Reminders: mark one thing done. It turns green, and Undo lives in the toast. */
.donebtn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 6px;border-radius:var(--r-pill);color:var(--label2);font-size:13px;font-weight:500;white-space:nowrap;transition:background .2s,color .2s}
.donebtn:hover{background:var(--fill2);color:var(--label)}
.donebtn .ring{position:relative;flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1.6px solid var(--label3);transition:background .22s,border-color .22s,transform .25s var(--ease)}
.donebtn .ring svg{position:absolute;inset:0;margin:auto;width:12px;height:12px;stroke:#fff;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s .08s ease}
.donebtn:hover .ring,.donebtn.nudge .ring{border-color:var(--green)}
.donebtn.nudge{background:var(--greensoft);color:var(--green)}
.donebtn:active .ring{transform:scale(.88)}
.donebtn.checked{color:var(--green);background:none}
.donebtn.checked .ring{background:var(--green);border-color:var(--green)}
.donebtn.checked .ring svg{stroke-dashoffset:0}

/* ---------- inputs ---------- */
.field{display:block;margin-top:14px}
.field > span{display:block;font-size:13px;color:var(--label2);margin:0 4px 6px}
.input{display:block;width:100%;border:0;border-radius:var(--r-field);background:var(--fill);color:var(--label);font:inherit;font-size:17px;padding:13px 14px;outline:none;-webkit-appearance:none;appearance:none}
textarea.input{min-height:92px;resize:vertical;line-height:22px}
.input:focus{box-shadow:0 0 0 3px var(--tintsoft)}
.input::placeholder{color:var(--label3)}
select.input{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}

/* switch row: a real checkbox under an iOS switch */
.toggle{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px 14px;border-radius:var(--r-btn);background:var(--fill2);cursor:pointer;position:relative}
.toggle .tt{flex:1 1 auto;min-width:0}
.toggle .tt b{display:block;font-size:15px;font-weight:600;line-height:20px}
.toggle .tt span{display:block;font-size:13px;line-height:18px;color:var(--label2)}
.toggle input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sw{flex:0 0 auto;position:relative;width:51px;height:31px;border-radius:999px;background:var(--fill);transition:background .25s}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .28s var(--ease)}
.toggle input:checked + .sw{background:var(--green)}
.toggle input:checked + .sw::after{transform:translateX(20px)}
.toggle input:focus-visible + .sw{box-shadow:0 0 0 3px var(--tintsoft)}

/* segmented control: two to four views of the same list */
.seg{display:flex;padding:2px;border-radius:9px;background:var(--fill)}
.seg button{flex:1 1 0;min-width:0;height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:500;white-space:nowrap;transition:background .2s,box-shadow .2s}
.seg button.on{background:var(--segon);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
.seg .n{color:var(--label2);font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- working, waiting, loading ---------- */
/* long work: a turning spark, a friendly verb that shimmers, the step in plain words, the clock.
   Called .job, not .working, because .chip.working is a chip state. */
.job{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 16px;border-radius:calc(var(--r-box) + 2px);background:var(--fill2)}
.spark{flex:0 0 auto;width:34px;height:34px;color:var(--tint);animation:spin 7s linear infinite}
.spark svg{display:block;width:100%;height:100%;animation:breathe 1.8s ease-in-out infinite}
.qicon{flex:0 0 auto;width:30px;height:30px;color:var(--orange)}
.qicon svg{display:block;width:100%;height:100%}
.wtext{flex:1 1 auto;min-width:0}
.verb{display:inline-block;font-size:17px;font-weight:600;line-height:22px}
.shimmer{background:linear-gradient(100deg,var(--label) 0%,var(--label) 40%,var(--tint) 50%,var(--label) 60%,var(--label) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 2.6s linear infinite}
.nowstep{font-size:15px;line-height:20px;color:var(--label2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.elapsed{flex:0 0 auto;align-self:flex-start;margin-top:2px;font-size:13px;color:var(--label3);font-variant-numeric:tabular-nums}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(.8)}50%{transform:scale(1)}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.fadein{animation:fadein .4s ease}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* checklist of steps: done ones get a green tick, the live one a turning ring */
.steps{list-style:none;margin:12px 0 0;padding:0 4px}
.steps li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:20px;padding:5px 0;color:var(--label2)}
.steps .ic{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center}
.steps .ic svg{width:11px;height:11px}
.steps li.done .ic{background:var(--greensoft);color:var(--green)}
.steps li.now{color:var(--label);font-weight:500}
.steps li.now .ic{border:2px solid var(--tintsoft);border-top-color:var(--tint);animation:spin .9s linear infinite}
.steps li.more{color:var(--label3);font-size:13px;padding-left:32px}

/* short waits: a small gray spinner, centred. Content-shaped waits: skeleton bars with a soft shine. */
.loading{display:grid;place-items:center;padding:70px 0}
.spin{display:inline-block;width:22px;height:22px;border-radius:50%;border:2.5px solid var(--fill);border-top-color:var(--label2);animation:spin .9s linear infinite}
.skel{position:relative;display:block;height:14px;border-radius:7px;background:var(--fill2);overflow:hidden}
.skel + .skel{margin-top:10px}
.skel.title{height:22px;width:55%;border-radius:8px}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,var(--fill) 50%,transparent 75%);background-size:220% 100%;animation:shine 1.3s linear infinite}
@keyframes shine{from{background-position:130% 0}to{background-position:-30% 0}}

/* ---------- results and messages ---------- */
.result{display:flex;align-items:center;gap:12px;margin-top:18px}
.big{flex:0 0 auto;width:30px;height:30px}
.big svg{display:block;width:100%;height:100%}
.result b{display:block;font-size:17px;font-weight:600;line-height:22px}
.result .meta{display:block;font-size:13px;color:var(--label2);line-height:18px}
.good{color:var(--green)} .bad{color:var(--red)} .meh{color:var(--gray)}

/* a summary in an inset box. Long ones clip with a fade and a "Show more" link. */
.summary{margin-top:14px;padding:14px 16px;border-radius:var(--r-box);background:var(--sum);font-size:15px;line-height:21px;position:relative;overflow-wrap:anywhere}
.summary.clip{max-height:10.5em;overflow:hidden}
.summary.clip::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3.4em;background:linear-gradient(rgba(0,0,0,0),var(--sum));border-radius:0 0 var(--r-box) var(--r-box)}
.md p{margin:0 0 8px}.md p:last-child{margin-bottom:0}
.md ul,.md ol{margin:0 0 8px;padding-left:20px}.md li{margin:3px 0}
.md h4{font-size:15px;font-weight:600;margin:12px 0 4px}.md h4:first-child{margin-top:0}
.md code{font:13px var(--mono);background:var(--fill);padding:1px 5px;border-radius:5px;word-break:break-all}
.md pre{white-space:pre-wrap;font:13px/1.45 var(--mono);background:var(--fill);padding:10px 12px;border-radius:10px;margin:0 0 8px}

/* something is wrong (red), or worth knowing (orange) */
.alert{margin-top:16px;padding:16px;border-radius:var(--r-box);background:var(--redsoft)}
.alert .ah{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;color:var(--red)}
.alert .ah svg{width:24px;height:24px;flex:0 0 auto}
.alert p{margin:8px 0 0;font-size:15px;line-height:21px}
.alert p.todo{color:var(--label2)}
.alert.soft{padding:12px 14px}
.alert.soft p{margin:0}
.heads{margin-top:12px;padding:12px 14px;border-radius:var(--r-btn);background:var(--orangesoft);font-size:15px;line-height:21px}
.fine{font-size:13px;line-height:18px;color:var(--label3);margin:10px 4px 0;text-align:center}

/* a question: tap one answer, or type your own */
.ask{margin-top:16px}
.ask-head{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--orange)}
.ask-head svg{width:20px;height:20px;flex:0 0 auto}
.qtag{display:inline-block;font-size:12px;font-weight:600;color:var(--label2);background:var(--fill);border-radius:6px;padding:2px 8px;margin-top:12px}
.qtext{margin:8px 0 0;font-size:17px;line-height:23px;white-space:pre-wrap;overflow-wrap:anywhere}
.opts{margin-top:14px;border-radius:var(--r-btn);background:var(--fill2);overflow:hidden}
.opt{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border-top:.5px solid var(--sep);transition:background .15s}
.opt:first-child{border-top:0}
.opt:active{background:var(--fill)}
.opt .ot{flex:1 1 auto;min-width:0}
.opt .ol{display:block;font-size:17px;font-weight:500}
.opt .od{display:block;font-size:13px;line-height:18px;color:var(--label2);margin-top:2px}
.opt .ck{flex:0 0 auto;width:22px;height:22px;color:var(--tint);opacity:0;transition:opacity .15s}
.opt .ck svg{display:block;width:100%;height:100%}
.opt.sel .ck{opacity:1}
.opt.sel .ol{color:var(--tint)}

/* empty list: an icon, one bold line, one line on how to start */
.empty{padding:44px 18px;text-align:center;color:var(--label2);font-size:15px;line-height:21px}
.empty b{display:block;margin:10px 0 4px;color:var(--label);font-size:17px;font-weight:600}
.empty .eicon{width:38px;height:38px;margin:0 auto;color:var(--label3)}
.empty .eicon svg{display:block;width:100%;height:100%}
kbd{font:600 12px var(--font);background:var(--fill);border-radius:5px;padding:1px 6px}

/* ---------- lists, like iOS Settings ---------- */
.section{margin-top:36px}
.stitle{font-family:var(--font-title);font-size:22px;line-height:28px;font-weight:700;margin:0 4px 2px}
.ssub{font-size:15px;line-height:20px;color:var(--label2);margin:0 4px}
.ghead{font-size:13px;font-weight:600;color:var(--label2);text-transform:uppercase;letter-spacing:.03em;margin:20px 16px 7px}
.group{background:var(--card);border-radius:var(--r-box);box-shadow:var(--shadow);overflow:hidden}
.group.icons{--inset:52px}
.cell{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px 12px 16px;text-align:left;color:inherit;text-decoration:none}
.cellbox + .cellbox > .cell::before,.cell + .cell::before{content:'';position:absolute;left:var(--inset,16px);right:0;top:0;border-top:.5px solid var(--sep)}
.cic{flex:0 0 auto;width:24px;height:24px}
.cic svg{display:block;width:100%;height:100%}
.cmain{flex:1 1 auto;min-width:0}
.cname{display:block;font-size:17px;font-weight:500;line-height:22px}
.cline{display:block;font-size:13px;line-height:18px;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cright{flex:0 0 auto;text-align:right}
.ctime{display:block;font-size:15px;line-height:20px;color:var(--label2);font-variant-numeric:tabular-nums}
.csub{display:block;font-size:13px;line-height:18px;color:var(--label3)}
.chev{flex:0 0 auto;width:8px;height:14px;color:var(--label3);transition:transform .25s var(--ease)}
.chev svg{display:block;width:100%;height:100%}
.cellbox.open .chev{transform:rotate(90deg)}
.cdetail{padding:0 16px 16px var(--inset,16px)}
.cdetail .result{margin-top:4px}
.gtable{width:100%;border-collapse:collapse}
.gtable td{padding:13px 16px;font-size:15px;line-height:20px;border-top:.5px solid var(--sep)}
.gtable tr:first-child td{border-top:0}
.gtable td:first-child{font-weight:500}
.gtable td:last-child{text-align:right;color:var(--label2);font-variant-numeric:tabular-nums}

/* raw lines for the builder only, always behind a "Technical log" link */
.tech{margin-top:8px;max-height:340px;overflow:auto;border-radius:var(--r-field);background:var(--fill2);padding:10px 12px;font:12px/1.5 var(--mono);color:var(--label2);white-space:pre-wrap;overflow-wrap:anywhere}
.ptitle{font-size:13px;font-weight:600;color:var(--label2);text-transform:uppercase;letter-spacing:.03em;margin:8px 4px 4px}

/* ---------- toast: a short message at the bottom, with Undo when it can be undone ---------- */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);transform:translate(-50%,16px);opacity:0;transition:opacity .3s,transform .35s var(--ease);background:var(--smoke);color:#fff;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);padding:12px 18px;border-radius:var(--r-btn);font-size:15px;width:max-content;max-width:88vw;z-index:10;pointer-events:none;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.act{display:flex;align-items:center;gap:18px;text-align:left}
.toast.on.act{pointer-events:auto}
.toast .tbtn{flex:0 0 auto;color:var(--tintglow);font-weight:600;padding:4px 2px}

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