/* EZcarer interface. One typeface (Atkinson Hyperlegible), cool clinical palette,
   marigold reserved for focus and work-in-progress. */

@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper: #F3F6F5;
  --surface: #FFFFFF;
  --ink: #182826;
  --ink-soft: #4B5D5A;
  --line: #C9D5D2;
  --line-soft: #E2E9E7;
  --teal: #1D6B5E;
  --teal-deep: #124A41;
  --teal-wash: #E0EDE9;
  --marigold: #D99A1E;
  --marigold-wash: #FBF0D7;
  --alert: #B42318;
  --alert-wash: #FCEBE8;
  --ok: #2B744A;
  --radius-control: 4px;
  --radius-panel: 8px;
  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: 2.125rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--step-0); line-height: 1.55; }
a { color: var(--teal-deep); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6em; font-weight: 700; }
h1 { font-size: var(--step-3); letter-spacing: -0.01em; }
h2 { font-size: var(--step-1); }
h3 { font-size: var(--step-0); }
p { margin: 0 0 1em; max-width: 68ch; }
.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 40ch; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--step--1); }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--marigold); color: var(--ink); padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

/* ---------- Wordmark ---------- */
.wordmark { display: inline-flex; align-items: baseline; gap: 0; font-weight: 700; font-size: 1.35rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.wordmark .ez { color: var(--teal); }
.wordmark small { font-weight: 400; font-size: var(--step--1); color: var(--ink-soft); margin-left: 0.6rem; letter-spacing: 0; }

/* ---------- Forms ---------- */
.field { margin: 0 0 1.4rem; }
.field > label, .fieldset > legend { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.hint { display: block; color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 0.45rem; max-width: 60ch; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select {
  width: 100%; max-width: 30rem; font: inherit; color: var(--ink); background: var(--surface);
  border: 2px solid var(--ink-soft); border-radius: var(--radius-control); padding: 0.55rem 0.7rem; min-height: 2.9rem;
}
input.short { max-width: 9rem; }
input.code { max-width: 11rem; font-size: var(--step-1); letter-spacing: 0.3em; text-align: center; }
input:focus, select:focus { outline: 3px solid var(--marigold); outline-offset: 0; border-color: var(--ink); }
.fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; }
.choice { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem; border: 2px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); margin-bottom: 0.6rem; cursor: pointer; max-width: 36rem; }
.choice:has(input:checked) { border-color: var(--teal); background: var(--teal-wash); }
.choice input { margin-top: 0.3rem; width: 1.2rem; height: 1.2rem; accent-color: var(--teal); flex: none; }
.choice strong { display: block; }
.choice span { color: var(--ink-soft); font-size: var(--step--1); }
.check { display: flex; gap: 0.6rem; align-items: flex-start; max-width: 40rem; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: 0.25rem; accent-color: var(--teal); flex: none; }
.slug-input { display: flex; align-items: stretch; max-width: 30rem; }
.slug-input .prefix { display: flex; align-items: center; padding: 0 0.6rem; background: var(--line-soft); border: 2px solid var(--ink-soft); border-right: 0; border-radius: var(--radius-control) 0 0 var(--radius-control); color: var(--ink-soft); font-size: var(--step--1); white-space: nowrap; }
.slug-input input { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.revealed[hidden] { display: none; }
.revealed { border-left: 4px solid var(--line); padding-left: 1.2rem; margin: 0.4rem 0 1.4rem 0.55rem; }

/* ---------- Buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: inherit; font-weight: 700; padding: 0.65rem 1.25rem; min-height: 2.9rem; border-radius: var(--radius-control); border: 2px solid transparent; background: var(--teal); color: #fff; cursor: pointer; text-decoration: none; box-shadow: 0 2px 0 var(--teal-deep); }
.button:hover { background: var(--teal-deep); }
.button:active { transform: translateY(2px); box-shadow: none; }
.button.secondary { background: var(--surface); color: var(--ink); border-color: var(--ink-soft); box-shadow: 0 2px 0 var(--line); }
.button.secondary:hover { background: var(--line-soft); }
.button.danger { background: var(--alert); box-shadow: 0 2px 0 #7a170f; }
.button[disabled] { opacity: 0.55; cursor: not-allowed; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--teal-deep); text-decoration: underline; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.8rem; }

/* ---------- Messages ---------- */
.notice { border-left: 6px solid var(--teal); background: var(--surface); padding: 0.9rem 1.1rem; margin: 0 0 1.5rem; max-width: 44rem; border-radius: 0 var(--radius-panel) var(--radius-panel) 0; }
.notice.error { border-color: var(--alert); background: var(--alert-wash); }
.notice.error strong { color: var(--alert); }
.notice.warn { border-color: var(--marigold); background: var(--marigold-wash); }
.notice p:last-child { margin-bottom: 0; }
.secret-box { background: var(--surface); border: 2px dashed var(--teal); border-radius: var(--radius-panel); padding: 1rem 1.2rem; max-width: 36rem; margin: 0 0 1.4rem; }
.secret-box .secret { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.3rem; letter-spacing: 0.08em; word-break: break-all; margin: 0.3rem 0 0.6rem; color: var(--teal-deep); }

/* ---------- Status labels (text + shape, never colour alone) ---------- */
.status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--step--1); font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1.5px solid currentColor; white-space: nowrap; }
.status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.status.active, .status.available, .status.completed, .status.ok { color: var(--ok); }
.status.provisioning, .status.running, .status.allocated { color: #8a5d00; }
.status.provisioning_failed, .status.failed, .status.not_empty, .status.unreachable { color: var(--alert); }
.status.rolled_back, .status.suspended { color: var(--ink-soft); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-weight: 700; color: var(--ink-soft); background: #F8FAF9; }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; }
.hash { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.78rem; color: var(--ink-soft); }
.grid-matrix td.yes { color: var(--teal-deep); font-weight: 700; text-align: center; }
.grid-matrix td.no { color: var(--line); text-align: center; }
.grid-matrix th.rot { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; padding: 0.6rem 0.3rem; }

/* ---------- Summary list ---------- */
.summary { display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr; gap: 0; border-top: 1px solid var(--line); max-width: 44rem; margin: 0 0 1.5rem; }
.summary dt, .summary dd { margin: 0; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.summary dt { font-weight: 700; padding-right: 1rem; }

/* ---------- The set-up ledger (the memorable element) ---------- */
.ledger { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: 40rem; position: relative; }
.ledger li { position: relative; display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 0.2rem 0.9rem; align-items: start; padding: 0 0 1.35rem; }
.ledger li::before { content: ""; position: absolute; left: calc(1.1rem - 1px); top: 1.9rem; bottom: 0.15rem; width: 2px; background: var(--line); }
.ledger li:last-child::before { display: none; }
.ledger li.done::before { background: var(--teal); }
.ledger .mark { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; color: var(--ink-soft); position: relative; z-index: 1; }
.ledger .label { padding-top: 0.3rem; font-weight: 700; }
.ledger .state { padding-top: 0.35rem; font-size: var(--step--1); color: var(--ink-soft); white-space: nowrap; }
.ledger .error { grid-column: 2 / 4; color: var(--alert); font-size: var(--step--1); background: var(--alert-wash); padding: 0.55rem 0.75rem; border-radius: var(--radius-control); margin-top: 0.3rem; }
.ledger li.pending .label { color: var(--ink-soft); font-weight: 400; }
.ledger li.running .mark { border-color: var(--marigold); background: var(--marigold-wash); color: #7a5200; }
.ledger li.running .mark::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--marigold); opacity: 0.6; animation: ez-pulse 1.4s ease-out infinite; }
.ledger li.running .state { color: #7a5200; font-weight: 700; }
.ledger li.done .mark { background: var(--teal); border-color: var(--teal); color: #fff; font-size: 1rem; }
.ledger li.done .state { color: var(--ok); }
.ledger li.failed .mark { background: var(--alert); border-color: var(--alert); color: #fff; border-radius: 6px; }
.ledger li.failed .state { color: var(--alert); font-weight: 700; }
.ledger li.rolled_back .label { text-decoration: line-through; color: var(--ink-soft); font-weight: 400; }
@keyframes ez-pulse { from { transform: scale(0.85); opacity: 0.7; } to { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ledger li.running .mark::after { animation: none; opacity: 0.5; } }
.ledger-done { max-width: 40rem; }

/* ---------- Layout: installer ---------- */
.install-shell { display: grid; grid-template-columns: 17rem 1fr; min-height: 100vh; }
.install-rail { background: var(--ink); color: #E6EEEC; padding: 2rem 1.5rem; }
.install-rail .wordmark { color: #fff; }
.install-rail .wordmark .ez { color: #8FD1C2; }
.install-rail .wordmark small { color: #A9BBB7; }
.install-rail ol { list-style: none; padding: 0; margin: 2.5rem 0 0; counter-reset: stage; }
.install-rail li { counter-increment: stage; display: flex; gap: 0.75rem; align-items: center; padding: 0.55rem 0; color: #9FB2AE; }
.install-rail li::before { content: counter(stage); width: 1.8rem; height: 1.8rem; flex: none; border-radius: 50%; border: 1.5px solid #5E7571; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; }
.install-rail li.is-done { color: #CFE3DE; }
.install-rail li.is-done::before { content: "✓"; background: #2F8574; border-color: #2F8574; color: #fff; }
.install-rail li.is-current { color: #fff; font-weight: 700; }
.install-rail li.is-current::before { border-color: var(--marigold); background: var(--marigold); color: var(--ink); }
.install-rail .rail-foot { margin-top: 3rem; font-size: var(--step--1); color: #8CA09C; max-width: 14rem; }
.install-main { padding: 3rem clamp(1.25rem, 5vw, 4.5rem) 4rem; max-width: 52rem; }
.install-main .stage-count { color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 0.3rem; }

/* ---------- Layout: public (sign in, sign up, errors) ---------- */
.public-shell { min-height: 100vh; display: flex; flex-direction: column; }
.public-top { padding: 1.4rem clamp(1.25rem, 5vw, 3rem); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.public-main { flex: 1; padding: 3rem clamp(1.25rem, 5vw, 3rem) 4rem; width: 100%; max-width: 44rem; }
.public-main.wide { max-width: 60rem; }
.public-foot { padding: 1.4rem clamp(1.25rem, 5vw, 3rem); color: var(--ink-soft); font-size: var(--step--1); border-top: 1px solid var(--line); }
.org-name { font-size: var(--step--1); color: var(--ink-soft); }
.home-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; }
.home-split aside { border-left: 4px solid var(--teal); padding-left: 1.5rem; }

/* ---------- Layout: console & organisation ---------- */
.app-shell { display: grid; grid-template-columns: 15.5rem 1fr; min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--line); padding: 1.5rem 1.2rem; display: flex; flex-direction: column; gap: 1.8rem; }
.side .org-block strong { display: block; font-size: var(--step-0); line-height: 1.3; margin-top: 0.9rem; }
.side .org-block span { font-size: var(--step--1); color: var(--ink-soft); }
.side nav ul { list-style: none; margin: 0; padding: 0; }
.side nav a { display: block; padding: 0.55rem 0.75rem; border-radius: var(--radius-control); color: var(--ink); text-decoration: none; }
.side nav a:hover { background: var(--line-soft); }
.side nav a[aria-current=page] { background: var(--teal-wash); color: var(--teal-deep); font-weight: 700; box-shadow: inset 4px 0 0 var(--teal); }
.side .who { margin-top: auto; font-size: var(--step--1); border-top: 1px solid var(--line); padding-top: 1rem; }
.side .who strong { display: block; font-size: var(--step-0); }
.console .side { background: var(--ink); color: #E6EEEC; border-right: 0; }
.console .side .wordmark { color: #fff; }
.console .side .wordmark .ez { color: #8FD1C2; }
.console .side .wordmark small { color: #A9BBB7; }
.console .side nav a { color: #DCE6E3; }
.console .side nav a:hover { background: #24403C; }
.console .side nav a[aria-current=page] { background: #24403C; color: #fff; box-shadow: inset 4px 0 0 var(--marigold); }
.console .side .who { border-color: #33504B; color: #A9BBB7; }
.console .side .who strong { color: #fff; }
.console .side .link-button { color: #8FD1C2; }
.main { padding: 2.2rem clamp(1.25rem, 4vw, 3.5rem) 4rem; min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.page-head h1 { margin: 0; }
.figures { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); margin: 0 0 2.2rem; max-width: 52rem; }
.figures div { flex: 1 1 10rem; padding: 1rem 1.2rem; border-right: 1px solid var(--line-soft); }
.figures div:last-child { border-right: 0; }
.figures b { display: block; font-size: var(--step-2); font-variant-numeric: tabular-nums; line-height: 1.1; }
.figures span { color: var(--ink-soft); font-size: var(--step--1); }
.section { margin-bottom: 2.5rem; }
* + .section { margin-top: 2.5rem; }
[tabindex="-1"]:focus { outline: none; }
.action-code { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; color: var(--ink-soft); }
.fields-list { list-style: none; padding: 0; margin: 0; max-width: 46rem; border-top: 1px solid var(--line); }
.fields-list li { padding: 0.8rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; }
.fields-list .type { font-size: var(--step--1); color: var(--ink-soft); text-align: right; }
.fields-list .extra { grid-column: 1 / -1; font-size: var(--step--1); color: var(--ink-soft); }
.tag { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: var(--radius-control); background: var(--line-soft); color: var(--ink-soft); margin-right: 0.3rem; }
.tag.s3, .tag.s4, .tag.s5 { background: var(--alert-wash); color: var(--alert); }
.tag.s2 { background: var(--marigold-wash); color: #7a5200; }
.inline-form { display: inline; }

@media (max-width: 860px) {
  .install-shell, .app-shell { grid-template-columns: 1fr; }
  .install-rail { padding: 1.2rem 1.25rem; }
  .install-rail ol { display: flex; gap: 0.35rem; margin-top: 1rem; overflow-x: auto; }
  .install-rail li { padding: 0; }
  .install-rail li span, .install-rail .rail-foot { display: none; }
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
  .side nav ul { display: flex; flex-wrap: wrap; gap: 0.2rem; }
  .side .who { margin-top: 0; border-top: 0; padding-top: 0; }
  .home-split { grid-template-columns: 1fr; }
  .summary { grid-template-columns: 1fr; }
  .summary dt { border-bottom: 0; padding-bottom: 0; }
}

/* ================= 0.2.0: care screens ================= */
textarea { width: 100%; max-width: 40rem; font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--ink-soft); border-radius: var(--radius-control); padding: 0.55rem 0.7rem; }
textarea:focus { outline: 3px solid var(--marigold); outline-offset: 0; border-color: var(--ink); }
input[type=date], input[type=time] { font: inherit; border: 2px solid var(--ink-soft); border-radius: var(--radius-control); padding: 0.45rem 0.6rem; min-height: 2.9rem; background: var(--surface); }
.req { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); background: var(--line-soft); border-radius: var(--radius-control); padding: 0 0.35rem; margin-left: 0.3rem; vertical-align: middle; }
.error-text { display: block; color: var(--alert); font-weight: 700; margin: 0.2rem 0 0.4rem; }
.field.has-error { border-left: 4px solid var(--alert); padding-left: 0.9rem; }
.field[hidden] { display: none; }
.label-like { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.when-inputs { display: flex; gap: 1rem; flex-wrap: wrap; }
.when-inputs label { display: flex; flex-direction: column; gap: 0.2rem; }
.inline-choices { display: block; }
.pill-choice { display: inline-flex; align-items: center; gap: 0.4rem; border: 2px solid var(--line); border-radius: 999px; padding: 0.35rem 0.9rem 0.35rem 0.6rem; margin: 0 0.4rem 0.5rem 0; background: var(--surface); cursor: pointer; }
.pill-choice:has(input:checked) { border-color: var(--teal); background: var(--teal-wash); font-weight: 700; }
.pill-choice input { accent-color: var(--teal); width: 1.1rem; height: 1.1rem; }
.fieldset .check { margin-bottom: 0.4rem; }
.record-form { max-width: 44rem; }
.record-subject { display: flex; align-items: center; gap: 0.9rem; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--teal); border-radius: var(--radius-panel); padding: 0.8rem 1rem; margin: 0 0 1.4rem; max-width: 44rem; }
.record-subject strong { display: block; font-size: var(--step-1); }

.demo-banner { background: var(--marigold-wash); border-bottom: 2px solid var(--marigold); padding: 0.55rem clamp(1rem, 3vw, 2rem); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: var(--step--1); }
.demo-banner a { font-weight: 700; }

.attention { list-style: none; margin: 0 0 1rem; padding: 0; max-width: 56rem; }
.attention li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0.9rem; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 0 var(--radius-panel) var(--radius-panel) 0; margin-bottom: 0.45rem; }
.attention li.urgent { border-left-color: var(--alert); }
.attention li.warning { border-left-color: var(--marigold); }
.attention li.info { border-left-color: var(--teal); }
.attention li.task { border-left-color: var(--ink-soft); }
.attention .level { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.35rem; }
.attention li.urgent .level { color: var(--alert); }
.attention li.warning .level { color: #7a5200; }
.attention li.info .level { color: var(--teal-deep); }
.row-actions { display: inline-flex; gap: 0.9rem; align-items: center; white-space: nowrap; flex-wrap: wrap; }

.avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--teal-wash); color: var(--teal-deep); display: inline-grid; place-items: center; font-weight: 700; flex: none; letter-spacing: 0.02em; }
.avatar.large { width: 4.2rem; height: 4.2rem; font-size: var(--step-1); }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.9rem; max-width: 64rem; }
.person-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 1rem; }
.person-link { display: flex; gap: 0.8rem; align-items: center; text-decoration: none; color: var(--ink); }
.person-link strong { display: block; }
.person-link:hover strong { text-decoration: underline; }
.person-card p { margin: 0.7rem 0 0; }
.quick { display: flex; gap: 0.9rem; margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--line-soft); font-size: var(--step--1); flex-wrap: wrap; }

.person-head { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 1.2rem; }
.person-head h1 { margin-bottom: 0.2rem; }
.person-head p { margin-bottom: 0.3rem; }
.tabs { display: flex; gap: 0.2rem; border-bottom: 2px solid var(--line); margin: 0 0 1.8rem; overflow-x: auto; }
.tabs a { padding: 0.65rem 1rem; text-decoration: none; color: var(--ink-soft); font-weight: 700; border-bottom: 4px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tabs a[aria-current=page] { color: var(--teal-deep); border-bottom-color: var(--teal); }
.two-col { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); gap: 2.5rem; }
.keyinfo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 1.1rem 1.2rem; }
.keyinfo dl { margin: 0 0 1rem; }
.keyinfo dt { font-weight: 700; font-size: var(--step--1); color: var(--ink-soft); }
.keyinfo dd { margin: 0 0 0.6rem; }
ul.plain { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.plain li { padding: 0.25rem 0; }
.protocol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 0.8rem 1rem; margin-bottom: 0.7rem; max-width: 44rem; }
.protocol summary { cursor: pointer; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.protocol-body { margin: 0.8rem 0; line-height: 1.6; }
.small-heading { font-size: var(--step--1); color: var(--ink-soft); margin: 1rem 0 0.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
.chip { display: inline-block; padding: 0.45rem 0.85rem; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--ink); font-weight: 700; font-size: var(--step--1); }
.chip:hover { border-color: var(--teal); color: var(--teal-deep); }
.chip.is-current { border-color: var(--teal); background: var(--teal-wash); }
.filter { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.filter select { max-width: 18rem; min-height: 2.6rem; padding: 0.3rem 0.6rem; }

h2.day { font-size: var(--step-0); color: var(--ink-soft); margin: 1.6rem 0 0.6rem; }
.timeline { list-style: none; padding: 0; margin: 0; max-width: 50rem; border-left: 2px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 4rem 1fr; gap: 0.6rem; padding: 0.4rem 0 0.9rem 0.9rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 0.75rem; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--teal); }
.timeline li.t-incident_report::before, .timeline li.t-body_map::before { border-color: var(--alert); background: var(--alert-wash); }
.timeline li.t-abc_record::before, .timeline li.t-behaviour_frequency::before { border-color: var(--marigold); background: var(--marigold-wash); }
.timeline .t-time { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: var(--step--1); padding-top: 0.15rem; }
.timeline p { margin: 0.15rem 0; }
.timeline .tag { margin-left: 0.4rem; }

.chart-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 1rem; overflow-x: auto; max-width: 64rem; }
svg.chart { width: 100%; min-width: 34rem; height: auto; display: block; font-family: var(--font); }
svg.chart .ax { font-size: 10px; fill: var(--ink-soft); }
svg.chart .heat.h0 { fill: #EEF3F2; }
svg.chart .heat.h1 { fill: #C9E2DB; }
svg.chart .heat.h2 { fill: #8FC3B4; }
svg.chart .heat.h3 { fill: #3E8E7C; }
svg.chart .heat.h4 { fill: #124A41; }
.sleep.s0, .slot.s0, .sleep-key.s0 { fill: #EEF3F2; background: #EEF3F2; }
.sleep.s1, .slot.s1, .sleep-key.s1 { fill: #1D6B5E; background: #1D6B5E; color: #fff; }
.sleep.s2, .slot.s2, .sleep-key.s2 { fill: #F3D48B; background: #F3D48B; }
.sleep.s3, .slot.s3, .sleep-key.s3 { fill: #D99A1E; background: #D99A1E; }
.sleep.s4, .slot.s4, .sleep-key.s4 { fill: #E9A99F; background: #E9A99F; }
svg.chart .line { fill: none; stroke: var(--teal); stroke-width: 2.5; }
svg.chart .dot { fill: var(--surface); stroke: var(--teal-deep); stroke-width: 2; }
.sleep-key { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; vertical-align: middle; margin: 0 0.25rem 0 0.6rem; border: 1px solid var(--line); }
.sleep-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; max-width: 44rem; margin-top: 0.5rem; }
.sleep-grid .slot { min-height: 2.4rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 0.7rem; color: var(--ink-soft); cursor: pointer; padding: 0; display: grid; place-items: center; }
.sleep-grid .slot.s1 { color: #fff; }
.sleep-grid.readonly .slot { cursor: default; min-height: 1.8rem; }
.code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.4rem 0.8rem; max-width: 50rem; }
.code-grid label { display: flex; align-items: center; gap: 0.4rem; font-size: var(--step--1); }
.code-grid input { min-height: 2.3rem; padding: 0.2rem 0.4rem; max-width: 5.5rem; }
.codes-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: var(--step--1); color: var(--ink-soft); }
.rows-input input, .rows-input select { max-width: 6rem; min-height: 2.4rem; padding: 0.2rem 0.4rem; }
.rows-input .hint { font-weight: 400; margin: 0; }

svg.bodymap { width: 100%; max-width: 22rem; height: auto; display: block; margin: 0.5rem 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); }
svg.bodymap .bm-region { fill: #E6EEEC; stroke: #9DB2AD; stroke-width: 1.5; }
svg.bodymap.interactive .bm-region { cursor: pointer; }
svg.bodymap.interactive .bm-region:hover { fill: var(--marigold-wash); }
svg.bodymap .bm-region.is-marked { fill: var(--alert); stroke: #7a170f; }
svg.bodymap .bm-caption { font-size: 11px; fill: var(--ink-soft); font-family: var(--font); }
.bm-list { columns: 2; max-width: 36rem; }
.js .bm-list { display: none; }

.record-values { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; border-top: 1px solid var(--line); max-width: 52rem; }
.record-values dt, .record-values dd { margin: 0; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.record-values dt { font-weight: 700; padding-right: 1rem; }
table.mini { width: auto; font-size: var(--step--1); border: 1px solid var(--line-soft); }
table.mini th, table.mini td { padding: 0.35rem 0.6rem; }
table.kpi td.num, table.kpi th.num { text-align: center; }
table.kpi td.has { font-weight: 700; color: var(--teal-deep); background: var(--teal-wash); }
table.kpi tr.day-start td, table.kpi tr.day-start th { border-top: 2px solid var(--line); }
table.kpi tfoot td, table.kpi tfoot th { border-top: 2px solid var(--ink-soft); background: #F8FAF9; }

.handover-person, .handover-house, .handover-sign { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 1.1rem 1.3rem; margin-bottom: 1rem; max-width: 56rem; }
.handover-person h2 { margin-bottom: 0.6rem; }
.for-next { background: var(--marigold-wash); border-left: 5px solid var(--marigold); padding: 0.7rem 0.9rem; margin: 0 0 0.9rem; border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.for-next ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.counters { list-style: none; padding: 0; margin: 0.4rem 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.counters li { background: var(--line-soft); border-radius: 999px; padding: 0.2rem 0.75rem; font-size: var(--step--1); }
.counters li.strong { background: var(--alert-wash); color: var(--alert); font-weight: 700; }
.counters li.calm { background: var(--teal-wash); color: var(--teal-deep); }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin: 1.5rem 0 2.5rem; }
.profile-card { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 1.1rem; }
.profile-card strong { display: block; font-size: var(--step-1); }
.profile-card .role { display: block; color: var(--teal-deep); font-weight: 700; font-size: var(--step--1); margin-bottom: 0.4rem; }
.profile-card p { font-size: var(--step--1); color: var(--ink-soft); }

@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
  .record-values { grid-template-columns: 1fr; }
  .record-values dt { border-bottom: 0; padding-bottom: 0; }
  .attention li { flex-direction: column; gap: 0.3rem; }
  .sleep-grid { grid-template-columns: repeat(7, 1fr); }
}
@media print {
  .side, .demo-banner, .skip, .row-actions, .tabs, .button, form, .public-top, .public-foot { display: none !important; }
  .app-shell { display: block; }
  body { background: #fff; font-size: 11pt; }
  .main { padding: 0; }
  .handover-person, .handover-house, .handover-sign, .table-wrap, .chart-wrap { border-color: #999; break-inside: avoid; }
}
.role-switch { position: relative; }
.role-switch summary { cursor: pointer; font-weight: 700; color: var(--teal-deep); text-decoration: underline; list-style: none; }
.role-switch summary::-webkit-details-marker { display: none; }
.role-switch summary::after { content: " ▾"; }
.role-switch-menu { position: absolute; right: 0; top: 1.8rem; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: 0 10px 30px rgba(24, 40, 38, 0.18); padding: 0.4rem; width: 20rem; max-height: 70vh; overflow-y: auto; }
.role-switch-menu form { margin: 0; }
.role-switch-menu button { display: block; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: var(--radius-control); padding: 0.5rem 0.7rem; cursor: pointer; color: var(--ink); }
.role-switch-menu button:hover { background: var(--teal-wash); }
.role-switch-menu button[disabled] { background: var(--line-soft); cursor: default; }
.role-switch-menu button span { display: block; font-size: var(--step--1); color: var(--ink-soft); }
.role-switch-menu a { display: block; padding: 0.5rem 0.7rem; font-size: var(--step--1); border-top: 1px solid var(--line-soft); margin-top: 0.3rem; }
.profile-grid.compact { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin: 1rem 0 1rem; }
.profile-grid.compact .profile-card { padding: 0.9rem; }
.profile-grid.compact .profile-card strong { font-size: var(--step-0); }
@media (max-width: 860px) { .role-switch-menu { right: auto; left: 0; width: min(20rem, 90vw); } }
.public-main.wide { max-width: 74rem; }
.profile-grid { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.profile-card > div { flex: 1; }
.profile-card .button { width: 100%; margin-top: 0.2rem; }
.profile-card p { min-height: 4.2em; }
svg.bodymap .bm-region.is-marked, svg.bodymap.interactive .bm-region.is-marked:hover { fill: var(--alert); stroke: #7a170f; }
@media (max-width: 860px) {
  .side .who strong, .side .who .who-role, .side .who p { display: none; }
  .side .org-block span, .side .org-block .wordmark { display: none; }
  .side { gap: 0.6rem; }
  .demo-banner { font-size: 0.8rem; }
}