/* Pet PT — base styles, shell layout and shared component styles. Tokens only (public/css/tokens.css).
   Markup contract: docs/BUILDER.md "Page shell markup"; components: docs/DESIGN.md §4; design bar: docs/UI.md. */

/* ---------------------------------------------------------------------------------------------
   1. Reset and base
   ------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }
body.pt-body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--pt-bg);
  color: var(--pt-text);
  font-family: var(--pt-font);
  font-size: var(--pt-text-md);
  line-height: var(--pt-line-md);
  font-weight: var(--pt-weight-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
/* Heights of the sticky chrome, computed on the root (with or without JavaScript) so the body inherits them and
   the viewport's scroll-padding keeps anything scrolled into view — focused controls, anchor targets, a tap
   Playwright or a screen reader brings on screen — clear of the strip/top bar above and the dock/tab bar below. */
html {
  --pt-strip-h: 0px;
  --pt-dock-h: 0px;
  --pt-tabbar-h: 0px;
  --pt-bottom-chrome: calc(var(--pt-dock-h) + var(--pt-tabbar-h) + var(--pt-safe-bottom));
  scroll-padding-top: calc(var(--pt-strip-h) + var(--pt-topbar) + var(--pt-space-2));
  scroll-padding-bottom: calc(var(--pt-bottom-chrome) + var(--pt-space-2));
}
html:has(body.pt-body pt-demo-strip:not([badge])) { --pt-strip-h: var(--pt-strip); }
html:has(body.pt-body pt-demo-strip[badge]) { --pt-strip-h: var(--pt-strip-badge); }
@media (max-width: 767.98px) {
  html:has(body.pt-body .pt-dock) { --pt-dock-h: var(--pt-dock); }
  html:has(body.pt-body .pt-tabbar) { --pt-tabbar-h: var(--pt-tabbar); }
  html:has(body.pt-body pt-shell[compact]) { --pt-tabbar-h: 0px; }
}

h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, canvas { display: block; max-width: 100%; }
svg { display: inline-block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--pt-accent); text-decoration: none; }
a:hover { color: var(--pt-accent-hover); }
hr { border: 0; border-top: 1px solid var(--pt-border); margin: var(--pt-space-4) 0; }
[hidden] { display: none !important; }
strong, b { font-weight: var(--pt-weight-title); }
small { font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
code, kbd, samp { font-family: var(--pt-font-mono); }
time, .pt-num, .pt-money, .pt-tabular { font-variant-numeric: tabular-nums; }

/* Focus ring — the same everywhere. */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--pt-focus); border-radius: var(--pt-radius-sm); }
.pt-focus-within:focus-within { box-shadow: var(--pt-focus); }

/* Light-DOM custom elements behave like blocks unless styled otherwise. */
pt-shell, pt-demo-strip, pt-list, pt-list-row, pt-subnav, pt-field, pt-file-drop, pt-checklist, pt-chat,
pt-chart, pt-skeleton, pt-empty-state, pt-primary-action, pt-appointment-card { display: block; }
pt-avatar, pt-status-pill { display: inline-flex; vertical-align: middle; }
pt-sheet, pt-confirm, pt-toast-host, pt-command-palette { display: contents; }

/* Icons (docs/UI.md §3): one set, 1.5 px stroke; sized by class, coloured by currentColor. */
.pt-icon { flex: none; width: var(--pt-icon); height: var(--pt-icon); vertical-align: middle; }
.pt-icon-14 { width: 14px; height: 14px; }
.pt-icon-16 { width: var(--pt-icon-sm); height: var(--pt-icon-sm); }
.pt-icon-18 { width: 18px; height: 18px; }
.pt-icon-20 { width: 20px; height: 20px; }
.pt-icon-24 { width: var(--pt-icon-lg); height: var(--pt-icon-lg); }

/* ---------------------------------------------------------------------------------------------
   2. Typography (docs/UI.md §1)
   ------------------------------------------------------------------------------------------- */
.pt-text-2xs { font-size: var(--pt-text-2xs); line-height: var(--pt-line-2xs); }
.pt-text-xs { font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); }
.pt-text-sm { font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-text-md { font-size: var(--pt-text-md); line-height: var(--pt-line-md); }
.pt-text-lg { font-size: var(--pt-text-lg); line-height: var(--pt-line-lg); }
.pt-text-xl { font-size: var(--pt-text-xl); line-height: var(--pt-line-xl); }
.pt-text-2xl { font-size: var(--pt-text-2xl); line-height: var(--pt-line-2xl); }
.pt-text-3xl { font-size: var(--pt-text-3xl); line-height: var(--pt-line-3xl); }
.pt-h1, .pt-title { font-size: var(--pt-text-xl); line-height: var(--pt-line-xl); font-weight: var(--pt-weight-title); letter-spacing: -.01em; }
/* Section titles: 13 px medium muted, sentence case (never tracked uppercase). */
.pt-h2 { display: flex; align-items: center; gap: var(--pt-space-2); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); font-weight: var(--pt-weight-medium); color: var(--pt-text-muted); }
.pt-h2 .pt-icon { color: var(--pt-text-muted); }
.pt-h3 { font-size: var(--pt-text-md); line-height: var(--pt-line-md); font-weight: var(--pt-weight-title); }
/* Legacy `.pt-hero` on a heading is the 24 px name style; on a section it is the hero card (see §5b). */
h1.pt-hero, h2.pt-hero, h3.pt-hero, .pt-hero-name { font-size: var(--pt-text-2xl); line-height: var(--pt-line-2xl); font-weight: var(--pt-weight-title); letter-spacing: -.015em; }
/* Big number: a score, a time or a countdown only. */
.pt-stat { font-size: var(--pt-text-3xl); line-height: var(--pt-line-3xl); font-weight: var(--pt-weight-title); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pt-muted, .pt-text-muted { color: var(--pt-text-muted); }
.pt-mono { font-family: var(--pt-font-mono); font-size: var(--pt-text-sm); }
.pt-tabular { font-variant-numeric: tabular-nums; }
/* Meta: 12 px muted, sentence case. */
.pt-meta { font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); color: var(--pt-text-muted); font-weight: var(--pt-weight-medium); }
/* Eyebrow: the one tracked-uppercase label (11 px). */
.pt-eyebrow { display: inline-flex; align-items: center; gap: var(--pt-space-1); font-size: var(--pt-text-2xs); line-height: var(--pt-line-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--pt-text-muted); font-weight: var(--pt-weight-title); }
.pt-eyebrow-accent { color: var(--pt-accent); }
.pt-section { margin-block: var(--pt-space-5); }
.pt-section:first-child { margin-top: 0; }
.pt-section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--pt-space-3); min-height: 24px; margin-bottom: var(--pt-space-2); }
.pt-section-title .pt-h2 { min-width: 0; }
.pt-section-meta { color: var(--pt-text-muted); font-weight: var(--pt-weight-body); font-variant-numeric: tabular-nums; }
.pt-section-meta::before { content: "·"; margin-right: var(--pt-space-2); }
.pt-section-action { flex: none; display: inline-flex; align-items: center; gap: var(--pt-space-2); font-size: var(--pt-text-sm); }
.pt-prose p + p { margin-top: var(--pt-space-3); }

/* ---------------------------------------------------------------------------------------------
   3. Shell layout (docs/UI.md §10)
   ------------------------------------------------------------------------------------------- */

/* Demo strip: 28 px, quiet, in flow (pushes content down), sticky so it stays docked. */
pt-demo-strip {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--pt-strip);
  padding-top: var(--pt-safe-top);
  box-sizing: content-box;
  background: var(--pt-surface-2);
  color: var(--pt-text-muted);
  border-bottom: 1px solid var(--pt-border);
}
.pt-strip {
  height: var(--pt-strip);
  display: flex;
  align-items: center;
  gap: var(--pt-space-2);
  padding: 0 var(--pt-screen-margin);
  padding-left: calc(var(--pt-screen-margin) + var(--pt-safe-left));
  padding-right: calc(var(--pt-screen-margin) + var(--pt-safe-right));
  font-size: var(--pt-text-xs);
  line-height: var(--pt-line-xs);
  white-space: nowrap;
  overflow: hidden;
}
.pt-strip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pt-strip b { font-weight: var(--pt-weight-medium); color: var(--pt-text); }
.pt-strip time { font-variant-numeric: tabular-nums; }
.pt-strip-open {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--pt-space-1);
  height: 22px;
  padding: 0 var(--pt-space-2);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  background: var(--pt-surface);
  color: var(--pt-text);
  font-size: var(--pt-text-xs);
  line-height: 1;
  font-weight: var(--pt-weight-medium);
  transition: background-color var(--pt-dur-fast) var(--pt-ease), border-color var(--pt-dur-fast) var(--pt-ease);
}
.pt-strip-open:hover { border-color: var(--pt-text-muted); }
.pt-strip-open .pt-icon { width: 14px; height: 14px; color: var(--pt-text-muted); }
/* Badge mode (call screens): a small centred 22 px pill in the top safe area; still in flow so nothing is covered. */
pt-demo-strip[badge] { height: var(--pt-strip-badge); background: transparent; border-bottom: 0; }
pt-demo-strip[badge] .pt-strip {
  height: var(--pt-strip-badge);
  width: max-content;
  max-width: calc(100% - 2 * var(--pt-space-4));
  margin: 0 auto;
  padding: 0 var(--pt-space-1) 0 var(--pt-space-3);
  border-radius: var(--pt-radius-pill);
  background: var(--pt-surface-2);
  border: 1px solid var(--pt-border);
  font-size: var(--pt-text-2xs);
  line-height: var(--pt-line-2xs);
}
pt-demo-strip[badge] .pt-strip-clock { display: none; }
pt-demo-strip[badge] .pt-strip-open { height: 18px; padding: 0 var(--pt-space-1); margin-left: var(--pt-space-2); border: 0; background: transparent; }
pt-demo-strip[badge] .pt-strip-open span { display: none; }

/* Shell grid. Phone: topbar / main / dock / tabbar. Desktop: sidebar | topbar+dock / main. */
pt-shell {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "topbar" "main" "dock" "tabbar";
  min-height: calc(100dvh - var(--pt-strip-h) - var(--pt-safe-top));
}

/* Top bar: 52 px. */
.pt-topbar {
  grid-area: topbar;
  position: sticky;
  top: calc(var(--pt-strip-h) + (var(--pt-safe-top) * 0));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--pt-space-1);
  min-height: var(--pt-topbar);
  padding: 0 var(--pt-space-2);
  padding-left: calc(var(--pt-space-2) + var(--pt-safe-left));
  padding-right: calc(var(--pt-space-2) + var(--pt-safe-right));
  background: var(--pt-bg);
  border-bottom: 1px solid var(--pt-border);
}
body.pt-body:not(:has(pt-demo-strip)) .pt-topbar { padding-top: var(--pt-safe-top); }
.pt-topbar .pt-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: var(--pt-space-2);
}
/* Hero pages (`hideTitle`): the title stays in the bar as a quiet 14 px context line — the hero carries the 24 px name.
   It keeps its flex:1 spacer so the search field and avatar never slide left. */
.pt-topbar .pt-title-quiet { font-size: var(--pt-text-md); line-height: var(--pt-line-md); font-weight: var(--pt-weight-medium); color: var(--pt-text-muted); letter-spacing: 0; }
/* Guest landing: brand mark + wordmark as the title. */
.pt-topbar .pt-title-brand { display: inline-flex; align-items: center; gap: var(--pt-space-2); font-size: var(--pt-text-lg); line-height: var(--pt-line-lg); }
.pt-topbar .pt-title-brand .pt-brand-mark { width: 24px; height: 24px; }
.pt-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pt-tap);
  height: var(--pt-tap);
  margin-right: calc(-1 * var(--pt-space-2));
  border-radius: var(--pt-radius-sm);
  color: var(--pt-text);
  transition: background-color var(--pt-dur-fast) var(--pt-ease);
}
.pt-back:hover { background: var(--pt-surface-2); color: var(--pt-text); }
.pt-back:active { background: var(--pt-border); }
.pt-avatar-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pt-tap);
  height: var(--pt-tap);
  border-radius: var(--pt-radius-pill);
  transition: background-color var(--pt-dur-fast) var(--pt-ease);
}
.pt-avatar-btn:hover { background: var(--pt-surface-2); }
.pt-search-btn {
  display: none;
  align-items: center;
  gap: var(--pt-space-2);
  height: 32px;
  width: 260px;
  padding: 0 var(--pt-space-2) 0 var(--pt-space-3);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  background: var(--pt-surface);
  color: var(--pt-text-muted);
  font-size: var(--pt-text-sm);
  text-align: left;
  transition: border-color var(--pt-dur-fast) var(--pt-ease), background-color var(--pt-dur-fast) var(--pt-ease);
}
.pt-search-btn:hover { border-color: var(--pt-text-muted); color: var(--pt-text); }
.pt-search-btn .pt-search-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-search-btn kbd { margin-left: auto; }

.pt-main {
  grid-area: main;
  width: 100%;
  max-width: calc(var(--pt-content-max) + 2 * var(--pt-screen-margin));
  margin: 0 auto;
  padding: var(--pt-space-4) var(--pt-screen-margin) var(--pt-space-6);
  padding-left: calc(var(--pt-screen-margin) + var(--pt-safe-left));
  padding-right: calc(var(--pt-screen-margin) + var(--pt-safe-right));
  min-width: 0;
}
.pt-narrow { max-width: var(--pt-form-max); margin-inline: auto; }
.pt-main > .pt-narrow { margin-inline: 0; }
@media (min-width: 1080px) {
  .pt-split { display: grid; grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr); gap: var(--pt-space-5); align-items: start; }
}

/* Primary-action dock: phone bottom, above the tab bar. */
.pt-dock {
  grid-area: dock;
  position: sticky;
  bottom: calc(var(--pt-tabbar-h) + var(--pt-safe-bottom) * 0);
  z-index: 30;
  min-height: var(--pt-dock);
  display: flex;
  align-items: center;
  padding: var(--pt-space-2) var(--pt-screen-margin);
  padding-left: calc(var(--pt-screen-margin) + var(--pt-safe-left));
  padding-right: calc(var(--pt-screen-margin) + var(--pt-safe-right));
  background: var(--pt-bg);
  border-top: 1px solid var(--pt-border);
}
body.pt-body:has(pt-shell:not(:has(.pt-tabbar))) .pt-dock,
body.pt-body:has(pt-shell[compact]) .pt-dock { padding-bottom: calc(var(--pt-space-2) + var(--pt-safe-bottom)); }
.pt-dock pt-primary-action { flex: 1; display: flex; }
.pt-dock pt-primary-action > .pt-btn { flex: 1; min-height: 48px; font-size: var(--pt-text-lg); }
.pt-primary-stack { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.pt-dock .pt-countdown { display: block; font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); font-weight: var(--pt-weight-body); letter-spacing: .02em; text-transform: none; opacity: .85; font-variant-numeric: tabular-nums; }

/* Tab bar (phone): icons + 11 px labels, active in accent with a 2 px top indicator. */
.pt-tabbar {
  grid-area: tabbar;
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  min-height: var(--pt-tabbar);
  padding-bottom: var(--pt-safe-bottom);
  background: var(--pt-surface);
  border-top: 1px solid var(--pt-border);
}
.pt-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--pt-tabbar);
  padding-top: 2px;
  color: var(--pt-text-muted);
  font-size: var(--pt-text-2xs);
  line-height: var(--pt-line-2xs);
  font-weight: var(--pt-weight-medium);
  letter-spacing: .01em;
  transition: color var(--pt-dur-fast) var(--pt-ease);
}
.pt-tab .pt-icon, .pt-tab svg { width: var(--pt-icon-lg); height: var(--pt-icon-lg); }
.pt-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tab::before { content: ""; position: absolute; top: -1px; left: 50%; width: 32px; height: 2px; transform: translateX(-50%) scaleX(0); background: var(--pt-accent); border-radius: 0 0 2px 2px; transition: transform var(--pt-dur-fast) var(--pt-ease); }
.pt-tab:active { color: var(--pt-text); }
.pt-tab[aria-current="page"], .pt-tab[aria-current="true"] { color: var(--pt-accent); }
.pt-tab[aria-current="page"]::before, .pt-tab[aria-current="true"]::before { transform: translateX(-50%) scaleX(1); }
.pt-tab:focus-visible { box-shadow: inset var(--pt-focus); border-radius: 0; }

/* Sidebar (desktop): icons, kbd hints on hover, paw brand mark. */
.pt-sidebar {
  grid-area: sidebar;
  display: none;
  position: sticky;
  top: var(--pt-strip-h);
  height: calc(100dvh - var(--pt-strip-h));
  overflow-y: auto;
  flex-direction: column;
  gap: 2px;
  padding: var(--pt-space-3) var(--pt-space-3);
  padding-left: calc(var(--pt-space-3) + var(--pt-safe-left));
  background: var(--pt-surface);
  border-right: 1px solid var(--pt-border);
}
.pt-sidebar .pt-brand {
  display: flex;
  align-items: center;
  gap: var(--pt-space-2);
  min-height: 40px;
  padding: 0 var(--pt-space-2);
  margin-bottom: var(--pt-space-3);
  border-radius: var(--pt-radius-sm);
  color: var(--pt-text);
  font-weight: var(--pt-weight-title);
  font-size: var(--pt-text-lg);
  letter-spacing: -.01em;
}
.pt-brand-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--pt-accent); color: var(--pt-on-accent); flex: none; }
.pt-brand-mark .pt-icon { width: 15px; height: 15px; }
.pt-sidebar .pt-nav-group { margin-top: var(--pt-space-4); display: grid; gap: 2px; }
.pt-sidebar .pt-nav-label { padding: 0 var(--pt-space-2); margin-bottom: var(--pt-space-1); font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); color: var(--pt-text-muted); font-weight: var(--pt-weight-medium); }
.pt-sidebar .pt-nav-bottom { margin-top: auto; padding-top: var(--pt-space-4); }
.pt-nav-item {
  display: flex;
  align-items: center;
  gap: var(--pt-space-2);
  min-height: 34px;
  padding: 0 var(--pt-space-2);
  border-radius: var(--pt-radius-sm);
  color: var(--pt-text);
  font-weight: var(--pt-weight-medium);
  font-size: var(--pt-text-sm);
  line-height: var(--pt-line-sm);
  transition: background-color var(--pt-dur-fast) var(--pt-ease), color var(--pt-dur-fast) var(--pt-ease);
}
.pt-nav-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-nav-item svg, .pt-nav-item .pt-icon { width: 18px; height: 18px; color: var(--pt-text-muted); flex: none; }
.pt-nav-item:hover { background: var(--pt-surface-2); color: var(--pt-text); }
.pt-nav-item:active { background: var(--pt-border); }
.pt-nav-item[aria-current="page"], .pt-nav-item[aria-current="true"] { background: var(--pt-accent-soft); color: var(--pt-accent); }
.pt-nav-item[aria-current="page"] svg, .pt-nav-item[aria-current="page"] .pt-icon { color: var(--pt-accent); }
.pt-nav-item kbd { margin-left: auto; opacity: 0; transition: opacity var(--pt-dur-fast) var(--pt-ease); }
.pt-sidebar:hover .pt-nav-item kbd, .pt-nav-item:focus-visible kbd { opacity: 1; }
.pt-nav-item.pt-nav-sub { padding-left: calc(var(--pt-space-2) + 26px); font-weight: var(--pt-weight-body); }

@media (min-width: 768px) {
  pt-shell {
    grid-template-columns: var(--pt-sidebar) minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "sidebar topbar dock" "sidebar main main";
  }
  /* Guest pages render no sidebar: no reserved column, content centred at --pt-content-max. */
  pt-shell[role="guest"], pt-shell:not(:has(.pt-sidebar)) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "topbar dock" "main main";
  }
  pt-shell[role="guest"] .pt-topbar, pt-shell:not(:has(.pt-sidebar)) .pt-topbar { padding-left: var(--pt-screen-margin); }
  .pt-sidebar { display: flex; }
  .pt-tabbar { display: none; }
  .pt-topbar { padding: 0 var(--pt-space-4); gap: var(--pt-space-3); }
  .pt-back { order: -1; margin-right: calc(-1 * var(--pt-space-2)); width: 36px; height: 36px; }
  .pt-search-btn { display: inline-flex; }
  .pt-topbar .pt-title { padding-left: 0; }
  .pt-dock {
    position: sticky;
    top: var(--pt-strip-h);
    bottom: auto;
    min-height: var(--pt-topbar);
    padding: 0 var(--pt-space-4) 0 0;
    border-top: 0;
    border-bottom: 1px solid var(--pt-border);
  }
  .pt-dock pt-primary-action > .pt-btn { flex: none; min-height: 34px; font-size: var(--pt-text-md); padding: 0 var(--pt-space-4); }
  .pt-dock .pt-primary-stack { flex-direction: row; gap: var(--pt-space-2); }
  .pt-dock .pt-countdown { display: inline; }
  .pt-main { padding-top: var(--pt-space-5); }
}

/* Compact (call screens): no sidebar, no tab bar, full-bleed main. */
pt-shell[compact] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "topbar" "main" "dock";
  grid-template-rows: auto minmax(0, 1fr) auto;
}
pt-shell[compact] .pt-sidebar, pt-shell[compact] .pt-tabbar, pt-shell[compact] .pt-search-btn { display: none; }
pt-shell[compact] .pt-main { max-width: none; padding: 0; }
@media (min-width: 768px) {
  pt-shell[compact] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "topbar dock" "main main"; }
  pt-shell[compact] .pt-dock { padding-right: var(--pt-space-4); }
}

/* ---------------------------------------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------------------------------------- */
.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pt-space-2);
  min-height: var(--pt-tap);
  padding: 0 var(--pt-space-4);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  background: var(--pt-surface);
  color: var(--pt-text);
  font-weight: var(--pt-weight-medium);
  font-size: var(--pt-text-md);
  line-height: var(--pt-line-md);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--pt-dur-fast) var(--pt-ease), border-color var(--pt-dur-fast) var(--pt-ease), transform var(--pt-dur-fast) var(--pt-ease), opacity var(--pt-dur-fast) var(--pt-ease), color var(--pt-dur-fast) var(--pt-ease);
}
.pt-btn:hover { background: var(--pt-surface-2); color: var(--pt-text); border-color: var(--pt-text-muted); }
.pt-btn:active { transform: translateY(1px); }
.pt-btn:disabled, .pt-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none; }
.pt-btn svg, .pt-btn .pt-icon { width: 18px; height: 18px; flex: none; }
.pt-btn-primary { background: var(--pt-accent); border-color: var(--pt-accent); color: var(--pt-on-accent); }
.pt-btn-primary:hover { background: var(--pt-accent-hover); border-color: var(--pt-accent-hover); color: var(--pt-on-accent); }
.pt-btn-quiet { background: transparent; border-color: transparent; color: var(--pt-accent); }
.pt-btn-quiet:hover { background: var(--pt-accent-soft); border-color: transparent; color: var(--pt-accent-hover); }
.pt-btn-quiet.pt-btn-muted { color: var(--pt-text-muted); }
.pt-btn-quiet.pt-btn-muted:hover { background: var(--pt-surface-2); color: var(--pt-text); }
.pt-btn-danger { background: var(--pt-danger); border-color: var(--pt-danger); color: var(--pt-on-danger); }
.pt-btn-danger:hover { background: var(--pt-danger); border-color: var(--pt-danger); filter: brightness(.94); color: var(--pt-on-danger); }
.pt-btn-danger-quiet { background: transparent; border-color: transparent; color: var(--pt-danger); }
.pt-btn-danger-quiet:hover { background: var(--pt-danger-soft); border-color: transparent; color: var(--pt-danger); }
.pt-btn-sm { min-height: 32px; padding: 0 var(--pt-space-3); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); gap: var(--pt-space-1); }
.pt-btn-sm svg, .pt-btn-sm .pt-icon { width: 16px; height: 16px; }
.pt-btn-lg { min-height: 52px; padding: 0 var(--pt-space-5); font-size: var(--pt-text-lg); }
.pt-btn-block { width: 100%; }
.pt-btn-icon { width: var(--pt-tap); padding: 0; }
.pt-btn-icon.pt-btn-sm { width: 32px; min-height: 32px; }
.pt-btn-pill { border-radius: var(--pt-radius-pill); }
.pt-btn-group { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); align-items: center; }
.pt-btn-group.pt-end { justify-content: flex-end; }
.pt-link-btn { color: var(--pt-accent); font-weight: var(--pt-weight-medium); font-size: var(--pt-text-sm); min-height: 32px; display: inline-flex; align-items: center; gap: var(--pt-space-1); }
.pt-link-btn:hover { color: var(--pt-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
  .pt-btn { min-height: 36px; }
  .pt-btn-icon { width: 36px; }
}

/* ---------------------------------------------------------------------------------------------
   5. Cards, banners, tiles (docs/UI.md §2: 1 px borders, no shadows on resting surfaces)
   ------------------------------------------------------------------------------------------- */
.pt-card {
  display: block;
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md);
  padding: var(--pt-space-4);
  color: inherit;
}
.pt-card-flush { padding: 0; overflow: hidden; }
.pt-card-hero { padding: var(--pt-space-4); display: grid; gap: var(--pt-space-3); background: var(--pt-hero-tint); }
.pt-card-title { font-size: var(--pt-text-lg); line-height: var(--pt-line-lg); font-weight: var(--pt-weight-title); }
.pt-card-sub { color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-card-actions { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); margin-top: var(--pt-space-2); }
a.pt-card { transition: border-color var(--pt-dur-fast) var(--pt-ease), background-color var(--pt-dur-fast) var(--pt-ease); }
a.pt-card:hover { border-color: var(--pt-text-muted); color: inherit; }
.pt-card[aria-current="true"], .pt-card.pt-selected { border-color: var(--pt-accent); background: var(--pt-accent-soft); }
.pt-card-grid { display: grid; gap: var(--pt-space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pt-card-inset { background: var(--pt-surface-2); border-radius: var(--pt-radius-sm); padding: var(--pt-space-3); }
.pt-banner {
  display: flex;
  align-items: center;
  gap: var(--pt-space-3);
  padding: var(--pt-space-3) var(--pt-space-4);
  border-radius: var(--pt-radius-md);
  background: var(--pt-accent-soft);
  color: var(--pt-text);
  border: 1px solid var(--pt-border);
  font-size: var(--pt-text-sm);
  line-height: var(--pt-line-sm);
}
.pt-banner .pt-icon { color: var(--pt-accent); }
.pt-banner-warning { background: var(--pt-warning-soft); }
.pt-banner-warning .pt-icon { color: var(--pt-warning); }
.pt-banner-danger { background: var(--pt-danger-soft); }
.pt-banner-danger .pt-icon { color: var(--pt-danger); }
.pt-banner-success { background: var(--pt-success-soft); }
.pt-banner-success .pt-icon { color: var(--pt-success); }
.pt-banner .pt-btn { margin-left: auto; flex: none; }
.pt-vitals { display: flex; flex-wrap: wrap; gap: var(--pt-space-3) var(--pt-space-5); }
.pt-vital { display: grid; gap: 2px; }
.pt-vital dt { font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); color: var(--pt-text-muted); font-weight: var(--pt-weight-medium); }
.pt-vital dd { margin: 0; font-weight: var(--pt-weight-medium); font-variant-numeric: tabular-nums; }
/* Icon tile: the 44 px leading square used by rows, section cards and empty states. */
.pt-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--pt-tile);
  height: var(--pt-tile);
  border-radius: var(--pt-radius-md);
  background: var(--pt-surface-2);
  color: var(--pt-text-muted);
}
.pt-tile-sm { width: 32px; height: 32px; border-radius: var(--pt-radius-sm); }
.pt-tile-accent { background: var(--pt-accent-soft); color: var(--pt-accent); }
.pt-tile-neutral { background: var(--pt-surface-2); color: var(--pt-text-muted); }
.pt-tile-success { background: var(--pt-success-soft); color: var(--pt-success); }
.pt-tile-warning { background: var(--pt-warning-soft); color: var(--pt-warning); }
.pt-tile-danger { background: var(--pt-danger-soft); color: var(--pt-danger); }

/* ---------------------------------------------------------------------------------------------
   5b. Hero (docs/UI.md §4) — appointment | dog | provider | person
   ------------------------------------------------------------------------------------------- */
section.pt-hero, .pt-hero-card {
  display: grid;
  gap: var(--pt-space-3);
  min-width: 0;
  padding: var(--pt-space-4);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md);
  background: var(--pt-surface);
}
.pt-hero-appointment { background: var(--pt-hero-tint); }
.pt-hero-head { display: flex; align-items: center; gap: var(--pt-space-3); min-width: 0; color: inherit; }
a.pt-hero-head:hover { color: inherit; }
a.pt-hero-head:hover .pt-hero-title { color: var(--pt-accent); }
.pt-hero-media { position: relative; flex: none; }
.pt-hero-media .pt-avatar-xl { --pt-avatar-size: 72px; }
.pt-hero-overlap { position: absolute; right: -4px; bottom: -4px; border-radius: var(--pt-radius-pill); box-shadow: 0 0 0 2px var(--pt-surface); }
.pt-hero-overlap .pt-avatar { --pt-avatar-size: 28px; }
.pt-hero-body { flex: 1; min-width: 0; display: grid; gap: 2px; align-content: center; }
.pt-hero-title { font-size: var(--pt-text-lg); line-height: var(--pt-line-lg); font-weight: var(--pt-weight-title); letter-spacing: -.01em; overflow-wrap: anywhere; transition: color var(--pt-dur-fast) var(--pt-ease); }
.pt-hero-dog .pt-hero-title, .pt-hero-provider .pt-hero-title, .pt-hero-person .pt-hero-title { font-size: var(--pt-text-2xl); line-height: var(--pt-line-2xl); letter-spacing: -.015em; }
.pt-hero-sub { color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-space-1) var(--pt-space-2); margin-top: var(--pt-space-1); }
.pt-hero-stat { font-size: var(--pt-text-3xl); line-height: var(--pt-line-3xl); font-weight: var(--pt-weight-title); font-variant-numeric: tabular-nums; letter-spacing: -.02em; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pt-space-2) var(--pt-space-3); }
.pt-hero-stat .pt-chip, .pt-hero-stat .pt-pill { align-self: center; }
/* The `Sat 12 · 10:00 AM` line never breaks inside itself; the chip beside it may wrap under. */
.pt-appt-when { white-space: nowrap; }
.pt-hero-stat small, .pt-hero-stat .pt-hero-stat-sub { font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); font-weight: var(--pt-weight-medium); color: var(--pt-text-muted); letter-spacing: 0; }
.pt-hero-actions { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); }
section.pt-hero > pt-subnav, section.pt-hero > .pt-subnav { margin: 0 calc(-1 * var(--pt-space-4)) calc(-1 * var(--pt-space-4)); padding-inline: var(--pt-space-3); border-bottom: 0; border-top: 1px solid var(--pt-border); }
/* `Hero aside`: a glance column (next visit, two KPIs) that fills the hero's right side at ≥ 768 px; phones hide it —
   the page's own glance section carries the same facts with room. */
.pt-hero-aside { display: none; gap: var(--pt-space-3); justify-items: end; align-content: center; text-align: right; }
@media (min-width: 768px) {
  section.pt-hero, .pt-hero-card { padding: var(--pt-space-5); gap: var(--pt-space-4); }
  .pt-hero-aside { display: grid; }
  section.pt-hero:has(> .pt-hero-aside) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head aside" "stat aside" "actions aside" "nav nav"; align-items: center; }
  section.pt-hero:has(> .pt-hero-aside) > .pt-hero-head { grid-area: head; }
  section.pt-hero:has(> .pt-hero-aside) > .pt-hero-stat { grid-area: stat; }
  section.pt-hero:has(> .pt-hero-aside) > .pt-hero-actions { grid-area: actions; }
  section.pt-hero:has(> .pt-hero-aside) > .pt-hero-aside { grid-area: aside; }
  section.pt-hero:has(> .pt-hero-aside) > pt-subnav, section.pt-hero:has(> .pt-hero-aside) > .pt-subnav { grid-area: nav; }
  .pt-hero-media .pt-avatar-xl { --pt-avatar-size: 88px; }
  .pt-hero-overlap .pt-avatar { --pt-avatar-size: 32px; }
  .pt-hero-appointment .pt-hero-title { font-size: var(--pt-text-xl); line-height: var(--pt-line-xl); }
  section.pt-hero > pt-subnav, section.pt-hero > .pt-subnav { margin: 0 calc(-1 * var(--pt-space-5)) calc(-1 * var(--pt-space-5)); padding-inline: var(--pt-space-4); }
}
/* Legacy head used by the first pass (avatar + name); kept so old pages still line up until areas adopt Hero. */
.pt-hero-head:not(section.pt-hero > .pt-hero-head) { margin-bottom: var(--pt-space-4); }

/* ---------------------------------------------------------------------------------------------
   5c. Chips, meta lines, KPIs, sparklines (docs/UI.md primitives)
   ------------------------------------------------------------------------------------------- */
/* Static chip (span): 24 px, 12 px medium, soft fill. Interactive chips (button/a/label) are filter chips: 32 px. */
.pt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pt-space-1);
  height: 24px;
  padding: 0 var(--pt-space-2);
  border: 1px solid transparent;
  border-radius: var(--pt-radius-pill);
  background: var(--pt-surface-2);
  color: var(--pt-text-muted);
  font-size: var(--pt-text-xs);
  line-height: var(--pt-line-xs);
  font-weight: var(--pt-weight-medium);
  white-space: nowrap;
  max-width: 100%;
}
.pt-chip > span { overflow: hidden; text-overflow: ellipsis; }
.pt-chip .pt-icon { width: 14px; height: 14px; }
.pt-chip-neutral { background: var(--pt-surface-2); color: var(--pt-text-muted); }
.pt-chip-accent { background: var(--pt-accent-soft); color: var(--pt-accent); }
.pt-chip-success { background: var(--pt-success-soft); color: var(--pt-success); }
.pt-chip-warning { background: var(--pt-warning-soft); color: var(--pt-warning); }
.pt-chip-danger { background: var(--pt-danger-soft); color: var(--pt-danger); }
a.pt-chip.pt-chip-sm:hover { filter: brightness(.96); }
/* Filter chips (interactive). */
button.pt-chip, a.pt-chip:not(.pt-chip-sm), label.pt-chip {
  min-height: 32px;
  height: auto;
  padding: 0 var(--pt-space-3);
  border-color: var(--pt-border);
  background: var(--pt-surface);
  color: var(--pt-text);
  font-size: var(--pt-text-sm);
  line-height: var(--pt-line-sm);
  cursor: pointer;
  position: relative;
  transition: background-color var(--pt-dur-fast) var(--pt-ease), border-color var(--pt-dur-fast) var(--pt-ease), color var(--pt-dur-fast) var(--pt-ease);
}
button.pt-chip:hover, a.pt-chip:not(.pt-chip-sm):hover, label.pt-chip:hover { background: var(--pt-surface-2); color: var(--pt-text); border-color: var(--pt-text-muted); }
.pt-chip[aria-pressed="true"], .pt-chip[aria-current="true"], .pt-chip[aria-selected="true"], .pt-chip.pt-on, .pt-chip:has(input:checked) { background: var(--pt-accent-soft) !important; border-color: var(--pt-accent) !important; color: var(--pt-accent) !important; }
.pt-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pt-chip:has(input:focus-visible) { box-shadow: var(--pt-focus); }
.pt-chip:focus-visible { box-shadow: var(--pt-focus); border-radius: var(--pt-radius-pill); }
.pt-chip .pt-chip-x { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: var(--pt-radius-pill); margin-right: -4px; }
.pt-chip .pt-chip-x:hover { background: var(--pt-border); }
.pt-chips { display: flex; gap: var(--pt-space-2); flex-wrap: wrap; align-items: center; }
.pt-chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pt-screen-margin)); padding-inline: var(--pt-screen-margin); padding-bottom: 2px; }
.pt-chips-scroll::-webkit-scrollbar { display: none; }
/* Non-scrolling wrapper for a `.pt-chips-scroll` rail: the right-edge fade lives here (a mask on the scroller would move with its content). */
.pt-chips-scroll-wrap { min-width: 0; }
@media (max-width: 767.98px) {
  .pt-chips-scroll-wrap { margin-inline: calc(-1 * var(--pt-screen-margin)); -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); }
  .pt-chips-scroll-wrap > .pt-chips-scroll { margin-inline: 0; }
}

/* Dot-separated meta line. Items are flex items, so a wrap happens between items; the dot leads every item after the
   first, so a wrapped line never ends in a hanging "·" (heroes, banners, cards). */
.pt-metaline { display: inline-flex; flex-wrap: wrap; align-items: center; min-width: 0; color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-metaline-text { color: var(--pt-text); }
.pt-metaline-item { display: inline-flex; align-items: center; gap: var(--pt-space-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-metaline-item:not(:first-child)::before { content: "·"; margin: 0 6px; color: var(--pt-text-muted); opacity: .8; }
.pt-metaline .pt-icon { width: 14px; height: 14px; }
/* Prose variant — a MetaLine inside a row subtitle (or `MetaLine prose`): plain inline text that wraps and clamps with
   the rest of the subtitle instead of stacking flex lines the two-line clamp would clip. A zero-width space before
   each dot is the break opportunity, so the dot still travels with the item that follows it. */
.pt-row-sub > .pt-metaline, .pt-metaline-prose { display: inline; font-size: inherit; line-height: inherit; color: inherit; }
.pt-row-sub > .pt-metaline > .pt-metaline-item, .pt-metaline-prose > .pt-metaline-item { display: inline; white-space: normal; }
.pt-row-sub > .pt-metaline > .pt-metaline-item:not(:first-child)::before, .pt-metaline-prose > .pt-metaline-item:not(:first-child)::before { content: "\200B·"; }
.pt-row-sub > .pt-metaline .pt-icon, .pt-metaline-prose .pt-icon { vertical-align: -2px; margin-right: var(--pt-space-1); }

/* KPI: value + label for counts. */
.pt-kpis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-space-2) var(--pt-space-5); }
.pt-kpi { display: inline-flex; align-items: baseline; gap: 5px; color: var(--pt-text); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); white-space: nowrap; }
.pt-kpi-value { font-weight: var(--pt-weight-title); font-variant-numeric: tabular-nums; font-size: var(--pt-text-lg); line-height: var(--pt-line-lg); }
.pt-kpi-label { color: var(--pt-text-muted); }
.pt-kpi-icon { align-self: center; color: var(--pt-text-muted); }
.pt-kpi-accent .pt-kpi-value, .pt-kpi-accent .pt-kpi-icon { color: var(--pt-accent); }
.pt-kpi-success .pt-kpi-value, .pt-kpi-success .pt-kpi-icon { color: var(--pt-success); }
.pt-kpi-warning .pt-kpi-value, .pt-kpi-warning .pt-kpi-icon { color: var(--pt-warning); }
.pt-kpi-danger .pt-kpi-value, .pt-kpi-danger .pt-kpi-icon { color: var(--pt-danger); }
a.pt-kpi:hover .pt-kpi-label { color: var(--pt-text); }

/* Sparkline. */
.pt-sparkline { flex: none; vertical-align: middle; color: var(--pt-accent); overflow: visible; }
.pt-sparkline-accent { color: var(--pt-accent); }
.pt-sparkline-success { color: var(--pt-success); }
.pt-sparkline-warning { color: var(--pt-warning); }
.pt-sparkline-danger { color: var(--pt-danger); }
.pt-sparkline-muted { color: var(--pt-text-muted); }

/* ---------------------------------------------------------------------------------------------
   5d. Action row (docs/UI.md §5)
   ------------------------------------------------------------------------------------------- */
/* Phone: up to four 64–96 px tiles per line, clustered at the start (two actions never stretch across the card);
   five or more wrap onto a second line with the destructive ones last. Never scrolls sideways. */
.pt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--pt-space-1);
  min-width: 0;
}
.pt-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pt-space-1);
  flex: 1 1 calc(25% - var(--pt-space-1));
  min-width: 64px;
  max-width: 96px;
  min-height: 60px;
  padding: var(--pt-space-2) var(--pt-space-1);
  border-radius: var(--pt-radius-md);
  color: var(--pt-text);
  font-size: var(--pt-text-xs);
  line-height: var(--pt-line-xs);
  font-weight: var(--pt-weight-medium);
  text-align: center;
  white-space: normal;
  transition: background-color var(--pt-dur-fast) var(--pt-ease), color var(--pt-dur-fast) var(--pt-ease);
}
.pt-action .pt-icon { color: var(--pt-accent); }
.pt-action:hover { background: var(--pt-surface-2); color: var(--pt-text); }
.pt-action:active { background: var(--pt-border); }
.pt-action[aria-disabled="true"], .pt-action:disabled { opacity: .5; pointer-events: none; }
.pt-action-danger { color: var(--pt-danger); }
.pt-action-danger .pt-icon { color: var(--pt-danger); }
.pt-action-danger:hover { background: var(--pt-danger-soft); color: var(--pt-danger); }
.pt-action-current { background: var(--pt-accent-soft); color: var(--pt-accent); }
/* Labels never ellipsise (docs/UI.md checklist): on phone they wrap to two centred 12 px lines. */
.pt-action-label { max-width: 100%; line-height: var(--pt-line-2xs); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* Five or six actions on a phone: three per row (two balanced rows, the destructive pair last) instead of 4 + 2. */
@media (max-width: 767.98px) {
  .pt-actions:has(> .pt-action:nth-child(5)) > .pt-action { flex-basis: calc(33.333% - var(--pt-space-1)); max-width: none; }
}
@media (min-width: 768px) {
  .pt-action { flex: none; max-width: none; flex-direction: row; min-height: 36px; padding: 0 var(--pt-space-3); border-radius: var(--pt-radius-sm); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); gap: var(--pt-space-2); white-space: nowrap; }
  .pt-action-label { display: inline; line-height: inherit; overflow: visible; }
  .pt-action .pt-icon { width: 18px; height: 18px; }
  .pt-action-danger { margin-left: auto; }
  .pt-action-danger + .pt-action-danger { margin-left: 0; }
}

/* ---------------------------------------------------------------------------------------------
   5e. Section cards (docs/UI.md §5) — Notes, Files, Recording, Payment
   ------------------------------------------------------------------------------------------- */
.pt-section-cards { display: grid; background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-md); overflow: hidden; }
.pt-section-cards > .pt-section-card { border: 0; border-radius: 0; }
.pt-section-cards > .pt-section-card + .pt-section-card { border-top: 1px solid var(--pt-border); }
.pt-section-card, .pt-section-card-head {
  display: flex;
  align-items: center;
  gap: var(--pt-space-3);
  min-height: var(--pt-row);
  padding: var(--pt-space-2) var(--pt-space-3) var(--pt-space-2) var(--pt-space-3);
  color: inherit;
}
.pt-section-card { background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-md); transition: background-color var(--pt-dur-fast) var(--pt-ease); }
div.pt-section-card { display: block; padding: 0; }
div.pt-section-card > .pt-section-card-head { min-height: var(--pt-row); }
.pt-section-card-content { padding: 0 var(--pt-space-4) var(--pt-space-4); }
a.pt-section-card:hover { background: var(--pt-surface-2); color: inherit; }
a.pt-section-card:active { background: var(--pt-border); }
.pt-section-card-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pt-section-card-title { font-weight: var(--pt-weight-medium); font-size: var(--pt-text-md); line-height: var(--pt-line-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Summaries carry meaning: clamp to two lines instead of cutting mid-sentence (docs/UI.md checklist). */
.pt-section-card-meta { color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: calc(2 * var(--pt-line-sm)); overflow: hidden; overflow-wrap: anywhere; }
.pt-section-card-trail { flex: none; display: inline-flex; align-items: center; gap: var(--pt-space-2); color: var(--pt-text-muted); font-size: var(--pt-text-sm); }
.pt-section-card-chevron { color: var(--pt-text-muted); }

/* ---------------------------------------------------------------------------------------------
   6. Lists and rows (docs/UI.md §7)
   ------------------------------------------------------------------------------------------- */
pt-list, .pt-list {
  display: block;
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md);
  overflow: hidden;
}
pt-list > pt-list-row + pt-list-row, .pt-list > .pt-row + .pt-row, .pt-list > pt-list-row + pt-list-row { border-top: 1px solid var(--pt-border); }
pt-list > pt-list-row:not(:first-child), .pt-list > pt-list-row:not(:first-child) { border-top: 1px solid var(--pt-border); }
pt-list > .pt-list-group-title + pt-list-row, .pt-list > .pt-list-group-title + pt-list-row { border-top: 0; }
.pt-list-group-title {
  display: flex;
  align-items: center;
  gap: var(--pt-space-2);
  min-height: 28px;
  padding: var(--pt-space-2) var(--pt-space-4) var(--pt-space-1);
  background: var(--pt-surface-2);
  border-top: 1px solid var(--pt-border);
  border-bottom: 1px solid var(--pt-border);
  color: var(--pt-text-muted);
  font-size: var(--pt-text-xs);
  line-height: var(--pt-line-xs);
  font-weight: var(--pt-weight-medium);
}
.pt-list-group-title:first-child { border-top: 0; }
.pt-list-group-count { color: var(--pt-text-muted); font-weight: var(--pt-weight-body); font-variant-numeric: tabular-nums; }
/* Right-aligned slot on a group label: a quiet link ("All past", "Open week"). */
.pt-list-group-action { margin-left: auto; display: inline-flex; align-items: center; gap: var(--pt-space-1); color: var(--pt-accent); font-weight: var(--pt-weight-medium); font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); min-height: 28px; }
.pt-list-group-action:hover { color: var(--pt-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.pt-row {
  display: flex;
  align-items: center;
  gap: var(--pt-space-3);
  min-height: var(--pt-row);
  padding: 6px var(--pt-space-3) 6px var(--pt-space-3);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--pt-dur-fast) var(--pt-ease);
}
a.pt-row:hover, button.pt-row:hover { background: var(--pt-surface-2); color: inherit; }
a.pt-row:active, button.pt-row:active { background: var(--pt-border); }
button.pt-row { width: 100%; text-align: left; }
.pt-row-lead { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--pt-tile); height: var(--pt-tile); }
.pt-row-lead .pt-avatar { --pt-avatar-size: var(--pt-tile); }
.pt-row-lead > .pt-icon { color: var(--pt-text-muted); }
.pt-row-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pt-row-title { font-weight: var(--pt-weight-medium); font-size: var(--pt-text-md); line-height: var(--pt-line-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: var(--pt-space-2); }
.pt-row-title > * { min-width: 0; }
/* Subtitles clamp to two lines (a one-line subtitle keeps the 56 px row; a long excerpt never ends mid-word). */
.pt-row-sub { color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: calc(2 * var(--pt-line-sm)); overflow: hidden; overflow-wrap: anywhere; }
/* Opt-out for a subtitle that is deliberately several lines (a comment body, two stacked meta lines): the row grows
   with its content — never a clamped box with visible overflow. `ListRow wrap` sets it. */
.pt-row-sub.pt-row-sub-wrap { display: block; -webkit-line-clamp: unset; max-height: none; overflow: visible; white-space: normal; }
.pt-row-trail { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); font-variant-numeric: tabular-nums; text-align: right; }
.pt-row-trail > form { display: contents; }
.pt-row-meta { color: var(--pt-text-muted); font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-row-chevron { flex: none; color: var(--pt-text-muted); width: 16px; height: 16px; margin-left: calc(-1 * var(--pt-space-1)); opacity: .8; }
pt-list-row[selected] > .pt-row, .pt-row[aria-selected="true"], .pt-row.pt-selected { background: var(--pt-selected); box-shadow: inset 2px 0 0 var(--pt-accent); }
pt-list-row[selected] > .pt-row:focus-visible, .pt-row:focus-visible { box-shadow: inset var(--pt-focus); border-radius: 0; }
/* The selected tint is the accent-soft colour, so an accent chip on a selected row sits on the surface instead. */
pt-list-row[selected] > .pt-row .pt-chip-accent, .pt-row[aria-selected="true"] .pt-chip-accent, .pt-row.pt-selected .pt-chip-accent { background: var(--pt-surface); }
.pt-row-dot { width: 8px; height: 8px; border-radius: var(--pt-radius-pill); background: var(--pt-accent); flex: none; }
/* Row-level action (`RowAction`): a 32 px quiet icon button whose ::after extends the tap area to 44 px. */
.pt-row-menu { position: relative; margin-left: var(--pt-space-1); }
.pt-row-menu::after { content: ""; position: absolute; inset: -6px; }
.pt-row-menu-form { display: inline-flex; flex: none; }
/* Compact row status (`RowStatus`): dot + 12 px text for a list row's trail column when a full pill is too loud. */
.pt-row-status { display: inline-flex; align-items: center; gap: 6px; color: var(--pt-text-muted); font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); font-weight: var(--pt-weight-medium); white-space: nowrap; }
.pt-row-status-dot { width: 8px; height: 8px; border-radius: var(--pt-radius-pill); background: var(--pt-text-muted); flex: none; }
.pt-row-status-accent .pt-row-status-dot { background: var(--pt-accent); }
.pt-row-status-success .pt-row-status-dot { background: var(--pt-success); }
.pt-row-status-warning { color: var(--pt-warning); }
.pt-row-status-warning .pt-row-status-dot { background: var(--pt-warning); }
.pt-row-status-danger { color: var(--pt-danger); }
.pt-row-status-danger .pt-row-status-dot { background: var(--pt-danger); }
/* 1–9 row shortcut hints (`<kbd class="pt-row-index">`): desktop only, revealed while the list is hovered or focused —
   the same rule as the sidebar's kbd hints — otherwise they read as count badges. */
.pt-row-index { flex: none; font-size: var(--pt-text-2xs); padding: 0 4px; opacity: 0; transition: opacity var(--pt-dur-fast) var(--pt-ease); }
pt-list:hover .pt-row-index, pt-list:focus-within .pt-row-index { opacity: 1; }
@media (max-width: 767.98px) { .pt-row-index { display: none; } }
.pt-list-filter { margin-bottom: var(--pt-space-3); }
@media (min-width: 768px) {
  .pt-row-chevron { display: none; }
  .pt-row { padding-inline: var(--pt-space-4); }
}

/* Timeline (docs/UI.md §6): icon rail on the left, two-column body so text never wraps into a narrow column. */
.pt-timeline { display: grid; gap: 0; position: relative; }
.pt-timeline-group { display: flex; align-items: center; gap: var(--pt-space-2); padding: var(--pt-space-3) 0 var(--pt-space-1) 0; }
.pt-timeline-group .pt-list-group-count { font-size: var(--pt-text-2xs); line-height: var(--pt-line-2xs); }
.pt-timeline-group:first-child { padding-top: 0; }
.pt-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--pt-space-3);
  align-items: start;
  padding: var(--pt-space-2) 0;
}
.pt-timeline-item::after { content: ""; position: absolute; left: 13px; top: 36px; bottom: -8px; width: 2px; background: var(--pt-border); }
.pt-timeline-item:last-child::after, .pt-timeline-item:has(+ .pt-timeline-group)::after { display: none; }
.pt-timeline-dot { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--pt-radius-pill); background: var(--pt-surface-2); color: var(--pt-text-muted); box-shadow: 0 0 0 3px var(--pt-bg); }
.pt-timeline-dot.pt-tile-accent { background: var(--pt-accent-soft); color: var(--pt-accent); }
.pt-timeline-dot.pt-tile-success { background: var(--pt-success-soft); color: var(--pt-success); }
.pt-timeline-dot.pt-tile-warning { background: var(--pt-warning-soft); color: var(--pt-warning); }
.pt-timeline-dot.pt-tile-danger { background: var(--pt-danger-soft); color: var(--pt-danger); }
.pt-timeline-appointment .pt-timeline-dot, .pt-timeline-visit .pt-timeline-dot { background: var(--pt-accent-soft); color: var(--pt-accent); }
.pt-timeline-note .pt-timeline-dot { background: var(--pt-success-soft); color: var(--pt-success); }
.pt-timeline-outcome .pt-timeline-dot, .pt-timeline-check-in .pt-timeline-dot { background: var(--pt-warning-soft); color: var(--pt-warning); }
.pt-timeline-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pt-space-3); align-items: start; min-width: 0; min-height: 28px; padding: 2px 0; color: inherit; border-radius: var(--pt-radius-sm); }
a.pt-timeline-body:hover { color: inherit; }
a.pt-timeline-body:hover .pt-timeline-title { color: var(--pt-accent); }
.pt-timeline-main { display: grid; gap: 1px; min-width: 0; }
.pt-timeline-title { font-weight: var(--pt-weight-medium); font-size: var(--pt-text-md); line-height: var(--pt-line-md); overflow-wrap: anywhere; transition: color var(--pt-dur-fast) var(--pt-ease); }
.pt-timeline-sub { color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: calc(2 * var(--pt-line-sm)); overflow: hidden; }
.pt-timeline-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.pt-timeline-date { color: var(--pt-text-muted); font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-card > .pt-timeline .pt-timeline-dot { box-shadow: 0 0 0 3px var(--pt-surface); }

/* ---------------------------------------------------------------------------------------------
   7. Pills (status), badges — 11 px, sentence case, dot stays
   ------------------------------------------------------------------------------------------- */
.pt-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 var(--pt-space-2) 0 7px;
  border-radius: var(--pt-radius-pill);
  background: var(--pt-surface-2);
  color: var(--pt-text-muted);
  font-size: var(--pt-text-2xs);
  line-height: var(--pt-line-2xs);
  font-weight: var(--pt-weight-medium);
  letter-spacing: .01em;
  white-space: nowrap;
  vertical-align: middle;
}
.pt-pill::before { content: ""; width: 6px; height: 6px; border-radius: var(--pt-radius-pill); background: currentColor; flex: none; }
.pt-pill-plain { padding-left: var(--pt-space-2); }
.pt-pill-plain::before { display: none; }
.pt-pill-neutral { background: var(--pt-surface-2); color: var(--pt-text-muted); }
.pt-pill-accent { background: var(--pt-accent-soft); color: var(--pt-accent); }
.pt-pill-success { background: var(--pt-success-soft); color: var(--pt-success); }
.pt-pill-warning { background: var(--pt-warning-soft); color: var(--pt-warning); }
.pt-pill-danger { background: var(--pt-danger-soft); color: var(--pt-danger); }
.pt-pill-recording::before { animation: pt-blink 1.2s steps(2, start) infinite; }
@keyframes pt-blink { to { opacity: .2; } }
.pt-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pt-radius-pill); background: var(--pt-accent); color: var(--pt-on-accent); font-size: var(--pt-text-2xs); font-weight: var(--pt-weight-title); line-height: 1; }

/* ---------------------------------------------------------------------------------------------
   8. Forms and fields
   ------------------------------------------------------------------------------------------- */
.pt-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pt-space-4); }
.pt-form-row { display: grid; gap: var(--pt-space-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pt-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--pt-space-3); }
.pt-fieldset > legend { padding: 0; margin-bottom: var(--pt-space-2); font-weight: var(--pt-weight-medium); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); color: var(--pt-text-muted); }
.pt-field, pt-field { display: grid; gap: var(--pt-space-1); }
.pt-label { font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); font-weight: var(--pt-weight-medium); color: var(--pt-text); }
.pt-label .pt-optional { color: var(--pt-text-muted); font-weight: var(--pt-weight-body); }
.pt-input, .pt-select, .pt-textarea {
  width: 100%;
  min-height: var(--pt-tap);
  padding: var(--pt-space-2) var(--pt-space-3);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  background: var(--pt-surface);
  color: var(--pt-text);
  font-size: var(--pt-text-md);
  line-height: var(--pt-line-md);
  transition: border-color var(--pt-dur-fast) var(--pt-ease), box-shadow var(--pt-dur-fast) var(--pt-ease);
  appearance: none;
}
.pt-input::placeholder, .pt-textarea::placeholder { color: var(--pt-text-muted); opacity: .8; }
.pt-input:hover, .pt-select:hover, .pt-textarea:hover { border-color: var(--pt-text-muted); }
.pt-input:focus-visible, .pt-select:focus-visible, .pt-textarea:focus-visible { border-color: var(--pt-accent); box-shadow: var(--pt-focus); }
.pt-input[aria-invalid="true"], .pt-select[aria-invalid="true"], .pt-textarea[aria-invalid="true"], .pt-field.pt-invalid .pt-input, .pt-field.pt-invalid .pt-select, .pt-field.pt-invalid .pt-textarea { border-color: var(--pt-danger); }
.pt-input:disabled, .pt-select:disabled, .pt-textarea:disabled { background: var(--pt-surface-2); color: var(--pt-text-muted); cursor: not-allowed; }
.pt-input[readonly] { background: var(--pt-surface-2); }
.pt-textarea { min-height: 120px; resize: vertical; }
.pt-select {
  padding-right: var(--pt-space-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.pt-input[type="date"], .pt-input[type="time"], .pt-input[type="datetime-local"] { min-width: 0; }
.pt-hint { font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); color: var(--pt-text-muted); }
.pt-error { font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); color: var(--pt-danger); }
.pt-error:empty { display: none; }
/* Required marker (only rendered when a form mixes required and optional fields): quiet, never red. */
.pt-required { color: var(--pt-text-muted); font-weight: var(--pt-weight-body); }
.pt-input-group { display: flex; align-items: stretch; }
.pt-input-group .pt-input { border-radius: var(--pt-radius-sm) 0 0 var(--pt-radius-sm); }
.pt-input-group .pt-btn { border-radius: 0 var(--pt-radius-sm) var(--pt-radius-sm) 0; margin-left: -1px; }
.pt-input-affix { display: inline-flex; align-items: center; padding: 0 var(--pt-space-3); border: 1px solid var(--pt-border); border-left: 0; border-radius: 0 var(--pt-radius-sm) var(--pt-radius-sm) 0; background: var(--pt-surface-2); color: var(--pt-text-muted); font-size: var(--pt-text-sm); }
.pt-check, .pt-radio { display: flex; align-items: center; gap: var(--pt-space-3); min-height: var(--pt-tap); cursor: pointer; }
.pt-check input, .pt-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--pt-accent); flex: none; }
.pt-check-list { display: grid; }
.pt-check-list .pt-check, .pt-check-list .pt-radio { padding: 0 var(--pt-space-1); }
.pt-radio-cards { display: grid; gap: var(--pt-space-2); }
.pt-radio-card { position: relative; display: flex; align-items: center; gap: var(--pt-space-3); padding: var(--pt-space-3) var(--pt-space-4); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-md); background: var(--pt-surface); cursor: pointer; min-height: var(--pt-row); transition: border-color var(--pt-dur-fast) var(--pt-ease), background-color var(--pt-dur-fast) var(--pt-ease); }
.pt-radio-card:hover { border-color: var(--pt-text-muted); }
.pt-radio-card:has(input:checked) { border-color: var(--pt-accent); background: var(--pt-accent-soft); }
.pt-radio-card:has(input:focus-visible) { box-shadow: var(--pt-focus); }
/* The hidden radio covers the whole card so the card itself is the control's hit target (pointer, Playwright, and
   assistive tech all land on the input, not on the text it sits behind); the label wrapper keeps the no-CSS fallback. */
.pt-radio-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pt-switch { position: relative; display: inline-flex; align-items: center; gap: var(--pt-space-3); min-height: var(--pt-tap); cursor: pointer; }
.pt-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pt-switch .pt-switch-track { width: 36px; height: 22px; border-radius: var(--pt-radius-pill); background: var(--pt-border); position: relative; transition: background-color var(--pt-dur-fast) var(--pt-ease); flex: none; }
.pt-switch .pt-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--pt-radius-pill); background: var(--pt-surface); box-shadow: var(--pt-shadow-1); transition: transform var(--pt-dur-fast) var(--pt-ease); }
.pt-switch input:checked + .pt-switch-track { background: var(--pt-accent); }
.pt-switch input:checked + .pt-switch-track::after { transform: translateX(14px); }
.pt-switch input:focus-visible + .pt-switch-track { box-shadow: var(--pt-focus); }
.pt-form-actions { display: flex; flex-wrap: wrap; gap: var(--pt-space-2); justify-content: flex-end; }
.pt-form-error { display: flex; align-items: center; gap: var(--pt-space-2); padding: var(--pt-space-3) var(--pt-space-4); border-radius: var(--pt-radius-sm); background: var(--pt-danger-soft); color: var(--pt-danger); font-size: var(--pt-text-sm); }
.pt-form-error:empty { display: none; }
.pt-danger-zone { border: 1px solid var(--pt-border); border-radius: var(--pt-radius-md); padding: var(--pt-space-4); display: grid; gap: var(--pt-space-3); }
.pt-danger-zone h2 { color: var(--pt-danger); }
.pt-stepper { display: inline-flex; align-items: center; border: 1px solid var(--pt-border); border-radius: var(--pt-radius-sm); overflow: hidden; background: var(--pt-surface); }
.pt-stepper button { width: var(--pt-tap); height: var(--pt-tap); font-size: var(--pt-text-lg); color: var(--pt-text); display: inline-grid; place-items: center; }
.pt-stepper button:hover { background: var(--pt-surface-2); }
.pt-stepper output { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; font-weight: var(--pt-weight-medium); }

/* ---------------------------------------------------------------------------------------------
   9. Segmented controls and scales
   ------------------------------------------------------------------------------------------- */
.pt-segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 2px;
  border-radius: var(--pt-radius-sm);
  background: var(--pt-surface-2);
  border: 1px solid var(--pt-border);
  max-width: 100%;
}
.pt-segmented-block { display: grid; }
.pt-segmented > * {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pt-space-1);
  min-height: 32px;
  padding: 0 var(--pt-space-3);
  border-radius: calc(var(--pt-radius-sm) - 2px);
  color: var(--pt-text-muted);
  font-size: var(--pt-text-sm);
  line-height: var(--pt-line-sm);
  font-weight: var(--pt-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--pt-dur-fast) var(--pt-ease), color var(--pt-dur-fast) var(--pt-ease);
}
.pt-segmented > *:hover { color: var(--pt-text); }
.pt-segmented > [aria-pressed="true"], .pt-segmented > [aria-current], .pt-segmented > [aria-selected="true"], .pt-segmented > :has(input:checked), .pt-segmented > .pt-on { background: var(--pt-surface); color: var(--pt-text); box-shadow: var(--pt-shadow-1); }
.pt-segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pt-segmented > :has(input:focus-visible), .pt-segmented > :focus-visible { box-shadow: var(--pt-focus); z-index: 1; }
.pt-scale { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--pt-space-1); }
.pt-scale > label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: var(--pt-tap); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-sm); background: var(--pt-surface); font-variant-numeric: tabular-nums; font-weight: var(--pt-weight-medium); cursor: pointer; transition: background-color var(--pt-dur-fast) var(--pt-ease), border-color var(--pt-dur-fast) var(--pt-ease); }
.pt-scale > label:hover { border-color: var(--pt-text-muted); }
.pt-scale > label:has(input:checked) { background: var(--pt-accent); border-color: var(--pt-accent); color: var(--pt-on-accent); }
.pt-scale > label:has(input:focus-visible) { box-shadow: var(--pt-focus); }
.pt-scale input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* ---------------------------------------------------------------------------------------------
   10. Skeleton
   ------------------------------------------------------------------------------------------- */
pt-skeleton { display: grid; gap: var(--pt-space-3); }
.pt-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--pt-radius-sm);
  background: var(--pt-surface-2);
  color: transparent;
}
.pt-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--pt-border), transparent);
  animation: pt-shimmer 1.4s var(--pt-ease) infinite;
}
@keyframes pt-shimmer { to { transform: translateX(100%); } }
.pt-skeleton-text { height: 12px; width: 60%; }
.pt-skeleton-text + .pt-skeleton-text { width: 85%; }
.pt-skeleton-row { height: var(--pt-row); border-radius: var(--pt-radius-md); }
.pt-skeleton-card { height: 120px; border-radius: var(--pt-radius-md); }
.pt-skeleton-avatar { width: 40px; height: 40px; border-radius: var(--pt-radius-pill); }
.pt-skeleton-chart { height: 200px; border-radius: var(--pt-radius-md); }
@media (prefers-reduced-motion: reduce) { .pt-skeleton::after { animation: none; } }

/* ---------------------------------------------------------------------------------------------
   11. Empty state — icon tile, teaching copy, CTA; sits inside the layout, tighter than before
   ------------------------------------------------------------------------------------------- */
.pt-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--pt-space-1);
  padding: var(--pt-space-6) var(--pt-space-4);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md);
  background: var(--pt-surface);
}
.pt-empty-icon { display: inline-grid; place-items: center; width: var(--pt-tile); height: var(--pt-tile); border-radius: var(--pt-radius-md); background: var(--pt-accent-soft); color: var(--pt-accent); margin-bottom: var(--pt-space-2); }
.pt-empty-icon svg { width: 22px; height: 22px; }
.pt-empty-title { font-size: var(--pt-text-lg); line-height: var(--pt-line-lg); font-weight: var(--pt-weight-title); text-wrap: balance; max-width: 34ch; }
.pt-empty-body { color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); max-width: 44ch; text-wrap: pretty; }
.pt-empty .pt-btn { margin-top: var(--pt-space-3); }
/* Compact (a section inside a full page). */
.pt-empty-compact { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; gap: var(--pt-space-1) var(--pt-space-3); padding: var(--pt-space-3) var(--pt-space-4); }
.pt-empty-compact .pt-empty-icon { grid-row: 1 / span 2; margin: 0; }
.pt-empty-compact .pt-empty-title { font-size: var(--pt-text-md); line-height: var(--pt-line-md); font-weight: var(--pt-weight-medium); max-width: none; }
.pt-empty-compact .pt-empty-body { max-width: none; }
.pt-empty-compact .pt-btn { grid-column: 2; margin-top: var(--pt-space-2); justify-self: start; min-height: 36px; }

/* ---------------------------------------------------------------------------------------------
   12. Subnav
   ------------------------------------------------------------------------------------------- */
pt-subnav, .pt-subnav {
  display: flex;
  gap: var(--pt-space-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--pt-border);
  margin-bottom: var(--pt-space-4);
  margin-inline: calc(-1 * var(--pt-screen-margin));
  padding-inline: var(--pt-screen-margin);
}
pt-subnav::-webkit-scrollbar, .pt-subnav::-webkit-scrollbar { display: none; }
pt-subnav > a, .pt-subnav > a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--pt-space-1);
  min-height: var(--pt-tap);
  padding: 0 var(--pt-space-3);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--pt-text-muted);
  font-weight: var(--pt-weight-medium);
  font-size: var(--pt-text-sm);
  white-space: nowrap;
  transition: color var(--pt-dur-fast) var(--pt-ease), border-color var(--pt-dur-fast) var(--pt-ease);
}
pt-subnav > a:hover, .pt-subnav > a:hover { color: var(--pt-text); }
pt-subnav > a[aria-current], .pt-subnav > a[aria-current] { color: var(--pt-accent); border-bottom-color: var(--pt-accent); }
pt-subnav > a .pt-icon, .pt-subnav > a .pt-icon { width: 16px; height: 16px; }
pt-subnav > a:focus-visible { border-radius: var(--pt-radius-sm) var(--pt-radius-sm) 0 0; }
/* Optional short labels (`SubNav` items with `short`): the long label shows by default, the short one on narrow phones. */
.pt-subnav-short { display: none; }
/* `fit`: equal-width tabs that never scroll; below 480 px each tab stacks its icon over an 11 px (short) label,
   tab-bar style, so the icons survive the narrow width. */
.pt-subnav-fit { overflow: visible; }
.pt-subnav-fit > a { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: var(--pt-space-2); }
@media (max-width: 479.98px) {
  .pt-subnav-fit > a { flex-direction: column; justify-content: center; gap: 2px; padding: var(--pt-space-2) var(--pt-space-1) 6px; min-height: 52px; font-size: var(--pt-text-2xs); line-height: var(--pt-line-2xs); }
  .pt-subnav-fit > a .pt-icon { width: 18px; height: 18px; }
  .pt-subnav-fit > a .pt-subnav-long:has(+ .pt-subnav-short) { display: none; }
  .pt-subnav-fit > a .pt-subnav-short { display: inline; }
}

/* ---------------------------------------------------------------------------------------------
   13. Sheet (dialog) — bottom sheet on phone, centred modal on desktop
   ------------------------------------------------------------------------------------------- */
dialog.pt-sheet {
  position: fixed;
  inset: auto 0 var(--pt-bottom-chrome) 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - var(--pt-bottom-chrome) - var(--pt-strip-h) - var(--pt-safe-top) - var(--pt-space-6));
  padding: 0;
  border: 0;
  border-radius: var(--pt-radius-lg) var(--pt-radius-lg) 0 0;
  background: var(--pt-surface);
  color: var(--pt-text);
  box-shadow: var(--pt-shadow-2);
  display: none;
  flex-direction: column;
  overflow: hidden;
  touch-action: none;
}
dialog.pt-sheet[open] { display: flex; animation: pt-sheet-up var(--pt-dur-med) var(--pt-ease); }
dialog.pt-sheet.pt-closing { animation: pt-sheet-down var(--pt-dur-med) var(--pt-ease-out) forwards; }
dialog.pt-sheet::backdrop { background: var(--pt-scrim); animation: pt-fade var(--pt-dur-med) var(--pt-ease); }
dialog.pt-sheet.pt-closing::backdrop { animation: pt-fade var(--pt-dur-med) var(--pt-ease-out) reverse forwards; }
@keyframes pt-sheet-up { from { transform: translateY(100%); } }
@keyframes pt-sheet-down { to { transform: translateY(100%); } }
@keyframes pt-fade { from { opacity: 0; } }
@keyframes pt-pop { from { opacity: 0; transform: scale(.98); } }
.pt-sheet-grip { display: flex; justify-content: center; padding: var(--pt-space-2) 0 0; cursor: grab; flex: none; }
.pt-sheet-grip::before { content: ""; width: 36px; height: 4px; border-radius: var(--pt-radius-pill); background: var(--pt-border); }
.pt-sheet-head { display: flex; align-items: center; gap: var(--pt-space-2); padding: var(--pt-space-2) var(--pt-space-2) var(--pt-space-2) var(--pt-space-4); flex: none; }
.pt-sheet-title { flex: 1; font-size: var(--pt-text-lg); line-height: var(--pt-line-lg); font-weight: var(--pt-weight-title); }
.pt-sheet-close { width: var(--pt-tap); height: var(--pt-tap); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pt-radius-pill); color: var(--pt-text-muted); font-size: var(--pt-text-xl); transition: background-color var(--pt-dur-fast) var(--pt-ease); }
.pt-sheet-close:hover { background: var(--pt-surface-2); color: var(--pt-text); }
.pt-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--pt-space-4) var(--pt-space-4); touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.pt-sheet-body > .pt-form { padding-top: var(--pt-space-1); }
.pt-sheet-foot { flex: none; display: flex; gap: var(--pt-space-2); padding: var(--pt-space-3) var(--pt-space-4) calc(var(--pt-space-4) + var(--pt-safe-bottom)); border-top: 1px solid var(--pt-border); background: var(--pt-surface); }
.pt-sheet-foot .pt-btn { flex: 1; }
body.pt-body:has(pt-shell[compact]) dialog.pt-sheet { max-height: 60dvh; }
@media (min-width: 768px) {
  dialog.pt-sheet {
    inset: 0;
    margin: auto;
    width: min(520px, calc(100% - 2 * var(--pt-space-6)));
    max-height: min(80dvh, 720px);
    border-radius: var(--pt-radius-lg);
    border: 1px solid var(--pt-border);
    touch-action: auto;
  }
  dialog.pt-sheet.pt-sheet-wide { width: min(760px, calc(100% - 2 * var(--pt-space-6))); }
  dialog.pt-sheet[open] { animation: pt-pop var(--pt-dur-med) var(--pt-ease); }
  dialog.pt-sheet.pt-closing { animation: pt-pop var(--pt-dur-med) var(--pt-ease-out) reverse forwards; }
  .pt-sheet-grip { display: none; }
  .pt-sheet-head { padding: var(--pt-space-4) var(--pt-space-3) var(--pt-space-2) var(--pt-space-5); }
  .pt-sheet-close { width: 36px; height: 36px; }
  .pt-sheet-body { padding: 0 var(--pt-space-5) var(--pt-space-5); }
  .pt-sheet-foot { padding: var(--pt-space-3) var(--pt-space-5) var(--pt-space-4); justify-content: flex-end; }
  .pt-sheet-foot .pt-btn { flex: none; min-width: 120px; }
}
.pt-confirm-body { color: var(--pt-text-muted); margin-bottom: var(--pt-space-3); }
.pt-confirm-type { margin-top: var(--pt-space-3); }

/* ---------------------------------------------------------------------------------------------
   14. Command palette — icons per item (from the command) or per group
   ------------------------------------------------------------------------------------------- */
dialog.pt-palette {
  position: fixed;
  inset: 0;
  margin: 0 auto;
  margin-top: calc(var(--pt-strip-h) + var(--pt-safe-top) + var(--pt-space-3));
  width: calc(100% - 2 * var(--pt-space-3));
  max-width: 600px;
  max-height: calc(100dvh - var(--pt-strip-h) - var(--pt-safe-top) - var(--pt-bottom-chrome) - var(--pt-space-6));
  height: auto;
  padding: 0;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-lg);
  background: var(--pt-surface);
  color: var(--pt-text);
  box-shadow: var(--pt-shadow-2);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
dialog.pt-palette[open] { display: flex; animation: pt-pop var(--pt-dur-med) var(--pt-ease); }
dialog.pt-palette::backdrop { background: var(--pt-scrim); animation: pt-fade var(--pt-dur-med) var(--pt-ease); }
@media (min-width: 768px) { dialog.pt-palette { margin-top: calc(var(--pt-strip-h) + 12vh); } }
.pt-palette-input-wrap { display: flex; align-items: center; gap: var(--pt-space-2); padding: var(--pt-space-1) var(--pt-space-3); border-bottom: 1px solid var(--pt-border); flex: none; }
.pt-palette-input-wrap svg { width: 18px; height: 18px; color: var(--pt-text-muted); flex: none; }
.pt-palette-input { flex: 1; min-height: var(--pt-tap); border: 0; background: transparent; font-size: var(--pt-text-lg); line-height: var(--pt-line-lg); color: var(--pt-text); outline: none; }
.pt-palette-input:focus-visible { box-shadow: none; }
.pt-palette-input::placeholder { color: var(--pt-text-muted); }
.pt-palette-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--pt-space-2); }
.pt-palette-group { display: flex; align-items: center; gap: var(--pt-space-2); padding: var(--pt-space-2) var(--pt-space-3) var(--pt-space-1); font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); color: var(--pt-text-muted); font-weight: var(--pt-weight-medium); }
.pt-palette-item {
  display: flex;
  align-items: center;
  gap: var(--pt-space-3);
  min-height: 40px;
  padding: var(--pt-space-1) var(--pt-space-3);
  border-radius: var(--pt-radius-sm);
  cursor: pointer;
  color: var(--pt-text);
  font-size: var(--pt-text-md);
  line-height: var(--pt-line-md);
}
.pt-palette-item .pt-icon { color: var(--pt-text-muted); width: 18px; height: 18px; }
.pt-palette-item[aria-selected="true"] { background: var(--pt-accent-soft); color: var(--pt-accent); }
.pt-palette-item[aria-selected="true"] .pt-icon { color: var(--pt-accent); }
.pt-palette-item .pt-palette-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--pt-weight-medium); }
.pt-palette-item .pt-palette-sub { color: var(--pt-text-muted); font-size: var(--pt-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.pt-palette-item mark { background: transparent; color: inherit; font-weight: var(--pt-weight-title); text-decoration: underline; text-decoration-color: var(--pt-accent); text-underline-offset: 2px; }
.pt-palette-empty { padding: var(--pt-space-5) var(--pt-space-4); text-align: center; color: var(--pt-text-muted); font-size: var(--pt-text-sm); }
.pt-palette-foot { display: none; gap: var(--pt-space-4); padding: var(--pt-space-2) var(--pt-space-4); border-top: 1px solid var(--pt-border); color: var(--pt-text-muted); font-size: var(--pt-text-xs); flex: none; }
.pt-palette-foot span { display: inline-flex; align-items: center; gap: var(--pt-space-1); }
@media (min-width: 768px) { .pt-palette-foot { display: flex; } }

/* ---------------------------------------------------------------------------------------------
   15. Toasts (floating: shadow allowed)
   ------------------------------------------------------------------------------------------- */
.pt-toasts {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--pt-bottom-chrome) + var(--pt-space-3));
  z-index: 60;
  display: grid;
  gap: var(--pt-space-2);
  width: min(420px, calc(100% - 2 * var(--pt-space-4)));
  pointer-events: none;
}
/* Call screens (compact shell): the control bar owns the bottom of the stage, so toasts float below the top bar
   instead — a toast over the bar would hide Leave/Record and, hovered by the pointer that just pressed a control,
   pause until dismissed (DESIGN.md §5.3.4: nothing covers video or controls). */
body.pt-body:has(pt-shell[compact]) .pt-toasts { top: calc(var(--pt-strip-h) + var(--pt-topbar) + var(--pt-space-3)); bottom: auto; }
.pt-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--pt-space-2);
  min-height: var(--pt-tap);
  padding: var(--pt-space-2) var(--pt-space-2) var(--pt-space-2) var(--pt-space-3);
  border-radius: var(--pt-radius-md);
  background: var(--pt-text);
  color: var(--pt-bg);
  box-shadow: var(--pt-shadow-2);
  font-size: var(--pt-text-sm);
  line-height: var(--pt-line-sm);
  font-weight: var(--pt-weight-medium);
  animation: pt-toast-in var(--pt-dur-med) var(--pt-ease);
}
.pt-toast.pt-leaving { animation: pt-toast-out var(--pt-dur-fast) var(--pt-ease-out) forwards; }
@keyframes pt-toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes pt-toast-out { to { opacity: 0; transform: translateY(8px); } }
.pt-toast-icon { flex: none; width: 18px; height: 18px; color: var(--pt-accent-soft); }
.pt-toast-text { flex: 1; min-width: 0; }
.pt-toast-success .pt-toast-icon { color: var(--pt-success); }
.pt-toast-danger .pt-toast-icon { color: var(--pt-danger); }
.pt-toast-warning .pt-toast-icon { color: var(--pt-warning); }
.pt-toast-action { flex: none; min-height: 32px; padding: 0 var(--pt-space-2); border-radius: var(--pt-radius-sm); color: var(--pt-accent-soft); font-weight: var(--pt-weight-title); }
.pt-toast-action:hover { background: rgb(255 255 255 / .12); }
.pt-toast-dismiss { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pt-radius-pill); color: inherit; opacity: .7; }
.pt-toast-dismiss:hover { opacity: 1; background: rgb(255 255 255 / .12); }
.pt-toast:focus-within, .pt-toast-action:focus-visible, .pt-toast-dismiss:focus-visible { box-shadow: 0 0 0 2px var(--pt-text), 0 0 0 4px var(--pt-accent); }
@media (min-width: 768px) {
  .pt-toasts { left: auto; right: var(--pt-space-5); transform: none; bottom: var(--pt-space-5); }
}

/* ---------------------------------------------------------------------------------------------
   16. Chart
   ------------------------------------------------------------------------------------------- */
.pt-chart { display: grid; gap: var(--pt-space-3); }
.pt-chart-hero { display: flex; align-items: baseline; gap: var(--pt-space-3); flex-wrap: wrap; }
.pt-chart-hero .pt-stat { color: var(--pt-text); }
.pt-chart-delta { font-weight: var(--pt-weight-medium); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: var(--pt-space-1); font-size: var(--pt-text-sm); }
.pt-chart-delta.pt-better { color: var(--pt-success); }
.pt-chart-delta.pt-worse { color: var(--pt-danger); }
.pt-chart-delta.pt-same { color: var(--pt-text-muted); }
.pt-chart-hint { color: var(--pt-text-muted); font-size: var(--pt-text-sm); }
.pt-chart-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--pt-font); }
.pt-chart-svg .pt-chart-grid { stroke: var(--pt-border); stroke-width: 1; }
.pt-chart-svg .pt-chart-axis { fill: var(--pt-text-muted); font-size: 11px; }
.pt-chart-svg .pt-chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pt-chart-svg .pt-chart-point { stroke: var(--pt-surface); stroke-width: 2; }
.pt-chart-svg .pt-chart-point:hover { r: 6; }
.pt-chart-svg .pt-chart-area { opacity: .08; }
/* Secondary series (subscores, other instruments) are quiet greys and a faded accent, thinner and dashed: the total
   is the one line that reads. Status colours mean paid/draft/cancelled and never appear here. */
.pt-chart-series-0 { color: var(--pt-accent); }
.pt-chart-series-1 { color: var(--pt-text-muted); }
.pt-chart-series-2 { color: color-mix(in srgb, var(--pt-text-muted) 60%, var(--pt-surface)); }
.pt-chart-series-3 { color: color-mix(in srgb, var(--pt-accent) 45%, var(--pt-surface)); }
.pt-chart-svg g:not(.pt-chart-series-0) .pt-chart-line { stroke-width: 1.5; }
.pt-chart-svg g:not(.pt-chart-series-0) .pt-chart-point { r: 3; }
/* Legend swatches mirror the plot (a line segment, dashed for secondary series); the text stays muted. */
.pt-chart-legend { display: flex; flex-wrap: wrap; gap: var(--pt-space-2) var(--pt-space-4); font-size: var(--pt-text-sm); color: var(--pt-text-muted); }
.pt-chart-legend span { display: inline-flex; align-items: center; gap: var(--pt-space-2); color: var(--pt-text-muted); }
.pt-chart-legend i { display: inline-block; width: 18px; height: 2px; border-radius: 1px; background: currentColor; }
.pt-chart-legend i.pt-chart-swatch-dashed { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }
.pt-chart-table { margin-top: var(--pt-space-2); }

/* ---------------------------------------------------------------------------------------------
   17. Chat
   ------------------------------------------------------------------------------------------- */
pt-chat, .pt-chat { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.pt-chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--pt-space-2); padding: var(--pt-space-3) 0; scroll-behavior: smooth; }
.pt-chat-log:empty::before { content: ""; }
.pt-chat-msg { max-width: min(80%, 520px); display: grid; gap: 2px; align-self: flex-start; }
.pt-chat-msg.pt-mine { align-self: flex-end; text-align: right; }
.pt-chat-bubble { display: inline-block; padding: var(--pt-space-2) var(--pt-space-3); border-radius: var(--pt-radius-md); background: var(--pt-surface-2); color: var(--pt-text); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--pt-text-lg); line-height: var(--pt-line-lg); }
.pt-chat-msg.pt-mine .pt-chat-bubble { background: var(--pt-accent); color: var(--pt-on-accent); }
.pt-chat-msg.pt-mine .pt-chat-bubble a { color: inherit; text-decoration: underline; }
.pt-chat-msg.pt-pending .pt-chat-bubble { opacity: .6; }
.pt-chat-msg.pt-failed .pt-chat-bubble { background: var(--pt-danger-soft); color: var(--pt-danger); }
.pt-chat-meta { font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); color: var(--pt-text-muted); padding: 0 var(--pt-space-1); }
.pt-chat-file { display: inline-flex; align-items: center; gap: var(--pt-space-2); font-weight: var(--pt-weight-medium); }
.pt-chat-file svg { width: 16px; height: 16px; }
.pt-chat-day { align-self: center; color: var(--pt-text-muted); font-size: var(--pt-text-xs); font-weight: var(--pt-weight-medium); padding: var(--pt-space-2) 0; }
.pt-chat-composer {
  flex: none;
  position: sticky;
  bottom: var(--pt-bottom-chrome);
  display: flex;
  align-items: flex-end;
  gap: var(--pt-space-2);
  padding: var(--pt-space-2) 0 calc(var(--pt-space-2) + var(--pt-safe-bottom) * 0);
  background: var(--pt-bg);
  border-top: 1px solid var(--pt-border);
}
.pt-chat-composer .pt-textarea { min-height: var(--pt-tap); max-height: 160px; resize: none; padding-top: 11px; padding-bottom: 11px; }
.pt-chat-composer .pt-btn { flex: none; }
.pt-chat-empty { padding: var(--pt-space-5); text-align: center; color: var(--pt-text-muted); }
.pt-chat-status { font-size: var(--pt-text-xs); color: var(--pt-text-muted); text-align: center; padding: var(--pt-space-1); }

/* ---------------------------------------------------------------------------------------------
   18. Checklist
   ------------------------------------------------------------------------------------------- */
pt-checklist, .pt-checklist { display: block; background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-md); overflow: hidden; }
.pt-check-row {
  display: flex;
  align-items: center;
  gap: var(--pt-space-3);
  width: 100%;
  min-height: var(--pt-row);
  padding: var(--pt-space-2) var(--pt-space-4);
  text-align: left;
  color: var(--pt-text);
  transition: background-color var(--pt-dur-fast) var(--pt-ease);
}
.pt-check-row + .pt-check-row { border-top: 1px solid var(--pt-border); }
.pt-check-row:hover { background: var(--pt-surface-2); }
.pt-check-row:focus-visible { box-shadow: inset var(--pt-focus); border-radius: 0; }
.pt-check-box { flex: none; width: 24px; height: 24px; border: 2px solid var(--pt-text-muted); border-radius: var(--pt-radius-pill); background: var(--pt-surface-2); display: grid; place-items: center; transition: background-color var(--pt-dur-fast) var(--pt-ease), border-color var(--pt-dur-fast) var(--pt-ease); }
.pt-check-row:not([aria-checked="true"]):hover .pt-check-box { border-color: var(--pt-accent); }
.pt-check-box svg { width: 14px; height: 14px; color: var(--pt-on-accent); opacity: 0; transform: scale(.6); transition: opacity var(--pt-dur-fast) var(--pt-ease), transform var(--pt-dur-fast) var(--pt-ease); }
.pt-check-row[aria-checked="true"] .pt-check-box { background: var(--pt-accent); border-color: var(--pt-accent); }
.pt-check-row[aria-checked="true"] .pt-check-box svg { opacity: 1; transform: scale(1); }
.pt-check-row[aria-checked="true"] .pt-check-title { color: var(--pt-text-muted); text-decoration: line-through; text-decoration-color: var(--pt-border); }
.pt-check-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pt-check-title { font-weight: var(--pt-weight-medium); }
.pt-check-sub { color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-checklist-progress { padding: var(--pt-space-2) var(--pt-space-4); font-size: var(--pt-text-sm); color: var(--pt-text-muted); border-top: 1px solid var(--pt-border); background: var(--pt-surface-2); font-variant-numeric: tabular-nums; }
.pt-checklist-progress.pt-done { color: var(--pt-success); }

/* ---------------------------------------------------------------------------------------------
   19. File drop
   ------------------------------------------------------------------------------------------- */
.pt-drop {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--pt-space-1);
  min-height: 120px;
  padding: var(--pt-space-5) var(--pt-space-4);
  border: 1px dashed var(--pt-border);
  border-radius: var(--pt-radius-md);
  background: var(--pt-surface);
  color: var(--pt-text-muted);
  cursor: pointer;
  transition: border-color var(--pt-dur-fast) var(--pt-ease), background-color var(--pt-dur-fast) var(--pt-ease);
}
.pt-drop:hover, .pt-drop.pt-dragover { border-color: var(--pt-accent); background: var(--pt-accent-soft); }
.pt-drop:focus-within { box-shadow: var(--pt-focus); }
.pt-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.pt-drop-title { color: var(--pt-text); font-weight: var(--pt-weight-medium); }
.pt-drop-icon { width: 40px; height: 40px; border-radius: var(--pt-radius-md); background: var(--pt-accent-soft); color: var(--pt-accent); display: grid; place-items: center; margin-bottom: var(--pt-space-1); }
.pt-drop-icon svg { width: 20px; height: 20px; }
.pt-drop-preview { width: 96px; height: 96px; border-radius: var(--pt-radius-md); object-fit: cover; }
.pt-drop-preview.pt-round { border-radius: var(--pt-radius-pill); }
.pt-drop-file { display: flex; align-items: center; gap: var(--pt-space-2); color: var(--pt-text); font-size: var(--pt-text-sm); max-width: 100%; }
.pt-drop-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-drop-progress { width: 100%; height: 6px; border-radius: var(--pt-radius-pill); background: var(--pt-surface-2); overflow: hidden; margin-top: var(--pt-space-2); }
.pt-drop-progress > i { display: block; height: 100%; background: var(--pt-accent); border-radius: inherit; transition: width var(--pt-dur-fast) linear; }
.pt-drop-progress[aria-valuenow="100"] > i { background: var(--pt-success); }
.pt-drop .pt-error { position: relative; z-index: 1; }
.pt-drop .pt-btn { position: relative; z-index: 1; }
progress.pt-progress { width: 100%; height: 6px; appearance: none; border: 0; border-radius: var(--pt-radius-pill); background: var(--pt-surface-2); overflow: hidden; }
progress.pt-progress::-webkit-progress-bar { background: var(--pt-surface-2); }
progress.pt-progress::-webkit-progress-value { background: var(--pt-accent); }
progress.pt-progress::-moz-progress-bar { background: var(--pt-accent); }

/* ---------------------------------------------------------------------------------------------
   20. Avatar
   ------------------------------------------------------------------------------------------- */
.pt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--pt-avatar-size, 32px);
  height: var(--pt-avatar-size, 32px);
  border-radius: var(--pt-radius-pill);
  background: var(--pt-accent-soft);
  color: var(--pt-accent);
  font-weight: var(--pt-weight-title);
  font-size: calc(var(--pt-avatar-size, 32px) * .38);
  letter-spacing: .02em;
  overflow: hidden;
  user-select: none;
  contain: paint;
  /* 1 px ring so a photo never reads as a hole against a dark surface. */
  box-shadow: inset 0 0 0 1px var(--pt-border);
}
.pt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pt-avatar-sm { --pt-avatar-size: 24px; }
.pt-avatar-md { --pt-avatar-size: 32px; }
.pt-avatar-lg { --pt-avatar-size: 44px; }
.pt-avatar-xl { --pt-avatar-size: 72px; }
/* Avatar strip (Home dogs strip, Today patients strip): 56 px photos with a name and a one-word sub-line; scrolls
   sideways on phone, fills a grid on wide screens. */
.pt-avatar-strip { display: flex; gap: var(--pt-space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: calc(-1 * var(--pt-space-1)); padding-inline: var(--pt-space-1); }
.pt-avatar-strip::-webkit-scrollbar { display: none; }
.pt-avatar-chip { flex: none; display: grid; justify-items: center; gap: 2px; width: 96px; min-height: 100px; padding: var(--pt-space-3) var(--pt-space-2) var(--pt-space-2); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-md); background: var(--pt-surface); color: var(--pt-text); text-align: center; transition: border-color var(--pt-dur-fast) var(--pt-ease), background-color var(--pt-dur-fast) var(--pt-ease); }
a.pt-avatar-chip:hover { border-color: var(--pt-text-muted); color: var(--pt-text); background: var(--pt-surface-2); }
.pt-avatar-chip .pt-avatar { --pt-avatar-size: 56px; margin-bottom: var(--pt-space-1); }
.pt-avatar-chip-name { font-weight: var(--pt-weight-medium); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-avatar-chip-sub { color: var(--pt-text-muted); font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1080px) {
  .pt-avatar-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .pt-avatar-chip { width: auto; }
}
.pt-avatar-stack { display: inline-flex; }
.pt-avatar-stack .pt-avatar + .pt-avatar, .pt-avatar-stack pt-avatar + pt-avatar { margin-left: -8px; }
.pt-avatar-stack .pt-avatar { box-shadow: 0 0 0 2px var(--pt-surface); }
.pt-identity { display: flex; align-items: center; gap: var(--pt-space-3); min-width: 0; }
.pt-identity-text { display: grid; gap: 1px; min-width: 0; }
.pt-identity-name { font-weight: var(--pt-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-identity-sub { color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------------------------------
   21. Tables, definition lists
   ------------------------------------------------------------------------------------------- */
.pt-table-wrap { overflow-x: auto; border: 1px solid var(--pt-border); border-radius: var(--pt-radius-md); background: var(--pt-surface); }
.pt-table { width: 100%; border-collapse: collapse; font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-table th, .pt-table td { padding: var(--pt-space-2) var(--pt-space-4); text-align: left; vertical-align: middle; border-top: 1px solid var(--pt-border); height: 44px; }
.pt-table thead th { border-top: 0; background: var(--pt-surface-2); color: var(--pt-text-muted); font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); font-weight: var(--pt-weight-medium); white-space: nowrap; height: 36px; }
.pt-table td.pt-num, .pt-table th.pt-num { text-align: right; font-variant-numeric: tabular-nums; }
.pt-table tbody tr:hover { background: var(--pt-surface-2); }
.pt-table tr[aria-selected="true"] { background: var(--pt-selected); }
.pt-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--pt-space-2) var(--pt-space-4); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-dl dt { color: var(--pt-text-muted); }
.pt-dl dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------------------------
   22. kbd hints
   ------------------------------------------------------------------------------------------- */
kbd, .pt-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--pt-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--pt-surface);
  color: var(--pt-text-muted);
  font-family: var(--pt-font);
  font-size: var(--pt-text-2xs);
  line-height: 1;
  font-weight: var(--pt-weight-medium);
  letter-spacing: .02em;
  vertical-align: middle;
}
kbd + kbd { margin-left: 2px; }
.pt-kbd-hint { color: var(--pt-text-muted); font-size: var(--pt-text-xs); display: inline-flex; align-items: center; gap: var(--pt-space-1); }
@media (max-width: 767.98px) { .pt-desktop-only, .pt-nav-item kbd, .pt-kbd-hint { display: none; } }
@media (min-width: 768px) { .pt-phone-only { display: none; } }

/* ---------------------------------------------------------------------------------------------
   23. SOAP notes (docs/UI.md §8)
   ------------------------------------------------------------------------------------------- */
.pt-soap { display: grid; gap: var(--pt-space-4); max-width: var(--pt-form-max); }
.pt-soap-signed { display: flex; align-items: center; gap: var(--pt-space-2); padding: var(--pt-space-2) var(--pt-space-3); border-radius: var(--pt-radius-sm); background: var(--pt-success-soft); color: var(--pt-success); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-soap-signed b { font-weight: var(--pt-weight-medium); }
.pt-soap-signed-at { white-space: nowrap; }
.pt-soap-amends, .pt-soap-amendment { display: flex; align-items: center; gap: var(--pt-space-2); color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-soap-amends .pt-icon, .pt-soap-amendment .pt-icon { color: var(--pt-warning); }
.pt-soap-section { display: grid; gap: var(--pt-space-1); }
.pt-soap-text { font-size: var(--pt-text-note); line-height: var(--pt-line-note); white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-soap-blank .pt-soap-text, .pt-soap-empty { color: var(--pt-text-muted); }
.pt-soap-amendments { display: grid; gap: var(--pt-space-2); padding-top: var(--pt-space-3); border-top: 1px solid var(--pt-border); }
/* Editor twin: a textarea per section styled like the rendered view. */
.pt-soap-editor { display: grid; gap: var(--pt-space-4); max-width: var(--pt-form-max); }
.pt-soap-editor .pt-textarea { min-height: 72px; padding: var(--pt-space-2) var(--pt-space-3); font-size: var(--pt-text-note); line-height: var(--pt-line-note); border-color: transparent; background: var(--pt-surface-2); }
.pt-soap-editor .pt-textarea:hover { border-color: var(--pt-border); }
.pt-soap-editor .pt-textarea:focus-visible { background: var(--pt-surface); border-color: var(--pt-accent); }

/* ---------------------------------------------------------------------------------------------
   24. Week strip (docs/UI.md §9 "This week")
   ------------------------------------------------------------------------------------------- */
.pt-weekstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--pt-space-1); }
.pt-weekday {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 60px;
  padding: var(--pt-space-2) 0 var(--pt-space-1);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md);
  background: var(--pt-surface);
  color: var(--pt-text);
  font-size: var(--pt-text-sm);
  line-height: var(--pt-line-sm);
  transition: border-color var(--pt-dur-fast) var(--pt-ease), background-color var(--pt-dur-fast) var(--pt-ease);
}
a.pt-weekday:hover { border-color: var(--pt-text-muted); color: var(--pt-text); }
.pt-weekday-name { font-size: var(--pt-text-2xs); line-height: var(--pt-line-2xs); color: var(--pt-text-muted); font-weight: var(--pt-weight-medium); text-transform: uppercase; letter-spacing: .04em; }
.pt-weekday-num { font-weight: var(--pt-weight-title); font-variant-numeric: tabular-nums; font-size: var(--pt-text-md); line-height: var(--pt-line-md); }
.pt-weekday-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pt-radius-pill); background: var(--pt-accent-soft); color: var(--pt-accent); font-size: var(--pt-text-2xs); font-weight: var(--pt-weight-title); font-variant-numeric: tabular-nums; }
/* Zero-count days keep the 6 px box for alignment but draw nothing. */
.pt-weekday-count.pt-weekday-none { min-width: 6px; width: 6px; height: 6px; padding: 0; margin: 6px 0; background: var(--pt-border); visibility: hidden; }
.pt-weekday-today { border-color: var(--pt-accent); }
.pt-weekday-today .pt-weekday-name { color: var(--pt-accent); }
.pt-weekday[aria-current] { background: var(--pt-accent); border-color: var(--pt-accent); color: var(--pt-on-accent); }
.pt-weekday[aria-current] .pt-weekday-name { color: var(--pt-on-accent); opacity: .85; }
.pt-weekday[aria-current] .pt-weekday-count { background: var(--pt-on-accent); color: var(--pt-accent); }
.pt-weekday[aria-current] .pt-weekday-count.pt-weekday-none { background: var(--pt-on-accent); opacity: .6; }

/* ---------------------------------------------------------------------------------------------
   25. Utilities and legacy helpers
   ------------------------------------------------------------------------------------------- */
.pt-visually-hidden, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pt-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pt-space-3); }
.pt-stack-sm { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pt-space-2); }
.pt-stack-lg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pt-space-5); }
.pt-stack > *, .pt-stack-sm > *, .pt-stack-lg > *, .pt-form > * { min-width: 0; }
.pt-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-space-2); }
.pt-between { display: flex; align-items: center; justify-content: space-between; gap: var(--pt-space-3); }
.pt-grow { flex: 1; min-width: 0; }
.pt-center { text-align: center; }
.pt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-mt-2 { margin-top: var(--pt-space-2); } .pt-mt-3 { margin-top: var(--pt-space-3); } .pt-mt-4 { margin-top: var(--pt-space-4); } .pt-mt-5 { margin-top: var(--pt-space-5); }
.pt-mb-2 { margin-bottom: var(--pt-space-2); } .pt-mb-3 { margin-bottom: var(--pt-space-3); } .pt-mb-4 { margin-bottom: var(--pt-space-4); }
.pt-success-text { color: var(--pt-success); }
.pt-warning-text { color: var(--pt-warning); }
.pt-danger-text { color: var(--pt-danger); }
.pt-divider { border-top: 1px solid var(--pt-border); }
.pt-countdown-stat { font-variant-numeric: tabular-nums; }
/* Two-column layout for a Home/Today fold at ≥ 1080 px: main column + quiet aside. */
@media (min-width: 1080px) {
  .pt-fold { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--pt-space-5); align-items: start; }
  .pt-fold > * { min-width: 0; }
}
/* Legacy rails (first pass) — kept for the booking slot picker and week nav until areas move to WeekStrip. */
.pt-week-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--pt-space-2); }
.pt-day-rail { display: flex; gap: var(--pt-space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pt-day-rail::-webkit-scrollbar { display: none; }
.pt-day-rail > button, .pt-day-rail > a { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 56px; min-height: var(--pt-row); padding: var(--pt-space-2); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-md); background: var(--pt-surface); color: var(--pt-text); font-size: var(--pt-text-sm); }
.pt-day-rail > [aria-pressed="true"], .pt-day-rail > [aria-current] { background: var(--pt-accent); border-color: var(--pt-accent); color: var(--pt-on-accent); }
.pt-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--pt-space-2); }
.pt-slot-grid > button { min-height: var(--pt-tap); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-sm); background: var(--pt-surface); color: var(--pt-text); font-variant-numeric: tabular-nums; font-weight: var(--pt-weight-medium); transition: border-color var(--pt-dur-fast) var(--pt-ease), background-color var(--pt-dur-fast) var(--pt-ease); }
.pt-slot-grid > button:hover { border-color: var(--pt-accent); }
.pt-slot-grid > button[aria-pressed="true"] { background: var(--pt-accent); border-color: var(--pt-accent); color: var(--pt-on-accent); }
.pt-media { width: 100%; aspect-ratio: 16 / 9; background: var(--pt-text); border-radius: var(--pt-radius-md); overflow: hidden; }
.pt-media video { width: 100%; height: 100%; object-fit: contain; }
.pt-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--pt-space-3); }
.pt-thumb { display: grid; gap: var(--pt-space-1); color: inherit; }
.pt-thumb .pt-media { aspect-ratio: 4 / 3; }
.pt-dots { display: flex; gap: 6px; justify-content: center; }
.pt-dots i { width: 8px; height: 8px; border-radius: var(--pt-radius-pill); background: var(--pt-border); }
.pt-dots i.pt-on { background: var(--pt-accent); }
.pt-print-hidden { }
@media print { .pt-topbar, .pt-sidebar, .pt-tabbar, .pt-dock, pt-demo-strip, .pt-toasts { display: none !important; } }

/* Server primitives (src/views/ui.tsx, layout.tsx) — remaining names the shell and primitives emit. */
.pt-stat-block { display: grid; gap: 2px; align-content: start; }
.pt-stat-label { color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-stat-hint { color: var(--pt-text-muted); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); }
.pt-stat-hero { padding: var(--pt-space-3) 0; }
.pt-signin-link { width: auto; padding: 0 var(--pt-space-3); border-radius: var(--pt-radius-sm); color: var(--pt-accent); font-weight: var(--pt-weight-medium); font-size: var(--pt-text-sm); }
.pt-signin-link:hover { background: var(--pt-accent-soft); color: var(--pt-accent-hover); }
.pt-error-card { max-width: var(--pt-form-max); margin: var(--pt-space-5) auto; display: grid; gap: var(--pt-space-2); justify-items: start; }