/* =====================================================================
   Primed Health components: reference implementation
   Plain CSS classes built only from tokens.css. If you use Tailwind or
   shadcn, treat this file as the spec: rebuild the components there and
   match these values. Requires tokens.css and agent-glow.css.
   ===================================================================== */

/* ---- Base ---------------------------------------------------------- */
:where(html) { -webkit-text-size-adjust: 100%; }
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body) {
  margin: 0;
  background: var(--pr-surface);
  color: var(--pr-ink);
  font-family: var(--pr-font-sans);
  font-size: var(--pr-text-body);
  line-height: var(--pr-leading-body);
  -webkit-font-smoothing: antialiased;
}
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(a) { color: var(--pr-brand); text-underline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--pr-brand) 22%, transparent); }

/* One focus style for every interactive element. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pr-brand);
  outline-offset: 2px;
}

/* ---- Type ---------------------------------------------------------- */
/* Petrona is used ONLY by .pr-display, .pr-heading and the wordmark. */
.pr-display {
  font-family: var(--pr-font-display);
  font-size: var(--pr-text-display);
  font-weight: var(--pr-weight-regular);
  line-height: var(--pr-leading-tight);
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}
.pr-heading {
  font-family: var(--pr-font-display);
  font-size: var(--pr-text-heading);
  font-weight: var(--pr-weight-medium);
  line-height: var(--pr-leading-snug);
  letter-spacing: -.005em;
  margin: 0;
}
.pr-muted { color: var(--pr-ink-muted); }
.pr-sm { font-size: var(--pr-text-sm); }
.pr-xs { font-size: var(--pr-text-xs); }
.pr-num { font-variant-numeric: tabular-nums; }  /* every time, date, count and ID */
/* Text for screen readers only, e.g. a chip's state */
.pr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- Wordmark ------------------------------------------------------ */
.pr-wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--pr-font-display); font-size: var(--pr-text-heading); font-weight: var(--pr-weight-medium);
  letter-spacing: -.01em;
}
.pr-wordmark::before {
  /* the ring mark: a ring with a lighter arc inside its upper left */
  content: ""; width: 24px; height: 24px; flex: none; background: var(--pr-brand);
  -webkit-mask: var(--pr-logo) center / contain no-repeat;
          mask: var(--pr-logo) center / contain no-repeat;
}
:root { --pr-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='16.4'/%3E%3Cpath d='M9.43 16.97A11 11 0 0 1 24.12 9.8' opacity='.5'/%3E%3C/svg%3E"); }

/* ---- Panel (the only card) ---------------------------------------- */
.pr-panel {
  background: var(--pr-raised);
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-radius-card);
  padding: var(--pr-panel-p);
  min-width: 0;
}
.pr-panel__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--pr-space-3); margin-bottom: var(--pr-space-3);
}

/* ---- Case row (board) --------------------------------------------- */
.pr-board { display: flex; flex-direction: column; gap: var(--pr-stack-gap); }
.pr-case { border-radius: var(--pr-radius-card); }
.pr-case:not(.pr-glow) { background: var(--pr-raised); border: 1px solid var(--pr-line); }
.pr-case__body { padding: var(--pr-row-py) var(--pr-row-px); }
.pr-case__row {
  display: grid;
  grid-template-columns: 64px minmax(170px, 1.4fr) minmax(90px, .7fr) 2fr 132px;
  align-items: center;
  gap: var(--pr-space-4);
}
.pr-case__time {
  justify-self: start;
  font-weight: var(--pr-weight-medium); font-variant-numeric: tabular-nums;
  padding: 3px 7px; margin-left: -7px; border-radius: var(--pr-radius-badge);
}
/* The time cell carries the row's state, so readiness sits where the eye
   starts. Ready rows stay neutral: only rows that need something get color.
   Set data-status on .pr-case: pending | blocked | waiting | working | ready. */
.pr-case[data-status="pending"] .pr-case__time { color: var(--pr-pending); background: var(--pr-pending-bg); }
.pr-case[data-status="blocked"] .pr-case__time { color: var(--pr-blocked); background: var(--pr-blocked-bg); }
.pr-case[data-status="waiting"] .pr-case__time { color: var(--pr-agent-ink); background: var(--pr-agent-bg); }
.pr-case__patient { font-weight: var(--pr-weight-semibold); }
.pr-case__meta { color: var(--pr-ink-muted); font-size: var(--pr-text-sm); }
.pr-case__status { justify-self: end; }
@media (max-width: 960px) {
  .pr-case__row { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .pr-case__row > .pr-case__surgeon { display: none; }
  .pr-case__row > .pr-chips { grid-column: 1 / -1; grid-row: 2; }
  .pr-case__row > .pr-case__status { grid-column: 3; grid-row: 1; }
}

/* ---- Board summary: the day in one line, counts double as filters -- */
.pr-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pr-space-2) var(--pr-space-4); }
.pr-summary__day { font-size: var(--pr-text-sm); color: var(--pr-ink-muted); font-variant-numeric: tabular-nums; }
.pr-summary__day b { color: var(--pr-ink); font-weight: var(--pr-weight-semibold); }
.pr-summary__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--pr-text-sm); font-weight: var(--pr-weight-medium); font-variant-numeric: tabular-nums;
  padding: 5px 11px 5px 9px; border-radius: var(--pr-radius-button); cursor: pointer;
  border: 1px solid var(--pr-line); background: var(--pr-raised); color: var(--pr-ink);
  transition: background var(--pr-duration-fast) var(--pr-ease-out), border-color var(--pr-duration-fast) var(--pr-ease-out);
}
.pr-filter:hover { background: var(--pr-sunken); }
.pr-filter[aria-pressed="true"] { border-color: var(--pr-ink); background: var(--pr-sunken); }
.pr-filter:disabled { color: var(--pr-ink-muted); cursor: default; background: none; }

/* ---- State marks: one shape per state, never color alone ----------- */
.pr-mark, .pr-chip::before {
  content: ""; width: 10px; height: 10px; flex: none;
  background: currentColor;
  -webkit-mask: var(--_mark) center / contain no-repeat;
          mask: var(--_mark) center / contain no-repeat;
}
.pr-mark, .pr-chip { --_mark: var(--pr-mark-todo); }
.pr-mark--ready,   .pr-chip--ready   { --_mark: var(--pr-mark-ready); }
.pr-mark--pending, .pr-chip--pending { --_mark: var(--pr-mark-pending); }
.pr-mark--blocked, .pr-chip--blocked { --_mark: var(--pr-mark-blocked); }
.pr-mark--agent,   .pr-chip--agent   { --_mark: var(--pr-mark-agent); }
.pr-mark { display: inline-block; color: var(--pr-ink-muted); }
.pr-mark--ready   { color: var(--pr-ready); }
.pr-mark--pending { color: var(--pr-pending); }
.pr-mark--blocked { color: var(--pr-blocked); }
.pr-mark--agent   { color: var(--pr-brand); }

/* ---- Chips: one checklist item, compact ---------------------------- */
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--pr-text-sm); white-space: nowrap;
  padding: var(--pr-chip-py) 10px var(--pr-chip-py) 8px;
  border-radius: var(--pr-radius-pill);
  border: 1px solid var(--pr-line);
  color: var(--pr-ink-muted);
}
.pr-chip--ready::before { background: var(--pr-ready); }
.pr-chip--pending  { color: var(--pr-pending); background: var(--pr-pending-bg); border-color: transparent; }
.pr-chip--blocked  { color: var(--pr-blocked); background: var(--pr-blocked-bg); border-color: transparent; }
.pr-chip--agent    { color: var(--pr-agent-ink); background: var(--pr-agent-bg); border-color: transparent; }
.pr-chip--agent::before { background: linear-gradient(135deg, var(--pr-brand), var(--pr-brand-2)); }

/* ---- Status badge: the state of a whole case or item --------------- */
.pr-badge {
  display: inline-block; white-space: nowrap;
  font-size: var(--pr-text-sm); font-weight: var(--pr-weight-medium);
  padding: 4px 10px; border-radius: var(--pr-radius-badge);
}
.pr-badge--ready   { color: var(--pr-ready);     background: var(--pr-ready-bg); }
.pr-badge--pending { color: var(--pr-pending);   background: var(--pr-pending-bg); }
.pr-badge--blocked { color: var(--pr-blocked);   background: var(--pr-blocked-bg); }
.pr-badge--agent   { color: var(--pr-agent-ink); background: var(--pr-agent-bg); }

/* ---- Agent working line ------------------------------------------- */
.pr-activity {
  display: flex; align-items: center; gap: var(--pr-space-2);
  margin-top: var(--pr-space-2);
  font-size: var(--pr-text-sm); color: var(--pr-agent-ink);
}
.pr-dots { display: inline-flex; gap: 3px; }
.pr-dots > span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: pr-dot 1.2s infinite; }
.pr-dots > span:nth-child(2) { animation-delay: .2s; }
.pr-dots > span:nth-child(3) { animation-delay: .4s; }
@keyframes pr-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ---- Agent draft (always inside .pr-glow[data-agent="waiting"]) ---- */
.pr-draft {
  display: flex; flex-direction: column; gap: var(--pr-space-3);
  padding: var(--pr-row-py) var(--pr-row-px);
}
.pr-draft > .pr-actions { justify-content: flex-end; }
.pr-draft__flag {
  align-self: flex-start;
  font-size: var(--pr-text-xs); font-weight: var(--pr-weight-semibold);
  color: var(--pr-agent-ink); background: var(--pr-agent-bg);
  padding: 2px 8px; border-radius: var(--pr-radius-badge); margin-bottom: -4px;
}
.pr-draft__head { font-size: var(--pr-text-sm); color: var(--pr-agent-ink); margin-bottom: 6px; }
.pr-draft__head b { font-weight: var(--pr-weight-semibold); }
.pr-draft__message {
  font-size: var(--pr-text-body); max-width: 64ch;
  background: var(--pr-sunken); border: 1px solid var(--pr-line);
  border-radius: calc(var(--pr-radius-card) - 4px); padding: 10px 12px;
}
.pr-draft__why { font-size: var(--pr-text-xs); color: var(--pr-ink-muted); margin-top: 6px; }

/* ---- Buttons ------------------------------------------------------- */
.pr-actions { display: flex; flex-wrap: wrap; gap: var(--pr-space-2); }
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--pr-text-sm); font-weight: var(--pr-weight-medium); line-height: 1.3;
  padding: 8px 14px; border-radius: var(--pr-radius-button); cursor: pointer;
  border: 1px solid var(--pr-line-strong); background: var(--pr-raised); color: var(--pr-ink);
  transition: background var(--pr-duration-fast) var(--pr-ease-out), opacity var(--pr-duration-fast) var(--pr-ease-out);
}
.pr-btn:hover { background: var(--pr-sunken); }
.pr-btn--primary { background: var(--pr-ink); border-color: var(--pr-ink); color: var(--pr-on-ink); }
.pr-btn--primary:hover { background: var(--pr-ink); opacity: .88; }
.pr-btn--quiet { background: none; border-color: transparent; color: var(--pr-ink-muted); }
.pr-btn--quiet:hover { background: var(--pr-sunken); color: var(--pr-ink); }
.pr-btn--danger { background: var(--pr-blocked); border-color: var(--pr-blocked); color: var(--pr-on-ink); }
.pr-btn--danger:hover { background: var(--pr-blocked); opacity: .88; }
.pr-btn:disabled, .pr-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---- Form fields --------------------------------------------------- */
.pr-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px var(--pr-space-4); }
.pr-form__full { grid-column: 1 / -1; }
.pr-form__foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--pr-space-2); padding-top: var(--pr-space-1); }
@media (max-width: 520px) { .pr-form { grid-template-columns: minmax(0, 1fr); } }

.pr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pr-label { font-size: var(--pr-text-sm); font-weight: var(--pr-weight-medium); }
.pr-input {
  width: 100%; font-size: var(--pr-text-body); padding: 7px 11px;
  background: var(--pr-raised); color: var(--pr-ink);
  border: 1px solid var(--pr-border-input); border-radius: var(--pr-radius-input);
}
.pr-input::placeholder { color: var(--pr-ink-muted); }
textarea.pr-input { resize: vertical; min-height: 72px; }
.pr-input[readonly] { background: var(--pr-sunken); }
.pr-hint { font-size: var(--pr-text-xs); color: var(--pr-ink-muted); }
.pr-input[aria-invalid="true"] { border-color: var(--pr-blocked); }
.pr-input[aria-invalid="true"] ~ .pr-hint { color: var(--pr-blocked); }

.pr-check { display: flex; align-items: center; gap: 9px; font-size: var(--pr-text-body); }
.pr-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--pr-ink); }

/* ---- Tabs ---------------------------------------------------------- */
.pr-tabs { display: flex; gap: var(--pr-space-1); border-bottom: 1px solid var(--pr-line); overflow-x: auto; }
.pr-tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 12px; font-size: var(--pr-text-sm); font-weight: var(--pr-weight-medium);
  color: var(--pr-ink-muted); cursor: pointer; white-space: nowrap;
}
.pr-tab:hover { color: var(--pr-ink); }
.pr-tab[aria-selected="true"] { color: var(--pr-ink); border-bottom-color: var(--pr-ink); }
.pr-tab__count { margin-left: 4px; font-size: var(--pr-text-xs); color: var(--pr-ink-muted); font-variant-numeric: tabular-nums; }

/* ---- Readiness checklist ------------------------------------------ */
.pr-checklist { list-style: none; margin: 0; padding: 0; }
.pr-checklist__item {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--pr-space-3); align-items: start;
  padding: var(--pr-row-py) 0; border-top: 1px solid var(--pr-line);
}
.pr-checklist__item:first-child { border-top: 0; }
.pr-checklist__title { font-weight: var(--pr-weight-medium); }
.pr-checklist__detail { font-size: var(--pr-text-sm); color: var(--pr-ink-muted); }
.pr-checklist__item .pr-glow { margin-top: var(--pr-space-3); }

.pr-check-icon { width: 18px; height: 18px; border-radius: 50%; margin-top: 2px; display: inline-grid; place-items: center; flex: none; }
.pr-check-icon--ready { background: var(--pr-ready-bg); }
.pr-check-icon--ready::after {
  content: ""; width: 7px; height: 4px; transform: rotate(-45deg) translate(1px, -1px);
  border-left: 1.6px solid var(--pr-ready); border-bottom: 1.6px solid var(--pr-ready);
}
.pr-check-icon--pending { border: 1.6px solid var(--pr-pending); }
.pr-check-icon--blocked { background: var(--pr-blocked-bg); }
.pr-check-icon--blocked::after { content: ""; width: 8px; height: 1.6px; background: var(--pr-blocked); }
.pr-checklist__item > .pr-agent-ring { margin-top: 2px; }

/* ---- Readiness bar: one segment per checklist item ---------------- */
.pr-readiness { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pr-readiness__segs { display: flex; gap: 4px; }
.pr-readiness__seg { width: 34px; height: 6px; border-radius: 3px; background: var(--pr-line); }
.pr-readiness__seg--ready   { background: var(--pr-ready); }
.pr-readiness__seg--pending { background: var(--pr-pending); }
.pr-readiness__seg--blocked { background: var(--pr-blocked); }
.pr-readiness__seg--agent   { background: linear-gradient(90deg, var(--pr-brand), var(--pr-brand-2)); }
.pr-readiness__label { font-size: var(--pr-text-sm); color: var(--pr-ink-muted); }
@media (max-width: 520px) { .pr-readiness__seg { width: 24px; } }

/* ---- Activity timeline -------------------------------------------- */
.pr-timeline { list-style: none; margin: 0; padding: 0; }
.pr-timeline__item { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--pr-space-3); padding-bottom: var(--pr-space-4); }
.pr-timeline__item::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 1px; background: var(--pr-line); }
.pr-timeline__item:last-child { padding-bottom: 0; }
.pr-timeline__item:last-child::before { display: none; }
.pr-timeline__dot { width: 13px; height: 13px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--pr-line-strong); background: var(--pr-raised); }
.pr-timeline__item > .pr-agent-dot { margin-top: 4px; }
.pr-timeline__meta { font-size: var(--pr-text-xs); color: var(--pr-ink-muted); font-variant-numeric: tabular-nums; }
.pr-timeline__meta b { font-weight: var(--pr-weight-medium); color: var(--pr-ink); }
.pr-timeline__meta b.pr-is-agent { color: var(--pr-agent-ink); }
.pr-timeline__text { font-size: var(--pr-text-body); }

/* ---- Dialog -------------------------------------------------------- */
.pr-scrim { position: fixed; inset: 0; z-index: var(--pr-z-overlay); display: grid; place-items: center; padding: var(--pr-space-4); background: var(--pr-overlay); }
.pr-dialog {
  width: min(460px, 100%); padding: var(--pr-space-6);
  display: flex; flex-direction: column; gap: var(--pr-space-4);
  background: var(--pr-raised); border-radius: var(--pr-radius-card); box-shadow: var(--pr-shadow-overlay);
}
.pr-dialog p { margin: 0; color: var(--pr-ink-muted); font-size: var(--pr-text-body); }
.pr-dialog .pr-actions { justify-content: flex-end; }

/* ---- Toast --------------------------------------------------------- */
.pr-toast {
  position: fixed; left: 50%; z-index: var(--pr-z-toast);
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 10px 16px;
  font-size: var(--pr-text-body); background: var(--pr-ink); color: var(--pr-on-ink);
  border-radius: var(--pr-radius-button); box-shadow: var(--pr-shadow-toast);
  transition: opacity var(--pr-duration-base) var(--pr-ease-out), transform var(--pr-duration-base) var(--pr-ease-out);
}
.pr-toast[data-open="true"] { opacity: 1; transform: translate(-50%, 0); }

/* ---- Empty state --------------------------------------------------- */
.pr-empty { text-align: center; padding: var(--pr-space-12) var(--pr-space-5); }
.pr-empty .pr-heading { margin-bottom: 6px; }
.pr-empty p { color: var(--pr-ink-muted); font-size: var(--pr-text-body); max-width: 44ch; margin: 0 auto 18px; }

/* ---- Loading skeleton --------------------------------------------- */
.pr-skeleton { display: block; background: var(--pr-skeleton); border-radius: 6px; animation: pr-pulse 1.4s ease-in-out infinite; }
@keyframes pr-pulse { 50% { opacity: .5; } }

/* =====================================================================
   PAGE PARTS
   The pieces of a single-column page such as Today. See "Pages" in DESIGN.md.
   ===================================================================== */

/* ---- Icon button ------------------------------------------------------ */
.pr-icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border: 0; background: none; color: var(--pr-ink); cursor: pointer;
  border-radius: var(--pr-radius-button);
  transition: background var(--pr-duration-fast) var(--pr-ease-out);
}
.pr-icon-btn:hover { background: var(--pr-sunken); }

/* ---- Top bar: the only chrome on screen by default -------------------- */
/* The hairline appears only once the page scrolls (set data-scrolled="true"). */
.pr-topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--pr-z-sticky);
  display: flex; align-items: center; gap: var(--pr-space-3);
  height: var(--pr-topbar-h); padding: 0 var(--pr-gutter);
  background: var(--pr-surface); border-bottom: 1px solid transparent;
  transition: border-color var(--pr-duration-base) var(--pr-ease-out);
}
.pr-topbar[data-scrolled="true"] { border-bottom-color: var(--pr-line); }
.pr-topbar__spacer { flex: 1; }

/* ---- Navigation drawer: hidden until asked for ------------------------ */
/* Toggle data-open="true" on both .pr-drawer and .pr-drawer-scrim. */
.pr-drawer-scrim {
  position: fixed; inset: 0; z-index: var(--pr-z-overlay); background: var(--pr-overlay);
  opacity: 0; pointer-events: none; transition: opacity var(--pr-duration-base) var(--pr-ease-out);
}
.pr-drawer-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.pr-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: calc(var(--pr-z-overlay) + 1);
  width: min(300px, 86vw); display: flex; flex-direction: column; gap: var(--pr-space-6);
  padding: 18px var(--pr-space-4) var(--pr-space-5);
  background: var(--pr-raised); box-shadow: var(--pr-shadow-overlay);
  transform: translateX(-104%); visibility: hidden;
  transition: transform var(--pr-duration-base) var(--pr-ease-out), visibility 0s linear var(--pr-duration-base);
}
.pr-drawer[data-open="true"] { transform: none; visibility: visible; transition: transform var(--pr-duration-base) var(--pr-ease-out); }
.pr-drawer__group { font-size: var(--pr-text-xs); color: var(--pr-ink-muted); padding: 0 var(--pr-space-3); margin: var(--pr-space-4) 0 6px; }
.pr-drawer__link {
  display: flex; align-items: center; gap: var(--pr-space-3); padding: 9px var(--pr-space-3);
  border-radius: var(--pr-radius-button); font-size: var(--pr-text-body); color: var(--pr-ink); text-decoration: none;
  transition: background var(--pr-duration-fast) var(--pr-ease-out);
}
.pr-drawer__link svg { color: var(--pr-ink-muted); flex: none; }
.pr-drawer__link:hover, .pr-drawer__link[aria-current="page"] { background: var(--pr-sunken); }
.pr-drawer__link[aria-current="page"] { font-weight: var(--pr-weight-medium); }
.pr-drawer__count { margin-left: auto; font-size: var(--pr-text-xs); color: var(--pr-ink-muted); font-variant-numeric: tabular-nums; }

/* ---- Page: one centered column with a lot of air ---------------------- */
.pr-page {
  max-width: var(--pr-page-max); margin: 0 auto;
  padding: clamp(var(--pr-space-10), 9vh, var(--pr-space-24)) var(--pr-gutter) var(--pr-space-16);
}
.pr-page__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pr-space-2) var(--pr-space-4);
  font-size: var(--pr-text-sm); color: var(--pr-ink-muted); font-variant-numeric: tabular-nums; margin: 0 0 var(--pr-space-3);
}
.pr-page__summary { font-size: var(--pr-text-body); color: var(--pr-ink-muted); max-width: 64ch; margin: var(--pr-space-4) 0 0; font-variant-numeric: tabular-nums; }
.pr-page__summary b { color: var(--pr-ink); font-weight: var(--pr-weight-medium); }
.pr-page__block { margin-top: clamp(var(--pr-space-8), 6vh, var(--pr-space-12)); }

/* ---- Sync status: when the data last arrived -------------------------- */
/* Says "Synced", never the transport. Set data-state="late" when an update is overdue. */
.pr-sync { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pr-text-sm); color: var(--pr-ink-muted); font-variant-numeric: tabular-nums; }
.pr-sync::before {
  content: ""; width: 10px; height: 10px; flex: none; background: var(--pr-ready);
  -webkit-mask: var(--pr-mark-ready) center / contain no-repeat; mask: var(--pr-mark-ready) center / contain no-repeat;
}
.pr-sync[data-state="late"] { color: var(--pr-pending); }
.pr-sync[data-state="late"]::before { background: var(--pr-pending); -webkit-mask-image: var(--pr-mark-pending); mask-image: var(--pr-mark-pending); }

/* ---- Tab intro: one line under the tabs saying who acts --------------- */
.pr-tab-intro {
  display: flex; align-items: baseline; gap: var(--pr-space-2);
  font-size: var(--pr-text-sm); color: var(--pr-ink-muted); margin: var(--pr-space-6) 0 var(--pr-space-4);
}

/* ---- Week strip: the pipeline and the week's calendar in one line ----- */
/* Undated cases sit in their stage, dated cases on their surgery day. Each column
   is a toggle that filters the lists below. Marks show exceptions only, grouped
   by state with a count (R26). */
.pr-week__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pr-space-4); margin-bottom: var(--pr-space-3); }
.pr-week__title { margin: 0; font-size: var(--pr-text-sm); font-weight: var(--pr-weight-medium); }
.pr-week__note { font-size: var(--pr-text-sm); color: var(--pr-ink-muted); font-variant-numeric: tabular-nums; }
.pr-week__track { display: flex; gap: var(--pr-space-4); margin: 0 calc(var(--pr-space-3) * -1); padding: 2px var(--pr-space-3) 4px; }
.pr-week__group { flex: none; display: flex; flex-direction: column; gap: 6px; }
.pr-week__group--dates { flex: 1 0 auto; padding-left: var(--pr-space-4); border-left: 1px solid var(--pr-line); }
.pr-week__cap { font-size: var(--pr-text-xs); color: var(--pr-ink-muted); padding-left: var(--pr-space-3); }
.pr-week__cols { display: flex; gap: 4px; }
.pr-week__col {
  flex: 1; min-width: 84px; display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 10px var(--pr-space-3) 12px; font: inherit; color: var(--pr-ink); cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--pr-radius-button);
  transition: background var(--pr-duration-fast) var(--pr-ease-out), border-color var(--pr-duration-fast) var(--pr-ease-out);
}
.pr-week__col:hover { background: var(--pr-sunken); }
.pr-week__col[aria-pressed="true"] { background: var(--pr-sunken); border-color: var(--pr-line-strong); }
.pr-week__label { font-size: var(--pr-text-sm); color: var(--pr-ink-muted); white-space: nowrap; }
.pr-week__col[data-today] .pr-week__label { color: var(--pr-ink); font-weight: var(--pr-weight-medium); }
.pr-week__n { font-size: var(--pr-text-heading); font-weight: var(--pr-weight-medium); line-height: 1; font-variant-numeric: tabular-nums; }
.pr-week__n:empty::before { content: "\2013"; color: var(--pr-ink-faint); }
.pr-week__marks { display: flex; flex-wrap: wrap; gap: 4px 10px; min-height: 1.2em; }
.pr-week__stat { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pr-text-xs); color: var(--pr-ink-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .pr-week__head { flex-direction: column; gap: 2px; }
  .pr-week__track { flex-direction: column; gap: var(--pr-space-3); }
  .pr-week__group--dates { border-left: 0; padding-left: 0; border-top: 1px solid var(--pr-line); padding-top: var(--pr-space-3); }
  .pr-week__col { min-width: 0; padding: 8px 10px 10px; }
}

/* ---- Done today: everything closed today, collapsed to one line ------- */
.pr-done { border-top: 1px solid var(--pr-line); }
.pr-done__toggle {
  display: flex; align-items: center; gap: var(--pr-space-3); width: 100%; padding: var(--pr-space-4) 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-size: var(--pr-text-sm); color: var(--pr-ink-muted); font-variant-numeric: tabular-nums;
}
.pr-done__toggle b { color: var(--pr-ink); font-weight: var(--pr-weight-medium); }
.pr-done__body { padding: var(--pr-space-2) 0 var(--pr-space-4); }

/* ---- Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pr-dots > span, .pr-skeleton { animation: none; }
  .pr-btn, .pr-filter, .pr-toast, .pr-topbar, .pr-drawer, .pr-drawer-scrim, .pr-week__col { transition: none; }
}