:root{
  --paper:#f4f2ec;
  --paper-2:#ebe7df;
  --ink:#1a1a1a;
  --muted:#6e6b63;
  --line:#d9d5cb;
  --accent:#5E6AD2;
  --accent-2:#49628d;
  --danger:#d84315;
  --ok:#2e7d32;
  --font-ui:"Inter Tight", "Sarabun", sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--paper); color:var(--ink); font-family:var(--font-ui); font-size:15px; line-height:1.45; }
body { --page-pad:16px; padding:0; min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--accent-2); text-decoration:none; }
.top-nav {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%);
  color:#F0EDE5; box-shadow:0 1px 4px rgba(0,0,0,.12); height:64px;
}
.nav-left { display:flex; align-items:center; gap:12px; }
.nav-logo { height:34px; display:block; }
.nav-title { font-weight:700; font-size:16px; letter-spacing:.02em; }
.nav-home { font-size:13px; color:#F0EDE5; opacity:.85; }
.tab-bar {
  display:flex; gap:0; overflow-x:auto; background:#fff; border-bottom:1px solid var(--line);
  scrollbar-width:none;
}
.tab-bar::-webkit-scrollbar { display:none; }
.tab-bar a {
  flex:0 0 auto; padding:10px 14px; font-size:13px; color:var(--muted); border-bottom:3px solid transparent;
  white-space:nowrap;
}
.tab-bar a.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.main { flex:1 1 auto; padding:20px var(--page-pad) 100px; max-width:1080px; margin:0 auto; width:100%; }
.card { background:#fff; border:1px solid var(--line); border-radius:3px; padding:18px; margin-bottom:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.section-title { font-size:15px; font-weight:700; margin:0 0 12px; display:flex; align-items:center; gap:8px; color:var(--ink); }
.section-title .num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; }
.field-row { display:grid; grid-template-columns:160px 1fr; gap:12px; align-items:start; margin-bottom:10px; }
.field-row label { font-size:13px; color:var(--ink); padding-top:7px; }
.field-row label .sub { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
input[type=text],input[type=number],input[type=date],input[type=time],input[type=datetime-local],textarea,select {
  width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:2px; background:#fff; font-family:inherit; font-size:14px;
}
textarea { min-height:56px; resize:vertical; field-sizing:content; }
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--accent); }
.radio-group,.checkbox-group { display:flex; flex-wrap:wrap; gap:8px 10px; }
.radio-group label,.checkbox-group label {
  display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer;
  padding:6px 12px; border:1px solid var(--line); border-radius:14px; background:#fff;
  transition:background .1s ease,border-color .1s ease,color .1s ease;
}
.radio-group label:hover,.checkbox-group label:hover { border-color:var(--accent-2); }
.radio-group label:has(input:checked),.checkbox-group label:has(input:checked) {
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.radio-group input,.checkbox-group input { accent-color:var(--accent); }
.field-row .field-note { font-size:12px; color:var(--muted); margin:4px 0 8px; }
.score-line { margin-top:6px; }
.score-box.risk-low { background:#e5f2e6; color:var(--ok); }
.score-box.risk-low-medium { background:#eef5e8; color:#5a8a3a; }
.score-box.risk-medium { background:#fdf1de; color:#9a6a1a; }
.score-box.risk-high { background:#fbe6e1; color:var(--danger); }
.inline-row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.inline-row .field-row { flex:1 1 220px; grid-template-columns:1fr; }
.inline-row label { padding-top:0; margin-bottom:3px; }
.score-box { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:3px; background:var(--paper-2); font-size:13px; }
.score-val { font-weight:700; color:var(--accent); }
.action-bar {
  position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line);
  padding:10px 16px; display:flex; gap:10px; justify-content:center; z-index:90;
}
.btn { border:none; border-radius:2px; padding:8px 14px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-secondary { background:var(--paper-2); color:var(--ink); border:1px solid var(--line); }
.btn-danger { background:#fff; color:var(--danger); border:1px solid var(--danger); }
.footer { text-align:center; padding:16px; font-size:11px; color:var(--muted); }
/* ---- Patient strip (HN field) ---- */
.patient-strip {
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
  padding:10px 14px; background:#fff; border:1px solid var(--line);
  border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.patient-strip input {
  width:140px; padding:7px 9px; border:1px solid var(--line);
  border-radius:2px; font-family:inherit; font-size:14px; font-weight:600;
}
.strip-label { font-size:12px; color:var(--muted); font-weight:500; }

/* ---- Template color tokens (sidebar card borders) ---- */
:root {
  --tpl-general:#5E6AD2;
  --tpl-sepsis:#d84315;
  --tpl-trauma:#e65100;
  --tpl-mammalian-bite:#2e7d32;
  --tpl-chest-pain:#6A1B9A;
  --tpl-abdominal-pain:#9a6a1a;
  --tpl-eye-injury:#00897B;
}

/* ---- Sidebar ---- */
.sidebar-fab {
  position:fixed; right:20px; bottom:80px; z-index:95;
  width:48px; height:48px; border-radius:50%; border:none;
  background:var(--accent); color:#fff; font-size:20px; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.2); display:flex; align-items:center;
  justify-content:center; transition:background .15s ease,transform .15s ease;
}
.sidebar-fab:hover { background:var(--accent-2); transform:scale(1.05); }

.sidebar-panel {
  position:fixed; top:64px; right:0; bottom:0; width:340px; z-index:96;
  background:#fff; border-left:1px solid var(--line);
  box-shadow:-2px 0 12px rgba(0,0,0,.1);
  transform:translateX(100%); transition:transform .2s ease;
  display:flex; flex-direction:column; overflow:hidden;
}
.sidebar-panel.open { transform:translateX(0); }

.sidebar-header {
  padding:14px 16px; background:var(--accent-2); color:#F0EDE5;
  display:flex; align-items:center; justify-content:space-between;
}
.sidebar-header h3 { margin:0; font-size:15px; font-weight:700; }
.sidebar-close {
  background:none; border:none; color:#F0EDE5; font-size:22px; cursor:pointer;
  padding:0 4px; line-height:1;
}
.sidebar-close:hover { opacity:.8; }

.sidebar-new {
  width:100%; padding:10px; border:none; background:var(--accent); color:#fff;
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
}
.sidebar-new:hover { background:var(--accent-2); }

.sidebar-filter {
  padding:8px 12px; border-bottom:1px solid var(--line);
}
.sidebar-filter input {
  width:100%; padding:7px 9px; border:1px solid var(--line);
  border-radius:2px; font-family:inherit; font-size:13px;
}

.sidebar-list { flex:1; overflow-y:auto; padding:0; }

.sidebar-card {
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--line); cursor:pointer;
  border-left:4px solid var(--accent); transition:background .1s ease;
}
.sidebar-card:hover { background:var(--paper-2); }
.sidebar-card.tpl-general-er-note { border-left-color:var(--tpl-general); }
.sidebar-card.tpl-sepsis      { border-left-color:var(--tpl-sepsis); }
.sidebar-card.tpl-trauma      { border-left-color:var(--tpl-trauma); }
.sidebar-card.tpl-mammalian-bite { border-left-color:var(--tpl-mammalian-bite); }
.sidebar-card.tpl-chest-pain  { border-left-color:var(--tpl-chest-pain); }
.sidebar-card.tpl-abdominal-pain { border-left-color:var(--tpl-abdominal-pain); }
.sidebar-card.tpl-eye-injury  { border-left-color:var(--tpl-eye-injury); }

.sidebar-card-info { flex:1; min-width:0; }
.sidebar-card-hn { font-size:13px; font-weight:600; color:var(--ink); }
.sidebar-card-cc { font-size:12px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-card-meta { font-size:11px; color:var(--muted); margin-top:3px; }
.sidebar-card-template { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }

.sidebar-card-delete {
  background:none; border:none; color:var(--danger); font-size:16px;
  cursor:pointer; padding:2px 4px; opacity:.5; transition:opacity .1s ease;
}
.sidebar-card-delete:hover { opacity:1; }

.sidebar-empty { padding:24px 16px; text-align:center; color:var(--muted); font-size:13px; }

@media (max-width:380px) {
  .sidebar-panel { width:100%; }
}

@media print {
  .top-nav,.tab-bar,.action-bar,.footer,.patient-strip,.sidebar-fab,.sidebar-panel,.skip-link { display:none!important; }
  body { background:#fff; }
  .main { padding:0; max-width:none; }
  .card { border:none; box-shadow:none; padding:10px 0; margin-bottom:6px; break-inside:avoid; page-break-inside:avoid; border-bottom:1px solid #ccc; }
}

.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---- Compact vital signs (1-line) ---- */
.vitals-compact {
  display:flex; gap:6px; align-items:flex-end; flex-wrap:nowrap;
}
.vitals-compact .vit {
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px;
}
.vitals-compact .vit label {
  font-size:11px; color:var(--muted); padding:0; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; line-height:1.2;
}
.vitals-compact .vit input {
  padding:5px 7px; font-size:14px; font-weight:600;
}
.vitals-compact .vit input.auto-filled {
  border-color:var(--accent); background:#f0eeff;
}

/* ---- Float status box (top-right) ---- */
.float-status {
  position:fixed; top:72px; right:16px; z-index:85;
  background:#fff; border:1px solid var(--line); border-radius:3px;
  padding:8px 12px; font-size:13px; min-width:180px;
  box-shadow:0 2px 8px rgba(0,0,0,.1); transition:all .2s ease;
}
.float-status .fs-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.float-status .fs-risk { font-size:15px; font-weight:700; margin-bottom:4px; }
.float-status .fs-scores { display:flex; flex-direction:column; gap:2px; }
.float-status .fs-score { display:flex; justify-content:space-between; align-items:center; font-size:12px; padding:1px 0; }
.float-status .fs-score-name { color:var(--muted); }
.float-status .fs-score-val { font-weight:600; }
/* Per-score risk colors inside float */
.float-status .fs-score.s-risk-low .fs-score-val { color:var(--ok); }
.float-status .fs-score.s-risk-low-medium .fs-score-val { color:#5a8a3a; }
.float-status .fs-score.s-risk-medium .fs-score-val { color:#9a6a1a; }
.float-status .fs-score.s-risk-high .fs-score-val { color:var(--danger); }
.float-status.risk-low { border-left:4px solid var(--ok); }
.float-status.risk-low .fs-risk { color:var(--ok); }
.float-status.risk-medium { border-left:4px solid #9a6a1a; }
.float-status.risk-medium .fs-risk { color:#9a6a1a; }
.float-status.risk-high { border-left:4px solid var(--danger); }
.float-status.risk-high .fs-risk { color:var(--danger); }
@media print { .float-status { display:none!important; } }
@media (max-width:560px) { .float-status { top:auto; bottom:70px; right:8px; min-width:160px; } }

/* ---- Button group (tappable alternatives to radio/checkbox) ---- */
.btn-group { display:flex; flex-wrap:wrap; gap:6px; }
.btn-group .btn-tile {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 14px; border:1px solid var(--line); border-radius:3px;
  background:#fff; cursor:pointer; font-size:13px; font-weight:500;
  transition:all .12s ease; min-height:44px; text-align:center; position:relative;
}
.btn-group .btn-tile:hover { border-color:var(--accent-2); background:var(--paper-2); }
.btn-group input[type=radio],
.btn-group input[type=checkbox] {
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.btn-group .btn-tile:focus-within {
  outline:2px solid var(--accent-2);
  outline-offset:2px;
}
.btn-group .btn-tile:has(input:checked) {
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.btn-group .btn-tile .tile-label { line-height:1.2; }
.btn-group .btn-tile .tile-sub { font-size:10px; opacity:.7; margin-top:2px; }
.btn-group .btn-tile:has(input:checked) .tile-sub { opacity:.85; }

/* ---- Wound illustration cards ---- */
.wound-illust-pair {
  display:flex; gap:8px; margin-bottom:6px; justify-content:center;
}
.wound-illust {
  width:150px; min-height:140px;
  display:flex; flex-direction:column; align-items:center;
}
.wound-illust svg { width:100%; height:120px; display:block; }
.wound-illust .illust-caption {
  font-size:9px; color:var(--muted); text-align:center; margin-top:4px;
  font-weight:500; text-transform:uppercase; letter-spacing:.03em;
}
/* Skin layer colors (anatomical cross-section) */
.wound-illust .epidermis { fill:#e8c4a0; stroke:#c9a47e; stroke-width:0.8; }
.wound-illust .dermis { fill:#e0b48a; stroke:#c9a47e; stroke-width:0.5; }
.wound-illust .subcutis { fill:#f5e6d3; stroke:#d9c5b0; stroke-width:0.5; }
.wound-illust .muscle { fill:#c44545; stroke:#a03030; stroke-width:0.5; }
.wound-illust .fascia { fill:#e8d5c0; stroke:#c9b0a0; stroke-width:0.5; }
.wound-illust .blood { fill:#a02020; opacity:0.6; }
.wound-illust .stroke { stroke:#1a1a1a; stroke-width:1.2; fill:none; stroke-linecap:round; }
.wound-illust .stroke-thin { stroke:#4a4a4a; stroke-width:0.8; fill:none; }
.wound-illust .label { font-size:5px; fill:#6e6b63; font-family:var(--font-ui); }
/* Isometric surface view */
.wound-illust .iso-skin { fill:#e8c4a0; stroke:#c9a47e; stroke-width:0.8; }
.wound-illust .iso-skin-shadow { fill:#d4a880; opacity:0.5; }
.wound-illust .iso-wound { fill:#c0392b; stroke:#8b2818; stroke-width:0.8; }
.wound-illust .iso-wound-edge { stroke:#8b2818; stroke-width:1; fill:none; }
.wound-illust .iso-scratch { stroke:#c0392b; stroke-width:1.2; fill:none; stroke-linecap:round; }
.wound-illust .iso-saliva { fill:#7eb8e8; opacity:0.4; }
/* Make btn-tile with wound-illust-pair wider and content stacked */
.btn-group .btn-tile:has(.wound-illust-pair) {
  min-width:340px; align-items:center;
}

/* ---- Narrative sub-cards (rendered by ErNote.renderNarrative) ---- */
.narrative-sub-card {
  margin-bottom: 10px;
}
.narrative-sub-card .section-title {
  font-size: 14px;
  margin-bottom: 10px;
}
.narrative-sub-card .section-title .num {
  background: var(--accent-2);
  font-size: 11px;
  width: 18px;
  height: 18px;
}

/* ===== Cross-Document View Transitions & Top-Layer Physics ===== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 100ms ease-out both vt-fade-out;
}

::view-transition-new(root) {
  animation: 140ms ease-in both vt-fade-in;
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}