/* ============================================================================
   Verity · carer.css — the corridor surface.

   Not the console at a narrow viewport. A different product on the same
   tokens: three destinations, 48px targets because of gloves, one task per
   screen, and the primary action bottom-anchored in the thumb zone.
   ========================================================================== */

/* The phone frame exists only so a desktop viewer can see the real thing at
   the real size. On an actual handset it collapses to the viewport. */
.phone-stage {
  min-height: 100vh; background: var(--canvas);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s-8) var(--s-4);
  gap: var(--s-6);
}
.phone-note { max-width: 62ch; text-align: center; color: var(--ink-2); font-size: var(--t-body); }
.phone-note strong { color: var(--ink); }
.phone {
  width: 390px; max-width: 100%; height: 780px; max-height: 88vh;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 30px; box-shadow: var(--e-3);
  display: flex; flex-direction: column; overflow: hidden;
  position: relative;
}
@media (max-width: 767px) {
  .phone-stage { padding: 0; }
  .phone { width: 100%; height: 100vh; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .phone-note, .phone-caption { display: none; }
}
.phone-caption { font-size: var(--t-meta); color: var(--ink-3); text-align: center; max-width: 46ch; }

/* ── Header. The offline queue chip lives here on every screen — permanent
   system state, not a toast that a carer will miss. ─────────────────────── */
.c-head {
  flex: none; background: var(--chrome); color: var(--ink-on-chrome);
  padding: var(--s-3) var(--s-4);
}
.c-head-row { display: flex; align-items: center; gap: var(--s-3); min-height: 32px; }
.c-title { font-weight: 700; font-size: var(--t-h4); min-width: 0; }
.c-sub { font-size: var(--t-meta); color: var(--ink-on-chrome-2); }
.c-back {
  width: 36px; height: 36px; display: grid; place-items: center; flex: none;
  border-radius: var(--r-sm); color: var(--ink-on-chrome);
}
.c-queue {
  display: flex; align-items: center; gap: 6px;
  margin-top: var(--s-2); padding: 6px var(--s-3);
  border-radius: var(--r-full); font-size: var(--t-meta); font-weight: 600;
  background: rgba(255,255,255,.09); color: var(--ink-on-chrome-2);
}
.c-queue.is-pending { background: var(--st-elevated-fill); color: var(--st-elevated); }

/* Identity bar — sticky, never scrolls away, because knowing who you are
   recording against is not optional. */
.c-identity {
  flex: none; padding: var(--s-3) var(--s-4);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.c-flags { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }

.c-body { flex: 1 1 auto; overflow-y: auto; padding: var(--s-4); -webkit-overflow-scrolling: touch; }
.c-body > * + * { margin-top: var(--s-3); }

/* ── Task card. 48px minimum everywhere, 80px for the row itself. ───────── */
/* These are anchors so the whole row is one tap target. They must not inherit
   link colour or underline — the row is a card, not a sentence with a link in it. */
.c-task {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-2);
  text-decoration: none; color: var(--ink);
  transition: transform var(--d-press) var(--ease-out);
}
.c-task:active { transform: scale(.99); }
.c-task, .c-task * { text-decoration: none; }
.c-task.is-due { box-shadow: inset 0 3px 0 var(--st-elevated); }
.c-task.is-overdue { box-shadow: inset 0 3px 0 var(--st-overdue); }
.c-task.is-critical { box-shadow: inset 0 3px 0 var(--st-critical-fill); }
.c-task-top { display: flex; align-items: center; gap: var(--s-3); }
.c-task-when { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-body-lg); flex: none; color: var(--ink); }
.c-task-who { min-width: 0; }
.c-task-name { font-weight: 600; font-size: var(--t-body-lg); color: var(--ink); }
.c-task-room { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--ink-3); }
.c-task-what { font-size: var(--t-body-lg); color: var(--ink-2); }

/* ── Quick-record grid. Three taps, not a nine-field form. ──────────────── */
.c-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.c-tile {
  min-height: 92px; border-radius: var(--r-lg);
  border: 1px solid var(--line-strong); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--t-body); font-weight: 600; color: var(--ink-2);
  transition: transform var(--d-press) var(--ease-out), border-color var(--d-hover) var(--ease-out);
}
.c-tile:active { transform: scale(.97); }
.c-tile.is-on { border-color: var(--brand); background: var(--brand-wash); color: var(--brand); }
.c-tile .ic { width: 26px; height: 26px; }

.c-chipset { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.c-chip {
  min-height: 48px; padding: 0 var(--s-4); border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: var(--t-body); font-weight: 600; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.c-chip:active { transform: scale(.97); }
.c-chip.is-on { border-color: var(--brand); background: var(--brand-wash); color: var(--brand); }

.c-textarea {
  width: 100%; min-height: 120px; padding: var(--s-3);
  font-size: var(--t-body-lg); line-height: var(--lh-prose);
  border: 1px solid var(--line-control); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
}

/* The inline prompt: the system reads the record as the carer writes into it. */
.c-prompt {
  padding: var(--s-3); border-radius: var(--r-md);
  background: var(--st-draft-fill); border: 1px dashed var(--st-draft-line);
  color: var(--st-draft); font-size: var(--t-body);
  display: flex; gap: var(--s-2); align-items: flex-start;
  transition: opacity var(--d-pop) var(--ease-out);
}
@starting-style { .c-prompt { opacity: 0; } }
.c-prompt .ic { flex: none; margin-top: 2px; }

/* ── Bottom action. Thumb zone, full width, never scrolls out of reach. ─── */
.c-action {
  flex: none; padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--line); background: var(--surface);
}
.c-btn {
  width: 100%; min-height: 56px; border-radius: var(--r-md);
  font-size: var(--t-body-lg); font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  background: var(--brand-fill); color: var(--brand-ink);
  transition: transform var(--d-press) var(--ease-out), background var(--d-hover) var(--ease-out);
}
.c-btn:active { transform: scale(.98); }
.c-btn.is-secondary { background: var(--surface-3); color: var(--ink); }
.c-btn.is-offline { background: var(--st-elevated); color: #fff; }
.c-btn[disabled] { opacity: .5; }

/* ── Tab bar. Three destinations, ever. ─────────────────────────────────── */
.c-tabs {
  flex: none; display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); background: var(--surface);
}
.c-tab {
  min-height: 56px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  font-size: var(--t-meta); font-weight: 600; color: var(--ink-3); text-decoration: none;
}
.c-tab.is-on { color: var(--brand); }
.c-tab .ic { width: 22px; height: 22px; }

/* No hover states at all on this surface — there is no pointer. */