/* =====================================================================
   public/app/setup.css: Setup, one screen of nine tasks, calmer (the owner's choice, 14 October 2026; calmer 21 October)

   No cards. A computer: the tasks down the left as a plain list (each task's own small icon, its name, its count; the
   "UNLOOK is answering" switch once above them), the open task on the right as one quiet list. A group is space and a
   small grey label; a setting is one line (its name, its value on the right, what opens it); its editor opens under the
   line with Cancel and Save (lime only on Save); help sits behind a small "?"; a long list is one line that folds open;
   a save says "Saved" in the line for two seconds. A phone: the list of tasks, and a task opens on its own screen with a
   way back. Lines are 15px on a computer and 16px on a phone, fields 16px so a phone doesn't zoom, help 14px; bold only
   on the task's title; switches are not lime. The forms inside are the existing ones (setup.js, calm.js).
   Every colour and size is a token. Hover only where a pointer hovers.
   ===================================================================== */

/* the old tab bars stay in the page for the code that reads them, never shown */
#info-tabs,#set-tabs,#rc-tabs{display:none!important}
section[data-screen="settings"]>.form-wrap{display:none}
body:has(.su) #page-sub{display:none}

.su{--cs-fs:15px;--cs-row:56px;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:48px;max-width:1000px;align-items:start}

/* ---------- the menu: a plain list on the page, no card; each task keeps its small icon and its count ---------- */
.su-nav{position:sticky;top:16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.su-menu{display:flex;flex-direction:column;gap:2px;min-width:0}
.su-live{display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--hair)}
.su-live-t{flex:1;min-width:0;font-size:var(--cs-fs);color:var(--ink);white-space:nowrap}
.su-live .su-long{display:none}
.su-live .asg{color:var(--ok-ink)}
.su-live .asg[data-s="off"]{color:var(--ink-3)}
.su-live .asg[data-s="need"]{color:var(--you-dot)}
.su-live .cs-q{margin-right:2px}
.su-live .cs-q::after{inset:-12px -8px} /* beside the on/off switch: 36 wide, so its press area meets the switch's instead of covering it */
/* the switch: one ink for "on" (lime is for Save), a little bigger to hit */
.su .t-toggle{width:40px;height:24px;--toggle-travel:16px}
.su .t-toggle .t-toggle-thumb{width:20px;height:20px}
.su .t-toggle.accent[data-on="true"],.su .t-toggle[data-on="true"]{background:var(--strong)}
.su .t-toggle[data-on="true"] .t-toggle-thumb{background:var(--on-strong)}
.su-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.su-g{margin:18px 10px 6px;font-size:var(--fs-sm);font-weight:500;color:var(--ink-3)}
.su-menu>.su-g:first-child{margin-top:8px}
.su-item{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;padding:0 10px;border-radius:var(--r-btn);font-size:var(--cs-fs);color:var(--ink-2);text-decoration:none;transition:background-color 150ms ease-out,color 150ms ease-out}
.su-ic{display:grid;place-items:center;flex:none;width:18px;height:18px;color:var(--ink-3)}
.su-ic svg.i{width:16px;height:16px}
.su-tx{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-n{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--you-bg-strong);color:var(--you-ink);font-size:var(--fs-meta);font-weight:500;line-height:22px;text-align:center;font-variant-numeric:tabular-nums}
.su-item>svg.i{display:none;width:16px;height:16px;margin-left:auto;color:var(--ink-3)}
.su-n+svg.i{margin-left:8px}
@media (hover:hover){.su-item:hover{background:var(--row-hover);color:var(--ink)}.su-item:hover .su-ic{color:var(--ink-2)}}
.su-item[aria-current="page"]{background:var(--row-hover);color:var(--ink)} /* one state: chosen = the hover tint (no lime bar) */
.su-item[aria-current="page"] .su-ic{color:var(--ink)}
.su-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* ---------- the open task ---------- */
.su-main{display:flex;flex-direction:column;min-width:0;max-width:640px}
.su-main>#info-form,.su-main>#settings-body{display:contents} /* their sections line up in the column; their own code still listens on them */
.su-back{display:none;order:-4}
.su-h{order:-3;display:flex;align-items:flex-start;gap:16px}
.su-h-t{flex:1;min-width:0}
.su-h h2{margin:0;font:600 var(--fs-figure)/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.su-h p{margin:6px 0 0;font-size:var(--cs-fs);line-height:1.45;color:var(--ink-3)}
.su-h .btn-sub{margin:0}
.su-try{order:-2}
.su-foot{order:99;display:none}
.su-foot .btn-sub{margin-top:24px}
/* where each group sits in its task (the page draws them in the order they were built) */
#s-basics{order:1}#s-tone{order:2}#su-visits{order:3}
#s-faq{order:1}#g-msg{order:2}#su-rules{order:3}#s-web{order:4}
#s-services{order:1}#s-jobq{order:2}
#s-hours{order:1}#g-book{order:2}
#g-site{order:1}#g-look{order:2}
#g-phone{order:1}#g-forward{order:2}#g-urgent{order:3}#g-lines{order:4}#g-demos{order:5}
#g-alerts{order:1}
#su-inv{order:1}
#g-plan{order:1}#g-limits{order:2}#g-theme{order:3}#g-account{order:4}

/* a text action (Update from website, Edit hours, Email UNLOOK, Copy, Send again, Remove) is a real secondary button: .btn-sub (app.css), Solid Glass's own */
.cs-tb svg.i{width:16px;height:16px}
.cs-tb[disabled]{opacity:.5}

/* Try it: one field, no frame around it */
.su-try .try{max-width:none;margin:24px 0 0;border:0;border-radius:0;background:none;box-shadow:none;padding:0}
.su-try .try-f{display:flex;align-items:center;gap:8px;margin:0;padding:4px 4px 4px 14px;border:1px solid var(--hair-2);border-radius:var(--r-panel);background:var(--tint-1)}
.su-try .try-f:focus-within{border-color:var(--focus)}
.su-try .try-l{display:flex;flex:none;color:var(--ink-3)}
.su-try .try-l svg.i{width:16px;height:16px}
.su-try .try-f .input{flex:1;min-width:0;height:40px;padding:0;border:0;background:none;box-shadow:none;color:var(--ink);font:400 var(--cs-fs) var(--sans);outline:0}
.su-try .try-f .input::placeholder{color:var(--ink-3)}
.su-try .try-f .btn{height:36px;border-radius:var(--r-btn);background:var(--btn-2);border-color:transparent;box-shadow:none;color:var(--ink-2);font-size:var(--fs-body)}
.su-try .try-log{margin-top:12px}

/* a group: space and a small label instead of a card */
.su #g-msg{grid-template-columns:none}
.su #g-msg>.cs-sec-h{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
.su .fsec,.su .kc{display:block;margin:36px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.su .fsec[hidden],.su .kc[hidden]{display:none}
.su .cs-sec{margin-top:36px}
.su #bk-body>.cs-sec:first-child{margin-top:0}
.su-main>.cs-sec:first-of-type,.su-main>#info-form>.cs-sec:first-child{margin-top:28px}
.cs-sec-h{display:flex;align-items:center;gap:8px;min-height:32px;margin:0 0 4px}
.cs-sec-h h3{margin:0;font-size:var(--fs-body);font-weight:500;color:var(--ink-3)}
.cs-sec-h .cs-sp{flex:1}

.cs-sec-st{min-width:0;font-size:var(--fs-body)}
.cs-list{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.cs-it{border-bottom:1px solid var(--hair)}
.cs-sublabel{margin:20px 0 0;font-size:var(--fs-body);font-weight:500;color:var(--ink-3)}
.su-x.cs-sec{margin-top:36px}

/* one setting = one line: its name, its value on the right, then what opens it (a chevron, a switch, a choice) */
.cs-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:16px;width:100%;min-height:var(--cs-row);padding:8px 0;border:0;background:none;color:inherit;font:inherit;text-align:left}
button.cs-row{cursor:pointer;margin:0 -10px;padding:8px 10px;width:calc(100% + 20px);border-radius:var(--r-btn);transition:background-color 150ms ease-out}
@media (hover:hover){button.cs-row:hover{background:var(--row-hover)}}
button.cs-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.cs-l{display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--cs-fs);font-weight:400;color:var(--ink)}
.cs-l-big{font-size:17px}
.cs-tag{font-size:var(--fs-meta);color:var(--ink-3)}
.cs-v{min-width:0;font-size:var(--cs-fs);color:var(--ink-2);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cs-v.none{color:var(--ink-3)}
.cs-v .cs-st{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.cs-v .cs-st-t{font-size:var(--cs-fs)}
.cs-v .bubble-prev{margin-right:10px}
.cs-chev{width:16px;height:16px;color:var(--ink-3);transition:transform 200ms cubic-bezier(.22,1,.36,1)}
[aria-expanded="true"]>.cs-chev,.t-acc[data-open="true"]>.cs-row>.cs-chev{transform:rotate(180deg)}
.cs-row>.t-toggle{justify-self:end}
.cs-sub{grid-column:1/-1;margin:2px 0 0;font-size:var(--fs-body);line-height:1.45;color:var(--ink-3);text-align:left}
.cs-sub-edit{margin:-4px 0 10px}
.cs-sub .btn-sub{margin:0 0 0 8px;height:28px;padding:0 8px;font-size:var(--fs-body)}
.cs-row-static>.cs-v:empty{display:none}

/* a choice that saves itself (the real booking rules do): words and a small chevron, no box */
.cs-sel{position:relative;display:inline-flex;align-items:center;justify-self:end}
.cs-sel select{appearance:none;-webkit-appearance:none;min-height:40px;padding:0 24px 0 10px;margin-right:-6px;border:0;border-radius:var(--r-btn);background:none;color:var(--ink-2);font:400 var(--cs-fs) var(--sans);text-align:right;text-align-last:right;cursor:pointer}
.cs-sel select:focus-visible{outline:2px solid var(--focus);outline-offset:0}
@media (hover:hover){.cs-sel select:hover{background:var(--row-hover);color:var(--ink)}}
.cs-sel svg.i{position:absolute;right:0;width:14px;height:14px;color:var(--ink-3);pointer-events:none}
.cs-sel select option{color:initial}
.cs-row-sel>.cs-v:empty{display:none}

/* help behind a small "?" (a toggletip: pressed, not hovered, so it works on a phone) */
.cs-q{position:relative;display:inline-grid;place-items:center;flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:none;box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--ink-3);font:500 12px/1 var(--sans);cursor:pointer}
.cs-q::after{content:"";position:absolute;inset:-12px}
.cs-q[aria-expanded="true"]{background:var(--tint-1);color:var(--ink)}
@media (hover:hover){.cs-q:hover{color:var(--ink)}}
.cs-q:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cs-help{margin:-4px 0 0;padding:0 0 12px;max-width:56ch;font-size:var(--fs-body);line-height:1.5;color:var(--ink-3)}
.cs-sec>.cs-help,.su-x>.cs-help{margin:2px 0 10px;padding:0}
.su-nav>.cs-help{margin:-6px 10px 10px;padding:0}
.cs-help:not([hidden]),.cs-ed.is-fresh,.cs-fold:not([hidden]){animation:cs-open 200ms cubic-bezier(.22,1,.36,1)}
@keyframes cs-open{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}

/* the editor that opens under its line: the fields, their help, then Cancel and Save */
.cs-ed,.srow-edit.cs-ed{display:flex;flex-direction:column;gap:14px;padding:4px 0 18px}
.su .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.su .field>label,.su .field-row label,.cs-fl,.su .lbl{font-size:var(--fs-body);font-weight:500;color:var(--ink-2)}
h4.cs-fl{margin:6px 0 0}
.su .help{margin:0;font-size:var(--fs-body);line-height:1.45;color:var(--ink-3)}
.su .field .msgs{display:flex;flex-direction:column;gap:2px}
.su .field .msgs .help:empty{display:none}
.su .field-row .count{font-size:var(--fs-sm)}
.su .input{height:44px;padding:0 12px;border:1px solid var(--hair-2);border-radius:var(--r-btn);background-color:var(--tint-1);font-size:16px;color:var(--ink)} /* the colour only: a select keeps its drawn arrow */
.su textarea.input{height:auto;padding:10px 12px;line-height:1.45}
.su select.input{padding:0 30px 0 10px;width:auto}
.su .input:focus{border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus)}
.su .input:focus-visible{outline:0}
.cs-2{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.cs-between{display:flex;align-items:center;gap:8px}
/* Cancel, Save: compact (34px on a computer, 44px on a phone); Save is the only lime on the page */
.cs-acts{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.cs-acts .cs-note{margin:0 auto 0 0;font-size:var(--fs-sm);line-height:1.4;color:var(--ink-3);max-width:40ch}
.cs-acts .btn,.cs-acts .btn-sub{min-height:34px;height:auto;padding:6px 14px;border-radius:var(--r-btn);font-size:var(--fs-sm);font-weight:500}
.cs-acts .btn-primary{background:var(--lime);border-color:transparent;box-shadow:var(--edge-primary),var(--glow-btn);color:var(--night)}
@media (hover:hover){.cs-acts .btn-primary:hover{background:var(--lime-hover);color:var(--night)}}
.su .t-error-msg.urg-err{margin:0;font-size:var(--fs-body);color:var(--err-ink);opacity:1;visibility:visible}
/* the tone choices keep the dashboard's own buttons, only quieter */
.su .tone{display:grid;gap:6px}
.su .tone .opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:0;border-radius:var(--r-btn);background:none;box-shadow:inset 0 0 0 1px var(--hair);text-align:left;color:var(--ink);font:400 var(--cs-fs) var(--sans);cursor:pointer}
.su .tone .opt b{font-weight:400}
.su .tone .opt span{font-size:var(--fs-body);color:var(--ink-3)}
.su .tone .opt[aria-pressed="true"]{background:var(--row-hover);box-shadow:inset 0 0 0 1px var(--line-strong)}
/* the week, inside the hours editor */
.su .presets{display:flex;flex-wrap:wrap;gap:8px}

.su .days{border:0;border-radius:0;background:none}
.su .day{display:grid;grid-template-columns:96px auto minmax(0,1fr);align-items:center;gap:12px;min-height:48px;padding:0;border-top:0;border-bottom:1px solid var(--hair);font-size:var(--cs-fs)}
.su .day:last-child{border-bottom:0}
.su .day .times{display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.su .day .times .input{height:40px;width:auto;min-width:0;padding:0 30px 0 10px;font-size:15px}

/* a fold: a summary line that opens a longer list (services, questions, forwarding codes, lengths) */
.cs-fold{padding:0 0 12px}
.cs-svc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid var(--hair);font-size:var(--cs-fs);color:var(--ink)}
.cs-svc:last-child{border-bottom:0}
.cs-svc-v{font-size:var(--cs-fs);color:var(--ink-2);text-align:right}
.cs-svc-bk{grid-template-columns:minmax(0,1fr) auto auto}
/* a narrow screen: the name gets the whole line and what is known about it sits under it, so a long name is never squeezed into half a row */
@media (max-width:720px){
  .cs-svc:not(.cs-svc-bk){grid-template-columns:minmax(0,1fr);gap:2px;padding-block:10px}
  .cs-svc-n{overflow-wrap:anywhere;line-height:1.4}
  .cs-svc:not(.cs-svc-bk) .cs-svc-v{text-align:start;font-size:var(--fs-sm);color:var(--ink-3)}
}
.kq{padding:10px 0;border-bottom:1px solid var(--hair)}
.kq:last-child{border-bottom:0}
.kq b{display:block;font-size:var(--cs-fs);font-weight:400;color:var(--ink)}
.kq p{margin:2px 0 0;font-size:var(--fs-body);line-height:1.45;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kq .kq-none{color:var(--you-ink)}
.kc-text{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--ink-3);white-space:pre-line}
.kc-none{margin:0;font-size:var(--fs-body);color:var(--ink-3)}
.kc-note{margin:8px 0 0;font-size:var(--fs-body);line-height:1.45;color:var(--ink-3)}
.kc-yes{margin-left:6px;height:28px;font-size:var(--fs-body)}
/* 28 Oct: a row that wraps, so on a phone a long carrier name keeps its line and the code with Copy drops below it
   (the grid squeezed "AT&T, T-Mobile and most others" to one word a line beside the code) */
.cs-code{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--hair)}
.cs-code:last-of-type{border-bottom:0}
.cs-code b{flex:1 1 14ch;min-width:0;font-weight:400;font-size:var(--cs-fs);color:var(--ink)}
.cs-code code{font:500 15px/1 var(--mono);color:var(--ink);letter-spacing:.02em}
.cs-code p{flex-basis:100%;margin:0;font-size:var(--fs-body);color:var(--ink-3)}
.cs-copy{display:inline-flex;align-items:center;gap:10px;margin-left:auto}

.su .code{display:flex;align-items:center;gap:12px;padding:12px 0 0}
.su .code code{flex:1;min-width:0;padding:10px 12px;border-radius:var(--r-btn);background:var(--tint-1);font:400 13px/1.5 var(--mono);color:var(--ink-2);overflow-wrap:anywhere;white-space:pre-wrap}
.cs-small{margin:10px 0 0;font-size:var(--fs-body);line-height:1.5;color:var(--ink-3);max-width:60ch}
.cs-small-act{margin:6px 0 0}


/* a status line (glyph + a few words), at the top of a group or in a list */
.cs-stat{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-height:var(--cs-row);padding:8px 0;border-bottom:1px solid var(--hair)}
.cs-stat .cs-st{flex:1 1 260px}
.cs-stat .btn-sub{margin-left:auto}
.cs-st{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:center;margin:0;font-size:var(--cs-fs);line-height:1.3;font-weight:400;color:var(--ink-2)}
.cs-st-x{grid-column:2;font-size:var(--fs-body);line-height:1.45;color:var(--ink-3)}
.cs-st-work,.cs-st-same,.cs-st-off{color:var(--ink-3)}
.cs-st-wait,.cs-st-need{color:var(--you-ink)}
.cs-st-wait .asg,.cs-st-need .asg{color:var(--you-dot)}
.cs-st-done,.cs-st-live{color:var(--ok-ink)}
.cs-st-fail{color:var(--err-ink)}
/* the two lights, still and lit: answering (the receptionist, a phone line); "still": UNLOOK has to do its part, no loop (it can take days) */
.asg.s20{width:20px;height:20px}
.asg[data-s="live"] .asg-d1{transform:translate(4.5px,8px)}
.asg[data-s="live"] .asg-d2{transform:translate(11.5px,8px)}
.asg.still .asg-d{animation:none!important}
.asg.still[data-s="work"] .asg-d2{opacity:.4}

/* the page's other small parts, drawn quietly in a line */
.su .bubble-prev{display:inline-block;max-width:100%;padding:6px 12px;background:var(--brand);color:#fff;font-size:var(--fs-sm)}
.cs-btns{display:inline-flex;align-items:center;gap:4px;justify-self:end}

.cs-row-pic{grid-template-columns:auto minmax(0,1fr) auto}
.su .pic-prev{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--tint-1);font-size:var(--fs-sm);font-weight:500}
.su .pic-prev img{width:100%;height:100%;object-fit:cover}
.cs-row-corners{grid-template-columns:auto minmax(0,1fr) 120px}
.cs-row-corners input[type=range]{width:120px;accent-color:var(--ink)}
.su .plan-adds{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:4px}
.su .plan-adds li{display:flex;gap:8px;font-size:var(--fs-body);color:var(--ink-3)}
.su .plan-adds svg.i{width:14px;height:14px;margin-top:3px;color:var(--ok-ink)}
.su .inv-days{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;border:0}
.su .inv-days legend{margin-bottom:6px;font-size:var(--fs-body);font-weight:500;color:var(--ink-2)}
.su .inv-days .input{width:64px}
.su .sc{padding:8px 0}
.su .sc .btn{height:32px;border-radius:var(--r-btn);font-size:var(--fs-body);font-weight:500}
.su .sc-msg{margin:8px 0 0;font-size:var(--fs-body);color:var(--ink-3)}
.su .sc-msg.ok{color:var(--ok-ink)}
.su .btn-sm{height:32px;border-radius:var(--r-btn);font-size:var(--fs-body);font-weight:500}
.cs-row-text .cs-l{white-space:normal}

/* careful: an action that ends something (disconnect Google Calendar, remove a phone line) says so in red, and asks before it acts (app.js).
   Cancel plan is plain grey words that turn red on hover (below, .pb-cancel); its confirmation is where it asks */
.cs-stat:has([data-line-remove]) .cs-tb,.cs-it:has([data-conn="disconnect"]) .cs-tb,.cs-it:has([data-gcal-off]) .cs-tb[data-gcal-off],.cs-stat .cs-tb[data-gcal-off]{color:var(--err-ink)}

/* ---------- a phone: the list, then one task on its own screen ---------- */
@media (max-width:900px){.su{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:28px}}
@media (max-width:720px){
  .su{--cs-fs:16px;--cs-row:60px;display:block}
  .su[data-task]:not([data-task=""]) .su-nav{display:none}
  .su[data-task=""] .su-main{display:none}
  .su-nav{position:static}
  .su-live .su-long{display:inline}
  .su-live .su-short{display:none}
  .su-item{min-height:52px}
  .su-item>svg.i{display:block}
  .su-item[aria-current="page"]{background:none}
  .su-back{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;min-height:44px;margin:-10px 0 4px -6px;padding:0 6px;font-size:var(--fs-body);font-weight:500;color:var(--ink-2);text-decoration:none}
  .su-back svg.i{width:16px;height:16px}
  .su-foot:not(:empty){display:block}
  .su-h .cs-tb{display:none} /* "Update from website" is the last line of the task on a phone */
  /* name above, value under it, the control on the right (Solid Glass's "responsive" field) */
  .cs-row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .cs-row>.cs-l{grid-column:1;grid-row:1}
  .cs-row>.cs-v{grid-column:1;grid-row:2;text-align:left;white-space:normal;overflow:visible;font-size:15px}
  .cs-row>.cs-chev,.cs-row>.t-toggle,.cs-row>.cs-sel,.cs-row>.cs-btns,.cs-row>.t-tabs{grid-column:2;grid-row:1/span 2}
  .cs-row-sel>.cs-v:empty{display:none}
  .cs-v .cs-st{justify-content:flex-start}
  .cs-row-corners{grid-template-columns:minmax(0,1fr)}
  .cs-row-corners>.cs-l,.cs-row-corners>.cs-v,.cs-row-corners>input{grid-column:1;grid-row:auto}
  .cs-row-corners input[type=range]{width:100%;margin-top:6px}
  .cs-acts .btn,.cs-acts .btn-sub{min-height:var(--h-ctl);padding:6px 12px} /* 32 to see, as on a computer near enough; the edge gives the 44 */
  .cs-acts .cs-note{flex:1 1 100%;margin:0 0 4px;max-width:none}
  .cs-acts{flex-wrap:wrap}
  .cs-2{grid-template-columns:1fr}
  .su .day{grid-template-columns:84px auto minmax(0,1fr);gap:8px}
  .cs-sel select{min-height:44px}
  .cs-sec-h{min-height:36px}
  .su .fsec,.su .kc{margin-top:32px}
  .su .code{flex-direction:column;align-items:stretch}
}
@media (pointer:coarse){.su .day .times .input{height:44px}}
@media (prefers-reduced-motion:reduce){.cs-help,.cs-ed,.cs-fold{animation:none!important}.cs-chev,.su-item,button.cs-row{transition:none}}
:root[data-motion="reduce"] .cs-help,:root[data-motion="reduce"] .cs-ed,:root[data-motion="reduce"] .cs-fold{animation:none!important}
:root[data-motion="reduce"] .cs-chev{transition:none}
/* names inside the editors are plain: bold is for the task's title alone */
.su .day .dn,.su .svc-n b,.su .svc .svc-n b{font-weight:400;color:var(--ink)}
.su .svc-n .svc-m{font-weight:400}
/* lines drawn by another part of the page in the older way (the top-up rows under Plan and billing, topups.js) read as calm lines too */
.su .srow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;min-height:var(--cs-row);padding:8px 0;border-bottom:1px solid var(--hair)}
.su .srow .l{min-width:0}
.su .srow .l b{display:block;font-size:var(--cs-fs);font-weight:400;color:var(--ink)}
.su .srow .l small{display:block;margin-top:2px;font-size:var(--fs-body);line-height:1.45;color:var(--ink-3)}
.su .srow .btn-sm{height:32px}
/* ---------- Settings › Plan and billing, calmer (the owner approved the mockup, 21 Oct 2026; setup.js planBody, topups.js meters) ----------
   A status is a dot and a word: mint settled, amber needs you, coral late or stopped, grey nothing for you. Lime is never a state. Rows stay 400 and 500. */
.pb-st{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:var(--cs-fs);font-weight:400;line-height:1.3;color:var(--ink-2);white-space:nowrap}
.pb-st>i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ink-4)}
.pb-st-ok>i{background:var(--ok-ink)}
.pb-st-you>i{background:var(--you-dot)}
.pb-st-err>i{background:var(--err-solid)}
.pb-st.is-strong{font-weight:500}
.pb-st-you.is-strong{color:var(--you-ink)}
.pb-st-err.is-strong{color:var(--err-ink)}
.pb-fix{grid-column:1/-1;margin:8px 0 4px}
/* the quiet footer: Manage billing, and Cancel plan as plain words (its confirmation already says what happens) */
.pb-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 2px}
.pb-cancel{position:relative;height:32px;margin:0 -4px 0 auto;padding:0 4px;border:0;border-radius:var(--r-ctl);background:none;color:var(--ink-3);font:400 var(--fs-sm)/1 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.pb-cancel:hover{color:var(--err-ink)}}
.pb-cancel:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:720px),(pointer:coarse){.pb-cancel::after{content:"";position:absolute;inset:calc(50% - 22px) -6px}} /* 44 to press, as the buttons' invisible edge */

/* phones: room under the last line, so the floating Ask UNLOOK button never sits on a setting at the end of the page */
@media (max-width:720px){section[data-screen="settings"]{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}

/* 27 Oct 2026: the operator's Demos, "are you sure" opened inline under the demo (or under the list, for all): a quiet
   line of the list like the rest of Settings, no card, nothing bold */
.dm-ask{padding:2px 0 14px 26px;border-bottom:1px solid var(--line)}
.dm-ask p{margin:0 0 10px;font-size:var(--fs-body);line-height:1.5;color:var(--ink-2);max-width:62ch}
.dm-ask b{font-weight:500;color:var(--ink)}
.dm-acts{display:flex;flex-wrap:wrap;gap:8px}
/* 29 Oct 2026: a demo becomes a free account (the email that logs in, and how many free messages) */
.dm-free .field{margin:0 0 10px;max-width:420px}