/* U3a (3 Oct 2026): Ethan's design, design/account-ui-2026-10-03 (the frame in
   every file, PhoneSignin, LaptopSignin, Main = phone Today, LaptopToday).
   Colours, type, spacing and sizes are the design's, with every text size
   raised to at least 16 px (the site's rule; the design's 12-15 px labels are
   16 px here) and every tap at least 44 px. Fonts are the site's own files
   (site.css: Bricolage, Archivo, JetBrains Mono from /assets/fonts). Loaded
   after app.css and screens.css by /account/ and by /signin/; the other tabs
   keep app.css and screens.css (U3b and U4 redo them).
   The design's own colours beyond site.css: #8A94A8 (input edge, paused dot),
   #3B465E (menu words), #F1F3F8 (menu hover), #EEF0F5 (paused pill),
   #A9BCFF (Undo, the pencilled-in ring), #E2B800 (the needs-you dot). */

body.oa{background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
.oa a{text-decoration:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------------------------------------------------------------------------
   the frame: a phone (top bar, tabs at the bottom) first
   --------------------------------------------------------------------------- */
.oa .hd{position:sticky;top:0;z-index:10;height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;background:var(--paper);box-shadow:none}
body.oa[data-view="signin"] .hd{display:none}
.hd .brand{display:flex;align-items:center;gap:12px;min-width:0}
.hd .co-mark{display:none}
.hd .co{display:flex;flex-direction:column;min-width:0;margin:0;font:700 18px/1.15 var(--font-display);letter-spacing:-.01em;text-transform:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd .co .co-1,.hd .co .co-2{overflow:hidden;text-overflow:ellipsis}
.hd .co .co-2{font:400 16px/1.2 var(--font-body);letter-spacing:0;color:var(--muted)}
.hd .seg{display:none}
.hd .side-foot{display:flex;align-items:center;flex:none}
.hd .who{display:none}

/* the Answering pill */
.oa .hd .line-now{display:inline-flex;align-items:center;gap:8px;height:44px;margin:0;padding:0 14px;border:0;border-radius:6px;background:var(--blue-soft);color:var(--blue-deep);font:600 16px/1 var(--font-body);white-space:nowrap;cursor:pointer;box-shadow:none}
.oa .hd .line-now[hidden]{display:none}
.oa .hd .line-now::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:none}
.oa .hd .line-now.paused{background:#EEF0F5;color:#3B465E}
.oa .hd .line-now.paused::before{background:#8A94A8}

/* the tabs at the bottom (phone) */
.oa .bbar{background:#FFFFFF;box-shadow:inset 0 1px 0 var(--rule);padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
.oa .bbar .seg{display:flex;gap:0;padding:0;background:none;border-radius:0}
.oa .bbar .seg a{flex:1 1 auto;min-width:44px;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 2px;border-radius:6px;background:none;color:var(--muted);font:500 16px/1.1 var(--font-body);letter-spacing:-.01em;text-transform:none;font-stretch:100%}
.oa .bbar .seg a svg{width:22px;height:22px;stroke-width:1.6}
.oa .bbar .seg a[aria-current="page"]{color:var(--ink);font-weight:600;background:none}
.oa .bbar .seg a[aria-current="page"] svg{color:var(--blue);stroke-width:1.8}
.oa .bbar .seg a:hover{background:#F1F3F8}

/* the "Done. Undo" note */
.oa .note-undo{min-height:52px;padding:0 8px 0 18px;gap:12px;border-radius:8px;background:var(--ink);color:#FFFFFF;font:400 16px/1.35 var(--font-body);box-shadow:0 12px 32px rgba(10,22,51,.22)}
.oa .note-undo .bt.q{min-height:44px;padding:0 12px;border-radius:10px;background:transparent;color:#A9BCFF;font:600 16px/1 var(--font-body);text-decoration:none}
.oa .note-undo .bt.q:hover{color:#FFFFFF}

/* the paused note is the sentence on Today */
body.oa[data-tab="today"] [data-paused-flag]{display:none}

/* ---------------------------------------------------------------------------
   the frame on a laptop: the side menu
   --------------------------------------------------------------------------- */
@media (min-width:861px){
  body.oa[data-view="account"]{padding-left:256px}
  body.oa[data-view="account"] .hd{position:fixed;top:0;left:0;bottom:0;width:256px;height:auto;box-sizing:border-box;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:32px;padding:28px 18px 24px;background:#FFFFFF;box-shadow:inset -1px 0 0 var(--rule);overflow-y:auto}
  body.oa[data-view="account"] .hd .brand{padding:0 6px}
  body.oa[data-view="account"] .hd .co-mark{display:flex;flex:none;width:40px;height:40px;border-radius:6px;background:var(--ink);color:#FFFFFF;align-items:center;justify-content:center;font:700 19px/1 var(--font-display)}
  body.oa[data-view="account"] .hd .co{font-size:17px;line-height:1.2;white-space:normal}
  body.oa[data-view="account"] .hd .co .co-2{line-height:1.25}
  .oa .hd .seg:not([hidden]){display:flex;flex-direction:column;gap:2px;margin:0;padding:0;background:none}
  .oa .hd .seg a{display:flex;align-items:center;justify-content:flex-start;gap:12px;height:44px;min-height:44px;padding:0 12px;border-radius:6px;background:none;color:#3B465E;font:500 16px/1 var(--font-body);letter-spacing:0;text-transform:none}
  .oa .hd .seg a svg{width:20px;height:20px;stroke-width:1.6}
  .oa .hd .seg a:hover{background:#F1F3F8;color:#3B465E}
  .oa .hd .seg a[aria-current="page"]{background:var(--blue-soft);color:var(--blue-deep);font-weight:600}
  .oa .hd .seg a[aria-current="page"] svg{stroke-width:1.7}
  .oa .hd .seg .count{margin-left:auto;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;border-radius:6px;background:var(--sig);color:var(--ink);font:600 16px/24px var(--font-body);text-align:center}
  .oa .hd .seg .count[hidden]{display:none}
  .oa .hd .side-foot{margin-top:auto;flex-direction:column;align-items:stretch;gap:18px}
  .oa .hd .line-now{justify-content:flex-start;gap:10px;width:100%}
  .oa .hd .line-now::after{content:attr(data-hint);margin-left:auto;font-weight:500;opacity:.85}
  .oa .hd .who:not([hidden]){display:flex;align-items:center;gap:10px;padding:0 6px}
  .oa .hd .who .av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--blue-soft);color:var(--blue-deep);display:flex;align-items:center;justify-content:center;font:600 16px/1 var(--font-body)}
  .oa .hd .who-name{flex:1 1 auto;min-width:0;font:600 16px/1.2 var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .oa .hd .who .out{flex:none;min-height:44px;padding:0 4px;border:0;background:none;color:var(--muted);font:500 16px/1 var(--font-body);cursor:pointer}
  .oa .hd .who .out:hover{color:var(--ink)}
  body.oa[data-view="account"] main{max-width:none;margin:0;padding:48px clamp(20px,4.5vw,64px) 64px}
  body.oa[data-view="account"] #account{max-width:1120px}
  .oa .note-undo{bottom:32px;left:calc(50% + 128px);white-space:nowrap}
}
@media (max-width:860px){
  .oa .bbar{display:block}
  body.oa[data-view="account"] main{padding:12px 20px calc(var(--bb) + 32px)}
  .oa .note-undo{left:20px;right:20px;transform:none;max-width:none;justify-content:space-between;bottom:calc(var(--bb) + 16px)}
}

/* ---------------------------------------------------------------------------
   sign-in (PhoneSignin, LaptopSignin)
   --------------------------------------------------------------------------- */
#signin.view{max-width:440px;margin:0 auto;padding:40px 0;min-height:calc(100vh - 80px);min-height:calc(100dvh - 80px);display:flex;flex-direction:column;justify-content:center;gap:28px;box-sizing:border-box}
#signin .card-c.si{display:flex;flex-direction:column;gap:32px;padding:44px 40px 36px;border-radius:10px;background:#FFFFFF;box-shadow:0 0 0 1px var(--rule),0 30px 70px -40px rgba(10,22,51,.35)}
#signin .si-top{display:flex;flex-direction:column;gap:16px}
#signin .card-mark{width:48px;height:48px;border-radius:6px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;margin:0}
#signin .card-mark img{width:28px;height:28px}
#signin .si-h{margin:0;font:700 30px/1.1 var(--font-display);letter-spacing:-.035em;color:var(--ink)}
#signin .si-sub{margin:-10px 0 0;font:400 17px/1.4 var(--font-body);color:var(--muted)}
#signin .si-form{display:flex;flex-direction:column;gap:8px}
#signin .si-form label{margin:10px 0 0;font:600 16px/1.3 var(--font-body);color:var(--ink);text-transform:none;letter-spacing:0}
#signin .si-form label:first-child{margin-top:0}
#signin .si-form input{height:52px;min-height:52px;padding:0 16px;border-radius:6px;background:#FFFFFF;box-shadow:inset 0 0 0 1px #8A94A8;color:var(--ink);font:400 17px/1 var(--font-body)}
#signin .si-form input:focus{outline:2px solid var(--blue);outline-offset:1px;box-shadow:none}
#signin .si-form .say{margin-top:10px}
#signin .si-go{margin-top:16px;height:52px;border:0;border-radius:6px;background:var(--blue);color:#FFFFFF;font:600 17px/1 var(--font-body);cursor:pointer}
#signin .si-go:hover{background:var(--blue-deep)}
#signin .si-go[disabled]{opacity:.7;cursor:progress}
#signin .si-help{margin:0;font:400 16px/1.45 var(--font-body);color:var(--muted)}
#signin .si-help a,#signin .back a{color:var(--blue-deep);font-weight:600}
#signin .back{margin:0;text-align:center;font:400 16px/1 var(--font-body)}
#signin .back a{color:var(--muted);font-weight:500}
@media (max-width:560px){
  #signin.view{max-width:none;padding:24px 4px 12px;justify-content:center}
  #signin .card-c.si{padding:0;background:none;box-shadow:none;gap:36px}
  #signin .card-mark{width:52px;height:52px;border-radius:8px}
  #signin .si-form input,#signin .si-go{height:54px;min-height:54px}
}

/* ---------------------------------------------------------------------------
   Today (Main, LaptopToday)
   --------------------------------------------------------------------------- */
#tab-today{display:flex;flex-direction:column;gap:28px}
#tab-today[hidden]{display:none}
.td-head{display:flex;flex-direction:column;gap:6px}
.td-hello{margin:0;font:700 32px/1.1 var(--font-display);letter-spacing:-.035em;color:var(--ink)}
.td-hello:focus{outline:none}
.td-line{margin:0;font:400 17px/1.45 var(--font-body);color:var(--muted)}
.td-job{margin:6px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:400 16px/1.45 var(--font-body);color:var(--ink)}
.td-job[hidden]{display:none}
.td-cols{display:flex;flex-direction:column;gap:28px}
.td-cols[hidden]{display:none}
.td-side{display:contents}
.td-coming{order:3}
.td-latest{order:2}
.td-main{order:1}
.td-coming:empty{display:none}
.td-sec{display:flex;flex-direction:column;gap:10px}
.td-h{margin:0;font:600 16px/1.3 var(--font-body);color:var(--muted)}
.td-h:focus{outline:none}
.td-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.td-link{display:inline-flex;align-items:center;min-height:44px;color:var(--blue-deep);font:600 16px/1 var(--font-body)}
.td-link:hover{color:var(--ink)}
.td-card{margin:0;padding:0;list-style:none;background:#FFFFFF;border-radius:10px;box-shadow:0 0 0 1px var(--rule)}
.td-list{margin:0;padding:0;list-style:none}
.td-row{display:flex;align-items:center;gap:14px;padding:16px;margin:0}
.td-card > .td-row + .td-row{box-shadow:inset 0 1px 0 var(--rule)}
.td-row.more{padding:8px 16px}
.td-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.td-body p{margin:0;max-width:none}
.td-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:400 16px/1.3 var(--font-mono);color:var(--muted)}
.td-meta.held{color:var(--blue-deep);font-family:var(--font-body);font-weight:600}
.td-mono{font:400 16px/1.3 var(--font-mono);color:var(--muted);white-space:nowrap}
.td-chip{display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;background:var(--sig);color:var(--ink);font:600 16px/1.2 var(--font-body)}
.td-chip.job{background:var(--blue-soft);color:var(--blue-deep)}
.td-name{margin:0;padding:0;border:0;background:none;text-align:left;font:600 17px/1.3 var(--font-body);color:var(--ink)}
button.td-name{min-height:44px;cursor:pointer;align-self:flex-start}
button.td-name:hover{color:var(--blue-deep)}
.td-name.sm{font-size:16px}
.td-text{font:400 16px/1.4 var(--font-body);color:var(--muted)}
.td-why{font:400 16px/1.4 var(--font-body);color:var(--ink)}
.td-none{margin:0;padding:22px 16px;font:400 16px/1.4 var(--font-body);color:var(--muted)}
.td-acts{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.td-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-height:44px;padding:0 16px;border:0;border-radius:6px;background:var(--blue);color:#FFFFFF;font:600 16px/1 var(--font-body);white-space:nowrap;cursor:pointer;box-sizing:border-box}
.td-btn:hover{background:var(--blue-deep);color:#FFFFFF}
.td-btn.ghost{background:#FFFFFF;color:var(--ink);box-shadow:inset 0 0 0 1px #8A94A8}
.td-btn.ghost:hover{background:#F1F3F8;color:var(--ink)}
.td-btn.quiet{background:transparent;color:#3B465E;padding:0 14px}
.td-btn.quiet:hover{background:#F1F3F8;color:var(--ink)}
.td-btn[disabled]{opacity:.7;cursor:progress}
.td-first{padding:22px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.td-first .td-text{margin:0 0 6px}
.td-list .td-row{padding:12px 0;gap:12px}
.td-list .td-row + .td-row{box-shadow:inset 0 1px 0 var(--rule)}
.td-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--rule-2)}
.td-dot.on{background:#E2B800}
.td-call{flex:1 1 auto;min-width:0;min-height:44px;padding:0;border:0;background:none;text-align:left;font:400 16px/1.35 var(--font-body);color:var(--ink);cursor:pointer}
.td-call b{font-weight:600}
.td-call span{color:var(--muted)}
.td-call:hover b{color:var(--blue-deep)}
.td-day{flex:none;width:48px;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.td-dow{font:400 16px/1.1 var(--font-body);color:var(--muted)}
.td-num{font:600 24px/1.1 var(--font-display);color:var(--ink)}
.td-state{flex:none;padding:4px 10px;border-radius:6px;background:var(--blue-soft);color:var(--blue-deep);font:600 16px/1.2 var(--font-body)}
.td-state.held{background:transparent;box-shadow:inset 0 0 0 1px #A9BCFF}
#tab-today .say{margin:0}

/* a phone narrower than a row: the buttons go under the words */
@media (max-width:560px){
  .td-card > .td-row[data-hold]{flex-wrap:wrap}
  .td-card > .td-row[data-hold] .td-acts{flex:1 1 100%;justify-content:flex-start}
  .td-card > .td-row[data-urgent-call]{flex-wrap:wrap}
  .td-card > .td-row[data-urgent-call] .td-acts{flex:1 1 100%;justify-content:flex-start}
}

@media (min-width:861px){
  #tab-today{gap:40px}
  .td-head{gap:8px}
  .td-hello{font-size:48px;line-height:1.02;letter-spacing:-.04em}
  .td-line{font-size:18px}
  .td-cols{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:40px}
  .td-main{flex:1.3 1 420px;min-width:0;order:0}
  .td-side{display:flex;flex-direction:column;gap:36px;flex:1 1 340px;min-width:0;order:0}
  .td-coming,.td-latest{order:0}
  .td-sec{gap:12px}
  .td-row{gap:18px;padding:20px 22px}
  .td-body{gap:5px}
  .td-name{font-size:18px}
  .td-none{padding:28px 22px;font-size:17px}
  .td-btn{padding:0 18px}
  .td-list .td-row{padding:11px 0;gap:16px}
}

@media (prefers-reduced-motion:reduce){
  .oa .hd *,.oa .bbar *,#signin *,#tab-today *,.oa .note-undo{transition:none!important;animation:none!important}
}
#signin .si-look{margin:0;text-align:center;font:400 16px/1.5 var(--font-body);color:var(--muted)}
#signin .si-look a{color:var(--blue-deep);font-weight:600;min-height:44px}
/* without JavaScript the form cannot sign in: it is not shown, the note says why */
html:not(.js) #signin .si-form{display:none}

/* ---------------------------------------------------------------------------
   U3b (3 Oct 2026): Calls and Calendar, Ethan's design (PhoneCalls,
   LaptopCalls, PhoneCalendar, LaptopCalendar). Text at least 16 px, taps at
   least 44 px (the design's 12-15 px labels and 36-40 px pills are raised).
   The design's own colours here: #E2B800 (the needs-you dot), #8A94A8 (an
   outline), #3B465E (quiet words), #F1F3F8 (close), #EEF1F6 (the month's
   lines), #F1F3F7 and #E6E9F0 (a day off), #F5F7FF (the open day), #A9BCFF
   (the pencilled-in ring). A day off's number is #55617A, not the design's
   #6B7690, for 4.5:1.
   --------------------------------------------------------------------------- */
#tab-calls,#tab-calendar{max-width:none;margin:0}
#tab-calls{display:flex;flex-direction:column;gap:18px}
#tab-calls[hidden],#tab-calendar[hidden]{display:none}
.cl-top{display:flex;flex-direction:column;gap:18px}
#tab-calls .cl-title,#tab-calendar .kl-title{margin:0;font:700 32px/1.1 var(--font-display);letter-spacing:-.035em;color:var(--ink);text-transform:none}
.cl-title:focus,.kl-title:focus,.kl-day-h:focus,.cl-open-name:focus,.kl-coming-h:focus{outline:none}
.cl-chips{display:flex;flex-wrap:wrap;gap:8px}
.cl-chips[hidden]{display:none}
#tab-calls .cl-chips .fchip{min-height:44px;padding:0 16px;border:0;border-radius:6px;background:transparent;box-shadow:inset 0 0 0 1px #8A94A8;color:var(--ink);font:500 16px/1 var(--font-body)}
#tab-calls .cl-chips .fchip:hover{background:#F1F3F8}
#tab-calls .cl-chips .fchip[aria-pressed="true"]{background:var(--ink);color:#FFFFFF;box-shadow:none;font-weight:600}
.cl-cols{display:flex;flex-direction:column;gap:24px}
#tab-calls [data-calls]{display:flex;flex-direction:column;gap:14px}
.cl-day{margin:0 0 4px;font:600 16px/1.3 var(--font-body);color:var(--muted);text-transform:none;letter-spacing:0}
.cl-rows{margin:0;padding:0;list-style:none}
#tab-calls .cl-row{display:block;margin:0;padding:0;background:none;box-shadow:none;border:0}
#tab-calls .cl-row + .cl-row{box-shadow:inset 0 1px 0 var(--rule)}
#tab-calls .cl-row .row-main{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;margin:0;padding:14px 0;border:0;border-radius:8px;background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
#tab-calls .cl-row .row-main:hover .cl-name{color:var(--blue-deep)}
.cl-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--rule-2)}
.cl-dot.on{background:#E2B800}
.cl-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.cl-name{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 17px/1.3 var(--font-body)}
#tab-calls .cl-name .mark-urgent,#call-open .mark-urgent,#sheet .mark-urgent{padding:2px 8px;border-radius:6px;background:var(--sig);color:var(--ink);font:600 16px/1.2 var(--font-body)}
#tab-calls .cl-row .row-sub{display:block;font:400 16px/1.35 var(--font-body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-when{font:500 16px/1.35 var(--font-body);color:var(--blue-deep)}
.cl-when.done{color:var(--muted);font-weight:400}
#tab-calls .cl-row .row-end{flex:none;margin:0;font:400 16px/1.3 var(--font-mono);color:var(--muted)}
#tab-calls .cl-row.done .cl-name{font-weight:500}
.cl-empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 0}
.cl-empty-h{margin:0;font:600 18px/1.3 var(--font-body);color:var(--ink)}
.cl-empty-t{margin:0;font:400 16px/1.45 var(--font-body);color:var(--muted);max-width:52ch}
.cl-empty-t:empty{display:none}

/* the open call: the same parts in the phone's sheet and beside the list */
.cl-open[hidden]{display:none}
.cl-open-body,#sheet [data-sheet-body]{display:flex;flex-direction:column;gap:20px}
.cl-say{display:flex;flex-direction:column;gap:8px}
.cl-say p{margin:0;max-width:60ch}
.cl-took{font:400 16px/1.45 var(--font-body);color:var(--muted)}
#sheet .sentence,#call-open .sentence{margin:0;font:400 18px/1.45 var(--font-body);color:var(--ink)}
.cl-needs{font:600 17px/1.45 var(--font-body);color:var(--ink)}
.cl-call{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 18px;border-radius:8px;background:var(--blue);color:#FFFFFF;font:600 17px/1.2 var(--font-body);text-decoration:none}
.oa .cl-call{color:#FFFFFF}
.cl-call:hover{background:var(--blue-deep)}
.oa .cl-call.ghost{background:#FFFFFF;color:var(--ink);box-shadow:inset 0 0 0 1px #8A94A8}
.cl-call.ghost:hover{background:#F1F3F8}
.cl-nonum{display:flex;flex-direction:column;gap:10px;margin:0;font:400 16px/1.45 var(--font-body);color:var(--ink)}
.cl-nonum p{margin:0}
.cl-ask{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:8px;background:var(--blue-soft)}
.cl-ask p{margin:0}
.cl-ask-q{font:600 17px/1.35 var(--font-body);color:var(--ink)}
.cl-acts,.kl-acts{display:flex;flex-wrap:wrap;gap:10px}
.cl-small{margin:0;font:400 16px/1.4 var(--font-body);color:var(--muted)}
h3.cl-small{font-weight:600}
.cl-told{display:flex;flex-direction:column;gap:4px}
.cl-told p{margin:0;font:400 17px/1.45 var(--font-body);color:var(--ink);max-width:60ch}
.cl-held{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:8px;background:var(--paper)}
.cl-held-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cl-held-words{flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.cl-held-day{font:600 17px/1.3 var(--font-body);color:var(--ink)}
.cl-held.released .cl-held-day{color:var(--muted);text-decoration:line-through 1px}
.cl-dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
.cl-dl div{display:flex;flex-direction:column;gap:3px;min-width:0}
.cl-dl dt{font:400 16px/1.3 var(--font-body);color:var(--muted)}
.cl-dl dd{margin:0;font:500 16px/1.35 var(--font-body);color:var(--ink);overflow-wrap:anywhere}
.cl-called{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding-top:18px;box-shadow:inset 0 1px 0 var(--rule);cursor:pointer;position:relative}
.cl-called-t{display:flex;flex-direction:column;gap:2px}
.cl-called .row-title{font:600 17px/1.3 var(--font-body);color:var(--ink)}
#call-open .sw-input,#sheet .cl-called .sw-input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
#call-open .sw-track{flex:none;width:52px;height:32px;border-radius:999px;background:var(--muted);position:relative;transition:background-color .16s ease-out}
#call-open .sw-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#FFFFFF;transition:transform .16s ease-out}
#call-open .sw-input:checked + .sw-track{background:var(--blue)}
#call-open .sw-input:checked + .sw-track .sw-knob{transform:translateX(20px)}
#call-open .sw-input:focus-visible + .sw-track{outline:3px solid var(--blue);outline-offset:2px}
.cl-mono{margin:0;font:400 16px/1.4 var(--font-mono);color:var(--muted)}

/* the phone's sheet (the design's dialog) */
.oa #sheet{display:flex;flex-direction:column;gap:20px;padding:10px 20px calc(28px + env(safe-area-inset-bottom));background:#FFFFFF;border-radius:6px 12px 0 0;box-shadow:0 -12px 40px rgba(10,22,51,.18)}
.oa #sheet[hidden]{display:none}
#sheet .grab{align-self:center;flex:none;width:40px;height:5px;border-radius:3px;background:var(--rule)}
#sheet .top-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#sheet .sheet-title{display:flex;flex-direction:column;gap:4px;min-width:0}
#sheet #sheet-h{margin:0;font:700 26px/1.15 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
#sheet #sheet-h:focus{outline:none}
#sheet [data-sheet-when]{margin:0;font:400 16px/1.4 var(--font-mono);color:var(--muted);text-transform:none;letter-spacing:0}
#sheet .close-x{flex:none;font:600 16px/1 var(--font-body);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#F1F3F8;color:var(--ink);cursor:pointer}
#sheet .close-x:hover{background:var(--rule)}
.oa .scrim{background:rgba(10,22,51,.42)}

/* the Calendar */
#tab-calendar .kl-cols{display:flex;flex-direction:column;gap:24px}
.kl-main{display:flex;flex-direction:column;gap:16px;min-width:0}
#tab-calendar #days,#tab-calendar #holds{order:0;margin:0;padding:0;border-radius:0;background:none}
#tab-calendar #days > *{padding-left:0;padding-right:0}
.kl-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.kl-title{white-space:nowrap}
.kl-year{color:var(--muted);font-weight:500}
.kl-nav{display:flex;align-items:center;gap:4px}
.kl-arrow,.kl-today{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink);cursor:pointer;font:600 16px/1 var(--font-body)}
.kl-today{padding:0 12px;color:var(--blue-deep)}
.kl-arrow:hover,.kl-today:hover{background:#F1F3F8}
.kl-arrow:disabled{color:var(--rule-2);cursor:default;background:transparent}
.kl-arrow:focus-visible,.kl-today:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
#tab-calendar .kl-month{display:flex;flex-direction:column;gap:4px}
#tab-calendar .kl-month .wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;text-align:center}
#tab-calendar .kl-month .wk span{padding:0;font:500 16px/1.2 var(--font-body);text-transform:none;letter-spacing:0;color:var(--muted)}
#tab-calendar .kl-month .grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px 0}
#tab-calendar [data-month] .day,#tab-calendar [data-month] .day:hover:not(:disabled){position:relative;aspect-ratio:auto;height:50px;min-height:44px;min-width:0;margin:0;padding:0;border:0;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;color:var(--ink);box-shadow:none;cursor:pointer}
#tab-calendar [data-month] .day:disabled{cursor:default;color:var(--muted)}
#tab-calendar [data-month] .day .n{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;font:400 16px/1 var(--font-body);color:inherit;text-decoration:none}
#tab-calendar [data-month] .day:hover:not(:disabled) .n{background:#F1F3F8}
#tab-calendar [data-month] .day.today .n{font-weight:600;box-shadow:inset 0 0 0 1.5px var(--ink)}
#tab-calendar [data-month] .day.blocked .n,#tab-calendar [data-month] .day.blocked:hover:not(:disabled) .n{background:#E6E9F0;color:var(--muted);text-decoration:none}
#tab-calendar [data-month] .day.on .n,#tab-calendar [data-month] .day.on:hover:not(:disabled) .n{background:var(--blue);color:#FFFFFF;font-weight:600;box-shadow:none}
#tab-calendar [data-month] .day:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
#tab-calendar [data-month] .dot{display:block;flex:none;width:6px;height:6px;margin:0;border-radius:50%;box-sizing:border-box;background:transparent}
#tab-calendar [data-month] .dot.held{box-shadow:inset 0 0 0 1.5px var(--blue)}
#tab-calendar [data-month] .dot.confirmed{background:var(--blue)}
#tab-calendar [data-month] .dot.job{background:var(--ink)}
#tab-calendar [data-month] .chip{display:none}
#tab-calendar [data-month] .gap{display:block}
.kl-key{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;font:400 16px/1.3 var(--font-body);color:var(--muted)}
.kl-key li{display:inline-flex;align-items:center;gap:8px}
#tab-calendar .kl-key .sw{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;background:transparent;box-sizing:border-box}
#tab-calendar .kl-key .sw.held{box-shadow:inset 0 0 0 1.5px var(--blue);background:transparent}
#tab-calendar .kl-key .sw.confirmed{background:var(--blue)}
#tab-calendar .kl-key .sw.blocked{width:16px;height:16px;background:#E6E9F0}
#tab-calendar .kl-key .sw.job{background:var(--ink)}
.kl-hint{margin:0;font:400 16px/1.45 var(--font-body);color:var(--muted);max-width:60ch}
.kl-side{display:flex;flex-direction:column;gap:28px;min-width:0}
.kl-day{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:10px;background:#FFFFFF;box-shadow:0 0 0 1px var(--rule);scroll-margin:80px 0 100px}
.kl-day[hidden]{display:none}
.kl-when{margin:0;font:600 16px/1.2 var(--font-body);color:var(--muted)}
.kl-when[hidden]{display:none}
.kl-day-h{margin:0;font:600 16px/1.35 var(--font-body);color:var(--blue-deep);text-transform:none;letter-spacing:0}
.kl-day-body{display:flex;flex-direction:column;gap:14px}
.kl-hold{display:flex;flex-direction:column;gap:6px}
.kl-hold + .kl-hold{padding-top:14px;box-shadow:inset 0 1px 0 var(--rule)}
.kl-hold p{margin:0}
.kl-name{font:600 18px/1.3 var(--font-body);color:var(--ink)}
.kl-what{font:400 16px/1.4 var(--font-body);color:var(--muted)}
.kl-hold .tel{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font:500 16px/1 var(--font-mono);color:var(--blue-deep)}
.kl-acts .td-btn{flex:1 1 0;height:46px}
.kl-acts .td-btn.quiet{flex:0 1 auto}
.kl-why{margin:0;font:400 16px/1.45 var(--font-body);color:var(--ink)}
.kl-none{margin:0;font:400 16px/1.45 var(--font-body);color:var(--muted)}
.kl-none[hidden]{display:none}
.kl-day-acts{display:flex;flex-wrap:wrap;gap:8px}
.kl-day .say{margin:0}
.kl-coming{display:flex;flex-direction:column;gap:6px}
.kl-coming-h{margin:0;font:600 16px/1.3 var(--font-body);color:var(--muted);text-transform:none;letter-spacing:0}
.kl-rows{margin:0;padding:0;list-style:none}
.kl-row + .kl-row{box-shadow:inset 0 1px 0 var(--rule)}
#tab-calendar .kl-row .row-main{display:flex;flex-direction:row;align-items:center;gap:14px;width:100%;min-height:44px;margin:0;padding:11px 0;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
#tab-calendar .kl-row .row-main:hover .kl-who{color:var(--blue-deep)}
.kl-date{flex:none;width:64px;font:400 16px/1.2 var(--font-mono);color:var(--muted)}
.kl-who{flex:1 1 auto;min-width:0;font:600 16px/1.3 var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-state{flex:none;padding:3px 9px;border-radius:6px;font:600 16px/1.2 var(--font-body);color:var(--blue-deep);background:var(--blue-soft)}
.kl-state.held{background:transparent;box-shadow:inset 0 0 0 1px #A9BCFF}

@media (min-width:861px){
  #tab-calls{gap:28px}
  .cl-top{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
  #tab-calls .cl-title,#tab-calendar .kl-title{font-size:48px;line-height:1.02;letter-spacing:-.04em}
  .cl-cols{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:32px}
  .cl-list{flex:1 1 360px;min-width:0}
  #tab-calls [data-calls]{gap:6px}
  .cl-day{margin:14px 0 6px 14px}
  #tab-calls .cl-row + .cl-row{box-shadow:none}
  #tab-calls .cl-row .row-main{gap:14px;padding:14px}
  #tab-calls .cl-row .row-main:hover{background:#F1F3F8}
  #tab-calls .cl-row.on .row-main{background:var(--blue-soft)}
  .cl-open{flex:1.5 1 440px;min-width:0;position:sticky;top:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:22px;padding:32px;border-radius:10px;background:#FFFFFF;box-shadow:0 0 0 1px var(--rule)}
  .cl-open-head{display:flex;flex-direction:column;gap:6px}
  .cl-open-name{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font:700 32px/1.1 var(--font-display);letter-spacing:-.035em;color:var(--ink)}
  #call-open .sentence{font-size:20px;line-height:1.5}
  .cl-held{padding:18px 20px;border-radius:10px}
  .cl-held-day{font-size:19px}

  #tab-calendar .kl-cols{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:36px}
  .kl-main{flex:2 1 520px;gap:20px}
  .kl-side{flex:1 1 300px;gap:32px;padding-top:76px}
  #tab-calendar .kl-month{gap:0;border-radius:10px;background:#FFFFFF;box-shadow:0 0 0 1px var(--rule);overflow:hidden}
  #tab-calendar .kl-month .wk{padding:12px 0;box-shadow:inset 0 -1px 0 var(--rule)}
  #tab-calendar .kl-month .grid{gap:0}
  #tab-calendar [data-month] .day,#tab-calendar [data-month] .day:hover:not(:disabled){height:96px;padding:8px;align-items:flex-start;justify-content:flex-start;gap:6px;text-align:left;box-shadow:inset -1px -1px 0 #EEF1F6}
  #tab-calendar [data-month] .gap{box-shadow:inset -1px -1px 0 #EEF1F6}
  #tab-calendar [data-month] .day:hover:not(:disabled){background:#F5F7FF}
  #tab-calendar [data-month] .day .n{width:28px;height:28px;font-size:16px}
  #tab-calendar [data-month] .day:hover:not(:disabled) .n{background:transparent}
  #tab-calendar [data-month] .day.today .n{background:var(--ink);color:#FFFFFF;box-shadow:none}
  #tab-calendar [data-month] .day.blocked,#tab-calendar [data-month] .day.blocked:hover:not(:disabled){background:#F1F3F7}
  #tab-calendar [data-month] .day.blocked .n{background:transparent}
  #tab-calendar [data-month] .day.on,#tab-calendar [data-month] .day.on:hover:not(:disabled){background:#F5F7FF;box-shadow:inset 0 0 0 2px var(--blue)}
  #tab-calendar [data-month] .day.on .n,#tab-calendar [data-month] .day.on:hover:not(:disabled) .n{background:transparent;color:var(--ink)}
  #tab-calendar [data-month] .day.on.today .n,#tab-calendar [data-month] .day.today:hover:not(:disabled) .n{background:var(--ink);color:#FFFFFF}
  #tab-calendar [data-month] .dot{display:none}
  #tab-calendar [data-month] .chip{display:block;max-width:100%;box-sizing:border-box;padding:3px 7px;border-radius:6px;font:600 16px/1.2 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #tab-calendar [data-month] .chip.held{color:var(--blue-deep);box-shadow:inset 0 0 0 1.5px var(--blue)}
  #tab-calendar [data-month] .chip.confirmed{background:var(--blue);color:#FFFFFF}
  #tab-calendar [data-month] .chip.blocked{padding-left:0;color:var(--muted)}
  #tab-calendar [data-month] .chip.job{background:var(--blue-soft);color:var(--blue-deep)}
  #tab-calendar .kl-key .sw,#tab-calendar .kl-key .sw.blocked{width:14px;height:10px;border-radius:3px}
  #tab-calendar .kl-key .sw.blocked{background:#E6E9F0}
  #tab-calendar .kl-key .sw.job{background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue-deep)}
  .kl-day{gap:16px;padding:24px}
  .kl-name{font:600 24px/1.2 var(--font-display);letter-spacing:-.02em}
}
@media (prefers-reduced-motion:reduce){
  #tab-calls *,#tab-calendar *,#sheet *{transition:none!important;animation:none!important}
}

/* ---------------------------------------------------------------------------
   U4 (3 Oct 2026): Receptionist (PhoneRobot, LaptopRobot), Profile
   (PhoneSettings, LaptopSettings), the setup, the paused note on every tab,
   and the side menu down the whole page. The design's sizes, with text at
   least 16 px and taps at least 44 px.
   --------------------------------------------------------------------------- */

/* the side menu runs the whole height of the page (polish 2): the strip under
   it is painted on the page itself, so a long page never shows grey there */
@media (min-width:861px){
  body.oa[data-view="account"]{background:linear-gradient(90deg,#FFFFFF 0,#FFFFFF 255px,var(--rule) 255px,var(--rule) 256px,var(--paper) 256px) var(--paper)}
}

/* the paused note, the same on every tab but Today (Today says it in its sentence) */
.oa .paused-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 20px;padding:12px 12px 12px 18px;border-radius:10px;background:#EEF0F5;color:var(--ink)}
.oa .paused-bar[hidden]{display:none}
.oa .paused-bar p{flex:1 1 260px;margin:0;font:400 16px/1.45 var(--font-body);max-width:none}

/* labels and fields on these screens: the design's, not the old mono capitals */
:is(#tab-robot,#tab-profile,#setup) .fm label,:is(#tab-robot,#tab-profile,#setup) .fl,#tab-robot legend.fl{margin:8px 0 0;font:600 16px/1.3 var(--font-body);text-transform:none;letter-spacing:0;color:var(--ink)}
:is(#tab-robot,#tab-profile,#setup) .fm label:first-child{margin-top:0}
:is(#tab-robot,#tab-profile,#setup) :is(input[type=text],input[type=email],input[type=tel],input[type=password],textarea){min-height:48px;border-radius:6px;background:#FFFFFF;box-shadow:inset 0 0 0 1px #8A94A8;color:var(--ink);font:400 17px/1.5 var(--font-body)}
:is(#tab-robot,#tab-profile,#setup) textarea{padding:12px 16px}
:is(#tab-robot,#tab-profile,#setup) :is(input,textarea):focus{background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--blue)}
:is(#tab-robot,#tab-profile,#setup) input[readonly]{font:400 16px/1.4 var(--font-mono)}
:is(#tab-robot,#tab-profile,#setup) .hint{margin:0;font:400 16px/1.45 var(--font-body);color:var(--muted)}
:is(#tab-robot,#tab-profile,#setup) .say{margin:0}
:is(#tab-profile,#setup) .steps-l{margin:0;padding:0;list-style:none}
:is(#tab-profile,#setup) .steps-l li{font:400 16px/1.5 var(--font-body)}
:is(#tab-profile,#setup) .steps-l li::before{font:500 16px/1.5 var(--font-mono);color:var(--blue-deep)}

/* ---------------------------------------------------------------------------
   Receptionist
   --------------------------------------------------------------------------- */
#tab-robot:not([hidden]){display:flex;flex-direction:column;gap:18px}
.rc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.rc-titles{display:flex;flex-direction:column;gap:6px;min-width:0}
.rc-h{margin:0;font:700 32px/1.1 var(--font-display);letter-spacing:-.035em;color:var(--ink)}
.rc-h:focus{outline:none}
.rc-sub{margin:0;font:400 16px/1.45 var(--font-body);color:var(--muted);max-width:none}
.rc-call[hidden]{display:none}
.rc-hear{margin:0;padding:16px 18px;border-radius:10px;background:var(--blue-soft);display:flex;flex-direction:column;gap:6px}
.rc-hear figcaption{font:600 16px/1.3 var(--font-body);color:var(--blue-deep)}
.rc-hear blockquote{margin:0;padding:0;border:0;font:500 18px/1.35 var(--font-display);color:var(--ink);max-width:62ch}
.rc-hear blockquote.none{font:400 16px/1.45 var(--font-body);color:#3B465E}
.rc-knows{display:flex;flex-direction:column}
.rc-h3{margin:0 0 2px;font:600 16px/1.3 var(--font-body);color:var(--muted)}
#tab-robot .fgroups{display:block;columns:auto}
#tab-robot .fgroup{display:block;margin:0;padding:0;background:none;box-shadow:none;border-radius:0;max-width:none}
#tab-robot .fgroup .gh{margin:0}
#tab-robot .fgroup + .fgroup .gtog{box-shadow:inset 0 1px 0 var(--rule)}
#tab-robot .gtog{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:2px;width:100%;min-height:56px;margin:0;padding:11px 0;border:0;border-radius:0;background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
#tab-robot .gtog .rank{grid-column:1;font:600 16px/1.35 var(--font-body);text-transform:none;letter-spacing:0;color:var(--ink)}
#tab-robot .gtog .gsum{grid-column:1;display:block;margin:0;font:400 16px/1.4 var(--font-body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tab-robot .gtog .chev{grid-column:2;grid-row:1 / span 2;width:18px;height:18px;margin:0;background:none;clip-path:none;color:#8A94A8;transform:none}
#tab-robot .gtog .chev svg{display:block}
#tab-robot .gtog[aria-expanded="true"] .chev{transform:none}
#tab-robot .gtog:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
#tab-robot .fgroup .rowsay{position:static;transform:none;margin:4px 0 10px;min-height:0;padding:10px 14px;border-radius:8px;background:var(--blue-soft);color:var(--blue-deep);font:500 16px/1.4 var(--font-body);white-space:normal}
#tab-robot .fgroup .rowsay[hidden]{display:none}
/* the edit sheet */
#tab-robot .gbody{display:flex;flex-direction:column;gap:14px;box-sizing:border-box;background:#FFFFFF}
#tab-robot .gbody[hidden]{display:none}
#tab-robot .gbody > *{margin:0}
#tab-robot .gtitle{font:700 24px/1.15 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
#tab-robot .ghelp{font:400 16px/1.45 var(--font-body);color:var(--muted)}
#tab-robot .gsoon{font:400 16px/1.45 var(--font-body);color:var(--muted)}
#tab-robot .fld{display:grid;gap:8px;min-width:0}
#tab-robot .fld label{margin:0}
#tab-robot .gbody .acts{display:flex;justify-content:flex-end;gap:10px;margin:4px 0 0}
#tab-robot .gbody .acts .td-btn{min-width:96px;height:46px}
#tab-robot .daysel{display:flex;flex-wrap:wrap;gap:8px}
#tab-robot .dchip{min-width:56px;min-height:44px;border-radius:6px;background:#FFFFFF;box-shadow:inset 0 0 0 1px #8A94A8;font:600 16px/1 var(--font-body)}
#tab-robot .dchip:has(input:checked){background:var(--blue-soft);box-shadow:inset 0 0 0 2px var(--blue);color:var(--blue-deep)}
#tab-robot .robot-scrim{position:fixed;inset:0;z-index:30;background:rgba(10,22,51,.45)}
#tab-robot .robot-scrim[hidden]{display:none}
@media (max-width:860px){
  #tab-robot .fgroup.editing .gbody{position:fixed;z-index:31;left:0;right:0;bottom:0;max-height:88vh;max-height:88dvh;overflow:auto;overscroll-behavior:contain;padding:24px 20px calc(24px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;box-shadow:0 -20px 50px -30px rgba(10,22,51,.5)}
}
@media (min-width:861px){
  #tab-robot:not([hidden]){gap:32px}
  .rc-titles{gap:8px}
  .rc-h{font-size:48px;line-height:1.02;letter-spacing:-.04em}
  .rc-hear{padding:22px 26px;gap:8px}
  .rc-hear blockquote{font-size:22px}
  .rc-h3{margin:0 0 6px 16px}
  /* the list on the left; the open row's sheet beside it (LaptopRobot) */
  #tab-robot .fgroups{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:32px;align-items:start}
  #tab-robot .fgroups:not(:has(.editing)){grid-template-columns:minmax(0,680px)}
  #tab-robot .fgroup{display:contents}
  #tab-robot .fgroup .gh,#tab-robot .fgroup .rowsay{grid-column:1}
  #tab-robot .fgroup + .fgroup .gtog{box-shadow:none}
  #tab-robot .gtog{padding:14px 16px;border-radius:8px}
  #tab-robot .gtog:hover{background:#F1F3F8}
  #tab-robot .gtog[aria-expanded="true"]{background:var(--blue-soft)}
  #tab-robot .gtog .chev{display:none}
  #tab-robot .gbody{grid-column:2;grid-row:1 / span 20;align-self:start;position:sticky;top:48px;padding:28px;border-radius:10px;box-shadow:0 0 0 1px var(--rule);gap:18px}
  #tab-robot .gtitle{font-size:26px}
  #tab-robot .robot-scrim{display:none}
}

/* ---------------------------------------------------------------------------
   Profile
   --------------------------------------------------------------------------- */
#tab-profile:not([hidden]){display:flex;flex-direction:column;gap:26px}
.pf-head{display:flex;align-items:center;gap:16px;min-width:0}
.pf-av{flex:none;width:64px;height:64px;border-radius:50%;background:var(--ink);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font:600 26px/1 var(--font-display)}
.pf-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-h{margin:0;font:700 28px/1.1 var(--font-display);letter-spacing:-.035em;color:var(--ink);overflow-wrap:anywhere}
.pf-h:focus{outline:none}
.pf-sub{margin:0;font:400 16px/1.4 var(--font-body);color:var(--muted);overflow-wrap:anywhere;max-width:none}
.pf-cols,.pf-col{display:flex;flex-direction:column;gap:26px;min-width:0}
.pf-s{display:flex;flex-direction:column;gap:8px;min-width:0}
.pf-gh{margin:0 0 0 4px;font:600 16px/1.3 var(--font-body);color:var(--muted)}
.pf-card{background:#FFFFFF;border-radius:10px;box-shadow:0 0 0 1px var(--rule);padding:0 16px}
.pf-card > :not([hidden]) ~ :not([hidden]):not(.say){box-shadow:inset 0 1px 0 var(--rule)}
.pf-row{min-height:56px;display:flex;align-items:center;gap:12px;padding:10px 0;box-sizing:border-box}
.pf-row[hidden]{display:none}
.pf-k{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.pf-t{font:500 16px/1.3 var(--font-body);color:var(--ink)}
.pf-v{font:400 16px/1.4 var(--font-body);color:var(--muted);overflow-wrap:anywhere}
.pf-v.mono{font-family:var(--font-mono)}
.pf-note{font:400 16px/1.4 var(--font-body);color:#3B465E}
.pf-note[hidden]{display:none}
.pf-act{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:#F1F3F8;color:var(--ink);font:600 16px/1 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer}
.pf-act:hover{background:var(--blue-soft);color:var(--blue-deep)}
.pf-act[hidden]{display:none}
.pf-acts{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.pf-form{max-width:none;padding:14px 0 18px;gap:8px}
.pf-form[hidden]{display:none}
.pf-fa{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:8px}
.pf-ask{display:grid;gap:8px;padding:14px 0 18px}
.pf-ask[hidden]{display:none}
.pf-ask p{margin:0;font:400 16px/1.45 var(--font-body)}
.pf-say{margin:0 0 14px}
.pf-foot{margin:0;padding:12px 0 16px;font:400 16px/1.45 var(--font-body);color:var(--muted)}
.pf-fold > summary{list-style:none;cursor:pointer}
.pf-fold > summary::-webkit-details-marker{display:none}
.pf-fold[open] > summary .pf-act{background:var(--blue-soft);color:var(--blue-deep)}
.pf-fold > summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.pf-in{display:grid;gap:14px;padding:4px 0 18px}
.pf-in > *{margin:0}
.pf-in p{font:400 16px/1.45 var(--font-body);max-width:none}
.pf-switch{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font:600 16px/1 var(--font-body);cursor:pointer}
.pf-switch .track{position:relative;flex:none;width:46px;height:28px;border-radius:14px;background:#8A94A8;transition:background-color .16s ease-out}
.pf-switch .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#FFFFFF;transition:left .16s ease-out}
.pf-switch[aria-checked="true"] .track{background:var(--blue)}
.pf-switch[aria-checked="true"] .knob{left:21px}
.pf-switch:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
#tab-profile .set-out{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0}
#tab-profile .pf-out{width:100%;height:52px;max-width:400px}
@media (max-width:420px){
  /* the button stays beside the words while they fit, and goes under them when not */
  .pf-row{flex-wrap:wrap;column-gap:10px}
  .pf-k{flex:1 1 170px}
  .pf-row > .pf-act,.pf-row > .pf-acts{margin-left:auto}
}
@media (min-width:861px){
  #tab-profile:not([hidden]){gap:36px}
  .pf-head{gap:22px}
  .pf-av{width:80px;height:80px;font-size:32px}
  .pf-titles{gap:4px}
  .pf-h{font-size:48px;line-height:1.02;letter-spacing:-.04em}
  .pf-sub{font-size:17px}
  .pf-cols{flex-direction:row;align-items:flex-start;gap:32px}
  .pf-col{flex:1 1 400px;gap:28px}
  .pf-s{gap:10px}
  .pf-card{padding:0 22px}
  .pf-row{min-height:64px;gap:16px;padding:12px 0}
  #tab-profile .set-out{align-items:flex-start}
  #tab-profile .pf-out{width:auto}
}

/* ---------------------------------------------------------------------------
   the setup
   --------------------------------------------------------------------------- */
#setup:not([hidden]){display:flex;flex-direction:column;gap:16px}
.su-top{display:flex;align-items:center;gap:12px}
.su-prog{flex:1 1 auto;display:flex;flex-direction:column;gap:8px;min-width:0}
.su-count{margin:0;font:600 16px/1.3 var(--font-body);color:var(--ink)}
#setup .bar,.su-card .bar{height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
#setup .bar i,.su-card .bar i{display:block;height:100%;border-radius:3px;background:var(--blue);transition:width .4s ease-out}
.su-top [data-step-skip][hidden]{display:none}
#setup .su-step{display:flex;flex-direction:column;gap:16px;min-height:0;padding:28px 24px;border-radius:10px;background:#FFFFFF;box-shadow:0 0 0 1px var(--rule)}
#setup .su-step[hidden]{display:none}
#setup .su-step > *{margin:0}
.su-lbl{font:600 16px/1.3 var(--font-body);color:var(--blue-deep)}
.su-h{font:700 28px/1.12 var(--font-display);letter-spacing:-.035em;color:var(--ink)}
.su-h:focus{outline:none}
.su-lede{font:400 17px/1.5 var(--font-body);color:var(--muted);max-width:none}
.su-key{padding:14px 16px;border-radius:10px;background:var(--blue-soft);font:400 17px/1.5 var(--font-body);color:var(--ink);max-width:none}
.su-grow{display:flex;flex-direction:column;gap:16px}
.su-grow > *{margin:0}
.su-form{max-width:none}
.su-carriers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
.su-legend{grid-column:1 / -1;margin:0 0 6px;padding:0;font:600 16px/1.3 var(--font-body);color:var(--ink)}
.su-choice{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border-radius:8px;background:#FFFFFF;box-shadow:inset 0 0 0 1px #8A94A8;font:600 17px/1.2 var(--font-body);color:var(--ink);cursor:pointer}
.su-choice input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--blue)}
.su-choice:has(input:checked){background:var(--blue-soft);box-shadow:inset 0 0 0 2px var(--blue);color:var(--blue-deep)}
.su-choice:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.su-code{display:flex;flex-direction:column;gap:12px}
.su-code[hidden]{display:none}
.su-code > *{margin:0}
.su-code-h{font:600 16px/1.3 var(--font-body);color:var(--ink)}
.su-code .code{color:var(--ink);text-decoration:none}
.su-code a.code{color:var(--blue-deep);border-radius:8px}
.su-code a.code:hover{color:var(--ink)}
.su-code a.code:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.su-code .mono{font-family:var(--font-mono)}
.su-tip{font:400 16px/1.5 var(--font-body);color:#3B465E;max-width:none}
.su-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.su-acts [hidden]{display:none}
.su-go{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.su-list{display:grid;gap:10px;margin:0;padding:0 0 0 24px;font:400 17px/1.5 var(--font-body);color:var(--ink)}
.su-wait{padding:14px 16px;border-radius:10px;background:#F1F3F8;font:500 16px/1.45 var(--font-body);color:var(--ink)}
.su-wait.good{background:var(--blue-soft);color:var(--blue-deep);font-weight:600}
.su-also{font:400 16px/1.5 var(--font-body);color:var(--muted)}
.su-also[hidden]{display:none}
.su-also:not([hidden]){display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.su-also p{margin:0;max-width:none}
.su-os{display:grid;gap:18px}
.su-os > div{display:grid;gap:8px}
.su-os-h{margin:0;font:600 16px/1.3 var(--font-body);color:var(--ink)}
.su-left{font:400 16px/1.5 var(--font-body);color:#3B465E}
.su-left[hidden]{display:none}
/* Today: "Finish setting up" */
.su-card[hidden]{display:none}
.su-card .td-text{margin:0}
.su-card .su-mini{margin-top:8px;max-width:320px}
.su-card .td-acts{align-items:center}
@media (max-width:560px){
  #setup .su-step{padding:22px 18px}
  .su-h{font-size:26px}
  .su-card .td-row{flex-wrap:wrap}
  .su-card .td-acts{justify-content:flex-start}
}
@media (min-width:861px){
  #setup .su-step{padding:36px 40px}
  .su-os{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  #setup .bar i,.su-card .bar i,.pf-switch .track,.pf-switch .knob{transition:none}
}
/* UG: his job calendar (Profile and the setup's optional step) */
.jc-form{display:grid;gap:8px}
.jc-what{margin:0 0 6px}
.jc-bad{color:#9A2B1E}