/* Console components (docs/05 §7). Logical properties only — every rule here
 * must work unchanged in RTL (ar, ckb) and LTR (en).
 *
 * C4-10: rebuilt as one coherent system. Hairline borders and layered soft
 * shadows instead of heavy outlines; tinted "soft" pills for status; a glass
 * top bar; restrained motion that switches off under prefers-reduced-motion.
 * No gradients (owner's rule). Compact controls look 40px tall but keep a
 * 48px hit area (CLAUDE.md §1.7) through an invisible ::after.
 */

/* ======================================================================== */
/* App shell                                                                 */
/* ======================================================================== */
.shell { display: grid; grid-template-columns: var(--nav-width) minmax(0, 1fr); min-block-size: 100vh; }

.shell__nav {
  position: sticky; inset-block-start: 0; block-size: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
  background: var(--surface); border-inline-end: 1px solid var(--border);
}
.shell__brand {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-6); margin-block-end: var(--sp-3);
  border-block-end: 1px solid var(--border);
  font-family: var(--font-display); font-size: var(--fs-title-m); font-weight: 700;
  color: var(--brand-text); text-decoration: none;
}
.shell__logo { inline-size: 30px; block-size: 30px; object-fit: contain; }

.shell__group { display: flex; flex-direction: column; gap: var(--sp-1); margin-block: var(--sp-4) var(--sp-2); }
.shell__group-title {
  margin: 0 0 var(--sp-2); padding-inline: var(--sp-4);
  font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle);
}

.shell__link {
  position: relative; display: flex; align-items: center; gap: var(--sp-4);
  min-block-size: var(--target); padding-inline: var(--sp-4);
  border-radius: var(--r-md); color: var(--text-muted); text-decoration: none;
  font-size: var(--fs-label); font-weight: 500;
  transition: background var(--m-fast) var(--ease), color var(--m-fast) var(--ease);
}
.shell__link:hover { background: var(--surface-hover); color: var(--text); }
.shell__link--active,
.shell__link[aria-current="page"] { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
/* A short bar on the start edge marks where you are, in both directions. */
.shell__link--active::before,
.shell__link[aria-current="page"]::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block: 10px;
  inline-size: 3px; border-radius: var(--r-pill); background: var(--brand);
}
.shell__link .icon { color: var(--text-subtle); transition: color var(--m-fast) var(--ease); }
.shell__link:hover .icon,
.shell__link--active .icon { color: var(--brand-text); }

.shell__main { display: flex; flex-direction: column; min-inline-size: 0; }

.topbar {
  position: sticky; inset-block-start: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-block-size: var(--topbar); padding: var(--sp-3) var(--sp-8);
  background: var(--glass); border-block-end: 1px solid var(--border);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
}
.topbar__group { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.topbar__name { font-size: var(--fs-label); font-weight: 600; color: var(--text); }
.topbar .field__input { block-size: var(--control); inline-size: auto; }

.page { inline-size: 100%; max-inline-size: var(--content-max); margin-inline: auto; padding: var(--sp-8); }

@media (max-width: 1024px) {
  .shell { grid-template-columns: var(--nav-width-collapsed) minmax(0, 1fr); }
  .shell__nav { padding-inline: var(--sp-3); }
  .shell__link { justify-content: center; padding-inline: 0; }
  .shell__link span, .shell__brand span, .shell__group-title {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .shell__brand { justify-content: center; padding-inline: 0; }
  .page { padding: var(--sp-7); }
}
@media (max-width: 768px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .shell__nav { position: static; block-size: auto; flex-direction: row; overflow-x: auto; gap: var(--sp-3); border-inline-end: 0; border-block-end: 1px solid var(--border); }
  .shell__group { flex-direction: row; margin: 0; }
  .shell__brand { border: 0; padding: 0; margin: 0; }
  .topbar { padding-inline: var(--sp-5); }
  .page { padding: var(--sp-5); }
}

/* ======================================================================== */
/* Page head, hero, bands                                                    */
/* ======================================================================== */
.page__head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-5); margin-block-end: var(--sp-7);
}
.page__head h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-title-l); line-height: var(--lh-title-l); letter-spacing: -.01em; }
.page__head p { margin: 0; color: var(--text-muted); }

.page__head--hero {
  align-items: center; padding-block: var(--sp-3) var(--sp-7);
  margin-block-end: var(--sp-8); border-block-end: 1px solid var(--border);
}
.page__head--hero h1 { font-size: 28px; line-height: 36px; }
.hero__eyebrow {
  margin: 0 0 var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-text);
}
.hero__eyebrow::before {
  content: ''; inline-size: 8px; block-size: 8px; border-radius: var(--r-pill);
  background: var(--success); box-shadow: 0 0 0 4px var(--success-soft);
}

.band { margin-block-end: var(--sp-9); }
.band__head { margin-block-end: var(--sp-5); }
.band__title {
  margin: 0; display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-title-m); line-height: var(--lh-title-m);
}
.band__title::before {
  content: ''; flex: none; inline-size: 3px; block-size: 18px;
  border-radius: var(--r-pill); background: var(--brand);
}
.band__lede { margin: var(--sp-2) 0 0; padding-inline-start: calc(3px + var(--sp-3)); font-size: var(--fs-caption); color: var(--text-muted); }

/* ======================================================================== */
/* Buttons                                                                   */
/* ======================================================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-block-size: var(--control); min-inline-size: var(--control); padding-inline: var(--sp-5);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); box-shadow: var(--e-1);
  font-size: var(--fs-label); font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease),
    box-shadow var(--m-fast) var(--ease), transform var(--m-instant) var(--ease);
}
/* The visible button is compact; the hit area is still 48px (CLAUDE.md §1.7). */
.btn::after { content: ''; position: absolute; inset: -4px; }
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--brand); border-color: var(--brand); color: var(--text-inverse);
  box-shadow: var(--e-1), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn--danger { background: var(--danger); border-color: var(--danger); color: var(--text-inverse); }
.btn--danger:hover { filter: brightness(.94); background: var(--danger); }
.btn--warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); box-shadow: none; }
.btn--warning:hover { background: var(--warning-soft); border-color: var(--warning); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }
.btn--sm { min-block-size: 34px; padding-inline: var(--sp-4); font-size: 13px; border-radius: var(--r-sm); }
.btn--sm::after { inset: -7px -4px; }

/* ======================================================================== */
/* Fields                                                                    */
/* ======================================================================== */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-block-end: var(--sp-5); }
.field__label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; color: var(--text); }
.field__input {
  block-size: var(--target); inline-size: 100%; padding-inline: var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font: inherit;
  box-shadow: var(--e-1);
  transition: border-color var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease);
}
.field__input::placeholder { color: var(--text-subtle); }
.field__input:hover { border-color: var(--text-subtle); }
.field__input:focus,
.field__input:focus-visible { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 4px var(--focus-soft); }
textarea.field__input { block-size: auto; min-block-size: 112px; padding-block: var(--sp-3); resize: vertical; }
select.field__input[multiple] { block-size: auto; min-block-size: 120px; padding-block: var(--sp-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); inline-size: 18px; block-size: 18px; }
.field__hint { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.field--error .field__input { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.field--error .field__hint { color: var(--danger); }
.field__ltr { direction: ltr; text-align: start; }
.row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.row > .field { flex: 1 1 200px; }

/* ======================================================================== */
/* Cards, grids, KPIs                                                        */
/* ======================================================================== */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--e-1);
}
.grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid--kpi { gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.kpi { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); overflow: hidden; }
.kpi__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.kpi__label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; color: var(--text-muted); }
.kpi__icon {
  flex: none; display: grid; place-items: center; inline-size: 36px; block-size: 36px;
  border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-text);
}
.kpi__icon--warning { background: var(--warning-soft); color: var(--warning); }
.kpi__icon--danger { background: var(--danger-soft); color: var(--danger); }
.kpi__value {
  font-family: var(--font-display); font-size: 30px; line-height: 38px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text);
}
.kpi__value--warning { color: var(--warning); }
.kpi__value--danger { color: var(--danger); }
.kpi__delta {
  display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start;
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted);
}
.kpi__delta--up { color: var(--success); }
.kpi__delta--down { color: var(--danger); }
.kpi__delta--flat { color: var(--text-muted); }
/* A queue with work in it earns a coloured start edge; the number and the
   hint say it too, so colour is never the only signal. */
.kpi--warning::before, .kpi--danger::before,
.board__card--stale::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px;
}
.kpi--warning::before, .board__card--stale::before { background: var(--warning); }
.kpi--danger::before { background: var(--danger); }

.kpi--link {
  font: inherit; color: inherit; text-align: start; cursor: pointer;
  transition: transform var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
}
.kpi--link:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--e-2); }
.kpi--link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.kpi__go {
  position: absolute; inset-block-end: var(--sp-5); inset-inline-end: var(--sp-5);
  display: grid; place-items: center; inline-size: 28px; block-size: 28px;
  border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-muted);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--m-fast) var(--ease), transform var(--m-fast) var(--ease);
}
[dir="rtl"] .kpi__go { transform: translateX(4px) scaleX(-1); }
.kpi--link:hover .kpi__go,
.kpi--link:focus-visible .kpi__go { opacity: 1; transform: none; }
[dir="rtl"] .kpi--link:hover .kpi__go,
[dir="rtl"] .kpi--link:focus-visible .kpi__go { transform: scaleX(-1); }

/* ======================================================================== */
/* Badges & chips                                                            */
/* ======================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  min-block-size: 24px; padding-inline: 10px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--surface-sunken); color: var(--text-muted);
  font-size: 12.5px; line-height: 1; font-weight: 600; white-space: nowrap;
}
/* Read-only labels (a nurse's skills): a badge's shape, no status dot, wraps. */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.tag {
  display: inline-flex; align-items: center; min-block-size: 24px; padding-inline: 10px;
  border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-muted);
  font-size: 12.5px; line-height: 1.2;
}
/* A status dot: decoration, the word beside it carries the meaning. */
.badge::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: var(--r-pill); background: currentColor; opacity: .85; }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--info { background: var(--info-soft); color: var(--info); }

.chip {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: var(--control); padding-inline: var(--sp-5);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-muted);
  font: inherit; font-size: var(--fs-label); font-weight: 500; cursor: pointer;
  transition: background var(--m-fast) var(--ease), color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
}
.chip::after { content: ''; position: absolute; inset: -4px; }
.chip:hover { background: var(--surface-hover); color: var(--text); }
.chip--on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); font-weight: 600; }
.chip--on::before { content: '✓'; font-size: 12px; }

/* ======================================================================== */
/* Filter bar                                                                */
/* ======================================================================== */
.filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); margin-block-end: var(--sp-5); }
.filterbar:has(.field) {
  padding: var(--sp-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e-1);
}
.filterbar .field { margin-block-end: 0; flex: 1 1 200px; min-inline-size: 180px; max-inline-size: 320px; }
.filterbar .field__label { font-size: 12.5px; color: var(--text-muted); }
.filterbar .field__input { block-size: var(--control); box-shadow: none; }
.filterbar > .chip, .filterbar > .btn { align-self: flex-end; }

/* ======================================================================== */
/* Data table                                                                */
/* ======================================================================== */
.table-block { display: flex; flex-direction: column; gap: var(--sp-3); }
.table-wrap {
  overflow: auto; max-block-size: 72vh;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--e-1);
}
.table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.table th, .table td { padding: 14px var(--sp-5); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--border); }
.table thead th {
  position: sticky; inset-block-start: 0; z-index: 1;
  background: var(--surface-sunken); color: var(--text-muted);
  font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  padding-block: 12px;
}
.table th button {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: 24px; border-radius: var(--r-sm);
}
.table th button:hover { color: var(--text); }
.table th button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.table th[aria-sort] button { color: var(--text); }
.table th[aria-sort="ascending"] button::after { content: '↑'; font-size: 12px; }
.table th[aria-sort="descending"] button::after { content: '↓'; font-size: 12px; }
.table tbody tr { transition: background var(--m-fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr:last-child td { border-block-end: 0; }
/* Codes, amounts and timestamps never break across lines. */
.table .data, .table .num, .table .nowrap, .table .badge, .table__actions { white-space: nowrap; }
.table .data { font-size: 14px; color: var(--text-muted); }
.table__actions { display: flex; align-items: center; gap: var(--sp-2); }
.table__tick { inline-size: 48px; text-align: center; }
.table__row--open { cursor: pointer; }
.table__row--open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.table__row--muted td { color: var(--text-subtle); }
/* A tinted row is never the only cue — it also carries a worded badge. */
.table__row--warn td { background: color-mix(in srgb, var(--warning-soft) 70%, transparent); }
.table__row--late td { background: color-mix(in srgb, var(--danger-soft) 70%, transparent); }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); padding-inline: var(--sp-2); }
.pager__count { margin-inline-end: auto; font-size: var(--fs-caption); color: var(--text-muted); }

.bulkbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  animation: rise var(--m-base) var(--ease-slow);
}
.bulkbar__count { margin-inline-end: auto; font-weight: 600; color: var(--brand-text); }

/* ======================================================================== */
/* States                                                                    */
/* ======================================================================== */
.state {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: var(--sp-10) var(--sp-6); text-align: center;
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
}
.state__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-title-m); line-height: var(--lh-title-m); color: var(--text); }
.state[role="alert"] { border-style: solid; border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); }
.state[role="alert"] .state__title { color: var(--danger); }

.skeleton { display: grid; gap: var(--sp-3); }
.skeleton__line {
  block-size: 18px; border-radius: var(--r-sm); background: var(--surface-sunken);
  animation: breathe 1.4s var(--ease) infinite alternate;
}
.skeleton__line:nth-child(3n) { inline-size: 72%; }
.skeleton__line:nth-child(3n + 2) { inline-size: 88%; }

/* ======================================================================== */
/* Overlays: toast, modal, drawer, palette                                   */
/* ======================================================================== */
.toasts { position: fixed; inset-block-end: var(--sp-7); inset-inline-end: var(--sp-7); display: grid; gap: var(--sp-3); z-index: 70; }
.toast {
  max-inline-size: 420px; padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-lg); background: var(--text); color: var(--bg);
  box-shadow: var(--e-3); font-size: var(--fs-label); font-weight: 500;
  animation: rise var(--m-base) var(--ease-slow);
}
.toast--error { background: var(--danger); color: var(--text-inverse); }

.overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--sp-5);
  background: var(--overlay); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fade var(--m-base) var(--ease);
}
.modal {
  inline-size: min(560px, 100%); max-block-size: 88vh; overflow-y: auto;
  padding: var(--sp-8); border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface-raised); box-shadow: var(--e-3);
  animation: pop var(--m-base) var(--ease-slow);
}
.modal h2 { margin-block-end: var(--sp-6); }
.modal__actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3);
  margin-block-start: var(--sp-7); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--border);
}

.overlay--drawer { place-items: stretch; justify-items: end; padding: 0; }
.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 55;
  inline-size: min(520px, 100%); overflow-y: auto; padding: var(--sp-7);
  background: var(--surface-raised); border-inline-start: 1px solid var(--border); box-shadow: var(--e-3);
  animation: slide-in-end var(--m-slow) var(--ease-slow);
}
[dir="rtl"] .drawer { animation-name: slide-in-end-rtl; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin: calc(var(--sp-7) * -1) calc(var(--sp-7) * -1) var(--sp-6); padding: var(--sp-5) var(--sp-7);
  position: sticky; inset-block-start: 0; z-index: 1;
  background: var(--glass); border-block-end: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.drawer__title { margin: 0; font-size: var(--fs-title-m); line-height: var(--lh-title-m); }
.drawer__body { display: flex; flex-direction: column; gap: var(--sp-6); }
.drawer__section { padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.drawer__section-title {
  margin: 0 0 var(--sp-3); font-size: 12.5px; line-height: 16px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
}

.overlay--palette { place-items: start center; padding-block-start: 14vh; }
.palette {
  display: flex; flex-direction: column; overflow: hidden;
  inline-size: min(600px, 92vw); border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface-raised); box-shadow: var(--e-3);
  animation: pop var(--m-base) var(--ease-slow);
}
.palette__input {
  padding: var(--sp-6); border: 0; border-block-end: 1px solid var(--border);
  background: transparent; color: var(--text); font: inherit; font-size: var(--fs-body-l);
}
.palette__input:focus { outline: none; }
.palette__input::placeholder { color: var(--text-subtle); }
.palette__list { list-style: none; margin: 0; padding: var(--sp-3); max-block-size: 52vh; overflow-y: auto; }
.palette__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-block-size: var(--target); padding-inline: var(--sp-4); border-radius: var(--r-md);
  color: var(--text); cursor: pointer;
}
.palette__item--active { background: var(--brand-soft); color: var(--brand-text); }
.palette__group { font-size: var(--fs-caption); color: var(--text-muted); }
.palette__empty { padding: var(--sp-6); text-align: center; }
.palette__hint { padding: var(--sp-4) var(--sp-6); border-block-start: 1px solid var(--border); background: var(--surface-sunken); font-size: var(--fs-caption); }
.kbd {
  display: inline-grid; place-items: center; min-inline-size: 28px; block-size: 22px; padding-inline: 6px;
  margin-inline-start: var(--sp-3);
  border: 1px solid var(--border-strong); border-block-end-width: 2px; border-radius: 6px;
  background: var(--surface-sunken); color: var(--text-muted);
  font-family: var(--font-data); font-size: 11.5px; font-weight: 600;
}
.palette-trigger { min-inline-size: 240px; justify-content: space-between; color: var(--text-muted); font-weight: 500; }

/* ======================================================================== */
/* Detail lists & audit trail                                                */
/* ======================================================================== */
.detail { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-6); margin: 0; }
.detail dt { color: var(--text-muted); font-size: var(--fs-label); }
.detail dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.detail--tight { gap: var(--sp-1) var(--sp-4); font-size: var(--fs-caption); }
.plain-list { margin: 0; padding-inline-start: var(--sp-6); display: grid; gap: var(--sp-2); }

.audit__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.audit__item { position: relative; padding-block: 0 var(--sp-5); padding-inline-start: var(--sp-6); border-inline-start: 2px solid var(--border); }
.audit__item::before {
  content: ''; position: absolute; inset-inline-start: -6px; inset-block-start: 4px;
  inline-size: 10px; block-size: 10px; border-radius: var(--r-pill);
  background: var(--surface-raised); border: 2px solid var(--brand);
}
.audit__item:last-child { border-inline-start-color: transparent; }
.audit__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-block-end: var(--sp-2); }
.audit__when { font-size: var(--fs-caption); color: var(--text-muted); }
.audit__who { font-size: var(--fs-label); }

/* ======================================================================== */
/* Clinic queue board                                                        */
/* ======================================================================== */
.queue-now { text-align: center; }
.queue-now__number {
  font-family: var(--font-display); font-size: calc(var(--fs-display-l) * 3); line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--lane-clinic);
}
.ticket-list { display: grid; gap: var(--sp-3); }
.ticket-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--e-1);
}
.ticket-row__num { min-inline-size: 56px; font-family: var(--font-display); font-size: var(--fs-title-l); font-variant-numeric: tabular-nums; }

/* ======================================================================== */
/* Pharmacy order board                                                      */
/* ======================================================================== */
.board { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; }
.board__column { min-inline-size: 0; padding: var(--sp-3); border-radius: var(--r-lg); background: var(--surface-sunken); border: 1px solid var(--border); }
.board__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-4); }
.board__title { margin: 0; font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; }
.board__head--warning .board__title { color: var(--warning); }
.board__count {
  display: inline-grid; place-items: center; min-inline-size: 26px; block-size: 22px; padding-inline: 8px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600;
}
.board__cards { display: flex; flex-direction: column; gap: var(--sp-3); }
.board__empty { margin: 0; padding: var(--sp-6) var(--sp-4); text-align: center; font-size: var(--fs-caption); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.board__card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--e-1); cursor: pointer;
  transition: transform var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
}
.board__card:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--e-2); }
.board__card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.board__card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.board__card-who { font-weight: 600; }
.board__card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-caption); }
.board__card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-2); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--border); }

.rx-image { inline-size: 100%; border-radius: var(--r-md); border: 1px solid var(--border); }

/* ======================================================================== */
/* Charts, auth, icons                                                       */
/* ======================================================================== */
.charts { display: grid; gap: var(--sp-5); margin-block-end: var(--sp-5); }
.chart { block-size: 300px; padding: var(--sp-5); }
@media (min-width: 1100px) { .charts:has(> * + *) { grid-template-columns: 1fr 1fr; } }

.auth { min-block-size: 100vh; display: grid; place-items: center; padding: var(--sp-5); background: var(--bg); }
.auth .card { inline-size: min(440px, 100%); padding: var(--sp-8); box-shadow: var(--e-2); border-radius: var(--r-xl); }

.icon { flex: none; display: block; }

/* ======================================================================== */
/* Motion                                                                    */
/* ======================================================================== */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-end { from { transform: translateX(100%); } to { transform: none; } }
@keyframes slide-in-end-rtl { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes breathe { from { opacity: .55; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .kpi--link:hover, .board__card:hover { transform: none; }
}

/* PageHead parts. */
.page__heading { min-inline-size: 0; flex: 1 1 360px; }
.page__heading p { max-inline-size: 72ch; }
.page__actions { flex: none; }

/* Tabs: a segmented control on a sunken track. The selected tab is a raised
   surface, and aria-selected — not a class — drives it, so screen readers and
   the styling can never disagree. */
.tabs {
  display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1);
  margin-block-end: var(--sp-6); border-radius: var(--r-md);
  background: var(--surface-sunken); border: 1px solid var(--border);
}
.tabs__tab {
  position: relative; min-block-size: 36px; padding-inline: var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent;
  color: var(--text-muted); font: inherit; font-size: var(--fs-label); font-weight: 600; cursor: pointer;
  transition: background var(--m-fast) var(--ease), color var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease);
}
.tabs__tab::after { content: ''; position: absolute; inset: -6px -2px; }
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--e-1); }

/* Sign-in and two-step sign-in. */
.auth__card { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth__card h1 { margin: 0; }
.auth__card .muted { margin: 0; }
.auth__brand { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-title-m); font-weight: 700; color: var(--brand-text); }
.auth__foot { margin: var(--sp-2) 0 0; text-align: center; font-size: var(--fs-label); }
.auth__foot a { text-decoration: none; }
.auth__steps { margin: 0; padding-inline-start: var(--sp-6); display: grid; gap: var(--sp-4); }
.auth__secret {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  margin-block: var(--sp-3) var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-sunken); border: 1px dashed var(--border-strong); border-radius: var(--r-md);
}
.auth__secret code { font-size: 15px; letter-spacing: .08em; word-break: break-all; }
.auth__link { font-size: var(--fs-label); }
/* The picture carries its own white plate and quiet zone: it stays black on
   white in the dark theme too, because that is what a phone camera reads. */
.auth__qr { display: block; inline-size: min(220px, 100%); block-size: auto; margin-block: var(--sp-3) var(--sp-2); border-radius: var(--r-md); border: 1px solid var(--border-strong); image-rendering: pixelated; }
.auth__note { font-size: var(--fs-caption); }
.auth__codes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-5);
  margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-8);
  background: var(--surface-sunken); border-radius: var(--r-md); border: 1px solid var(--border);
}
.auth__codes li { font-size: 15px; letter-spacing: .06em; }
.auth__confirm { display: flex; align-items: center; gap: var(--sp-3); min-block-size: var(--target); font-size: var(--fs-label); cursor: pointer; }

/* An inline share-of-total bar (company team table). One hue, thin, rounded
   at the data end; the number beside it is text ink, never the bar colour. */
.meter { display: flex; align-items: center; gap: var(--sp-3); min-inline-size: 160px; }
.meter__track { flex: 1; block-size: 8px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
.meter__fill { block-size: 100%; border-radius: var(--r-pill); background: var(--brand); }
.meter__text { color: var(--text-muted); font-size: 13px; white-space: nowrap; }

/* A row's name that opens its details: text that behaves like a link, with a full tap target. */
.link-button {
  min-block-size: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-text);
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The actions for one record, inside its drawer. */
.drawer__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- Management screens ---------------------------------------------------- */
/* A checkbox with its label beside it, in a hand-built dialog. */
.field--check { display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); min-block-size: var(--target, 48px); }
.field--check input { inline-size: 20px; block-size: 20px; }

/* An internal note in a ticket: visibly not part of what the patient reads. */
.card--note { background: var(--warning-soft); border-color: transparent; }

/* Something to know before acting on this screen: said once, at the top. */
.notice {
  margin-block: 0 var(--sp-6); padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md); border-inline-start: var(--sp-2) solid var(--warning);
  background: var(--warning-soft); color: var(--text); max-inline-size: 96ch;
}

/* Someone's own words, quoted back before acting on them. */
.quote {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-inline-start: 3px solid var(--border-strong);
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
  line-height: 1.7;
}

/* Verification documents: a thumbnail where there is one, a link always. */
.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.docs__item { display: flex; align-items: center; gap: var(--sp-4); }
.docs__thumb {
  inline-size: 96px; block-size: 72px; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-sunken);
}
.docs__item a { color: var(--brand-text); }

/* A collapsed tool under a table (bulk upload). */
details.card > summary { cursor: pointer; font-weight: 600; min-block-size: var(--target, 48px); display: flex; align-items: center; }
details.card[open] > summary { margin-block-end: var(--sp-4); }

/* The signed-in person's name, as the way in to their account. */
.topbar__name { font-weight: 600; }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: var(--sp-5);
  align-items: start;
}

.settings-card {
  display: grid;
  gap: var(--sp-4);
}

.settings-card h2,
.settings-card h3,
.settings-card p {
  margin: 0;
}

/* The patient's photo of a medicine, as large as the dialog allows. */
.enquiry__photo { display: block; max-inline-size: 100%; max-block-size: 60vh; margin-inline: auto; border-radius: var(--r-md); }

/* The assistant's panel: the conversation — each question, and under it the
   answer with the screens it points to — then the box for the next one. */
.assistant, .assistant__answer { display: grid; gap: var(--sp-4); }
.assistant__answer:empty { display: none; }
.assistant__answer p { margin: 0; white-space: pre-line; }
.assistant__reply { display: grid; gap: var(--sp-3); }
.assistant__question {
  padding-inline-start: var(--sp-4);
  border-inline-start: var(--sp-1) solid var(--border-strong);
  color: var(--text-muted);
}