/* ==================================================================
   components.css — the component library.
   Rules of the house: 1px hairlines, square ledgers, no zebra, no
   floating cards, gold is rationed, and shape carries status before
   colour does.
   ================================================================== */

/* ============================= SHEET ============================ */

.sheet {
  background: var(--surface-sheet);
  border: 1px solid var(--border-hair);
  box-shadow: var(--shadow-sm);
}
.sheet--flat { box-shadow: none; }
.sheet__head {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-hair);
  background: var(--surface-sunken);
}
.sheet__title { font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.sheet__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sheet__body { padding: 22px; }
.sheet__body--flush { padding: 0; }
.sheet__foot {
  padding: 12px 18px; border-top: 1px solid var(--border-hair);
  background: var(--surface-sunken);
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; color: var(--text-2);
}

/* A block header that sits directly on the cream, no box. */
.blockhead {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border-hair);
}
.blockhead__title { font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.blockhead__note { font-size: 13px; color: var(--text-3); }
.blockhead__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ============================ BUTTONS =========================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 18px;
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 2px;
  white-space: nowrap; cursor: pointer;
  transition: background var(--t-fast) linear, color var(--t-fast) linear,
              border-color var(--t-fast) linear, transform var(--t-fast) var(--ease);
}
.btn .ico { margin: 0 -2px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; }

.btn--primary  { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.btn--primary:hover:not(:disabled) { background: var(--green); border-color: var(--green); }
:root[data-theme="dark"] .btn--primary { color: #12211a; }

.btn--secondary { border-color: var(--border-strong); color: var(--text-1); background: var(--surface-sheet); }
.btn--secondary:hover:not(:disabled) { border-color: var(--green); color: var(--green-deep); }

.btn--ghost { color: var(--text-2); padding: 0 10px; }
.btn--ghost:hover:not(:disabled) { color: var(--text-1); background: var(--green-mist); }

.btn--danger { border-color: var(--danger-line); color: var(--danger); background: var(--surface-sheet); }
.btn--danger:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--danger); }

.btn--sm { height: 29px; padding: 0 12px; font-size: 10px; letter-spacing: .12em; }
.btn--lg { height: 44px; padding: 0 26px; font-size: 12px; }
.btn--block { width: 100%; }
.btn--icon { width: 32px; height: 32px; padding: 0; }

/* Working state. No spinner: a hairline runs along the button's foot, which
   reads as a document being stamped rather than as a page loading. */
.btn.is-loading { position: relative; pointer-events: none; overflow: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%;
  background: currentColor; opacity: .6;
  animation: btnRule 900ms var(--ease) infinite;
}
@keyframes btnRule {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after { animation: none; width: 100%; opacity: .35; }
}

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: 2px 0 0 2px; margin-left: 0; }
.btn-group .btn:last-child  { border-radius: 0 2px 2px 0; }
.btn-group .btn.is-active { background: var(--green-mist); border-color: var(--green); color: var(--green-deep); z-index: 1; }

/* A link that behaves like a verb, not a button. */
.linkbtn {
  font-size: 12.5px; letter-spacing: .04em; color: var(--green);
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.linkbtn:hover { border-bottom-color: var(--green); text-decoration: none; }

/* ============================= FORMS ============================ */

.field { display: block; }
.field + .field { margin-top: 18px; }
.field__label {
  display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 6px;
}
.field__label .req { color: var(--danger); margin-left: 2px; }
.field__hint { font-size: 12.5px; color: var(--text-3); margin-top: 5px; }
.field__error { font-size: 13px; color: var(--danger); margin-top: 5px; }

/* Inputs are a bottom hairline, nothing more. */
.input, .select, .textarea {
  width: 100%; display: block;
  background: transparent; color: var(--text-1);
  border: 0; border-bottom: 1px solid var(--border-strong);
  border-radius: 0; padding: 7px 0;
  font-size: 14px; line-height: 1.4;
  transition: border-color var(--t-fast) linear;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-bottom-color: var(--green); border-bottom-width: 1px;
  box-shadow: 0 1px 0 0 var(--green);
}
.field:focus-within .field__label { color: var(--text-1); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-bottom-color: var(--danger); }

/* Selects and textareas earn a box, because they need an affordance. */
.select, .textarea {
  border: 1px solid var(--border-strong); border-radius: 2px;
  padding: 8px 10px; background: var(--surface-sheet);
}
.select:focus, .textarea:focus { box-shadow: none; border-color: var(--green); }
.select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238f8d83' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.textarea { min-height: 88px; resize: vertical; line-height: 1.55; }

.input-search {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border-strong);
  padding: 5px 0; min-width: 180px;
  transition: border-color var(--t-fast) linear;
}
.input-search:focus-within { border-bottom-color: var(--green); }
.input-search .ico { color: var(--text-3); flex: none; }
.input-search input { border: 0; background: none; outline: none; width: 100%; font-size: 13px; padding: 0; }
.input-search input::placeholder { color: var(--text-3); }

/* Checkbox / radio — square and hairline, like a form you sign. */
.check { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--text-2); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 15px; height: 15px; flex: none; margin-top: 2px;
  border: 1px solid var(--border-strong); background: var(--surface-sheet);
  display: grid; place-items: center;
  transition: all var(--t-fast) linear;
}
.check__box--round { border-radius: 50%; }
.check input:checked + .check__box { background: var(--green-deep); border-color: var(--green-deep); }
.check input:checked + .check__box::after {
  content: ""; width: 7px; height: 4px; border: 1.6px solid #fff;
  border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px);
}
.check input:checked + .check__box--round::after {
  border: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: none;
}
.check input:focus-visible + .check__box { box-shadow: var(--focus-ring); }
.check input:disabled + .check__box { opacity: .4; }

/* Toggle. */
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--text-2); }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track {
  width: 34px; height: 18px; border-radius: 9px; flex: none;
  background: var(--neutral-bg); border: 1px solid var(--border-strong);
  position: relative; transition: all var(--t-fast) linear;
}
.toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--text-3);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) linear;
}
.toggle input:checked + .toggle__track { background: var(--green-mist); border-color: var(--green); }
.toggle input:checked + .toggle__track::after { transform: translateX(16px); background: var(--green-deep); }
.toggle input:focus-visible + .toggle__track { box-shadow: var(--focus-ring); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 680px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================ LEDGER ============================ */

.ledger-wrap { border: 1px solid var(--border-hair); background: var(--surface-sheet); box-shadow: var(--shadow-sm); }
.ledger-scroll { overflow-x: auto; }

.ledger-caption {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--border-hair);
  background: var(--surface-sunken);
  font-size: 11.5px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-3);
}
.ledger-caption__count { letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--text-2); }
.ledger-caption__tools { margin-left: auto; display: flex; align-items: center; gap: 12px; letter-spacing: normal; text-transform: none; }
/* Bulk selection converts the caption in place — no floating toolbar. */
.ledger-caption.is-selecting { background: var(--green-mist); color: var(--green-deep); }

.ledger { width: 100%; font-size: 14.5px; }
.ledger thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-sunken);   /* opaque — hairlines must not ghost through */
  text-align: left; font-weight: 500;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
  padding: 12px 18px; white-space: nowrap;
  border-bottom: 1px solid rgba(43,46,40,.28);
}
:root[data-theme="dark"] .ledger thead th { border-bottom-color: rgba(233,230,217,.24); }
.ledger thead th.is-sortable { cursor: pointer; user-select: none; }
.ledger thead th.is-sortable:hover { color: var(--text-1); }
.ledger thead th.is-sorted { color: var(--text-1); box-shadow: inset 0 -1px 0 0 var(--green); }
.ledger thead th .caret { margin-left: 5px; opacity: .8; }

.ledger tbody td {
  padding: 0 18px; height: var(--row-h);
  border-bottom: 1px solid var(--border-hair);
  color: var(--text-2); vertical-align: middle;
}
/* The quinary rule: a paper ledger rules its fives. This replaces zebra striping. */
.ledger tbody tr:nth-child(5n) td { border-bottom-color: var(--rule-quinary); }
.ledger tbody tr:last-child td { border-bottom: 0; }

.ledger tbody tr { transition: background var(--t-instant) linear; }
.ledger tbody tr:hover td { background: var(--green-mist); }
.ledger tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 0 var(--gold); }
.ledger tbody tr.is-selected td { background: var(--green-mist); }
.ledger tbody tr.is-active td { background: var(--green-mist); }
.ledger tbody tr.is-active td:first-child { box-shadow: inset 2px 0 0 0 var(--green-deep); }
.ledger tbody tr[data-href] { cursor: pointer; }

.ledger .cell-id { color: var(--text-1); font-weight: 500; }
.ledger .num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.ledger .col-actions { width: 1%; white-space: nowrap; text-align: right; }

/* Rubric: an italic serif divider inside the ledger, "— Longevity Hub —". */
.ledger tr.rubric td {
  height: 38px; background: var(--surface-sunken);
  font-family: var(--serif); font-style: italic; font-size: 15.5px;
  letter-spacing: .04em; color: var(--taupe-deep);
  border-bottom: 1px solid var(--border-hair);
  border-top: 1px solid var(--border-hair);
}
.ledger tr.rubric:hover td { background: var(--surface-sunken); box-shadow: none; }

/* Stacked identity cell: name over role — kills a whole column. */
.idcell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.idcell__text { min-width: 0; }
.idcell__name { color: var(--text-1); font-weight: 500; font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idcell__sub  { color: var(--text-3); font-size: 12.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ledger-foot {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 18px; border-top: 1px solid var(--border-hair);
  background: var(--surface-sunken); font-size: 12.5px; color: var(--text-3);
}
.ledger-foot__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.pager { display: inline-flex; align-items: center; gap: 2px; }
.pager button {
  min-width: 26px; height: 26px; padding: 0 6px;
  font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text-2);
  border: 1px solid transparent; border-radius: 2px;
}
.pager button:hover:not(:disabled) { background: var(--green-mist); color: var(--green-deep); }
.pager button.is-active { border-color: var(--green); color: var(--green-deep); background: var(--green-mist); }
.pager button:disabled { opacity: .35; cursor: not-allowed; }

/* ============================ AVATAR ============================ */

.avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  background: var(--surface-sunken);
  font-size: 11px; font-weight: 500; letter-spacing: .06em;
  color: var(--text-2);
  border-radius: 0;               /* square — no photo circles in a register */
}
.avatar--sm { width: 24px; height: 24px; font-size: 9.5px; }
.avatar--lg { width: 56px; height: 56px; font-size: 18px; font-family: var(--serif); letter-spacing: .1em; }
.avatar--xl { width: 88px; height: 88px; font-size: 30px; font-family: var(--serif); letter-spacing: .1em; }
.avatar--t0 { background: var(--green-mist); color: var(--green-deep); border-color: var(--green-line); }
.avatar--t1 { background: #f2ede1; color: var(--taupe-deep); border-color: var(--cream-line); }
.avatar--t2 { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
.avatar--t3 { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }

.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { margin-left: -8px; box-shadow: 0 0 0 1px var(--surface-sheet); }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ============================ STATUS ============================
   Shape carries the meaning; colour reinforces it. A 5px rotated
   square reads as a register key and survives colour-blindness. */

.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status__glyph { width: 6px; height: 6px; flex: none; transform: rotate(45deg); border: 1px solid currentColor; }
.status__label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }

.status--ok      { color: var(--ok); }      .status--ok      .status__glyph { background: currentColor; }
.status--pending { color: var(--text-3); }  .status--pending .status__glyph { background: transparent; }
.status--warn    { color: var(--warn); }    .status--warn    .status__glyph { background: transparent; }
.status--danger  { color: var(--danger); }  .status--danger  .status__glyph { background: currentColor; }
.status--info    { color: var(--info); }    .status--info    .status__glyph { background: currentColor; }
.status--muted   { color: var(--text-3); }  .status--muted   .status__glyph { background: var(--text-3); opacity: .4; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 23px; padding: 0 9px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--neutral-line); background: var(--neutral-bg); color: var(--text-2);
  border-radius: 2px; white-space: nowrap;
}
.badge--ok     { background: var(--ok-bg);     border-color: var(--ok-line);     color: var(--ok); }
.badge--warn   { background: var(--warn-bg);   border-color: var(--warn-line);   color: var(--warn); }
.badge--danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.badge--info   { background: var(--info-bg);   border-color: var(--info-line);   color: var(--info); }
.badge--gold   { background: var(--gold-pale); border-color: var(--gold);        color: var(--gold-deep); }

/* Permit letter in a hairline square — B / C / G / L / CH. */
.permit {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 20px; padding: 0 5px;
  border: 1px solid var(--border-strong); color: var(--text-2);
  font-size: 10.5px; font-weight: 500; letter-spacing: .08em;
}
.permit--G { border-color: var(--taupe); color: var(--taupe-deep); }
.permit--B { border-color: var(--info-line); color: var(--info); }

/* The visa stamp: who signed this off. */
.visa {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold-deep);
  font-family: var(--serif); font-size: 10.5px; letter-spacing: .06em;
  transform: rotate(-8deg); flex: none;
}
.visa--lg { width: 46px; height: 46px; font-size: 15px; }

/* ========================== KPI BAND ============================
   Not cards. One horizontal band of figures divided by hairlines,
   like the summary line of a printed annual report. */

.kpiband {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--border-hair); background: var(--surface-sheet);
  box-shadow: var(--shadow-sm);
}
.kpi {
  flex: 1 1 0; min-width: 0;          /* 0, so a long figure shrinks its cell rather than overflowing */
  padding: 24px 26px 22px;
  border-left: 1px solid var(--border-hair);
  overflow: hidden;
}
.kpi:first-child { border-left: 0; }
.kpi__figure {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-1); display: flex; align-items: baseline; gap: 6px;
  min-width: 0;
}
.kpi__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Stepped down by character count in kpiBand(), so money never overflows. */
.kpi__figure--sm { font-size: clamp(26px, 2.5vw, 34px); }
.kpi__figure--xs { font-size: clamp(22px, 2vw, 28px); letter-spacing: .005em; }
.kpi__unit { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; color: var(--text-3); text-transform: uppercase; }
.kpi__label {
  margin-top: 10px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3);
}
.kpi__delta { margin-top: 6px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.kpi__delta--up   { color: var(--ok); }
.kpi__delta--down { color: var(--danger); }
.kpi.is-alert .kpi__figure { color: var(--danger); }
.kpi.is-warn  .kpi__figure { color: var(--warn); }
@media (max-width: 767px) {
  .kpi { flex: 1 1 50%; min-width: 0; border-top: 1px solid var(--border-hair); }
  .kpi:nth-child(-n+2) { border-top: 0; }
  .kpi:nth-child(odd) { border-left: 0; }
}

/* ============================= METER ============================ */

.meter { display: inline-flex; align-items: center; gap: 9px; }
.meter__track { width: 44px; height: 1px; background: var(--border-strong); position: relative; flex: none; }
.meter__fill { position: absolute; left: 0; top: -1px; height: 3px; background: var(--green); }
.meter__fill--warn { background: var(--warn); }
.meter__fill--danger { background: var(--danger); }
.meter__value { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.meter--wide .meter__track { width: 100%; }
.meter--block { display: flex; width: 100%; }

/* ============================= TABS ============================= */
/* (the sliding underline lives in app.css; these are inner pill tabs) */

.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 2px; overflow: hidden; }
.segmented button {
  padding: 6px 13px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); border-right: 1px solid var(--border-strong);
  transition: all var(--t-fast) linear;
}
.segmented button:last-child { border-right: 0; }
.segmented button:hover { color: var(--text-1); }
.segmented button.is-active { background: var(--green-mist); color: var(--green-deep); }

/* =========================== INSPECTOR ==========================
   Replaces modals for record triage. Deep-linkable, so approving six
   leave requests is six keystrokes, not six modal round-trips. */

.inspector {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--inspector-w);
  max-width: 100vw;
  background: var(--surface-sheet);
  border-left: 1px solid var(--border-hair);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-inspector);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease);
}
.inspector.is-open { transform: none; }
.inspector__head {
  flex: none; padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-hair);
  display: flex; align-items: flex-start; gap: 14px;
}
.inspector__eyebrow { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-deep); }
.inspector__title { font-family: var(--serif); font-size: 22px; line-height: 1.15; color: var(--text-1); margin-top: 4px; }
.inspector__close { margin-left: auto; color: var(--text-3); flex: none; }
.inspector__close:hover { color: var(--text-1); }
.inspector__body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; }
.inspector__foot {
  flex: none; padding: 14px 20px; border-top: 1px solid var(--border-hair);
  background: var(--surface-sunken); display: flex; gap: 10px;
}
.inspector__foot .btn { flex: 1; }

/* At ≥1440px the inspector pushes the folio rather than covering it. */
@media (min-width: 1440px) {
  .app.has-inspector .folio { padding-right: var(--inspector-w); }
  .app.has-inspector .docfoot { right: var(--inspector-w); }
}
@media (max-width: 480px) { .inspector { width: 100vw; } }

/* Definition rows inside the inspector / profile sheets. */
.deflist { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0; }
.deflist dt {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  padding: 11px 0; border-bottom: 1px solid var(--border-hair); align-self: center;
}
.deflist dd {
  font-size: 14.5px; color: var(--text-1); padding: 11px 0;
  border-bottom: 1px solid var(--border-hair); text-align: right;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.deflist dt:last-of-type, .deflist dd:last-of-type { border-bottom: 0; }
.deflist--stacked { grid-template-columns: minmax(0, 1fr); }
.deflist--stacked dt { border-bottom: 0; padding-bottom: 2px; }
.deflist--stacked dd { text-align: left; padding-top: 0; }

/* =========================== COMMAND BAR ======================== */

.palette-scrim {
  position: fixed; inset: 0; z-index: var(--z-palette);
  background: rgba(28,51,39,.42);
  display: grid; justify-items: center; align-items: start;
  padding-top: 18vh;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) linear;
}
.palette-scrim.is-open { opacity: 1; pointer-events: auto; }
.palette {
  width: min(640px, calc(100vw - 32px));
  background: var(--surface-sheet);
  border: 1px solid var(--text-1); border-radius: 2px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform var(--t-base) var(--ease);
  display: flex; flex-direction: column; max-height: 64vh;
}
.palette-scrim.is-open .palette { transform: none; }
.palette__input-wrap { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-hair); flex: none; }
.palette__input-wrap .ico { color: var(--text-3); flex: none; }
.palette__input {
  flex: 1; border: 0; background: none; outline: none;
  font-family: var(--serif); font-style: italic; font-size: 22px;
  color: var(--text-1);
}
.palette__input::placeholder { color: var(--text-3); }
.palette__hint { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); flex: none; }
.palette__results { overflow-y: auto; flex: 1 1 auto; }
.palette__group { padding: 8px 0 4px; }
.palette__group + .palette__group { border-top: 1px solid var(--border-hair); }
.palette__grouplabel { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-3); padding: 4px 20px 6px; }
.palette__item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  width: 100%; padding: 9px 20px; text-align: left;
  transition: background var(--t-instant) linear;
}
.palette__item:hover, .palette__item.is-active { background: var(--green-mist); }
.palette__num { font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .1em; color: var(--text-3); }
.palette__item.is-active .palette__num { color: var(--green-deep); }
.palette__label { font-size: 15px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__sub { font-size: 12.5px; color: var(--text-3); }
.palette__key {
  font-size: 9px; letter-spacing: .1em; color: var(--text-3);
  border: 1px solid var(--border-hair); border-radius: 2px; padding: 1px 5px;
  font-variant-numeric: tabular-nums;
}
.palette__empty { padding: 34px 20px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ============================= MODAL ============================ */

.modal-scrim {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(28,51,39,.42);
  display: grid; place-items: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast) linear;
}
.modal-scrim.is-open { opacity: 1; pointer-events: auto; }
.modal {
  width: min(560px, 100%); max-height: 86vh;
  background: var(--surface-sheet); border: 1px solid var(--border-hair);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateY(10px) scale(.99);
  transition: transform var(--t-base) var(--ease);
}
.modal-scrim.is-open .modal { transform: none; }
.modal__head { padding: 20px 22px 14px; border-bottom: 1px solid var(--border-hair); display: flex; align-items: flex-start; gap: 14px; }
.modal__title { font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--text-1); }
.modal__body { padding: 20px 22px; overflow-y: auto; flex: 1 1 auto; }
.modal__foot { padding: 14px 22px; border-top: 1px solid var(--border-hair); background: var(--surface-sunken); display: flex; justify-content: flex-end; gap: 10px; }

/* ============================= TOAST ============================ */

.toast-stack {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%);
  z-index: var(--z-toast); display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none; width: min(420px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--forest); color: var(--text-on-forest);
  border-radius: 2px; padding: 12px 16px; font-size: 13px;
  box-shadow: var(--shadow-md); pointer-events: auto;
  animation: toastIn var(--t-base) var(--ease) both;
}
.toast.is-leaving { animation: toastOut 300ms var(--ease) both; }
.toast--ok .ico     { color: #9ecb92; }
.toast--danger .ico { color: #e6a293; }
.toast__close { margin-left: auto; color: var(--text-on-forest-soft); }
.toast__close:hover { color: #fff; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* ============================ TOOLTIP =========================== */

[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: var(--forest); color: var(--text-on-forest);
  font-size: 11px; letter-spacing: .04em; white-space: nowrap;
  padding: 5px 9px; border-radius: 2px; z-index: var(--z-toast);
  pointer-events: none; box-shadow: var(--shadow-sm);
}

/* ========================== EMPTY / STATE ======================= */

.state { padding: 56px 24px; text-align: center; }
.state__glyph { color: var(--border-strong); margin: 0 auto 16px; }
.state__title { font-family: var(--serif); font-size: 22px; color: var(--text-1); margin-bottom: 7px; }
.state__body { font-size: 14.5px; color: var(--text-3); max-width: 44ch; margin: 0 auto; line-height: 1.6; }
.state__action { margin-top: 20px; }
.state--error .state__title { color: var(--danger); }

/* ============================ SKELETON ========================== */
/* Hairline rules, never a shimmer gradient. */

.skel { background: var(--surface-inset); border-radius: 2px; position: relative; overflow: hidden; }
.skel--text { height: 11px; margin: 6px 0; }
.skel--row  { height: var(--row-h); border-bottom: 1px solid var(--border-hair); background: none; }
.skel--row::after {
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  height: 9px; width: 42%; background: var(--surface-inset); border-radius: 2px;
}
.skel-pulse { animation: skelPulse 1.6s ease-in-out infinite; }
@keyframes skelPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* "Wet ink" — a row that just changed flashes rather than spinning. */
.is-fresh { animation: wetInk 1.3s linear both; }
@keyframes wetInk { 0% { background: var(--green-mist); } 30% { background: var(--green-mist); } 100% { background: transparent; } }

/* =========================== STEPPER ============================ */

.stepper { display: flex; align-items: center; gap: 0; }
.step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.step__num {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--border-strong); color: var(--text-3);
  font-size: 10px; font-variant-numeric: tabular-nums;
}
.step__label { font-size: 11px; letter-spacing: .1em; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step__line { flex: 1; height: 1px; background: var(--border-hair); margin: 0 12px; min-width: 12px; }
.step.is-done .step__num { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.step.is-done .step__label { color: var(--text-2); }
.step.is-current .step__num { border-color: var(--green); color: var(--green-deep); }
.step.is-current .step__label { color: var(--text-1); }

/* =========================== TIMELINE =========================== */

.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--border-hair); }
.tl-item { position: relative; padding-bottom: 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -22px; top: 5px;
  width: 9px; height: 9px; transform: rotate(45deg);
  border: 1px solid var(--green); background: var(--surface);
}
.tl-item.is-done::before { background: var(--green); }
.tl-item.is-alert::before { border-color: var(--danger); background: var(--danger); }
.tl-item__meta { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tl-item__title { font-size: 14.5px; color: var(--text-1); margin-top: 2px; }
.tl-item__body { font-size: 14px; color: var(--text-2); margin-top: 4px; line-height: 1.55; }

/* ========================== CALENDAR ============================ */

.cal { border: 1px solid var(--border-hair); background: var(--surface-sheet); }
.cal__head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border-hair); background: var(--surface-sunken); }
.cal__dow { padding: 8px 10px; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); text-align: left; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__cell {
  min-height: 100px; padding: 8px 10px 11px;
  border-right: 1px solid var(--border-hair); border-bottom: 1px solid var(--border-hair);
  position: relative; display: flex; flex-direction: column; gap: 3px;
}
.cal__cell:nth-child(7n) { border-right: 0; }
.cal__cell.is-outside { background: var(--surface-sunken); }
.cal__cell.is-outside .cal__num { color: var(--text-3); opacity: .55; }
.cal__cell.is-weekend { background: var(--surface-sunken); }
.cal__num { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-2); align-self: flex-start; }
.cal__cell.is-today .cal__num { border: 1px solid var(--text-1); padding: 0 4px; color: var(--text-1); font-weight: 500; }
.cal__holiday { font-size: 10px; color: var(--gold-deep); line-height: 1.3; }
.cal__holidot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); display: inline-block; margin-right: 4px; }
/* Closure bands use the printers' convention for void. */
.cal__cell.is-closed {
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, var(--cream-line) 6px 7px);
}
.cal__bar {
  height: 3px; border-radius: 2px; background: var(--green);
  margin-top: auto;
}
.cal__bar--holiday  { background: var(--green); }
.cal__bar--sick     { background: var(--danger); }
.cal__bar--training { background: var(--gold); }
.cal__bar--unpaid   { background: var(--taupe); }
.cal__evt { font-size: 12px; color: var(--text-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================= ROTA ============================= */

.rota-wrap { border: 1px solid var(--border-hair); background: var(--surface-sheet); overflow-x: auto; }
.rota { min-width: 900px; width: 100%; }
.rota th, .rota td { border-right: 1px solid var(--border-hair); border-bottom: 1px solid var(--border-hair); }
.rota th:last-child, .rota td:last-child { border-right: 0; }
.rota thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-sunken); padding: 9px 10px; text-align: left;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); font-weight: 500;
}
.rota thead th.is-today { color: var(--text-1); box-shadow: inset 0 -2px 0 0 var(--gold); }
.rota thead th.is-closed { color: var(--warn); }
/* Specificity, not !important: this must out-rank `.rota thead th`. */
.rota thead th.rota__corner {
  position: sticky; left: 0; z-index: 4;
  min-width: 190px; width: 190px;
  font-family: var(--serif); font-size: 20px;
  letter-spacing: .08em; text-transform: none;
  color: var(--text-1);
}
.rota__name {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface-sheet);
  min-width: 190px; width: 190px; padding: 6px 10px;
  border-right: 1px solid var(--border-strong);
}
.rota td { padding: 5px; vertical-align: top; height: 60px; }
.rota td.is-closed { background-image: repeating-linear-gradient(45deg, transparent 0 6px, var(--cream-line) 6px 7px); }
.rota td.is-holiday { background: var(--surface-sunken); }

.shift {
  display: block; width: 100%; text-align: left;
  background: var(--surface-sheet);
  border: 1px solid var(--border-hair); border-left: 3px solid var(--green);
  padding: 4px 7px; border-radius: 2px;
  transition: box-shadow var(--t-fast) var(--ease);
}
.shift:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.shift--clinic { border-left-color: var(--green); }
.shift--hotel  { border-left-color: var(--taupe); }
.shift--hub    { border-left-color: var(--gold); }
.shift--night  { background: var(--green-mist); }
.shift--closure { border-left-color: var(--warn); opacity: .85; }
.shift__time { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-1); line-height: 1.3; }
.shift__role { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.shift__flag { color: var(--warn); }
.shift.has-breach { border-left-color: var(--danger); }
.shift.has-breach .shift__flag { color: var(--danger); }

.rota-legend { display: flex; flex-wrap: wrap; gap: 18px; padding: 11px 16px; border-top: 1px solid var(--border-hair); background: var(--surface-sunken); }
.rota-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-2); }
.rota-legend__key { width: 12px; height: 3px; background: var(--green); flex: none; }

/* ============================ CHARTS ============================ */

.chart { width: 100%; display: block; overflow: visible; }
.chart .axis line, .chart .axis path { stroke: var(--border-strong); stroke-width: 1; }
.chart .grid line { stroke: var(--border-hair); stroke-dasharray: 2 3; }
.chart .tick text { font-size: 9px; letter-spacing: .1em; fill: var(--text-3); font-family: var(--sans); }
.chart .series-line { fill: none; stroke: var(--s1); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-area { fill: var(--s1); opacity: .09; }
.chart .series-line--2 { stroke: var(--s2); stroke-dasharray: 3 2; }
.chart .bar { fill: var(--s1); }
.chart .bar--2 { fill: var(--s2); }
.chart .dot { fill: var(--s1); }
.chart .label { font-size: 10px; fill: var(--text-2); font-family: var(--sans); font-variant-numeric: tabular-nums; }
.chart .label--end { font-size: 10px; fill: var(--text-2); }

.sparkline { display: inline-block; vertical-align: middle; }

/* Horizontal hairline dot-plot — the distribution primitive. */
.dotplot__row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 52px; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-hair); }
.dotplot__row:last-child { border-bottom: 0; }
.dotplot__label { font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dotplot__track { height: 1px; background: var(--border-hair); position: relative; }
.dotplot__dot { position: absolute; top: -3px; width: 7px; height: 7px; transform: rotate(45deg) translateX(-50%); background: var(--s1); }
.dotplot__bar { position: absolute; top: -1px; height: 3px; background: var(--s1); left: 0; }
.dotplot__value { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-1); }

/* ========================== FILE ROW ============================ */

.filerow {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--border-hair);
}
.filerow:last-child { border-bottom: 0; }
.filerow__icon { color: var(--text-3); }
.filerow__name { font-size: 14.5px; color: var(--text-1); }
.filerow__meta { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.filerow__actions { display: flex; gap: 8px; align-items: center; }

/* ========================== MISC BITS =========================== */

.hair-divider { height: 1px; background: var(--border-hair); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 14px;
  border: 1px solid var(--border-hair); background: var(--surface-sunken);
  font-size: 12.5px; color: var(--text-2);
}
.chip button { color: var(--text-3); display: grid; place-items: center; }
.chip button:hover { color: var(--danger); }
.chip.is-active { border-color: var(--green); background: var(--green-mist); color: var(--green-deep); }

.note {
  border-left: 2px solid var(--gold);
  background: var(--surface-sunken);
  padding: 14px 18px; font-size: 14px; color: var(--text-2); line-height: 1.6;
}
.note--danger { border-left-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.note--info   { border-left-color: var(--info);   background: var(--info-bg); }

.kbd {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 3px;
  font-size: 10px; color: var(--text-2); background: var(--surface-sheet);
  font-variant-numeric: tabular-nums;
}

/* Utility spacing */
.mt-0{margin-top:0}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}
.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}
.items-start{align-items:flex-start}.items-baseline{align-items:baseline}
.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.flex-1{flex:1 1 auto;min-width:0}.flex-wrap{flex-wrap:wrap}.ml-auto{margin-left:auto}
.w-full{width:100%}

/* =========================== ORG CHART ==========================
   The clinic's organigramme, drawn to the geometry of their own slide:
   same boxes, same solid reporting lines, same dashed functional links,
   same legend. The SVG scales with the sheet and prints as drawn. Below
   720px the indented list takes over and carries the reporting lines. */

.organigramme-wrap { overflow-x: auto; background: var(--org-ground); }
.organigramme {
  display: block; width: 100%; min-width: 960px; height: auto;
  font-family: Calibri, Carlito, 'Segoe UI', var(--sans);
}
.organigramme .og-heading    { fill: var(--org-name); }
.organigramme .og-subheading { fill: var(--org-title); }
.organigramme .og-box rect   { fill: var(--org-box); transition: stroke var(--t-fast) linear; }
.organigramme .og-box--root rect  { fill: var(--org-root-fill); stroke: var(--org-root-line); }
.organigramme .og-box--lead rect  { stroke: var(--org-lead-line); }
.organigramme .og-box--staff rect { stroke: var(--org-staff-line); }
.organigramme .og-name  { fill: var(--org-name); font-weight: 700; }
.organigramme .og-title { fill: var(--org-title); }
.organigramme .og-box--root .og-title { fill: var(--org-root-title); }
.organigramme .og-line--reporting  { stroke: var(--org-reporting); }
.organigramme .og-line--functional { stroke: var(--org-functional); }
.organigramme .og-legend { fill: var(--org-legend); }
.organigramme a.og-box { cursor: pointer; outline: none; }
.organigramme a.og-box:hover rect,
.organigramme a.og-box:focus-visible rect { stroke: var(--green); }
.organigramme .og-box.is-dimmed { opacity: .3; }

/* The outline. Hidden while the organigramme is shown, and the only view below 720px. */
.org-list { list-style: none; margin: 0; padding: 0; }
.org-list--root { display: none; padding: 8px 16px 16px; }
.org-list .org-list { margin-left: 15px; border-left: 1px solid var(--border-sage); padding-left: 14px; }
.org-list__row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border-hair);
}
.org-list__row:hover { text-decoration: none; background: var(--green-mist); }
.org-list__item.is-dimmed > .org-list__row { opacity: .4; }
.org-list__count {
  margin-left: auto; font-size: 10px; font-variant-numeric: tabular-nums;
  color: var(--gold-deep); border: 1px solid var(--gold-pale); padding: 0 5px;
}

@media (max-width: 719px) {
  .organigramme-wrap { display: none; }
  .org-list--root { display: block; }
}
/* On paper the drawing fits the page width instead of scrolling. */
@media print {
  .organigramme-wrap { display: block; overflow: visible; }
  .organigramme { min-width: 0; }
  .org-list--root { display: none; }
}

/* ==================================================================
   House interactions, taken from the clinic's own booking engine.
   Read off villarslongevityclinic.ch: buttons lift 2px on hover with a
   deeper shadow, blocks reveal on entry from translateY(24px), and a
   rejected form shakes. Same easing, same durations.
   ================================================================== */

/* Buttons lift, as they do on the public site. */
.btn--primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(70,88,63,.34);
}
.btn--secondary:hover:not(:disabled),
.btn--danger:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }

/* Blocks arrive in sequence on a folio change: the booking engine's reveal,
   at its own timing. Six steps only, so a long folio does not crawl in. */
.view-enter > .stack > *,
.view-enter > .stack-lg > * {
  animation: blockIn .5s var(--ease) both;
}
.view-enter > .stack > *:nth-child(1),
.view-enter > .stack-lg > *:nth-child(1) { animation-delay: 0ms; }
.view-enter > .stack > *:nth-child(2),
.view-enter > .stack-lg > *:nth-child(2) { animation-delay: 55ms; }
.view-enter > .stack > *:nth-child(3),
.view-enter > .stack-lg > *:nth-child(3) { animation-delay: 105ms; }
.view-enter > .stack > *:nth-child(4),
.view-enter > .stack-lg > *:nth-child(4) { animation-delay: 145ms; }
.view-enter > .stack > *:nth-child(5),
.view-enter > .stack-lg > *:nth-child(5) { animation-delay: 175ms; }
.view-enter > .stack > *:nth-child(n+6),
.view-enter > .stack-lg > *:nth-child(n+6) { animation-delay: 195ms; }

@keyframes blockIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* A KPI band's figures settle a beat after their cell arrives. */
.view-enter .kpi__figure { animation: figIn .55s var(--ease) both .12s; }
@keyframes figIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* A refused form shakes, exactly as the public booking form does. */
.is-rejected { animation: shake .34s ease both; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* The inspector's contents settle in behind the panel. */
.inspector.is-open .inspector__body > * { animation: blockIn .42s var(--ease) both .08s; }

@media (prefers-reduced-motion: reduce) {
  .view-enter > .stack > *, .view-enter > .stack-lg > *,
  .view-enter .kpi__figure, .is-rejected,
  .inspector.is-open .inspector__body > * { animation: none !important; }
  .btn--primary:hover:not(:disabled),
  .btn--secondary:hover:not(:disabled),
  .btn--danger:hover:not(:disabled) { transform: none; }
}


/* ---- from ? ---- */
/* procedures.js — numbered steps inside the inspector */
.steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.steps li { margin-bottom: 8px; }
.steps li::marker { color: var(--text-3); }

/* clinical.js — the single call-to-action block */
.clinical-cta { text-align: center; padding: 24px 0; }
.clinical-cta .note { text-align: left; max-width: 460px; margin: 18px auto 0; }

/* ---- from ? ---- */
/* Folio 20 — Incident reports: no new classes needed. incidents.js reuses
   existing .sheet/.blockhead/.ledger/.kpi/.form-grid/.field/.note/.badge/.chip
   conventions from css/components.css and css/app.css. */

/* Folio 19 — Emergency: numbers meant to be read from across a room. */
.emg-address {
  position: relative;
  padding: 20px 24px;
  border: 1px solid var(--border-hair);
  background: var(--surface-sheet);
  box-shadow: var(--shadow-sm);
}
.emg-address__name { font-family: var(--serif); font-size: 22px; color: var(--text-1); }
.emg-address__line { margin-top: 2px; color: var(--text-2); font-size: 14px; }
.emg-address__hint { margin-top: 8px; color: var(--text-3); font-size: 12px; }
.emg-address__print { position: absolute; top: 18px; right: 20px; }

.emg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px;
  background: var(--border-hair); border: 1px solid var(--border-hair);
}
.emg-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 16px; background: var(--surface-sheet); text-decoration: none;
}
.emg-card:hover, .emg-card:hover * { text-decoration: none; }
.emg-card:hover { background: var(--surface-sunken); }
/* One line per number, always: a phone number that wraps is a number misread. */
.emg-card__number {
  font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1;
  color: var(--text-1); white-space: nowrap; letter-spacing: .02em;
}
.emg-card__label { font-size: 12.5px; color: var(--text-2); }
.emg-card__note { font-size: 11px; color: var(--text-3); }

.emg-rows { border-top: 1px solid var(--border-hair); }
.emg-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 2px; border-bottom: 1px solid var(--border-hair);
}
.emg-row__label { color: var(--text-2); font-size: 13.5px; }
.emg-row__value { font-variant-numeric: tabular-nums; text-align: right; }

.emg-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 560px) {
  .emg-card__number { font-size: 28px; }
  .emg-address__print { position: static; margin-top: 12px; }
}


/* ---- from ? ---- */
/* home.js — Quick links sheet (folio 01 dashboard). Reuses existing
   .sheet/.blockhead/.linkbtn/.ico classes; only structural rules are new. */
.quicklinks { display: flex; flex-direction: column; }
.quicklinks__item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.quicklinks__item:last-child { border-bottom: 0; }
.quicklinks__item .ico { flex: none; }
.quicklinks__item.is-tbc { cursor: default; }
.quicklinks__item.is-tbc .linkbtn { color: var(--text-3); border-bottom-color: transparent; }
.quicklinks__meta { margin-left: auto; font-size: 12.5px; color: var(--text-3); }