/* Fill screen — a care manager filling Home Visit Check on a visit. Class prefix: fill-
 * Colours are tokens only (see app.css); sizes follow the shell's 13–15px UI scale,
 * and Visit mode raises text to 18px and targets to 48px. */

.fill-page {
  /* Contains absolutely positioned descendants (sr-only text, popovers) inside the
     scrolling <main>, so they never extend the document and scroll the shell. */
  position: relative;
  --fill-gutter: 24px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px var(--fill-gutter) 56px;
}
.fill-measure { min-width: 0; }
@media (max-width: 900px) {
  .fill-page { --fill-gutter: 16px; padding-top: 16px; }
}

/* ── Prototype controls (not part of the product) ─────────────────────── */
.fill-proto {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 6px 8px 6px 12px; margin-bottom: 14px; font-size: 13px;
  border: 1px dashed hsl(var(--warning) / 0.5); border-radius: 10px; background: hsl(var(--warning-soft) / 0.6);
}
.fill-proto-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--warning));
}
.fill-proto-tag .icon { width: 13px; height: 13px; }
.fill-proto-item { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.fill-proto-item label { cursor: pointer; font-weight: 550; }
.fill-proto-note { margin-left: auto; font-size: 12px; color: hsl(var(--muted-foreground)); }

/* ── Header ───────────────────────────────────────────────────────────── */
.fill-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 2px 0 18px; }
.fill-head.is-sticky {
  position: sticky; top: 0; z-index: 8;
  margin: 0 calc(var(--fill-gutter) * -1) 6px; padding: 12px var(--fill-gutter);
  background: hsl(var(--surface)); border-bottom: 1px solid transparent;
  transition: box-shadow 160ms, border-color 160ms;
}
.fill-head.is-sticky.is-stuck { border-bottom-color: hsl(var(--border)); box-shadow: 0 10px 24px -20px hsl(var(--shadow) / 0.6); }
.fill-head-id { display: flex; align-items: center; gap: 14px; flex: 1 1 380px; min-width: 0; }
.fill-avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  background: hsl(var(--secondary-soft)); color: hsl(var(--secondary)); border: 1px solid hsl(var(--secondary) / 0.25);
}
.fill-head-text { min-width: 0; }
.fill-head-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fill-head-title h1 { margin: 0 4px 0 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.fill-head-sub { margin: 3px 0 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.fill-head-sub b { color: hsl(var(--foreground)); font-weight: 600; }
.fill-dot { margin: 0 6px; }
.fill-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-left: auto; }
.fill-head-meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fill-head-cta { display: flex; align-items: center; gap: 8px; }
.fill-save { display: inline-flex; min-width: 0; }
.fill-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; font-weight: 550; }
.fill-toggle label { cursor: pointer; white-space: nowrap; }
.fill-menu-wrap { position: relative; }
.fill-kebab { border-color: hsl(var(--border-strong)); color: hsl(var(--foreground)); }
.fill-kebab .icon { stroke-width: 3; }

@media (max-width: 720px) {
  .fill-head-actions { flex: 1 1 100%; margin-left: 0; }
  .fill-head-meta { flex: 1 1 100%; justify-content: space-between; flex-wrap: wrap; }
  .fill-head-cta { flex: 1 1 100%; }
  .fill-head-cta .btn { flex: 1 1 0; }
  .fill-head-title h1 { font-size: 20px; }
  .fill-dot { display: none; }
  .fill-head-sub b { display: block; }
  /* Narrow: the avatar sits beside the name, not centred against the wrapped block. */
  .fill-head-id { align-items: flex-start; gap: 12px; }
  .fill-avatar { width: 40px; height: 40px; font-size: 14px; }
}

/* ── Connection lost ──────────────────────────────────────────────────── */
.fill-offline {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 16px;
  border-radius: 10px; background: hsl(var(--warning-soft)); border: 1px solid hsl(var(--warning) / 0.35);
  animation: fade 160ms ease-out;
}
.fill-offline > .icon { color: hsl(var(--warning)); margin-top: 1px; }
.fill-offline p { margin: 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.fill-offline .fill-offline-title { margin-bottom: 2px; font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); }

/* A newer template edition went live while this assessment is open */
.fill-newer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; margin-bottom: 16px;
  border-radius: 10px; background: hsl(var(--secondary-soft)); border: 1px solid hsl(var(--secondary) / 0.3);
  animation: fade 160ms ease-out;
}
.fill-newer > .icon { color: hsl(var(--secondary)); align-self: flex-start; margin-top: 1px; }
.fill-newer-text { flex: 1 1 320px; min-width: 0; }
.fill-newer p { margin: 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.fill-newer .fill-newer-title { margin-bottom: 2px; font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); }

/* ── Layout: rail + one long page of sections ─────────────────────────── */
.fill-layout { display: flex; flex-direction: column; gap: 16px; }
.fill-layout.is-wide { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.fill-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Section rail */
.fill-rail { position: sticky; top: calc(var(--fill-sticky-top, 0px) + 16px); display: flex; flex-direction: column; gap: 14px; }
.fill-rail-card { padding: 14px 10px 10px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); }
.fill-rail-head { padding: 0 6px 12px; }
.fill-rail-count { margin: 0 0 8px; font-size: 13px; color: hsl(var(--muted-foreground)); }
.fill-rail-count b { color: hsl(var(--foreground)); font-weight: 650; }
.fill-progress { height: 6px; border-radius: 999px; background: hsl(var(--muted)); overflow: hidden; }
.fill-progress span { display: block; height: 100%; border-radius: inherit; background: hsl(var(--success)); transition: width 240ms ease-out; }
.fill-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fill-rail-item {
  position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px;
  padding: 8px; border: 0; border-radius: 8px; background: none; text-align: left;
}
.fill-rail-item:hover { background: hsl(var(--muted)); }
.fill-rail-item[aria-current] { background: hsl(var(--primary-soft)); }
.fill-rail-item[aria-current]::before {
  content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: hsl(var(--primary));
}
.fill-rail-idx {
  width: 24px; height: 24px; flex: none; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 650; border: 1.5px solid hsl(var(--border-strong));
  color: hsl(var(--muted-foreground)); background: hsl(var(--card));
}
.fill-rail-idx .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.fill-rail-item.is-complete .fill-rail-idx { background: hsl(var(--success)); border-color: hsl(var(--success)); color: hsl(var(--card)); }
.fill-rail-item.is-progress .fill-rail-idx { border-color: hsl(var(--secondary)); color: hsl(var(--secondary)); }
.fill-rail-item.is-attention .fill-rail-idx { background: hsl(var(--danger-soft)); border-color: hsl(var(--danger)); color: hsl(var(--danger)); }
.fill-rail-text { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.fill-rail-title { font-size: 13.5px; font-weight: 550; line-height: 1.3; }
.fill-rail-item[aria-current] .fill-rail-title { color: hsl(var(--primary-soft-foreground)); font-weight: 650; }
.fill-rail-foot { display: flex; flex-direction: column; gap: 8px; padding: 0 8px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.fill-rail-foot p { margin: 0; display: flex; align-items: flex-start; gap: 8px; }
.fill-rail-foot .icon { width: 14px; height: 14px; margin-top: 1px; }
.fill-keys { margin: 2px 0 0; display: flex; flex-direction: column; gap: 6px; }
.fill-keys div { display: flex; align-items: center; gap: 8px; }
.fill-keys dt { display: inline-flex; gap: 3px; min-width: 76px; }
.fill-keys dd { margin: 0; }
.fill-chip-dot { width: 6px; height: 6px; }

/* Compact section picker (narrow) */
.fill-picker {
  position: sticky; top: 0; z-index: 8;
  margin: 0 calc(var(--fill-gutter) * -1); padding: 8px var(--fill-gutter) 0;
  background: hsl(var(--surface)); border-bottom: 1px solid hsl(var(--border));
}
.fill-picker-row { display: flex; align-items: center; gap: 4px; }
.fill-picker-menu { position: relative; flex: 1; min-width: 0; }
.fill-picker-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px;
  border: 1px solid hsl(var(--border-strong)); border-radius: 10px; background: hsl(var(--card)); text-align: left;
}
.fill-picker-btn:hover { border-color: hsl(var(--primary) / 0.6); }
.fill-picker-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fill-picker-meta { font-size: 11.5px; font-weight: 600; color: hsl(var(--muted-foreground)); }
.fill-picker-title { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fill-picker .icon-btn { width: 44px; height: 44px; }
.fill-picker .icon-btn:disabled { opacity: 0.35; cursor: default; }
.fill-picker .fill-progress { height: 3px; margin: 8px calc(var(--fill-gutter) * -1) 0; border-radius: 0; }
.fill-picker .fill-progress span { border-radius: 0; }

/* ── Error summary ────────────────────────────────────────────────────── */
.fill-errsum {
  padding: 16px 18px; border-radius: 12px; border: 2px solid hsl(var(--danger)); background: hsl(var(--card));
  animation: pop 160ms ease-out;
}
.fill-errsum:focus { outline: 3px solid hsl(var(--danger) / 0.3); outline-offset: 2px; }
.fill-errsum h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 1.3; }
.fill-errsum h2 .icon { color: hsl(var(--danger)); }
.fill-errsum > p { margin: 4px 0 10px; font-size: 13px; color: hsl(var(--muted-foreground)); }
.fill-errsum ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.fill-errsum .fill-link { display: inline-block; min-height: 28px; padding: 4px 0; color: hsl(var(--danger)); }
.fill-errsum.is-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-color: hsl(var(--success)); }
.fill-errsum.is-ok:focus { outline-color: hsl(var(--success) / 0.3); }
.fill-errsum.is-ok > .icon { color: hsl(var(--success)); }
.fill-errsum.is-ok h2 { font-size: 15px; }
.fill-errsum.is-ok p { margin: 2px 0 0; font-size: 13px; color: hsl(var(--muted-foreground)); }

.fill-link {
  display: inline; padding: 2px 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: hsl(var(--primary)); font-weight: 550;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.fill-link:hover { text-decoration-thickness: 2px; }

/* ── Section cards ────────────────────────────────────────────────────── */
.fill-sec { scroll-margin-top: calc(var(--fill-sticky-top, 0px) + 16px); }
.fill-sec.is-attention { border-color: hsl(var(--danger) / 0.45); }
.fill-sec-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; }
.fill-sec:not(.is-folded) .fill-sec-head { border-bottom: 1px solid hsl(var(--border)); }
.fill-sec-idx {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}
.fill-sec-idx .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.fill-sec.is-complete .fill-sec-idx { background: hsl(var(--success-soft)); color: hsl(var(--success)); }
.fill-sec.is-progress .fill-sec-idx { background: hsl(var(--secondary-soft)); color: hsl(var(--secondary)); }
.fill-sec.is-attention .fill-sec-idx { background: hsl(var(--danger-soft)); color: hsl(var(--danger)); }
.fill-sec-titles { flex: 1; min-width: 0; padding-top: 3px; }
.fill-sec-titles h2 { margin: 0; font-size: 16.5px; line-height: 1.3; }
.fill-sec-titles h2:focus { outline: none; }
.fill-sec-titles p { margin: 2px 0 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.fill-sec-actions { display: flex; align-items: center; gap: 6px; flex: none; min-height: 32px; }
.fill-sec-body { padding: 0 20px 4px; }
.fill-sec-folded { margin: 0; padding: 0 20px 16px 60px; font-size: 13px; color: hsl(var(--muted-foreground)); }

/* Carried forward from the last assessment */
.fill-carry {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 2px; padding: 10px 12px;
  border-radius: 10px; background: hsl(var(--secondary-soft)); border: 1px solid hsl(var(--secondary) / 0.22);
}
.fill-carry > .icon { color: hsl(var(--secondary)); }
.fill-carry p { flex: 1 1 260px; margin: 0; font-size: 13px; }

/* ── Questions ────────────────────────────────────────────────────────── */
.fill-q { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 0; }
.fill-q + .fill-q { border-top: 1px solid hsl(var(--border)); }
.fill-q.has-error::before {
  content: ""; position: absolute; left: -14px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px;
  background: hsl(var(--danger));
}
.fill-q-head { display: flex; align-items: flex-start; gap: 8px; }
.fill-q-label { flex: 1; min-width: 0; margin: 0; padding-top: 5px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.fill-optional { font-weight: 400; color: hsl(var(--muted-foreground)); }
.fill-q-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-height: 32px; }
.fill-tip {
  padding: 10px 12px; border-radius: 10px; background: hsl(var(--muted)); font-size: 13px;
  animation: fade 140ms ease-out;
}
.fill-tip strong { display: block; margin-bottom: 2px; font-size: 12px; }
.fill-tip p { margin: 0; color: hsl(var(--muted-foreground)); }
.fill-hint { margin: -6px 0 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.fill-prior { margin: -4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.fill-prior .icon { width: 14px; height: 14px; }
.fill-error { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; font-weight: 600; color: hsl(var(--danger)); }
.fill-error .icon { margin-top: 2px; }
.fill-row-error { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12.5px; font-weight: 600; color: hsl(var(--danger)); }
.fill-row-error .icon { width: 13px; height: 13px; }

/* Answer chips: real options, then quiet ones after a divider */
.fill-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
.fill-chips > .seg { min-width: 0; }
.fill-chips-quiet { display: flex; padding-left: 10px; border-left: 1px solid hsl(var(--border-strong)); }

/* Yes / No with follow-up */
.fill-yesno { display: flex; flex-direction: column; gap: 12px; }
.fill-yesno > .seg button { min-width: 88px; text-align: center; }
.fill-followup { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 2px 14px; border-left: 3px solid hsl(var(--primary) / 0.3); animation: fade 160ms ease-out; }
.fill-followup label { font-size: 13.5px; font-weight: 600; }
.fill-followup.has-error { border-left-color: hsl(var(--danger)); }

/* Narrative */
.fill-text { display: flex; flex-direction: column; gap: 4px; }
.fill-text-tools { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }

/* Task grid: table */
.fill-mx { min-width: 0; }
.fill-mx-wrap { overflow-x: auto; }
.fill-matrix { width: 100%; min-width: 520px; border-collapse: collapse; table-layout: fixed; }
/* Capacity answers are the longest ("Supervision / cueing"), Support now the shortest. */
.fill-mx-c-task { width: 29%; }
.fill-mx-c-cap { width: 34%; }
.fill-mx-c-sup { width: 26%; }
.fill-mx-c-risk { width: 11%; }
.fill-matrix th, .fill-matrix td { padding: 10px 8px; text-align: left; vertical-align: middle; border-top: 1px solid hsl(var(--border)); }
.fill-matrix th:first-child { padding-left: 0; }
.fill-matrix th:last-child, .fill-matrix td:last-child { padding-right: 0; }
.fill-matrix thead th {
  padding-top: 2px; padding-bottom: 8px; border-top: 0;
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.fill-matrix thead abbr { text-decoration: none; cursor: help; }
.fill-matrix tbody th { font-weight: 550; }
.fill-matrix .fill-mx-risk, .fill-matrix .fill-mx-risk-h { text-align: center; }
.fill-matrix .fill-row-error { margin-top: 4px; }
.fill-mx-task { display: block; line-height: 1.35; }
.fill-mx-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fill-mx-tags:empty { display: none; }

/* Chip-styled select */
.fill-selchip { position: relative; display: block; color: hsl(var(--muted-foreground)); }
.fill-selchip select {
  width: 100%; min-height: 40px; padding: 8px 30px 8px 12px; appearance: none; -webkit-appearance: none;
  border-radius: 999px; border: 1px dashed hsl(var(--border-strong)); background: hsl(var(--card)); color: inherit;
  font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.fill-selchip select:hover { border-color: hsl(var(--primary) / 0.6); }
.fill-selchip select:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.fill-selchip > .icon { position: absolute; right: 11px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); pointer-events: none; }
.fill-selchip.is-set { color: hsl(var(--primary-soft-foreground)); }
.fill-selchip.is-set select { border-style: solid; border-color: hsl(var(--primary) / 0.35); background: hsl(var(--primary-soft)); }
.fill-selchip.is-invalid select { border: 1.5px solid hsl(var(--danger)); }
.fill-selchip option { color: hsl(var(--foreground)); background: hsl(var(--card)); }

/* Tick (risk) */
.fill-tick {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 44px; min-height: 44px;
  padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; font-weight: 550;
}
.fill-tick-box {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px;
  border: 1.5px solid hsl(var(--border-strong)); background: hsl(var(--card)); color: transparent;
  transition: background 120ms, border-color 120ms;
}
.fill-tick-box .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.fill-tick:hover .fill-tick-box { border-color: hsl(var(--danger) / 0.7); }
.fill-tick[aria-checked="true"] .fill-tick-box { background: hsl(var(--danger)); border-color: hsl(var(--danger)); color: hsl(var(--card)); }
.fill-tick.has-text { justify-content: flex-start; width: 100%; padding: 0 12px; border: 1px solid hsl(var(--border)); text-align: left; }
.fill-tick.has-text[aria-checked="true"] { background: hsl(var(--danger-soft)); border-color: hsl(var(--danger) / 0.4); color: hsl(var(--danger)); }

/* Task grid: stacked row cards */
.fill-mx-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fill-mx-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card)); }
.fill-mx-card.is-missing { border-color: hsl(var(--danger) / 0.6); }
.fill-mx-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fill-mx-card-head h4 { flex: 1 1 auto; margin: 0; font-size: 14px; font-weight: 600; }
.fill-mx-card .fill-mx-tags { margin-top: 0; }
.fill-mx-field { display: flex; flex-direction: column; gap: 6px; }
.fill-mx-flabel { font-size: 11.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }

/* Checklist */
.fill-check { display: flex; flex-direction: column; gap: 10px; }
.fill-check-legend { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.fill-check-legend span { display: inline-flex; align-items: center; gap: 5px; }
.fill-check-legend b { color: hsl(var(--foreground)); font-weight: 600; }
.fill-check-legend .icon { width: 14px; height: 14px; }
.fill-check-list { list-style: none; margin: 0; padding: 0; border: 1px solid hsl(var(--border)); border-radius: 10px; }
.fill-check-row { position: relative; padding: 8px 12px; }
.fill-check-row:first-child { border-radius: 10px 10px 0 0; }
.fill-check-row:last-child { border-radius: 0 0 10px 10px; }
.fill-check-row + .fill-check-row { border-top: 1px solid hsl(var(--border)); }
.fill-check-row.is-concern { background: hsl(var(--warning-soft) / 0.55); }
.fill-check-row.is-concern::before, .fill-check-row.is-missing::before {
  content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: hsl(var(--warning));
}
.fill-check-row.is-missing::before { background: hsl(var(--danger)); }
.fill-check-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 44px; }
.fill-check-label { flex: 1 1 200px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 550; }
.fill-check-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fill-check-ctl .fill-chips { gap: 6px 8px; }
.fill-check-ctl .fill-chips-quiet { padding-left: 8px; }
.fill-check-note { padding: 4px 0 6px; }
.fill-check-note .textarea { min-height: 60px; }

/* Signature */
.fill-sig { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.fill-sig-pad {
  position: relative; aspect-ratio: 3 / 1; border: 1px dashed hsl(var(--border-strong)); border-radius: 10px;
  background: hsl(var(--card)); overflow: hidden;
}
.fill-sig.is-invalid .fill-sig-pad { border: 1.5px solid hsl(var(--danger)); }
.fill-sig-pad canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair;
  color: hsl(var(--foreground)); border-radius: inherit;
}
.fill-sig-pad canvas:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -3px; }
.fill-sig-line { position: absolute; left: 20px; right: 20px; bottom: 24%; border-bottom: 1px solid hsl(var(--border-strong)); pointer-events: none; }
.fill-sig-placeholder {
  position: absolute; left: 22px; bottom: calc(24% + 8px); display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: hsl(var(--muted-foreground)); pointer-events: none;
}
.fill-sig-typed-wrap { display: flex; flex-direction: column; gap: 6px; }
.fill-sig-typed-label { font-size: 13px; font-weight: 600; }
.fill-sig-pad.is-typed { aspect-ratio: auto; min-height: 84px; display: flex; align-items: flex-end; padding: 8px 24px 24px; }
.fill-sig-pad.is-typed .fill-sig-line { bottom: 20px; }
.fill-sig-script {
  font-family: "Snell Roundhand", "Segoe Script", "Apple Chancery", "Brush Script MT", cursive;
  font-size: 34px; line-height: 1.1; color: hsl(var(--foreground)); overflow-wrap: anywhere;
}
.fill-sig-hint { margin: 0; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.fill-sig-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fill-sig-who { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.fill-sig-who b { color: hsl(var(--foreground)); font-weight: 600; }

/* Calculated total: read-only section footer */
.fill-score {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px;
  border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.55);
  border-radius: 0 0 calc(var(--radius) + 3px) calc(var(--radius) + 3px);
}
.fill-score-icon {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
}
.fill-score-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.fill-score-title { margin: 0; font-size: 14.5px; font-weight: 600; }
.fill-score-parts { margin: 0; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.fill-score-parts b { color: hsl(var(--foreground)); }
.fill-score-note { padding-top: 2px; font-size: 11.5px; white-space: nowrap; color: hsl(var(--muted-foreground)); }
.fill-bands { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fill-bands li {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); font-size: 12px; color: hsl(var(--muted-foreground));
}
.fill-bands li span { font-weight: 650; }
.fill-bands li.is-active { border-color: hsl(var(--primary) / 0.5); background: hsl(var(--primary-soft)); color: hsl(var(--primary-soft-foreground)); font-weight: 600; }

/* End of the form */
.fill-end {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border: 1px dashed hsl(var(--border-strong)); border-radius: 12px;
}
.fill-end p { margin: 0; font-size: 13.5px; color: hsl(var(--muted-foreground)); }

@media (max-width: 640px) {
  .fill-sec-head { flex-wrap: wrap; padding: 14px 16px; }
  .fill-sec-actions { width: 100%; padding-left: 40px; }
  .fill-sec-body { padding: 0 16px 4px; }
  .fill-sec-folded { padding: 0 16px 14px 56px; }
  .fill-q.has-error::before { left: -11px; }
  .fill-q-head { flex-wrap: wrap; }
  .fill-q-tags { justify-content: flex-start; }
  .fill-score { padding: 14px 16px; }
  .fill-score-note { display: none; }
  .fill-end { padding: 16px; }
  .fill-end .btn { flex: 1 1 100%; }
  .fill-chips-quiet { border-left: 0; padding-left: 0; }
  .fill-check-ctl { width: 100%; }
  .fill-check-ctl .fill-chips-quiet { padding-left: 0; }
  .fill-check-ctl .seg button { padding: 8px 10px; }
  .fill-proto-note { margin-left: 0; flex-basis: 100%; }
}

/* ── Visit mode: 18px text, 48px targets, actions within thumb reach ──── */
@media (min-width: 901px) {
  .shell:has(.fill-visit) { grid-template-columns: 0 minmax(0, 1fr); }
  .shell:has(.fill-visit) .nav { visibility: hidden; border-right: 0; }
}
.fill-visit { padding-bottom: 128px; font-size: 18px; }
.fill-visit .fill-head-title h1 { font-size: 24px; }
.fill-visit .fill-head-sub { font-size: 15px; }
.fill-visit .fill-sec-titles h2 { font-size: 20px; }
.fill-visit .fill-sec-titles p, .fill-visit .fill-carry p { font-size: 15px; }
.fill-visit .fill-q-label { font-size: 20px; }
.fill-visit .fill-hint, .fill-visit .fill-prior, .fill-visit .fill-error, .fill-visit .fill-tip,
.fill-visit .fill-check-legend, .fill-visit .fill-sig-hint, .fill-visit .fill-score-parts, .fill-visit .fill-text-tools { font-size: 16px; }
.fill-visit .fill-check-label, .fill-visit .fill-mx-task, .fill-visit .fill-mx-card-head h4, .fill-visit .fill-followup label { font-size: 17px; }
.fill-visit .fill-score-title { font-size: 17px; }
.fill-visit .seg button { min-height: 48px; padding: 10px 16px; font-size: 17px; }
.fill-visit .btn { height: 48px; padding: 0 16px; font-size: 15.5px; }
.fill-visit .icon-btn { width: 48px; height: 48px; }
.fill-visit .textarea, .fill-visit .input { font-size: 18px; }
.fill-visit .fill-selchip select { min-height: 48px; font-size: 16px; }
.fill-visit .fill-tick { min-width: 48px; min-height: 48px; }
.fill-visit .fill-tick-box { width: 26px; height: 26px; }
.fill-visit .fill-rail-item { min-height: 52px; }
.fill-visit .fill-rail-title { font-size: 16px; }
.fill-visit .fill-picker-btn { min-height: 56px; }
.fill-visit .fill-picker-title { font-size: 17px; }
.fill-visit .fill-link { min-height: 32px; }
.fill-visit .badge { height: 26px; font-size: 13px; }
.fill-visit .fill-toggle { font-size: 15px; }
.fill-visit .fill-proto .btn { height: 32px; padding: 0 10px; font-size: 12.5px; }

.fill-visitbar {
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  display: flex; gap: 8px; padding: 8px; border-radius: 16px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: 0 16px 40px -12px hsl(var(--shadow) / 0.4);
  animation: pop 160ms ease-out;
}
.fill-visitbar .btn { height: 52px; padding: 0 20px; border-radius: 12px; font-size: 16px; }
.shell:has(.fill-visitbar) .toast-stack { bottom: 100px; }
@media (max-width: 640px) {
  .fill-visitbar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .fill-visitbar .btn { flex: 1 1 0; padding: 0 12px; }
}

/* Inputs never below 16px on touch screens, so iPadOS doesn't zoom */
@media (pointer: coarse) {
  .fill-page .textarea, .fill-page .input, .fill-selchip select { font-size: 16px; }
}

/* ── Review & complete ────────────────────────────────────────────────── */
.fill-review { display: flex; flex-direction: column; gap: 16px; max-width: 880px; margin: 0 auto; }
.fill-done {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-radius: 12px;
  background: hsl(var(--success-soft)); border: 1px solid hsl(var(--success) / 0.35); animation: pop 180ms ease-out;
}
.fill-done:focus { outline: 3px solid hsl(var(--success) / 0.3); outline-offset: 2px; }
.fill-done-icon { display: grid; color: hsl(var(--success)); }
.fill-done h2 { margin: 0; font-size: 16px; }
.fill-done p { margin: 2px 0 0; font-size: 13.5px; color: hsl(var(--muted-foreground)); }
.fill-rv-head h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.fill-rv-head h2:focus:not(:focus-visible) { outline: none; }
.fill-rv-head > p { margin: 4px 0 12px; color: hsl(var(--muted-foreground)); }
.fill-rv-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fill-rv-stats li {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); font-size: 13px; color: hsl(var(--muted-foreground));
}
.fill-rv-stats b { color: hsl(var(--foreground)); }
.fill-rv-stats li.is-score { background: hsl(var(--primary-soft)); border-color: hsl(var(--primary) / 0.3); color: hsl(var(--primary-soft-foreground)); }
.fill-rv-stats li.is-score b { color: inherit; }
.fill-rv-stats .icon { width: 14px; height: 14px; }
.fill-rv-sec { padding: 4px 20px 8px; }
.fill-rv-sec h3 { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; font-size: 15.5px; }
.fill-rv-idx {
  width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}
.fill-rv-list { margin: 0; }
.fill-rv-item {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; align-items: start; gap: 6px 20px;
  padding: 12px 0; border-top: 1px solid hsl(var(--border));
}
.fill-rv-item:first-child { border-top: 0; }
.fill-rv-item dt { font-size: 13.5px; color: hsl(var(--muted-foreground)); }
.fill-rv-item dd { margin: 0; min-width: 0; }
.fill-rv-item.is-matrix, .fill-rv-item.is-checklist { grid-template-columns: minmax(0, 1fr) auto; }
.fill-rv-item.is-matrix dd, .fill-rv-item.is-checklist dd { grid-column: 1 / -1; grid-row: 2; }
.fill-rv-change { justify-self: end; }
.fill-rv-auto { justify-self: end; font-size: 12px; color: hsl(var(--muted-foreground)); }
.fill-rv-none { font-style: italic; color: hsl(var(--muted-foreground)); }
.fill-rv-val { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fill-rv-answer { font-weight: 550; }
q.fill-rv-answer, .fill-rv-follow q { font-weight: 450; }
.fill-rv-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fill-rv-tags:empty { display: none; }
.fill-rv-was { flex-basis: 100%; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.fill-rv-follow { flex-basis: 100%; display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; font-size: 13.5px; }
.fill-rv-follow span { font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.fill-rv-table-wrap { overflow-x: auto; }
.fill-rv-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 13.5px; }
.fill-rv-table th, .fill-rv-table td { padding: 8px 12px 8px 0; text-align: left; vertical-align: top; border-top: 1px solid hsl(var(--border)); }
.fill-rv-table thead th {
  border-top: 0; font-size: 11.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.fill-rv-table tbody th { font-weight: 550; }
.fill-rv-table .fill-rv-tags { display: flex; margin-top: 4px; }
.fill-rv-table .fill-rv-was { display: block; margin-top: 2px; font-weight: 400; }
.fill-rv-risk { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: hsl(var(--danger)); }
.fill-rv-risk .icon { width: 14px; height: 14px; }
.fill-rv-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fill-rv-checks li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; }
.fill-rv-check-label { flex: 1 1 220px; min-width: 0; }
.fill-rv-note { flex-basis: 100%; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.fill-rv-sig { display: flex; flex-direction: column; gap: 4px; }
.fill-sig-svg {
  width: 220px; max-width: 100%; height: auto; color: hsl(var(--foreground));
  fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
}
.fill-sig-script.is-preview { font-size: 30px; }
.fill-attrib {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px;
  background: hsl(var(--muted) / 0.6); font-size: 12.5px; color: hsl(var(--muted-foreground));
}
.fill-attrib p { margin: 0; display: flex; align-items: flex-start; gap: 8px; }
.fill-attrib .icon { width: 14px; height: 14px; margin-top: 2px; }
.fill-attrib .is-ai { color: hsl(var(--ai)); }
.fill-rv-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 4px; }

@media (max-width: 640px) {
  .fill-rv-sec { padding: 4px 16px 8px; }
  .fill-rv-item { grid-template-columns: minmax(0, 1fr) auto; }
  .fill-rv-item dd { grid-column: 1 / -1; grid-row: 2; }
  .fill-rv-actions .btn { flex: 1 1 100%; }
}
#fill-review-title:focus { outline: none; }