:root{
  --ink:#12182B; --ink2:#1B2338; --ink3:#232E49; --line:#2C3855;
  --on-dark:#E8EDF7; --on-dark-dim:#8794AE; --on-dark-faint:#5B688A;
  --workspace:#CFE1F7; --card:#FFFFFF; --card-line:#DDE4EF;
  --text:#18212F; --text-dim:#5C6678; --text-faint:#8B94A6;
  --brand:#1B6BE0; --brand-teal:#0B6E63;
  --brand-deep:#14509F; --brand-soft:#E4EDFC; --focus:#2563EB;
  --unassigned:#5C6678; --scheduled:#4F46E5; --in_progress:#0B6E63;
  --pending:#8A5300;
  --completed:#1E7A4C; --delayed:#8A5300; --missed:#C02B2B;
  --sev-high:#C02B2B; --sev-medium:#8A5300; --sev-low:#5C6678;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text); background:var(--workspace);
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:"Space Grotesk",Inter,sans-serif;margin:0}
code{font-family:"JetBrains Mono",ui-monospace,monospace}
button{font-family:inherit}
a{color:inherit}
[hidden]{display:none !important}

/* buttons */
.btn{border:1px solid transparent;border-radius:9px;padding:9px 14px;font-size:13.5px;
  font-weight:600;cursor:pointer;transition:filter .12s ease,background .12s ease}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--on-dark);border-color:var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-block{width:100%}
.btn-mini{padding:5px 10px;font-size:12px;border-radius:7px}
.input{border:1px solid var(--card-line);border-radius:9px;padding:9px 12px;font-size:13.5px;
  background:#fff;color:var(--text)}
.input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* brand */
.brand-lockup{display:flex;align-items:center;gap:9px}
.brand-mark{color:var(--brand);font-size:19px;line-height:1}
.brand-word{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:.2px;font-size:18px}

/* ============================ LOGIN ============================ */
.login-wrap{min-height:100%;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(27,107,224,.28), transparent 60%),
    var(--ink);}
.login-card{width:100%;max-width:390px;background:var(--card);border-radius:16px;
  padding:34px 30px;box-shadow:0 24px 60px rgba(6,14,32,.4)}
.login-card .brand-word{color:var(--ink)}
.login-kicker{margin:14px 0 22px;color:var(--text-dim);font-size:13px;letter-spacing:.3px;text-transform:uppercase}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12.5px;font-weight:600;color:var(--text-dim);margin-bottom:6px}
.field>input{width:100%;border:1px solid var(--card-line);border-radius:10px;padding:11px 13px;font-size:14px}
.field>input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.login-error{background:#FCEBEB;color:#9B2C2C;border:1px solid #F3C9C9;border-radius:9px;
  padding:9px 12px;font-size:13px;margin:0 0 14px}
.login-hint{margin:16px 0 0;font-size:12.5px;color:var(--text-faint);text-align:center}
.login-hint code{background:var(--brand-soft);color:var(--brand-deep);padding:1px 6px;border-radius:5px}

/* ========================= PLACEHOLDER ========================= */
.placeholder-wrap{min-height:100%;display:grid;place-items:center;padding:24px;background:var(--ink)}
.placeholder-card{max-width:440px;text-align:center;background:var(--card);border-radius:16px;padding:36px 32px}
.placeholder-card .brand-word{color:var(--ink)}
.placeholder-card h1{font-size:20px;margin:18px 0 10px}
.placeholder-card p{color:var(--text-dim);font-size:14px;line-height:1.55;margin:0 0 22px}

/* ========================= DASHBOARD ========================== */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100%}
.rail{background:var(--ink);color:var(--on-dark);display:flex;flex-direction:column;
  padding:22px 18px;gap:22px;position:sticky;top:0;height:100vh}
.rail .brand-word{color:#fff}
.rail-org{margin-top:12px;font-size:12.5px;color:var(--on-dark-dim);line-height:1.4}
.rail-nav{display:flex;flex-direction:column;gap:2px}
.rail-link{padding:9px 11px;border-radius:8px;font-size:13.5px;color:var(--on-dark-dim);text-decoration:none}
.rail-link:hover{background:var(--ink3);color:var(--on-dark)}
.rail-bottom{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.rail-user{font-size:12.5px;color:var(--on-dark-dim)}
.live{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--on-dark-dim)}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--on-dark-faint)}
.live[data-state="on"] .live-dot{background:var(--in_progress);box-shadow:0 0 0 0 rgba(18,165,148,.6);animation:pulse 1.8s infinite}
.live[data-state="on"]{color:var(--on-dark)}
.live[data-state="reconnecting"] .live-dot{background:var(--delayed)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(18,165,148,.55)}70%{box-shadow:0 0 0 7px rgba(18,165,148,0)}100%{box-shadow:0 0 0 0 rgba(18,165,148,0)}}

.work{padding:26px 30px 60px;min-width:0}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.work-title{font-size:24px}
.work-date{margin:4px 0 0;color:var(--text-dim);font-size:13.5px}
.work-tools{display:flex;gap:10px;flex-wrap:wrap}

.panel{background:var(--card);border:1px solid var(--card-line);border-radius:14px;margin-bottom:18px;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--card-line)}
.panel-head h2{font-size:15px}
.panel-count{font-size:12px;color:var(--text-faint);font-weight:600;font-family:"JetBrains Mono",monospace}
.panel-body{padding:8px}
.panel-exceptions{border-color:#EBD2D2}
.panel-exceptions .panel-head{background:linear-gradient(180deg,#FBF2F2,#fff)}

.grid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.col{display:flex;flex-direction:column}

/* rows */
.row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px}
.row+.row{border-top:1px solid #EEF2F8}
.row-time{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--text-dim);white-space:nowrap;min-width:74px}
.row-main{min-width:0;flex:1}
.row-title{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-sub{font-size:12px;color:var(--text-faint);margin-top:2px}
.row-side{display:flex;align-items:center;gap:8px}

.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;color:#fff;white-space:nowrap;letter-spacing:.2px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* exception cards */
.exc{display:flex;align-items:center;gap:12px;padding:12px;border-left:4px solid var(--sev-low);
  background:#fff;border-radius:8px;margin:6px 4px}
.exc[data-sev="high"]{border-left-color:var(--sev-high);background:#FEF6F6}
.exc[data-sev="medium"]{border-left-color:var(--sev-medium);background:#FEFAF0}
.exc-main{flex:1;min-width:0}
.exc-type{font-size:13px;font-weight:700}
.exc-sub{font-size:12px;color:var(--text-dim);margin-top:2px}
.exc-actions{display:flex;gap:6px}

/* states */
.state{padding:22px 14px;text-align:center;color:var(--text-faint);font-size:13px}
.state.error{color:#9B2C2C}
.skeleton{height:44px;margin:8px 4px;border-radius:9px;
  background:linear-gradient(90deg,#EEF2F8 25%,#E4EBF5 37%,#EEF2F8 63%);
  background-size:400% 100%;animation:sk 1.3s ease-in-out infinite}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}

/* popover */
.popover{position:fixed;z-index:50;background:#fff;border:1px solid var(--card-line);
  border-radius:11px;box-shadow:0 16px 40px rgba(10,20,40,.22);padding:8px;min-width:190px}
.popover-head{font-size:11.5px;font-weight:700;color:var(--text-faint);padding:6px 8px;text-transform:uppercase;letter-spacing:.3px}
.popover-list{display:flex;flex-direction:column;max-height:240px;overflow:auto}
.popover-item{text-align:left;background:none;border:none;padding:8px 9px;border-radius:7px;font-size:13px;cursor:pointer}
.popover-item:hover{background:var(--brand-soft)}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .rail-nav{flex-direction:row}.rail-bottom{margin:0 0 0 auto;flex-direction:row;align-items:center}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}

/* ===================== mobile role screens ===================== */
.mobile{max-width:520px;margin:0 auto;min-height:100%;background:var(--workspace)}
.m-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:var(--ink);color:#fff;position:sticky;top:0;z-index:5}
.m-head .brand-word{color:#fff;font-size:16px}
.m-head-right{display:flex;align-items:center;gap:12px}
.m-body{padding:18px 16px 60px}
.m-title{font-size:21px;margin:0 0 4px}
.m-sub{color:var(--text-dim);font-size:13px;margin:0 0 16px}
.m-h2{font-size:14px;margin:0 0 10px}
.m-section{margin-top:26px}
.m-list{display:flex;flex-direction:column;gap:10px}

.m-card{background:#fff;border:1px solid var(--card-line);border-radius:13px;padding:14px}
.m-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.m-card-title{font-size:14.5px;font-weight:600}
.m-card-sub{font-size:12.5px;color:var(--text-faint);margin-top:3px}
.m-card-time{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--text-dim);margin-top:4px}
.m-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.m-actions .input{padding:7px 10px;font-size:13px;max-width:120px}
.inline-form{margin-top:10px;display:none;gap:8px;flex-direction:column}
.inline-form.open{display:flex}
.inline-form select,.inline-form input{width:100%}

.thread{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--card-line);
  border-radius:13px;padding:12px;max-height:260px;overflow:auto}
.msg{padding:8px 11px;border-radius:10px;font-size:13px;max-width:85%}
.msg-them{background:var(--brand-soft);color:var(--ink);align-self:flex-start}
.msg-me{background:var(--brand);color:#fff;align-self:flex-end}
.msg-name{display:block;font-size:10.5px;font-weight:700;opacity:.7;margin-bottom:2px}
.thread-empty{color:var(--text-faint);font-size:13px;text-align:center;padding:12px}
.thread-input{display:flex;gap:8px;margin-top:10px}
.thread-input .input{flex:1}

/* --- 4d additions: chips, notes, photo thumbnails, questionnaire --- */
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chip{ display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px;
  background:var(--brand-soft,#E4EDFC); color:var(--brand-deep,#14509F); }
.chip-ok{ background:#E1F3E8; color:#217A47; }
.note-line{ font-size:12px; color:var(--ink-soft,#54607A); margin-top:6px; line-height:1.4; }
.thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.thumb{ display:block; width:56px; height:56px; border-radius:8px; overflow:hidden; border:1px solid var(--line,#D9E2F1); }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.qform{ display:flex; flex-direction:column; gap:8px; }
.qrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--ink,#12182B); }
.qrow .input{ max-width:150px; }

/* --- 4e: coordinator live map --- */
#map-panel{ margin-top:14px; }
.map{ height:380px; width:100%; border-radius:10px; overflow:hidden; border:1px solid var(--line,#D9E2F1); background:#E8EEF6; }
.map-pin{ background:transparent; border:0; }
.pin{ display:block; width:16px; height:16px; border-radius:50%; box-shadow:0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.35); }
.pin-home{ background:var(--pin,#4F46E5); }
.pin-staff{ background:var(--pin,#14509F); border-radius:3px; transform:rotate(45deg); }
.leaflet-popup-content{ font:13px/1.4 Inter,system-ui,sans-serif; }

/* --- brand logo (3D lockup on login + emblem in rails) --- */
.login-logo{ display:block; width:min(340px,80%); height:auto; margin:2px auto 12px;
  filter: drop-shadow(0 8px 18px rgba(20,80,159,.20)) drop-shadow(0 2px 4px rgba(0,0,0,.08)); }
.login-motto{ text-align:center; color:var(--brand-deep,#14509F); font-weight:600;
  font-size:14px; line-height:1.4; margin:0 auto 4px; max-width:34ch; }
.brand-ico{ height:22px; width:auto; vertical-align:middle; margin-right:8px;
  filter: drop-shadow(0 2px 3px rgba(20,80,159,.25)); }
.brand-lockup{ display:flex; align-items:center; gap:2px; }

/* --- language switcher --- */
.lang-row{ display:flex; justify-content:flex-end; margin-bottom:6px; }
.lang-select{ font:inherit; font-size:13px; padding:4px 8px; border-radius:8px;
  border:1px solid var(--card-line,#DDE4EF); background:#fff; color:var(--text,#18212F); cursor:pointer; }
.lang-select.lang-mini{ font-size:12px; padding:3px 6px; margin-right:8px; }
.m-head-right .lang-select.lang-mini, .rail-bottom .lang-select.lang-mini{ opacity:.9; }

/* --- right-to-left languages (Arabic, Hebrew) --- */
[dir="rtl"] .brand-ico{ margin-right:0; margin-left:8px; }
[dir="rtl"] .lang-select.lang-mini{ margin-right:0; margin-left:8px; }
[dir="rtl"] .m-head-right{ flex-direction:row-reverse; }
[dir="rtl"] .rail-link, [dir="rtl"] .m-title, [dir="rtl"] .m-h2{ text-align:right; }
[dir="rtl"] .lang-row{ justify-content:flex-start; }

/* --- ASL accessibility: floating button + interpreter/video panel --- */
.asl-fab{ position:fixed; left:16px; bottom:16px; z-index:900; border:0; cursor:pointer;
  background:var(--brand-deep,#14509F); color:#fff; font:inherit; font-weight:600; font-size:14px;
  padding:10px 14px; border-radius:999px; box-shadow:0 4px 14px rgba(20,80,159,.35); }
.asl-fab:hover{ background:var(--brand,#1B6BE0); }
.asl-panel{ position:fixed; inset:0; z-index:1000; background:rgba(10,20,40,.45);
  display:flex; align-items:center; justify-content:center; padding:16px; }
.asl-modal{ background:#fff; width:min(440px,96vw); max-height:90vh; overflow:auto;
  border-radius:14px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.asl-modal-head{ display:flex; justify-content:space-between; align-items:center; font-weight:700;
  color:var(--ink,#12182B); margin-bottom:12px; }
.asl-close{ border:0; background:transparent; font-size:18px; cursor:pointer; color:var(--text-dim,#5C6678); }
.asl-video{ width:100%; border-radius:10px; background:#0b1220; margin:10px 0; display:block; min-height:120px; }
.asl-clips-title{ font-weight:600; font-size:13px; margin:8px 0 6px; color:var(--brand-deep,#14509F); }
.asl-clip{ margin:0 6px 6px 0; }
.asl-note{ font-size:13px; color:var(--text-dim,#5C6678); background:var(--brand-soft,#E4EDFC);
  padding:8px 10px; border-radius:8px; line-height:1.4; }
.asl-foot{ font-size:11px; color:var(--text-faint,#8B94A6); margin-top:10px; line-height:1.4; }
[dir="rtl"] .asl-fab{ left:auto; right:16px; }

/* --- timeline / templates / account modals --- */
.mm-modal-wrap{ position:fixed; inset:0; z-index:1000; background:rgba(10,20,40,.45);
  display:flex; align-items:center; justify-content:center; padding:16px; }
.mm-modal{ background:#fff; width:min(560px,96vw); max-height:88vh; overflow:auto;
  border-radius:14px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.mm-modal-head{ display:flex; justify-content:space-between; align-items:center;
  color:var(--ink,#12182B); margin-bottom:10px; }
.mm-close{ border:0; background:transparent; font-size:18px; cursor:pointer; color:var(--text-dim,#5C6678); }
.mm-pt{ display:flex; gap:8px; align-items:baseline; margin-bottom:8px; }
.mm-pt span{ color:var(--text-dim,#5C6678); font-size:13px; }
.mm-sec{ margin-top:12px; }
.mm-sec-head{ font-weight:700; font-size:13px; color:var(--brand-deep,#14509F);
  border-bottom:1px solid var(--card-line,#DDE4EF); padding-bottom:4px; margin:12px 0 6px;
  display:flex; justify-content:space-between; }
.mm-entry{ display:flex; gap:10px; padding:6px 0; border-bottom:1px solid #F1F4F9; font-size:13px; }
.mm-when{ flex:0 0 118px; color:var(--text-dim,#5C6678); font-variant-numeric:tabular-nums; }
.mm-what{ flex:1; color:var(--text,#18212F); }
.mm-kind{ display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.04em;
  background:var(--brand-soft,#E4EDFC); color:var(--brand-deep,#14509F); padding:1px 6px; border-radius:999px; margin-right:6px; }
.mm-alert .mm-kind{ background:#FCEBEB; color:#9B2C2C; }
.mm-questionnaire .mm-kind{ background:#E1F3E8; color:#217A47; }
.mm-detail{ color:var(--text-dim,#5C6678); font-size:12px; margin-top:2px; }
.mm-note{ font-size:12.5px; color:var(--text-dim,#5C6678); line-height:1.45; margin:8px 0; }
.mm-filter{ margin-bottom:6px; }
.mm-history{ max-height:280px; overflow:auto; }
#schedule-body .row{ cursor:pointer; }
#schedule-body .row:hover{ background:var(--brand-soft,#E4EDFC); }

/* --- offline pending-sync indicator (4j) --- */
.mm-offline{ position:fixed; right:16px; bottom:16px; z-index:950; cursor:pointer;
  background:#8A5300; color:#2A1E00; font-size:13px; font-weight:600;
  padding:9px 13px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.25); max-width:min(92vw,420px); }
.mm-offline-down{ background:#C02B2B; color:#fff; }

/* --- accessibility ---
   Visible focus, a skip link, larger touch targets, and contrast fixes.
   Section 1557 applies to healthcare; this also makes the 13-language and ASL
   work actually usable rather than decorative. */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--brand-deep,#14509F); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

/* Never remove focus indication — keyboard users navigate by it. */
:focus-visible{ outline:3px solid #1B6BE0; outline-offset:2px; border-radius:4px; }
.btn:focus-visible, .input:focus-visible, a:focus-visible, select:focus-visible{ outline:3px solid #14509F; outline-offset:2px; }

/* WCAG 2.5.5: touch targets on the mobile role screens. */
.m-card .btn, .thread-input .btn, .qform .btn{ min-height:44px; }
.btn-mini{ min-height:44px; }

/* Contrast: these greys were too light on white for WCAG AA body text. */
:root{ --text-dim:#4A5568; --text-faint:#5C6678; }

/* Respect a user's reduced-motion preference. */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Don't rely on colour alone to convey status. */
.badge::before{ content:""; }
.live[data-state="off"] .live-dot::after{ content:" "; }

/* Lone-worker safety control. High contrast, full width, 44px+ target —
   it must be findable and pressable under stress, one-handed. */
.btn-danger{ background:#B3261E; color:#fff; border:none; width:100%;
  min-height:48px; font-weight:700; font-size:1rem; border-radius:10px; margin:10px 0 4px; }
.btn-danger:hover{ background:#8C1D18; }
.btn-danger:focus-visible{ outline:3px solid #B3261E; outline-offset:3px; }
.btn-danger[disabled]{ opacity:.75; }
.m-hint{ font-size:.8rem; color:var(--text-dim,#4A5568); margin:0 0 12px; }

/* --- Patient dashboard panels (4o/4p) --- */
.panel-soft{ background:#fff; border:1px solid var(--line,#E2E8F0); border-radius:12px;
  padding:14px 16px; margin:12px 0; }
.panel-h{ font-size:.95rem; margin:0 0 10px; color:var(--brand-deep,#14509F); }
.progress-line{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.progress-day{ font-size:1.35rem; font-weight:700; color:var(--brand-deep,#14509F); }
.progress-bar{ height:8px; background:#EDF2F7; border-radius:99px; overflow:hidden; margin:10px 0 6px; }
.progress-fill{ height:100%; background:var(--brand-teal,#12897F); border-radius:99px; }
.progress-basis{ font-size:.78rem; color:var(--text-dim,#4A5568); margin:4px 0 0; }
.team-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.team-card{ display:flex; align-items:center; gap:10px; border:1px solid var(--line,#E2E8F0);
  border-radius:10px; padding:8px 12px; min-width:200px; }
.team-avatar{ width:40px; height:40px; border-radius:50%; background:var(--brand-teal,#12897F);
  color:#fff; display:grid; place-items:center; font-weight:700; flex:0 0 auto; }
.team-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.team-name{ font-weight:600; }
.team-role{ font-size:.8rem; color:var(--text-dim,#4A5568); }
.video-embed{ position:relative; padding-bottom:56.25%; height:0; margin:8px 0 12px;
  border-radius:10px; overflow:hidden; background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.milestone{ background:#E8F5F3; border:1px solid #12897F; border-radius:12px;
  padding:12px 14px; margin:10px 0; display:flex; gap:10px; align-items:flex-start; }
.milestone p{ margin:0; flex:1; }
.feedback-row{ display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.feedback-btn{ min-height:44px; min-width:52px; border:1px solid var(--line,#E2E8F0);
  background:#fff; border-radius:10px; font-size:1.1rem; cursor:pointer; }
.feedback-btn[aria-pressed="true"]{ border-color:var(--brand-teal,#12897F); background:#E8F5F3; }
.empty-note{ color:var(--text-dim,#4A5568); font-size:.85rem; margin:0; }


/* FIX (4q) — severity was conveyed by border/background COLOUR ALONE in the
   exception queue. A coordinator triaging exceptions must not have to
   distinguish high from medium by hue. Pair colour with a text label. */
.sev-tag{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:99px;
  color:#fff; margin-right:6px; }
.sev-tag[data-sev="high"]{ background:var(--sev-high); }
.sev-tag[data-sev="medium"]{ background:var(--sev-medium); }
.sev-tag[data-sev="low"]{ background:var(--sev-low); }

/* Empty states — every panel says what it means when it has nothing, rather
   than rendering a blank box that reads as a loading failure. */
.empty-state{ padding:18px 14px; text-align:center; color:var(--text-dim,#4A5568); font-size:.88rem; }
.empty-state strong{ display:block; color:var(--text,#18212F); margin-bottom:2px; font-size:.92rem; }
.panel-error{ padding:14px; color:#B32424; font-size:.88rem; }

/* 6a — go-live readiness readout */
.glc-item{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line,#E2E8F0);
  border-radius:10px; padding:12px 14px; margin:8px 0; background:#fff; }
.glc-state{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:3px 8px; border-radius:99px; color:#fff; flex:0 0 auto; min-width:74px; text-align:center; }
.glc-state[data-status="complete"]{ background:var(--completed); }
.glc-state[data-status="pending"]{ background:var(--sev-medium); }
.glc-state[data-status="optional"]{ background:var(--sev-low); }
.glc-body{ flex:1; min-width:0; }
.glc-name{ font-weight:600; }
.glc-detail{ font-size:.82rem; color:var(--text-dim,#4A5568); margin:2px 0 0; }
.glc-ref{ font-size:.8rem; color:var(--text-dim,#4A5568); margin:6px 0 0; }
.glc-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.glc-gate{ padding:14px 16px; border-radius:12px; font-weight:600; }
.glc-gate[data-ready="true"]{ background:#E8F5F3; border:1px solid var(--completed); }
.glc-gate[data-ready="false"]{ background:#FEFAF0; border:1px solid var(--sev-medium); }

/* 4t — patient identity photo (visit verification). Served only through the
   access-controlled route; never a public URL. */
.id-photo{ width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:1px solid var(--line,#E2E8F0); flex:0 0 auto; }

/* --- Clinical note editor + session warning ---------------------------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(3,4,94,.45); display:grid;
  place-items:center; padding:16px; z-index:1000; }
.modal-backdrop[hidden]{ display:none; }
.modal-card{ background:#fff; border-radius:14px; padding:20px; width:min(680px,100%);
  max-height:90vh; overflow:auto; box-shadow:0 18px 48px rgba(3,4,94,.28); }
.field-label{ display:block; font-weight:600; font-size:.88rem; margin:10px 0 6px; }
.note-textarea{ width:100%; font:inherit; line-height:1.5; padding:12px; border-radius:10px;
  border:1px solid var(--line,#E2E8F0); resize:vertical; min-height:220px; }
.note-textarea:focus-visible{ outline:3px solid var(--brand-teal,#0B6E63); outline-offset:2px; }
.modal-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.modal-actions .btn{ min-height:44px; }

/* Clinical documents get printed and filed. Print the content, not the app. */
@media print{
  .rail, .topbar, .modal-backdrop, .btn, .feedback-row, nav, .skip-link{ display:none !important; }
  body{ background:#fff; color:#000; font-size:12pt; }
  .work, .mobile{ padding:0; }
  .m-card, .panel-soft, .glc-item{ break-inside:avoid; border:1px solid #999; }
  a[href]:after{ content:""; }   /* URLs are noise on a filed document */
}

/* Failure notices — visible and announced, never silent. */
#toast-host{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:1200; width:min(560px,92vw); }
.toast{ background:#18212F; color:#fff; padding:12px 16px; border-radius:10px;
  font-size:.92rem; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.toast-error{ background:#B32424; }
@media (prefers-reduced-motion:no-preference){ .toast{ animation:toast-in .18s ease-out; } }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ============================================================================
 * Patient self-report surface (merged from the patient-portal prototype):
 * symptom journal, medication check-in, SOS guided flow, media grid, and the
 * "My story" timeline entry kinds layered onto the existing .mm-entry system.
 * ========================================================================== */
.field>select, .field>textarea{ width:100%; }
textarea.input{ resize:vertical; min-height:70px; font:inherit; }

.pat-spark{ width:100%; height:48px; display:block; }

.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin-bottom:10px; }
.media-grid .thumb{ width:100%; height:96px; border-radius:10px; display:flex; flex-direction:column; }
.media-grid .thumb img{ flex:1; }
.media-grid .thumb span{ display:none; }

.pat-toast{ position:fixed; left:50%; bottom:22px; transform:translate(-50%,12px); background:#18212F; color:#fff;
  font-size:13px; padding:10px 16px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.22); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:1200; max-width:88vw; text-align:center; }
.pat-toast.show{ opacity:1; transform:translate(-50%,0); }

.mm-symptom .mm-kind{ background:#FDF2E3; color:#8A5300; }
.mm-medication .mm-kind{ background:#E1F3E8; color:#1E7A4C; }
.mm-sos .mm-kind{ background:#FCEBEB; color:#9B2C2C; }
.mm-photo .mm-kind{ background:#EEF1F7; color:#28395C; }