/* PodoPoints: one stylesheet for the product site, sign-in and the workspace. Phone first, big targets. */

@font-face { font-family: 'Atkinson Next PJ'; font-weight: 200 800; font-display: swap; src: url(/static/fonts/atkinson-next-latin-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Next PJ'; font-weight: 200 800; font-display: swap; src: url(/static/fonts/atkinson-next-latin-ext-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: 'Newsreader'; font-weight: 300 600; font-display: swap; src: url(/static/fonts/newsreader-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-weight: 300 600; font-display: swap; src: url(/static/fonts/newsreader-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* PodoPoints: mint liquid glass. Evergreen carries text and actions; pale mints are surfaces and highlights. */
  --ink: #153c30; --ink-2: #0d271f; --brand: #176b50; --brand-deep: #0f5a42; --mint: #5fc79d;
  --brand-soft: #e5f5ed; --mint-2: #cff0df; --mint-3: #b5e5ce;
  --accent: #176b50; --accent-soft: #e5f5ed;
  --warm: #9a4a22; --warm-soft: #fcebdd; --apricot: #f2a66b;
  --sky: #e5f5ed; --sky-ink: #176b50; --lav: #f1edf8; --lav-ink: #5b4a86;   /* scheduling now speaks mint too */
  --paper: #f5faf7; --paper-2: #e8f2ed; --card: #fff; --field: #fff;
  --text: #153c30; --muted: #526b60; --line: #d9e8e0; --line-strong: #7d968b;
  --danger: #a3271f; --danger-soft: #fbe6e3; --ok: #1e7a4c; --ok-soft: #dff2e6; --warn: #7a4a0c; --warn-soft: #fdf0d5;
  --focus: #176b50;   /* one focus colour everywhere: evergreen, 3px, offset 2px */
  --font-body: 'Atkinson Next PJ', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-display: 'Atkinson Next PJ', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-editorial: 'Newsreader', Georgia, 'Times New Roman', serif;   /* greetings and major headings only */
  --w-thin: 300; --w-text: 400; --w-label: 600; --w-bold: 750;
  --r: 24px; --r-sm: 14px; --r-xs: 10px; --r-md: 18px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --z-sticky: 20; --z-float: 30; --z-bar: 40; --z-dock: 45; --z-sheet: 60; --z-toast: 70; --z-viewer: 80;
  --bar-h: 68px;
  --dur-press: .14s; --dur-ui: .22s; --dur-sheet: .32s; --dur-fade: .15s;   /* press, a control's change, a sheet, a plain fade */
  --edge: 0 0 0 1px rgb(21 60 48 / .07);
  --shadow: var(--edge), 0 1px 2px rgb(21 60 48 / .04), 0 14px 32px -22px rgb(21 60 48 / .28);
  --glass: rgb(255 255 255 / .72); --glass-blur: blur(18px) saturate(1.6);
  --ease: cubic-bezier(.22, 1, .36, 1); --ease-sheet: cubic-bezier(.32, .72, 0, 1);   /* arrive and settle; a sheet that follows the finger */
  font-size: 112.5%; color-scheme: light;
}
:root[data-text='big'] { font-size: 131.25%; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 24px); scroll-padding-bottom: 24px; }
/* A field that gets the focus is never hidden under what floats: the top bar, the visit's contents bar, the phone dock,
   the save bar. The browser scrolls focus targets clear of this padding. */
html:has(.vtoc) { scroll-padding-top: calc(var(--bar-h) + 84px); }
html:has(.sticky:not([hidden])) { scroll-padding-bottom: 110px; }
@media (max-width: 899px) {
  html:has(.ws) { scroll-padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  html:has(.ws .sticky:not([hidden])) { scroll-padding-bottom: calc(200px + env(safe-area-inset-bottom)); }
  /* an edit form with a save bar: the dock steps aside, so the bar sits at the bottom edge */
  html:has(.ws form[method=post] > .sticky:not(.selbar, .albar)) { scroll-padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
}
body { margin: 0; background: var(--paper); color: var(--text); font: 400 1rem/1.55 var(--font-body); -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; }
p { text-wrap: pretty; }
.num, time, .today__time, .kpi b, .bslot, .tbl .num { font-variant-numeric: tabular-nums; }
h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: var(--w-thin); letter-spacing: -.025em; text-wrap: balance; }
h1 b, h1 strong, .hello b { font-weight: var(--w-bold); }
h2 { font-size: 1.3rem; font-weight: 700; display: flex; gap: 10px; align-items: center; }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--brand); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ico { width: 22px; height: 22px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* "Skip to content": the first stop for the keyboard, visible only while it has the focus */
.skip { position: fixed; z-index: 200; top: 10px; left: 10px; padding: 12px 18px; border-radius: 12px; background: var(--card); color: var(--brand-deep); font: 700 1rem/1.2 var(--font-display); box-shadow: 0 0 0 2px var(--brand), 0 12px 30px -12px rgb(19 36 30 / .4); }
.skip:not(:focus) { left: -9999px; }
#main:focus { outline: none; }
.hp { position: absolute; left: -9999px; }
.muted { color: var(--muted); } .warn { color: var(--danger); } .center { text-align: center; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }
.hint { color: var(--muted); font-size: .95rem; margin: 0; }
.big { font: 600 1.3rem/1.3 var(--font-display); color: var(--ink); margin: 0 0 8px; }
.quote { background: var(--paper); border-radius: var(--r-sm); padding: 12px 14px; white-space: pre-line; }

/* ---------------------------------------------------------------- buttons */
.btn { --bg: var(--ink); --bg-2: #24584a; --fg: var(--on-brand); --mx: 50%; --my: 0%; position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px; border-radius: 999px; border: 0; color: var(--fg); font: var(--w-bold) 1.04rem/1.15 var(--font-display); text-decoration: none; cursor: pointer; touch-action: manipulation;
  background: radial-gradient(140px 90px at var(--mx) var(--my), color-mix(in srgb, var(--card) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--bg-2), var(--bg) 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -2px 0 rgb(0 0 0 / .14), 0 1px 2px rgb(21 60 48 / .2), 0 10px 22px -12px color-mix(in srgb, var(--bg) 85%, transparent);
  transition: scale .22s var(--spring-press, var(--ease)), filter .2s; }
.btn::after { content: ''; position: absolute; inset: 1px 1px 52% 1px; z-index: -1; border-radius: 999px 999px 40% 40% / 999px 999px 18px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 26%, transparent), transparent); pointer-events: none; }
.btn .lq-drop, .abtn .lq-drop, .bslot .lq-drop, .bchoice .lq-drop { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--card) 50%, transparent), transparent); }
@media (hover: hover) and (pointer: fine) { .btn:hover { filter: brightness(1.05) saturate(1.05); } }
.btn:active, .abtn:active { scale: .98; transition-duration: 90ms; }
.btn--accent { --bg: var(--brand); --bg-2: #2a8463; }
.btn--ghost { --fg: var(--ink); background: radial-gradient(140px 90px at var(--mx) var(--my), var(--card), transparent 70%), color-mix(in srgb, var(--card) 70%, transparent); box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 2px var(--line-strong), 0 6px 14px -10px rgb(21 60 48 / .4); }
.btn--ghost::after { display: none; } .btn--ghost .lq-drop { background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 20%, transparent), transparent); }
.btn--danger { --bg: var(--danger); --bg-2: #c23a30; }
.btn--block { width: 100%; }
.abtn .lq-drop, .bslot:not(.on) .lq-drop, .bchoice .lq-drop { background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 20%, transparent), transparent); }
.bslot, .bchoice { position: relative; overflow: hidden; isolation: isolate; }
.empty3d { display: grid; justify-items: center; gap: 4px; padding: 18px 0 8px; text-align: center; }
.empty3d img { width: 112px; height: 112px; margin-bottom: 4px; }
.empty3d p { margin: 0; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.abtn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px; border-radius: var(--r-sm); border: 2px solid var(--line-strong); transition: border-color .14s, background-color .14s, scale .14s var(--ease); background: var(--card); color: var(--ink); font: 600 .98rem/1.15 var(--font-display); text-decoration: none; cursor: pointer; }
@media (hover: hover) { .abtn:hover { border-color: var(--ink); background: var(--brand-soft); } }
.abtn--danger { color: var(--danger); border-color: #efc8c3; }
.abtn--mic.is-rec { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.abtn.is-armed { background: var(--danger); color: var(--on-brand); border-color: var(--danger); }
.chipbtn { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--field); font: 500 .95rem/1.2 var(--font-display); color: var(--ink); cursor: pointer; }
.chipbtn.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.row form { margin: 0; }
.row--tight { margin: 0 0 14px; gap: 8px; }

/* ---------------------------------------------------------------- forms */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.field { display: grid; gap: 6px; font: 600 .98rem/1.3 var(--font-display); color: var(--ink); min-width: 0; }
fieldset.field { border: 0; padding: 0; margin: 0; } fieldset.field legend { padding: 0; margin-bottom: 8px; }
.field input, .field select, .field textarea, .search input, .jump input, .jump select, .svclist input, .hours input, .screen select, .debts select, .team select {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--line-strong); border-radius: var(--r-sm); background: var(--field); font: 400 1.08rem/1.4 var(--font-body); color: var(--text);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); background: var(--card); }
.row2, .row3 { display: grid; gap: 18px 12px; }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; } .row3 { grid-template-columns: repeat(3, 1fr); } }
.check { display: flex; gap: 10px; align-items: center; font: 600 1rem/1.3 var(--font-display); color: var(--ink); cursor: pointer; }
.check input { width: 26px; height: 26px; accent-color: var(--ink); flex: none; }
.check--big { font-size: 1.08rem; min-height: 48px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; }
.pill span { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 16px; border: 2px solid var(--line-strong); border-radius: 999px; background: var(--field); font: 500 .98rem/1.15 var(--font-display); color: var(--ink); transition: background .15s, border-color .15s; }
.pill input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.drop { position: relative; display: grid; justify-items: center; gap: 4px; padding: 22px; border: 2px dashed var(--line); border-radius: var(--r); background: var(--field); text-align: center; cursor: pointer; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop span { display: flex; gap: 8px; align-items: center; font: 600 1.05rem/1.2 var(--font-display); color: var(--ink); }
.drop small { color: var(--muted); }
.details { border-top: 1px solid var(--paper-2); padding-top: 10px; margin-top: 10px; }
.details summary { cursor: pointer; font: 600 1rem/1.3 var(--font-display); color: var(--ink); padding: 8px 0; }
.sticky { position: sticky; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 30; display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; margin: 0 -10px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 18px; box-shadow: var(--edge); }
.card .sticky { background: color-mix(in srgb, var(--card) 94%, transparent); }

/* ---------------------------------------------------------------- feedback */
.flash { display: flex; gap: 10px; align-items: center; padding: 14px 16px; margin: 0 0 16px; border-radius: var(--r-sm); font-weight: 700; }
.flash .ico { flex: none; }
.flash a { color: inherit; }
.flash--ok { background: var(--brand-soft); color: var(--ink); }
.flash--error { background: var(--danger-soft); color: var(--danger); }
.flash--warn { background: var(--warn-soft); color: var(--warn); }
.pill-s { display: inline-flex; gap: 4px; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: 14px; background: var(--paper-2); color: var(--ink); font: 600 .86rem/1.3 var(--font-display); width: fit-content; }
.pill-s .ico { width: 15px; height: 15px; }
.pill-s--new { background: var(--sky); color: var(--sky-ink); box-shadow: inset 0 0 0 1px var(--mint-3); } .pill-s--urgent { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px #f0c8c3; }
.pill-s--ok { background: var(--ok-soft); color: var(--ok); } .pill-s--warn { background: var(--warn-soft); color: var(--warn); }
.pill-s--type { background: var(--lav); color: var(--lav-ink); }
.st { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: 999px; font: 600 .86rem/1.3 var(--font-display); background: var(--brand-soft); color: var(--ink); }
.st--confirmed, .st--done { background: var(--ok-soft); color: var(--ok); } .st--arrived { background: var(--sky); color: var(--sky-ink); }
.st--noshow, .st--cancelled { background: var(--danger-soft); color: var(--danger); }
.alertbar { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 16px; border-radius: var(--r-sm); background: var(--danger-soft); color: var(--danger); border: 2px solid #f0c3bd; }
.alertbar .ico { width: 26px; height: 26px; }
.alertbar div { display: flex; flex-wrap: wrap; gap: 4px 10px; } .alertbar b { width: 100%; font-family: var(--font-display); }
.alertbar span { font-weight: 700; } .alertbar span:not(:last-child)::after { content: ' ·'; }
.busy { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgb(14 33 29 / .6); }
.busy__box { display: grid; justify-items: center; gap: 10px; padding: 26px 30px; border-radius: var(--r); background: var(--card); }
.busy__box p { margin: 0; font: 600 1.1rem var(--font-display); color: var(--ink); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--brand-soft); border-top-color: var(--brand); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- workspace shell */
.ws { padding-bottom: calc(108px + env(safe-area-inset-bottom)); background: radial-gradient(70% 380px at 100% 0, rgb(92 196 166 / .14), transparent 70%), radial-gradient(60% 320px at 0 0, rgb(207 240 223 / .35), transparent 70%), var(--paper) no-repeat; }
/* glass only where things float: the top bar and the dock. Every page surface below stays opaque. */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); color: var(--ink); --glass-tint: rgb(255 255 255 / .74); --glass-tint-2: rgb(255 255 255 / .6); border-radius: 0; }
.top.glass::before, .top.glass::after { display: none; }
.top a { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 10px; }
.wordmark { font: var(--w-thin) 1.32rem/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.wordmark b { font-weight: var(--w-bold); }
.logo { flex: none; }
.avatar { --c: var(--brand); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, var(--card)); color: var(--c); font: var(--w-bold) 1.02rem/1 var(--font-display); flex: none; }
.avatar--sm { width: 42px; height: 42px; background: linear-gradient(160deg, var(--card), var(--brand-soft)); color: var(--brand); box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent), 0 4px 10px -6px rgb(21 60 48 / .4); }
.avatar--lg { width: 62px; height: 62px; font-size: 1.35rem; background: var(--ink); color: var(--on-brand); }
.top__me { min-width: 48px; min-height: 48px; justify-content: center; }
/* phone: a floating glass dock; one liquid pill glides between places (liquid.js) */
.main { width: min(100% - 28px, 980px); margin: 0 auto; padding: 22px 0 40px; }
.main--wide { width: min(100% - 28px, 1280px); }
@media (min-width: 900px) {
  .ws { padding-bottom: 0; padding-left: 248px; }
  .top { margin-left: -248px; padding-inline: 24px; }
  /* desktop: the same places as a quiet sidebar on the canvas; the pill glides vertically */
  .sticky { bottom: 12px; }
}
/* page to page: the new page fades in over the old one in 120 ms (opacity only, nothing travels), and the dock or
   sidebar simply stays: its pill already glided on the tap, so the new page shows it in place */
@view-transition { navigation: auto; }
::view-transition-group(root), ::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: fade-in 120ms var(--ease) both; }
::view-transition-group(dock) { animation: none; }
::view-transition-old(dock) { animation: fade-out 120ms var(--ease) both; mix-blend-mode: plus-lighter; }
::view-transition-new(dock) { animation: fade-in 120ms var(--ease) both; mix-blend-mode: plus-lighter; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.back { display: inline-block; margin-bottom: 6px; padding: 8px 0; font: 600 1rem/1 var(--font-display); text-decoration: none; }
.ahead { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ahead h1 { margin: 0; } .ahead h1 small { font-size: .5em; font-weight: 500; }
.hello { font-weight: var(--w-thin); margin: 0 0 20px; font-size: clamp(2rem, 6.5vw, 2.9rem); }
.meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card { background: var(--card); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); margin-bottom: 16px; }
.card > :last-child { margin-bottom: 0; }
.card--actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.card--actions form { margin: 0; } .card--actions .details { width: 100%; }
.card--wide { grid-column: 1 / -1; }
.card--remind { border: 2px solid #25d366; }
.grid2 { display: grid; gap: 16px; margin-bottom: 16px; } .grid2 .card { margin: 0; }
@media (min-width: 760px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.danger { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0 20px; }
.danger form { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding-bottom: 4px; }   /* every tab stays in sight: they wrap, never hide off the edge */
.tabs::-webkit-scrollbar { display: none; }
.tabs a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px; border-radius: 999px; background: var(--card); box-shadow: var(--edge); text-decoration: none; font: 600 .95rem/1 var(--font-display); color: var(--ink); }
.tabs a.on { background: var(--brand); color: var(--on-brand); box-shadow: none; } .tabs a b { margin-left: 4px; opacity: .7; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 12px; }
.dl dt { color: var(--muted); font: 600 .95rem/1.4 var(--font-display); } .dl dd { margin: 0; font-weight: 700; }
.links { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.links li, .links a { display: block; padding: 10px 0; border-bottom: 1px solid var(--paper-2); }
.chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 6px 12px; border-radius: 999px; background: var(--paper); font: 500 .94rem/1.3 var(--font-display); color: var(--ink); }

/* lists */
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo a { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: var(--paper); text-decoration: none; color: var(--text); }
.todo b { display: block; font: 600 1.05rem/1.3 var(--font-display); color: var(--ink); } .todo small { color: var(--muted); }
.todo__n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--on-brand); font: 600 1.02rem/1 var(--font-display); }
.todo__n .ico { width: 20px; height: 20px; }
.todo li.done a { opacity: .6; } .todo li.done .todo__n { background: var(--ok); }
.todo > li > a > .ico { color: var(--accent); }
.todo--compact { margin-bottom: 16px; }
.alist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.alist a, .alist > li.exprow { display: grid; gap: 3px; padding: 13px 16px; border-radius: 16px; background: var(--paper); text-decoration: none; color: var(--text); }
.alist b { font: 600 1.05rem/1.3 var(--font-display); color: var(--ink); } .alist small { color: var(--muted); }
.exprow { display: flex !important; justify-content: space-between; align-items: center; gap: 10px; } .exprow form { margin: 0; }
.search { display: flex; gap: 8px; margin-bottom: 12px; } .search input { flex: 1; min-width: 0; background: var(--card); }
.sortbar { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: -4px 0 14px; font: 600 .92rem/1 var(--font-display); }
.sortbar a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--muted); padding: 6px 0; } .sortbar a.on { color: var(--ink); text-decoration: underline; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plist a { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--text); }
.plist__main { display: grid; gap: 3px; min-width: 0; } .plist__main b { font: 600 1.1rem/1.25 var(--font-display); color: var(--ink); overflow-wrap: anywhere; } .plist__main small { color: var(--muted); }
.plist__tags { display: flex; flex-wrap: wrap; gap: 6px; } .plist__tags:empty { display: none; }
.plist > li > a > .ico { color: var(--muted); }
.empty { text-align: center; } .empty h2 { justify-content: center; } .empty p { max-width: 52ch; margin-inline: auto; }
.phead { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; } .phead h1 { margin: 0 0 4px; }
.dupe { padding: 14px 16px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); } .dupe ul { margin: 8px 0 12px; }
.lastv { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 560px) { .lastv { grid-template-columns: 1fr; } .lastv__map { max-width: 240px; } }
.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vlist details { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); }
.vlist summary { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.vlist summary::-webkit-details-marker { display: none; }
.vlist__date { display: grid; } .vlist__date b { font: 600 1.05rem/1.2 var(--font-display); color: var(--ink); } .vlist__date small, .vlist__what small { color: var(--muted); }
.vlist__what { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; }
.vlist__what small { display: inline-flex; gap: 4px; align-items: center; } .vlist__what .ico { width: 16px; height: 16px; }
.vlist__money { text-align: right; font-weight: 700; display: grid; white-space: nowrap; } .vlist__money small { font-weight: 400; font-size: .85rem; }
.vlist__body { padding: 12px 16px 16px; border-top: 1px solid var(--paper-2); }
.consents { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.consents li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.consents b { display: block; font: 600 1.04rem/1.3 var(--font-display); color: var(--ink); } .consents small { color: var(--muted); }
.consents__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--paper); color: var(--muted); }
.consents li.ok .consents__ico { background: var(--ok-soft); color: var(--ok); } .consents li.need .consents__ico { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 520px) { .consents li { grid-template-columns: auto 1fr; } .consents__act { grid-column: 1 / -1; } .consents__act .btn { width: 100%; } }
.staff { display: inline-flex; gap: 6px; align-items: center; font: 500 .92rem/1.2 var(--font-display); color: var(--muted); }
.staff i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }

/* medical history */
.flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-bottom: 14px; }
.flag { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 10px 14px; border: 2px solid var(--line-strong); border-radius: var(--r-sm); background: var(--field); cursor: pointer; font: 500 1rem/1.3 var(--font-display); color: var(--ink); }
.flag input { width: 26px; height: 26px; accent-color: var(--ink); flex: none; }
.flag:has(input:checked) { border-color: var(--ink); background: var(--brand-soft); }
.flag--alert:has(input:checked) { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.flag--alert input { accent-color: var(--danger); }
.js .reveal:not(.is-on) { display: none; }

/* visit */
.vtitle small { display: block; font: 400 1.02rem/1.3 var(--font-body); color: var(--muted); margin-top: 4px; }
.vtoc { position: sticky; top: var(--bar-h); z-index: var(--z-sticky); display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; margin-bottom: 8px; background: var(--paper); scrollbar-width: none; }
.vtoc::-webkit-scrollbar { display: none; }
.vtoc a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap; padding: 9px 14px; border-radius: 999px; background: var(--card); text-decoration: none; font: 600 .9rem/1 var(--font-display); color: var(--ink); }
.vtoc a.on { background: var(--ink); color: var(--on-brand); }
.vform .card { scroll-margin-top: 130px; }
.vform[inert] { opacity: .85; }
.scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.scale label { position: relative; cursor: pointer; } .scale input { position: absolute; opacity: 0; }
.scale span { display: grid; place-items: center; height: 46px; border-radius: 10px; background: var(--paper); font: 600 1rem/1 var(--font-display); color: var(--ink); }
@media (max-width: 520px) { .scale { grid-template-columns: repeat(6, 1fr); gap: 8px; } .scale span { height: 52px; } }   /* 0–5, then 6–10: fingertip-sized */
.scale label:nth-child(n+4) span { background: #fbf0d9; } .scale label:nth-child(n+8) span { background: #f9e0db; }
.scale input:checked + span { background: var(--ink); color: var(--on-brand); }
.scale input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.mapper { display: grid; gap: 12px; margin: 8px 0 14px; }
.mapper__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.mtool { position: relative; cursor: pointer; } .mtool input { position: absolute; opacity: 0; }
.mtool span { display: inline-flex; gap: 8px; align-items: center; padding: 5px 12px 5px 5px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); font: 600 .9rem/1 var(--font-display); color: var(--ink); }
.mtool i { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 14px; background: var(--c); color: #fff; font-style: normal; font-size: .8rem; }
.mtool input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 3px var(--brand-soft); }
.mtool input:focus-visible + span { outline: 3px solid var(--accent); }
.soles { display: block; width: 100%; max-width: 440px; margin: 0 auto; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.soles[data-soles] { cursor: crosshair; }
.soles .sole, .soles .toe { fill: #f1e4d4; stroke: #c6b097; stroke-width: 2; }
.soles__lbl { font: 600 16px var(--font-display); fill: var(--muted); text-anchor: middle; letter-spacing: 0; }
.mark circle { fill: var(--c); stroke: #fff; stroke-width: 2; }
.mark text { fill: #fff; font: 700 9px var(--font-body); text-anchor: middle; pointer-events: none; }
.mark.is-sel circle { stroke: var(--text); stroke-width: 3; }
.mark--callus { --c: #b4661a; } .mark--corn { --c: #a3271f; } .mark--crack { --c: #4a5bb0; }
.mark--wart { --c: #6b4fa0; } .mark--ulcer { --c: #111; } .mark--pain { --c: #c8572f; }
.mapper__sel { padding: 12px; border-radius: var(--r-sm); background: var(--paper); }
.mlist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--edge-1); border-radius: var(--r-sm); overflow: hidden; }
.mlist li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.mlist li:last-child { border-bottom: 0; } .mlist li.is-sel { background: var(--mint-50); }
.mlist__k { flex: 1 1 14em; display: flex; gap: 10px; align-items: center; min-width: 0; } .mlist__k b { font-weight: 600; overflow-wrap: anywhere; }
.mlist__k i { display: grid; place-items: center; flex: none; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 14px; background: var(--c); color: #fff; font: 700 .8rem/1 var(--font-body); font-style: normal; }
.mlist .abtn { min-height: 44px; }
.nailrow { border-top: 1px solid var(--paper-2); }
.nailrow summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 14px 0; cursor: pointer; font: 600 1.04rem/1.3 var(--font-display); color: var(--ink); }
.nailrow summary small { font: 400 .92rem/1.3 var(--font-body); color: var(--accent); }
.nailrow[open] { padding-bottom: 14px; }
.toes { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: center; }
.toes__foot { display: grid; gap: 6px; justify-items: center; }
.toes__side { font: 600 .95rem/1.3 var(--font-display); color: var(--muted); }
.toes__row { display: flex; align-items: flex-end; gap: 6px; }
.toe-cb { position: relative; cursor: pointer; } .toe-cb input { position: absolute; opacity: 0; }
.toe-cb span { position: relative; display: grid; place-items: end center; width: 40px; height: 54px; padding-bottom: 6px; border: 2px solid #c6b097; border-radius: 20px 20px 12px 12px; background: #f1e4d4; font: 600 .85rem/1 var(--font-display); color: var(--muted); }
.toe-cb--1 span { width: 54px; height: 66px; } .toe-cb--2 span { height: 60px; } .toe-cb--4 span { height: 50px; } .toe-cb--5 span { width: 36px; height: 44px; }
.toe-cb span::before { content: ''; position: absolute; top: 6px; left: 50%; translate: -50% 0; width: 55%; height: 32%; border-radius: 10px 10px 6px 6px; background: #fffaf3; border: 1.5px solid #d8c6b0; }
.toe-cb input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.toe-cb input:checked + span::before { background: var(--accent); border-color: var(--accent); }
.toe-cb input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.braces { display: grid; gap: 10px; margin-bottom: 10px; }
.brace { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 12px; border-radius: 16px; background: var(--paper); }
.screen { width: 100%; border-collapse: collapse; }
.screen th, .screen td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--paper-2); }
.screen thead th { font: 600 .9rem/1 var(--font-display); color: var(--muted); } .screen tbody th { font: 500 1rem/1.3 var(--font-display); color: var(--ink); }
.screen select { min-height: 46px; padding: 6px 8px; }
.svc { display: grid; gap: 6px; margin-bottom: 14px; }
.svc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--paper); }
.svc__row > input { min-height: 46px; border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--card); }
.svc__price input { width: 100px; min-height: 46px; text-align: right; border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; font-weight: 700; background: var(--card); }

/* photos */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.pgrid--sm { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.pthumb { margin: 0; display: grid; gap: 6px; }
.pthumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--paper-2); }
.pthumb figcaption { font: 500 .85rem/1.3 var(--font-display); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pcell { position: relative; display: grid; gap: 4px; padding: 8px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.pcell__pick { position: absolute; z-index: 2; top: 14px; left: 14px; } .pcell__pick input { width: 30px; height: 30px; accent-color: var(--accent); }
.pcell__edit summary { cursor: pointer; font: 600 .9rem/1 var(--font-display); color: var(--ink); padding: 8px 0; }
.pick { position: relative; display: grid; gap: 4px; cursor: pointer; }
.pick input { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; accent-color: var(--accent); }
.pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.pick:has(input:checked) img { outline: 4px solid var(--accent); }
.cmp { display: grid; gap: 10px; margin-bottom: 14px; }
.cmp--2, .cmp--4 { grid-template-columns: 1fr 1fr; } .cmp--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .cmp--3 { grid-template-columns: 1fr; } }
.cmp.is-slide { grid-template-columns: 1fr; } .cmp.is-slide > .cmp__frame { display: none; }
.cmp__frame { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-sm); background: #111; aspect-ratio: 3 / 4; touch-action: none; }
.cmp__frame img { width: 100%; height: 100%; object-fit: cover; transform-origin: 0 0; user-select: none; }
.cmp__tools { position: absolute; z-index: 2; top: 8px; right: 8px; display: flex; gap: 6px; }
.cmp__zb { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 8px; border: 0; border-radius: 999px; background: rgb(0 0 0 / .6); color: #fff; font: 700 1.15rem/1 var(--font-display); cursor: pointer; }
.cmp__zb:last-child { font-size: .9rem; }
.cmp__frame:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cmp__frame figcaption { position: absolute; left: 8px; bottom: 8px; padding: 6px 10px; border-radius: 10px; background: rgb(0 0 0 / .6); color: #fff; font: 500 .85rem/1.2 var(--font-display); }
.cmp.has-grid .cmp__frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgb(255 255 255 / .45) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .45) 1px, transparent 1px); background-size: 25% 25%; }
.cmp__slide { --x: 50%; position: relative; overflow: hidden; border-radius: var(--r-sm); background: #111; aspect-ratio: 3 / 4; max-height: 75vh; width: 100%; margin-inline: auto; }
.cmp__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cmp__slide::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; translate: -50% 0; background: #fff; box-shadow: 0 0 8px rgb(0 0 0 / .5); pointer-events: none; }
.cmp__slide input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.cmp__lbl { position: absolute; z-index: 2; top: 10px; padding: 6px 10px; border-radius: 10px; background: rgb(0 0 0 / .6); color: #fff; font: 600 .85rem/1 var(--font-display); }
.cmp__lbl--l { left: 10px; } .cmp__lbl--r { right: 10px; }
.zoomer { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 12px; background: rgb(10 20 18 / .92); }
.zoomer img { max-width: 100%; max-height: 90vh; border-radius: 12px; }
.zoomer button { position: absolute; top: 14px; right: 14px; width: 54px; height: 54px; border-radius: 50%; border: 0; background: #fff; font-size: 1.6rem; cursor: pointer; }

/* signing */
.signpage { background: var(--field); }
.signpage__in { width: min(100% - 28px, 760px); margin: 0 auto; padding: 16px 0 40px; }
.signpage__top { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-bottom: 16px; }
.signpage__text { font-size: 1.18rem; line-height: 1.6; padding: 18px 20px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); margin-bottom: 20px; white-space: pre-line; }
.sigpad { position: relative; border: 3px dashed var(--ink); border-radius: var(--r); background: var(--card); touch-action: none; }
.sigpad canvas { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 360; cursor: crosshair; touch-action: none; }
.sigpad__line { position: absolute; left: 8%; right: 8%; bottom: 24%; border-bottom: 2px solid var(--line); pointer-events: none; }

/* calendar */
.calnav { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-bottom: 10px; }
.daystrip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 4px 2px; list-style: none; }
.daystrip > li { flex: none; display: flex; }
.daystrip::-webkit-scrollbar { display: none; }
.daystrip a { position: relative; flex: none; display: grid; justify-items: center; gap: 2px; width: 50px; padding: 8px 0 10px; border-radius: var(--r-sm); background: var(--card); box-shadow: inset 0 0 0 1px var(--edge-1); text-decoration: none; color: var(--ink); }
.daystrip small { font: 600 .8rem/1 var(--font-display); color: var(--muted); } .daystrip b { font: 600 1.18rem/1 var(--font-display); }
.daystrip i { position: absolute; top: -5px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font: 700 .72rem/20px var(--font-body); font-style: normal; text-align: center; }
.daystrip a.today b { color: var(--brand); }
.daystrip a.today:not(.on)::after { content: ''; position: absolute; bottom: 4px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }   /* today, when another day is open */
.daystrip a.on small, .daystrip a.on b { color: var(--brand-deep); }
.jump { display: inline-flex; margin: 0; }
/* calendar tools that fold away on phones ("More options"); on wide screens they sit in the row as before */
.calmore > summary { list-style: none; cursor: pointer; } .calmore > summary::-webkit-details-marker { display: none; }
.calmore__in { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.calmore[open] { flex-basis: 100%; } .calmore[open] > summary { margin-bottom: 8px; background: var(--mint-50); }
@media (min-width: 641px) {
  .calmore, .calmore[open] { display: contents; }
  .calmore > summary { display: none; }
  .calmore::details-content { display: contents; content-visibility: visible; height: auto; overflow: visible; }
  .calmore__in { display: contents; }
} .jump input, .jump select { min-height: 48px; padding: 8px 10px; width: auto; background: var(--card); }
.agenda { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.ag { --c: var(--brand); display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 14px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); border-left: 6px solid var(--c); }
.ag--done { opacity: .75; } .ag--noshow, .ag--cancelled { opacity: .55; border-left-color: var(--danger); }
.ag--block { background: repeating-linear-gradient(-45deg, var(--card), var(--card) 10px, var(--paper) 10px, var(--paper) 20px); }
.ag--now { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.ag__time { display: grid; align-content: start; text-decoration: none; color: var(--ink); }
.ag__time b { font: 600 1.22rem/1.1 var(--font-display); } .ag__time small { color: var(--muted); }
.ag__body { display: grid; gap: 6px; min-width: 0; }
.ag__name { font: 600 1.12rem/1.25 var(--font-display); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ag__body > small { color: var(--muted); }
.ag__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ag__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .ag__act form { margin: 0; }
.gap a { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border: 2px dashed var(--line); border-radius: 16px; text-decoration: none; color: var(--muted); font: 600 1rem/1.2 var(--font-display); }
@media (hover: hover) { .gap a:hover { border-color: var(--brand); color: var(--brand); } }
.remind { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.remind li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--r-sm); background: var(--paper); }
.remind form { display: flex; gap: 6px; margin: 0; } .remind li.is-sent { opacity: .5; }
/* Ready-made messages (macros.html msg_tag / msg_alt): the language a button sends in, and the small second action for
   the patient's own language. They only appear when that language differs from the app's; the rows then wrap. */
.remind form, .msgform, .msgalt { flex-wrap: wrap; }
.msgform { display: flex; gap: var(--s2); align-items: center; margin: 0; }
.card--actions .msgform { grid-column: 1 / -1; }   /* on phones the reminder and its second language get their own row */
.msglang { font: 500 .86rem/1 var(--font-body); color: var(--muted); white-space: nowrap; }
.msglang::before { content: '· '; }
.msgalt { display: inline-flex; align-items: center; gap: 6px; }
.msgalt__k { font: 600 .92rem/1.2 var(--font-display); color: var(--muted); }
.abtn--lang { min-height: 48px; padding-inline: 12px; }
.todo__alt { margin: 0; padding: 0 14px 14px; }
.todo .todo__alt .abtn { display: inline-flex; gap: 8px; padding: 10px 14px; border-radius: var(--r-pill); background: var(--card); color: var(--ink); }
/* calendar grids: day (one column per person) and week (one column per day). Positions come from minutes:
   --m start, --d length, --b clean-up after, --lo first minute shown, --ppm pixels per minute. */
.cg, .week { --head: 54px; display: grid; gap: 4px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 10px; -webkit-overflow-scrolling: touch; }
.cg { grid-template-columns: 52px; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); }
.week { grid-template-columns: 52px repeat(7, minmax(108px, 1fr)); }
.cg__hours, .week__hours { position: sticky; left: 0; z-index: 4; background: var(--paper); font: 500 .78rem/1 var(--font-display); color: var(--muted); }
.cg__ticks, .week__ticks { position: relative; height: calc(var(--span) * var(--ppm)); }
.cg__ticks span, .week__ticks span { position: absolute; right: 6px; top: calc((var(--m) - var(--lo)) * var(--ppm) - 6px); }
.week__headspace { display: block; height: calc(var(--head) + 4px); }
.cg__head { display: grid; gap: 2px; align-content: center; height: var(--head); margin-bottom: 4px; padding: 0 10px; border-radius: 12px; background: var(--card); }
.cg__hours .cg__head { background: none; }
.cg__head .staff { color: var(--ink); font-weight: 600; } .cg__head small { color: var(--muted); font: 500 .78rem/1 var(--font-display); }
.week__head { display: grid; justify-items: center; align-content: center; height: var(--head); margin-bottom: 4px; border-radius: 12px; background: var(--card); text-decoration: none; color: var(--ink); }
.week__head small { font: 600 .8rem/1 var(--font-display); color: var(--muted); } .week__head b { font: 600 1.18rem/1.1 var(--font-display); }
.week__day.today .week__head { background: var(--ink); color: var(--on-brand); } .week__day.today .week__head small { color: #b9d0ca; }
.cg__col, .week__col { position: relative; height: calc(var(--span) * var(--ppm)); border-radius: 12px; background-color: var(--paper-2);
  background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% calc(60 * var(--ppm)); }  /* --lo is a whole hour, so the lines meet the hours */
.cg__col--off { background-color: #ece8de; }
.cg__open, .cg__break, .cg__slot, .cgi, .cg__now { position: absolute; left: 0; right: 0; top: calc((var(--m) - var(--lo)) * var(--ppm)); }
.cg__open, .cg__break, .cg__slot { height: calc(var(--d) * var(--ppm)); }
.cg__open { background: color-mix(in srgb, var(--card) 80%, transparent); }
.cg__break { background: repeating-linear-gradient(135deg, rgb(21 60 48 / .07) 0 6px, transparent 6px 12px); }
.cg__break small { position: absolute; top: 2px; left: 8px; font: 500 .72rem/1 var(--font-display); color: var(--muted); }
.cg__slot { z-index: 1; } @media (hover: hover) { .cg__slot:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); } }
.cg__now { z-index: 3; height: 0; border-top: 2px solid var(--accent); pointer-events: none; }
.cg__now::before { content: ''; position: absolute; left: -4px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
/* a booking: a pale tint of the specialist's colour, ink words (readable at any size), the colour itself as the left edge */
.cgi { --c: var(--brand); z-index: 2; left: 3px; right: 3px; height: calc(var(--d) * var(--ppm) - 2px); min-height: 22px; border-radius: 8px;
  background: color-mix(in srgb, var(--c) 12%, var(--card)); color: var(--ink); text-decoration: none; border-left: 4px solid var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, var(--rim));
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cgi::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--b) * var(--ppm)); border-radius: 0 0 8px 8px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, transparent) 0 4px, transparent 4px 8px); pointer-events: none; }
.cgi__in { display: grid; align-content: start; gap: 1px; height: 100%; overflow: hidden; padding: 4px 6px; font: 500 .85rem/1.25 var(--font-display); }
.cgi__in b { font-weight: 700; font-size: .85rem; } .cgi__in small { color: var(--muted); font-size: .85rem; } .cgi__name { font-weight: 600; overflow-wrap: anywhere; }
.cgi__in .pill-s { justify-self: start; font-style: normal; }
.cgi--sm .cgi__in { display: block; font-size: .85rem; } .cgi--sm .cgi__top { display: inline-flex; }
.cgi__top { display: flex; flex-wrap: wrap; gap: 2px 5px; align-items: center; }
.cgi__warn, .cgi__st { display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; border-radius: 8px; font: 700 .8rem/1.45 var(--font-display); font-style: normal; }
.cgi__warn { background: var(--danger-soft); color: var(--danger); } .cgi__warn .ico { width: 13px; height: 13px; }
.cgi__st { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge-1); }
/* status in words (above) and in tone: done is quiet, no-show is red, busy time is grey; never a faded block */
.cgi--done { background: var(--raised); color: var(--muted); border-left-color: color-mix(in srgb, var(--c) 45%, var(--card)); box-shadow: inset 0 0 0 1px var(--edge-1); }
.cgi--noshow { background: var(--danger-soft); color: var(--danger); border-left-color: var(--danger); box-shadow: inset 0 0 0 1px #f0c8c3; }
.cgi--noshow .cgi__name { text-decoration: line-through; text-decoration-thickness: 1px; }
.cgi--block { background: var(--paper-2); color: var(--ink); border-left-color: var(--control); box-shadow: none; }
.cg__closed { position: absolute; z-index: 1; top: 10px; left: 0; right: 0; text-align: center; font: 600 .9rem/1.2 var(--font-display); color: var(--muted); pointer-events: none; }
.cgi[data-movable] { cursor: grab; }
.cgi__resize { position: absolute; left: 20%; right: 20%; bottom: -3px; height: 12px; cursor: ns-resize; }
.cgi__resize::after { content: ''; position: absolute; left: calc(50% - 12px); bottom: 5px; width: 24px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--c) 45%, var(--card)); }
.cgi.is-drag { z-index: 6; cursor: grabbing; box-shadow: 0 10px 24px rgb(21 60 48 / .28); opacity: .95; scale: 1.03; transition: scale var(--dur-fade) var(--ease); }
.cgi.is-saving { opacity: .6; }
.cgi.is-pressed { scale: .97; transition: scale 420ms linear; }   /* sinks for as long as the hold takes, then lifts */
.cgi { -webkit-user-drag: none; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--card); border: 2px solid var(--line); }
.cmp ~ .seg, .card > .seg, .row > .seg { margin-bottom: var(--s3); }
.seg a, .seg button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 0; border-radius: var(--r-pill); background: none; text-decoration: none; color: var(--ink); font: 600 .95rem/1 var(--font-display); cursor: pointer; transition: background-color var(--dur-ui), color var(--dur-ui); }
.seg a.on, .seg button.on, .seg [aria-current=page], .seg [aria-pressed=true], .seg [aria-selected=true] { background: var(--brand); color: var(--on-brand); }

/* money */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--text); }
.kpi small { font: 600 .95rem/1.2 var(--font-display); color: var(--muted); } .kpi b { font: 600 1.55rem/1.1 var(--font-display); color: var(--ink); white-space: nowrap; }
.kpi span { font-size: .92rem; color: var(--muted); }
.kpi--deep { background: var(--ink); } .kpi--deep b, .kpi--deep small { color: #fff; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; height: 220px; }
.bars li { min-height: 0; }
.bars a { display: grid; grid-template-rows: auto 1fr auto auto; height: 100%; gap: 4px; text-decoration: none; color: var(--text); text-align: center; }
.bars__v { font: 600 .7rem/1.1 var(--font-display); color: var(--muted); }
.bars__bar { align-self: end; height: max(var(--h), 3px); border-radius: 8px 8px 3px 3px; background: color-mix(in srgb, var(--brand) 55%, var(--card)); }
.bars li.on .bars__bar { background: var(--brand); }
.bars small { font: 600 .8rem/1 var(--font-display); }
.card .dl dd { white-space: nowrap; }
.debts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.debts li { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-sm); background: var(--paper); }
.debts a { display: grid; text-decoration: none; color: var(--ink); } .debts a small { color: var(--muted); }
.debts__sum { font-weight: 700; color: var(--danger); }
.debts form { grid-column: 1 / -1; display: flex; gap: 8px; margin: 0; } .debts select { width: auto; min-height: 46px; padding: 6px 10px; }
.resume { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; padding: 18px 20px; margin-bottom: 18px; border-radius: var(--r); background: linear-gradient(135deg, #22805f, var(--brand) 55%, var(--brand-deep)); color: var(--on-brand); text-decoration: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 16px 30px -18px color-mix(in srgb, var(--brand) 80%, transparent); }
.resume > .ico { width: 34px; height: 34px; padding: 6px; border-radius: 12px; background: rgb(255 255 255 / .16); box-sizing: content-box; }
.resume b { display: block; font: 600 1.25rem/1.25 var(--font-display); } .resume small { display: block; font: 600 .95rem/1.2 var(--font-display); opacity: .9; }
.resume__go { grid-column: 1 / -1; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 52px; padding: 10px 18px; border-radius: 999px; background: var(--card); color: var(--brand); font: 600 1.05rem/1.1 var(--font-display); }
@media (min-width: 640px) { .resume { grid-template-columns: auto 1fr auto; } .resume__go { grid-column: auto; } }
.dash__date { margin: 0 0 4px; font: 600 1rem/1.3 var(--font-display); color: var(--muted); }
.dash { display: grid; gap: 0 20px; }
.dash__side .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 1180px) {
  .main:has(> .dash) { width: min(100% - 48px, 1240px); }
  .dash { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); align-items: start; }
  .dash__side .kpis { grid-template-columns: 1fr 1fr; } .dash__side .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.today__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; } .today__head h2 { margin: 0; }
.today__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.today__list a { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 14px 16px 14px 18px; border-radius: 16px; background: var(--card); text-decoration: none; color: var(--text); box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--c, var(--brand)); transition: box-shadow .14s; }

.today__time { align-self: start; min-width: 64px; padding: 8px 0; border-radius: 12px; background: var(--paper); text-align: center; font: 600 1.15rem/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.today__who { display: grid; min-width: 0; font: 600 1.08rem/1.3 var(--font-display); color: var(--ink); }
.today__who small { font: 400 .98rem/1.35 var(--font-body); color: var(--muted); }
.today__meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.today__meta:not(:has(*)) { display: none; }
.today__list li.next a { background: var(--sky); box-shadow: inset 0 0 0 2px var(--mint-3), inset 4px 0 0 var(--brand); }
.today__list li.next .today__time { background: var(--card); color: var(--sky-ink); }
.today__list li.past a { background: var(--paper); }
.today__list li.past .today__who, .today__list li.past .today__time { color: var(--muted); }
.pill-s--next { background: var(--card); color: var(--sky-ink); box-shadow: inset 0 0 0 1.5px var(--mint-3); }

/* settings */
.hours { display: grid; gap: 10px; }
.hours__row { display: grid; grid-template-columns: 1fr 110px auto 110px; gap: 10px; align-items: center; }
.hours__row input { min-height: 48px; padding: 8px; }
@media (max-width: 520px) { .hours__row { grid-template-columns: 1fr auto 1fr; } .hours__row .check { grid-column: 1 / -1; } }
.svclist { display: grid; gap: 8px; }
.svclist__head, .svclist__row { display: grid; grid-template-columns: 2fr 1.2fr 90px 80px 80px 44px; gap: 8px; align-items: center; }
.svclist__who { grid-column: 1 / -1; font-size: .92rem; } .svclist__who summary { cursor: pointer; color: var(--muted); padding: 2px 0; } .svclist__who .pills { margin-top: 8px; }
.svclist__head { font: 600 .82rem/1 var(--font-display); color: var(--muted); }
.svclist__row input { min-height: 46px; padding: 8px 10px; font-size: 1rem; }
.svclist__row.off { opacity: .55; }
@media (max-width: 640px) { .svclist__head { display: none; } .svclist__row { grid-template-columns: 1fr 1fr; padding: 10px; border-radius: 12px; background: var(--paper); } .svclist__row input:first-child { grid-column: 1 / -1; } }
.team { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.team li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-sm); background: var(--paper); }
.team li > .row { grid-column: 1 / -1; margin: 0; } .team li.off { opacity: .6; }
.team b { display: block; font: 600 1.04rem/1.2 var(--font-display); color: var(--ink); } .team small { color: var(--muted); }
.team select { width: auto; min-height: 46px; padding: 6px 10px; }
/* Locations (locations.py): the list in settings, who works where, and the location pickers next to the filters */
.locs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.locs li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-sm); background: var(--paper); }
.locs li.off { opacity: .7; }
.locs__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.locs__ic svg { width: 22px; height: 22px; }
.locs__txt { display: grid; gap: 2px; min-width: 0; } .locs__txt b { font: 600 1.06rem/1.25 var(--font-display); color: var(--ink); }
.locs__txt small { color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 520px) { .locs li { grid-template-columns: auto 1fr; } .locs li > .abtn { grid-column: 1 / -1; justify-self: start; } }
.locteam { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.locteam li { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--paper); }
.locteam .check { display: flex; align-items: center; gap: 10px; } .locteam .avatar { width: 34px; height: 34px; font-size: .9rem; }
.locteam small { color: var(--muted); padding-left: 32px; }
.locpick select { width: auto; max-width: 15rem; }
.hours__loc { grid-column: 1 / -1; min-height: 42px; padding: 6px 10px; width: auto; justify-self: end; }
@media (min-width: 760px) { .hours__row--br:has(.hours__loc) { grid-template-columns: 1fr 100px auto 100px auto auto; } .hours__loc { grid-column: auto; } }
.sch__loc { display: block; font: 600 .62rem/1.1 var(--font-body); color: var(--brand); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
/* a split day: later the same day at a second place (2+ locations only) */
.hours__split { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; color: var(--muted); }
.hours__split select { width: auto; max-width: 100%; min-width: 0; flex: 0 1 auto; min-height: 42px; padding: 6px 10px; }
.hours__split:has(option[value=""]:checked) input { opacity: .45; } /* no second place: its times are only a default */
.hours__split input { width: 100px; min-height: 42px; padding: 6px; }
.schsplit__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.schsplit__row select { width: auto; flex: 1 1 12rem; }
.sch__loc span { display: block; }
.schsplit__t { display: flex; gap: 6px; align-items: center; flex: 1 1 16rem; }
.schsplit__t input { flex: 1 1 0; min-width: 0; }
.plans { display: grid; gap: 14px; } @media (min-width: 700px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan h2, .plan h3 { margin-bottom: 4px; }
.plan__price { font: 600 1.6rem/1.2 var(--font-display); color: var(--ink); margin: 6px 0 10px; } .plan__price small { font-size: .55em; color: var(--muted); }
.tablewrap { overflow-x: auto; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--paper-2); white-space: nowrap; }
.tbl th { font: 600 .82rem var(--font-display); color: var(--muted); }

/* ---------------------------------------------------------------- sign-in pages */
.authpage { min-height: 100vh; background: radial-gradient(120% 70% at 50% 0%, var(--brand-soft), var(--paper) 60%); }
.auth { width: min(100% - 28px, 460px); margin: 0 auto; padding: 6vh 0 40px; display: grid; gap: 18px; }
.auth__brand { display: flex; gap: 12px; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); font: 500 1.6rem/1 var(--font-display); }
.auth__card { padding: 26px 22px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
.auth__card h1 { font-size: 1.7rem; }
.auth__alt { margin: 14px 0 0; text-align: center; }
.auth__langs { display: flex; gap: 14px; justify-content: center; font: 600 .95rem var(--font-display); }
.auth__langs a { color: var(--muted); text-decoration: none; } .auth__langs a.on { color: var(--ink); text-decoration: underline; }
/* sign-in: the e-mail link is the quieter second way in, under a thin "or" line */
.auth__or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted); font-size: .92rem; }
.auth__or::before, .auth__or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth__swap { width: 100%; justify-content: center; }
.auth__swap .ico { width: 20px; height: 20px; color: var(--brand); }
.auth__sent { text-align: center; }
.auth__sent-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.auth__sent-icon .ico { width: 30px; height: 30px; }
.auth__sent .hint { margin-top: 10px; }

/* ---------------------------------------------------------------- product site */
.site { background: var(--card); }
.site main { overflow-x: clip; }
.shead { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 12px max(16px, calc((100% - 1160px) / 2)); border-radius: 0; --glass-tint: rgb(255 255 255 / .74); --glass-tint-2: rgb(255 255 255 / .6); }
.shead.glass::before, .shead.glass::after { display: none; }
.shead__brand { display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; }
.shead__brand .wordmark { font-size: 1.45rem; }
.shead__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; font: var(--w-label) .98rem var(--font-display); }
.shead__nav a:not(.btn) { color: var(--ink); text-decoration: none; padding: 8px 0; }
.shead__nav .btn { min-height: 46px; padding: 8px 20px; }
.eyebrow { font: var(--w-bold) .9rem/1 var(--font-display); color: var(--brand); }
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
.sfoot { padding: 34px 16px calc(34px + env(safe-area-inset-bottom)); background: var(--deep); color: #c9d8d3; }
.sfoot__in { width: min(100%, 1160px); margin: 0 auto; display: grid; gap: 18px; }
@media (min-width: 760px) { .sfoot__in { grid-template-columns: 2fr 1fr 1fr; } }
.sfoot b { color: #fff; font: 500 1.2rem var(--font-display); } .sfoot a { color: #fff; }
.sfoot nav { display: grid; gap: 8px; align-content: start; } .sfoot nav a { text-decoration: none; } .sfoot nav a.on { text-decoration: underline; }
.legal { width: min(100% - 32px, 820px); margin: 0 auto; padding: 40px 0 60px; }
.legal h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); } .legal h2 { display: block; margin-top: 1.6em; }
.legal__draft { padding: 12px 16px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-weight: 700; }

/* ---------------------------------------------------------------- printable report and consent */
.report { background: var(--paper); }
.report__bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; padding: 14px; }
.report__bar form { margin: 0; }
.sheet { width: min(100% - 24px, 800px); margin: 0 auto 40px; padding: 40px 44px; background: var(--card); box-shadow: var(--shadow); color: var(--text); }
.sheet h1 { font-size: 1.8rem; margin: 18px 0 10px; } .sheet h2 { display: block; font-size: 1.12rem; margin: 18px 0 6px; color: var(--ink); }
.sheet__head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-size: .92rem; }
.sheet__brand { font: 600 1.35rem/1.2 var(--font-display); color: var(--ink); } .sheet__contact { text-align: right; }
.sheet__meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; } .sheet__meta dt { color: var(--muted); } .sheet__meta dd { margin: 0; font-weight: 700; }
.sheet__found { display: grid; grid-template-columns: 1fr 220px; gap: 18px; align-items: start; }
@media (max-width: 600px) { .sheet { padding: 24px 18px; } .sheet__found { grid-template-columns: 1fr; } }
.sheet__toes { margin: 4px 0 8px; break-inside: avoid; } .sheet__toes .toeboard__legend { font-size: .86rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.sheet__map { margin: 0; } .sheet__map figcaption { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .82rem; }
.sheet__map i { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 10px; background: var(--c); color: #fff; font: 700 .7rem var(--font-body); font-style: normal; }
.sheet__advice { white-space: pre-line; padding: 12px 14px; border-left: 4px solid var(--brand); background: var(--brand-soft); }
.sheet__next { font-size: 1.08rem; } .sheet__small { font-size: .88rem; color: var(--muted); margin-top: 24px; }
.sheet__sign { margin-top: 36px; text-align: right; font-weight: 700; } .sheet__sign span { display: block; width: 220px; margin: 34px 0 0 auto; border-top: 1px solid var(--text); }
.sheet__text { white-space: pre-line; font-size: 1.04rem; line-height: 1.6; }
.sheet__sig { margin-top: 24px; } .sheet__sig img { max-width: 340px; width: 100%; border-bottom: 1px solid var(--text); }
.sheet__revoked { color: var(--danger); font-weight: 700; }
@media print {
  .noprint, .tabbar, .rail, .top { display: none !important; }
  body, .report { background: #fff; } .sheet { box-shadow: none; width: 100%; padding: 0; margin: 0; }
  @page { margin: 16mm; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-property: color, background-color, border-color, opacity !important; scroll-behavior: auto !important; }
  .spinner { animation: pulse 1.6s ease-in-out infinite !important; animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
  /* "reduce motion" is not "no feedback": dialogs, toasts and the saving overlay still fade in and out, briefly, in place */
  .dlg[open], .dlg[open]::backdrop, .toast:not(.is-in), .busy:not([hidden]) { animation: fade-in var(--dur-fade) ease-out !important; }
  .dlg.is-closing, .dlg.is-closing::backdrop, .toast.is-leaving { animation: fade-out var(--dur-fade) ease-in forwards !important; }
}
@keyframes pulse { 50% { opacity: .35; } }

/* ---------------------------------------------------------------- platform admin (/admin) */
.opbar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 12px max(14px, calc((100% - 1280px) / 2)); background: var(--ink); color: var(--on-brand); }
.opbar__brand { display: inline-flex; gap: 10px; align-items: center; color: #fff; text-decoration: none; font: 600 1.1rem/1 var(--font-display); }
.opbar__brand small { font-size: .75rem; padding: 3px 8px; border-radius: 999px; background: var(--accent); vertical-align: middle; }
.opbar__nav { display: flex; gap: 6px; flex: 1; }
.opbar__nav a { padding: 10px 14px; border-radius: 999px; color: #fff; text-decoration: none; font: 600 .95rem/1 var(--font-display); }
.opbar__nav a.on { background: rgb(255 255 255 / .16); }
.opbar form { margin: 0; } .opbar .abtn { min-height: 40px; }
.opgrid h2 { margin-top: 0; }
.opact { margin: 10px 0; } .opact > summary { list-style: none; } .opact > summary::-webkit-details-marker { display: none; }
.opact[open] > summary { margin-bottom: 10px; border-color: var(--ink); }
.tablewrap--flat { box-shadow: none; } .tbl td form { display: inline-block; margin: 2px 4px 2px 0; } .tbl td .abtn { min-height: 38px; padding: 6px 12px; font-size: .88rem; }
.oplog { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .oplog time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.opnote { margin-top: 28px; font-size: .9rem; }
@media (min-width: 900px) { .opgrid { grid-template-columns: 1fr 1fr; } }
.opgrid .dl dd { white-space: normal; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- demo mode (PJ_DEMO=1) */
.demobar { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--warm-soft); color: var(--warm); font: 600 .9rem/1.35 var(--font-display); }
.auth__card.demo { margin-bottom: 14px; border: 2px dashed var(--warm); }
.auth__card.demo p { margin: 0 0 12px; }
.demo__alt { width: 100%; justify-content: center; margin-top: 10px; }
.availbox { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.avail { display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--field); cursor: pointer; text-align: left; font: 500 .9rem/1.2 var(--font-display); color: var(--ink); }
.avail i { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.avail small { color: var(--muted); }
.avail--free small { color: var(--ok); font-weight: 700; }
.avail--busy, .avail--off, .avail--no_service, .avail--hours, .avail--break { border-style: dashed; background: var(--raised); }   /* not free: a dashed edge and the reason in words, the text stays at full strength */
.avail--busy small, .avail--break small { color: var(--warm); }
.avail.on { border-color: var(--ink); background: var(--card); opacity: 1; }

/* work schedule */
.sch { overflow-x: auto; margin: 0 0 8px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
.sch__t { border-collapse: separate; border-spacing: 2px; font: 500 .74rem/1.15 var(--font-display); }
.sch__t th, .sch__t td { padding: 0; text-align: center; }
.sch__t thead th { min-width: 46px; color: var(--muted); }
.sch__t thead button { display: grid; width: 100%; padding: 4px 0; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; cursor: pointer; }
.sch__t thead b { font-size: .95rem; color: var(--ink); }
.sch__t .we small, .sch__t .we b { color: var(--warm); }
.sch__t thead .today button, .sch__t thead .today { background: var(--ink); border-radius: 8px; } .sch__t thead .today * { color: var(--on-brand); }
.sch__who { position: sticky; left: 0; z-index: 2; min-width: 120px; padding: 0 8px !important; background: var(--card); text-align: left !important; }
.sch__who button { padding: 8px 0; border: 0; background: none; cursor: pointer; text-align: left; }
.sch__who .staff { color: var(--ink); font-weight: 600; }
.sch__c { position: relative; display: grid; align-content: center; min-height: 46px; min-width: 46px; padding: 3px 2px; border-radius: 8px; background: var(--brand-soft); cursor: pointer; }
.sch__c input { position: absolute; opacity: 0; pointer-events: none; }
.sch__c b { font-weight: 600; color: var(--ink); } .sch__c b + b { color: var(--muted); }
.sch__c.is-day { background: #f5dfc8; } .sch__c.is-off { background: var(--paper-2); color: var(--muted); }
.sch__c:has(input:checked) { outline: 3px solid var(--ink); outline-offset: -3px; background: var(--card); }
.sch__c em { position: absolute; top: -4px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand); color: var(--on-brand); font: 700 .64rem/16px var(--font-body); font-style: normal; }
.sch__br { position: absolute; left: 3px; top: 0; font-style: normal; color: var(--accent); }
.sch__sum { min-width: 60px; padding: 0 8px !important; color: var(--muted); }
.sch__legend .sch__c { display: inline-block; min-height: 14px; min-width: 22px; vertical-align: middle; cursor: default; }
.sch__legend em { display: inline-block; padding: 0 5px; border-radius: 8px; background: var(--brand); color: var(--on-brand); font-style: normal; font-size: .72rem; }
.schpanel { margin-top: 12px; }
.brow { display: grid; grid-template-columns: 110px auto 110px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.brow input { min-height: 46px; padding: 8px; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--field); font: inherit; }
.weekcard summary { cursor: pointer; display: flex; gap: 10px; align-items: center; }
.hours__row--br { grid-template-columns: 1fr 100px auto 100px; }
.hours__br { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; justify-content: flex-end; color: var(--muted); }
.hours__br input { width: 100px; min-height: 42px; padding: 6px; }
@media (min-width: 760px) { .hours__row--br { grid-template-columns: 1fr 100px auto 100px auto; } .hours__br { grid-column: auto; } }
/* a phone: the day name on its own line, the two times share the width (the break, place and second place wrap below) */
@media (max-width: 520px) {
  .hours__row--br { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .hours__row--br .check { grid-column: 1 / -1; }
  .hours__row--br > input[type="time"] { width: 100%; min-width: 0; }
  .hours__loc { max-width: 100%; }
}
@media (max-width: 520px) { .brow { grid-template-columns: 1fr auto 1fr; } .brow input[name^=btitle] { grid-column: 1 / -1; } }
.card--requests { background: var(--sky); box-shadow: var(--edge), inset 4px 0 0 var(--sky-ink); }
.card--requests .reqs li { background: var(--card); }
.reqs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.reqs li { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-sm); background: var(--paper); }
.reqs a { text-decoration: none; color: var(--ink); } .reqs small { display: block; color: var(--muted); }
.reqs .row { margin: 0; }
.slugrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .slugrow small { color: var(--muted); font-weight: 500; overflow-wrap: anywhere; } .slugrow input { flex: 1; min-width: 160px; }
.check--big { font-size: 1.1rem; margin-bottom: 12px; }
textarea.code { width: 100%; font: 500 .82rem/1.4 ui-monospace, Menlo, monospace; padding: 10px; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }

/* public booking page (/rezerva/<slug>) */
.bookpage { background: radial-gradient(90% 420px at 85% -60px, rgb(166 214 196 / .45), transparent 70%), radial-gradient(70% 360px at 0% -40px, rgb(207 240 223 / .55), transparent 70%), var(--paper) no-repeat; }
.bhead { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 14px max(16px, calc((100% - 1040px) / 2)); padding-top: max(14px, env(safe-area-inset-top)); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 1px 0 rgb(21 60 48 / .08); color: var(--ink); }
@media (max-width: 639px) { .bhead { position: static; } }   /* on a phone the tall header scrolls away, so it never covers a step's title */
.bhead__in { display: grid; gap: 2px; min-width: 0; } .bhead__in b { font: 600 1.3rem/1.2 var(--font-display); } .bhead__in small { color: var(--muted); font-size: .98rem; } .bhead a { color: var(--brand); font-weight: 700; }
.bhead__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bhead__big { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--card); font: 600 .95rem/1 var(--font-display); color: var(--ink); cursor: pointer; }
.bhead__big span { font: 600 .9rem/1 var(--font-display); } .bhead__big span b { font-size: 1.25em; }
.bhead__big[aria-pressed=true] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.bhead__langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); }
.bhead__langs a { display: grid; place-items: center; min-width: 48px; min-height: 44px; border-radius: 999px; text-decoration: none; color: var(--ink) !important; font: 600 .95rem/1 var(--font-display); }
.bhead__langs a.on { background: var(--brand); color: var(--on-brand) !important; }
.bmain { width: min(100% - 32px, 1040px); margin: 0 auto; padding: 26px 0 40px; }
.bmain h1 { margin: 0 0 8px; }
.bflow { display: grid; gap: 24px; } .bflow > * { min-width: 0; }
.bsummary { display: none; }
@media (min-width: 960px) {
  .bflow { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .bsummary { display: block; position: sticky; top: 104px; padding: 22px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
}
.bsummary h2 { font-size: 1.15rem; margin-bottom: 12px; }
.bsummary dl { display: grid; gap: 4px; margin: 0 0 14px; }
.bsummary dt { font: 600 .9rem/1.2 var(--font-display); color: var(--muted); margin-top: 8px; }
.bsummary dd { margin: 0; display: grid; font: 600 1.08rem/1.35 var(--font-display); color: var(--ink); } .bsummary dd small { font: 400 .98rem/1.4 var(--font-body); color: var(--muted); }
.bsummary__call { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); }
.bstep { margin: 0 0 16px; padding: 22px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
.bstep h2 { display: flex; gap: 12px; align-items: center; font-size: 1.25rem; margin: 0 0 14px; }
.bstep h2 span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent); font-size: 1rem; }
.bstep h3 { margin: 18px 0 10px; font-size: 1.1rem; }
@media (max-width: 480px) { .bstep { padding: 18px 16px; } }
.bchoices { display: grid; gap: 10px; } .bchoices--row { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.bchoice { display: grid; gap: 2px; min-height: 56px; align-content: center; padding: 14px 16px; border: 2px solid var(--line-strong); border-radius: 16px; background: var(--card); text-decoration: none; color: var(--ink); transition: border-color .14s, background-color .14s; }
@media (hover: hover) { .bchoice:hover { border-color: var(--brand); } }
.bchoice b { font: 600 1.08rem/1.25 var(--font-display); } .bchoice small { color: var(--muted); font-size: .98rem; }
.bchoice.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }
.bchoice.on b::before { content: '✓ '; color: var(--brand); }
.bchoices--where { row-gap: 20px; } .bwhere { display: grid; gap: 4px; } .bwhere .bchoice { min-height: 76px; }   /* "Where?": each location with its address */
.bwhere__map { justify-self: start; display: inline-flex; gap: 6px; align-items: center; padding: 6px 4px; color: var(--brand); font-weight: 600; }
.bwhere__map svg { width: 18px; height: 18px; }
@media (min-width: 720px) { .bchoices--where { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
.bdays { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; align-items: stretch; }
.bday, .bdays__nav { flex: none; display: grid; justify-items: center; align-content: center; gap: 3px; width: 64px; min-height: 76px; padding: 8px 0; border-radius: 18px; background: var(--card); border: 2px solid var(--line-strong); text-decoration: none; color: var(--ink); }
.bday small, .bday i { font: 600 .8rem/1 var(--font-display); color: var(--muted); font-style: normal; } .bday b { font: 600 1.35rem/1 var(--font-display); }
.bday.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--brand) 80%, transparent); } .bday.on small, .bday.on i { color: #e3f2eb; }
.bday--off { background: var(--raised); border: 2px solid var(--edge-1); color: var(--muted); }   /* no free time: said in a word ("full"), not a fade */
.bday--off b { color: var(--muted); }
.bdays__nav { width: 52px; font: 600 1.3rem/1 var(--font-display); background: var(--brand-soft); border-color: var(--mint-3); color: var(--brand); }
.bslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.bslot { display: grid; place-items: center; min-height: 56px; border-radius: 16px; border: 2px solid var(--line-strong); background: var(--card); text-decoration: none; color: var(--ink); font: 600 1.12rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.bslot.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
@media (hover: hover) { .bslot:not(.on):hover { border-color: var(--brand); background: var(--brand-soft); } }
.bsum { font-size: 1.05rem; padding: 14px 16px; border-radius: 16px; background: var(--sky); color: var(--ink); } .bsum__when { font: 600 1.3rem/1.3 var(--font-display); color: var(--ink); }
.bfoot { padding: 20px 16px 30px; text-align: center; color: var(--muted); }
.btn--big { min-height: 58px; font-size: 1.12rem; }
.bchange { justify-self: start; display: inline-flex; align-items: center; min-height: 48px; padding: 4px 2px; font: 600 1rem/1.2 var(--font-display); }
.paylist { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 6px; }
.paylist li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--paper); }
.paylist small { grid-column: 2; text-align: right; color: var(--muted); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger tr.payment td { color: var(--ok); } .ledger tr.payment td:last-child, .ledger tr.payment td:nth-child(5) { color: var(--ink); }
.chiplist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chiplist li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--paper); }
.chiplist form { margin: 0; } .chipx { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--card); cursor: pointer; font-size: 1rem; }
.filelist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.filelist li { display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: var(--r-sm); background: var(--card); box-shadow: var(--shadow); }
.filelist form { margin: 0; }
.filelist__open { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); }
.filelist__open > span:last-child { display: grid; min-width: 0; } .filelist__open b { overflow-wrap: anywhere; } .filelist__open small { color: var(--muted); }
.filelist img, .filelist__ext { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.filelist__ext { display: grid; place-items: center; background: var(--paper-2); font: 700 .78rem/1 var(--font-display); color: var(--ink); }
.delta { font: 700 .8rem/1 var(--font-display); } .delta.up { color: var(--ok); } .delta.down { color: var(--danger); }
.kpi--deep .delta { color: #cfe0db; }
.jumpsel { min-height: 46px; padding: 8px 10px; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--card); font: inherit; }
.bars--12 { grid-template-columns: repeat(12, 1fr); gap: 4px; }
.bars--12 li { display: grid; grid-template-rows: auto 1fr auto auto; height: 100%; gap: 3px; text-align: center; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hbars li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.hbars span { font-weight: 600; } .hbars b { text-align: right; } .hbars small { grid-column: 2; color: var(--muted); text-align: right; }
.hbars i { grid-column: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--brand) var(--w), var(--paper-2) var(--w)); }

/* ---------------------------------------------------------------- editorial layer (mockup): serif for greetings and big headings,
   tracked labels for context lines. Controls, dates and clinical text stay in Atkinson. */
.ed { font-family: var(--font-editorial); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; font-optical-sizing: auto; color: var(--ink); }
.ed b, .ed strong { font-weight: 560; }
.over { margin: 0 0 6px; font: var(--w-label) .86rem/1.3 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ================================================================ mint liquid glass (mockup) — Today, assistant, voice note */
.btn--dark { --bg: var(--ink); --bg-2: #1f4d3f; }
.btn--glass { --fg: var(--brand); background: radial-gradient(140px 90px at var(--mx) var(--my), var(--card), transparent 70%), color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent), 0 8px 20px -14px rgb(21 60 48 / .45); }
.btn--glass::after { display: none; } .btn--glass .lq-drop { background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 18%, transparent), transparent); }
.btn .ico { width: 20px; height: 20px; }


/* Today */
.dhead { margin: 4px 0 18px; }
.dhead__title { font-size: clamp(2.5rem, 9vw, 3.4rem); margin: 0; }
.dash__main > section, .dash__main > .card { margin-bottom: 16px; }
.upnext { position: relative; display: grid; gap: 4px; padding: 22px 22px 22px; border-radius: var(--r); margin-bottom: 18px;
  background: radial-gradient(120% 140% at 100% 0%, var(--mint-2), transparent 60%), linear-gradient(160deg, #eef9f3, var(--brand-soft));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent), 0 18px 34px -24px rgb(21 60 48 / .45); }
.upnext .over { margin: 0 0 6px; }
.upnext__time { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font: var(--w-label) 1.12rem/1.3 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.upnext__name { margin: 2px 0 0; padding-right: 64px; font-size: clamp(1.8rem, 6.5vw, 2.2rem); }
.upnext__what { margin: 0 0 10px; color: var(--muted); font-size: 1.05rem; }
.upnext__alerts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.upnext__avatar { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(160deg, var(--card), var(--mint-2)); color: var(--brand); font: var(--w-bold) 1.15rem/1 var(--font-display);
  box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent), 0 8px 16px -10px rgb(21 60 48 / .5); }
.upnext .btn { justify-self: start; }
.upnext--live { background: radial-gradient(120% 140% at 100% 0%, var(--mint-3), transparent 60%), linear-gradient(160deg, #eaf8f1, var(--mint-2)); }

.today { padding: 0; background: none; box-shadow: none; }
.today__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 6px 0 12px; }
.today__head h2 { margin: 0; font-size: 1.6rem; } .today__head .muted { flex: 1; }
.today__head .abtn { align-self: center; }
.today__list { gap: 10px; }
.today__list a { grid-template-columns: 88px 1fr auto; gap: 0; padding: 0; border-radius: 18px; background: var(--card); align-items: stretch;
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -14px rgb(21 60 48 / .35); overflow: hidden; }
@media (hover: hover) { .today__list a:hover { box-shadow: inset 0 0 0 1px var(--line-strong), 0 6px 16px -12px rgb(21 60 48 / .4); } }
.today__time { display: grid; place-items: center; min-width: 0; padding: 14px 6px; border-radius: 0; background: none; border-right: 1px solid var(--line);
  font: 400 1.32rem/1 var(--font-editorial); color: var(--ink); }
.today__who { padding: 14px 16px; gap: 2px; font: inherit; }
.today__who b { font: var(--w-bold) 1.1rem/1.3 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.today__who small { font-size: 1rem; }
.today__meta { grid-column: auto; margin-top: 6px; }
.today__go { width: 22px; height: 22px; align-self: center; margin-right: 14px; color: var(--muted); }
.today__list li.next a { background: var(--card); box-shadow: inset 0 0 0 2px var(--mint-3), 0 8px 20px -14px color-mix(in srgb, var(--brand) 50%, transparent); }
.today__list li.next .today__time { background: var(--brand-soft); color: var(--brand); }
.today__list li.past a { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }

/* assistant card */
.assist { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 22px; border-radius: var(--r);
  background: radial-gradient(90% 120% at 100% 30%, var(--mint-2), transparent 65%), linear-gradient(160deg, #f1faf5, var(--brand-soft));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent), 0 18px 34px -26px rgb(21 60 48 / .45); }
.assist__title { margin: 0 0 6px; font-size: clamp(1.6rem, 6vw, 2rem); }
.assist__text p { margin: 0; }
.assist__orb { width: clamp(108px, 30vw, 150px); }
.assist__go { grid-column: 1 / -1; width: 100%; margin-top: 8px; }

/* the orb: canvas (orb.js) over a static image; a white microphone on top */
.orb { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; background: none; border-radius: 50%; }
.orb canvas, .orb > img { grid-area: 1 / 1; width: 100%; height: 100%; display: block; }
.orb__mic { grid-area: 1 / 1; z-index: 1; display: grid; place-items: center; color: #fff; pointer-events: none; }
.orb__mic .ico { width: clamp(26px, 24%, 64px); height: auto; aspect-ratio: 1; stroke-width: 2.2; filter: drop-shadow(0 2px 6px rgb(0 60 40 / .45)); }
button.orb { cursor: pointer; transition: scale .2s var(--spring-press, var(--ease)); }
button.orb:active { scale: .98; }
button.orb:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
@media (prefers-reduced-motion: no-preference) {
  [data-orb-state=listening] { animation: breathe 3.2s ease-in-out infinite; }
}
@keyframes breathe { 50% { scale: 1.03; } }

/* voice note */
.vn { max-width: 640px; margin: 0 auto; }
.vn__head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.vn__back { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--ink); }
.vn__back svg { width: 26px; height: 26px; } @media (hover: hover) { .vn__back:hover { background: var(--card); } }
.vn__title { text-align: center; min-width: 0; } .vn__title h1 { margin: 0; font: var(--w-bold) 1.25rem/1.2 var(--font-display); letter-spacing: 0; }
.vn__title p { margin: 2px 0 0; color: var(--muted); font-size: .98rem; }
.vn__badge { padding: 7px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font: var(--w-label) .86rem/1 var(--font-display); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); white-space: nowrap; }
.vn__badge--off { background: var(--card); color: var(--muted); }
.vn__stage { display: grid; justify-items: center; gap: 6px; padding: 8px 0 6px; text-align: center; }
.vn__orb { width: min(240px, 62vw); }
.vn__state { display: grid; gap: 2px; margin: 4px 0 0; } .vn__state b { font: var(--w-bold) 1.35rem/1.2 var(--font-display); color: var(--ink); }
.vn__state span { color: var(--muted); }
.vn__wave { display: flex; gap: 4px; align-items: center; height: 44px; margin: 6px 0; }
.vn__wave i { --h: .12; width: 3px; height: 44px; border-radius: 2px; background: var(--brand); transform: scaleY(var(--h)); transition: transform .08s linear; opacity: .9; }
.vn__wave i:nth-child(3n) { opacity: .55; }
[data-state=idle] .vn__wave i, [data-state=paused] .vn__wave i, [data-state=review] .vn__wave i, [data-state=error] .vn__wave i { --h: .1; opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  [data-state=processing] .vn__wave i { animation: wavewait 1.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 40ms); }
}
@keyframes wavewait { 50% { transform: scaleY(.4); } }
.vn__lang { display: inline-flex; gap: 8px; align-items: center; font: var(--w-label) .95rem var(--font-display); color: var(--muted); }
.vn__lang select { min-height: 44px; padding: 6px 10px; border: 2px solid var(--line-strong); border-radius: 12px; background: var(--card); font: inherit; color: var(--ink); }
.vn__mictest { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.vn__meter { position: relative; width: 120px; height: 10px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.vn__meter i { position: absolute; inset: 0; transform-origin: left; scale: var(--lvl, 0) 1; background: var(--brand); transition: scale 80ms linear; }
.vn__micmsg { flex-basis: 100%; min-height: 1.4em; text-align: center; font-weight: 600; color: var(--muted); }
.vn__error { max-width: 48ch; margin: 6px 0 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.vn__card { margin: 14px 0; padding: 18px 20px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -20px rgb(21 60 48 / .4); }
.vn__card .over { display: flex; gap: 6px; align-items: center; } .vn__card .over .ico { width: 18px; height: 18px; }
.vn__transcript { min-height: 3.2em; font: 400 1.28rem/1.45 var(--font-editorial); color: var(--ink); }
.vn__interim { color: var(--muted); }
.vn__type { margin-top: 10px; } .vn__type summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: var(--w-label) 1rem var(--font-display); color: var(--brand); }
.vn__draft { background: linear-gradient(160deg, #f3fbf7, var(--brand-soft)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent); }
.vn__draft .over { display: block; color: var(--brand); letter-spacing: .02em; text-transform: none; font-size: 1.02rem; }
.vn__draft .over .ico { vertical-align: -3px; }
.vn__draft .field { margin-bottom: 10px; }
.vn__aioff { margin: 0 0 10px; color: var(--muted); }
.vn__confirm { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--warn-soft); color: var(--warn); }
.vn__confirm b { display: flex; gap: 6px; align-items: center; } .vn__confirm ul { margin: 6px 0 0; padding-left: 22px; }
.vn__review-hint { margin: 8px 0; text-align: center; color: var(--muted); font-size: .98rem; }
.vn__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vn__actions .btn { min-height: 56px; }
.vn__saved { margin: 10px 0 0; text-align: center; color: var(--muted); }
.vn__saved.is-saved { color: var(--ok); font-weight: 700; }
.vn__privacy { margin: 18px 0 8px; padding: 6px 16px; border-radius: 16px; background: color-mix(in srgb, var(--card) 60%, transparent); }
.vn__privacy summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: var(--w-label) 1rem var(--font-display); color: var(--ink); }
.vn__results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vn__results li { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 12px; border-radius: 14px; background: var(--paper); }
.vn__results li > span:first-child { display: grid; } .vn__results small { color: var(--muted); } .vn__results .row { margin: 0; }

/* client appointment page (mockup 03) */
.cl { max-width: 620px; margin: 0 auto; }
.cl__hello { font-size: clamp(2.5rem, 10vw, 3.3rem); margin: 6px 0 4px; }
.cl__sub { margin: 0 0 18px; font-size: 1.2rem; color: var(--ink); }
.cl__label { margin: 0 0 4px; font: var(--w-label) 1rem/1.3 var(--font-display); color: var(--muted); }
.cl__visit, .cl__contact { margin: 0 0 16px; padding: 20px 22px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 12px 28px -22px rgb(21 60 48 / .45); }
.cl__when { margin: 0 0 8px; font-size: clamp(1.5rem, 6vw, 1.85rem); font-weight: 500; }
.cl__status { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; font: var(--w-bold) 1.1rem/1.3 var(--font-display); color: var(--ok); }
.cl__dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: var(--on-brand); flex: none; }
.cl__dot .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.cl__status--requested { color: var(--warn); } .cl__status--requested .cl__dot { background: var(--warn); }
.cl__status--cancelled { color: var(--danger); } .cl__status--cancelled .cl__dot { background: var(--danger); }
.cl__where { margin: 0 0 4px; color: var(--muted); font-size: 1.05rem; }
.cl__more summary { display: inline-flex; gap: 8px; align-items: center; min-height: 48px; cursor: pointer; list-style: none; font: var(--w-bold) 1.1rem/1 var(--font-display); color: var(--brand); }
.cl__more summary::-webkit-details-marker { display: none; }
.cl__more summary .ico { width: 20px; height: 20px; transition: rotate .2s var(--ease); } .cl__more[open] summary .ico { rotate: 90deg; }
.cl__acts { display: grid; gap: 10px; padding-top: 6px; } .cl__acts .btn { justify-content: flex-start; }
.cl__cancel { margin: 0; } .cl__keep { margin: -6px 4px 16px; }
.cl__talk { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; margin: 0 0 12px; padding: 20px 22px; border-radius: var(--r);
  background: radial-gradient(90% 120% at 0% 30%, var(--mint-2), transparent 65%), linear-gradient(160deg, #f1faf5, var(--brand-soft));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent), 0 18px 34px -26px rgb(21 60 48 / .45); }
.cl__orb { width: clamp(96px, 28vw, 130px); grid-row: span 1; }
.cl__talktext h2 { display: block; margin: 0 0 4px; font-size: 1.9rem; font-weight: 500; }
.cl__talktext p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.cl__talkbtn { grid-column: 1 / -1; width: 100%; margin-top: 6px; }
.cl__typing { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--muted); }
.linkbtn { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--brand); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cl__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.cl__chips .chipbtn { min-height: 52px; padding: 10px 18px; background: var(--card); font-size: 1.02rem; box-shadow: 0 6px 14px -12px rgb(21 60 48 / .45); }
.cl__chat { margin: 0 0 16px; padding: 16px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.cl__msgs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.cl__msg { display: grid; gap: 8px; max-width: 88%; padding: 12px 14px; border-radius: 18px; }
.cl__msg p { margin: 0; font-size: 1.08rem; }
.cl__msg--me { justify-self: end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 6px; }
.cl__msg--bot { justify-self: start; background: var(--brand-soft); color: var(--ink); border-bottom-left-radius: 6px; }
.cl__msg--bot .chipbtn { justify-self: start; text-decoration: none; background: var(--card); }
.cl__ask { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.cl__ask input { min-height: 52px; min-width: 0; padding: 10px 14px; border: 2px solid var(--line-strong); border-radius: var(--r-sm); font: 400 1.08rem var(--font-body); }
.cl__mic { min-width: 52px; justify-content: center; }
.cl__contact .btn { margin: 4px 0 8px; }
/* major headings in the editorial serif (mockup); controls, data and print stay in Atkinson */
h1 { font-family: var(--font-editorial); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; }
h1 b, h1 strong { font-weight: 560; }
.vn__title h1, .sheet h1, .opbar h1, .wordmark { font-family: var(--font-display); }
.bars--12 > li { min-width: 0; overflow: hidden; }
@media (max-width: 360px) { .bars--12 { gap: 2px; } .bars--12 small, .bars--12 .bars__v { font-size: .62rem; } }
.adminpage h1, .report h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }

/* calendar agenda: same row language as the Today list (serif time cell, hairline card, staff colour as a thin rail) */
.ag { grid-template-columns: 88px 1fr; gap: 0; padding: 0; overflow: hidden; border-left: 0;
  box-shadow: inset 4px 0 0 var(--c), inset 0 0 0 1px var(--line), 0 6px 16px -14px rgb(21 60 48 / .35); }
.ag--noshow, .ag--cancelled { box-shadow: inset 4px 0 0 var(--danger), inset 0 0 0 1px var(--line); }
.ag--now { box-shadow: inset 4px 0 0 var(--c), inset 0 0 0 2px var(--mint-3), 0 8px 20px -14px color-mix(in srgb, var(--brand) 50%, transparent); }
.ag__time { place-content: center; justify-items: center; gap: 4px; padding: 14px 6px 14px 10px; border-right: 1px solid var(--line); }
.ag__time b { font: 400 1.32rem/1 var(--font-editorial); }
.ag--now .ag__time { background: var(--brand-soft); color: var(--brand); }
.ag__body { padding: 14px 16px; }
.ag__name { font-weight: var(--w-bold); }
.ag__act .btn, .ag__act .abtn { min-height: 48px; padding: 10px 18px; font-size: .98rem; }
.agenda .gap a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 18px; border: 1.5px dashed var(--mint-3); color: var(--brand); text-decoration: none; font-weight: 600; }
@media (max-width: 520px) {
  .ag { grid-template-columns: 70px 1fr; }
  .ag__time { place-content: start center; padding-top: 18px; }
  .ag__body { padding: 12px 12px 14px; }
  .ag__act form:first-child { flex-basis: 100%; } .ag__act form:first-child .btn { width: 100%; }
}

/* patient record: one primary action, the rest as an even grid on phones */
.phead h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
@media (max-width: 640px) {
  .card--actions { display: grid; grid-template-columns: 1fr 1fr; }
  .card--actions > form:first-child { grid-column: 1 / -1; }
  .card--actions .btn { width: 100%; padding-inline: 10px; gap: 6px; font-size: .98rem; white-space: nowrap; }
}

/* settings and other long forms: a little air between a card's intro line and its first field */
.card > h2 + .hint, .card > h2 + .muted { margin-bottom: 14px; }

@media (max-width: 360px) { .svc__price input { width: 80px; } }

/* patient app: invite card on the record, share switch on the visit */
.appcard__code { display: grid; gap: 8px; padding: 18px; margin-bottom: 12px; border-radius: var(--r-sm);
  background: linear-gradient(160deg, #f1faf5, var(--brand-soft)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent); }
.appcard__code .over { margin: 0; }
.appcard__digits { margin: 0; font: 400 clamp(2.2rem, 9vw, 3rem)/1 var(--font-editorial); letter-spacing: .08em; color: var(--brand); font-variant-numeric: tabular-nums; }
.check.share { align-items: flex-start; margin-top: 4px; }
.check.share span { display: grid; gap: 2px; } .check.share small { font: 400 .95rem/1.35 var(--font-body); color: var(--muted); }
.check.share input:disabled + span { color: var(--muted); }

/* ================================================================ components: one of each, used everywhere (docs/PARITY.md wave 1) */

/* buttons while saving: a spinner beside the words, no second tap, the label stays readable */
.btn.is-busy, .abtn.is-busy, .chipbtn.is-busy { pointer-events: none; }
.btn.is-busy::before, .abtn.is-busy::before { content: ''; flex: none; width: 1em; height: 1em; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.btn.is-busy .ico, .abtn.is-busy .ico { display: none; }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::before, .abtn.is-busy::before { animation: pulse 1.6s ease-in-out infinite !important; animation-iteration-count: infinite !important; animation-duration: 1.6s !important; border-right-color: currentColor; } }
.btn[disabled], .btn[aria-disabled=true], .abtn[disabled], .abtn[aria-disabled=true], .chipbtn[disabled] { opacity: .5; cursor: not-allowed; }

/* fields: the problem is said next to the field, in words and with an icon, and linked for screen readers */
.field :is(input, select, textarea)[aria-invalid=true] { border-color: var(--danger); background: #fffafa; }
.field :is(input, select, textarea)[aria-invalid=true]:focus { box-shadow: 0 0 0 4px rgb(163 39 31 / .14); }
.field__err { display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 0; color: var(--danger); font: 600 .95rem/1.35 var(--font-display); }
.field__err::before { content: '!'; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--danger); color: var(--on-brand); font: 800 .8rem/1 var(--font-body); }
.field__opt { font-weight: 400; color: var(--muted); }
.field__count { justify-self: end; margin-top: -2px; font: 400 .88rem/1 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.field__count.is-near { color: var(--warn); } .field__count.is-full { color: var(--danger); font-weight: 700; }

/* unsaved changes: said calmly inside the save bar */
.dirty { display: none; align-items: center; gap: 8px; width: 100%; font: 600 .95rem/1.2 var(--font-display); color: var(--warn); }
.dirty::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--apricot); box-shadow: 0 0 0 4px var(--warm-soft); }
form.is-dirty .dirty { display: flex; }
.savestate { display: inline-flex; align-items: center; gap: 8px; font: 600 .95rem/1.2 var(--font-display); color: var(--muted); }
.savestate[data-s=saved] { color: var(--ok); } .savestate[data-s=error], .savestate[data-s=offline] { color: var(--warn); }

/* dialog: a centred card on wide screens, a bottom sheet on phones. Built on <dialog>: focus stays inside, Esc closes. */
.dlg { width: min(100% - 32px, 520px); max-height: min(86dvh, 760px); padding: 0; border: 0; border-radius: var(--r); background: var(--card); color: var(--text); box-shadow: 0 30px 80px -30px rgb(21 60 48 / .55), var(--edge); overflow: hidden; }
.dlg--wide { width: min(100% - 32px, 760px); }
.dlg[open] { display: flex; flex-direction: column; }
.dlg::backdrop { background: rgb(13 39 31 / .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dlg__head { display: flex; gap: 12px; align-items: center; padding: 18px 20px 6px; }
.dlg__head h2 { flex: 1; margin: 0; font: var(--w-bold) 1.3rem/1.25 var(--font-display); }
.dlg__x { display: grid; place-items: center; flex: none; width: 48px; height: 48px; margin: -6px -8px -6px 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.dlg__x .ico { width: 22px; height: 22px; }
.dlg__body { padding: 8px 20px 20px; overflow: auto; overscroll-behavior: contain; }
.dlg__body > :last-child { margin-bottom: 0; }
.dlg__body .main { width: auto; padding: 0; }
.dlg__foot { display: flex; flex-wrap: wrap-reverse; gap: 10px; justify-content: flex-end; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }
.dlg__foot form { margin: 0; }
.dlg__msg { margin: 0; font-size: 1.08rem; }
.dlg__loading { display: grid; gap: 14px; align-content: start; min-height: min(50dvh, 360px); padding-top: 8px; }   /* placeholder rows while a sheet loads */
.dlg__loading .skel { height: 48px; border-radius: 12px; } .dlg__loading .skel--short { width: 55%; }
[aria-busy=true]:is(a, button) { cursor: progress; }
.cgi[aria-busy=true], .gap a[aria-busy=true], .ag__time[aria-busy=true], .ag__name[aria-busy=true] { opacity: .7; }
@media (max-width: 639px) {
  .dlg { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 28px 28px 0 0; }
  .dlg::before { content: ''; display: block; flex: none; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--line-strong); opacity: .6; }
  .dlg__foot { flex-direction: column-reverse; } .dlg__foot > *, .dlg__foot .btn { width: 100%; }
}
/* opening: the card rises a little, the phone sheet slides up; closing: the card fades with its backdrop, the sheet
   slides back down (the script waits 200 ms). With "reduce motion" both only fade, briefly (see below). */
@media (prefers-reduced-motion: no-preference) {
  .dlg[open] { animation: dlg-in var(--dur-sheet) var(--ease); }
  .dlg[open]::backdrop { animation: fade-in var(--dur-ui) ease-out; }
  @media (max-width: 639px) { .dlg[open] { animation: sheet-in var(--dur-sheet) var(--ease-sheet); } }
  .dlg.is-closing { animation: fade-out var(--dur-fade) var(--ease) forwards; }
  @media (max-width: 639px) { .dlg.is-closing { animation: sheet-out var(--dur-ui) var(--ease-sheet) forwards; } }
  .dlg.is-closing::backdrop { animation: fade-out var(--dur-fade) var(--ease) forwards; }
  .dlg--find[open] { animation: fade-in 120ms ease-out; }   /* a keyboard shortcut answers at once, no rise */
}
@media (max-width: 639px) { .dlg__head { touch-action: none; cursor: grab; } }   /* the grab handle pulls the sheet down */
@keyframes dlg-in { from { opacity: 0; scale: .96; translate: 0 10px; } }
@keyframes sheet-in { from { translate: 0 100%; } }
@keyframes sheet-out { to { translate: 0 100%; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* toasts: short news at the bottom, above the dock; read aloud; one action at most (Undo). The box is a popover in the
   top layer, so it shows above an open dialog too (the script moves it into that dialog, so it can be pressed). */
.toasts { position: fixed; z-index: var(--z-toast); inset: auto 12px calc(96px + env(safe-area-inset-bottom)) 12px; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toasts[popover]:not(:popover-open) { display: none; }
@media (min-width: 900px) { .toasts { inset: auto 24px 24px 272px; justify-items: start; } }
@media (max-width: 899px) { .ws:has(.main form[method=post] > .sticky:not(.selbar, .albar)) .toasts { bottom: calc(112px + env(safe-area-inset-bottom)); } }
dialog .toasts { inset: auto 12px calc(24px + env(safe-area-inset-bottom)) 12px; justify-items: center; }   /* over a sheet: its foot */
.toast { pointer-events: auto; display: flex; gap: 12px; align-items: center; width: min(100%, 560px); min-height: 56px; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--deep); color: var(--on-deep); box-shadow: 0 18px 40px -18px rgb(13 39 31 / .7); font: 600 1rem/1.35 var(--font-display); transform-origin: 50% 100%; transition: scale var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease); }
.toast:not(:last-child):not(.is-leaving) { scale: .96; opacity: .9; }   /* the newest is in front; older ones step back */
@media (max-width: 519px) { .toast { flex-wrap: wrap; row-gap: 6px; } .toast__text { flex: 1 1 calc(100% - 80px); } }
.toast > .ico { flex: none; width: 24px; height: 24px; color: var(--mint); }
.toast--error > .ico, .toast--warn > .ico { color: var(--apricot); }
.toast__text { flex: 1; min-width: 0; }
.toast__text a { color: #fff; }
.toast__act { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: rgb(255 255 255 / .14); color: #fff; font: var(--w-bold) .98rem/1 var(--font-display); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.toast__x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: rgb(255 255 255 / .8); cursor: pointer; }
.toast__x .ico { width: 20px; height: 20px; }
@media (hover: hover) { .toast__act:hover { background: rgb(255 255 255 / .24); } .toast__x:hover { background: rgb(255 255 255 / .1); } }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .34s var(--ease); }
  .toast.is-leaving { animation: toast-out .2s ease-in forwards; }
}
.toast.is-in:not(.is-leaving) { animation: none; } .toast.is-in > .ico path { animation: none; stroke-dashoffset: 0; }
.toast__act--2 { background: none; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .35); }
.busy:not([hidden]) { animation: fade-in var(--dur-fade) ease-out; }
@keyframes toast-in { from { opacity: 0; translate: 0 16px; scale: .98; } }
@keyframes toast-out { to { opacity: 0; translate: 0 8px; } }
.flash--error { border: 2px solid #f0c3bd; }

/* photo viewer: swipe between photos, pinch or double-tap to zoom, the caption always visible */
.lb { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #0b1512; color: #fff; overflow: hidden; }
.lb[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lb::backdrop { background: #0b1512; }
.lb__bar { display: flex; gap: 10px; align-items: center; padding: max(10px, env(safe-area-inset-top)) 12px 10px; }
.lb__count { flex: 1; font: 600 1rem/1 var(--font-display); color: rgb(255 255 255 / .8); font-variant-numeric: tabular-nums; }
.lb__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .12); color: #fff; font: 600 .98rem/1 var(--font-display); text-decoration: none; cursor: pointer; }
.lb__btn .ico { width: 22px; height: 22px; }
@media (hover: hover) { .lb__btn:hover { background: rgb(255 255 255 / .22); } }
.lb__stage { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.lb__track { display: flex; height: 100%; will-change: transform; }
.lb__slide { flex: 0 0 100%; display: grid; place-items: center; height: 100%; overflow: hidden; }
.lb__slide img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 0 0; -webkit-user-drag: none; }
.lb__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 56px; height: 56px; padding: 0; }
.lb__nav--prev { left: 12px; } .lb__nav--next { right: 12px; }
@media (pointer: coarse) { .lb__nav { display: none; } }
.lb__cap { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; padding: 12px 16px max(14px, env(safe-area-inset-bottom)); font: 600 1.02rem/1.3 var(--font-display); text-align: center; }
.lb__cap small { color: rgb(255 255 255 / .72); font-weight: 500; }
.lb__hint { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / .5); font: 500 .9rem/1 var(--font-display); color: rgb(255 255 255 / .85); pointer-events: none; transition: opacity .4s; }
[data-viewer] img, img[data-zoom] { cursor: zoom-in; }

/* every small control answers a press (the tap highlight is off, so this is the feedback) */
:is(.toast__act, .toast__x, .dlg__x, .lb__btn, .seg a, .seg button, .seg label, .avail, .vphoto__edit, .top__search, .cmp__zb, .chipbtn, .pill, .bday, .bslot, .bchoice, .daystrip a):active { scale: .96; transition: scale 90ms ease-out; }
:is(.plist a, .today__list a, .alist a, .todo a, .psr li, .debtlist__head a, .mlist li):active { background: var(--raised); }

/* the More menu becomes a proper menu: Esc closes it and focus returns */

/* loading placeholders keep the layout still */
.skel { display: block; height: 1em; border-radius: 8px; background: linear-gradient(90deg, var(--paper-2), #f3f8f5, var(--paper-2)); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .skel { animation: skel 1.4s ease-in-out infinite; } }
@keyframes skel { to { background-position: -200% 0; } }

/* visit contents bar: which sections have something, which changed since the last save */
.vtoc a.has::after { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.vtoc a.on.has::after { background-color: var(--mint); }
.vtoc a.changed::before { content: ''; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--apricot); box-shadow: 0 0 0 2px var(--rim); }

/* sole map: marks can be dragged without scrolling the page; the tool row nudges when nothing is chosen yet */
.soles .mark { touch-action: none; cursor: grab; }
.mapper__undo { display: flex; justify-content: center; min-height: 0; } .mapper__undo .abtn[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .mapper__tools.is-nudge { animation: nudge .42s var(--ease); } }
@keyframes nudge { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.mapper__tools.is-nudge .mtool span { border-color: var(--apricot); }

/* the save bar stays one compact row on phones, so it never hides the chart; the status is one short line above it */
.sticky .savestate:empty { display: none; }
.sticky:has(.savestate:not(:empty)) .dirty { display: none; }
.sticky .dirty, .sticky .savestate { flex-basis: 100%; font-size: .92rem; }
@media (max-width: 640px) {
  .sticky { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; gap: 8px; padding: 8px; align-items: center; }
  .sticky:not(:has(> :nth-child(3 of .btn, .abtn))) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .sticky .dirty, .sticky .savestate { grid-column: 1 / -1; padding: 2px 6px 0; font-size: .88rem; line-height: 1.25; }
  /* a bar with a draft line keeps one fixed status row (unsaved / saved / offline share it), so it never grows */
  .sticky:has(> .savestate) { grid-template-rows: 1.4em auto; }
  .sticky:has(> .savestate) > :is(.dirty, .savestate) { grid-row: 1; min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky:has(> .savestate) > .savestate:not(:empty) { display: block; }
  .sticky:has(> .savestate) > :not(.dirty, .savestate) { grid-row: 2; }
  .sticky .btn { min-height: 50px; padding-inline: 20px; font-size: .98rem; white-space: nowrap; }
  .sticky .btn .ico { display: none; }
  .sticky__icon { min-width: 50px; min-height: 50px; justify-content: center; padding: 0; }
  .sticky__icon span { display: none; }
}
/* phones: while an edit form with a save bar is open, the dock steps aside and the bar takes the bottom edge,
   so the chart keeps the room (the browser's Back and the page's back link still lead out) */
@media (max-width: 899px) {
  .ws:has(.main form[method=post] > .sticky:not(.selbar, .albar)) { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .main form[method=post] > .sticky:not(.selbar, .albar) { bottom: calc(12px + env(safe-area-inset-bottom)); }
}
.draftnote { flex-wrap: wrap; } .draftnote > span:not(.row) { flex: 1 1 220px; } .draftnote .row { margin: 0; flex-wrap: nowrap; }
.draftnote .abtn { min-height: 46px; background: var(--card); }

/* calendar: bookings that overlap sit side by side in lanes (computed on the server), never on top of each other */
.cgi { left: calc(3px + (100% - 6px) * var(--lane, 0) / var(--lanes, 1)); right: auto; width: calc((100% - 6px) / var(--lanes, 1) - 2px); }
.cgi.is-drag { left: 3px; width: calc(100% - 6px); }
.cgi--requested { background: var(--card); color: var(--ink); border: 2px dashed var(--c); border-left-width: 4px; }
.cgi--confirmed .cgi__in b::after { content: ' ✓'; }
.cgi--arrived { box-shadow: 0 0 0 2px var(--rim), 0 0 0 4px var(--mint); }

/* patient search: results drop under the field (52px rows, phone and alerts shown); inside the find sheet they fill it */
.psr-wrap { position: relative; flex: 1; min-width: 0; display: grid; }
.psr { position: absolute; z-index: var(--z-float); top: calc(100% + 6px); left: 0; right: 0; max-height: min(60vh, 440px); overflow: auto; margin: 0; padding: 6px; list-style: none; border-radius: var(--r-md); background: var(--card); box-shadow: var(--edge), 0 22px 44px -20px rgb(21 60 48 / .45); }
.psr li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-height: 56px; padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer; }
.psr li[aria-selected=true] { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--mint-3); }
@media (hover: hover) { .psr li:hover { background: var(--paper); } }
.psr__main { display: grid; flex: 1 1 180px; min-width: 0; } .psr__main b { font: 600 1.05rem/1.25 var(--font-display); color: var(--ink); } .psr__main small { color: var(--muted); font-variant-numeric: tabular-nums; }
.psr__new b { font: 600 1rem/1.25 var(--font-display); color: var(--brand); } .psr__new::before { content: '+'; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 800; }
.psr__none { color: var(--muted); cursor: default !important; }
.dlg--find .dlg__body { min-height: min(60dvh, 460px); }
.dlg--find .psr { position: static; box-shadow: none; padding: 6px 0 0; max-height: none; }
.top__search { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; margin-left: auto; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--card) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 600 .98rem/1 var(--font-display); cursor: pointer; }
.top__search .ico { width: 22px; height: 22px; }
.top__search kbd { padding: 2px 7px; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font: 600 .8rem/1.2 var(--font-body); color: var(--muted); }
@media (max-width: 899px) { .top__search { width: 48px; padding: 0; justify-content: center; } .top__search span, .top__search kbd { display: none; } }
@media (hover: hover) { .top__search:hover { background: var(--card); } }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; width: 22px; height: 22px; cursor: pointer; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* last visit's marks: faint dashed outlines; tapping one keeps it */
.soles .ghost { cursor: pointer; opacity: .55; }
.soles .ghost circle { fill: #fff; stroke: var(--c); stroke-width: 2.2; stroke-dasharray: 3 2.5; }
.soles .ghost text { fill: var(--c); font: 700 9px var(--font-body); text-anchor: middle; pointer-events: none; }
@media (hover: hover) { .soles .ghost:hover { opacity: .9; } }
.mapper__undo { flex-wrap: wrap; gap: 8px; }
.mapper__ghosthint { text-align: center; margin-top: -4px; }

/* treatment presets: chips above the visit; on the settings page each preset folds open */
.presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 4px; padding: 14px 16px; border-radius: var(--r); background: linear-gradient(160deg, #f1faf5, var(--brand-soft)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent); }
.presets__lbl { display: inline-flex; gap: 8px; align-items: center; flex-basis: 100%; font: var(--w-label) .98rem/1.2 var(--font-display); color: var(--brand); }
.presets__lbl .ico { width: 20px; height: 20px; }
.presets .chipbtn { background: var(--card); border-color: var(--mint-3); }
.presets__setup { margin: 0 0 4px; }
.presetrow > summary { display: grid; gap: 2px; cursor: pointer; list-style: none; min-height: 48px; }
.presetrow > summary::-webkit-details-marker { display: none; }
.presetrow > summary b { font: 600 1.15rem/1.25 var(--font-display); color: var(--ink); } .presetrow > summary small { color: var(--muted); }
.presetrow[open] > summary { margin-bottom: 12px; }
.presetrow .preset { box-shadow: none; padding: 0; margin: 0; }
.presets .chipbtn.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
html { background: var(--paper); } .ws { min-height: 100dvh; }

/* visit photos: each thumbnail shows its own upload ring; a pencil opens when / where / delete */
.vphoto { position: relative; }
.vphoto__edit { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--ink); box-shadow: var(--edge), 0 4px 10px -6px rgb(21 60 48 / .5); cursor: pointer; }
.vphoto__edit .ico { width: 20px; height: 20px; }
.vphoto.is-loading, .vphoto.is-failed { display: grid; place-items: center; gap: 8px; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--paper-2); padding: 8px; text-align: center; }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }   /* upload progress, so the ring can glide */
.vphoto__ring { position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--mint-2) 0); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); transition: --p 200ms linear; }
.vphoto.is-loading { position: relative; overflow: hidden; }
.vphoto__pre { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vphoto.is-loading:has(.vphoto__pre)::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgb(255 255 255 / .4); }
.vphoto.is-failed { background: var(--danger-soft); color: var(--danger); }
.vphoto__msg { font: 600 .9rem/1.3 var(--font-display); }

/* toe board: both feet at a glance, above the per-condition toe pickers */
.toeboard { margin: 4px 0 14px; padding: 12px; border-radius: var(--r-md); background: var(--paper); }
.toeboard svg { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; }
.toeboard__toe { fill: #f1e4d4; stroke: #c6b097; stroke-width: 2; }
.toeboard__nail { fill: #fffaf3; stroke: #d8c6b0; stroke-width: 1.5; }
.toeboard__brace { stroke: var(--ink); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.toeboard__clip { fill: var(--ink); }
.toeboard__n { font: 700 11px var(--font-body); fill: var(--muted); text-anchor: middle; }
.toeboard__side { font: 600 11px var(--font-display); fill: var(--muted); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
/* the caption: one row per condition or brace, its chip in a fixed column so every row starts at the same place */
.toeboard__legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 8px 22px; font-size: .95rem; line-height: 1.35; }
.toeboard__legend li { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; }
.toeboard__legend li > .swatch { justify-self: center; } .toeboard__legend p { margin: 0; }
.toeboard__legend b { font-weight: 600; color: var(--ink); } .toeboard__legend span { color: var(--muted); font-variant-numeric: tabular-nums; }
.toeboard .hint { text-align: center; margin-top: 6px; }

/* ===== wave 3: records ===== */
/* patient list: "seen by / seen between" folds open under the filter chips; "Show more" closes the page */
.pfilter { margin: 0 0 var(--s3); }
.pfilter > summary { display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s4); border-radius: var(--r-pill); background: var(--card); box-shadow: var(--edge); cursor: pointer; list-style: none; font: 600 .95rem/1 var(--font-display); color: var(--ink); }
.pfilter > summary::-webkit-details-marker { display: none; }
.pfilter > summary .ico { width: 20px; height: 20px; }
.pfilter__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); align-items: end; margin-top: var(--s3); padding: var(--s4); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow); }
.pfilter__form .field { margin: 0; }
.pfilter__go { display: flex; gap: var(--s2); align-items: center; }
.pfilter__on { margin: 0 0 var(--s3); color: var(--muted); }
.pmore { display: grid; justify-items: center; gap: var(--s2); margin: var(--s4) 0; }
.plist li[id] { scroll-margin-top: 96px; }

/* select mode on photos and documents: 48px tick targets, a tap on the picture ticks it, the bar says how many */
.js [data-select].can-select:not(.is-selecting) .pcell__pick { display: none; }
.js [data-select].can-select:not(.is-selecting) [data-select-hint] { display: none; }
[data-select].is-selecting .pcell__pick { top: 8px; left: 8px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: var(--edge); cursor: pointer; }
[data-select].is-selecting .pcell:has(.pcell__pick input:checked) { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
[data-select].is-selecting .pthumb { cursor: pointer; }
.selbar { align-items: center; }
.selbar[hidden], .selbar [hidden] { display: none !important; }
.selbar__n { font: 600 1rem/1.2 var(--font-display); color: var(--ink); padding: 0 var(--s2); }
.selbar .abtn:disabled { opacity: .45; }
@media (max-width: 640px) { .sticky.selbar { display: flex; flex-wrap: wrap; } .sticky.selbar .selbar__n { flex-basis: 100%; } }
.filelist__pick { display: none; flex: none; place-items: center; width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--paper); cursor: pointer; }
.filelist__pick input, [data-select] .pcell__pick input { width: 26px; height: 26px; accent-color: var(--accent); }
[data-select].is-selecting .filelist__pick { display: grid; }
[data-select].is-selecting .filelist li:has(.filelist__pick input:checked) { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.filelist li.filelist__month { padding: var(--s3) var(--s1) 0; background: none; box-shadow: none; }
.filelist__month h3 { margin: 0; font: 600 1rem/1.2 var(--font-display); color: var(--muted); }
.filelist__open[data-zoom] { cursor: zoom-in; }

/* consents: the signed PDF on the card; withdrawn ones keep theirs, marked in words */
.consents__act { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
.consents__old li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.signpage__note { margin: 0 0 var(--s5); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 1.02rem; }

/* new patient: the live "Is this ...?" note sits right under the field being typed */
.dupe--live { display: grid; gap: var(--s3); margin: calc(var(--s1) * -1) 0 var(--s3); }
.dupe--live p { margin: 0; }
.dupe--live .row { margin: var(--s2) 0 0; flex-wrap: wrap; }
.dupe--live .abtn { background: var(--card); }
.dupe__one + .dupe__one { padding-top: var(--s3); border-top: 1px dashed currentColor; }

/* bookings on the record: counts in words, service, length, who, and money for owners and admins */
.arec__head { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.arec__counts { display: flex; gap: var(--s4); margin: 0; font: 600 1rem/1.2 var(--font-display); color: var(--muted); }
.arec__counts b { color: var(--ink); }
.arec__top { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: space-between; }
.arec__money { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* ===== wave 3: money ===== */
/* period control: today / this week / this month, or two dates */
.moneyper { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-start; margin: 0 0 var(--s4); }
.moneyper__custom summary { list-style: none; } .moneyper__custom summary::-webkit-details-marker { display: none; }
.moneyper__range { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-end; margin-top: var(--s3); }
.moneyper__range .field { min-width: 150px; }
@media (max-width: 520px) {
  .moneyper .seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: var(--r-md); }
  .moneyper .seg a { padding: 8px 6px; text-align: center; line-height: 1.2; border-radius: var(--r-sm); }
}
/* shortcuts to the cash count and the debts list */
.moneylinks { display: grid; gap: var(--s2); margin: 0 0 var(--s4); }
@media (min-width: 700px) { .moneylinks { grid-template-columns: 1fr 1fr; } }
.moneylink { display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.moneylink > span { display: grid; flex: 1; min-width: 0; } .moneylink small { color: var(--muted); font-size: .95rem; }
.moneylink i { font-style: normal; color: var(--muted); }
/* the journal: filters, totals per method, one row per movement */
.jfilter { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); margin: 0 0 var(--s3); }
.jtotals { margin-bottom: var(--s3); }
@media (max-width: 520px) { .jtotals th, .jtotals td { padding: 8px 6px; } } .jtotals tfoot th, .jtotals tfoot td { border-bottom: 0; font-weight: 700; color: var(--ink); }
.journal { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: 6px; }
.journal__row { display: grid; grid-template-columns: 10.5em 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--paper); }
.journal__when { display: grid; font-size: .92rem; color: var(--muted); } .journal__when small { font-variant-numeric: tabular-nums; }
.journal__what { display: grid; min-width: 0; } .journal__what a { text-decoration: none; color: var(--ink); }
.journal__what small { color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.journal__sum { font: 700 1.02rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ok); }
.journal__row--out .journal__sum { color: var(--danger); }
@media (max-width: 520px) {
  .journal__row { grid-template-columns: 1fr auto; padding: var(--s3); }
  .journal__when { grid-column: 1 / -1; display: flex; gap: var(--s2); }
}
/* expenses: monthly ones waiting, edit + delete side by side */
.repeats { padding: var(--s3) var(--s4); margin: 0 0 var(--s4); border-radius: var(--r-sm); background: var(--warn-soft); }
.repeats__title { margin: 0 0 var(--s2); color: var(--ink); }
.repeats__list { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; gap: var(--s2); }
.repeats__list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2); }
.repeats form { margin: 0; }
.exprow__acts { margin: 0; flex: none; }
/* end-of-day cash count */
.cashcount__sum { align-items: center; } .cashcount__sum dd { text-align: right; }
.cashcount__start { width: 9em; min-height: 48px; text-align: right; }
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s2); margin: var(--s2) 0; }
.notes__row { display: flex; align-items: center; gap: var(--s2); font: 600 1rem/1 var(--font-display); color: var(--ink); }
.notes__row span { min-width: 6.5em; text-align: right; white-space: nowrap; } .notes__row input { min-height: 48px; width: 100%; min-width: 0; }
.cashdiff { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); font-weight: 700; background: var(--ok-soft); color: var(--ok); }
.cashdiff--over { background: var(--warn-soft); color: var(--warn); } .cashdiff--short { background: var(--danger-soft); color: var(--danger); }
p.cashdiff { margin: var(--s3) 0; font-size: 1.05rem; padding: 10px 16px; }
.tbl tr.is-reopened td { color: var(--muted); } .tbl tr.is-reopened .cashdiff { opacity: .7; }
.tbl td .cashdiff { white-space: normal; }
/* who owes money */
.debtlist { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; background: var(--card); border: 1px solid var(--edge-1); border-radius: var(--r); overflow: hidden; }
.debtlist__item { margin: 0; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--rule); }
.debtlist__item:last-child { border-bottom: 0; }
.debtlist__collect > summary { list-style: none; cursor: pointer; justify-self: start; } .debtlist__collect > summary::-webkit-details-marker { display: none; }
.debtlist__collect[open] > summary { background: var(--mint-50); border-color: var(--brand); }
.debtlist__collect .debtlist__pay { margin-top: var(--s2); }
.debtlist__remind { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 520px) { .debtlist__item { padding: var(--s3) var(--s4); } }
.debtlist__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.debtlist__head a { display: grid; min-width: 0; text-decoration: none; color: var(--ink); } .debtlist__head small { color: var(--muted); font-size: .95rem; }
.debtlist__sum { font: 700 1.25rem/1.2 var(--font-display); color: var(--danger); white-space: nowrap; font-variant-numeric: tabular-nums; }
.debtlist__acts { display: grid; gap: var(--s2); margin-top: var(--s3); }
.debtlist__pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; }
.debtlist__label { font: 600 .95rem/1.2 var(--font-display); color: var(--muted); width: 100%; }
.debtlist__acts .row { margin: 0; flex-wrap: wrap; }
/* plan page: prices, yearly saving, current plan */
.planbadge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-deep); font: 700 .85rem/1.2 var(--font-display); vertical-align: middle; }
.plan__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2); }
.plan--mine { box-shadow: var(--shadow), inset 0 0 0 2px var(--brand); }
.plan__prices { margin: var(--s2) 0 var(--s3); } .plan__prices .plan__price { margin: 0 0 4px; }
.plan__year { margin: 0; color: var(--muted); } .plan__save { color: var(--ok); font-weight: 700; }
/* the calm trial countdown above every workspace page (owner only) */
.trialchip { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: center; gap: 2px 10px; width: fit-content; max-width: 100%; min-height: 48px; margin: 0 0 var(--s4); padding: 8px 16px; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--edge); color: var(--ink); text-decoration: none; font: 600 .95rem/1.25 var(--font-display); }
.trialchip .ico { flex: none; color: var(--brand); }
.trialchip__go { color: var(--brand); }
@media (max-width: 520px) { .trialchip { grid-template-columns: auto auto; border-radius: var(--r-md); } .trialchip__go { grid-column: 2; } }
.trialchip--soon { background: var(--warn-soft); box-shadow: none; } .trialchip--soon .ico { color: var(--warn); }
@media print { .trialchip { display: none; } }

/* ===== wave 3: settings ===== */
/* radio cards: a clear choice with room for a short explanation (deactivating someone, reminder timing) */
.choices { display: grid; gap: var(--s2); }
.choice { position: relative; display: block; cursor: pointer; }
.choice > input { position: absolute; opacity: 0; }
.choice > span { display: grid; gap: 4px; min-height: 56px; align-content: center; padding: var(--s3) var(--s4) var(--s3) 52px; border: 2px solid var(--line-strong); border-radius: var(--r-sm); background: var(--card); transition: border-color var(--dur-ui), background-color var(--dur-ui); }
.choice > span::before { content: ''; position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--card); box-sizing: border-box; }
.choice > input:checked + span { border-color: var(--brand); background: var(--brand-soft); }
.choice > input:checked + span::before { border: 7px solid var(--brand); }
.choice > input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice b { font: 600 1.04rem/1.25 var(--font-display); color: var(--ink); display: inline-flex; gap: var(--s2); align-items: center; }
.choice small { color: var(--muted); font-size: .98rem; }
.choice__who { display: flex; gap: var(--s2); align-items: center; }
.choice__more { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; color: var(--muted); font-size: 1rem; }
.choice__more input { width: 8.5em; min-height: 48px; padding: 8px 10px; border: 2px solid var(--line-strong); border-radius: var(--r-xs); background: var(--field); font: inherit; color: var(--ink); }
.choice__more input[type=number] { width: 5.5em; }
.switchrow { display: flex; gap: var(--s3); align-items: center; min-height: 48px; margin-bottom: var(--s3); font: 600 1.04rem/1.3 var(--font-display); color: var(--ink); cursor: pointer; }
.switchrow input { width: 26px; height: 26px; accent-color: var(--brand); flex: none; }

/* team: colour swatches, waiting invitations, deactivation list */
.swatches { display: flex; flex-wrap: wrap; gap: var(--s2); }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; }
.swatch > span { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 3px solid transparent; transition: border-color var(--dur-ui); }
.swatch input:checked + span { border-color: var(--c); }
.swatch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.swatch__ok { position: absolute; right: -2px; bottom: -2px; display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 0 0 2px var(--card); }
.swatch__ok .ico { width: 14px; height: 14px; }
.swatch input:checked + span .swatch__ok { display: grid; }
.team li > span > small { display: block; overflow-wrap: anywhere; }
.invites { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; gap: var(--s2); }
.invites li { display: grid; gap: var(--s2); padding: var(--s3); border-radius: var(--r-sm); background: var(--paper); }
.invites b { display: block; font: 600 1.04rem/1.2 var(--font-display); color: var(--ink); overflow-wrap: anywhere; } .invites small { color: var(--muted); }
.invites .row { margin: 0; }
.deact__list { margin-bottom: var(--s4); }
.emailwait { display: grid; gap: var(--s2); padding: var(--s3); margin-bottom: var(--s3); border-radius: var(--r-sm); background: var(--warn-soft); }
.emailwait p { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.emailwait form { margin: 0; }

/* reminders: placeholders, language switch and the phone-style preview */
.phs { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0 0 var(--s4); }
.phs li { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: var(--r-xs); background: var(--paper); font-size: .98rem; }
.phs code { font-weight: 700; color: var(--brand); }
.remind__tabs { margin-bottom: var(--s4); }
.remind__preview { margin: var(--s4) 0 var(--s2); padding: var(--s4); border-radius: var(--r-sm); background: var(--paper); }
.remind__lbl { display: flex; gap: var(--s2); align-items: center; margin: 0 0 var(--s2); font: 600 .95rem/1.2 var(--font-display); color: var(--muted); }
.bubble { position: relative; max-width: 46ch; margin: 0; padding: var(--s3) var(--s4); border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs); background: var(--card); box-shadow: var(--edge); white-space: pre-line; overflow-wrap: anywhere; }

/* access log, help, deletion banner */
.auditt td { vertical-align: top; } .auditt td:first-child { white-space: nowrap; }
.howto { display: grid; gap: var(--s2); }
.howto__item { border-radius: var(--r-sm); background: var(--paper); }
.howto__item > summary { display: flex; gap: var(--s3); align-items: center; min-height: 56px; padding: var(--s2) var(--s4); cursor: pointer; font: 600 1.06rem/1.25 var(--font-display); color: var(--ink); list-style: none; }
.howto__item > summary::-webkit-details-marker { display: none; }
.howto__item > summary::after { content: '+'; margin-left: auto; font-size: 1.4rem; color: var(--brand); }
.howto__item[open] > summary::after { content: '–'; }
.howto__item ol { margin: 0; padding: 0 var(--s4) var(--s4) 2.6em; display: grid; gap: var(--s2); }
.delbanner { flex-wrap: wrap; }
.delbanner > span { flex: 1 1 260px; }
.delbanner form { margin: 0; }

/* ===== wave 3: calendar ===== */
/* Kind switch on the booking form: Appointment | Busy time (radios dressed as a segmented control) */
.seg--kind { display: flex; width: 100%; margin-bottom: var(--s4); }
.seg label { flex: 1; position: relative; cursor: pointer; }
.seg label input { position: absolute; opacity: 0; pointer-events: none; }
.seg label span { display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 8px 16px; border-radius: var(--r-pill); color: var(--ink); font: 600 1rem/1.1 var(--font-display); transition: background-color var(--dur-ui), color var(--dur-ui); }
.seg label input:checked + span { background: var(--brand); color: var(--on-brand); }
.seg label input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg label .ico { width: 20px; height: 20px; }
.pills--quick { margin: 0 0 var(--s4); }
.pills--quick .chipbtn { min-height: 48px; font-size: .95rem; }

/* Several services: tick a service, then a quantity stepper and (owners) the price appear next to it */
.svcpick { border: 0; padding: 0; margin: 0 0 var(--s4); }
.svcpick__list { display: grid; gap: var(--s2); }
.svcl { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding: var(--s1); border-radius: var(--r-sm); background: var(--paper); }
.svcl__pick { flex: 1 1 220px; display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 6px 12px; border-radius: var(--r-xs); cursor: pointer; }
.svcl__pick input { width: 26px; height: 26px; flex: none; accent-color: var(--brand); }
.svcl__pick span { display: grid; gap: 2px; }
.svcl__pick b { font: 600 1rem/1.2 var(--font-display); color: var(--ink); }
.svcl__pick small { color: var(--muted); font-size: .9rem; }
.svcl__more { display: none; flex-wrap: wrap; gap: var(--s2); align-items: center; padding-right: var(--s1); }
.svcl:has(input[name=svc]:checked) { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--mint-3); }
.svcl:has(input[name=svc]:checked) .svcl__more { display: flex; }
.qty { display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--card); box-shadow: inset 0 0 0 2px var(--line); }
.qty__b { width: 48px; height: 48px; border: 0; border-radius: 50%; background: none; color: var(--ink); font: 700 1.3rem/1 var(--font-display); cursor: pointer; }
.qty input { width: 3ch; min-height: 44px; padding: 0; border: 0; background: none; text-align: center; font: 700 1.05rem/1 var(--font-display); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.svcl__price summary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--r-pill); background: var(--card); box-shadow: inset 0 0 0 2px var(--line); font: 600 .95rem/1 var(--font-display); color: var(--ink); cursor: pointer; list-style: none; }
.svcl__price summary::-webkit-details-marker { display: none; }
.svcl__price[open] { flex-basis: 100%; }
.svcl__price .field { margin: var(--s2) 0 0; max-width: 220px; }
.ends { margin: var(--s2) 0 0; min-height: 1.4em; font: 600 1rem/1.4 var(--font-display); color: var(--brand); }

/* The booking form in a sheet over the calendar: flat sections instead of cards inside the dialog */
.dlg--sheet .dlg__body { padding-bottom: 0; }
.apptsheet .card { padding: 0 0 var(--s4); margin: 0 0 var(--s4); background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--line); }
.apptsheet .form.card { border-bottom: 0; margin-bottom: 0; }
.apptsheet .sticky { bottom: 0; margin: 0 -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-radius: 0; background: color-mix(in srgb, var(--card) 96%, transparent); box-shadow: 0 -1px 0 var(--line); }
.apptsheet .danger { margin: var(--s4) 0; }
.apptsheet__full { margin: var(--s3) 0 var(--s5); text-align: center; }

/* Appointment list over a period */
.alfilter .seg { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; margin-bottom: var(--s3); border-radius: var(--r-md); }
.alfilter .seg label span { padding: 8px 10px; border-radius: var(--r-sm); text-align: center; }
@media (max-width: 480px) { .alfilter .seg { grid-template-columns: repeat(2, 1fr); } }
.alfilter__nav input[type=date] { min-height: 48px; padding: 8px 10px; width: auto; background: var(--card); }
.pills--count .pill span { gap: var(--s2); padding: 6px 8px 6px 16px; }
.pills--count .pill span b { min-width: 2em; padding: 3px 6px; border-radius: var(--r-pill); background: var(--paper-2); text-align: center; font-variant-numeric: tabular-nums; }
.pills--count .pill input:checked + span b { background: rgb(255 255 255 / .22); }
.alsum { margin: 0 0 var(--s3); }
.alall { min-height: 48px; margin: 0 0 var(--s2) var(--s3); }
.aplist { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s2); }
.aplist__day { margin-top: var(--s3); font: 600 1rem/1.2 var(--font-display); }
.aplist__day a { color: var(--ink); text-decoration: none; } .aplist__day a:hover { text-decoration: underline; }
.alr { --c: var(--brand); display: grid; grid-template-columns: 48px 64px minmax(0, 1fr) auto; gap: var(--s2) var(--s3); align-items: center; padding: var(--s2) var(--s3) var(--s2) var(--s1); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow); border-left: 6px solid var(--c); }
.alr.is-picked { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.alr--cancelled, .alr--noshow { border-left-color: var(--danger); }
.alr--cancelled .alr__name, .alr--noshow .alr__name { text-decoration: line-through; text-decoration-thickness: 1px; }
.alr__sel { display: grid; place-items: center; width: 48px; height: 48px; cursor: pointer; }
.alr__sel input { width: 24px; height: 24px; accent-color: var(--brand); }
.alr__time { display: grid; text-decoration: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.alr__time b { font: 600 1.05rem/1.2 var(--font-display); } .alr__time small { color: var(--muted); }
.alr__body { display: grid; gap: 2px; min-width: 0; }
.alr__name { font: 600 1.05rem/1.25 var(--font-display); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.alr__body small { color: var(--muted); overflow-wrap: anywhere; }
.alr__act { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: flex-end; }
.alr.is-sent .alr__act .abtn { opacity: .6; }
.albar { align-items: center; }
.albar__n { margin-right: auto; font: 600 1rem/1.2 var(--font-display); }
.albar .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) {
  .alr { grid-template-columns: 48px 60px minmax(0, 1fr); }
  .alr__act { grid-column: 2 / -1; justify-content: flex-start; }
}
/* a segmented control with four short choices stays one even row on phones */
@media (max-width: 520px) { .seg[role=radiogroup] { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; } .seg[role=radiogroup] > * { padding-inline: 4px; font-size: .9rem; } }

/* =====================================================================================================================
   v3 · professional layer (accent-ladder, seed 2037208158). Decisions, not decoration:
   - one hue: evergreen at full strength only on small marks (the primary button, data, the active nav icon);
     its pale mint tints do the area work (active nav row, badges, progress, the one highlighted card);
   - flat surfaces: white panels on a mint-white ground, separated by a 1px edge, never a resting shadow or a gradient;
   - lists are one panel with row rules, not a card per row; KPIs are type, not tiles;
   - type: Atkinson for all work; Newsreader for one greeting; titles 24-32px, body 16-18px (older users), labels 14px grey;
   - shadows and glass only on what floats: the phone dock, menus, dialogs, toasts.
   ===================================================================================================================== */
:root {
  --ground: #f6faf8; --surface: #fff; --raised: #f3f8f5; --edge-1: #e1ebe6; --rule: #edf3f0; --control: #b9c9c1;
  --ink: #13241e; --text: #13241e; --muted: #4f5f58; --paper: var(--ground); --paper-2: #eaf2ee; --card: #fff;
  --mint-50: #eef8f3; --mint-100: #def2e8; --mint-200: #c3e7d5;
  --brand-soft: var(--mint-50); --accent-soft: var(--mint-50); --sky: var(--mint-50);
  --line: var(--edge-1); --line-strong: var(--control);
  --edge: none; --shadow: none;                                                  /* panels: a border, no shadow */
  --float: 0 18px 44px -18px rgb(19 36 30 / .35), 0 0 0 1px rgb(19 36 30 / .06); /* only for what floats */
  --r: 18px; --r-md: 14px; --r-sm: 12px;
}
body { background: var(--ground); color: var(--text); }
.ws { background: var(--ground); }

/* titles: a work screen, not a landing page */
h1, .ed { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.main h1, .ahead h1, .phead h1 { font-size: clamp(1.55rem, 4.5vw, 1.85rem); }
h2 { font-size: 1.18rem; font-weight: 700; } h3 { font-size: 1.05rem; }
.hello, .dhead__title { font: 400 clamp(1.75rem, 5vw, 2.1rem)/1.12 var(--font-editorial); letter-spacing: -.01em; }  /* the one greeting */
.dhead__title b, .hello b { font-weight: 560; }
.over { letter-spacing: 0; text-transform: none; font-size: .95rem; color: var(--muted); }
.lead { font-size: 1.05rem; }

/* buttons: one flat filled style (evergreen), one outlined; no sheen, no glow, no gradient */
.btn, .btn--accent, .btn--dark, .btn--danger { background: var(--bg); box-shadow: none; filter: none; }
.btn { --bg: var(--brand); --fg: var(--on-brand); font-weight: 700; }
.btn--dark { --bg: var(--ink); } .btn--danger { --bg: var(--danger); }
.btn::after, .btn .lq-drop, .abtn .lq-drop, .bslot .lq-drop, .bchoice .lq-drop { display: none !important; }
.btn--ghost, .btn--glass { --fg: var(--ink); background: var(--card); box-shadow: none; border: 1.5px solid var(--control); }
.btn--glass { --fg: var(--brand); }
@media (hover: hover) { .btn:hover { background: color-mix(in srgb, var(--bg) 88%, #000); } .btn--ghost:hover, .btn--glass:hover { background: var(--mint-50); } }
.abtn { border: 1.5px solid var(--control); border-radius: var(--r-pill); background: var(--card); }
@media (hover: hover) { .abtn:hover { background: var(--mint-50); border-color: var(--brand); } }
.abtn--danger { color: var(--danger); border-color: #e9c3be; }
.chipbtn, .pill span { border-width: 1.5px; border-color: var(--control); }

/* panels: white on the mint-white ground, a 1px edge, no shadow */
.card, .kpi, .bstep, .bsummary, .tablewrap, .sch, .feature, .steps li, .sheet, .auth__card, .signpage__text, .cl__visit, .cl__contact, .vn__card { box-shadow: none; border: 1px solid var(--edge-1); border-radius: var(--r); }
.card { padding: 20px 22px; }
/* the highlighted cards (next patient, the helper, resume, presets, invite code): one flat mint tint, no gradient */
.upnext, .upnext--live, .assist, .cl__talk, .presets, .appcard__code, .vn__draft, .resume, .toeboard, .card--requests {
  background: var(--mint-50); box-shadow: none; border: 1px solid var(--mint-200); }
.resume { color: var(--ink); } .resume > .ico { background: var(--card); color: var(--brand); } .resume small { color: var(--muted); }
.resume__go { background: var(--brand); color: var(--on-brand); }
.upnext__avatar { background: var(--card); box-shadow: none; border: 1px solid var(--mint-200); }

/* lists: one panel, rows split by a rule (no card per row, no shadow per row) */
.plist, .alist, .todo, .debts, .team, .consents, .reqs, .filelist, .remind, .vlist, .today__list, .agenda {
  gap: 0; background: var(--card); border-radius: var(--r); box-shadow: none; border: 1px solid var(--edge-1); overflow: hidden; }
.plist > li, .alist > li, .todo > li, .debts > li, .team > li, .consents > li, .reqs > li, .filelist > li, .remind > li, .vlist > li, .today__list > li, .agenda > li { border-bottom: 1px solid var(--rule); }
.plist > li:last-child, .alist > li:last-child, .todo > li:last-child, .debts > li:last-child, .team > li:last-child, .consents > li:last-child, .reqs > li:last-child, .filelist > li:last-child, .remind > li:last-child, .vlist > li:last-child, .today__list > li:last-child, .agenda > li:last-child { border-bottom: 0; }
.plist a, .alist a, .alist > li.exprow, .todo a, .debts li, .team li, .consents li, .reqs li, .filelist li, .remind li, .vlist details, .today__list a, .ag {
  border-radius: 0; background: var(--card); box-shadow: none; }
.card .alist, .card .todo, .card .debts, .card .team, .card .reqs, .card .remind, .card--requests .reqs { border-color: var(--rule); }
@media (hover: hover) { .plist a:hover, .alist a:hover, .todo a:hover, .today__list a:hover { background: var(--raised); box-shadow: none; } }
.today__list li.next a { background: var(--mint-50); box-shadow: inset 4px 0 0 var(--brand); }
.today__list li.next .today__time { background: transparent; color: var(--brand); }
.today__list li.past a, .today__list li.past .today__time { background: var(--card); }
.ag { box-shadow: inset 4px 0 0 var(--c); } .ag--now { box-shadow: inset 4px 0 0 var(--c); background: var(--mint-50); }
.ag--noshow, .ag--cancelled { box-shadow: inset 4px 0 0 var(--danger); }
.agenda > li.gap { background: var(--raised); } .agenda .gap a { border: 0; border-radius: 0; }
.todo__n { background: var(--mint-100); color: var(--brand); } .todo li.done .todo__n { background: var(--ok-soft); color: var(--ok); }

/* KPIs: type, not tiles. One strip split by hairlines; value regular in ink, label grey above */
.kpis { gap: 0; background: var(--card); border-radius: var(--r); box-shadow: none; border: 1px solid var(--edge-1); overflow: hidden; }
.kpis .kpi { box-shadow: none; border-radius: 0; background: transparent; border-right: 1px solid var(--rule); padding: 16px 20px; }
.kpis .kpi:last-child { border-right: 0; }
.kpi b { font: 400 1.55rem/1.1 var(--font-display); color: var(--ink); }
.kpi small { font: 600 .92rem/1.25 var(--font-display); color: var(--muted); }
.kpi--deep { background: var(--mint-50) !important; } .kpi--deep b { color: var(--ink); } .kpi--deep small, .kpi--deep .delta { color: var(--muted); }
@media (max-width: 640px) { .kpis .kpi { border-right: 0; border-bottom: 1px solid var(--rule); } }

/* pills and status: pale tint, dark ink of the same hue */
.pill-s, .st { min-height: 26px; font-size: .86rem; box-shadow: none !important; border-radius: 10px; }
.pill-s--new, .pill-s--next { background: var(--mint-100); color: var(--brand-deep); }
.pill-s--type { background: #f0edf6; color: #4d4170; }

/* selected, current, chosen: one look everywhere, a mint tint with an evergreen edge and dark green words.
   The evergreen fill means one thing only: the screen's main action (.btn--accent). */
.chipbtn.on, .presets .chipbtn.on, .pill input:checked + span, .seg a.on, .seg button.on, .seg [aria-current=page], .seg [aria-pressed=true],
.seg [aria-selected=true], .seg label input:checked + span, .tabs a.on, .bday.on, .daystrip a.on, .bslot.on, .vtoc a.on, .bhead__langs a.on,
.week__day.today .week__head, .bhead__big[aria-pressed=true] {
  background: var(--mint-100); border-color: var(--brand); color: var(--brand-deep) !important; box-shadow: inset 0 0 0 1px var(--brand); }
.bday.on small, .bday.on i, .week__day.today .week__head small { color: var(--brand-deep); }
.vtoc a.on.has::after { background-color: var(--ok); }
.pills--count .pill input:checked + span b { background: #fff; }
/* a choice of several (checkbox pills) also shows its tick, so "on" is never only a colour */
.pill input[type=checkbox]:checked + span::before { content: ''; flex: none; width: 16px; height: 16px; margin-right: 6px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* navigation: desktop sidebar on the ground, active row = mint tint + ink; the phone dock stays a floating glass bar */
.top { background: color-mix(in srgb, var(--ground) 94%, transparent); box-shadow: 0 1px 0 var(--edge-1); }
.top.glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (min-width: 900px) {
}

/* forms: quiet controls, evergreen focus */
.field input, .field select, .field textarea, .search input, .jump input, .jump select { border-width: 1.5px; border-color: var(--control); border-radius: var(--r-sm); }
.field input:focus, .field select:focus, .field textarea:focus, .search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--mint-200); }
.sticky { background: color-mix(in srgb, var(--card) 97%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--float); }
.tabs a { box-shadow: none; border: 1px solid var(--edge-1); }
.seg { border: 1px solid var(--edge-1); }
.flash--ok { background: var(--mint-50); border: 1px solid var(--mint-200); }
.demobar { background: #fff7ec; border: 1px solid #f3dcc0; }

/* long forms: each label sits with its own field, with clear air above it, not under the control before it */
section.card > :is(.field, fieldset.field, .row2, .row3, .scale, .pills, .check) { margin-top: var(--s5); }
section.card > :is(h2, h3) + :is(.field, fieldset.field, .row2, .row3, .scale, .pills, .check), section.card > .hint + *, section.card > .muted + * { margin-top: 0; }
section.card > .row2 + .row2, section.card > .row3 + .row3 { margin-top: var(--s4); }

/* a list inside a panel is not framed twice: it runs to the panel's edges with a rule above */
.card > :is(.remind, .todo, .reqs, .team, .alist, .appsees) { border: 0; border-top: 1px solid var(--rule); border-radius: 0; margin-inline: -22px; }
.card > :is(.remind, .todo, .reqs, .team, .alist) > li { padding-inline: 22px; }
.card > .todo > li > a, .card > .alist > li > a { padding-inline: 22px; margin-inline: -22px; }
.card > :is(.remind, .todo, .reqs, .team, .alist, .appsees):last-child { margin-bottom: -20px; border-radius: 0 0 calc(var(--r) - 1px) calc(var(--r) - 1px); }
.card--requests .reqs, .card--requests .reqs li { background: transparent; }

/* the booking form in a sheet: flat sections, a rule between them, no boxes */
.apptsheet .card { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
.apptsheet .form.card { border-bottom: 0; }

/* a form's own submit button is as wide as its words on wider screens (one full-width bar per screen is enough) */
@media (min-width: 640px) { .form > .btn, .form > button[type=submit] { justify-self: start; } .auth__card .form > .btn, .bstep .form > .btn { justify-self: stretch; } }

/* money tables on a phone: one block per row, the row's name first, then "column name … figure" lines (app.js marks them) */
@media (max-width: 640px) {
  .tbl.is-stack thead { display: none; }
  .tbl.is-stack, .tbl.is-stack tbody, .tbl.is-stack tfoot { display: block; }
  .tbl.is-stack tr { display: grid; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
  .tbl.is-stack tr:last-child { border-bottom: 0; }
  .tbl.is-stack :is(td, th) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 0; border: 0; white-space: normal; text-align: left; font-size: 1rem; }
  .tbl.is-stack td[data-label]::before { content: attr(data-label); color: var(--muted); font: 500 .92rem/1.3 var(--font-display); }
  .tbl.is-stack tr > :first-child { font-weight: 700; color: var(--ink); }
  .tbl.is-stack td:empty { display: none; }
  .tablewrap:has(> .tbl.is-stack) { overflow: visible; }
}
.tablewrap:focus-visible { outline-offset: 2px; }

/* tables: rules and alignment, grey sentence-case headers */
.tbl th { font: 600 .86rem var(--font-display); color: var(--muted); letter-spacing: 0; text-transform: none; }
.tbl td { border-bottom-color: var(--rule); }

.main { width: min(100% - 32px, 980px); } .main--wide { width: min(100% - 32px, 1280px); }
.top { padding-inline: 16px; }
.btn:active, .abtn:active, .chipbtn:active { scale: .98; }
.assist__title { font-size: clamp(1.3rem, 4.6vw, 1.6rem); }
@media (max-width: 520px) { .assist { grid-template-columns: 1fr 88px; padding: 18px; } .assist__orb { width: 88px; } }
.upnext__name { font-size: clamp(1.45rem, 5vw, 1.75rem); }
.top__search { box-shadow: none; border: 1px solid var(--edge-1); background: var(--card); }
/* phones: the mark alone, then the practice's name in full (the word mark would squeeze it to "Cabin…") */
@media (max-width: 520px) { .assist { grid-template-columns: 1fr; } .assist__orb { grid-row: 1; width: 64px; } .assist__text { grid-row: 2; } }
@media (max-width: 520px) { .assist__title { font-size: 1.25rem; } }
/* breaks: a flat tone with their word, not a hatch; two radii only (18 panels, 12 inside); cards keep their own height */
.cg__break { background: #edf2ef; } .cgi::after { background: color-mix(in srgb, var(--c) 18%, transparent); }
:root { --r-md: 12px; } .presetrow .preset, .vphoto.is-loading, .vphoto.is-failed, .psr, .toast { border-radius: 12px; }
.grid2 { align-items: start; }
/* one filled action per screen: .btn--accent (evergreen). Plain .btn is the outlined secondary; dark and danger stay filled */
.btn { --bg: var(--card); --fg: var(--ink); border: 1.5px solid var(--control); }
.btn--accent { --bg: var(--brand); --fg: var(--on-brand); border-color: var(--brand); }
.btn--dark { --bg: var(--ink); --fg: var(--on-brand); border-color: var(--ink); }
.btn--danger { --bg: var(--danger); --fg: var(--on-brand); border-color: var(--danger); }
@media (hover: hover) { .btn:not(.btn--accent):not(.btn--dark):not(.btn--danger):hover { background: var(--mint-50); border-color: var(--brand); } }
.kpi--deep b { font-size: 2rem; }
.trialchip { border: 1px solid var(--edge-1); }

/* ===== interaction layer: feedback, never decoration (all of it respects reduced motion) ===== */
/* checkboxes: a box that fills evergreen and draws its tick */
input[type=checkbox] { -webkit-appearance: none; appearance: none; display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; margin: 0; border: 1.5px solid var(--control); border-radius: 8px; background: var(--card); cursor: pointer; transition: background-color .16s, border-color .16s; }
input[type=checkbox]::after { content: ''; width: 14px; height: 14px; background: var(--on-brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; clip-path: inset(0 100% 0 0); }
input[type=checkbox]:checked { background: var(--brand); border-color: var(--brand); }
input[type=checkbox]:checked::after { clip-path: inset(0 0 0 0); transition: clip-path .22s cubic-bezier(.65, 0, .35, 1) .04s; }
.flag--alert input[type=checkbox]:checked { background: var(--danger); border-color: var(--danger); }
input[type=checkbox]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
/* a tick box inside a field or a settings row keeps its own size (the text-field rules above would stretch it into a slab) */
.field input[type=checkbox], .svclist input[type=checkbox], .hours input[type=checkbox] { width: 26px; height: 26px; min-height: 0; padding: 0; }
/* the success tick in a toast draws itself */
.toast--ok > .ico path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: tick-draw .34s cubic-bezier(.65, 0, .35, 1) .12s forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
@keyframes toast-in { from { opacity: 0; translate: 0 14px; scale: .97; filter: blur(4px); } }
/* a figure that changes pops in (blur + rise), e.g. the saved time, the cash difference */
.is-pop { animation: pop-in .36s cubic-bezier(.22, 1, .36, 1); }
@keyframes pop-in { from { opacity: 0; translate: 0 6px; filter: blur(3px); } }
/* a field the server or the browser rejected shakes once */
.is-shake { animation: shake .36s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
/* folding sections open with their real height */
:root { interpolate-size: allow-keywords; }
details::details-content { height: 0; overflow: clip; transition: height .28s cubic-bezier(.22, 1, .36, 1), content-visibility .28s allow-discrete; }
details[open]::details-content { height: auto; }
/* search: rows wait as quiet placeholders while the server answers */
.psr__wait { display: grid; gap: 6px; padding: 12px; } .psr__wait .skel { height: 14px; } .psr__wait .skel + .skel { width: 60%; }
@media (prefers-reduced-motion: reduce) { .is-pop, .is-shake { animation: none !important; } details::details-content { transition: none; } input[type=checkbox]:checked::after { transition: none; } .toast--ok > .ico path { animation: none; stroke-dashoffset: 0; } }

/* ===== wave 4: documents ===== */
/* visit form: the report switch, its "findings and photos" option tucked under it, and the preview link */
.sharerep { display: grid; gap: var(--s2); margin-top: var(--s2); }
.sharerep .check--big { margin-bottom: 0; }
.sharerep__sub { min-height: 48px; margin-left: 36px; }
.sharerep__preview { justify-self: start; margin-left: 36px; }
/* patient record, app box: what the connected patient can open right now (one panel, rows split by a rule) */
.appsees__h { margin: var(--s4) 0 var(--s2); font: 600 1.04rem/1.3 var(--font-display); color: var(--ink); }
.appsees { margin-bottom: var(--s3); }
.appsees .consents__act form { margin: 0; }
.appsees .consents__ico { width: auto; height: auto; background: none; color: var(--muted); }  /* a plain icon, no tinted chip */
.card .appsees { border-color: var(--rule); }

/* ===== wave 4: packages ===== */
/* checkout on the visit: what a package or credit paid, then the offers. The one highlighted area of the bill */
.ck { display: grid; margin: var(--s4) 0; border: 1px solid var(--mint-200); border-radius: var(--r-sm); background: var(--mint-50); overflow: hidden; }
.ck__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--mint-200); }
.ck > :last-child { border-bottom: 0; }
.ck__ico { display: inline-flex; color: var(--brand); }
.ck__meta { display: grid; gap: 2px; min-width: 0; color: var(--ink); }
.ck__meta small { color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }
.ck__meta .pill-s { margin-top: 2px; }
.ck__sum { font: 700 1.05rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.ck__offer { grid-template-columns: auto minmax(0, 1fr); }
.ck__use { min-height: 52px; }
.ck__credit { grid-template-columns: minmax(0, 1fr) 8.5em auto; }
.ck__amt { gap: 0; } .ck__amt input { min-height: 52px; text-align: right; }
.ck__note { margin: 0; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--mint-200); color: var(--ink); }
.ck__sell > summary { display: flex; align-items: center; gap: var(--s2); min-height: 52px; padding: var(--s2) var(--s4); cursor: pointer; list-style: none; font: 600 1rem/1.3 var(--font-display); color: var(--brand-deep); }
.ck__sell > summary::-webkit-details-marker { display: none; }
.ck__sellbody { display: grid; gap: var(--s3); padding: 0 var(--s4) var(--s4); }
.ck__sellbody .btn { justify-self: start; }
.ck__due { margin: var(--s2) 0 0; font: 600 1rem/1.4 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ck__extra { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--mint-50); }
@media (max-width: 560px) {
  .ck__row { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--s3); }
  .ck__row--done .abtn { grid-column: 2 / -1; justify-self: start; }
  .ck__offer { grid-template-columns: minmax(0, 1fr); } .ck__use { width: 100%; }
  .ck__credit { grid-template-columns: minmax(0, 1fr) auto; } .ck__credit .ck__meta { grid-column: 1 / -1; }
  .ck__sell > summary, .ck__sellbody { padding-inline: var(--s3); }
}
/* the patient record: packages with what is left, the credit, and the movements */
.prepaid__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s4); }
.prepaid__credit { display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s3); }
.prepaid__credit small { font: 600 .92rem/1.2 var(--font-display); color: var(--muted); }
.prepaid__credit b { font: 400 1.55rem/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.pkgrows, .pkghist, .pkglist { list-style: none; margin: 0 0 var(--s3); padding: 0; border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; background: var(--card); }
.pkgrows > li, .pkghist > li, .pkglist > li { border-bottom: 1px solid var(--rule); }
.pkgrows > li:last-child, .pkghist > li:last-child, .pkglist > li:last-child { border-bottom: 0; }
.pkgrows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); align-items: center; padding: var(--s3) var(--s4); }
.pkgrows__what, .pkghist__what, .pkglist__what { display: grid; min-width: 0; color: var(--ink); }
.pkgrows__what small, .pkghist__what small, .pkglist__what small { color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }
.pkgrows__left { display: grid; justify-items: end; gap: 4px; text-align: right; }
.pkgrows__left b { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.pkgdots { grid-column: 1 / -1; display: flex; gap: 4px; }
.pkgdots i { flex: 1; max-width: 44px; height: 6px; border-radius: 3px; background: var(--paper-2); }
.pkgdots i.on { background: var(--brand); }
.pkgrows--old .pkgrows__what b { color: var(--muted); }
.prepaid__net { display: grid; gap: var(--s2); justify-items: start; margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--warn-soft); border: 0; }
.prepaid__net p { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; color: var(--ink); }
.prepaid__net p .ico { color: var(--warn); }
.prepaid__acts { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-start; margin-top: var(--s2); }
.prepaid__fold[open] { flex-basis: 100%; }
.prepaid__fold > summary { list-style: none; } .prepaid__fold > summary::-webkit-details-marker { display: none; }
.prepaid__fold[open] > summary { background: var(--mint-50); border-color: var(--brand); }
.prepaid__fold .form { margin-top: var(--s3); padding: var(--s4); border: 1px solid var(--edge-1); border-radius: var(--r-sm); }
.prepaid__fold .form .btn { justify-self: start; }
.pkghist { margin-top: var(--s2); }
.pkghist > li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto auto; gap: var(--s2) var(--s3); align-items: center; min-height: 56px; padding: var(--s2) var(--s4); }
.pkghist__when { color: var(--muted); font-size: .95rem; }
.pkghist__sum { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.pkghist form { margin: 0; }
.pkghist > li.is-off .pkghist__sum { color: var(--muted); text-decoration: line-through; }
@media (max-width: 560px) {
  .pkgrows > li, .pkghist > li { padding: var(--s3); }
  .pkghist > li { grid-template-columns: minmax(0, 1fr) auto; }
  .pkghist__when { grid-column: 1 / -1; } .pkghist form { grid-column: 1 / -1; }
}
/* the line on a booking whose services a package pays for */
.pkgline { display: flex; gap: var(--s3); align-items: flex-start; margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--mint-200); border-radius: var(--r-sm); background: var(--mint-50); color: var(--ink); }
.pkgline > .ico { color: var(--brand); margin-top: 2px; }
.pkgline small { display: block; color: var(--muted); font-size: .95rem; }
/* settings: the packages on offer, one panel, each row opens its form */
.pkglist > li > details > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) var(--s4); cursor: pointer; list-style: none; }
.pkglist > li > details > summary::-webkit-details-marker { display: none; }
.pkglist__price { display: grid; justify-items: end; gap: 4px; font: 700 1.02rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.pkglist > li.off .pkglist__what b { color: var(--muted); }
.pkglist .pkgform { padding: 0 var(--s4) var(--s4); }
.pkgform .btn { justify-self: start; }
/* money page: packages sold, sessions used, prepaid money not used yet */
.prepaidk { margin: 0 0 var(--s4); }
.prepaidk__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); }
.prepaidk__head h2 { margin: 0; }
.prepaidk .kpis { margin-bottom: var(--s2); }
.prepaidk .kpi span { overflow-wrap: anywhere; }
/* who owes money: someone who also has credit */
.debtlist__credit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--mint-50); color: var(--ink); }
/* the balance statement: sessions and credit read like payments; credit used on a visit is only a note */
.ledger tr.session td, .ledger tr.credit td { color: var(--ok); }
.ledger tr.session td:nth-child(5), .ledger tr.credit td:nth-child(5) { color: var(--ink); }
.ledger tr.credit_use td { color: var(--muted); }
@media (max-width: 560px) {
  .pkgrows > li { grid-template-columns: minmax(0, 1fr); }
  .pkgrows__left { display: flex; flex-wrap: wrap; justify-items: start; justify-content: flex-start; align-items: center; gap: var(--s2); text-align: left; }
}
@media print { .prepaid__acts, .ck__sell, .ck button { display: none; } }

/* ===== wave 4: waitlist ===== */
/* the count next to "Waiting list" in the calendar bar and the list */
.wlcount { min-width: 1.8em; padding: 2px 7px; border-radius: var(--r-pill); background: var(--mint-100); color: var(--brand-deep); text-align: center; font-variant-numeric: tabular-nums; }
/* "N people on the waiting list fit…": a calm mint line with its one action, never a colour without words */
.wlsum, .wlcard, .wlnote { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.wlsum { margin: 0 0 var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: var(--r-sm); background: var(--mint-50); border: 1px solid var(--mint-200); font: 600 1rem/1.35 var(--font-display); color: var(--ink); }
.wlsum > span { flex: 1 1 16em; } .wlsum .ico, .wlcard .ico, .wlnote .ico, .wlhint .ico, .wlon .ico { flex: none; color: var(--brand); }
.wlsum .abtn { min-height: 44px; }
.wlcard p { display: flex; gap: var(--s2); align-items: center; flex: 1 1 18em; margin: 0; font: 600 1.02rem/1.35 var(--font-display); color: var(--ink); }
.wlnote > span { flex: 1 1 0; min-width: 0; }
.wlnote { flex-wrap: nowrap; align-items: flex-start; margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--mint-50); border: 1px solid var(--mint-200); font-weight: 600; color: var(--ink); }
/* a free stretch in the day list: "Free 10:00 – 11:30" and, next to it, who fits */
.agenda > li.gap--wl { display: flex; flex-wrap: wrap; align-items: center; }
.agenda .gap--wl > a:first-child { flex: 1 1 12em; }
.agenda .gap .wlhint { flex: 0 1 auto; margin: var(--s1) var(--s3) var(--s1) var(--s3); min-height: 44px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--mint-200); color: var(--ink); font-size: .95rem; line-height: 1.25; }
@media (hover: hover) { .agenda .gap .wlhint:hover { border-color: var(--brand); background: var(--mint-50); } }
.wlhint--row { white-space: normal; text-align: left; line-height: 1.25; }
/* a cancelled booking stays faded, but who fits its time is said at full strength */
.ag--cancelled:has(.wlhint--row) { opacity: 1; }
.ag--cancelled:has(.wlhint--row) > .ag__time, .ag--cancelled:has(.wlhint--row) .ag__body > :not(.ag__act) { opacity: .55; }
.card--actions .wladd { grid-column: 1 / -1; justify-content: center; }   /* a long label gets the whole row on phones */
.wlsheet .card { border-width: 0 0 1px; } .wlsheet .form.card { border-width: 0; }   /* flat sections inside the sheet */
.wlon { margin: var(--s3) 0 0; } .wlon a { display: flex; gap: var(--s2); align-items: flex-start; color: var(--ink); text-decoration: none; }
.wlon a:hover span { text-decoration: underline; } .wlon small, .wlon span { overflow-wrap: anywhere; }

/* the waiting-list screen: figures as type, then one panel with a rule between people */
.wlkpi { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0 0 var(--s1); font: 500 1rem/1.3 var(--font-display); color: var(--muted); }
.wlkpi b { font: 400 1.55rem/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.wlkpi__how { margin: 0 0 var(--s4); }
.wlist { container: wlist / inline-size; list-style: none; margin: 0 0 var(--s4); padding: 0; background: var(--card); border: 1px solid var(--edge-1); border-radius: var(--r); overflow: hidden; }
.wlr { --c: var(--brand); display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--s2) var(--s4); align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); box-shadow: inset 4px 0 0 var(--c); }
.wlr:last-child { border-bottom: 0; }
.wlr[hidden] { display: none; }
.wlr__wait { display: grid; justify-items: start; font-variant-numeric: tabular-nums; }
.wlr__wait b { font: 400 1.55rem/1.05 var(--font-display); color: var(--ink); }
.wlr__wait small { color: var(--muted); font-size: .86rem; line-height: 1.2; }
.wlr__body { display: grid; gap: 3px; min-width: 0; }
.wlr__name { font: 600 1.08rem/1.25 var(--font-display); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) { .wlr__name:hover { text-decoration: underline; } }
.wlr__body small { color: var(--muted); overflow-wrap: anywhere; }
.wlr__note { font-style: italic; }
.wlr__act { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
.wlr__act form { margin: 0; }
.wlr__act .btn { min-height: 48px; padding: 10px 18px; font-size: .98rem; }
.wlr--booked, .wlr--removed { box-shadow: inset 4px 0 0 var(--control); }
.wlr--removed .wlr__name { text-decoration: line-through; text-decoration-thickness: 1px; }
@container wlist (max-width: 860px) {   /* the buttons go under the person when the list is narrow, not the window */
  .wlr { grid-template-columns: 60px minmax(0, 1fr); padding: var(--s3); }
  .wlr__act { grid-column: 1 / -1; justify-content: flex-start; }
}

/* the entry form: weekday chips wrap, the part of the day is one segmented row */
.wldays .pill span { min-width: 3.2em; justify-content: center; }
.wlpart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; border-radius: var(--r-md); margin-bottom: var(--s1); }
.wlpart label span { border-radius: var(--r-sm); padding-inline: 8px; text-align: center; }
.wlform .newp .field:last-child { margin-bottom: 0; }
.wloffers li { align-items: flex-start; }

/* who fits / free times: rows of one panel; the offer buttons wrap under the name on phones */
.wlfit__lead { margin: 0 0 var(--s3); color: var(--muted); }
.wlgap { margin: 0 0 var(--s4); }
.wlgap h3 { margin: 0 0 var(--s2); font: 600 1.05rem/1.3 var(--font-display); }
.wlgap h3 small { font: inherit; color: var(--muted); }
.wlfit__list > li { display: grid; grid-template-columns: minmax(14em, 1fr) minmax(0, auto); gap: var(--s2) var(--s3); align-items: center; padding: var(--s3); }
.wlfit__who { display: grid; gap: 2px; min-width: 0; }
.wlfit__who b { font: 600 1.05rem/1.25 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.wlfit__who small { color: var(--muted); overflow-wrap: anywhere; }
.wlfit__act { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
.wlfit__act form { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.wlfit__act .btn { min-height: 48px; padding: 10px 18px; font-size: .98rem; }
.wlfit__list > li.is-sent { opacity: 1; background: var(--mint-50); }
.wlfit__list > li.is-sent .abtn { opacity: .7; }
@media (max-width: 760px) { .wlfit__list > li { grid-template-columns: minmax(0, 1fr); } .wlfit__act { justify-content: flex-start; } }

/* the public pages: "join the waiting list" under the free times, the form, and the accept page */
.bwait { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; margin-top: var(--s5); padding: var(--s4); border-radius: var(--r-sm); background: var(--mint-50); border: 1px solid var(--mint-200); }
.bwait p { flex: 1 1 18em; margin: 0; font-size: 1.05rem; color: var(--ink); }
.bwaitform .pills { margin-bottom: var(--s1); }
.cl--offer .cl__hello { font-size: clamp(1.9rem, 7.5vw, 2.5rem); }
.cl--offer > .row { margin-top: var(--s4); }
.wlaccept { margin: var(--s4) 0 var(--s2); }

/* ===== wave 4: security ===== */
/* two-step sign-in: three numbered steps, the QR code on plain white, the key to type, the 6-digit field */
.tsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.tsteps > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.tsteps > li + li { padding-top: var(--s5); border-top: 1px solid var(--rule); }
.tsteps__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mint-50); border: 1px solid var(--mint-200); color: var(--brand); font: 700 1.05rem/1 var(--font-display); }
.tsteps h2 { margin: 7px 0 var(--s2); font-size: 1.08rem; }
.tsteps p { margin: 0 0 var(--s3); }
.tsteps .form { margin: 0; }
.qr { width: min(220px, 100%); margin: 0 0 var(--s3); padding: var(--s2); border: 1px solid var(--edge-1); border-radius: var(--r-sm); background: #fff; }
.qr svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.tsteps__open { display: none; }
@media (pointer: coarse) { .tsteps__open { display: inline-flex; margin: 0 0 var(--s3); } }   /* only where the app is on the same device */
.tkey { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.tkey .field { flex: 1 1 15em; }
.tkey input, .feedlink input { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .04em; }
.field input.otp { max-width: 11ch; font: 700 1.45rem/1.2 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .28em; }
.tstate { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.team li > span > small.tsmall { display: flex; gap: 4px; align-items: center; }
.tsmall .ico { width: 15px; height: 15px; color: var(--ok); }

/* recovery codes: two columns of easy-to-read codes; printing shows only them */
.rcodes__print { display: none; }
.rcodes__list { list-style: none; counter-reset: rc; display: grid; grid-template-columns: repeat(2, max-content); width: fit-content; max-width: 100%; gap: var(--s2) var(--s5); margin: 0 0 var(--s4); padding: var(--s4); border: 1.5px dashed var(--control); border-radius: var(--r-sm); background: var(--raised); }
.rcodes__list li { counter-increment: rc; display: flex; gap: var(--s2); align-items: baseline; }
.rcodes__list li::before { content: counter(rc) '.'; min-width: 1.7em; text-align: right; color: var(--muted); font-size: .9rem; }
.rcodes__list code { font: 600 1.1rem/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .04em; white-space: nowrap; color: var(--ink); background: none; }
.rcodes > .hint { margin-bottom: var(--s4); }
@media (max-width: 479px) { .rcodes__list { grid-template-columns: max-content; } }   /* one column on phones */
@media print {
  body:has(.rcodes) * { visibility: hidden; }
  body:has(.rcodes) .rcodes, body:has(.rcodes) .rcodes * { visibility: visible; }
  body:has(.rcodes) .rcodes { position: absolute; inset: 0 auto auto 0; width: 100%; }
  .rcodes__print { display: block; font-weight: 700; }
  .rcodes .noprint { display: none; }
}

/* calendar link: the link with its copy button, the provider buttons, the plain warning */
.feedlink { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-end; margin: var(--s3) 0; }
.feedlink .field { flex: 1 1 260px; }
.feedlink input { font-size: .92rem; }
.feedwarn { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s3) 0; padding: var(--s3); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--ink); }
.feedwarn .ico { flex: none; margin-top: 2px; color: var(--warn); }
#feed .howto { margin: var(--s3) 0; }
#feed .choices { margin-top: var(--s2); }

.switch { position: relative; flex: none; width: 48px; height: 28px; border-radius: 14px; background: var(--control); transition: background-color var(--dur-ui) var(--ease); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card);
  box-shadow: 0 1px 2px rgb(19 36 30 / .25); transition: translate var(--dur-ui) var(--ease); }
[aria-pressed="true"] > .switch { background: var(--brand); }
[aria-pressed="true"] > .switch::after { translate: 20px 0; }

/* ===== workflow pass (milestone 1): find patient → record → visit → save → reopen ===== */
/* Palette reconciled with the approved brief (values recorded in the commit): ground #f5faf7, cards #fff, pale mint
   #e5f5ed, supporting mint #cff0df, selected navigation #b5e5ce, actions #176b50 with white labels, text #153c30,
   secondary text #526b60. Control edges darkened from #b9c9c1 (1.7:1 on white) to #738b80 (3.7:1 on white, 3.5:1 on
   the ground): a field's boundary is needed to find it (WCAG 1.4.11). Secondary text never sits on #b5e5ce (4.2:1). */
:root {
  --ground: #f5faf7; --paper: var(--ground); --ink: #153c30; --text: #153c30; --muted: #526b60;
  --mint-50: #e5f5ed; --mint-100: #cff0df; --mint-200: #b5e5ce; --nav-on: var(--mint-200);
  --control: #738b80; --line-strong: var(--control);
}
.field input:focus, .field select:focus, .field textarea:focus, .search input:focus { box-shadow: 0 0 0 3px var(--mint-100); }

/* who and which visit, always in sight while documenting: an opaque bar (no glass over clinical context) */
.vtitle small { font-size: 1.05rem; }
.vtitle__id { margin: -2px 0 var(--s4); color: var(--muted); font: 500 1rem/1.35 var(--font-display); }
.vbar { position: sticky; top: var(--bar-h); z-index: var(--z-sticky); margin: 0 -4px 8px; padding: 0 4px; background: var(--ground); }
.vbar .vtoc { position: static; margin-bottom: 0; }
.vbar__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; padding: 8px 2px 0; font: 500 .95rem/1.3 var(--font-display); color: var(--muted); }
.vbar__who b { color: var(--ink); font-size: 1.02rem; font-weight: 700; overflow-wrap: anywhere; }
.vbar__alert { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); font-weight: 700; }
/* phones: two short lines (who and when; the alerts), so the bar leaves room for the form */
@media (max-width: 640px) {
  .vbar__who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; }
  .vbar__who > span:not(.vbar__alert) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vbar__alert { grid-column: 1 / -1; min-width: 0; }
  .vbar__alert > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.vbar__alert .ico { width: 18px; height: 18px; flex: none; align-self: center; }
/* the page's scroll padding already keeps a section or a field clear of both bars; the cards add only a little air
   (before, padding and margin added up and a section link landed a third of the screen down) */
html:has(.vbar) { scroll-padding-top: calc(var(--bar-h) + 128px); }
.vform .card { scroll-margin-top: 8px; }
@media (min-width: 641px) { html:has(.vform .sticky) { scroll-padding-bottom: 150px; } }

/* the problems of a failed save, above the form, with links to the fields (NHS error summary) */
.errsum { margin: 0 0 var(--s4); padding: 16px 18px; border: 3px solid var(--danger); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.errsum:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.errsum h2 { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; color: var(--danger); font-size: 1.1rem; }
.errsum h2 .ico { width: 24px; height: 24px; flex: none; }
.errsum ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.errsum a { color: var(--danger); font-weight: 700; text-underline-offset: 3px; }
.errsum p { margin: 10px 0 0; }

/* the sole map and the toe board say how they are drawn */
.orient { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 4px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--mint-50); color: var(--ink); font: 500 .95rem/1.35 var(--font-display); }
.orient .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--brand); }

/* the save bar: the record's state in words, with a mark that is not only a colour */
.savestate::before { flex: none; margin-right: 6px; font: 800 .85rem/1 var(--font-body); }
.savestate[data-s=record] { color: var(--ok); } .savestate[data-s=record]::before { content: '✓'; }
.savestate[data-s=draft] { color: var(--muted); } .savestate[data-s=draft]::before { content: '◷'; }
.savestate[data-s=error], .savestate[data-s=offline] { color: var(--danger); } .savestate:is([data-s=error], [data-s=offline])::before { content: '!'; }
/* one status at a time: "unsaved changes" replaces "saved in the record" while the form has edits; a draft, offline or
   failed line replaces both, since it already says the changes are not in the record */
.vform .sticky .dirty { display: none; }
.vform.is-dirty .sticky:not(:has(.savestate:is([data-s=draft], [data-s=offline], [data-s=error], [data-s=saving]))) .dirty { display: flex; }
.vform.is-dirty .sticky .savestate[data-s=record] { display: none; }
@media (max-width: 640px) {
  .sticky:has(> .savestate) { grid-template-rows: auto auto; }
  .sticky:has(> .savestate) > :is(.dirty, .savestate) { white-space: normal; }
}
/* voice note: who it is for, what is already in the visit, what must be ticked before it is added */
.vn__title .vn__who b { color: var(--ink); }
.vn__confirm { border: 0; min-width: 0; display: grid; gap: 8px; color: var(--ink); }
.vn__confirm legend { display: flex; gap: 6px; align-items: center; float: left; width: 100%; margin-bottom: 4px; padding: 0; font: 700 1rem/1.3 var(--font-display); color: var(--warn); }
.vn__confirm ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vn__confirm .check { align-items: flex-start; min-height: 44px; font-weight: 600; }
.vn__confirm .hint { color: var(--ink); }
.vn__old { margin: -6px 0 14px; padding: 10px 12px; border-left: 3px solid var(--control); background: var(--raised); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .95rem; }
.vn__old b { font: 600 .92rem/1.3 var(--font-display); color: var(--muted); } .vn__old p { margin: 4px 0 0; white-space: pre-line; }
.vn__return { display: flex; justify-content: center; margin: 12px 0 0; }
/* Reduce transparency (or a browser without backdrop blur): every floating bar becomes fully opaque. This is the
   base treatment; tint and blur are the enhancement on top of it. */
@media (prefers-reduced-transparency: reduce) {
  .top, .top.glass { background: var(--ground); }
  .sticky { background: var(--surface); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top, .top.glass { background: var(--ground); } .sticky { background: var(--surface); }
}
.vn__for { margin: -4px 0 12px; font: 600 1rem/1.35 var(--font-display); color: var(--ink); }
/* the record: "Resume the visit" (an open visit of today) takes the whole first row on phones, like "Start a visit" */
.card--actions > a.btn--accent:first-child { grid-column: 1 / -1; }
.card--actions > a.btn--accent:first-child + form { grid-column: 1 / -1; }
.card--actions > a.btn--accent:first-child + form .abtn { width: 100%; justify-content: center; }

/* ===== pass 2: dashboard, calendar, bookings, online booking ===== */
/* the second identifier (record number, year of birth) under a name that is like another patient's; and on a booking */
.whotag, .upnext__id, .apid { display: block; font: 600 .95rem/1.3 var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.upnext__id { margin: 0 0 4px; }
.apid { margin: -4px 0 var(--s3); }
.cgi__id { font-style: normal; font-weight: 600; opacity: .9; }
/* times are data: the sans display face with even digits, not the editorial serif */
.today__time { font: 600 1.2rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
/* a focused field in the booking sheet or page stays clear of its sticky save bar */
html:has([data-apptform] .sticky) { scroll-padding-bottom: 130px; }
.dlg--sheet .dlg__body { scroll-padding: 16px 0 130px; }
.dlg--sheet .errsum { scroll-margin-top: 8px; }

/* online booking: the chosen time says so with a mark, not only a fill */
.bslot.on::before { content: '✓\00a0'; }
.bhead__langs a { min-height: 48px; }
.bsteperr { margin: 0 0 16px; }
.berr { margin: 0 0 16px; padding: 18px 20px; border: 3px solid var(--danger); border-radius: var(--r-sm); background: var(--card); color: var(--ink); }
.berr:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.berr h2 { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; color: var(--danger); font-size: 1.2rem; }
.berr h2 .ico { width: 26px; height: 26px; flex: none; }
.berr ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 1.08rem; }
.berr a { color: var(--danger); font-weight: 700; text-underline-offset: 3px; }
.berr p { margin: 10px 0 0; }
/* the read-aloud controls of the appointment page's helper */
.cl__say { display: flex; flex-wrap: wrap; gap: 8px; }
.cl__say .abtn { min-height: 48px; }
@media (max-width: 360px) { .bslots { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .bday { width: 58px; } }
/* the helper's question box: on a narrow phone the field takes its own row, so what is typed stays readable */
@media (max-width: 420px) { .cl__ask { grid-template-columns: 1fr auto; } .cl__ask input { grid-column: 1 / -1; } .cl__ask .btn { width: 100%; } }
/* the booking form's save bar: a long label ("I know, save anyway") wraps instead of being cut off */
[data-apptform] .sticky > :is(.btn, .abtn) { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; }

/* ===== pass 3: refused visit save (both versions), the visit bars on phones ===== */
/* a save refused over a newer version: the newer saved text and what was typed, side by side (stacked on phones) */
.vcmp { margin: 0 0 var(--s4); border: 3px solid var(--warn); scroll-margin-top: 8px; }
.vcmp:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.vcmp h2 { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; color: var(--warn); font-size: 1.15rem; }
.vcmp h2 .ico { width: 24px; height: 24px; flex: none; }
.vcmp > p { margin: 0 0 8px; }
.vcmp__field { margin-top: var(--s4); }
.vcmp__field h3 { margin: 0 0 8px; font: 700 1rem/1.3 var(--font-display); }
.vcmp__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.vcmp__col { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.vcmp__col--mine { border-style: dashed; border-color: var(--control); background: var(--mint-50); }
.vcmp__col h4 { margin: 0 0 6px; font: 700 .95rem/1.3 var(--font-display); color: var(--ink); }
.vcmp__col h4 small { display: block; font-weight: 500; color: var(--muted); }
.vcmp__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vcmp__text i { color: var(--muted); }
.vcmp__other { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.vcmp__other > li > b { display: block; margin: 0 0 4px; font-weight: 600; }
.vcmp__other .vcmp__col { display: block; padding: 6px 12px; overflow-wrap: anywhere; }
.vcmp__other .vcmp__col small { display: block; color: var(--muted); font-weight: 600; }
.vcmp__act { margin-top: var(--s4); }
.vcmp .hint { margin: 8px 0 0; }
@media (max-width: 640px) {
  .vcmp__pair { grid-template-columns: minmax(0, 1fr); }
  .vcmp__other .vcmp__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }  /* short words: side by side */
  .vcmp__act > :is(.btn, form), .vcmp__act form .btn { width: 100%; justify-content: center; }
}
.savestate[data-s=refused] { color: var(--danger); } .savestate[data-s=refused]::before { content: '!'; }

/* Phones, while documenting: scrolling down folds the identity bar to one line (the name and the alerts, which never
   leave the screen) and tucks the section chips away; scrolling up, or the focus coming into the bar, unfolds it.
   The bar keeps its place in the page while folded (the script holds its height), so nothing under the finger moves;
   only the part that covers the form gets smaller. */
@media (max-width: 640px) {
  .vbar.is-compact { background: transparent; pointer-events: none; }
  .vbar.is-compact > * { pointer-events: auto; }
  .vbar.is-compact .vbar__who { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 6px 2px 6px; background: var(--ground); box-shadow: 0 1px 0 var(--line); }
  .vbar.is-compact .vbar__who b { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vbar.is-compact .vbar__who > span:not(.vbar__alert) { display: none; }
  .vbar.is-compact .vbar__alert { flex: 1 1 0; min-width: 8em; }
  /* the alerts are never cut off: one line when they fit, otherwise they wrap under each other next to the name */
  .vbar.is-compact .vbar__alert > span:last-child { white-space: normal; overflow: visible; }
  /* clipped, not removed: a keyboard can still reach a chip, and the focus unfolds the bar */
  .vbar.is-compact .vtoc { clip-path: inset(0 0 100% 0); opacity: 0; }
  .vbar .vtoc { transition: opacity var(--dur-ui, .2s) ease; }
  html.vbar-compact:has(.vbar) { scroll-padding-top: calc(var(--bar-h) + 64px); }
}
@media (prefers-reduced-motion: reduce) { .vbar .vtoc { transition: none; } }
/* a long "changed elsewhere" toast on a phone: the words take the width, Refresh and × go under them */
@media (max-width: 519px) {
  .toast--stack .toast__text { flex-basis: calc(100% - 40px); }
  .toast--stack .toast__act { margin-left: 36px; }
}

/* ===== visit editor: the foot charts and the sections =====
   The charts are opaque clinical content: the owner's pictures of the feet on the plain ground, each foot named in
   full over its picture, the toe numbers on every toe, the marks in the colours of their kind and in words beside it.
   The pictures are shown as they are (no tint, filter or veil); here only the frame, the overlay and the controls. */
.vsec > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s4); font-size: 1.42rem; }
.vsec > h2 .ico { width: 24px; height: 24px; color: var(--brand); flex: none; }
.vsec__sub { margin: var(--s5) 0 var(--s3); font-size: 1.12rem; }
.vsec__part { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.vsec__part > .vsec__sub { margin-top: 0; }
.vsec__prev { margin-top: var(--s4); }

/* a chart: the names of the feet over the drawing */
.chart { margin: 0; }
.chart__sides { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 4px; text-align: center; }
.chart__sides span { justify-self: center; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--edge-1); font: 700 1rem/1.2 var(--font-display); color: var(--ink); }
.chart__nums text { font: 700 10.5px var(--font-body); fill: var(--muted); text-anchor: middle; }
.chart__words ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: .92rem; }
.chart__words i { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 10px; background: var(--c); color: #fff; font: 700 .72rem/1 var(--font-body); font-style: normal; }
.soles { max-width: 460px; touch-action: pan-y pinch-zoom; }
.mark circle { stroke-width: 1.8; }
.mark text { font-size: 9.5px; }

/* the sole map at work: the chart large on the ground, the tools, the selection and the list beside it */
.mapper { container-type: inline-size; gap: 10px; }
.mapper__grid { display: grid; gap: 16px; align-items: start; }
@container (min-width: 760px) { .mapper__grid { grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); gap: 24px; } }
.mapper__chart { padding: 12px 12px 8px; border-radius: var(--r-md); background: var(--ground); border: 1px solid var(--edge-1); }
.mapper__chart .soles { max-width: 560px; }
.soles[data-soles] { cursor: default; } .soles[data-soles].is-armed { cursor: crosshair; }
.soles[data-soles]:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 4px; border-radius: 12px; }
.mapcross circle { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 3 2.4; }
.mapcross path { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.mapper__now { margin: 6px 4px 0; min-height: 1.4em; text-align: center; font: 600 .98rem/1.35 var(--font-display); color: var(--ink); }
.mapper__side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.mapper__side > .hint { margin: 0; }
.mapper__tools { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mapper__tools legend { width: 100%; margin-bottom: 8px; padding: 0; font: 600 .98rem/1.3 var(--font-display); color: var(--ink); }
.mtool span { min-height: 44px; }
.mtool em { font-style: normal; }
.mtool__n { min-width: 24px; height: 24px; display: inline-grid; place-items: center; margin-left: 2px; padding: 0 6px; border-radius: 12px; background: var(--paper-2); color: var(--ink); font: 700 .82rem/1 var(--font-body); }
.mtool input:checked + span { background: var(--mint-50); }
.mapper__undo { justify-content: flex-start; }
.mlist__h { margin: 4px 0 0; font-size: 1rem; }
.mlist__empty { margin: 0; }

/* the toe board: both forefeet from above, conditions drawn on the nails */
.toeboard { margin: 0 0 var(--s4); padding: 12px 12px 14px; border-radius: var(--r-md); background: var(--ground); border: 1px solid var(--edge-1); }
.toechart { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.toenum circle { fill: var(--card); stroke: var(--line-strong); stroke-width: 1.2; }
.toenum text { font: 700 15px var(--font-body); fill: var(--ink); text-anchor: middle; }
.toenum.is-on circle { fill: var(--ink); stroke: var(--ink); } .toenum.is-on text { fill: #fff; }
.toeboard__on { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.toeboard__brace path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.toeboard__brace circle { fill: var(--ink); }
.toehits ellipse { fill: transparent; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .toehits ellipse:hover { fill: rgb(21 60 48 / .08); stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; } }
.toeboard__words { margin-top: 8px; }
.toeboard__words .hint { text-align: center; margin: 0; }
.toetools { margin: 0 0 12px; padding: 0; border: 0; }
.toetools legend { margin-bottom: 8px; padding: 0; font: 600 .98rem/1.3 var(--font-display); color: var(--ink); }
.toetools__row { display: flex; flex-wrap: wrap; gap: 8px; }
.toetool span { gap: 8px; min-height: 44px; }
.toetool .swatch { width: 18px; height: 14px; }
/* the legend chips: a condition's texture (app/feet.py nail_swatch), a brace on a small nail (brace_icon) */
.swatch, .toeboard svg.swatch { display: block; flex: none; width: 20px; height: 15px; max-width: none; margin: 0; overflow: visible; }
.swatch--brace, .toeboard svg.swatch--brace { width: 42px; height: 28px; margin-block: -6px; }
.toetool input:checked + span { background: var(--mint-50); border-color: var(--ink); box-shadow: 0 0 0 3px var(--mint-100); }
@media (prefers-reduced-motion: no-preference) { .toetools.is-nudge { animation: nudge .42s var(--ease); } }
.nailrows { border-bottom: 1px solid var(--paper-2); }
.toe-cb span { border-color: #c99a7f; background: #f6dcc9; }   /* the small toes of each row in the skin of the picture */

/* pain before and after, side by side where there is room */
.painpair { container-type: inline-size; display: grid; gap: var(--s5); }
@media (min-width: 1100px) { .painpair { grid-template-columns: 1fr 1fr; } .painpair .scale { grid-template-columns: repeat(6, 1fr); } }
.painpair > fieldset.field { margin: 0; }

/* photos are shown as taken: no tint, filter or veil, also while one uploads */
.vphotos img, .pthumb img, .vphoto__pre { filter: none; mix-blend-mode: normal; opacity: 1; }
.vphoto.is-loading:has(.vphoto__pre)::after { content: none; }
.photoadd { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .photoadd { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: end; } .photoadd .drop { min-height: 100%; } }

/* the reports and the record draw the same charts, smaller */
.sheet__map .chart__sides span, .lastv__map .chart__sides span { min-height: 0; padding: 2px 8px; font-size: .78rem; border: 0; background: none; }
@media print { .chart__sides span { border: 0; } .mapper__chart, .toeboard { background: none; } }
.chart__nums text { font-size: 11px; }
.toenum text { font-size: 17px; }
/* phones: the charts take the card's full width, the pickers two to a row */
@media (max-width: 640px) {
  .mapper__chart, .toeboard { margin-inline: -14px; padding-inline: 4px; border-radius: var(--r-sm); }
  .chart__sides span { padding: 4px 10px; font-size: .95rem; }
  .mapper__tools, .toetools__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .mapper__tools legend { grid-column: 1 / -1; }
  .mtool span, .toetool span { width: 100%; box-sizing: border-box; font-size: .92rem; padding-right: 8px; }
  .toetool span { padding-inline: 10px; }
}
.toeboard .chart__sides { max-width: 640px; margin-inline: auto; }
/* a chart is a stage: the picture (an <img>, shown as it is) and the SVG overlay on top of it, in the same box; the
   picture is placed over the viewBox by app/feet.py (inline left / top / width) */
.chart__stage { position: relative; max-width: 460px; margin-inline: auto; }
.chart__stage > svg { position: relative; display: block; width: 100%; max-width: none; height: auto; margin: 0; }
.chart__img { position: absolute; max-width: none; height: auto; pointer-events: none; user-select: none; -webkit-user-select: none;
  -webkit-user-drag: none; filter: none; opacity: 1; mix-blend-mode: normal; }
.mapper__chart .chart__stage, .mapper__chart .chart__sides { max-width: 560px; }
.chart__stage--toes { max-width: 640px; }
/* the names of the feet centred over each foot of the picture (--side-l / --side-r: the feet's centres, app/feet.py) */
.chart--soles .chart__sides { max-width: 460px; margin-inline: auto; }
.chart__sides { grid-template-columns: calc(2 * var(--side-l, 25%)) 1fr calc(2 * (100% - var(--side-r, 75%))); }
.chart__sides span:last-child { grid-column: 3; }
/* a small chart (the record's last visit, the home page preview): the names of the feet as plain small labels */
.chart { container-type: inline-size; }
@container (max-width: 320px) { .chart__sides span { min-height: 0; padding: 2px 4px; border: 0; background: none; font-size: .8rem; white-space: nowrap; } }

/* ===== language menu: sidebar foot, Menu page ===== */
.langmenu { display: grid; gap: 8px; margin: 0; }
.langmenu__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 12px 18px;
  border: 1px solid var(--control); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  font: var(--w-label) 1.1rem/1.25 var(--font-display); text-align: left; cursor: pointer; }
.langmenu__opt[aria-current="true"] { border-color: var(--brand); background: var(--mint-50); color: var(--brand-deep); }
.langmenu__opt .ico { flex: none; width: 22px; height: 22px; color: var(--brand); }
@media (hover: hover) { .langmenu__opt:hover { background: var(--mint-50); } }
@media (min-width: 640px) { .dlg--langs { max-width: 420px; } }
/* the Appearance menu: the same rows, each with its look's icon; the tick only on the one in use */
.themeopt__lbl { display: flex; align-items: center; gap: 12px; min-width: 0; }
.themeopt__lbl > .ico { flex: none; width: 24px; height: 24px; color: var(--muted); }
.themeopt__lbl > span { display: grid; gap: 2px; }
.themeopt__lbl small { font: 400 .92rem/1.3 var(--font-body); color: var(--muted); }
.themeopt__on { display: grid; flex: none; visibility: hidden; }
.themeopt[aria-current="true"] .themeopt__on { visibility: visible; }
.themeopt[aria-current="true"] .themeopt__lbl > .ico { color: var(--brand); }
#theme .pill span { gap: 8px; } #theme .pill .ico { width: 20px; height: 20px; }
/* the phone save bar: a long label ("Hecho, cerrar la visita", "Kész, kezelés lezárása") wraps to two lines instead of
   being cut off */
@media (max-width: 640px) {
  .sticky .btn { white-space: normal; line-height: 1.15; padding-inline: 12px; text-wrap: balance; }
}

/* ===== Google Calendar and other calendars (feed.py, patient_cal.py) ===== */
/* the one-tap "Add to Google Calendar" leads, the other calendars follow as quieter buttons */
.feedgo { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s3) 0 var(--s2); }
#feed-practice .howto { margin: var(--s3) 0; }
/* the patient's booking page: the three calendar choices, each a full-width row like the other actions */
.caladd { display: grid; gap: 10px; padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.caladd .cl__label { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.caladd .hint { margin: 0; }
.feedgo + .hint { margin: 0 0 var(--s4); }

/* ===== wave 5: waiting-list hints in the week view ===== */
/* a free stretch someone on the list fits: one small chip at its start, on the right (names of bookings read from the left);
   the full words are in its label. On phones the column is narrow, so only the icon and the count show. */
.wlchip { position: absolute; z-index: 3; right: 4px; top: calc((var(--m) - var(--lo)) * var(--ppm) + 4px); display: inline-flex; align-items: center; gap: 4px;
  min-height: 26px; max-width: calc(100% - 8px); padding: 2px 9px 2px 7px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--mint-200);
  color: var(--ink); text-decoration: none; font: 600 .78rem/1.1 var(--font-display); white-space: nowrap; box-shadow: 0 1px 2px rgb(21 60 48 / .08); }
.wlchip .ico { flex: none; width: 14px; height: 14px; color: var(--brand); }
.wlchip__long { overflow: hidden; text-overflow: ellipsis; } .wlchip__n { display: none; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .wlchip:hover { border-color: var(--brand); background: var(--mint-50); } }
@media (max-width: 560px) {
  .wlchip { min-width: 32px; min-height: 28px; padding: 2px 8px 2px 6px; justify-content: center; }
  .wlchip__long { display: none; } .wlchip__n { display: inline; }
}

/* "Where you are signed in" (My account, a team member's page): one panel, a row per device */
.devices { list-style: none; margin: 0 0 var(--s3); padding: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.devices > li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.devices > li:last-child { border-bottom: 0; }
.devices__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--mint-50); color: var(--brand); }
.devices b { display: block; font: 600 1.04rem/1.25 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.devices small { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; color: var(--muted); }
@media (max-width: 520px) { .devices > li { grid-template-columns: auto 1fr; } .devices > li > form { grid-column: 1 / -1; } .devices > li > form .abtn { width: 100%; justify-content: center; } }

/* "Your first steps" on Today (intro.py): the list can be hidden for the whole practice */
.firststeps__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.firststeps__head h2 { margin: 0; }
.firststeps__tip { margin-top: 12px; }
.cardtrial { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cardtrial p { margin: 0 0 10px; }

/* ===== appearance: light and dark (web.py theme_pref; the head script in base.html sets <html data-theme>) =====
   Semantic tokens: surfaces (--ground the page, --card a panel, --raised a panel inside a panel, --field a control),
   ink (--ink titles, --text body, --muted secondary), edges (--rule inside a panel, --line/--edge-1 a panel's edge,
   --control a field's edge, 3:1), --brand (actions, links, selection; --on-brand the words on a brand, ink or danger
   fill), --deep and --on-deep (toasts, the site footer: dark in both looks), --rim (the 1px light lip on raised things).
   Dark keeps the evergreen/mint identity: deep green-black grounds (never pure black), panels one step lighter, mint
   for actions and focus with deep-green words on mint. Measured (WCAG): text 13:1 on panels, secondary 8:1, brand
   8.8:1, field edges 4.4:1. Printing always uses the light tokens: the dark ones are for screens only. */
:root {
  --surface: var(--card); --surface-2: var(--paper-2); --surface-raised: var(--raised);
  --on-brand: #fff; --deep: var(--ink); --on-deep: #fff; --rim: #fff; --brand-ink: var(--brand-deep);
  --feet-paper: #fbfdfc;   /* the foot and toe drawings are raster art on light paper: they keep a light panel */
  --backdrop: rgb(13 39 31 / .42);
}
@media screen {
  :root[data-theme=dark] {
    color-scheme: dark;
    --ground: #0c1814; --paper: var(--ground); --paper-2: #13231e; --card: #13221d; --surface: var(--card); --field: #0f1d18;
    --raised: #182b25; --rule: #1f322b; --edge-1: #263c34; --line: var(--edge-1); --control: #6b8a7e; --line-strong: var(--control);
    --ink: #e6f4ec; --ink-2: #f2faf6; --text: #dcebe3; --muted: #a3bcb1;
    --brand: #66d1a6; --brand-deep: #8fe0bf; --accent: var(--brand); --mint: #5fc79d; --on-brand: #062018;
    --mint-50: #14322a; --mint-100: #1a4034; --mint-200: #22513f; --mint-2: var(--mint-100); --mint-3: #2b5e4b; --nav-on: var(--mint-200);
    --brand-soft: var(--mint-50); --accent-soft: var(--mint-50); --sky: var(--mint-50); --sky-ink: var(--brand);
    --danger: #ff9a8f; --danger-soft: #3b1a17; --ok: #74d9a0; --ok-soft: #12301f; --warn: #f2c26b; --warn-soft: #33270e;
    --warm: #f3a877; --warm-soft: #36231a; --lav: #231f33; --lav-ink: #c3b5ee;
    --focus: #8ee6c2; --rim: rgb(255 255 255 / .06); --deep: #24463b; --on-deep: #fff;
    --edge: 0 0 0 1px rgb(255 255 255 / .06);
    --float: 0 18px 44px -18px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .08);
    --glass: rgb(19 34 29 / .78);
    --backdrop: rgb(2 8 6 / .62);
    --lq-ink: #e6f4ec; --lq-accent: #3fae84; --lq-accent-2: #66d1a6; --lq-on: #062018;
  }
}

/* ----- dark: the places that keep their own colours (screens only; print stays light) ----- */
@media screen {
  /* a light island: the foot and toe drawings are raster art on light paper (static/img/feet). They sit on a light
     rounded panel with the light tokens inside, instead of being inverted or floating on the dark ground. */
  :root[data-theme=dark] :is(.mapper__chart, .toeboard, .lastv__map, .chart--soles:not(.mapper__chart .chart--soles, .lastv__map .chart--soles), .cmp__frame) {
    color-scheme: light;
    --ground: #fbfdfc; --paper: #f5faf7; --paper-2: #e8f2ed; --card: #fff; --surface: #fff; --field: #fff; --raised: #f3f8f5;
    --rule: #edf3f0; --edge-1: #d9e8e0; --line: #d9e8e0; --control: #738b80; --line-strong: #738b80;
    --ink: #153c30; --text: #153c30; --muted: #526b60; --brand: #176b50; --brand-deep: #0f5a42; --accent: #176b50; --on-brand: #fff;
    --mint-50: #e5f5ed; --mint-100: #cff0df; --mint-200: #b5e5ce; --mint-3: #b5e5ce; --brand-soft: #e5f5ed; --accent-soft: #e5f5ed;
    --danger: #a3271f; --danger-soft: #fbe6e3; --focus: #176b50; --rim: #fff;
    background: var(--feet-paper); color: var(--text); border-color: transparent;
  }
  :root[data-theme=dark] :is(.lastv__map, .chart--soles:not(.mapper__chart .chart--soles, .lastv__map .chart--soles)) { padding: 10px; border-radius: var(--r-md); }

  /* buttons: the "dark" button is the second mint (lighter), so dark mode has no white slabs */
  :root[data-theme=dark] .btn--dark { --bg: var(--brand-deep); border-color: var(--brand-deep); }
  :root[data-theme=dark] .abtn--danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

  /* soft fills that were written as light hex values */
  :root[data-theme=dark] .demobar { background: var(--warm-soft); border-color: color-mix(in srgb, var(--warm) 35%, transparent); color: var(--warm); }
  :root[data-theme=dark] .pill-s--type { background: var(--lav); color: var(--lav-ink); }
  :root[data-theme=dark] .flash--error, :root[data-theme=dark] .alertbar { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
  :root[data-theme=dark] .cgi--noshow { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent); }
  :root[data-theme=dark] .field :is(input, select, textarea)[aria-invalid=true] { background: var(--danger-soft); }
  :root[data-theme=dark] .skel { background-image: linear-gradient(90deg, var(--paper-2), var(--raised), var(--paper-2)); }
  :root[data-theme=dark] :is(.upnext, .upnext--live, .assist, .cl__talk, .presets, .vn__draft) { background: var(--mint-50); }
  :root[data-theme=dark] .kpi--deep .delta, :root[data-theme=dark] .week__day.today .week__head small { color: var(--muted); }

  /* pain scale: the warmer steps keep their meaning as a tint of warn and danger */
  :root[data-theme=dark] .scale label:nth-child(n+4) span { background: color-mix(in srgb, var(--warn) 16%, var(--card)); }
  :root[data-theme=dark] .scale label:nth-child(n+8) span { background: color-mix(in srgb, var(--danger) 18%, var(--card)); }
  :root[data-theme=dark] .scale input:checked + span { background: var(--ink); color: var(--on-brand); }

  /* calendar: closed days and breaks read as "not bookable" (hatched), bookings keep the person's colour as a
     stronger tint so each specialist stays recognisable on the dark grid */
  :root[data-theme=dark] .cg__col--off { background-color: #101b17; background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .035) 0 6px, transparent 6px 12px); }
  :root[data-theme=dark] .cg__break { background: repeating-linear-gradient(135deg, rgb(255 255 255 / .06) 0 6px, transparent 6px 12px); }
  :root[data-theme=dark] .cgi:not(.cgi--done, .cgi--block, .cgi--requested, .cgi--noshow) { background: color-mix(in srgb, var(--c) 24%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
  :root[data-theme=dark] .sch__c.is-day { background: color-mix(in srgb, var(--warm) 22%, var(--card)); }

  /* dialogs and sheets: a deeper dim behind, a lifted panel in front */
  :root[data-theme=dark] .dlg { background: var(--raised); box-shadow: var(--float); }
  :root[data-theme=dark] .dlg::backdrop { background: rgb(2 8 6 / .62); }   /* ::backdrop: a literal, it may not see the tokens */

  :root[data-theme=dark] .avatar--lg { background: var(--mint-100); color: var(--brand-deep); }
  /* the small toe pickers are drawn in the skin of the picture: their numbers stay dark on the skin */
  :root[data-theme=dark] .toe-cb input:not(:checked) + span { color: #526b60; }

  /* native controls (date, time, select, scrollbars) follow color-scheme: dark, set with the tokens above */
}

/* ---------------------------------------------------------------- inside the iPhone app (html.is-app, web.in_app)
   The native app shows the workspace, the staff sign-in and the practice sign-up in a full-screen WebView, edge to
   edge: the bars keep clear of the notch, the rounded corners and the home indicator in both orientations, and the
   things only a website does are off (the page bouncing past its ends, the long-press menu and text selection on
   buttons and bars, the grey tap flash). Text, fields and the record itself stay selectable. A browser never gets this. */
.is-app, .is-app body { overscroll-behavior: none; }
/* the app's web view can't print or save data: links; the PDFs open in place and the codes can be copied */
.is-app [data-print], .is-app a[download^="podopoints-recovery"] { display: none; }
.is-app :is(.top, .btn, .abtn, button, summary, [role=tab], .trialchip, .intro__top, .ichoice, .auth__brand) {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.is-app :is(a, button, summary, label) { -webkit-tap-highlight-color: transparent; }
.is-app .top { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.is-app .main { width: min(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right), 980px); }
.is-app .main--wide { width: min(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right), 1280px); }
.is-app .auth { padding-top: max(6vh, calc(env(safe-area-inset-top) + 16px)); padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.trialchip--app { grid-template-columns: auto auto; }

/* ---------------------------------------------------------------- Sign in with Google / Apple (social.py)
   Google's rules: white with a grey 1px edge and dark text (dark mode: #131314 with a light edge), the "G" unchanged
   on its own; Apple's: black with the white logo. Same height as our buttons, the full width of the card. */
.social { display: grid; gap: 10px; margin: 0 0 12px; }
.gbtn, .applebtn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 10px 16px; border-radius: var(--r-pill); font: 500 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .14s, box-shadow .14s, scale .14s var(--ease); }
.gbtn { background: #fff; color: #1f1f1f; border: 1px solid #747775; }
.gbtn:hover { background: #f8faff; box-shadow: 0 1px 3px rgb(60 64 67 / .18); }
.gbtn__g { flex: none; }
.applebtn { background: #000; color: #fff; border: 1px solid #000; }
.applebtn svg { flex: none; }
.gbtn:active, .applebtn:active { scale: .98; }
.gbtn:focus-visible, .applebtn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media screen {
  :root[data-theme=dark] .gbtn { background: #131314; color: #e3e3e3; border-color: #8e918f; }
  :root[data-theme=dark] .applebtn { background: #fff; color: #000; border-color: #fff; }
}
.intro__or { margin: 4px 0 14px; }
.intro__verified { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; font-weight: 500; word-break: break-all; }
.signins { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.signins li { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.signins__who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.signins__who small { display: block; color: var(--muted); word-break: break-all; }

/* =====================================================================================================================
   REDESIGN FOUNDATION (phase 1, _research/PLAN.md). The last layer: tokens, global fixes, one button hierarchy and the
   navigation shell (top bar, bottom bar, rail, sheets). Screen-specific rules live in css/screens/*.css, which the
   workspace layout links after this file (web.screen_css). New screens use these tokens and pieces, never raw values.
   ===================================================================================================================== */
:root {
  /* spacing: 4 · 8 · 12 · 16 · 24 · 32 · 48 only; phone gutter 16, tablet and up 24; 24 between groups */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --gutter: 16px;
  /* radii: inputs and small things 12, rows and tiles 16, sheets and big tiles 24, pills */
  --rad-s: 12px; --rad-m: 16px; --rad-l: 24px; --rad-pill: 999px;
  /* type (staff): 34 / 28 / 22 / 17 body / 15 secondary / 13 meta only. rem follows "Larger text". */
  --fs-34: 2rem; --fs-28: calc(28rem / 17); --fs-22: calc(22rem / 17); --fs-17: 1rem; --fs-15: calc(15rem / 17); --fs-13: calc(13rem / 17);
  --lh-tight: 1.2; --lh: 1.4;
  --w-thin: 400; --w-text: 400; --w-label: 500; --w-bold: 600;   /* three weights; grey makes hierarchy, not more bold */
  /* colour: the brand in tint steps, three status colours, neutrals (the light/dark values are set above) */
  --tint-1: var(--mint-50); --tint-2: var(--mint-100); --tint-3: var(--mint-200);
  /* targets */
  --tap: 44px; --field-h: 48px; --primary-h: 52px;
  /* elevation: one soft shadow for what floats */
  --lift: 0 1px 2px rgb(19 36 30 / .06), 0 12px 32px -12px rgb(19 36 30 / .28);
  /* motion: 120 press · 200 small · 280 sheet and push · 360 large; ease-out to enter, ease-in to leave */
  --dur-press: 120ms; --dur-small: 200ms; --dur-sheet: 280ms; --dur-large: 360ms; --dur-ui: 200ms; --dur-fade: 150ms;
  --ease-enter: cubic-bezier(.2, .8, .2, 1); --ease-exit: cubic-bezier(.4, 0, 1, 1); --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  /* the bars: glass that keeps its labels readable (strong tint + strong blur, the "regular" variant over text) */
  --bar-tint: rgb(250 253 251 / .96); --bar-tint-2: rgb(246 251 248 / .93); --bar-blur: 30px;
  --bar-h: 56px; --tabbar-h: 64px; --rail-w: 264px;
  font-size: 106.25%;   /* 17px body */
}
:root[data-text='big'] { font-size: 125%; }
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media screen { :root[data-theme=dark] { --bar-tint: rgb(19 34 29 / .96); --bar-tint-2: rgb(16 30 25 / .93);
  --lift: 0 1px 2px rgb(0 0 0 / .3), 0 14px 36px -12px rgb(0 0 0 / .7); } }
@media (prefers-reduced-motion: reduce) { :root { --dur-press: 0ms; --dur-small: 120ms; --dur-sheet: 150ms; --dur-large: 150ms; } }

/* ---------------------------------------------------------------- global fixes */
body { font-size: var(--fs-17); line-height: var(--lh); }
h1, h2, h3, h4 { font-weight: var(--w-bold); }
small, .hint, .muted small { font-size: max(var(--fs-15), 15px); }
/* selects: our own chevron, the same 48px as every field (WebKit drew them 31px tall) */
.ws select:not([multiple], [size]), .auth select:not([multiple], [size]) {
  -webkit-appearance: none; appearance: none; min-height: var(--field-h); padding: 10px 44px 10px 14px; border: 1px solid var(--control);
  border-radius: var(--rad-s); background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526b60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  font: 400 max(1rem, 16px)/1.3 var(--font-body); color: var(--text); text-overflow: ellipsis; }
@media screen { :root[data-theme=dark] :is(.ws, .auth) select:not([multiple], [size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3bcb1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } }
.ws select:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint-2); }
.ws :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=hidden], [type=color]), textarea) { min-height: var(--field-h); font-size: max(1rem, 16px); }
/* small links in lists, back links and tick boxes: at least 44px to hit */
.ag__name, .alr__name, .wlr__name { display: inline-flex; align-items: center; min-height: var(--tap); }
.check { min-height: var(--tap); }
label:has(> input[type=checkbox]:only-child) { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); }
.back { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); margin: 0 0 var(--sp-2) -6px; padding: 0 8px 0 0; font: var(--w-label) var(--fs-17)/1 var(--font-display); color: var(--brand); text-decoration: none; }
.back .ico { width: 24px; height: 24px; }
.back--more { display: inline-flex; }

/* ---------------------------------------------------------------- buttons: one hierarchy
   Primary: filled brand, 52px, full width on phones where it ends a task (one per screen). Secondary: tinted.
   Tertiary: text. Destructive: red text; filled red only inside its own confirmation. */
.btn { min-height: var(--primary-h); padding: 12px 24px; border-radius: var(--rad-m); font: var(--w-bold) var(--fs-17)/1.15 var(--font-display);
  transition: transform var(--dur-press) var(--ease-enter), background-color var(--dur-small) ease; }
.btn:active, .abtn:active, .qbtn:active, .chipbtn:active { scale: 1; transform: scale(.97); }
.btn--ghost { --fg: var(--brand-deep); background: var(--tint-1); border: 0; }
@media (hover: hover) { .btn--ghost:hover { background: var(--tint-2); } }
.abtn { border-width: 1px; border-radius: var(--rad-s); font-weight: var(--w-label); transition: transform var(--dur-press) var(--ease-enter), background-color var(--dur-small) ease; }
.btn--block { width: 100%; }
/* small secondary actions (a sheet's Call / Move / Cancel, a row's Accept): tinted, 44px, icon + word */
.qbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); min-width: var(--tap); padding: 8px 14px;
  border: 0; border-radius: var(--rad-s); background: var(--tint-1); color: var(--brand-deep); font: var(--w-label) var(--fs-15)/1.2 var(--font-display);
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--dur-press) var(--ease-enter), background-color var(--dur-small) ease; }
.qbtn .ico { width: 20px; height: 20px; }
@media (hover: hover) { .qbtn:hover { background: var(--tint-2); } }
.qbtn--ok { background: var(--brand); color: var(--on-brand); }
@media (hover: hover) { .qbtn--ok:hover { background: var(--brand-deep); } }
.qbtn--danger { background: var(--danger-soft); color: var(--danger); }

/* ---------------------------------------------------------------- shared pieces: titles, the one status line, lists */
.ltitle { margin: 0 0 var(--sp-4); }
.ltitle h1 { margin: 0; font: var(--w-bold) var(--fs-34)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.ltitle__over { margin: 0 0 var(--sp-1); font: var(--w-label) var(--fs-15)/1.3 var(--font-display); color: var(--muted); }
.ltitle__sum { margin: var(--sp-1) 0 0; font-size: var(--fs-15); color: var(--muted); font-variant-numeric: tabular-nums; }
.statusline { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); margin: 0 0 var(--sp-4); padding: 8px 12px;
  border-radius: var(--rad-s); background: var(--raised); color: var(--text); font: var(--w-label) var(--fs-15)/1.3 var(--font-display);
  text-decoration: none; border: 0; box-shadow: none; }
.statusline > .ico { width: 20px; height: 20px; flex: none; color: var(--muted); }
.statusline > span:first-of-type { flex: 1; min-width: 0; }
.statusline > .ico:last-child { width: 18px; height: 18px; }
.statusline--act { background: var(--tint-1); color: var(--brand-deep); }
.statusline--act > .ico { color: var(--brand); }
.statusline.trialchip--soon { background: var(--warn-soft); color: var(--ink); }
.statusline .trialchip__go { flex: none; color: var(--brand); }
.listh { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-2); padding: 0 var(--sp-1);
  font: var(--w-bold) var(--fs-15)/1.3 var(--font-display); color: var(--muted); letter-spacing: 0; }
.listh__n { font-weight: var(--w-text); font-variant-numeric: tabular-nums; }
.panel { margin: 0 0 var(--sp-6); }
.panel__note { margin: var(--sp-2) var(--sp-1) 0; font-size: var(--fs-15); color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 8px; border-radius: var(--rad-pill);
  font: var(--w-label) var(--fs-13)/1.2 var(--font-display); white-space: nowrap; }
.chip .ico { width: 14px; height: 14px; }
.chip--next { background: var(--brand); color: var(--on-brand); }
.chip--warn { background: var(--warn-soft); color: var(--warn); }
.dot { display: inline-block; width: 8px; height: 8px; margin: 0 4px 1px 0; border-radius: 50%; background: var(--c); vertical-align: middle; }
.count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--rad-pill);
  background: var(--tint-2); color: var(--brand-deep); font: var(--w-bold) var(--fs-13)/1 var(--font-display); font-variant-numeric: tabular-nums; }
/* a grouped list: one solid panel, rows of at least 56px, a hairline between them, the whole row pressable */
.rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--edge-1); border-radius: var(--rad-m); overflow: hidden; }
.rows > li { position: relative; }
.rows > li + li::before { content: ''; position: absolute; top: 0; left: var(--sp-4); right: 0; height: 1px; background: var(--rule); }
.rows a { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 10px var(--sp-4); color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-press) ease; }
.rows a > span:first-child { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rows b { font: var(--w-bold) var(--fs-17)/1.3 var(--font-display); overflow-wrap: anywhere; }
.rows small { color: var(--muted); font-size: var(--fs-15); }
.rows a > .ico:last-child { flex: none; width: 20px; height: 20px; color: var(--muted); }
.rows__amt { font: var(--w-bold) var(--fs-17)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.rows__go { font: var(--w-label) var(--fs-15)/1 var(--font-display); color: var(--brand); }
:is(.rows a, .daylist a, .morelist :is(a, button), .newlist a, .apptsum__rec):active { background: var(--raised); }
@media (hover: hover) and (pointer: fine) { :is(.rows a, .daylist a, .morelist :is(a, button), .newlist a, .apptsum__rec):hover { background: var(--raised); } }

/* ---------------------------------------------------------------- the shell */
.ws { padding: 0 0 calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom)); background: var(--ground); }
.main { width: auto; max-width: 980px; margin: 0 auto; padding: var(--sp-4) max(var(--gutter), env(safe-area-inset-right)) var(--sp-8) max(var(--gutter), env(safe-area-inset-left)); }
.main--wide { max-width: 1280px; }
.is-app .main, .is-app .main--wide { width: auto; }

/* top bar: the page's own title once its big title scrolled away, search, you. Glass that blurs what scrolls under it. */
.top { position: sticky; top: 0; z-index: var(--z-bar); display: flex; align-items: center; gap: var(--sp-2); margin: 0; min-height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--sp-2), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: linear-gradient(var(--bar-tint), var(--bar-tint-2)); -webkit-backdrop-filter: blur(var(--bar-blur)) saturate(1.8); backdrop-filter: blur(var(--bar-blur)) saturate(1.8);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--edge-1) var(--top-line, 0%), transparent); transition: box-shadow var(--dur-small) ease; view-transition-name: topbar; }
.top.is-scrolled { --top-line: 100%; }
.top__title { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: grid; place-items: center; height: var(--bar-h); max-width: calc(100% - 200px);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--w-bold) var(--fs-17)/1 var(--font-display); color: var(--ink);
  transition: opacity var(--dur-small) var(--ease-enter); pointer-events: none; }
.js .top__title { opacity: 0; } .js .top.is-titled .top__title { opacity: 1; }
.top__search { display: grid; place-items: center; width: var(--tap); min-height: var(--tap); margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; color: var(--ink); cursor: pointer; }
.top__search > span, .top__search kbd { display: none; }
.top__search .ico { width: 24px; height: 24px; }
.top__me { display: grid; place-items: center; min-width: var(--tap); min-height: var(--tap); text-decoration: none; }
.top__me .avatar--sm { width: 34px; height: 34px; font-size: var(--fs-15); box-shadow: none; background: var(--tint-2); color: var(--brand-deep); }
@media (hover: hover) { .top__search:hover { background: var(--tint-1); } }
/* a tab's first page (Azi, Mai mult): the small line above the big title shares the bar's row, and the bar stays
   clear until something scrolls under it (iOS large title), so the day starts within the first 200 points */
@media (max-width: 1023px) {
  .ws:has(.ltitle--bar) .top:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .main > .ltitle--bar:first-child { margin-top: calc(-1 * var(--bar-h) - var(--sp-4)); }
  .ltitle--bar .ltitle__over { display: flex; align-items: center; min-height: var(--bar-h); margin: 0; padding-right: 104px; }
}

/* bottom bar (phones, tablets): Azi · Calendar · [+] · Pacienți · Mai mult. Glass, labels always readable. */
.tabbar { position: fixed; z-index: var(--z-dock); left: max(var(--sp-3), env(safe-area-inset-left)); right: max(var(--sp-3), env(safe-area-inset-right));
  bottom: max(var(--sp-3), env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
  height: var(--tabbar-h); max-width: 560px; margin: 0 auto; padding: 4px; border-radius: 32px;
  --glass-tint: var(--bar-tint); --glass-tint-2: var(--bar-tint-2); --glass-tint-3: var(--bar-tint); --glass-blur: var(--bar-blur);
  box-shadow: inset 0 1px 0 var(--glass-rim, #fff), 0 0 0 1px color-mix(in srgb, var(--edge-1) 70%, transparent), var(--lift); view-transition-name: tabbar; }
.tabbar.glass.is-refracting { -webkit-backdrop-filter: var(--glass-refract) blur(var(--bar-blur)) saturate(1.8); backdrop-filter: var(--glass-refract) blur(var(--bar-blur)) saturate(1.8); }
.tabbar > a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 56px; min-width: 0;
  border-radius: 28px; color: var(--muted); text-decoration: none; font: var(--w-label) min(var(--fs-13), 15px)/1.1 var(--font-display);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color var(--dur-small) ease, transform var(--dur-press) var(--ease-enter); }
.tabbar > a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.tabbar .ico { width: 24px; height: 24px; stroke-width: 1.75; }
.tabbar > a.on { color: var(--brand-deep); }
.tabbar > a.on .ico { color: var(--brand); stroke-width: 2.1; }
.tabbar:not(.has-pill) > a.on, .tabbar .lq-pill { background: var(--tint-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent); border-radius: 28px; }
.tabbar > a:active { transform: scale(.94); }
.tabbar__mid { display: grid; place-items: center; height: 56px; }
.tabbar__new { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: var(--on-brand);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform var(--dur-press) var(--ease-enter), background-color var(--dur-small) ease; }
.tabbar__new .ico { width: 26px; height: 26px; stroke-width: 2.4; }
.tabbar__new:active { transform: scale(.92); }
@media (hover: hover) { .tabbar__new:hover { background: var(--brand-deep); } .tabbar > a:not(.on):hover { color: var(--ink); } }
.tabbar__new:focus-visible, .tabbar > a:focus-visible { outline-offset: -3px; }
@media screen { :root[data-theme=dark] .tabbar { --glass-rim: rgb(255 255 255 / .1); --glass-rim-o: .35; } :root[data-theme=dark] .tabbar__new { color: var(--on-brand); } }
/* an edit form with its own save bar: the bar steps aside, the save bar takes the bottom edge (as before) */
@media (max-width: 1023px) {
  .ws:has(.main form[method=post] > .sticky:not(.selbar, .albar)) .tabbar { display: none; }
  .sticky { bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); }
  .main form[method=post] > .sticky:not(.selbar, .albar) { bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* the rail (1024 px and up): the same places, then every Mai mult group spelled out. On the ground, not glass. */
.rail { display: none; }
@media (min-width: 1024px) {
  .ws { padding: 0 0 0 var(--rail-w); }
  .tabbar { display: none; }
  .top { margin-left: 0; padding-left: var(--sp-6); padding-right: var(--sp-6); gap: var(--sp-3); }
  .top__title { position: static; translate: none; display: block; max-width: none; height: auto; margin-right: auto; }
  .top__search { order: -1; display: inline-flex; align-items: center; gap: var(--sp-2); width: min(360px, 40vw); height: var(--tap); padding: 0 var(--sp-3);
    margin: 0 auto 0 0; border-radius: var(--rad-s); background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge-1); color: var(--muted); font: var(--w-text) var(--fs-15)/1 var(--font-body); }
  .top__search > span { display: inline; flex: 1; text-align: left; }
  .top__search kbd { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--raised); font: var(--w-label) var(--fs-13)/1.3 var(--font-body); color: var(--muted); }
  .top__search .ico { width: 20px; height: 20px; }
  .js .top__title { display: none; }
  .rail { position: fixed; z-index: var(--z-bar); inset: 0 auto 0 0; width: var(--rail-w); display: flex; flex-direction: column;
    padding: var(--sp-4) var(--sp-3) var(--sp-3); background: var(--ground); border-right: 1px solid var(--edge-1); view-transition-name: rail; }
  .rail__brand { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-2); color: var(--ink); text-decoration: none; }
  .rail__brand .wordmark { font-size: var(--fs-22); }
  .rail__clinic { margin: 0 var(--sp-2) var(--sp-4); font-size: var(--fs-15); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail__new { width: 100%; min-height: 48px; margin: 0 0 var(--sp-4); }
  .rail__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(-1 * var(--sp-3)); padding: 0 var(--sp-3) var(--sp-3); scrollbar-width: thin; }
  .rail__places { position: relative; display: grid; gap: 2px; padding-bottom: var(--sp-3); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--edge-1); }
  .rail a, .rail__foot button { position: relative; display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--tap); padding: 8px var(--sp-3);
    border: 0; border-radius: var(--rad-s); background: none; color: var(--text); text-align: left; text-decoration: none;
    font: var(--w-text) var(--fs-15)/1.3 var(--font-display); cursor: pointer; transition: background-color var(--dur-press) ease; }
  .rail__places a { min-height: 48px; font-size: var(--fs-17); font-weight: var(--w-label); }
  .rail a > span, .rail__foot button > span { flex: 1; min-width: 0; }
  .rail .ico { flex: none; width: 20px; height: 20px; color: var(--muted); }
  .rail__places .ico { width: 22px; height: 22px; }
  @media (hover: hover) { .rail a:hover, .rail__foot button:hover { background: var(--tint-1); } }
  .rail a:active, .rail__foot button:active { background: var(--tint-2); }
  .rail a[aria-current="page"], .rail__places:not(.has-pill) a.on, .rail__places .lq-pill { background: var(--tint-2); color: var(--brand-deep); font-weight: var(--w-label); }
  .rail__places.has-pill a.on { background: none; }
  .rail__places .lq-pill { border-radius: var(--rad-s); box-shadow: none; }
  .rail a[aria-current="page"] .ico, .rail a.on .ico { color: var(--brand); }
  .rail__h { margin: var(--sp-4) 0 var(--sp-1); padding: 0 var(--sp-3); font: var(--w-label) var(--fs-13)/1.3 var(--font-display); color: var(--muted); }
  .rail__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
  .rail__foot { display: grid; gap: 0; padding-top: var(--sp-2); border-top: 1px solid var(--edge-1); }
  .rail__foot small { color: var(--muted); font-size: var(--fs-13); }
  .rail__foot [aria-pressed="true"] { color: var(--brand-deep); } .rail__foot [aria-pressed="true"] .ico { color: var(--brand); }
  .rail a:focus-visible, .rail__foot button:focus-visible { outline-offset: -3px; }
  .back--more { display: none; }
  .sticky { bottom: var(--sp-3); }
}
@media print { .tabbar, .rail { display: none !important; } .ws { padding: 0; } }
@media (prefers-reduced-transparency: reduce) { .top, .tabbar { background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
@media (prefers-contrast: more) { .tabbar { background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 0 0 1px var(--control); } }

/* sheets: a bottom sheet on phones (glass at the edge, solid where the words are), a centred dialog on tablets, and the
   appointment sheet as a side panel on wide screens */
.dlg { border-radius: var(--rad-l); background: var(--surface); box-shadow: var(--lift), 0 0 0 1px color-mix(in srgb, var(--edge-1) 60%, transparent); }
.dlg__head h2 { font: var(--w-bold) var(--fs-22)/1.3 var(--font-display); }
@media (max-width: 639px) {
  .dlg { border-radius: var(--rad-l) var(--rad-l) 0 0; background: linear-gradient(var(--bar-tint), var(--surface) 96px);
    -webkit-backdrop-filter: blur(var(--bar-blur)) saturate(1.6); backdrop-filter: blur(var(--bar-blur)) saturate(1.6);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent), var(--lift); }
  .dlg__body { padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }
}
@media screen { :root[data-theme=dark] .dlg { background: var(--raised); } }
@media screen and (max-width: 639px) { :root[data-theme=dark] .dlg { background: linear-gradient(var(--bar-tint), var(--raised) 96px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), var(--lift); } }
@media (min-width: 1024px) {
  .dlg--side { width: 440px; max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; border-radius: var(--rad-l) 0 0 var(--rad-l); }
  .dlg--side .dlg__head { padding-top: var(--sp-6); }
  @media (prefers-reduced-motion: no-preference) {
    .dlg--side[open] { animation: side-in var(--dur-sheet) var(--ease-enter); }
    .dlg--side.is-closing { animation: side-out var(--dur-small) var(--ease-exit) forwards; }
  }
}
@keyframes side-in { from { opacity: .4; translate: 32px 0; } }
@keyframes side-out { to { opacity: 0; translate: 24px 0; } }

/* page to page (cross-document View Transitions): a tab cross-fades; a push slides a little from the right, back from
   the left; the bars stay where they are. Reduced motion: none (set above). */
::view-transition-group(topbar), ::view-transition-group(tabbar), ::view-transition-group(rail) { animation: none; }
::view-transition-old(tabbar), ::view-transition-old(rail) { animation: none; display: none; }
::view-transition-new(tabbar), ::view-transition-new(rail) { animation: none; }
::view-transition-old(topbar) { animation: fade-out 120ms var(--ease-exit) both; }
::view-transition-new(topbar) { animation: fade-in 120ms var(--ease-enter) both; }
::view-transition-old(root) { animation: fade-out 120ms var(--ease-exit) both; }
::view-transition-new(root) { animation: fade-in 160ms var(--ease-enter) both; }
html.vt-forward::view-transition-old(root) { animation: vt-out-left var(--dur-sheet) var(--ease-exit) both; }
html.vt-forward::view-transition-new(root) { animation: vt-in-right var(--dur-sheet) var(--ease-enter) both; }
html.vt-back::view-transition-old(root) { animation: vt-out-right var(--dur-sheet) var(--ease-exit) both; }
html.vt-back::view-transition-new(root) { animation: vt-in-left var(--dur-sheet) var(--ease-enter) both; }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(32px); } }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-16px); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-32px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(16px); } }
/* sheets keep their words on a solid surface; the glass is only the lip of light along the top edge */
@media (max-width: 639px) {
  .dlg { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 80%, transparent), 0 -8px 32px -12px rgb(19 36 30 / .3); }
}
@media screen and (max-width: 639px) { :root[data-theme=dark] .dlg { background: var(--raised); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 -8px 32px -12px rgb(0 0 0 / .6); } }
.dlg__head h2:focus { outline: none; }
.rail .rail__new { justify-content: center; background: var(--brand); color: var(--on-brand); font: var(--w-bold) var(--fs-17)/1 var(--font-display); border-radius: var(--rad-s); }
.rail .rail__new .ico { color: var(--on-brand); width: 20px; height: 20px; }
@media (hover: hover) { .rail .rail__new:hover { background: var(--brand-deep); } }
.rail__foot form { margin: 0; }
.ws summary { min-height: var(--tap); align-content: center; }   /* a fold you can hit (was 25px on the services list) */