:root{
  --ink:#0a0a0a; --paper:#ffffff; --line:#e6e6e6; --line-strong:#0a0a0a;
  --muted:#6b6b6b; --faint:#f6f6f6; --alert:#0a0a0a;
  --accent:#0f8b7e; --accent-ink:#0b6b61; --accent-wash:#eaf6f4;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}

/* ---- initials avatar (monochrome, clinical) ---- */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:28px;height:28px;border-radius:50%;border:1px solid var(--ink);
  font-size:10px;font-weight:600;letter-spacing:.02em;background:var(--paper);color:var(--ink);
  text-transform:uppercase;vertical-align:middle}
.avatar.lg{width:44px;height:44px;font-size:14px}
.avatar.me{background:var(--accent);border-color:var(--accent);color:#fff}
.avatar.photo{background-size:cover;background-position:center;color:transparent;border-color:var(--line)}

/* ---- motion: subtle, professional (respects reduced-motion) ---- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeInUp .26s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion: reduce){
  .fade-in{animation:none}
  *{scroll-behavior:auto}
}

/* ---- shimmer / skeleton loading ---- */
@keyframes shimmer{0%{background-position:-320px 0}100%{background-position:320px 0}}
.skeleton{border:1px solid var(--line);border-radius:2px;padding:14px 16px;margin-top:10px}
.skeleton .bar{height:11px;border-radius:3px;margin:8px 0;
  background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%);
  background-size:640px 100%;animation:shimmer 1.2s infinite linear}
.skeleton .bar.w40{width:40%} .skeleton .bar.w70{width:70%} .skeleton .bar.w90{width:90%}

/* ---- shell ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;border-bottom:1px solid var(--line-strong)}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .mark{font-weight:700;letter-spacing:.18em;font-size:14px;text-transform:uppercase}
.brand .sub{font-size:11px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase}
.nav{display:flex;gap:26px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--muted);padding-bottom:3px}
.nav a.active{color:var(--ink);border-bottom:1px solid var(--ink)}

.wrap{max-width:1080px;margin:0 auto;padding:42px 28px 80px}

/* ---- eyebrow / labels ---- */
.eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
h1{font-weight:600;font-size:30px;letter-spacing:-.01em;margin:0 0 6px}
h2{font-weight:600;font-size:15px;letter-spacing:.04em;margin:0 0 16px;text-transform:uppercase}
.lede{color:var(--muted);max-width:62ch;margin:0 0 36px}

/* ---- case ref chip (signature element) ---- */
.caseref{font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  border:1px solid var(--ink);padding:4px 9px;display:inline-block;border-radius:2px}

/* ---- identity firewall: the patient panel is visually walled off ---- */
.firewall{border:1px solid var(--line-strong);position:relative;margin-bottom:34px}
.firewall::before{content:'IDENTIFIED · NEVER TRANSMITTED';position:absolute;top:-1px;left:-1px;
  background:var(--ink);color:var(--paper);font-size:9px;letter-spacing:.22em;
  padding:4px 10px;text-transform:uppercase}
.firewall .body{padding:34px 22px 22px}
.shareable{border:1px dashed var(--muted);position:relative;margin-bottom:34px}
.shareable::before{content:'PSEUDONYMOUS · SHAREABLE';position:absolute;top:-1px;left:-1px;
  background:var(--paper);color:var(--muted);border:1px solid var(--muted);border-left:0;border-top:0;
  font-size:9px;letter-spacing:.22em;padding:4px 10px;text-transform:uppercase}
.shareable .body{padding:34px 22px 22px}

/* ---- forms ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font-family:var(--sans);font-size:14px;padding:11px 12px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:2px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
textarea{resize:vertical;min-height:96px}

/* ---- buttons ---- */
.btn{font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:13px 22px;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;border-radius:2px}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.actions{display:flex;gap:12px;margin-top:30px}

/* ---- case list ---- */
.row{display:grid;grid-template-columns:140px 1fr 120px 110px;gap:18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line)}
.row .meta{font-size:13px;color:var(--muted)}
.row .anat{font-weight:500;text-transform:capitalize}
.status{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.status.ready{color:var(--ink)}

/* ---- warning ribbon ---- */
.warn{border:1px solid var(--ink);padding:14px 16px;font-size:13px;margin-bottom:22px;
  display:flex;gap:10px;align-items:flex-start}
.warn b{letter-spacing:.04em}

@media(max-width:720px){.grid{grid-template-columns:1fr}.row{grid-template-columns:1fr;gap:6px}
  .nav{display:none}}