/* Daily Life Doc, round 10 (zone X): the clinician's screens (js/clin/*.js; the page's Part 6, phones 2, 3, 3b and
   13): To check (`checks`, a page with no header), one item (`check`) and the patient read only (`clin-patient`).
   Tokens and the type scale of base.css only. The clinician's colour is the app's blue (--note, --note-d), the colour
   of every clinician line in the care team's chat. */

/* ---- To check: the small word "Clinician" over the title, then groups of white rows (as To review) ---- */
.cl { min-height: 100%; display: flex; flex-direction: column; }
.cl-top { padding: 10px 2px 2px; }
.cl-top p { font-size: var(--t-xs); font-weight: 600; color: var(--note-d); }
.cl-top h1 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.cl-g { margin-top: 22px; }
.cl-g[hidden] { display: none; }
.cl-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; padding: 0 2px; font-size: var(--t-sm); font-weight: 600; line-height: 24px; letter-spacing: .02em; color: var(--ink2); }
.cl-h .num { color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-rows { padding: 2px 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.cl-rows:empty { display: none; }
.cl-wait { display: grid; place-items: center; padding: 22px 0; color: var(--ink3); }
.cl-wait[hidden], .cl-none[hidden] { display: none; }
.cl-none { padding: 14px 2px 0; font-size: var(--t-s); color: var(--ink2); }

/* One row: the first letter in a round mark, the title (two lines at most), the patient and the kind under it. */
.cl-row { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 0; text-align: left; transition: opacity var(--m-press) ease; }
.cl-row + .cl-row { border-top: 1px solid var(--line); }
button.cl-row:active { opacity: .55; }
.cl-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--note); color: var(--note-d); font-size: var(--t-m); font-weight: 700; }
.cl-m { flex: 1; min-width: 0; display: block; }
.cl-m b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-m); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.cl-m small { display: block; margin-top: 2px; font-size: var(--t-xs); line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }
.cl-m small.cl-passed { font-weight: 600; color: var(--ink); }
/* Review RF2 (K1): how the patient's experiment goes, the line a clinician reads first. */
.cl-m small.cl-glance { margin-top: 4px; font-weight: 500; color: var(--ink); }
.cl-row.is-done .cl-m b { font-weight: 400; color: var(--ink2); }
.cl-row.is-done .cl-av { background: var(--soft); color: var(--ink2); }
.cl-chev { flex: none; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border: solid var(--ink3); border-width: 1.7px 1.7px 0 0; transform: rotate(45deg); }
/* Join: the one dark button of a call's row; grey while the care team's call does not ring or run. */
.cl-join { flex: none; min-height: 38px; padding: 0 16px; border-radius: 19px; background: var(--ink); color: var(--on-ink); font-size: var(--t-s); font-weight: 600;
  transition: transform var(--m-press) var(--ease-out), background var(--m-step) ease, color var(--m-step) ease; }
.cl-join:active { transform: scale(.95); }
.cl-push { margin-top: 26px; }
.cl-push:empty { display: none; }
.cl-out { margin-top: auto; padding-top: 28px; }
.cl-out .btn { height: 52px; font-size: var(--t-m); }
.cl-out .btn svg { width: 20px; height: 20px; }

/* ---- One item: the title, the patient's name (a link) and the kind, groups of quiet lines, the foot ---- */
.pg[data-page="check"] .pg-body { display: flex; flex-direction: column; padding-bottom: 0; }
.ci { flex: 1; }
.ci-title { font-size: var(--t-xl); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; padding: 0 2px; overflow-wrap: anywhere; }
.ci-title:empty { display: none; }
/* One line of words that wraps word by word ("Kabir Anand · Document · Sent to the patient"), never a line that starts
   with "·"; the name keeps a tall tap area by padding, not by height. */
.ci-who { margin-top: 4px; padding: 6px 2px; font-size: var(--t-s); line-height: 1.5; color: var(--ink2); }
.ci-name { display: inline; padding: 8px 0; font: inherit; font-weight: 600; color: var(--note-d); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ci-g { margin-top: 20px; }
.ci-g[hidden] { display: none; }
.ci-h { margin: 0 0 6px; padding: 0 2px; font-size: var(--t-sm); font-weight: 600; line-height: 24px; letter-spacing: .02em; color: var(--ink2); }
.ci-h small { font-size: var(--t-xs); font-weight: 400; letter-spacing: 0; color: var(--ink3); }
/* A group is one white area of lines (a text document: no frame around a single line). */
.ci-lines { padding: 2px 16px; border-radius: 18px; background: var(--surface); }
.ci-l { padding: 11px 0; font-size: var(--t-m); line-height: 1.45; overflow-wrap: anywhere; }
.ci-l + .ci-l { border-top: 1px solid var(--line); }
.ci-l small { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--ink2); }
/* The patient's photos with the words of an item, and with a Photo answer on the read-only Today (fixer H1): 64 px
   squares, a tap opens one large. */
.ci-ph.ph-strip { margin: 0 0 11px; gap: 8px; }
.ci-ph .ph-t, .cp-ph .ph-t { width: 64px; height: 64px; border-radius: 12px; }
.cp-ph.ph-strip { margin: 8px 0 0; gap: 8px; }
.ci-draft { padding: 12px 16px; border-radius: 18px; background: var(--surface); font-size: var(--t-m); line-height: 1.5; overflow-wrap: anywhere; }
.ci-draft[hidden] { display: none; }
/* The draft drawn as the patient will see it (a bubble, an action, values) and the clinician's edit view in its place. */
.ci-draft .ci-body { display: grid; gap: 6px; }
.ci-draft p { margin: 0; }
.ci-dr.is-editing .ci-draft, .ci-dr.is-editing .ci-doc { display: none; }
.ci-edw:empty { display: none; }
.ci-ed { display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: var(--surface); }
.ci-ed .pc-in { background: var(--soft); font-size: var(--t-m); }
.ci-doc:not(:empty) { margin-top: 6px; }
.ci-card { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); text-align: left;
  transition: transform var(--m-press) var(--ease-out); }
.ci-card:active { transform: scale(.985); }
.ci-card span { flex: 1; min-width: 0; }
.ci-card b { display: block; font-size: var(--t-m); font-weight: 600; line-height: 1.35; }
.ci-card small { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--ink2); overflow-wrap: anywhere; }
/* Round 11: a document's template and its interactive blocks, one quiet line under its first words. */
.ci-card small.ci-meta { margin-top: 6px; color: var(--ink3); }
.ci-wait { display: grid; place-items: center; padding: 40px 0; color: var(--ink3); }
.ci-wait[hidden] { display: none; }
/* On this item: the care team's lines on white, the clinician's own ("You") on the clinician's blue. */
.ci-ts { display: grid; gap: 6px; }
.ci-t { padding: 10px 14px; border-radius: 18px; background: var(--surface); }
.ci-t.is-mine { background: var(--note); }
.ci-t b { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink2); }
.ci-t.is-mine b { color: var(--note-d); }
.ci-t p { margin-top: 2px; font-size: var(--t-s); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }

/* The foot stays at the bottom of the page: the note box, then Approve, Edit, No (or the box and Send). */
.ci-foot { position: sticky; bottom: 0; z-index: 2; margin: 18px calc(-1 * var(--gut)) 0; padding: 10px var(--gut) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); box-shadow: 0 -1px 0 var(--line); }
.ca { display: grid; gap: 10px; }
.ca-box { display: block; width: 100%; min-height: 48px; max-height: 132px; padding: 13px 16px; border: 0; border-radius: 16px; background: var(--soft); resize: none; outline: 0;
  font: inherit; font-size: var(--t-m); line-height: 1.4; color: var(--ink); }
.ca-box::placeholder { color: var(--ink3); }
.ca-err { margin: -4px 2px 0; font-size: var(--t-s); font-weight: 500; color: var(--bad-d); }
.ca-err[hidden] { display: none; }
.ca-err.shake { animation: ac-shake 200ms ease; }
.ca-acts { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.ca-acts.ca-two { grid-template-columns: 1.4fr 1fr; }
.ca-acts .btn { height: 50px; padding: 0 8px; font-size: var(--t-m); }
.ca-line { grid-template-columns: 1fr auto; align-items: end; }
.ca-line .btn { height: 48px; }
.ca-lab { margin: 10px 2px 6px; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); }
textarea.ca-edit { min-height: 84px; resize: none; outline: 0; font: inherit; font-size: var(--t-m); }
textarea.ca-edit + textarea.ca-edit { margin-top: 10px; }

/* ---- The patient, read only: the bar "Read only · Close", the patient, Today and Atlas ---- */
.pg[data-page="clin-patient"] .pg-head [data-back] { display: none; }
.pg[data-page="clin-patient"] .pg-head h2 { font-size: var(--t-s); font-weight: 600; color: var(--note-d); }
.pg[data-page="clin-patient"] .pg-head { min-height: 64px; }
.cp-close { min-height: 40px; padding: 0 16px; border-radius: 20px; background: var(--note); color: var(--note-d); font-size: var(--t-s); font-weight: 600; transition: transform var(--m-press) var(--ease-out); }
.cp-close:active { transform: scale(.95); }
.cp-who { display: flex; align-items: center; gap: 12px; padding: 0 2px; }
.cp-who h3 { font-size: var(--t-l); font-weight: 600; line-height: 1.3; }
.cp-who small { display: block; font-size: var(--t-sm); color: var(--ink2); }
.cp-tabs { display: flex; gap: 6px; margin: 16px 0 4px; }
.cp-tabs button { min-height: 38px; padding: 0 16px; border-radius: 19px; font-size: var(--t-s); font-weight: 600; color: var(--ink2); transition: background var(--m-step) ease, color var(--m-step) ease; }
.cp-tabs button.on { background: var(--ink); color: var(--on-ink); }
.cp-body { position: relative; padding-bottom: 24px; }
.cp-exp { margin: 16px 0 4px; padding: 0 2px; font-size: var(--t-l); font-weight: 600; line-height: 1.35; }
.cp-exp small { font-size: var(--t-sm); font-weight: 400; color: var(--ink2); }
.cp-exp[hidden], .cp-h[hidden], .cp-none[hidden] { display: none; }
.cp-h { margin: 18px 0 6px; padding: 0 2px; font-size: var(--t-sm); font-weight: 600; line-height: 24px; letter-spacing: .02em; color: var(--ink2); }
.cp-rows { padding: 2px 16px; border-radius: 22px; background: var(--surface); }
.cp-rows:empty { display: none; }
.cp-r { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; }
.cp-r + .cp-r { border-top: 1px solid var(--line); }
.cp-o { flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; box-shadow: inset 0 0 0 1.8px var(--ink3); }
.cp-o.is-done { background: var(--ink); box-shadow: none; }
.cp-m { flex: 1; min-width: 0; font-size: var(--t-m); line-height: 1.45; overflow-wrap: anywhere; }
.cp-m b { font-weight: 600; white-space: nowrap; }
.cp-m small { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--ink2); }
/* Round 12 (zone RV): Status, in place of the patient's Today (js/clin/clin-status.js): the experiment's name, "Day 4
   of 14" and a strip of its days; Actions done, each with one mark per day and "3 of 4"; the measures (the Progress
   page's charts, read only); the insights sent. The marks use the Progress page's colour (--exp-ink). */
.cs { --exp-ink: #3C4D14; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cs { --exp-ink: #B9CF7C; } }
:root[data-theme="dark"] .cs { --exp-ink: #B9CF7C; }
.cs-head:empty { display: none; }
.cs-top { margin-top: 14px; padding: 16px; border-radius: 22px; background: var(--surface); }
.cs-name { margin: 0; font-size: var(--t-l); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.cs-day { margin: 2px 0 0; font-size: var(--t-s); color: var(--ink2); }
/* Review RF2 (K2): one line per measure, first answer → latest, under the day. */
.cs-glance { margin-top: 10px; }
.cs-glance p { margin: 0; font-size: var(--t-s); font-weight: 500; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.cs-glance p + p { margin-top: 2px; }
.cs-strip { display: flex; gap: 3px; margin-top: 12px; }
.cs-strip i { flex: 1; height: 8px; border-radius: 4px; background: var(--soft); }
.cs-strip i.is-past { background: var(--exp-ink); opacity: .55; }
.cs-strip i.is-now { background: var(--exp-ink); }
.cs-sec { margin-top: 18px; }
.cs-sec[hidden], .cs-wait[hidden] { display: none; }
.cs-wait { display: grid; place-items: center; padding: 32px 0; color: var(--ink3); }
.cs-sec .cp-h { margin-top: 0; }
.cs-rows { padding: 2px 16px; border-radius: 22px; background: var(--surface); }
.cs-a { padding: 12px 0; }
.cs-a + .cs-a, .cs-i + .cs-i { border-top: 1px solid var(--line); }
.cs-at { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cs-at span { min-width: 0; font-size: var(--t-m); line-height: 1.4; overflow-wrap: anywhere; }
.cs-at em { flex: none; font-style: normal; font-size: var(--t-s); font-weight: 600; color: var(--ink); }
.cs-marks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cs-marks i { width: 12px; height: 12px; border-radius: 50%; background: var(--soft); }
.cs-marks i.is-done { background: var(--exp-ink); }
.cs-marks i.is-not { background: none; box-shadow: inset 0 0 0 1.6px var(--exp-ink); }
.cs-marks i.is-off { height: 2px; margin-top: 5px; border-radius: 1px; background: var(--line); }
.cs-prog { padding: 14px 16px 10px; border-radius: 22px; background: var(--surface); }
.cs-prog .xe-ph.first { display: none; }
.cs-prog .xm { pointer-events: none; }
.cs-i { padding: 12px 0; }
.cs-i .ins { padding: 0; }
.cs-i .ins p { margin: 0; }
.cs-i .ins .ins-d { margin-top: 4px; }
.cs-i > p { margin: 0; font-size: var(--t-m); line-height: 1.5; overflow-wrap: anywhere; }
.cs-i small { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--ink3); }
.cp-sec { margin-top: 18px; }
.cp-sec .cp-h { margin-top: 0; }
.cp-sub { margin: 8px 2px 4px; font-size: var(--t-xs); font-weight: 600; color: var(--ink3); }
.cp-lines { padding: 4px 16px; border-radius: 22px; background: var(--surface); list-style: none; }
.cp-lines li { padding: 10px 0; font-size: var(--t-m); line-height: 1.45; overflow-wrap: anywhere; }
.cp-lines li + li { border-top: 1px solid var(--line); }

/* F4 (WALK-3 fault 8): on a theme or a document, the patient's messages, Atlas and answers fold under the draft. */
.ci-fold { margin-top: 20px; }
.ci-fold > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; list-style: none; cursor: pointer;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink2); }
.ci-fold > summary::-webkit-details-marker { display: none; }
.ci-fold > summary::after { content: '›'; font-size: 1.2em; line-height: 1; transition: transform var(--m-tab, 200ms) var(--ease-out, ease); }
.ci-fold[open] > summary::after { transform: rotate(90deg); }
.ci-fold > .ci-g:first-of-type { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .ci-fold > summary::after { transition: none; } }