/* Curaeon Support console — design system reconstructed from the Claude Design
   token cards (colors-*, type-*, spacing, radius, shadows, logo, sovereignty-strip).
   Fonts: DM Sans (headings) · Source Sans 3 (body) · JetBrains Mono (identifiers). */

:root{
  /* brand teal scale */
  --teal-900:#134E4A;--teal-800:#0A5F5E;--teal-700:#0E7C7B;--teal-500:#14B8A6;
  --teal-300:#5EEAD4;--teal-200:#99F6E4;--teal-100:#CCFBF1;--teal-50:#F0FDFA;
  /* slate neutrals */
  --slate-900:#0F172A;--slate-800:#1E293B;--slate-600:#475569;--slate-400:#94A3B8;
  --slate-300:#CBD5E1;--slate-200:#E2E8F0;--slate-100:#F1F5F9;--slate-50:#F8FAFC;
  /* semantic — never decorative */
  --ok:#059669;--ok-bg:#ECFDF5;--warn:#D97706;--warn-bg:#FFFBEB;
  --danger:#DC2626;--danger-bg:#FEF2F2;--info:#1D4ED8;--info-bg:#EFF6FF;
  /* sovereignty strip */
  --sov-bg:#134E4A;--sov-text:#A7F3D0;--sov-dot:#10B981;
  /* roles */
  --surface-page:var(--slate-50);--surface-card:#fff;--surface-wash:var(--teal-50);
  --border-default:var(--slate-200);
  --text-primary:var(--slate-800);--text-secondary:var(--slate-600);--text-muted:var(--slate-400);
  --color-primary:var(--teal-700);
  /* type */
  --font-heading:"DM Sans",system-ui,sans-serif;
  --font-body:"Source Sans 3",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --tracking-display:-.03em;--tracking-tight:-.02em;--tracking-overline:.07em;
  /* radii */
  --radius-badge:4px;--radius-button:6px;--radius-card:8px;--radius-lg:10px;
  --radius-modal:12px;--radius-pill:999px;
  /* elevation */
  --shadow-raised:0 2px 16px rgba(14,124,123,.10);--shadow-pop:0 8px 32px rgba(14,124,123,.15);
  /* short aliases used throughout the screens */
  --h:var(--font-heading);--b:var(--font-body);
  --tx:var(--text-primary);--tm:var(--text-secondary);--tl:var(--text-muted);
  --pr:var(--teal-700);--prl:var(--teal-500);--prxl:var(--teal-50);
  --bd:var(--border-default);
  --er:var(--danger);--erbg:var(--danger-bg);--wn:var(--warn);--wnbg:var(--warn-bg);
  --ok:#059669;--okbg:var(--ok-bg);--in:var(--info);--inbg:var(--info-bg);
  /* notice borders + on-surface text (paired with the *-bg above) */
  --erbd:#FECACA;--erfg:#991B1B;--wnbd:#FDE68A;--wnfg:#92400E;
  --okbd:#A7F3D0;--okfg:#065F46;--inbd:#BFDBFE;--infg:#1E40AF;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--b);color:var(--tx);background:var(--surface-page);font-size:14px;line-height:1.5}
h1,h2,h3,h4{font-family:var(--h);color:var(--tx)}
a{color:var(--pr)}
button{font:inherit;cursor:pointer}
img,svg{display:block}

.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--pr);padding:10px 16px;
  border-radius:var(--radius-button);z-index:100;font-family:var(--h);font-weight:700}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px;border-radius:4px}

/* ---- app shell -------------------------------------------------------------- */
#stage{display:flex;flex-direction:column;height:100vh;min-width:0}

/* sovereignty strip */
.sovstrip{height:36px;flex-shrink:0;background:var(--sov-bg);color:var(--sov-text);
  display:flex;align-items:center;gap:10px;padding:0 18px;font-size:12px;font-family:var(--b)}
.sovstrip strong{font-family:var(--h);font-weight:700}
.sovstrip .tail{margin-left:auto;opacity:.5;font-size:11px}
.sovstrip .pulse{width:8px;height:8px;border-radius:50%;background:var(--sov-dot);
  box-shadow:0 0 0 2px rgba(16,185,129,.3);flex-shrink:0;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px rgba(16,185,129,.3)}50%{box-shadow:0 0 0 5px rgba(16,185,129,.12)}}
@media (prefers-reduced-motion:reduce){.sovstrip .pulse{animation:none}}

/* sidebar — teal-700 primary per the colour card */
.sidebar{width:228px;flex-shrink:0;background:linear-gradient(180deg,var(--teal-700),var(--teal-800));
  display:flex;flex-direction:column;padding:18px 12px 14px;color:#fff;overflow-y:auto}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:2px 10px 16px}
.sidebar .brand .wm{font-family:var(--h);font-weight:800;font-size:19px;letter-spacing:var(--tracking-tight);color:#fff}
.sidebar .brand .tag{font-size:9.5px;font-weight:700;font-family:var(--h);text-transform:uppercase;
  letter-spacing:var(--tracking-overline);color:var(--teal-200);background:rgba(255,255,255,.12);
  border-radius:var(--radius-badge);padding:2px 6px;margin-top:3px;display:inline-block}
.sidebar nav{display:flex;flex-direction:column;gap:3px}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-card);
  font-family:var(--h);font-size:13.5px;font-weight:600;color:var(--teal-100);text-decoration:none}
.sidebar nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar nav a[aria-current="page"]{background:rgba(255,255,255,.16);color:#fff}
.sidebar nav a .n{margin-left:auto;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.16);
  border-radius:var(--radius-pill);padding:1px 7px}
.sidebar .sect{font-size:10px;font-weight:700;font-family:var(--h);text-transform:uppercase;
  letter-spacing:var(--tracking-overline);color:var(--teal-300);padding:16px 12px 6px}
.sidebar .foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.14);padding-top:12px;
  display:flex;align-items:center;gap:10px;padding-left:6px;padding-right:6px}
.sidebar .foot .av{width:32px;height:32px;border-radius:var(--radius-card);background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-family:var(--h);font-weight:800;font-size:11px;color:#fff;flex-shrink:0}
.sidebar .foot .nm{font-family:var(--h);font-weight:700;font-size:12.5px;color:#fff;line-height:1.2}
.sidebar .foot .rl{font-size:10.5px;color:var(--teal-200)}

/* top bar */
.top{display:flex;align-items:center;gap:12px;padding:14px 32px;background:#fff;
  border-bottom:1px solid var(--bd);flex-shrink:0;flex-wrap:wrap}
.top h2{font-size:18px;font-weight:700;letter-spacing:var(--tracking-tight)}

/* ---- primitives -------------------------------------------------------------- */
.card{background:var(--surface-card);border:1px solid var(--bd);border-radius:var(--radius-lg)}
.mono{font-family:var(--font-mono);font-size:12px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.fl{font-size:10px;font-weight:600;color:var(--tl);text-transform:uppercase;
  letter-spacing:var(--tracking-overline);font-family:var(--h);margin-bottom:3px}

/* badges */
.bdg{display:inline-flex;align-items:center;gap:5px;font-family:var(--h);font-weight:700;
  font-size:11px;border-radius:var(--radius-badge);padding:2.5px 8px;white-space:nowrap}
.bdg.p1{background:var(--erbg);color:var(--er);border:1px solid #FECACA}
.bdg.p2{background:var(--wnbg);color:var(--wn);border:1px solid #FDE68A}
.bdg.p3{background:var(--inbg);color:var(--in);border:1px solid #BFDBFE}
.bdg.p4{background:var(--slate-100);color:var(--tm);border:1px solid var(--bd)}
.bdg.er{background:var(--erbg);color:var(--er)}
.bdg.wn{background:var(--wnbg);color:var(--wn)}
.bdg.ok{background:var(--okbg);color:var(--ok)}
.bdg.inf{background:var(--inbg);color:var(--in)}
.bdg.gy{background:var(--slate-100);color:var(--tm)}
.bdg.pr{background:var(--teal-100);color:#0F766E}

/* notice / callout — the single component for every information box.
   Semantic variant sets background, border and text together; content is any
   HTML. Optional leading .ni icon span. Never hand-roll notice colours inline. */
.notice{display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--bd);border-radius:var(--radius-lg);
  padding:12px 16px;font-size:13px;line-height:1.5;font-family:var(--b);color:var(--tx)}
.notice .ni{flex-shrink:0;margin-top:1px;font-size:15px;line-height:1.15}
.notice strong{font-family:var(--h);font-weight:700}
.notice code{font-family:var(--font-mono);font-size:.92em;background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.06);border-radius:4px;padding:2px 8px}
.notice.sm{padding:9px 12px;font-size:12.5px;border-radius:var(--radius-card)}
.notice-ok{background:var(--okbg);border-color:var(--okbd);color:var(--okfg)}
.notice-warn{background:var(--wnbg);border-color:var(--wnbd);color:var(--wnfg)}
.notice-danger{background:var(--erbg);border-color:var(--erbd);color:var(--erfg)}
.notice-info{background:var(--inbg);border-color:var(--inbd);color:var(--infg)}
.notice-brand{background:var(--surface-wash);border-color:var(--teal-200);color:var(--teal-900)}
.notice.col{flex-direction:column;align-items:stretch;gap:0}   /* stacked panels; children own their spacing */
.notice a{color:inherit;font-weight:600;text-decoration:underline}

/* toasts — transient, non-blocking notices (replace native alert()).
   Reuse the .notice variants; stack top-right, click or time out to dismiss. */
.toast-wrap{position:fixed;top:16px;right:16px;z-index:1000;display:flex;flex-direction:column;
  gap:10px;max-width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast-wrap .notice{pointer-events:auto;cursor:pointer;box-shadow:var(--shadow-pop);animation:toastIn .18s ease-out}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.toast-wrap .notice.out{opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}

/* confirm dialog (replaces native confirm()) */
.modal-backdrop{position:fixed;inset:0;z-index:1001;background:rgba(15,23,42,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:mfade .15s ease-out}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface-card);border-radius:var(--radius-modal);box-shadow:var(--shadow-pop);
  max-width:440px;width:100%;padding:22px 24px;animation:mpop .18s ease-out}
@keyframes mpop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.modal h3{font-family:var(--h);font-size:16px;font-weight:700;margin-bottom:8px}
.modal p{font-size:13.5px;color:var(--tm);line-height:1.55}
.modal .acts{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}

/* client portal top bar — one uniform header across every client-facing page
   (rendered by client-shell.js into <header id="client-top">) */
.ctopbar{background:linear-gradient(150deg,#0E7C7B,#0A5F5E);padding:14px 28px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ctopbar .ct-brand{color:#fff;text-decoration:none;font-family:var(--h);font-weight:700;
  font-size:14.5px;display:flex;align-items:center;gap:10px;white-space:nowrap}
.ctopbar .ct-nav{display:flex;gap:20px}
.ctopbar .ct-nav a{color:#fff;text-decoration:none;font-family:var(--h);font-weight:600;font-size:13px;opacity:.82;white-space:nowrap}
.ctopbar .ct-nav a:hover{opacity:1}
.ctopbar .ct-nav a[aria-current="page"]{opacity:1;border-bottom:2px solid var(--teal-300);padding-bottom:3px}
.ctopbar .ct-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.ctopbar .ct-right a{color:#fff;font-family:var(--h);font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap}
.ctopbar .ct-right a:hover{text-decoration:underline}
.ctopbar .ct-right .prac{color:var(--teal-200);font-size:12.5px;font-family:var(--b)}
@media(max-width:640px){.ctopbar{gap:10px 16px}.ctopbar .ct-nav{order:3;width:100%;gap:16px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--h);
  font-weight:700;border-radius:var(--radius-button);border:1px solid transparent;white-space:nowrap}
.btn.bs{font-size:12px;padding:6.5px 12px}
.btn.bm{font-size:13px;padding:8.5px 16px}
.btn.bpr{background:var(--pr);color:#fff}
.btn.bpr:hover{background:var(--teal-800)}
.btn.bgh{background:#fff;color:var(--tm);border-color:var(--bd)}
.btn.bgh:hover{border-color:var(--slate-300);color:var(--tx)}
.btn.ber{background:var(--er);color:#fff}
.btn.ber:hover{background:#B91C1C}

/* form fields — .fld stacks a label above a .cin control; .cin is the control.
   Full-width is scoped to .fld .cin so standalone .cin (top-bar filters) keep
   their intrinsic width. */
.cin{border:1px solid var(--bd);border-radius:8px;padding:8px 11px;font-family:var(--b);
  font-size:14px;line-height:1.3;color:var(--tx);background:#fff;outline:none;
  transition:border-color .12s,box-shadow .12s;max-width:100%}
.cin:hover{border-color:var(--slate-300)}
.cin:focus{border-color:var(--pr);box-shadow:0 0 0 3px rgba(14,124,123,.14)}
.cin:disabled{background:var(--slate-50);color:var(--tl);cursor:not-allowed}
.cin::placeholder{color:var(--tl)}
select.cin{cursor:pointer}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>label{font-family:var(--h);font-weight:600;font-size:11.5px;color:var(--tm);
  letter-spacing:.01em;line-height:1.2}
.fld>.cin{width:100%}

/* tables */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-family:var(--h);font-size:10px;font-weight:700;color:var(--tl);text-transform:uppercase;
  letter-spacing:.08em;text-align:left;padding:9px 16px;border-bottom:1px solid var(--bd);background:#FAFBFC}
.tbl td{padding:10px 16px;border-bottom:1px solid var(--slate-100);font-size:13px;vertical-align:middle}
.tbl tbody tr:hover{background:var(--slate-50)}
.tbl tbody tr:last-child td{border-bottom:none}

/* scroll panes inside the app shell */
.scrolly{overflow-y:auto}

/* ---- responsive degrade: the console is desktop-first; below 1100px it stacks
   and the page scrolls rather than the panes ---------------------------------- */
@media (max-width:1100px){
  #stage{height:auto;min-height:100vh}
  #stage>[data-shell-row]{flex-direction:column}
  .sidebar{width:100%;flex-direction:row;align-items:center;gap:10px;padding:10px 14px;overflow-x:auto}
  .sidebar nav{flex-direction:row}
  .sidebar .sect,.sidebar .foot{display:none}
  .sidebar .brand{padding-bottom:2px}
  [data-main-grid]{display:flex !important;flex-direction:column}
}