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

@font-face { font-family: 'Atkinson Next'; 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'; 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 {
  /* PediJurnal: 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', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-display: 'Atkinson Next', '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: #fff; 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: #fff; --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), rgb(255 255 255 / .22), 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, rgb(255 255 255 / .26), 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, rgb(255 255 255 / .5), 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), #fff, transparent 70%), rgb(255 255 255 / .7); box-shadow: inset 0 1px 0 #fff, 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, rgb(23 107 80 / .2), 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, rgb(23 107 80 / .2), 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: #fff; 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: #fff; }
.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 rgb(23 107 80 / .18); background: #fff; }
.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: #fff; }
.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: rgb(255 255 255 / .94); }

/* ---------------------------------------------------------------- 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: #fff; }
.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); }
.top__clinic { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line); }
.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%, #fff); 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, #fff, var(--brand-soft)); color: var(--brand); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(23 107 80 / .18), 0 4px 10px -6px rgb(21 60 48 / .4); }
.avatar--lg { width: 62px; height: 62px; font-size: 1.35rem; background: var(--ink); color: #fff; }
.top__me { min-width: 48px; min-height: 48px; justify-content: center; }
/* phone: a floating glass dock; one liquid pill glides between places (liquid.js) */
.nav { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 45; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2px; padding: 6px; border-radius: 28px; --glass-tint: rgb(255 255 255 / .62); --glass-tint-2: rgb(255 255 255 / .38); view-transition-name: dock; }
.nav > a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 6px 2px; border-radius: 22px; text-decoration: none; color: var(--muted); font: var(--w-label) .8rem/1.1 var(--font-display); cursor: pointer; list-style: none; text-align: center; transition: color .2s; }
.nav .ico { width: 25px; height: 25px; }
@media (max-width: 899px) { .nav > a span { font-size: min(.8rem, 15px); max-width: 100%; overflow-wrap: anywhere; } }   /* larger text never breaks the dock */
.nav > a.on { color: var(--brand); }
.nav:not(.has-pill) > a.on { background: linear-gradient(180deg, #fff, #eef8f4); box-shadow: inset 0 0 0 1px rgb(23 107 80 / .16); }
.nav .lq-pill { border-radius: 22px; }
@keyframes menu-in { from { opacity: 0; scale: .96; translate: 0 6px; } }
.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 */
  .nav { inset: 72px auto 0 0; width: 248px; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.glass::before, .nav.glass::after { display: none; }
  .nav > a { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 52px; padding: 10px 16px; border-radius: 16px; font-size: 1.02rem; color: var(--ink); }
  .nav > a:hover { background: rgb(255 255 255 / .7); }
  .nav > a.on { color: var(--brand); font-weight: var(--w-bold); }
  .nav .lq-pill { border-radius: 16px; }
  .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: #fff; box-shadow: var(--edge); text-decoration: none; font: 600 .95rem/1 var(--font-display); color: var(--ink); }
.tabs a.on { background: var(--brand); color: #fff; 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: #fff; 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: #fff; }
.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: #fff; 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: #fff; 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: #fff; 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: #fff; text-decoration: none; font: 600 .9rem/1 var(--font-display); color: var(--ink); }
.vtoc a.on { background: var(--ink); color: #fff; }
.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: #fff; }
.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: #fff; 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: #fff; }
.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: #fff; }

/* 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: #fff; 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: #fff; box-shadow: var(--shadow); margin-bottom: 20px; white-space: pre-line; }
.sigpad { position: relative; border: 3px dashed var(--ink); border-radius: var(--r); background: #fff; 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: #fff; 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: #fff; 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: #fff; }
.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: #fff; 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, #fff, #fff 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: #fff; }
.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: #fff; 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: #fff; } .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: rgb(255 255 255 / .8); }
.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: rgb(23 107 80 / .1); } }
.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%, #fff); 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%, #fff);
  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: #fff; 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%, #fff); 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%, #fff); }
.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: #fff; 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: #fff; }

/* 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: #fff; 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%, #fff); }
.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: #fff; text-decoration: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 16px 30px -18px rgb(23 107 80 / .8); }
.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: #fff; 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: #fff; 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: #fff; 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: #fff; 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; }
.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: #fff; 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: #fff; 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; }

/* ---------------------------------------------------------------- product site */
.site { background: #fff; }
.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; }
@media (max-width: 620px) { .shead__nav a:not(.btn):not(:nth-child(3)) { display: none; } }
/* hero: thin headline, a 3D mark behind a glass phone (the glass really bends the mark behind it) */
.hero { position: relative; display: grid; gap: 24px; align-items: center; width: min(100% - 32px, 1160px); margin: 0 auto; padding: 40px 0 56px; }
.hero::before { content: ''; position: absolute; inset: -80px -30vw 0; z-index: -1; background: radial-gradient(40% 60% at 78% 45%, rgb(92 196 166 / .28), transparent 70%), radial-gradient(35% 50% at 10% 10%, rgb(207 240 223 / .5), transparent 70%); pointer-events: none; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr .95fr; padding: 64px 0 80px; } }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); font-weight: 250; line-height: 1.04; letter-spacing: -.035em; max-width: 17ch; }
.hero__for { margin: 0 0 14px; font: var(--w-bold) 1rem/1.3 var(--font-display); color: var(--brand); }
.hero .lead { font-size: 1.15rem; }
.eyebrow { font: var(--w-bold) .9rem/1 var(--font-display); color: var(--brand); }
.hero__shot { position: relative; margin: 0; min-height: 520px; display: grid; place-items: center; }
.hero__mark { position: absolute; width: min(430px, 80%); height: auto; left: 50%; top: 50%; transform: translate(-88%, -62%) rotate(-8deg); filter: drop-shadow(0 30px 40px rgb(21 60 48 / .18)); }
.hero__float { position: absolute; width: 112px; height: auto; filter: drop-shadow(0 16px 20px rgb(21 60 48 / .16)); }
.hero__float--a { left: 2%; top: 4%; transform: rotate(-10deg); } .hero__float--b { right: 2%; top: 2%; transform: rotate(8deg); width: 96px; } .hero__float--c { left: 4%; bottom: 2%; transform: rotate(6deg); width: 88px; }
@media (max-width: 600px) { .hero__shot { min-height: 460px; } .hero__float { width: 76px !important; } .phone { margin-left: 14%; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__mark { animation: rise 1.1s var(--ease) both; }
  .hero__float { animation: rise 1.1s var(--ease) both; } .hero__float--b { animation-delay: .12s; } .hero__float--c { animation-delay: .2s; }
  .hero .phone { animation: rise .9s var(--ease) .08s both; }
}
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
.phone { position: relative; width: min(320px, 84vw); padding: 18px 16px 22px; border-radius: 40px; display: grid; gap: 10px; margin: 8% 0 0 22%; --glass-tint: rgb(255 255 255 / .42); --glass-tint-2: rgb(255 255 255 / .2); --glass-blur: 8px; }
.phone > * { background: rgb(255 255 255 / .82); border-radius: 18px; }
.phone .phone__bar { background: none; }
.phone__bar { font: var(--w-text) .95rem var(--font-display); color: var(--muted); padding: 2px 6px; } .phone__bar b { color: var(--ink); font-weight: var(--w-bold); }
.phone__alert { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--danger-soft); color: var(--danger); font: 700 .85rem/1.2 var(--font-body); }
.phone__alert .ico { width: 18px; height: 18px; }
.phone__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; } .phone__chips span { padding: 5px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font: 600 .8rem var(--font-display); }
.band { width: min(100% - 32px, 1160px); margin: 0 auto; padding: 56px 0; }
.band > h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 500; display: block; margin-bottom: 24px; }
.band--soft { width: 100%; padding-inline: max(16px, calc((100% - 1160px) / 2)); background: #fff; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: s; padding: 22px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 1.1rem var(--font-display); }
.steps b { font: 600 1.2rem var(--font-display); color: var(--ink); } .steps p { margin: 8px 0 0; color: var(--muted); }
.features { display: grid; gap: 14px; width: min(100% - 32px, 1160px); margin: 0 auto; padding: 0 0 56px; }
@media (min-width: 700px) { .features { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature { padding: 24px; border-radius: var(--r); background: linear-gradient(180deg, #fff, #f8fcfa); box-shadow: var(--shadow); }
.feature img { width: 88px; height: 88px; margin: -6px 0 6px -6px; } .feature p { margin: 0; color: var(--muted); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.ticks li { position: relative; padding-left: 34px; font-size: 1.08rem; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176b50' stroke-width='3'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 16px no-repeat; }
.faq { display: grid; gap: 8px; max-width: 820px; }
.faq details { padding: 4px 18px; border-radius: var(--r-sm); background: var(--paper); }
.faq summary { cursor: pointer; padding: 14px 0; font: 600 1.06rem/1.3 var(--font-display); color: var(--ink); }
.faq p { color: var(--muted); }
.sfoot { padding: 34px 16px calc(34px + env(safe-area-inset-bottom)); background: var(--ink); 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: #fff; 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, .nav, .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: #fff; }
.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: #fff; opacity: 1; }

/* work schedule */
.sch { overflow-x: auto; margin: 0 0 8px; border-radius: var(--r); background: #fff; 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: #fff; }
.sch__who { position: sticky; left: 0; z-index: 2; min-width: 120px; padding: 0 8px !important; background: #fff; 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: #fff; }
.sch__c em { position: absolute; top: -4px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand); color: #fff; 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: #fff; 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; } }
@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: #fff; }
.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: #fff; 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: #fff; }
.bhead__langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; 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: #fff !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: #fff; 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: #fff; 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 rgb(23 107 80 / .25); 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: #fff; 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); }
.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: #fff; 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: #fff; box-shadow: 0 8px 18px -10px rgb(23 107 80 / .8); } .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: #fff; 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: #fff; }
@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: #fff; 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: #fff; 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: #fff; 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), #fff, transparent 70%), rgb(255 255 255 / .82);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(23 107 80 / .14), 0 8px 20px -14px rgb(21 60 48 / .45); }
.btn--glass::after { display: none; } .btn--glass .lq-drop { background: radial-gradient(closest-side, rgb(23 107 80 / .18), transparent); }
.btn .ico { width: 20px; height: 20px; }

/* the menu: a white floating bar, the selected place in a glossy mint capsule */
.nav { --glass-tint: rgb(255 255 255 / .8); --glass-tint-2: rgb(255 255 255 / .66); }
.nav > a.on { color: var(--brand); font-weight: var(--w-bold); }
.nav .lq-pill, .nav:not(.has-pill) > a.on { background: linear-gradient(180deg, #e2f6ec, var(--mint-3)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(23 107 80 / .12), 0 6px 14px -8px rgb(23 107 80 / .45); }
@media (min-width: 900px) { .nav .lq-pill { background: linear-gradient(180deg, #fff, var(--brand-soft)); } }

/* 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 rgb(23 107 80 / .1), 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, #fff, var(--mint-2)); color: var(--brand); font: var(--w-bold) 1.15rem/1 var(--font-display);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(23 107 80 / .12), 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: #fff; 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: #fff; box-shadow: inset 0 0 0 2px var(--mint-3), 0 8px 20px -14px rgb(23 107 80 / .5); }
.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 rgb(23 107 80 / .1), 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: #fff; } }
.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 rgb(23 107 80 / .14); white-space: nowrap; }
.vn__badge--off { background: #fff; 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: #fff; font: inherit; color: var(--ink); }
.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: #fff; 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 rgb(23 107 80 / .16); }
.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: rgb(255 255 255 / .6); }
.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: #fff; 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: #fff; 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 rgb(23 107 80 / .1), 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: #fff; 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: #fff; 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: #fff; 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: #fff; }
.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); }
.hero h1 { font-weight: 350; }
.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 rgb(23 107 80 / .5); }
.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; }

/* marketing site: section titles in the editorial serif; FAQ with a real chevron instead of the browser triangle */
.site main h2 { font: 400 clamp(2rem, 4.4vw, 2.8rem)/1.08 var(--font-editorial); letter-spacing: -.01em; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 10px; height: 10px; border: solid var(--brand); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -3px; transition: rotate .25s; }
.faq details[open] summary::after { rotate: 225deg; translate: 0 3px; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
@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 rgb(23 107 80 / .12); }
.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: #fff; 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: #fff; 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: #fff; }
.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(--ink); color: #fff; 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, .nav > a, .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 #fff; }

/* 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)); }
  .ws:has(.main form[method=post] > .sticky:not(.selbar, .albar)) .nav { display: none; }
  .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: #fff; }

/* 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: #fff; 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 #fff, 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: #fff; 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: rgb(255 255 255 / .7); 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); }
.top__clinic { flex: 0 1 auto; }
@media (max-width: 899px) { .top__search { width: 48px; padding: 0; justify-content: center; } .top__search span, .top__search kbd { display: none; } .top__clinic { flex: 1; } }
@media (hover: hover) { .top__search:hover { background: #fff; } }
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 rgb(23 107 80 / .12); }
.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: #fff; 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: #fff; }
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: #fff; 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: #fff; 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: rgb(255 255 255 / .92); 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: #fff; }
.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: #fff; 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: #fff; 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: #fff; }
.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: #fff; 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: #fff; 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: rgb(255 255 255 / .96); 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: #fff; }
.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: #fff; 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: #fff; 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: #fff; 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: #fff; }
@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: #fff; color: var(--brand); } .resume small { color: var(--muted); }
.resume__go { background: var(--brand); color: #fff; }
.upnext__avatar { background: #fff; 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: #fff; 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: #fff; 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: #fff; }
.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: #fff; 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; }
.nav .lq-pill, .nav:not(.has-pill) > a.on { background: var(--mint-100); box-shadow: none; }
@media (min-width: 900px) {
  .nav { background: transparent; }
  .nav > a { min-height: 46px; padding: 8px 14px; border-radius: 12px; font-size: 1rem; color: var(--muted); }
  .nav > a.on { color: var(--brand-deep); }
  .nav .ico { width: 22px; height: 22px; }
  .nav .lq-pill { background: var(--mint-100); border-radius: 12px; }
  @media (hover: hover) { .nav > a:hover { background: var(--raised); } }
}
@media (max-width: 899px) { .nav { box-shadow: var(--float); } }

/* 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: rgb(255 255 255 / .97); -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: #fff; }
/* phones: the mark alone, then the practice's name in full (the word mark would squeeze it to "Cabin…") */
@media (max-width: 520px) {
  .top__brand .wordmark { display: none; }
  .top__clinic { border-left: 0; padding-left: 8px; font: 600 1rem/1.2 var(--font-display); color: var(--ink); }
}
@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: #fff; --fg: var(--ink); border: 1.5px solid var(--control); }
.btn--accent { --bg: var(--brand); --fg: #fff; border-color: var(--brand); }
.btn--dark { --bg: var(--ink); --fg: #fff; border-color: var(--ink); }
.btn--danger { --bg: var(--danger); --fg: #fff; 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: #fff; cursor: pointer; transition: background-color .16s, border-color .16s; }
input[type=checkbox]::after { content: ''; width: 14px; height: 14px; background: #fff; -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: #fff; }
.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: #fff; 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: #fff; 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); }

/* ===== the Menu page (/app/meniu): the same categories as the sidebar, with a line for each item ===== */
.menuhub { display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 1100px) { .menuhub { grid-template-columns: 1fr 1fr; align-items: start; } }
.menugroup h2 { margin: 0 0 var(--s2); font: var(--w-label) 1.05rem/1.3 var(--font-display); color: var(--muted); }
.menulist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--edge-1); border-radius: var(--r); overflow: hidden; }
.menulist li + li { border-top: 1px solid var(--rule); }
.menulist form { margin: 0; }
.menulist a, .menulist button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 18px;
  border: 0; background: none; color: var(--ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer;
  transition: background-color var(--dur-press) var(--ease); }
.menulist .ico { flex: none; width: 24px; height: 24px; color: var(--brand); }
.menulist a > .ico:last-child { width: 20px; height: 20px; color: var(--muted); }
.menulist__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.menulist__text b { font: var(--w-label) 1.06rem/1.3 var(--font-display); color: var(--ink); }
.menulist__text small { font-size: .95rem; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.menulist .wlcount { margin-left: 6px; font-size: .9rem; }
@media (hover: hover) { .menulist a:hover, .menulist button:hover { background: var(--mint-50); } }
.menulist a:active, .menulist button:active { background: var(--mint-100); }
.menulist a:focus-visible, .menulist button:focus-visible { outline-offset: -3px; }
.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: #fff;
  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; }

/* ===== the sidebar: every menu item, the main places first and the rest in categories that fold =====
   Wide screens: beside the page, folded to a rail of icons with the top bar's menu button (remembered per device).
   Phones: it slides in from the left over the page (top bar button or Menu in the dock); the dock keeps the main places. */
.top__menu { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin-left: -6px; border: 0;
  border-radius: var(--r-sm); background: none; color: var(--ink); cursor: pointer; }
.top__menu .ico { width: 24px; height: 24px; }
@media (hover: hover) { .top__menu:hover { background: var(--mint-50); } }
.side { display: flex; flex-direction: column; background: var(--ground); }
.side__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 6px 22px; }
.side__head b { font: 700 1.3rem/1.2 var(--font-display); }
.side__close { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); cursor: pointer; }
.side__close .ico { width: 24px; height: 24px; }
.side__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 10px 12px; scrollbar-width: thin; }
.side__main { position: relative; display: grid; gap: 2px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--edge-1); }
.side a, .side__foot button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); text-align: left; text-decoration: none;
  font: var(--w-text) 1rem/1.25 var(--font-display); cursor: pointer; transition: background-color var(--dur-press) var(--ease); }
.side__main a { min-height: 50px; font-size: 1.04rem; font-weight: var(--w-label); }
.side a > span, .side__foot button > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.side .ico { flex: none; width: 22px; height: 22px; color: var(--muted); }
@media (hover: hover) { .side a:hover, .side__foot button:hover { background: var(--mint-50); } }
.side a:active, .side__foot button:active { background: var(--mint-100); }
.side a[aria-current="page"] { background: var(--mint-100); color: var(--brand-deep); font-weight: var(--w-label); }
.side a[aria-current="page"] .ico { color: var(--brand); }
.side__main.has-pill a[aria-current="page"] { background: none; }   /* the gliding pill draws it there */
.side__main .lq-pill { border-radius: var(--r-sm); background: var(--mint-100); box-shadow: none; }
.side a:focus-visible, .side summary:focus-visible, .side__foot button:focus-visible { outline-offset: -3px; }
.side__group summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-top: 6px; padding: 8px 12px;
  border-radius: var(--r-sm); list-style: none; cursor: pointer; font: var(--w-label) .95rem/1.2 var(--font-display); color: var(--muted); }
.side__group summary::-webkit-details-marker { display: none; }
.side__group summary .ico { width: 18px; height: 18px; transition: rotate var(--dur-ui) var(--ease); }
.side__group[open] summary .ico { rotate: 90deg; }
@media (hover: hover) { .side__group summary:hover { background: var(--mint-50); color: var(--ink); } }
.side__group ul { display: grid; gap: 2px; margin: 0 0 4px; padding: 0; list-style: none; }
.side .wlcount { flex: none; font-size: .85rem; }
.side__foot { display: grid; gap: 2px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--edge-1); }
.side__foot form { margin: 0; }
.side__foot [aria-pressed="true"] { color: var(--brand-deep); font-weight: var(--w-label); }
.side__foot [aria-pressed="true"] .ico { color: var(--brand); }
.side__backdrop { position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: rgb(19 36 30 / .4); animation: fade-in var(--dur-fade) var(--ease) both; }
.side-locked, .side-locked body { overflow: hidden; }
@media (max-width: 899px) {
  .side { position: fixed; inset: 0 auto 0 0; z-index: var(--z-sheet); width: min(88vw, 360px); padding-top: env(safe-area-inset-top);
    background: var(--surface); border-radius: 0 var(--r) var(--r) 0; box-shadow: var(--float);
    translate: -105% 0; visibility: hidden; transition: translate var(--dur-sheet) var(--ease-sheet), visibility 0s linear var(--dur-sheet); }
  .side.is-open { translate: 0 0; visibility: visible; transition: translate var(--dur-sheet) var(--ease-sheet), visibility 0s; }
  .side a, .side__foot button { min-height: 52px; }
}
@media (min-width: 900px) {
  .nav { display: none; }
  .side__head, .side__backdrop { display: none; }
  .ws { padding-left: 268px; }
  .top { margin-left: -268px; }
  .side { position: fixed; top: var(--bar-h); bottom: 0; left: 0; z-index: var(--z-bar); width: 268px; border-right: 1px solid var(--edge-1); }
  .back--menu { display: none; }
  /* folded: a rail of the main places (their names stay for screen readers and show on hover) */
  [data-side="closed"] .ws { padding-left: 76px; }
  [data-side="closed"] .top { margin-left: -76px; }
  [data-side="closed"] .side { width: 76px; }
  [data-side="closed"] .side__group { display: none; }
  [data-side="closed"] .side__main { border-bottom: 0; }
  [data-side="closed"] .side a, [data-side="closed"] .side__foot button { justify-content: center; padding: 10px; }
  [data-side="closed"] .side a > span, [data-side="closed"] .side__foot button > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ===== 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);
}
.side a[aria-current="page"], .side__main .lq-pill { background: var(--nav-on); }
.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); }
  .nav.glass { 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: #fff; 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 ===== */
.side__lang { display: block; font-size: .9rem; color: var(--muted); }
.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 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: #fff; 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: #fff; 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; } }