/* Form Desk. MedicalCert brand: navy #0b3d91, green #00823b, Inter / system stack.
   One set of tokens; dark mode redefines them. Mobile first; the form workspace becomes a
   two-column layout from 960px, and below that the side panel is a bottom sheet. */

:root {
  --navy: #0b3d91; --navy-700: #0a3580; --navy-900: #081f3f; --navy-50: #eef3fb; --navy-100: #dbe6f7;
  --green: #00823b; --green-50: #e7f5ed;
  --amber: #b25400; --amber-50: #fff4e5;
  --red: #c7321b; --red-50: #fdeeeb;
  --grey-50: #f7f8fa; --grey-100: #eef0f3; --grey-200: #e2e5ea; --grey-300: #c9ced6; --grey-500: #6b7380; --grey-700: #3a414c;

  --bg: var(--grey-50);
  --surface: #ffffff;
  --surface-2: var(--grey-50);
  --ink: #121722;
  --ink-2: var(--grey-700);
  --muted: var(--grey-500);
  --line: var(--grey-200);
  --line-strong: var(--grey-300);
  --accent: var(--navy);
  --accent-ink: #ffffff;
  --accent-soft: var(--navy-50);
  --focus: 0 0 0 3px rgba(11, 61, 145, .28);

  --role-admin: var(--navy); --role-admin-bg: rgba(11, 61, 145, .08);
  --role-clinician: var(--green); --role-clinician-bg: rgba(0, 130, 59, .09);
  --role-system: var(--amber); --role-system-bg: rgba(178, 84, 0, .08);

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, .16);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tap: 40px;
  color-scheme: light;
}
@media (pointer: coarse) { :root { --tap: 44px; } }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f131a; --surface: #171c25; --surface-2: #1d232e; --ink: #e8ecf2; --ink-2: #c3cad5; --muted: #8b95a5;
    --line: #2a313d; --line-strong: #394252; --accent: #6f9df0; --accent-ink: #0b1220; --accent-soft: rgba(111, 157, 240, .14);
    --navy-50: rgba(111, 157, 240, .14); --green-50: rgba(46, 190, 110, .14); --amber-50: rgba(240, 160, 70, .14); --red-50: rgba(240, 100, 80, .14);
    --green: #3cc47b; --amber: #f0a046; --red: #f07a66;
    --role-admin: #7ea8f2; --role-admin-bg: rgba(126, 168, 242, .12);
    --role-clinician: #3cc47b; --role-clinician-bg: rgba(60, 196, 123, .12);
    --role-system: #f0a046; --role-system-bg: rgba(240, 160, 70, .12);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
    --focus: 0 0 0 3px rgba(111, 157, 240, .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 650; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.stack > * + * { margin-top: 12px; }
.stack-sm > * + * { margin-top: 6px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row-end { justify-content: flex-end; }
.spacer { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px;
  background: #fff; color: #3a3f47; border-bottom: 1px solid #e6e8ec; }
.brand { display: flex; align-items: center; gap: 12px; color: #3a3f47; text-decoration: none; min-width: 0; }
.brand-logo { height: 28px; width: auto; display: block; flex: none; }
.brand-sep { width: 1px; height: 22px; background: #d9dce1; }
.brand-name { font-size: 15px; font-weight: 600; color: #3a3f47; letter-spacing: -.01em; white-space: nowrap; }
.topnav { display: flex; gap: 4px; margin-left: 8px; }
.topnav a { color: #5b616b; text-decoration: none; font-size: 14px; font-weight: 550; padding: 6px 10px; border-radius: 8px; }
.topnav a:hover { color: #1f2329; background: #f2f3f5; }
.topnav a[aria-current="page"] { color: #1f2329; background: #eceef1; }
.user { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #eceef1; color: #3a3f47; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.user-name { font-size: 13px; line-height: 1.2; color: #3a3f47; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-name small { display: block; color: #7a808a; }
.topbar .btn-ghost { color: #3a3f47; }
.topbar .btn-ghost:hover { background: #f2f3f5; color: #1f2329; }
@media (max-width: 640px) { .user-name, .topnav { display: none; } .brand-logo { height: 24px; } .brand-sep, .brand-name { display: none; } }

/* ── page scaffolding ────────────────────────────────────────────────────── */
main { min-height: calc(100vh - 56px); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 24px 16px 64px; }
.page-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head p { margin-top: 4px; }
.grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ── cards ───────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-h p { margin-top: 2px; }
.card-b { padding: 16px 20px; }
.card-b.flush { padding: 0; }
@media (max-width: 640px) { .card-h, .card-b { padding-left: 16px; padding-right: 16px; } }

/* ── forms ───────────────────────────────────────────────────────────────── */
label, .label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 14px 0 6px; }
.field:first-child > label { margin-top: 0; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  width: 100%; min-height: var(--tap); font: inherit; font-size: 15px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 12px; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); vertical-align: -3px; margin: 0 8px 0 0; }
.check { display: flex; align-items: flex-start; gap: 0; font-weight: 500; color: var(--ink); font-size: 14px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
input[type=file] { font: inherit; font-size: 14px; max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; font-size: 14px; margin-right: 10px; padding: 8px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.inline-input { min-height: 34px !important; padding: 5px 10px !important; font-size: 14px !important; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 16px;
  font: inherit; font-size: 14px; font-weight: 600; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: var(--navy-700); }
@media (prefers-color-scheme: dark) { .btn-primary:hover:not(:disabled) { background: #8cb2f4; } }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover:not(:disabled) { filter: brightness(.93); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--grey-500); }
.btn-danger { background: var(--surface); color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.btn-danger:hover:not(:disabled) { background: var(--red-50); }
.btn-ghost { background: transparent; color: var(--ink-2); padding: 0 10px; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn-link { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.btn-link.danger { color: var(--red); }
.btn-block { width: 100%; }
.btn-lg { min-height: 48px; font-size: 15px; padding: 0 20px; }
.btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── status pills ────────────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 650;
  background: var(--grey-100); color: var(--ink-2); white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.st-awaiting-admin, .pill.st-needs-info { background: var(--amber-50); color: var(--amber); }
.pill.st-awaiting-clinician { background: var(--navy-50); color: var(--accent); }
.pill.st-approved, .pill.st-sent { background: var(--green-50); color: var(--green); }
.pill.st-error { background: var(--red-50); color: var(--red); }
.pill.st-declined, .pill.st-wet-signature { background: var(--grey-100); color: var(--ink-2); }
@media (prefers-color-scheme: dark) { .pill { background: var(--surface-2); } }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--grey-100); color: var(--ink-2); }
.tag.ok { background: var(--green-50); color: var(--green); }
.tag.warn { background: var(--amber-50); color: var(--amber); }
@media (prefers-color-scheme: dark) { .tag { background: var(--surface-2); } }

/* ── alerts and toasts ───────────────────────────────────────────────────── */
.alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-size: 14px; line-height: 1.45; border: 1px solid transparent; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert li + li { margin-top: 4px; }
.alert-info { background: var(--navy-50); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.alert-warn { background: var(--amber-50); border-color: color-mix(in srgb, var(--amber) 25%, transparent); }
.alert-error { background: var(--red-50); border-color: color-mix(in srgb, var(--red) 25%, transparent); color: var(--ink); }
.alert-ok { background: var(--green-50); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.alert .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { pointer-events: auto; padding: 12px 16px; border-radius: var(--r-md); background: var(--navy-900); color: #fff; box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500;
  animation: toast-in .2s ease-out; display: flex; gap: 10px; align-items: flex-start; }
.toast.error { background: var(--red); }
.toast.ok { background: #0f5132; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 959px) { .has-sheet .toasts { bottom: 96px; } }

/* ── lists (tables on desktop, stacked cards on mobile) ──────────────────── */
.list { width: 100%; border-collapse: collapse; font-size: 14px; }
.list th { text-align: left; font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.list td { padding: 12px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.list tr:last-child td { border-bottom: 0; }
.list tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.list .num { text-align: right; font-variant-numeric: tabular-nums; }
.list .actions { text-align: right; white-space: nowrap; }
.list .name { font-weight: 600; }
.list .sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
@media (max-width: 720px) {
  .list thead { display: none; }
  .list, .list tbody, .list tr, .list td { display: block; width: 100%; }
  .list tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .list tr:last-child { border-bottom: 0; }
  .list td { padding: 4px 0; border: 0; text-align: left !important; }
  .list td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
  .list .actions { padding-top: 8px; }
}
.list-foot { padding: 16px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
@media (max-width: 640px) { .list-foot { padding: 16px; } }

.empty { text-align: center; padding: 36px 20px; color: var(--muted); }
.empty svg { width: 36px; height: 36px; color: var(--line-strong); margin-bottom: 8px; }
.empty strong { display: block; color: var(--ink); margin-bottom: 4px; font-size: 15px; }
.skeleton { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--grey-100), var(--grey-200), var(--grey-100)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@media (prefers-color-scheme: dark) { .skeleton { background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── sign in ─────────────────────────────────────────────────────────────── */
.signin { min-height: calc(100vh - 56px); display: grid; place-items: center; padding: 24px 16px; }
.signin .card { width: 100%; max-width: 400px; padding: 32px 28px; text-align: center; box-shadow: var(--shadow-md); }
.signin .mark { margin: 0 auto 18px; }
.signin .mark img { height: 36px; width: auto; display: block; margin: 0 auto; }
.signin h1 { margin-bottom: 6px; }
.signin p { color: var(--muted); margin-bottom: 24px; }
.signin .fine { font-size: 12px; margin: 16px 0 0; }

/* ── form workspace ──────────────────────────────────────────────────────── */
.workspace { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 56px); }
@media (min-width: 960px) { .workspace { grid-template-columns: minmax(0, 1fr) 360px; } }
.canvas-area { padding: 16px; overflow-x: hidden; }
@media (min-width: 960px) { .canvas-area { padding: 24px; } }
.canvas-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 920px; margin: 0 auto 12px; }
.canvas-toolbar .crumbs { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; min-width: 0; }
.canvas-toolbar .crumbs a { color: var(--muted); text-decoration: none; }
.canvas-toolbar .crumbs a:hover { color: var(--ink); }
.pages { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.page { position: relative; width: 100%; max-width: 920px; background: #fff; border-radius: 4px; box-shadow: var(--shadow-md); touch-action: pan-y pinch-zoom; }
.page canvas { display: block; width: 100%; height: auto; border-radius: 4px; }
.page.drawing { touch-action: none; cursor: crosshair; }
@media (pointer: fine) { .page.can-draw { cursor: crosshair; } }
.page-no { position: absolute; top: -18px; left: 0; font-size: 11px; color: var(--muted); font-weight: 600; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; border: 2px solid; }

.box { position: absolute; border: 1.5px solid var(--role-admin); background: var(--role-admin-bg); border-radius: 3px; cursor: pointer;
  font-size: 10px; line-height: 1.1; color: var(--role-admin); overflow: hidden; padding: 0 3px; white-space: nowrap; text-overflow: ellipsis;
  display: flex; align-items: center; transition: box-shadow .12s, background .12s; }
.box:hover { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.box.clinician { border-color: var(--role-clinician); background: var(--role-clinician-bg); color: var(--role-clinician); }
.box.system { border-color: var(--role-system); background: var(--role-system-bg); color: var(--role-system); border-style: dashed; }
.box.filled { color: #0a0a0a; font-weight: 500; }
.box.selected { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 35%, transparent); z-index: 2; }
.box.locked { cursor: default; opacity: .75; }
.box.ghost { border-style: dashed; pointer-events: none; }
.box .req { color: var(--red); font-weight: 700; }

/* side panel: sticky column on desktop, bottom sheet on mobile */
.side { background: var(--surface); border-left: 1px solid var(--line); }
@media (min-width: 960px) { .side { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; } }
.side-h { padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.side-h h2 { font-size: 16px; }
.side-h .meta { font-size: 13px; color: var(--muted); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.side-b { padding: 16px 20px 24px; }
.section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 20px 0 8px; }
.section-title:first-child { margin-top: 0; }
.sheet-handle { display: none; }
@media (max-width: 959px) {
  .has-sheet .canvas-area { padding-bottom: 120px; }
  .side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 82vh; overflow-y: auto; border-left: 0; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg); transform: translateY(calc(100% - var(--peek, 88px))); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
    padding-bottom: env(safe-area-inset-bottom); }
  .side.open { transform: none; }
  .sheet-handle { display: flex; align-items: center; justify-content: center; width: 100%; height: 24px; border: 0; background: none; cursor: pointer; padding: 0; position: sticky; top: 0; z-index: 1;
    background: var(--surface); border-radius: 16px 16px 0 0; }
  .sheet-handle::before { content: ''; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); }
  .side-h { padding-top: 4px; }
}
.side-sticky-actions { position: sticky; bottom: 0; background: var(--surface); padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; }

.sig-preview { display: block; max-width: 260px; max-height: 110px; margin-top: 10px; padding: 8px; background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }
.upload-row { padding: 16px 0; border-top: 1px solid var(--line); }
.upload-row:first-of-type { border-top: 0; padding-top: 4px; }
.upload-row .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── tool palette (like a design app) ────────────────────────────────────── */
.palette-wrap { position: sticky; top: 64px; z-index: 20; max-width: 920px; margin: 0 auto 16px; }
.palette { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-md); }
.tool { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 58px; height: 54px; padding: 4px 6px;
  border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink-2); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s; }
.tool svg { width: 22px; height: 22px; }
.tool:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.tool.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.tool:disabled { opacity: .35; cursor: not-allowed; }
.tool-sep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--line); }
.who { display: flex; align-items: center; gap: 4px; padding: 0 4px; }
.who-label { font-size: 11px; font-weight: 600; color: var(--muted); margin-right: 4px; max-width: 70px; line-height: 1.2; }
.who-btn { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.who-btn.active[data-role="admin"] { background: var(--role-admin-bg); color: var(--role-admin); border-color: var(--role-admin); }
.who-btn.active[data-role="clinician"] { background: var(--role-clinician-bg); color: var(--role-clinician); border-color: var(--role-clinician); }
.save-state { margin-left: auto; padding: 0 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tool-tip { flex-basis: 100%; margin: 2px 6px 2px; font-size: 12px; color: var(--muted); }
@media (max-width: 720px) {
  .palette-wrap { top: 60px; margin-left: -16px; margin-right: -16px; }
  .palette { flex-wrap: nowrap; overflow-x: auto; border-radius: 0; border-left: 0; border-right: 0; scrollbar-width: none; }
  .palette::-webkit-scrollbar { display: none; }
  .tool { min-width: 56px; flex: none; }
  .who-label, .tool-tip { display: none; }
  .save-state { position: absolute; right: 12px; bottom: -20px; padding: 0; font-size: 11px; }
}
.page.placing { cursor: crosshair; touch-action: none; }

/* boxes: editing affordances */
.box .box-label { opacity: .9; overflow: hidden; text-overflow: ellipsis; }
.box.tick { display: grid; place-items: center; padding: 0; }
.box .tick-mark { font-size: 1em; line-height: 1; font-weight: 700; color: #0a0a0a; }

.box .handle { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 3px; background: var(--surface); border: 2px solid currentColor; cursor: nwse-resize; touch-action: none; }
@media (pointer: coarse) { .box .handle { width: 20px; height: 20px; right: -10px; bottom: -10px; } }
.box.inline { padding: 0; overflow: visible; background: color-mix(in srgb, var(--role-clinician-bg) 100%, #fff 40%); cursor: text; }
.box.inline.filled { background: rgba(255, 255, 255, .85); }
.box-input { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 3px !important; border: 0 !important; border-radius: 2px !important;
  background: transparent !important; color: #0a0a0a !important; box-shadow: none !important; font-family: Helvetica, Arial, sans-serif !important; }
.box-input::placeholder { color: color-mix(in srgb, var(--role-clinician) 70%, transparent); font-style: italic; }
.box-input:focus { outline: 2px solid var(--role-clinician) !important; outline-offset: 1px; }

/* side panel guidance */
.steps { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink-2); }
.steps li { margin: 8px 0; padding-left: 2px; }
.steps li::marker { font-weight: 700; color: var(--accent); }
details.cant { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
details.cant summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); list-style: none; }
details.cant summary::-webkit-details-marker { display: none; }
details.cant summary::before { content: '›'; display: inline-block; margin-right: 8px; transition: transform .15s; }
details.cant[open] summary::before { transform: rotate(90deg); }

/* phones: bigger tap targets and a large answer box */
@media (pointer: coarse) {
  .box.tick::after, .box.tap-type::after { content: ''; position: absolute; inset: -10px; }
  .box.tick, .box.tap-type { overflow: visible; }
}
.box.tap-type { cursor: pointer; }
.box.tap-type:not(.filled) { background: var(--role-clinician-bg); }
dialog.answer { width: min(92vw, 440px); border: 0; border-radius: 16px; padding: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
dialog.answer::backdrop { background: rgba(8, 15, 30, .45); }
dialog.answer label { margin-top: 0; }
@media (max-width: 720px) {
  dialog.answer { margin: auto auto 0; width: 100vw; max-width: none; border-radius: 16px 16px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .save-state { position: static; flex: none; padding: 0 12px; }
}

/* ══ iPhone and iPad pass (Apple HIG: 44pt targets; iOS Safari: 16px inputs, safe areas,
   dynamic viewport units, keyboard via the Visual Viewport API) ══════════════════════════ */

/* No grey flash on tap, no double-tap-to-zoom delay on controls. */
a, button, .tool, .who-btn, .box, summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* iOS Safari zooms into any input under 16px. On touch screens every input is 16px. */
@media (pointer: coarse) {
  body { font-size: 16px; }
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea, .inline-input { font-size: 16px !important; }
  .inline-input { min-height: 44px !important; }
  .btn-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
  .who-btn { height: 44px; padding: 0 16px; }
  .tool { min-width: 60px; height: 56px; }
  input[type=checkbox] { width: 24px; height: 24px; }
  .check { min-height: 44px; align-items: center; }
  .topnav a { padding: 12px 12px; }
  .sheet-handle { height: 32px; }
}

/* Heights that follow Safari's moving toolbars (fallback first). */
main { min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); }
.workspace { min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); }
.signin { min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); }
@media (min-width: 960px) { .side { height: calc(100vh - 56px); height: calc(100dvh - 56px); } }

/* Safe areas: the notch, rounded corners and home indicator (viewport-fit=cover is set). */
.topbar { height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.canvas-area { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.side-sticky-actions { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.toasts { bottom: calc(24px + env(safe-area-inset-bottom)); }

/* The form page: no text selection or callout menus while placing and dragging boxes. */
.page { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.box.movable { touch-action: none; }
.box-input { -webkit-user-select: text; user-select: text; }

/* Zoom the form itself (tiny boxes on a phone), independent of page pinch-zoom. */
.zoom { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.zoom button { width: 40px; height: 36px; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.zoom button:hover { background: var(--surface-2); }
.zoom .zlabel { min-width: 52px; text-align: center; font-size: 12px; font-weight: 650; color: var(--muted); border-left: 1px solid var(--line); border-right: 1px solid var(--line); height: 36px; line-height: 36px; }
@media (pointer: coarse) { .zoom button { width: 44px; height: 44px; } .zoom .zlabel { height: 44px; line-height: 44px; } }
.canvas-area.zoomed { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.canvas-area.zoomed .pages { align-items: flex-start; width: max-content; min-width: 100%; }
.canvas-area.zoomed .pages .page { max-width: none !important; }

/* The keyboard: fixed panels sit above it (--kb is set from the Visual Viewport API). */
@media (max-width: 959px) { .side { bottom: var(--kb, 0px); max-height: calc(82svh - var(--kb, 0px)); } }
dialog.answer { margin-bottom: var(--kb, 0px); }
@media (pointer: coarse) and (max-width: 720px) { dialog.answer { margin: auto auto var(--kb, 0px); } }

/* iPad portrait and wide phones in landscape: a centred sheet, like iPadOS sheets, not a full-width slab. */
@media (min-width: 640px) and (max-width: 959px) {
  .side { left: 50%; right: auto; width: min(560px, 92vw); transform: translate(-50%, calc(100% - var(--peek, 88px))); border: 1px solid var(--line); border-bottom: 0; }
  .side.open { transform: translate(-50%, 0); }
}

/* iPhone in landscape: little height, so a compact top bar and a taller sheet. */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { height: calc(48px + env(safe-area-inset-top)); }
  .palette-wrap { top: 52px; }
  .side { max-height: calc(90svh - var(--kb, 0px)); }
  .tool { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.palette-wrap { top: calc(64px + env(safe-area-inset-top)); }
@media (max-width: 720px) { .palette-wrap { top: calc(60px + env(safe-area-inset-top)); } }
/* Zoomed pages scroll inside the canvas area; the page itself never widens. */
.workspace { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .workspace { grid-template-columns: minmax(0, 1fr) 360px; } }
.canvas-area { min-width: 0; }
html, body { overflow-x: hidden; }
@media (max-width: 640px) { .canvas-toolbar .legend { display: none; } }
/* Tablets and phones: the main action sits right under the title, so it shows while the sheet is tucked away. */
@media (max-width: 959px) {
  .side { display: flex; flex-direction: column; }
  .side .sheet-handle { order: 0; flex: none; }
  .side .side-h { order: 1; }
  .side .side-sticky-actions { order: 2; position: static; border-top: 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .side .side-b { order: 3; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
/* Short screens (iPhone sideways): give the form the room. */
@media (max-height: 500px) {
  .palette-wrap { position: static; margin-bottom: 10px; }
  .tool-tip, .canvas-toolbar .legend, .side .side-h .meta { display: none; }
  .canvas-toolbar { margin-bottom: 8px; }
  .side .side-h { padding: 2px 16px 6px; }
  .side .side-h h2 { font-size: 14px; }
  .side .side-sticky-actions { padding-top: 6px; padding-bottom: 8px; }
  .side .side-sticky-actions .btn-lg { min-height: 44px; }
}

/* ── consultations queue ─────────────────────────────────────────────────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.chip .count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--grey-100); color: var(--ink-2); font-size: 12px; line-height: 20px; text-align: center; }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.active .count { background: rgba(255, 255, 255, .22); color: inherit; }
@media (prefers-color-scheme: dark) { .chip .count { background: var(--surface-2); } }
@media (pointer: coarse) { .chip { min-height: 44px; } }
.queue { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-height: 460px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.queue li + li { border-top: 1px solid var(--line); }
.qrow { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 20px; min-height: 60px; border: 0; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.qrow:hover { background: var(--surface-2); }
.qrow.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.qmain { flex: 1; min-width: 0; }
.qname { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qsub { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.qstatus { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.qchev { width: 18px; height: 18px; color: var(--muted); flex: none; }
@media (max-width: 640px) { .qrow { padding: 12px 16px; flex-wrap: wrap; } .qtags { width: 100%; justify-content: flex-start; order: 3; } .qchev { display: none; } }
details.paste { padding: 12px 20px 16px; border-top: 1px solid var(--line); }
details.paste summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }