/* Bob's desk, its doors and Deepbob's panel: the client-facing pages on app.deepbob.com, served by Caddy at /static/.
   Rebuilt 2026-11-09 as one system (docs/DESK_DESIGN.md): every gap is a step of --s-*, every size a step of --t-*.
   One home per selector. Inside a section: the rule for every screen, then the phone (screen, under 900 px), then the
   wide screen (screen, 900 px and over). Print lives at the end and never meets the phone's rules. */
@font-face { font-family: "Funnel Display"; src: url("fonts/FunnelDisplay-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Funnel Display"; src: url("fonts/FunnelDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Funnel Display"; src: url("fonts/FunnelDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("fonts/GoogleSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ================================================================== tokens */
:root {
  color-scheme: light;
  /* the brand's colours (web/css/tokens.css, Colour Lab "deepbob") */
  --ink: oklch(16% 0.035 250);
  --n-0: oklch(97.5% 0.003 70);   /* the page */
  --n-1: oklch(93.6% 0.004 70);   /* Mist: a step back */
  --n-4: oklch(70% 0.006 70);
  --n-5: oklch(60% 0.007 70);
  --n-6: oklch(49% 0.008 70);
  --n-7: oklch(37.4% 0.008 70);
  --white: oklch(100% 0 0);
  --red: oklch(59% 0.23 28);      /* Bob red: once, where a person is needed */
  --coral: oklch(75% 0.12 38);
  --coral-ink: oklch(20% 0.04 38);
  --shallow: oklch(86% 0.06 215); /* what Bob may do on his own */
  --shell: oklch(90% 0.045 15);   /* what always needs a person, and what you should know */
  --line: color-mix(in oklch, var(--ink) 13%, transparent);
  --quiet: var(--n-6);
  --soft: color-mix(in oklch, var(--ink) 74%, transparent);  /* secondary text: readable, a step under the ink */
  --display: "Funnel Display", "Google Sans", system-ui, sans-serif;
  --text: "Google Sans", system-ui, sans-serif;

  /* space: the 8 px grid, doubling towards the brand's 40 px baseline. Every gap on the desk is one of these. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 56px; --s-9: 80px; --s-10: 120px;

  /* type: eight sizes. Display (Funnel Display Light) only for figure, heading and statement. */
  --t-label: 12px;
  --t-small: 14px;
  --t-body: 16px;
  --t-lead: 19px;
  --t-title: 24px;
  --t-figure: clamp(30px, 1vw + 20px, 40px);
  --t-head: clamp(36px, 2.4vw + 18px, 56px);
  --t-statement: clamp(46px, 4.2vw + 18px, 84px);

  /* the column: 12 columns of the work area; reading measures */
  --w-narrow: 680px;   /* 8 of 12: text, a note, a warning */
  --w-wide: 860px;     /* 10 of 12: a decision, a list of people */
  --w-full: 1040px;    /* all 12: the rules, the record */
  --gut: var(--s-9);   /* the work area's side margin */
  --radius: 4px;

  /* motion: one curve, two durations (the tier converges on 0.2–0.4 s) */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 200ms;
  --view: 320ms;
}
@media screen and (max-width: 899px) {
  :root { --gut: var(--s-5); --t-statement: 56px; } /* the phone's statement: the size the wide scale reaches at 900 px */
}

/* ================================================================== base */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: var(--t-body)/1.5 var(--text); letter-spacing: -0.006em; color: var(--ink); background: var(--n-0); -webkit-font-smoothing: antialiased; }
p, h1, h2, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, .display { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }
.display { font-family: var(--display); font-weight: 300; letter-spacing: -0.022em; line-height: 1.04; }
.label { font-size: var(--t-label); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
h2.label { font-weight: 400; font-family: var(--text); } /* a section's heading for screen readers, set as the label it always was */
.mark { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; font-size: 20px; line-height: 1; color: var(--ink); text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }
.quiet { color: var(--quiet); }
.only { color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1[tabindex="-1"]:focus { outline: none; } /* focus lands on a view's heading for the keyboard and screen readers; it is not a control */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); vertical-align: middle; }
.dot.is-quiet { background: var(--n-4); }
.dek { font-size: var(--t-lead); line-height: 1.45; margin-top: var(--s-4); max-width: 38ch; }
bdi.keep, .nowrap { white-space: nowrap; }
.h-next { display: block; }
.linkish { all: unset; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--n-4); transition: text-decoration-color var(--fast) var(--ease); }
.linkish:hover { text-decoration-color: var(--ink); }
.linkish:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }
.msg .linkish { font-size: inherit; }

/* ================================================================== controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-3) var(--s-5);
  font: inherit; font-size: var(--t-body); line-height: 1.2; text-align: center; text-decoration: none;
  border-radius: 999px; border: 1px solid var(--ink); background: none; color: var(--ink); cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform 150ms var(--ease);
}
.btn:hover { background: var(--white); }
.btn:active { transform: scale(.98); }
.btn--do { background: var(--ink); color: var(--n-0); }
.btn--do:hover { background: color-mix(in oklch, var(--ink) 88%, var(--white)); }
.btn--small { min-height: 40px; padding: var(--s-2) var(--s-4); font-size: var(--t-small); }
.btn--quiet { border-color: var(--line); color: var(--n-7); }
.btn--quiet:hover { border-color: var(--ink); color: var(--ink); }
.btn--text {
  min-height: 44px; padding: var(--s-2) 2px; border: none; border-radius: 0; background: none;
  font-size: var(--t-small); color: var(--n-7); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--n-4);
}
.btn--text:hover { background: none; color: var(--ink); text-decoration-color: var(--ink); }
.btn:focus-visible, input:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.is-done { background: var(--n-0); color: var(--ink); }
/* waiting: a ring that turns, the button's size kept; the words on a line beneath (busy() in the desk script) */
button[aria-busy="true"] { opacity: .75; cursor: progress; }
.btn[aria-busy="true"] { opacity: 1; white-space: nowrap; }
.btn--do[aria-busy="true"] { opacity: .88; }
.btn[aria-busy="true"][disabled] { opacity: 1; border-color: var(--ink); }
.btn[aria-busy="true"]::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin 800ms linear infinite;
}
.btn.is-spin { position: relative; padding-left: 40px; padding-right: var(--s-4); }
.btn.is-spin::before { position: absolute; left: var(--s-4); top: 0; bottom: 0; margin: auto 0; }
@keyframes spin { to { transform: rotate(1turn); } }
.busy-note { margin-top: var(--s-3); font-size: var(--t-small); color: var(--ink); }
.answers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.answers .btn { padding-inline: var(--s-6); }

/* messages: a receipt is a sentence; an error is ruled in red, never body text */
.msg { margin-top: var(--s-3); font-size: var(--t-body); min-height: 1.5em; }
.msg.is-error { color: var(--coral-ink); }
.msg-more { display: block; margin-top: var(--s-2); }
.view .msg.is-error:not(:empty) { border-left: 2px solid var(--red); padding-left: var(--s-3); max-width: 65ch; color: var(--ink); }

/* a segmented answer: one family for every choice on the desk */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); justify-self: start; }
.seg button {
  all: unset; cursor: pointer; font-size: var(--t-small); line-height: 1.2; padding: var(--s-2) var(--s-4); border-radius: 999px; color: var(--n-7);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--ink); color: var(--n-0); }
.seg button[disabled] { color: var(--n-4); cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--n-4); }
.seg button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.seg--big button { padding: var(--s-3) var(--s-4); }
@media screen and (max-width: 899px) {
  .seg button { padding: var(--s-3) var(--s-4); font-size: var(--t-body); } /* a thumb, not a cursor */
}

/* a chip: a state, never a command */
.chip {
  display: inline-block; margin-left: var(--s-3); padding: 2px var(--s-2); border-radius: 999px; vertical-align: middle;
  font-family: var(--text, inherit); font-size: var(--t-label); font-weight: 400; letter-spacing: .02em; line-height: 1.5;
  background: var(--shallow); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}

/* fields */
.field { display: grid; gap: var(--s-2); align-content: start; }
.field input {
  min-width: 0; height: 48px; padding: 0 var(--s-4); border: 0; border-radius: var(--radius);
  font: inherit; font-size: var(--t-body); background: var(--n-0); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}
.field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.field-err { display: block; margin-top: var(--s-2); padding-left: var(--s-2); border-left: 3px solid var(--red); font-size: var(--t-small); color: var(--ink); }
input[aria-invalid="true"] { border-color: var(--red); }
input.code { text-overflow: ellipsis; }
.code {
  width: 100%; margin-top: var(--s-5); padding: var(--s-4) var(--s-3); border: 0; border-radius: var(--radius);
  font: 300 30px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-align: center;
  background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}
.code:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.code::placeholder { color: var(--n-6); }

/* ================================================================== the frame: a rail on a wide screen, a bar on a phone */
.app { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s-7); padding: var(--s-6) var(--s-6) var(--s-6) var(--s-7); border-right: 1px solid var(--line); background: var(--n-0); }
.rail nav ul { display: grid; gap: 0; }
.rail nav a { display: flex; justify-content: space-between; align-items: center; min-height: 40px; color: var(--n-7); text-decoration: none; font-size: var(--t-body); transition: color var(--fast) var(--ease); }
.rail nav a:hover { color: var(--ink); }
.rail nav a[aria-current] { color: var(--ink); }
.rail__brand { display: grid; gap: var(--s-1); }
.rail__co { font-size: var(--t-small); line-height: 1.3; color: var(--quiet); overflow-wrap: anywhere; }
.rail__co:empty { display: none; }
.rail__who { margin-top: auto; font-size: var(--t-small); line-height: 1.5; color: var(--quiet); overflow-wrap: anywhere; }
.rail__who .who-out { display: inline-flex; align-items: center; min-height: 32px; margin-top: var(--s-3); font-size: var(--t-small); }   /* Logga ut: back to the door, so another passkey can sign in */
.menu-btn { display: none; }
.work { min-width: 0; padding: var(--s-8) var(--gut) var(--s-9); }
.view { max-width: var(--w-full); animation: rise var(--view) var(--ease) both; }
/* One motion per view: where the browser has view transitions they carry it (below), so the view has none of its own.
   A rule that only switched it off *during* a transition restarted it afterwards: the view vanished and rose a second
   time (caught in a journey frame, 2026-11-10). */
@supports (view-transition-name: none) { .view { animation: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
/* a view changes as one move (the desk script wraps show() in a View Transition where the browser has one) */
::view-transition-old(root) { animation: 160ms var(--ease) both fade-out; }
::view-transition-new(root) { animation: var(--view) var(--ease) both rise; }
@keyframes fade-out { to { opacity: 0; } }
@media screen and (min-width: 900px) {
  .rail nav a[aria-current] { font-weight: 600; }   /* where you are, said by weight */
  .rail nav a[aria-current]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
  .rail nav a[aria-current]:has(.dot)::after { display: none; }
}
@media screen and (max-width: 899px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } /* minmax: the tabs' min-content never widens the page */
  .rail { position: static; height: auto; min-width: 0; gap: 0; padding: var(--s-3) var(--gut); border-right: 0; border-bottom: 1px solid var(--line); }
  .rail__bar { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: var(--s-2) var(--s-4);
    font: inherit; font-size: var(--t-body); color: var(--ink); background: none; border: 1px solid var(--ink); border-radius: 999px; cursor: pointer;
  }
  .menu-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
  .rail nav, .rail__who { display: none; } /* the pages sit behind Meny on a phone, never in a row you have to swipe */
  .rail.is-open nav { display: block; margin-top: var(--s-3); }
  .rail nav li + li { border-top: 1px solid var(--line); }
  .rail nav a { justify-content: flex-start; gap: var(--s-3); min-height: 56px; font-family: var(--display); font-weight: 300; font-size: var(--t-figure); letter-spacing: -0.01em; }
  .rail nav a::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; }
  .rail nav a[aria-current]::before { background: var(--ink); } /* where you are */
  .rail nav a .dot { margin-left: var(--s-1); }
  .rail.is-open .rail__who { display: block; padding: var(--s-4) 0 var(--s-2); border-top: 1px solid var(--line); }
  .rail__who .who-out { min-height: 44px; font-size: var(--t-body); }
  .work { padding: var(--s-6) var(--gut) var(--s-8); }
}

/* a view's head: the kicker, the heading, the dek, always the same steps */
.view > .label:first-child, .view > .held + .label, .view .calm__text > .label { display: block; }
.view h1 { margin-top: var(--s-3); }
.view > h1:first-child { margin-top: 0; }
.view h1 + .dek { margin-top: var(--s-4); }

/* full-bleed bands on a phone: the cards become the page's own width */
@media screen and (max-width: 899px) {
  .bleed, .zone, .limit, .conns, .people-list, .invite, .device-list, .own, .findings, .week .band, .create, .made, .ctable {
    margin-inline: calc(-1 * var(--gut)); border-radius: 0;
  }
}

/* ================================================================== the doors: sign in, an invitation, connecting an app */
.touch .pc-only { display: none; }   /* what only a computer needs, never on a touch screen (the class is set by the page) */
.door { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.door__text { display: flex; flex-direction: column; padding: var(--s-7) var(--s-9); }
.door__text .body { margin-block: auto; padding-block: var(--s-7); max-width: 560px; }
.door h1 { margin-top: var(--s-4); font-size: var(--t-statement); line-height: 1; }
.door .dek { max-width: 40ch; }
.door .btn { min-width: 260px; margin-top: var(--s-6); }
.door.is-waiting { visibility: hidden; } /* a signed-in person never sees the door flash before the desk */
.door__pic { position: relative; }
.door__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.door .whose { margin-top: var(--s-4); max-width: 46ch; font-size: var(--t-body); color: var(--ink); overflow-wrap: anywhere; } /* whose key and which company: the trust line */
.door--enroll .dek { font-size: var(--t-lead); }
.door .only { margin-top: var(--s-4); max-width: 52ch; font-size: var(--t-body); color: var(--ink); }
.door #providers { margin-top: var(--s-6); }
.door #providers:empty { display: none; } /* no sign-in providers: no gap where they would be */
.door #providers + #go { margin-top: var(--s-3); }
/* the door's message: under the button it answers; empty, it takes no room; an error is ruled */
.door .msg { max-width: 46ch; }
.door .msg:empty { min-height: 0; margin: 0; }
.door .msg.is-error:not(:empty) { border-left: 3px solid var(--red); padding-left: var(--s-3); color: var(--ink); }
.door .msg b { font-weight: 600; }
.door .msg-more { margin-top: var(--s-3); }
.door .btn + .msg:not(:empty) { margin-top: var(--s-4); }
.door .body > .msg:not(:empty) + .btn { margin-top: var(--s-4); }
.door .btn + .msg + .only { margin-top: var(--s-4); }
.phone-first { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-5); }
.phone-first p { max-width: 32ch; font-size: var(--t-lead); line-height: 1.45; }
.phone-first + .btn, .phone-first ~ #go { margin-top: var(--s-5); }
@media screen and (max-width: 899px) {
  .door { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .door__pic { order: -1; height: 240px; }   /* the picture introduces, the task arrives on the first screen */
  .door--enroll .door__pic { height: 264px; }
  .door__pic img { object-position: 50% 53%; } /* all of Bob and the key, not the counter */
  .door__text { padding: var(--s-5) var(--gut) var(--s-7); }
  .door__text .body { display: flex; flex-direction: column; flex: none; margin-block: 0; padding-block: var(--s-5) 0; }
  .door h1 { font-size: var(--t-head); line-height: 1.04; }
  .door .btn { width: 100%; min-width: 0; }
  .door .only { line-height: 1.5; }
  .phone-first { flex-direction: column; align-items: flex-start; }
  .door.is-done .door__pic, .door--task:has(#msg.is-error:not(:empty)) .door__pic { display: none; }
  .door.is-done .body::before { content: ""; display: block; width: 88px; height: 78px; margin-bottom: var(--s-4); background: url("img/bob-pleased.svg") left center / contain no-repeat; }
  .door--task:has(#msg.is-error:not(:empty)) .body::before { content: ""; display: block; order: -1; width: 88px; height: 78px; margin-bottom: var(--s-4); background: url("img/bob-alert.svg") left center / contain no-repeat; }
  /* connecting an app, after a failure: the error and its retry straight under the headline, the explanation after */
  .door--task .body:has(> #msg.is-error:not(:empty)) > * { order: 3; }
  .door--task .body:has(> #msg.is-error:not(:empty)) > .label, .door--task .body:has(> #msg.is-error:not(:empty)) > h1 { order: 0; }
  .door--task .body:has(> #msg.is-error:not(:empty)) > #msg { order: 1; margin-top: var(--s-5); }
  .door--task .body:has(> #msg.is-error:not(:empty)) > #go { order: 2; margin-top: var(--s-4); }
  .door--task .body:has(> #msg.is-error:not(:empty)) > .dek { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--t-body); line-height: 1.5; color: var(--soft); }
  .door--task .body:has(> #msg.is-error:not(:empty)) > .only { font-size: var(--t-small); color: var(--soft); }
}

/* the sign-in code page (a code from the portal) */
.signin { display: flex; flex-direction: column; max-width: 440px; min-height: 100vh; margin: 0 auto; padding: var(--s-5) var(--s-5) var(--s-6); }
.signin .bar { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-small); }
.signin h1 { margin-top: var(--s-4); font-size: var(--t-head); }
.signin .lead { margin-top: var(--s-4); font-size: var(--t-body); }
.signin form { display: flex; flex-direction: column; flex: 1; }
.signin form.go { flex: none; margin-top: var(--s-6); }
.signin .btn { width: 100%; margin-top: auto; }
.signin form.go .btn { margin-top: 0; }
.signin .msg { margin-bottom: var(--s-2); }
.back { margin-top: var(--s-4); font-size: var(--t-small); line-height: 1.5; color: var(--n-7); }
.back b { font-weight: 400; color: var(--ink); }
.boundary { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-small); line-height: 1.5; }
.fallback { margin-top: auto; padding-top: var(--s-6); font-size: var(--t-small); }
.fallback summary { cursor: pointer; color: var(--n-7); }
.fallback form { flex: none; }
.fallback .code, .fallback .btn { margin-top: var(--s-4); }

/* ================================================================== one decision */
.ask h1 { font-size: var(--t-head); }
.view.ask > *, .view.signed > * { max-width: var(--w-wide); }
.change { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s-6); background: var(--white); border-radius: var(--radius); }
.change > div { padding: var(--s-5) var(--s-5) var(--s-5); }
.change > div + div { border-left: 1px solid var(--line); }
.change .v { margin-top: var(--s-2); font-family: var(--display); font-weight: 300; font-size: var(--t-figure); line-height: 1.05; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.change .v + .quiet { margin-top: var(--s-2); }
.change .is-new .v bdi { display: inline-block; padding-bottom: var(--s-1); border-bottom: 4px solid var(--ink); } /* the new value, marked in ink: red is kept for where a person is needed */
.change.is-receipt { max-width: var(--w-narrow); margin-top: var(--s-3); }
.stopped { max-width: var(--w-narrow); margin-top: var(--s-5); font-size: var(--t-body); }
.stopped .label { display: block; margin-bottom: var(--s-1); }
/* Bob's words are his, not a fact: an ink rule, his own label */
.claim { max-width: var(--w-narrow); margin: var(--s-5) 0 0; padding: var(--s-1) 0 var(--s-1) var(--s-5); border-left: 2px solid var(--ink); overflow-wrap: anywhere; }
.claim p:nth-child(2) { margin-top: var(--s-2); font-size: var(--t-lead); line-height: 1.45; color: var(--ink); white-space: pre-line; } /* a note keeps its lines */
.claim .claim__from { margin-top: var(--s-2); font-size: var(--t-small); line-height: 1.45; color: var(--soft); } /* where it came from, inside Bob's explanation */
/* the fraud warning: Bob's drawn alert face on white, a red rule */
.warn {
  display: grid; grid-template-columns: 80px 1fr; align-items: center; overflow: hidden; max-width: var(--w-narrow); margin-top: var(--s-5);
  border-radius: var(--radius); background: var(--white); color: var(--ink); box-shadow: inset 3px 0 0 var(--red);
}
.warn img { width: 48px; height: auto; margin: var(--s-4) 0 var(--s-4) var(--s-5); object-fit: contain; }
.warn p { padding: var(--s-4) var(--s-5) var(--s-4) var(--s-1); font-size: var(--t-body); line-height: 1.45; }
/* a person's note to Bob with a decision: grows with the note, so a phone never hides its start */
.note-field { display: grid; gap: var(--s-2); max-width: var(--w-narrow); margin-top: var(--s-7); }
.note-field textarea {
  min-height: calc(1lh + 24px); max-height: 50vh; padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--radius); resize: vertical; field-sizing: content;
  font: inherit; font-size: var(--t-body); line-height: 1.5; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}
.note-field textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.note-field small { font-size: var(--t-small); color: var(--quiet); }
/* three beats: the proposal (question and change), the grounds (Bob's reason, his notes, the warning), your answer.
   Inside a beat the steps are 16–24; between beats 56; the answer has its own landing. */
.grounds { display: grid; margin-top: var(--s-7); background: var(--white); border-radius: var(--radius); overflow: hidden; }
.grounds:empty { display: none; }
/* one evidence block: Bob's reason, what he noted about it, the warning. One white ground, hairlines inside. */
.grounds > * { max-width: none; margin: 0 !important; padding: var(--s-4) var(--s-5); border-radius: 0; }
.grounds > * + * { border-top: 1px solid var(--line); }
.grounds > .claim { border-left: 0; }
.grounds > .findings--here { padding-bottom: var(--s-2); }
.grounds > .findings--here ul { margin-top: var(--s-2); }
.grounds > .findings--here li:first-child { border-top: 0; }
.grounds > .warn { padding: 0; }
.decide { max-width: var(--w-narrow); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.decide > .label { display: block; }
.decide .note-field { margin-top: 0; }
.decide .msg:empty { min-height: 0; margin: 0; }
.decide > .only { margin-top: var(--s-4); font-size: var(--t-small); color: var(--soft); }
@media screen and (min-width: 1200px) {
  .view.ask { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: start; max-width: var(--w-full); }
  .view.ask > * { grid-column: 1; max-width: none; }
  /* one sequence in the work column: the change, its grounds, your answer. The other column holds only what waits next. */
  .view.ask > .more { grid-column: 2; grid-row: 2 / span 4; align-self: start; position: sticky; top: var(--s-6); margin-top: var(--s-3); }
  .view.ask > .decide { margin-top: var(--s-7); }
  .view.ask .claim, .view.ask .warn, .view.ask .stopped { max-width: none; }
  .view.ask .findings--here { max-width: none; }
  .view.ask ~ .findings { max-width: calc((var(--w-full) - var(--s-8)) * 7 / 12); } /* the other notes keep the decision's column */
}
/* the record: a day is an interval, not just a heading */
@media screen and (min-width: 900px) {
  /* the ledger is what people read here: the event in the lead size, time and name on its first line */
  .record li { align-items: baseline; padding: var(--s-5) 0; }
  .record li > span:nth-child(3) { max-width: 62ch; font-size: var(--t-lead); line-height: 1.4; }
  .rq-dayhead { margin-top: var(--s-7); }
  .rq-group:first-of-type .rq-dayhead { margin-top: var(--s-5); }
}

/* Bob's face marks his voice: his notes, his warning */
.bob-face { flex: none; width: 22px; height: auto; margin-right: var(--s-1); vertical-align: -6px; }
.bob-face.is-quiet { filter: grayscale(1); opacity: .55; }
/* the answer: two doors side by side, each saying what it does (the consequence is the button) */
.answers--decide { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); max-width: var(--w-narrow); margin-top: var(--s-5); }
.answer {
  display: grid; align-content: start; justify-items: start; gap: var(--s-1); min-height: 112px; padding: var(--s-4) var(--s-5) var(--s-5);
  border-radius: var(--radius); text-align: left; line-height: 1.4;
}
.answer b { font-family: var(--display); font-weight: 400; font-size: var(--t-title); line-height: 1.1; letter-spacing: -0.01em; }
.answer span { font-size: var(--t-body); color: inherit; opacity: .78; text-wrap: pretty; }
.answer.btn { padding-inline: var(--s-5); }
.answer.is-spin { padding-left: var(--s-5); }
.answer.is-spin::before { left: auto; right: var(--s-5); top: var(--s-5); bottom: auto; margin: 0; }
.answers--decide + .busy-note { max-width: var(--w-narrow); }
.consequence { display: none; } /* said by the answers themselves now; kept in the markup's history only */
.more { margin-top: var(--s-9); max-width: var(--w-wide); }
.more .label { display: block; margin-bottom: var(--s-3); }
.more li button { all: unset; cursor: pointer; box-sizing: border-box; display: flex; justify-content: space-between; gap: var(--s-4); width: 100%; padding: var(--s-4) 0; border-top: 1px solid var(--line); font-size: var(--t-body); transition: color var(--fast) var(--ease); }
.more li button:hover { color: var(--n-7); }
.more li button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media screen and (max-width: 899px) {
  .change { grid-template-columns: 1fr; }
  .change > div { padding: var(--s-4) var(--s-5); }
  .change > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .answers { flex-direction: column; align-items: stretch; }
  .answers .btn { width: 100%; }
  .answers--decide { grid-template-columns: 1fr; }
  .answer { min-height: 0; }
  .warn { grid-template-columns: 64px 1fr; }
  .warn img { width: 40px; margin-left: var(--s-4); }
}

/* ================================================================== signed: the stamp */
.stamp {
  display: grid; place-content: center; width: 132px; height: 132px; border-radius: 50%; text-align: center;
  border: 3px solid var(--ink); color: var(--ink); transform: rotate(-9deg);
  box-shadow: inset 0 0 0 5px var(--n-0), inset 0 0 0 6px color-mix(in oklch, var(--ink) 45%, transparent);
  animation: stamp 420ms cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes stamp { from { transform: rotate(-9deg) scale(1.25); opacity: 0; } }
.stamp small { font-family: var(--display); font-weight: 500; font-size: var(--t-lead); letter-spacing: .04em; text-transform: uppercase; }
.stamp b { margin-top: var(--s-1); font-family: var(--text); font-weight: 400; font-size: var(--t-small); line-height: 1; }
.stamp--settled { width: 112px; height: 112px; }
.stamp--settled small { font-size: var(--t-body); }
.signed .answers { margin-top: var(--s-8); }
/* the receipt: the decision's own document, signed. The stamp sits on its corner, the change keeps the decision's grid,
   the signature is a line of facts, the record's promise is its foot. */
.receipt { position: relative; max-width: var(--w-narrow); padding: var(--s-6) var(--s-6) var(--s-5); background: var(--white); border-radius: var(--radius); }
.receipt__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: start; }
.receipt__head > div { grid-row: 1; grid-column: 1; }
.receipt__head .stamp { grid-row: 1; grid-column: 2; margin: calc(-1 * var(--s-8)) calc(-1 * var(--s-7)) 0 0; background: var(--n-0); }
.receipt__head .label { display: block; }
.receipt h1 { margin-top: var(--s-3); font-size: var(--t-head); }
.receipt .change { margin-top: var(--s-6); background: var(--n-0); }
.receipt .change.is-receipt { max-width: none; }
.receipt__detail { max-width: 52ch; margin-top: var(--s-5); font-size: var(--t-lead); line-height: 1.45; }
.receipt .claim { margin-top: var(--s-5); }
.receipt__sig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--ink); font-size: var(--t-body); }
.receipt__sig .label { display: block; margin-bottom: var(--s-1); }
.receipt .note { margin-top: var(--s-5); font-size: var(--t-small); color: var(--soft); }
@media screen and (min-width: 1200px) {
  .receipt { max-width: calc((var(--w-full) - var(--s-8)) * 7 / 12); } /* the decision's own column */
}
@media screen and (max-width: 899px) {
  .receipt { margin-inline: calc(-1 * var(--gut)); padding: var(--s-6) var(--gut) var(--s-5); border-radius: 0; }
  .receipt__head .stamp { width: 104px; height: 104px; margin: calc(-1 * var(--s-5)) 0 0 0; }
  .receipt__head .stamp small { font-size: var(--t-body); }
  .receipt__sig { grid-template-columns: 1fr 1fr; }
  .receipt__sig p:last-child { grid-column: 1 / -1; }
}
@media screen and (max-width: 899px) {
  .stamp--settled { width: 104px; height: 104px; }
  .stamp--settled small { font-size: var(--t-label); letter-spacing: .02em; }
  .stamp--settled b { font-size: var(--t-label); }
}

/* ================================================================== nothing needs you */
.view.calm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: end; max-width: none; min-height: calc(100vh - var(--s-8) - var(--s-9)); }
.calm figure { position: relative; align-self: stretch; margin: calc(-1 * var(--s-8)) calc(-1 * var(--gut)) calc(-1 * var(--s-9)) 0; } /* the picture runs to the edges */
.calm figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.calm h1 { font-size: var(--t-statement); line-height: 1; }
.calm .dek { max-width: 34ch; }
.today { margin-top: var(--s-7); }
.today .label { display: block; }
.dots { display: flex; flex-wrap: wrap; gap: var(--s-2); max-width: 400px; margin-top: var(--s-3); }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.dots i.is-person { background: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.today p:last-child { margin-top: var(--s-3); max-width: 44ch; font-size: var(--t-small); color: var(--soft); }
@media screen and (min-width: 900px) {
  .calm__side { align-self: stretch; display: flex; flex-direction: column; } /* banners sit in the text column; the picture keeps the whole height */
  .calm__text { margin-top: auto; }
}
@media screen and (max-width: 899px) {
  .view.calm { grid-template-columns: 1fr; gap: var(--s-6); min-height: 0; }
  .calm figure { order: -1; margin: calc(-1 * var(--s-6)) calc(-1 * var(--gut)) 0; }
  .calm__side { display: contents; } /* banners, then the picture, then the words */
  .calm .held { order: -2; margin: 0; }
  .calm:has(.held) figure { margin-top: 0; } /* a banner above: the picture starts below it */
  .calm figure img { position: static; height: auto; aspect-ratio: 4 / 3; }
}

/* ================================================================== Bob's notes and the desk's banners */
.findings { max-width: var(--w-wide); margin-top: var(--s-7); padding: var(--s-5) var(--s-6) var(--s-4); background: var(--white); border-radius: var(--radius); }
.findings > .label { display: flex; align-items: center; gap: var(--s-2); }
.findings ul { margin-top: var(--s-3); }
.findings li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--line); font-size: var(--t-body); }
.findings li span:first-child { overflow-wrap: anywhere; }
.findings li > .quiet { font-size: var(--t-small); padding-top: 2px; white-space: nowrap; }
.findings .linkish { display: inline-block; margin-top: var(--s-3); font-size: var(--t-small); }
.findings .settled { display: block; margin-top: var(--s-1); font-size: var(--t-small); color: var(--n-7); }
.findings--inline { max-width: 560px; margin: var(--s-6) 0 0; padding: var(--s-4) var(--s-5) var(--s-3); } /* inside the text column, above the day's dots */
.findings--inline li { grid-template-columns: 1fr; gap: var(--s-1); }
.findings--here { margin: var(--s-5) 0 0; padding: var(--s-4) var(--s-5) var(--s-2); } /* beside the decision it concerns */
.held { max-width: var(--w-wide); margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5); background: var(--shell); border-radius: var(--radius); font-size: var(--t-body); }
.held .label { display: block; margin-bottom: var(--s-1); }
.held.away { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); } /* information, not the security notice's Shell */
.held.away a { color: var(--ink); text-underline-offset: 3px; }
@media screen and (max-width: 899px) {
  .findings { margin-top: var(--s-6); padding: var(--s-5) var(--gut) var(--s-4); }
  .findings li { grid-template-columns: 1fr; gap: var(--s-1); }
  .findings--inline { margin-top: var(--s-5); }
}

/* ================================================================== the week: the Friday report, printable to A4 */
.week h1 { max-width: 18ch; font-size: var(--t-statement); line-height: 1; }
.wk-nav { display: flex; gap: var(--s-5); margin-top: var(--s-2); font-size: var(--t-small); }
.wk-nav:empty { display: none; }
.week .dek { max-width: 46ch; }
.week .band { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s-5) var(--s-7); margin-top: var(--s-8); padding: var(--s-6) var(--s-7); background: var(--shallow); border-radius: var(--radius); }
.week .band .big-line { margin-top: var(--s-3); font-size: var(--t-lead); line-height: 1.4; }
.week .band .n { margin-top: var(--s-3); font-family: var(--display); font-weight: 300; font-size: var(--t-statement); line-height: 1; letter-spacing: -0.02em; }
.week .band p:last-child:not(.foot) { margin-top: var(--s-2); }
.week .band .foot { grid-column: 1 / -1; padding-top: var(--s-4); border-top: 1px solid color-mix(in oklch, var(--ink) 16%, transparent); font-size: var(--t-small); color: var(--soft); }
.week .band .waiting { margin-top: var(--s-3); font-size: var(--t-body); }
.dec-list { display: grid; gap: var(--s-3); margin-top: var(--s-3); font-size: var(--t-lead); line-height: 1.4; }
.dec-list li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 2px var(--s-4); align-items: baseline; }
.dec-list li > .quiet { margin: 0; }
.dec-list .quiet { font-size: var(--t-small); color: var(--soft); }
.dec-list small { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--n-7); }
.own { margin-top: var(--s-6); padding: var(--s-5) var(--s-7) var(--s-4); background: var(--white); border-radius: var(--radius); }
.own ol { margin-top: var(--s-2); }
.own li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); font-size: var(--t-body); }
.own li > span:last-child { max-width: 75ch; }
.own .linkish { display: inline-block; margin-top: var(--s-3); }
.days { --bars: 200px; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--s-5); margin-top: var(--s-8); }
.goal { position: absolute; left: 0; right: 0; top: 0; height: var(--bars); pointer-events: none; }
.goal i { position: absolute; left: 0; right: 0; bottom: var(--g); border-top: 1.5px dashed color-mix(in oklch, var(--ink) 55%, transparent); }
.goal p { position: absolute; right: 0; bottom: calc(var(--g) + var(--s-2)); padding-left: var(--s-2); font-size: var(--t-small); color: var(--n-7); background: var(--n-0); }
.day { display: grid; grid-template-rows: var(--bars) auto; min-width: 0; }
.day > i { align-self: end; width: 40px; background: var(--ink); border-radius: 20px 20px 0 0; }
.day.is-under > i { background: var(--coral); } /* red stays for a person needed */
.day.is-open > i { background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in oklch, var(--ink) 18%, transparent) 8px 10px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.day footer { display: grid; gap: var(--s-1); align-content: start; padding-top: var(--s-3); border-top: 1px solid var(--ink); }
.day footer b { font-weight: 400; font-size: var(--t-small); text-transform: capitalize; }
.day footer span { font-family: var(--display); font-weight: 300; font-size: var(--t-figure); line-height: 1; }
.check { display: flex; gap: var(--s-2); align-items: baseline; font-size: var(--t-label); color: var(--quiet); }
.check::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.check.is-open::before { background: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.week .key { display: none; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-3); font-size: var(--t-label); color: var(--quiet); }
.week .mid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-7); align-items: start; margin-top: var(--s-8); }
.week .mid figure img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 60%; border-radius: var(--radius); }
.week .mid figcaption { margin-top: var(--s-3); font-size: var(--t-small); color: var(--quiet); }
.saw .label { margin-bottom: var(--s-3); }
.saw li { display: grid; grid-template-columns: 44px 1fr; padding: var(--s-3) 0 var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-lead); line-height: 1.4; }
.saw li b { padding-top: var(--s-1); font-weight: 400; font-size: var(--t-small); color: var(--quiet); }
@media screen and (min-width: 900px) {
  .week .band .n { font-size: 88px; } /* set on purpose: the week's number outranks its heading on a wide screen */
}
@media screen and (max-width: 899px) {
  .week h1 { font-size: var(--t-head); line-height: 1.06; }
  .week .band { grid-template-columns: 1fr; padding: var(--s-5) var(--gut); }
  .dec-list li { grid-template-columns: 1fr; } /* the date a line above its decision */
  .own { padding: var(--s-5) var(--gut); }
  .own li { grid-template-columns: 1fr; gap: 2px; }
  .days { --bars: 112px; column-gap: var(--s-3); margin-top: var(--s-6); }
  .day > i { width: 24px; }
  .day footer span { font-size: var(--t-lead); }
  .day footer b { font-size: var(--t-label); }
  .check { font-size: 0; } /* on a phone the dot says it; the key under the chart says what the dots mean */
  .week .key { display: flex; }
  .goal p { font-size: var(--t-label); }
  .week .mid { grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-7); }
  .saw li { grid-template-columns: 32px 1fr; font-size: var(--t-body); }
}

/* ================================================================== what Bob may do: the client's rules */
.rules h1 { font-size: var(--t-head); }
.meanings { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-5); font-size: var(--t-small); }
.meanings dt { display: inline; font-weight: 600; }
.meanings dd { display: inline; margin: 0 0 0 var(--s-2); color: var(--soft); }
/* the rules read as a contract in sections: each zone a band, its name on the left, its rules on the right */
.zones { display: grid; gap: var(--s-7); margin-top: var(--s-8); }
.zone { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 var(--s-7); padding: var(--s-6) var(--s-6) var(--s-4); background: var(--white); border-radius: var(--radius); }
.zone.is-read { order: 9; } /* what is always on goes last: the first thing on the page is a choice */
.zone--never { background: var(--shell); }
.zone h2 { padding-top: var(--s-3); font-family: var(--display); font-weight: 400; font-size: var(--t-title); line-height: 1.15; letter-spacing: -0.015em; }
.zone li { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 var(--s-6); align-items: center; padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.zone li:first-child { border-top: 0; }
.zone li > .row-label { font-size: var(--t-lead); line-height: 1.3; }
.zone li > em { grid-column: 1; max-width: 60ch; margin-top: var(--s-1); font-style: normal; font-size: var(--t-small); line-height: 1.45; color: var(--soft); }
.zone li > .seg { grid-column: 2; grid-row: 1 / span 3; justify-self: start; }
.zone .seg button { padding: var(--s-3) var(--s-4); font-size: var(--t-body); } /* the answers are the page's controls, sized to be pressed */
.zone .seg button.on { font-weight: 600; }
.asym { max-width: var(--w-narrow); margin-top: var(--s-5); font-size: var(--t-body); }
@media screen and (max-width: 899px) {
  .zone { grid-template-columns: 1fr; padding: var(--s-5) var(--gut) var(--s-2); }
  .zone h2 { padding: 0 0 var(--s-2); }
  .zone li { grid-template-columns: 1fr; gap: var(--s-1); } /* a rule reads as one thing, then its answer */
  .zone li > .row-label { grid-row: 1; }
  .zone li > em { grid-row: 2; margin-top: 0; }
  .zone li > .seg { grid-column: 1; grid-row: 3; justify-self: start; margin-top: var(--s-3); }
  .zone .seg button { padding: var(--s-3) var(--s-4); font-size: var(--t-body); }
  .rules .dek { display: none; }
  .meanings { gap: var(--s-2) var(--s-4); }
}
/* the rules' answer appears where the eye is: in the page, white, an ink rule */
.rules > #msg:not(:empty), .device-list + .msg:not(:empty) {
  position: static; max-width: none; margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4);
  border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: var(--t-body);
  box-shadow: inset 3px 0 0 var(--ink), inset 0 0 0 1px var(--line);
}
.rules > #msg.is-error:not(:empty), .device-list + .msg.is-error:not(:empty) { background: var(--white); box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 1px var(--line); }
.rules #msg.is-here:not(:empty) {
  position: static; grid-column: 1 / -1; width: auto; max-width: none; margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4);
  border-radius: var(--radius); background: var(--n-0); color: var(--ink); font-size: var(--t-body); box-shadow: inset 3px 0 0 var(--ink);
}
.rules #msg.is-here.is-error:not(:empty) { box-shadow: inset 3px 0 0 var(--red); }
@media screen and (max-width: 899px) {
  .rules > #msg:not(:empty) { margin-inline: calc(-1 * var(--gut)); border-radius: 0; }
  .rules #msg.is-here:not(:empty) { margin-inline: 0; }
}

/* the limit: what Bob may pay by himself, on Shallow */
.limit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-7); align-items: end; margin-top: var(--s-6); padding: var(--s-6) var(--s-6) var(--s-5); background: var(--shallow); border-radius: var(--radius); }
.limit p { font-size: var(--t-lead); line-height: 1.4; }
.limit .amount { margin-top: var(--s-2); font-family: var(--display); font-weight: 300; font-size: var(--t-statement); line-height: 1; letter-spacing: -0.02em; }
.limit .who { margin-top: var(--s-2); font-family: var(--display); font-weight: 300; font-size: var(--t-figure); line-height: 1.05; } /* information, not a field */
.limit .slider { grid-column: 1 / -1; width: 100%; height: 32px; margin: var(--s-4) 0 var(--s-1); background: none; accent-color: var(--ink); -webkit-appearance: none; appearance: none; }
.limit .slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: color-mix(in oklch, var(--ink) 22%, transparent); }
.limit .slider::-moz-range-track { height: 4px; border-radius: 2px; background: color-mix(in oklch, var(--ink) 22%, transparent); }
.limit .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--ink); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--ink); }
.limit .slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--ink); }
.limit .slider:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } /* ink on Shallow: red there is under 3:1 */
.limit.is-pending .slider { opacity: .45; }   /* waiting for the passkey: the amount stays at full strength, the slider steps back */
.limit .pending-note { margin: var(--s-2) 0 var(--s-1); font-family: var(--display); font-weight: 400; font-size: var(--t-title); letter-spacing: -0.01em; color: var(--ink); }
.limit-range { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); font-size: var(--t-small); }
.limit-exact { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); }
.limit-exact input {
  width: 8.5em; padding: var(--s-2) var(--s-4); border: 0; border-radius: 999px; text-align: right; -moz-appearance: textfield;
  font: inherit; font-size: var(--t-body); background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}
.limit-exact input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.limit-exact input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.limit-exact input::-webkit-inner-spin-button, .limit-exact input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.limit .limit-note { grid-column: 1 / -1; padding-top: var(--s-3); border-top: 1px solid color-mix(in oklch, var(--ink) 16%, transparent); font-size: var(--t-small); line-height: 1.45; color: var(--soft); }
.limit + #msg.is-here:not(:empty) { margin: var(--s-3) 0 0; }
@media screen and (max-width: 899px) {
  .limit { grid-template-columns: 1fr; padding: var(--s-5) var(--gut); }
  /* the amount and its slider together; who gets asked over it is one quiet line under them */
  .limit > div + div { order: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3em; margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid color-mix(in oklch, var(--ink) 16%, transparent); }
  .limit > div + div p { font-size: var(--t-body); color: var(--soft); }
  .limit .who { margin-top: 0; font-family: var(--text); font-weight: 400; font-size: var(--t-body); line-height: 1.4; color: var(--ink); }
  .limit .limit-note { order: 2; padding-top: var(--s-1); border-top: 0; }
}

/* connections: Bob reads the client's systems; one band each, on white (a fact, not a permission) */
.conns { display: grid; gap: var(--s-3); margin-top: var(--s-8); }
.conns:empty { display: none; }
.conn-head { display: block; margin-bottom: var(--s-1); }
.conn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-7); align-items: end; padding: var(--s-5) var(--s-6); background: var(--white); border-radius: var(--radius); }
.conn .label { display: flex; align-items: center; gap: var(--s-2); }
.conn-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--n-5); transition: background var(--fast) var(--ease); }
.conn.is-on .conn-dot { background: var(--ink); box-shadow: none; }
.conn-name { margin-top: var(--s-2); font-family: var(--display); font-weight: 300; font-size: var(--t-figure); line-height: 1.05; letter-spacing: -0.02em; color: var(--n-5); }
.conn.is-on .conn-name { color: var(--ink); }
.conn-co { display: block; margin-top: var(--s-1); font-family: var(--text); font-size: var(--t-small); color: var(--n-7); }
.conn-what { grid-column: 1; max-width: 60ch; margin-top: var(--s-2); font-size: var(--t-body); }
.conn-note { grid-column: 1 / -1; font-size: var(--t-small); color: var(--soft); }
.conn-act { justify-self: end; }
.conn .btn { min-height: 44px; padding: var(--s-2) var(--s-5); font-size: var(--t-body); }
.conn-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--s-3) var(--s-4); }
.conn-confirm p { flex: 1 1 100%; font-size: var(--t-body); }
.conn-confirm .btn { min-height: 40px; padding: var(--s-2) var(--s-4); font-size: var(--t-small); }
.conn-confirm + .busy-note { text-align: right; }
.conn .conn-act:has(.conn-confirm) { grid-column: 1 / -1; justify-self: stretch; }
.conn-how .conn-note { margin-top: var(--s-3); }
.conn-url { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-3); max-width: var(--w-narrow); margin-top: var(--s-4); }
.conn-url .code { flex: 1 1 auto; min-width: 0; margin: 0; padding: var(--s-3) var(--s-4); font: 400 var(--t-body)/1.3 var(--text); letter-spacing: 0; text-transform: none; text-align: left; background: var(--n-0); }
.conn-url .btn { flex: none; white-space: nowrap; }
@media screen and (min-width: 900px) {
  .conn .conn-confirm { flex-wrap: nowrap; }
  .conn .conn-confirm p { flex: 1 1 auto; font-size: var(--t-lead); }
}
@media screen and (max-width: 899px) {
  .conn-head { padding-inline: var(--gut); }
  .conn { grid-template-columns: 1fr; padding: var(--s-5) var(--gut); border-radius: 0; }
  .conn-act { justify-self: start; margin-top: var(--s-2); }
  .conn-url { flex-wrap: wrap; }
  .conn-url .btn { width: 100%; }
}

/* ================================================================== the record: everything Bob and you did */
.record h1 { font-size: var(--t-head); }
.record ol { margin-top: var(--s-6); }
.record li { display: grid; grid-template-columns: 64px 128px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--line); font-size: var(--t-body); line-height: 1.45; }
.record li > span { min-width: 0; overflow-wrap: anywhere; } /* a person's words can be one long word: they wrap (journey E12) */
.record li > span:first-child { color: var(--quiet); font-variant-numeric: tabular-nums; }
.record li > span:nth-child(3) { max-width: 75ch; }
.record li.is-person > span:nth-child(2) { font-weight: 600; color: var(--ink); } /* who did it is said by the name's weight */
.record li.is-person > span:nth-child(3), .record li.is-done > span:nth-child(3), .record li.is-asked > span:nth-child(3) { color: var(--ink); }
.record .rq-group ol { margin-top: 0; }
/* the record, searched: one field, three rows of filters, the days as headings */
.rq { display: grid; gap: var(--s-3); max-width: var(--w-wide); margin-top: var(--s-6); }
.rq-search { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
.rq-search input {
  min-width: 0; height: 52px; padding: 0 var(--s-4); border: 0; border-radius: var(--radius);
  font: inherit; font-size: var(--t-body); background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}
.rq-search input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.rq-search input::placeholder { color: var(--n-6); }
.rq-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.rq-rows { display: grid; gap: var(--s-3); }
.rq-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); align-items: center; }
.rq-row .label { margin: 0; }
.rq-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.rq .seg { gap: var(--s-2); padding: 0; box-shadow: none; } /* separate chips, not one long pill */
.rq .seg button, .rq-dayin button { box-shadow: none; padding-inline: var(--s-3); }
.rq .seg button:hover, .rq-dayin button:hover { box-shadow: inset 0 0 0 1px var(--line); }
.rq .seg button.on, .rq-dayin button.on { box-shadow: none; }
.rq-dayin { position: relative; display: inline-flex; }
.rq-dayin button {
  all: unset; cursor: pointer; padding: var(--s-2) var(--s-4); border-radius: 999px; font-size: var(--t-small); line-height: 1.2; color: var(--n-7);
  box-shadow: inset 0 0 0 1px var(--line); transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.rq-dayin button.on { background: var(--ink); color: var(--n-0); box-shadow: none; }
.rq-dayin button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.rq-dayin input { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.rq-toggle { display: none; }
.rq-sum { margin-top: var(--s-6); font-size: var(--t-small); color: var(--n-7); }
.rq-sum .linkish { margin-left: var(--s-2); }
.rq-printed { display: none; }
.rq-dayhead {
  position: sticky; top: 0; z-index: 1; margin: var(--s-6) 0 0; padding: var(--s-3) 0 var(--s-2);
  font: inherit; font-size: var(--t-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--n-0);
}
.rq-whobtn { all: unset; cursor: pointer; border-radius: 2px; }
.rq-whobtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.rq-whobtn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.rq-list mark { padding: 0 1px; border-radius: 2px; background: color-mix(in oklch, var(--red) 16%, transparent); color: inherit; }
.rq-empty { display: grid; gap: var(--s-4); justify-items: start; margin-top: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.rq-empty p { margin: 0; }
@media screen and (max-width: 899px) {
  .record li { grid-template-columns: 48px minmax(0, 1fr); gap: 2px var(--s-3); }
  .record li > span:nth-child(2) { color: var(--quiet); }
  .record li > span:nth-child(3) { grid-column: 2; }
  /* search and Filtrera on one row; the count close to the first day */
  .rq { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-2); row-gap: var(--s-3); align-items: end; }
  .rq-search { margin-bottom: 0; }
  .rq-rows { grid-column: 1 / -1; gap: var(--s-3); padding-top: var(--s-2); }
  .rq:not(.open) .rq-rows { display: none; }
  .rq-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .rq-when .seg { display: contents; } /* När: the day picker wraps with the other days */
  .rq-dayin button { padding: var(--s-3) var(--s-4); font-size: var(--t-body); }
  .rq-toggle {
    all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; justify-self: start; cursor: pointer;
    min-height: 52px; padding: 0 var(--s-4); border-radius: 999px; font-size: var(--t-body); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  }
  .rq-toggle.on { background: var(--ink); color: var(--n-0); box-shadow: none; }
  .rq-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
  .rq-sum { margin-top: var(--s-4); }
  .rq-group:first-of-type .rq-dayhead { margin-top: var(--s-3); }
}

/* ================================================================== people: who may say yes */
.people h1 { font-size: var(--t-head); }
.people .dek { max-width: 56ch; }
.people-list { max-width: var(--w-wide); margin-top: var(--s-6); padding: var(--s-1) var(--s-6); background: var(--white); border-radius: var(--radius); }
.person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-6); align-items: center; padding: var(--s-5) 0; }
.person + .person { border-top: 1px solid var(--line); }
.person-name { font-family: var(--display); font-weight: 500; font-size: var(--t-title); line-height: 1.15; letter-spacing: -0.01em; }
.person-meta { margin-top: var(--s-1); font-size: var(--t-body); line-height: 1.45; color: var(--soft); overflow-wrap: anywhere; }
.person-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin-top: var(--s-2); font-size: var(--t-small); }
.person-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-3); }
.person-role { font-size: var(--t-small); color: var(--n-7); }
.person-act .seg button { padding: var(--s-2) var(--s-4); font-size: var(--t-small); }
.person-act .seg button.on { background: var(--n-1); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ink) 35%, transparent); } /* a role is a state, not a command */
.you {
  margin-left: var(--s-3); padding: 2px var(--s-2); border-radius: 999px; vertical-align: 4px;
  font-family: var(--text); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); box-shadow: inset 0 0 0 1px var(--line);
}
.invite { max-width: var(--w-wide); margin-top: var(--s-6); padding: var(--s-5) var(--s-6) var(--s-6); background: var(--white); border-radius: var(--radius); }
.invite h2 { font-family: var(--display); font-weight: 300; font-size: var(--t-figure); line-height: 1.1; letter-spacing: -0.015em; }
.invite-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.invite-role { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.invite .answers { margin-top: var(--s-5); }
.invite .only { max-width: 64ch; margin-top: var(--s-3); font-size: var(--t-small); line-height: 1.5; color: var(--soft); }
.people .device-link { margin-top: var(--s-6); }
.people .mailed { max-width: 46ch; margin-bottom: var(--s-4); font-size: var(--t-lead); }
.people > .only, .people > #msg + .only { max-width: var(--w-narrow); margin-top: var(--s-5); font-size: var(--t-small); color: var(--soft); }
@media screen and (max-width: 899px) {
  .people-list { padding: 0 var(--gut); }
  .person { grid-template-columns: 1fr; }
  .person-act { justify-content: flex-start; }
  .person-act .seg button { padding: var(--s-2) var(--s-3); font-size: var(--t-small); }
  .invite { padding: var(--s-5) var(--gut) var(--s-6); }
  .invite-fields { grid-template-columns: 1fr; }
  .person-links { font-size: var(--t-body); }
}

/* ================================================================== your devices; a link to hand over */
.devices h1 { max-width: 20ch; font-size: var(--t-head); }
.devices > .answers { margin-top: var(--s-6); }
.devices > .answers + .only { max-width: 52ch; margin-top: var(--s-3); font-size: var(--t-small); line-height: 1.5; color: var(--soft); } /* the help stays with its button, at the page's measure */
.devices .label, .device small, .device b { overflow-wrap: anywhere; } /* a long e-mail or device name wraps (journey E11) */
.device-list { max-width: var(--w-wide); margin-top: var(--s-6); padding: var(--s-1) var(--s-6); background: var(--white); border-radius: var(--radius); } /* the same card as Personer */
.device-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); padding: var(--s-5) 0; font-size: var(--t-body); }
.device-list li + li { border-top: 1px solid var(--line); }
.device-list b { font-weight: 400; color: var(--ink); }
.device-list .btn { white-space: nowrap; }
.device-list .conn-confirm, .device-list .dev-name { flex: 1 1 100%; }
.device-list .conn-confirm p { white-space: normal; }
.device-list + .msg:not(:empty) { max-width: var(--w-wide); margin-top: var(--s-4); }
.device { display: grid; gap: 2px; }
.device b { font-family: var(--display); font-weight: 500; font-size: var(--t-title); line-height: 1.15; letter-spacing: -0.01em; }
.device small { font-size: var(--t-small); color: var(--n-7); }
.device .this-note { display: block; margin-top: var(--s-1); color: var(--ink); }
.device .chip, .device .you { justify-self: start; margin: 2px 0; padding: 2px var(--s-2); border-radius: 999px; font-family: var(--text); font-size: var(--t-label); line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.device .chip { border: 1px solid var(--n-5); color: var(--ink); background: none; box-shadow: none; }
.device .you { background: var(--ink); color: var(--n-0); box-shadow: none; border: 1px solid var(--ink); } /* this one is marked in ink */
.device-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.dev-name { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3); }
.dev-name .field input { height: 44px; }
.dev-sep { font-style: normal; }
.device-link { max-width: var(--w-wide); margin-top: var(--s-6); }
.device-link .code { padding: var(--s-4); font-family: var(--text); font-size: var(--t-body); letter-spacing: 0; text-transform: none; text-align: left; }
.qr { flex: none; width: 184px; margin: 0; padding: var(--s-2); background: var(--white); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); }
.qr svg { display: block; width: 100%; height: auto; }
.link-qr { display: flex; align-items: center; gap: var(--s-5); margin-bottom: var(--s-4); }
.link-qr .qr-how { max-width: 34ch; margin-top: var(--s-2); font-size: var(--t-body); }
@media screen and (min-width: 900px) {
  .device-act { flex-direction: column; align-items: flex-end; gap: 0; padding-top: 2px; }
  /* a link to hand over (an invitation, a new device): one group, the code beside what to do with it */
  .device-link { display: grid; grid-template-columns: 184px minmax(0, 1fr); column-gap: var(--s-6); align-items: start; padding: var(--s-5) var(--s-6); background: var(--white); border-radius: var(--radius); }
  .device-link .link-qr { display: contents; }
  .device-link > *, .device-link .link-qr > div { grid-column: 2; }
  .device-link .qr { grid-column: 1; grid-row: 1 / span 4; padding: 0; box-shadow: none; }
  .device-link:has(> .mailed) .qr { grid-row: 2 / span 4; }
  .device-link > .mailed { grid-column: 1 / -1; }
  .device-link .code { margin-top: var(--s-4); background: var(--n-0); }
  .device-link .answers { margin-top: var(--s-4); }
  .device-link .only { margin-top: var(--s-4); }
  .device-link .qr-how { max-width: 60ch; }
}
@media screen and (max-width: 899px) {
  .device-list { padding: 0 var(--gut); }
  .device-list li { flex-wrap: wrap; row-gap: var(--s-2); }
  .device-act { flex: 1 1 100%; gap: var(--s-3); } /* the actions sit under the device, not squeezed beside it */
  .device-act .btn--text { font-size: var(--t-body); }
  .device-link { margin-top: var(--s-7); }
  .device-link .link-qr { margin-bottom: var(--s-5); }
  .device-link .link-qr > div { order: -1; } /* who it is for, before the code */
  .device-link .code { margin-top: 0; }
  .device-link .answers { margin-top: var(--s-3); }
  .link-qr { flex-direction: column; align-items: flex-start; }
  .dev-when, .dev-what { display: block; }
  .dev-sep { display: none; }
}

/* ================================================================== Deepbob's own panel (/approve/admin): an instrument, not the desk */
.admin { min-height: 100vh; background: var(--n-0); }
.admin-bar { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-7); border-bottom: 1px solid var(--line); }
.admin-bar .label { padding: 2px var(--s-2); border-radius: 999px; font-size: var(--t-label); box-shadow: inset 0 0 0 1px var(--line); }
.admin-who { margin-left: auto; font-size: var(--t-small); color: var(--quiet); }
.admin-work { max-width: 1280px; margin: 0 auto; padding: var(--s-7) var(--s-7) var(--s-8); }
.admin-door { max-width: 560px; margin: 8vh auto 0; }
.admin-door h1 { margin-top: var(--s-3); font-size: var(--t-head); }
.admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); }
.admin-head h1 { margin-top: var(--s-3); font-size: var(--t-head); }
.admin-head .count { margin-left: var(--s-1); font-size: var(--t-title); vertical-align: 26px; color: var(--quiet); }
.ctable { margin-top: var(--s-7); background: var(--white); border-radius: var(--radius); } /* the table reads as a sheet, clear of the title */
.ctable-head, .crow-head { display: grid; grid-template-columns: minmax(0, 2.6fr) 0.9fr 0.8fr minmax(0, 1.6fr) 0.8fr 0.8fr 1fr 56px; gap: var(--s-4); align-items: center; padding: 0 var(--s-5); }
.ctable-head { padding-block: var(--s-4) var(--s-3); border-bottom: 1px solid var(--line); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--n-7); }
.crow + .crow { border-top: 1px solid var(--line); }
.crow-head { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 2.6fr) 0.9fr 0.8fr minmax(0, 1.6fr) 0.8fr 0.8fr 1fr 56px; gap: var(--s-4); align-items: center; width: 100%; padding: var(--s-5); cursor: pointer; transition: background 160ms var(--ease); }
.crow-head:hover, .crow.is-open .crow-head { background: color-mix(in oklch, var(--n-1) 55%, var(--white)); }
.crow-head:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.crow-head:hover .c-open { border-color: var(--ink); }
.c-name b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--t-title); line-height: 1.15; letter-spacing: -0.01em; }
.c-name small, .c-num small { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--quiet); overflow-wrap: anywhere; }
.c-name .c-health { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); color: var(--n-7); }
.c-name .c-health.is-warn { color: var(--ink); }
.c-num { font-size: var(--t-body); font-variant-numeric: tabular-nums; }
.c-num .dot { vertical-align: 1px; }
.c-when { font-size: var(--t-small); color: var(--n-7); }
.c-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.c-open { display: inline-block; justify-self: end; padding: var(--s-1) var(--s-4); border: 1px solid var(--line); border-radius: 999px; text-align: right; font-size: var(--t-small); color: var(--ink); }
.crow-body { padding: var(--s-3) var(--s-5) var(--s-5); background: var(--white); border-top: 1px solid var(--line); }
.crow-body .label { font-size: var(--t-label); color: var(--ink); }
.cd-health { max-width: calc((100% - var(--s-6)) / 2.4); margin: var(--s-1) 0 var(--s-5); } /* over Personer: the warning names someone there */
.cd-health ul { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.cd-health li { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--t-body); }
.cd-health .hdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--n-4); transform: translateY(-1px); }
.cd-health .is-ok .hdot { background: var(--ink); }
.cd-health .is-warn .hdot { background: var(--red); }
.cd-health .is-info { color: var(--n-7); }
.cd-health li.is-warn { order: -1; margin-bottom: var(--s-2); padding: var(--s-3) var(--s-4); font-size: var(--t-lead); background: var(--shell); border-radius: var(--radius); }
.cd-health li:not(.is-warn) { font-size: var(--t-small); color: var(--n-7); }
.cd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-6); }
.cd-people li, .cd-record li { display: grid; gap: 2px; padding: var(--s-3) 0; border-top: 1px solid var(--line); font-size: var(--t-body); }
.cd-record li { font-size: var(--t-small); } /* the record is context here; the people are what you act on */
.cd-people li b { font-weight: 400; }
.cd-people small { font-size: var(--t-small); color: var(--quiet); }
.cd-people li .btn--text { justify-self: start; min-height: 32px; padding-block: var(--s-1); }
.cd-people .reinvite { margin-top: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--n-0); border-radius: var(--radius); box-shadow: inset 3px 0 0 var(--ink); font-size: var(--t-small); }
.cd-people .reinvite.is-error { box-shadow: inset 3px 0 0 var(--red); }
.cd-people .reinvite .link-qr { align-items: flex-start; margin: var(--s-3) 0 0; }
.cd-people .reinvite .qr { width: 112px; }
.cd-people .reinvite .made-link { margin-bottom: var(--s-2); font-size: var(--t-small); overflow-wrap: anywhere; }
.cd-record li { grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-3); }
.cd-record small { display: block; margin-bottom: 1px; font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.cd-record .is-example { opacity: .62; }
.cd-link { margin-top: var(--s-3); font-size: var(--t-small); }
.empty { padding: var(--s-6) var(--s-5); color: var(--quiet); }
.create, .made { margin-top: var(--s-5); padding: var(--s-5) var(--s-6) var(--s-6); background: var(--white); border-radius: var(--radius); }
.create h2, .made h2 { font-family: var(--display); font-weight: 300; font-size: var(--t-figure); line-height: 1.1; letter-spacing: -0.015em; }
.create .only { margin-top: var(--s-3); font-size: var(--t-small); color: var(--quiet); }
.create .tpl-about { display: block; grid-column: 1 / -1; margin-top: calc(-1 * var(--s-2)); }
.create .msg:empty, .made .msg:empty { min-height: 0; margin: 0; }
.tpl-about { display: block; max-width: 46ch; margin-top: var(--s-2); font-size: var(--t-small); color: var(--quiet); }
.made { box-shadow: inset 4px 0 0 var(--ink); } /* done: a receipt, not an alert */
.made.is-unsent { box-shadow: inset 4px 0 0 var(--ink); }
.made.is-unsent > .label { color: var(--ink); }
.made.is-unsent > .label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); border-radius: 50%; background: var(--red); vertical-align: 1px; }
.made > p { max-width: 60ch; margin-top: var(--s-2); font-size: var(--t-body); }
.made .link-qr { align-items: flex-start; margin-top: var(--s-4); }
.made .qr { width: 144px; }
.made .link-qr .quiet { margin-top: var(--s-3); font-size: var(--t-small); }
.made .made-link { max-width: 72ch; margin-top: var(--s-2); padding: var(--s-3); font-size: var(--t-body); background: var(--n-0); border-radius: var(--radius); overflow-wrap: anywhere; }
.made .not-sent { margin-top: var(--s-3); font-size: var(--t-body); color: var(--ink); }
.made-link { margin-top: var(--s-2); font-size: var(--t-small); overflow-wrap: anywhere; }
@media screen and (max-width: 899px) {
  .admin-bar { padding: var(--s-3) var(--gut); }
  .admin-who { display: none; }
  .admin-work { padding: var(--s-5) var(--gut) var(--s-7); }
  .admin-head { flex-direction: column; align-items: flex-start; }
  .ctable-head { display: none; }
  .crow-head { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); padding: var(--s-4) var(--gut); }
  .crow-head .c-name { grid-column: 1 / -1; }
  .crow-head .c-chips::before { flex-basis: 100%; margin-bottom: 0; }
  .crow-head [data-k]::before { content: attr(data-k); display: block; margin-bottom: 2px; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
  .crow-body { padding: var(--s-1) var(--gut) var(--s-5); }
  .cd-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .cd-health { max-width: none; }
  .create, .made { padding: var(--s-5) var(--gut); }
}

/* ================================================================== reduced motion: the end state at once */
@media (prefers-reduced-motion: reduce) {
  .view, .stamp { animation: none; }
  .btn[aria-busy="true"]::before { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  * { transition-duration: 0ms !important; }
}

/* ================================================================== print: one sheet of A4 (the week and the record) */
@media print {
  @page { size: A4; margin: 14mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; }
  .rail, .no-print { display: none !important; }
  .app { display: block; }
  .work { padding: 0; }
  .view { animation: none; max-width: none; }
  .label { font-size: 9px; }
  /* the week */
  .week h1 { margin-top: 10px; font-size: 36px; }
  .week .dek { margin-top: 10px; font-size: 14px; }
  .days { --bars: 120px; column-gap: 16px; margin-top: 24px; }
  .day > i { width: 24px; }
  .day footer span { font-size: 20px; }
  .day footer b { font-size: 11px; }
  .check { font-size: 9px; }
  .goal p { background: #fff; font-size: 9px; }
  .week .key { display: none; }
  .week .mid { grid-template-columns: 5fr 7fr; gap: 24px; margin-top: 24px; }
  .week .mid figure img { aspect-ratio: 4 / 3; }
  .saw li { grid-template-columns: 24px 1fr; padding: 8px 0; font-size: 12px; }
  .week .band { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px 24px; margin: 24px 0 0; padding: 16px 20px; border-radius: 4px; background: none; border: 1px solid var(--line); }
  .week .band .big-line { font-size: 13px; }
  .week .band .n { font-size: 34px; }
  .week .band .foot { font-size: 9px; }
  .week, .week .mid, .week .band { break-inside: avoid; }
  .week .own { margin-top: 16px; }
  .week .own li { padding-inline: 0; }
  .dec-list li { grid-template-columns: 56px minmax(0, 1fr); }
  /* the record, searched */
  .record h1 { font-size: 30px; }
  .rq-list { max-width: 170mm; }
  .rq-sum { margin-top: 10px; font-size: 12px; color: var(--ink); }
  .rq-printed { display: block; margin-top: 4px; font-size: 12px; color: var(--n-7); }
  .rq-dayhead { position: static; margin-top: 14px; padding: 4px 0; font-size: 10px; background: none; }
  .record li { grid-template-columns: 52px 120px minmax(0, 1fr); padding: 6px 0; font-size: 13px; line-height: 1.45; break-inside: avoid; }
  .record li > span:nth-child(3) { grid-column: auto; }
  .rq-list mark { background: none; font-weight: 600; }
}