/* MedicDay — mobile-first, no framework. Palette and type follow docs/design (today.html). */
:root {
  --bg: #F4F3F7; --surface: #fff; --text: #1B1530; --ink-2: #4A4460; --muted: #5E5872; --line: #E6E3EE; --line-soft: #EFEDF3;
  --primary: #4B1F91; --primary-hover: #3C1776; --primary-ink: #fff; --primary-soft: #EFEAF8; --on-primary-muted: #E4DCF5;
  --danger: #b42318; --danger-soft: #fee4e2; --amber: #92400E; --amber-soft: #FEF3C7; --amber-tint: #FFFBF1; --amber-line: #F1DDB4;
  --ok: #166534; --ok-soft: #DCFCE7; --info: #1D4ED8; --info-soft: #E0ECFF; --radius: 16px; --shadow: 0 1px 2px rgba(27,21,48,.05), 0 8px 24px rgba(27,21,48,.05);
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1419; --surface: #171d26; --text: #e8ecf2; --ink-2: #c3c9d4; --muted: #9aa5b5; --line: #2a333f; --line-soft: #222a35;
          --primary: #a78bfa; --primary-hover: #b9a3fb; --primary-ink: #1e1033; --primary-soft: #2e1065; --on-primary-muted: #4c3a7a;
          --danger: #f97066; --danger-soft: #3b1512; --amber: #fdb022; --amber-soft: #3d2a05; --amber-tint: #241a08; --amber-line: #4a3510;
          --ok: #32d583; --ok-soft: #0b3320; --info: #7cb4ff; --info-soft: #14254a; }
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
/* Room for the scrollbar always, so a short page and a long one (Counter,
   Orders, Rx…) line up instead of shifting sideways by its width. */
html { scrollbar-gutter: stable; }
/* Moving between pages: the browser keeps the old page on screen and fades to
   the new one (Chrome, Edge, Safari 18.2+; elsewhere a plain navigation), so
   a menu click never shows a blank frame. The header and the phone's tab bar
   are their own layers: they stay put rather than fade. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; }
.topbar { view-transition-name: md-topbar; }
.tabbar { view-transition-name: md-tabbar; }
::view-transition-group(md-topbar), ::view-transition-group(md-tabbar) { animation: none; }
::view-transition-old(md-topbar), ::view-transition-old(md-tabbar) { display: none; }
::view-transition-new(md-topbar), ::view-transition-new(md-tabbar) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--primary); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
/* The bar is capped at 75rem, so what fits at 1200px fits at any desktop
   width: the spacing below is what the full set of controls (nav, search,
   language, branch, account) needs, not a wide-screen luxury. */
.topbar .inner { max-width: 75rem; margin: 0 auto; min-height: 68px; padding: 0 40px; display: flex; align-items: center; gap: 20px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex-shrink: 0; }
.brand svg { width: 24px; height: 24px; flex-shrink: 0; }
.brand .word { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.topbar .nav { display: flex; gap: 4px; min-width: 0; flex-shrink: 0; }
/* Whatever follows the menu starts the bar's other end: the branch chip and
   the person sit at the right edge, in line with the page below, whether or
   not a search box (the clinic's) is there to take the space. */
.topbar .inner > .nav + * { margin-inline-start: auto; }
/* With no search box to fill the middle (a pharmacy's bar, support's, a
   partner's), the menu takes the width and its items spread evenly across it,
   from beside the logo to the bar's other end (Sign out, where it is part of
   the menu, at the right edge). The clinic's bar keeps its search box. */
.topbar .inner > .nav:not(:has(+ .search-wrap)) { flex: 1 1 auto; justify-content: space-between; }
/* A product's main menu (the pharmacy's) a little closer than edge to edge:
   centred in the space, its items a comfortable step apart. Support's bar keeps the spread, Sign
   out at the right edge. */
.topbar .inner > .nav-main:not(:has(+ .search-wrap)) { justify-content: center; gap: clamp(.25rem, 1.4vw, 1.25rem); }
/* The signed-out bar (the landing pages) and a partner's: a plain site menu,
   its links kept together at the right end, Sign in or Sign out last. */
.topbar .inner > .nav.nav-guest:not(:has(+ .search-wrap)),
.topbar .inner > .nav.nav-partner:not(:has(+ .search-wrap)) { flex: 0 1 auto; margin-inline-start: auto; justify-content: flex-end; align-items: center; gap: 8px; }
/* On a phone a partner's pages are in the bottom tab bar, as a clinic's;
   the top keeps only Sign out, at the right. */
@media (max-width: 860px) {
  .topbar .nav.nav-partner > :not(form) { display: none; }
  .topbar .nav.nav-partner button { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
}
.topbar .nav a, .topbar .nav button { padding: 10px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 500; text-decoration: none; background: none; border: 0; font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.topbar .nav a:hover, .topbar .nav button:hover { background: var(--bg); color: var(--text); }
.topbar .nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.search-wrap { flex: 1 1 14rem; display: flex; justify-content: center; min-width: 11rem; margin: 0; }
.search { width: 100%; max-width: 440px; height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.search:focus-within { border-color: var(--primary); background: var(--surface); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); outline: none; padding: 0; font: inherit; }
.search input:focus { outline: none; }
.kbd { font-size: 12px; font-weight: 600; padding: 2px 7px; border: 1px solid #D6D1E2; border-radius: 6px; color: var(--muted); }
/* Language picker: a customisable select (appearance: base-select) styled like the search box.
   The globe is inside the select's <button>. The picker is a popover the browser anchors
   to its own select — we style it but never place it: a named anchor (anchor-name on the
   select, position-anchor on the picker) is ignored by Safari's customisable select and the
   dropdown lands in the page corner, while the browser's own anchoring keeps it under the
   control and flips it back into view near an edge. */
.lang-pick { margin: 0; margin-inline-start: auto; flex-shrink: 0; }
.lang-pick label { display: block; margin: 0; }
.lang-pick select { display: inline-flex; align-items: center; width: auto; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; }
.lang-pick select:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.lang-pick select, .lang-pick select::picker(select) { appearance: base-select; }
.lang-pick select > button { display: inline-flex; align-items: center; gap: 8px; }
.lang-pick select > button svg { color: var(--ink-2); flex-shrink: 0; }
.lang-pick select::picker-icon { color: var(--muted); margin-inline-start: 8px; }
.lang-pick select::picker(select) { margin: 6px 0 0; min-width: anchor-size(width); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: .35rem; box-shadow: var(--shadow); }
.lang-pick select option { padding: .55rem .8rem; border-radius: 8px; }
.lang-pick select option:checked { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.lang-pick select option:hover, .lang-pick select option:focus-visible { background: var(--bg); }
/* "Where you are working": a small select in the header for a doctor whose
   day spans branches, built like the language picker beside it — the pin
   sits inside the select's own button, and inline-flex is what centres that
   button's content in the 44px control (a base-appearance select does not
   centre it on its own). Hidden on a phone, where the header is already
   full; the branch is still shown and correctable on the review screen.
   Its width is fixed rather than sized to the branch name: a control that
   grows with what is selected shifts everything beside it in the header
   every time the doctor moves branch, so the name ellipses instead. */
.branch-chip { margin: 0; min-width: 0; }
.branch-chip select { display: inline-flex; align-items: center; width: 10rem; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; }
.branch-chip select:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.branch-chip select > button { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.branch-chip select > button svg { color: var(--ink-2); flex-shrink: 0; }
.branch-chip select selectedcontent { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-chip select::picker-icon { color: var(--muted); margin-inline-start: 6px; flex-shrink: 0; }
.who-menu { position: relative; min-width: 0; }
.who { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 0; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; border-radius: 999px; }
.who-menu .menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 13rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: .35rem; z-index: 20; display: flex; flex-direction: column; }
.who-menu .menu a, .who-menu .menu button { display: block; width: 100%; text-align: start; padding: .6rem .8rem; border-radius: 8px; color: var(--text); text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; }
.who-menu .menu a:hover, .who-menu .menu button:hover { background: var(--bg); }
.who-menu .menu form { border-top: 1px solid var(--line-soft); margin-top: .25rem; padding-top: .25rem; }
.who-menu .menu form button { color: var(--danger); }
.who-menu .menu-who { display: flex; flex-direction: column; gap: 2px; padding: .5rem .8rem .7rem; margin-bottom: .25rem; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.who-menu .menu-who strong { font-size: 15px; font-weight: 600; color: var(--text); }
.who-menu .menu-who small { font-size: 13px; color: var(--muted); }
/* The products of an account (clinic, pharmacy): one segmented row at the top of the menu. */
.who-menu .menu-ws { display: flex; gap: .25rem; padding: .25rem .5rem .5rem; border-block-end: 1px solid var(--line-soft); margin-block-end: .25rem; }
.who-menu .menu-ws a { flex: 1; text-align: center; border-radius: 8px; padding-block: .4rem; }
.who-menu .menu-ws a[aria-current="page"] { background: var(--accent-soft, var(--line-soft)); font-weight: 600; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.who-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.who-text strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.who-text small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.icon-btn { display: none; }
/* Mobile: brand, search icon, avatar up top; Today / Patients / Reports in a bottom tab bar. */
.tabbar { display: none; }
@media (max-width: 860px) {
  .topbar .inner { min-height: 60px; padding: 0 16px; gap: 10px; }
  .brand { flex: 1; }
  .brand .word { font-size: 18px; }
  .topbar .nav-main, .search-wrap, .who-text { display: none; }
  .icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
  .avatar { width: 44px; height: 44px; }
  .branch-chip { display: none; }
  .lang-pick { margin-inline-start: 0; }
  .lang-pick select { padding: 0 8px; }
  .lang-pick select > button svg { display: none; }
  body.signed-in main { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  /* A floating dock, as on a phone's App Store: a rounded, translucent bar
     raised off the bottom edge, the current page in a rounded highlight. */
  /* The account menu opens above the tab bar (the top bar outranks it) and
     scrolls within the screen between the two, so Sign out is never under it. */
  .topbar { z-index: 11; }
  .who-menu .menu { max-block-size: calc(100dvh - 68px - 74px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.5rem); overflow-y: auto; overscroll-behavior: contain; }
  .who-menu .menu form { position: sticky; inset-block-end: -.35rem; background: var(--surface); padding-block-end: .35rem; }
  .tabbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2px; block-size: 64px; padding: 4px; position: fixed; inset-inline: 12px; inset-block-end: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 10; border-radius: 32px; background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: 0 8px 28px rgb(0 0 0 / .14), inset 0 1px 0 rgb(255 255 255 / .35); }
  .tabbar a, .tabbar .tab-group { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 28px; font-size: 12px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
  .tabbar .tab-group { border: 0; background: none; font-family: inherit; cursor: pointer; padding: 0; }
  .tabbar a[aria-current="page"], .tabbar .tab-group[aria-current="page"] { color: var(--primary); font-weight: 600; background: color-mix(in srgb, var(--primary-soft) 85%, transparent); }
  /* Screens with their own fixed action bar keep it; the tabs step aside. */
  body:has(.sticky-actions) .tabbar { display: none; }
}
/* Every page shares the top bar's column (width and side padding), so the
   content lines up with the logo and the menu, Today's dashboard included. */
main { max-width: 75rem; margin: 0 auto; padding: 32px 40px 5rem; }
main:has(.td-page) { padding-bottom: 48px; }
@media (max-width: 860px) {
  main { padding: 12px 16px 5rem; }
  main:has(.td-page) { padding-bottom: 12px; }
  body.signed-in main { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  body:has(.sticky-actions) main { padding-bottom: 5rem; }
}
/* The column is wide now; a text field is not: past ~42rem a line is hard
   to read and to aim at. Grids, tables and inline rows are narrower anyway. */
main input:not([type="checkbox"]):not([type="radio"]), main select, main textarea { max-inline-size: 42rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--shadow); min-inline-size: 0; }
.card h2 { display: flex; align-items: center; gap: .5rem; }
.stack > * + * { margin-top: .75rem; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
/* minmax(0, …): a column never grows past the screen for wide content (a
   table inside scrolls in its own box instead of moving the page). */
.grid { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
label { display: block; font-size: .875rem; color: var(--muted); margin-bottom: .25rem; }
input, select, textarea { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; }
/* iOS zooms the page into a field under 16px and leaves it zoomed (a sideways-wobbling page, the dialog cut off):
   on a touch screen a field never goes below 16px, whatever its table or card's text size. */
@media (pointer: coarse) { input, select, textarea { font-size: max(1em, 16px); } }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
textarea { min-height: 4.5rem; resize: vertical; }
select { appearance: base-select; }
/* A base-appearance select paints the chosen option inside its own button.
   Long text there wraps by default, which makes the control taller and
   shoves everything below it down the page; one line and an ellipsis
   instead, so picking a branch never moves the layout. */
select > button { min-width: 0; }
select selectedcontent { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-weight: 600; padding: .65rem 1rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; min-height: 2.75rem; }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.big { width: 100%; font-size: 1.1rem; padding: 1rem; }
.btn.small { min-height: 2.2rem; padding: .35rem .7rem; font-weight: 500; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-link { background: none; border: 0; color: var(--primary); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.pill { display: inline-block; font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill.amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.pill.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.pill.primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.alert { border-radius: 10px; padding: .7rem .9rem; margin-bottom: .75rem; font-size: .95rem; }
.alert.error { background: var(--danger-soft); color: var(--danger); }
.alert.warn { background: var(--amber-soft); color: var(--amber); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.alert ul { margin: 0; padding-inline-start: 1.2rem; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: .75rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.list li a.main { flex: 1; text-decoration: none; color: var(--text); }
.list .meta { color: var(--muted); font-size: .85rem; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: start; padding: .5rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
td.num, th.num { text-align: end; white-space: nowrap; }
/* A wide table scrolls sideways inside this box, never the page; the
   swipe stays in the box on a phone. */
.table-wrap { overflow-x: auto; max-inline-size: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
/* Settings → Billing grids: cells keep a usable width; the table scrolls inside .table-wrap. */
.bill-grid input:not([type="checkbox"]), .bill-grid select { min-inline-size: 6.5rem; }
.bill-grid td:first-child { min-inline-size: 7rem; }
.plan-table th.using { text-align: center; border-block-end: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; }
.stat .v { font-size: 1.6rem; font-weight: 700; }
.stat .k { color: var(--muted); font-size: .85rem; }
/* A row of figures as cards (a report's summary): as many per line as fit, two on a phone. */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin-block: 1rem; }
.stat-cards .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .75rem 1rem; gap: .15rem; min-width: 0; box-shadow: var(--shadow); }
.stat-cards .stat .v { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.2; }
@media (max-width: 480px) { .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.patient-ctx { position: sticky; top: 3.4rem; z-index: 5; background: var(--primary-soft); border: 1px solid transparent; border-radius: 10px; padding: .6rem .9rem; margin-bottom: 1rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.patient-ctx strong { font-size: 1.05rem; }
.rx-line { border: 1px solid var(--line); border-radius: 10px; padding: .75rem; }
.rx-line.flagged { border-color: var(--amber); background: var(--amber-soft); }
.rx-line .fields { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .rx-line .fields { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.rx-sum { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: start; font: inherit; color: inherit; background: var(--surface); cursor: pointer; }
.rx-sum .who-line { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.rx-sum .name { font-weight: 600; overflow-wrap: anywhere; }
.rx-sum .meta { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.rx-sum .meta span + span::before { content: " · "; }
/* A diagnosis's ICD-10 code the AI suggested, until the doctor saves it. */
.rx-sum .meta .dx-ai, .dx-icd .dx-ai { color: var(--amber); font-weight: 600; }
.dx-icd .dx-ai { font-size: .8em; }
.rx-sum .chev { color: var(--muted); flex: none; }
.rx-dialog { max-height: calc(100dvh - 2rem); overflow-y: auto; }
.rx-dialog .rx-drug { font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; margin: 0; }
.rx-dialog .rx-row label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.rx-dialog .rx-row input { width: 100%; }
.rx-dialog .rx-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; }
.prov { font-size: .72rem; color: var(--muted); }
.prov::before { content: "◌ "; }
.prov.doctor_speech::before { content: "🎙 "; }
.prov.doctor_input::before { content: "✎ "; }
.part-result { text-align: start; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem; margin: .75rem 0; }
/* Settings sub-nav. Six tabs do not fit a phone and the page itself may not
   scroll sideways (body clips it), so the strip scrolls inside itself and
   bleeds to the card's edges: a half-cut tab, and the fade over it, say there
   is more. Phones get pills, which are easier to hit on a moving strip;
   wider screens keep the underline tabs used elsewhere. */
.tabs { position: relative; border-bottom: 1px solid var(--line); margin: -.25rem -1rem .75rem; min-width: 0; }
.tabs .scroll { display: flex; gap: .25rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: .25rem 1rem; scroll-padding-inline: 1rem; }
.tabs .scroll::-webkit-scrollbar { display: none; }
.tabs a { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: 2.5rem; padding: .4rem .8rem; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 500; white-space: nowrap; }
.tabs a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }
/* Fade hints, shown only on the side that still has tabs to reach. The
   gradient cannot be logical, so it is mirrored for RTL. */
.tabs::before, .tabs::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.75rem; pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.tabs::before { inset-inline-start: 0; background: linear-gradient(to right, var(--surface), transparent); }
.tabs::after { inset-inline-end: 0; background: linear-gradient(to left, var(--surface), transparent); }
[dir="rtl"] .tabs::before { background: linear-gradient(to left, var(--surface), transparent); }
[dir="rtl"] .tabs::after { background: linear-gradient(to right, var(--surface), transparent); }
.tabs.more-start::before, .tabs.more-end::after { opacity: 1; }
@media (min-width: 640px) {
  .tabs .scroll { gap: .25rem; padding: 0 1rem; }
  .tabs a { border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .4rem .7rem; }
  .tabs a[aria-current="page"] { background: none; border-bottom-color: var(--primary); }
}
table.audit { font-size: .9rem; }
table.audit td { vertical-align: top; }
table.audit .nowrap { white-space: nowrap; }
table.audit .meta { color: var(--muted); }
table.audit .kv { display: inline-block; margin-inline-end: .6rem; }
table.audit .kv b { font-weight: 600; color: var(--text); }
table.audit tr.blocked td { opacity: .7; }
.ai-setup .steps-list { padding-inline-start: 1.3rem; margin: .5rem 0 .75rem; }
.ai-setup .steps-list li { margin: .45rem 0; }
.ai-setup code { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3em; }
.part-result .spinner { width: 1rem; height: 1rem; border-width: 2px; margin-inline-end: .3rem; }
.kv { margin: 0; display: grid; gap: .35rem; }
.kv > div { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem; align-items: baseline; }
.kv dt { font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.kv dd { margin: 0; }
/* Right-to-left (Arabic). Layout uses logical properties throughout, so
   only glyph-level details need mirroring: chevrons and the week arrows.
   Numbers, clock times and amounts stay left-to-right runs inside RTL text. */
[dir="rtl"] .chev, [dir="rtl"] .td-row .chev, [dir="rtl"] .back-link svg { transform: scaleX(-1); }
[dir="rtl"] .sched-nav .btn[aria-label] { transform: scaleX(-1); }
.num, .timer, .money, .kbd, .td-time, .sched-grid .block .t, .pub-item .when, .take .timer, code { unicode-bidi: isolate; direction: ltr; }
html[lang="ar"] { --font: "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif; }
html[lang="ar"] body { line-height: 1.6; }
html[lang="si"] { --font: "Noto Sans Sinhala", system-ui, -apple-system, "Segoe UI", sans-serif; }
html[lang="si"] body { line-height: 1.65; }

/* Consultation: the idle page is a start card (big mic) and an outline of
   what the prompter asks for; the take itself is the full-screen .take below. */
.consult .intro h1 { font-size: 1.7rem; letter-spacing: -.02em; }
.consult .intro p { margin-top: .25rem; font-size: 1rem; max-width: 60ch; }
.start-card { margin: 1.25rem 0; padding: 2.25rem 1.5rem 1.75rem; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
.big-mic { width: 8rem; height: 8rem; border-radius: 50%; border: 0; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 10px var(--primary-soft), 0 14px 32px rgba(75,31,145,.3); transition: transform .15s, background .15s; }
.big-mic svg { width: 3rem; height: 3rem; }
.big-mic .count-num { font-size: 3.25rem; font-weight: 700; line-height: 1; }
.big-mic:hover { background: var(--primary-hover); transform: scale(1.03); }
.big-mic:disabled { opacity: .5; cursor: default; transform: none; }
.start-card strong { font-size: 1.25rem; font-weight: 600; }
.start-card .hint { color: var(--muted); }
/* Manual entry: under the mic, the forms without dictating. */
.manual-entry { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: -.25rem 0 1.25rem; text-align: center; }
.manual-entry .btn { display: inline-flex; gap: .45rem; align-items: center; }
.manual-entry .hint { color: var(--muted); font-size: .9rem; }
.start-card .shortcut { font-size: .85rem; color: var(--muted); display: flex; gap: .4rem; align-items: center; }
.kbd { font-size: .78rem; font-weight: 600; padding: .1rem .45rem; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); }
.outline h2 { font-size: 1rem; color: var(--ink-2); margin: 0 0 .6rem; }
.outline ol { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.outline li { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; padding: .85rem 1.1rem; }
.outline li + li { border-top: 1px solid var(--line-soft); }
.outline .n { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.outline .t { font-weight: 600; }
.outline .p { color: var(--muted); font-size: .9rem; }
@media (max-width: 720px) { .start-card .shortcut { display: none; } }

/* The take: a dark full-screen sheet while recording. Rows: top bar, the
   prompter chat, the mic, the controls. The chat is bottom-anchored so the
   prompt being read always sits directly above the mic; earlier prompts
   shrink and fade upward, and each prompt's bar fills only while the doctor
   is heard speaking, moving on at their pace. */
.take { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; color: #fff; background: radial-gradient(120% 80% at 50% 78%, #2C1560 0%, #170B30 60%); padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); --tk-muted: #B9ADD6; --tk-dim: #7E71A0; --tk-glow: #8E63E0; }
.take-top { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.75rem; }
.take .live { display: flex; align-items: center; gap: .5rem; font-weight: 600; white-space: nowrap; }
.take .live i { width: .6rem; height: .6rem; border-radius: 50%; background: #F2545B; animation: blink 1.2s infinite; }
.take.paused .live i { animation: none; background: var(--tk-dim); }
.take .timer { color: var(--tk-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.take .timer b { color: #fff; font-weight: 600; }
.take .steps { display: flex; gap: .35rem; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.take .step { height: 2rem; padding: 0 .75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--tk-dim); font: 600 .8rem var(--font); white-space: nowrap; cursor: pointer; }
.take .step:hover { color: var(--tk-muted); border-color: rgba(255,255,255,.3); }
.take .step.done { color: var(--tk-muted); }
.take .step.current { background: rgba(142,99,224,.22); border-color: var(--tk-glow); color: #fff; }
.take .cancel { height: 2.5rem; padding: 0 .9rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--tk-muted); font: 500 .95rem var(--font); cursor: pointer; }
.take .cancel:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.take .take-alert { margin: 0 0 .5rem; }
.take .chat { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 1.5rem .5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem; overflow-y: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%); mask-image: linear-gradient(to bottom, transparent 0%, #000 35%); }
.take .divider { align-self: center; margin: .5rem 0 .1rem; font-size: .8rem; font-weight: 600; color: var(--tk-glow); display: flex; align-items: center; gap: .5rem; animation: rise .35s ease both; }
.take .divider .num { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: .75rem; }
.take .msg { display: flex; align-items: flex-end; gap: .6rem; animation: rise .35s ease both; }
.take .msg .av { width: 1.9rem; height: 1.9rem; flex-shrink: 0; }
.take .bubble { max-width: 100%; padding: .9rem 1.1rem; border-radius: 20px 20px 20px 6px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 1.6rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; transition: font-size .3s ease, padding .3s ease, background-color .3s ease; }
.take .msg.current .bubble { box-shadow: 0 0 0 1px rgba(142,99,224,.5), 0 10px 30px rgba(0,0,0,.25); }
.take .bubble .ex { display: block; margin-top: .5rem; font-size: 1rem; font-weight: 400; font-style: italic; color: var(--tk-muted); letter-spacing: 0; }
.take .bubble .bar { display: block; height: 3px; margin-top: .75rem; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.take .bubble .bar span { display: block; height: 100%; width: 0; background: var(--tk-glow); transition: width .1s linear; }
.take .msg.past .bubble { font-size: 1rem; font-weight: 500; padding: .55rem .9rem; background: rgba(255,255,255,.05); color: var(--tk-muted); box-shadow: none; }
.take .msg.past .ex, .take .msg.past .bar { display: none; }
.take .msg.past .av { opacity: .4; }
.take .tick { display: none; width: 1rem; height: 1rem; color: #4ADE80; margin-inline-start: .4rem; vertical-align: -2px; }
.take .msg.past.ok .tick { display: inline; }
.take .typing { display: inline-flex; gap: 5px; padding: .4rem .1rem; }
.take .typing i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--tk-muted); animation: bounce 1s infinite ease-in-out; }
.take .typing i:nth-child(2) { animation-delay: .15s; }
.take .typing i:nth-child(3) { animation-delay: .3s; }
.take .mic-zone { display: grid; place-items: center; padding: .5rem 0 .25rem; }
.take .mic-wrap { position: relative; width: 15rem; height: 15rem; display: grid; place-items: center; }
.take .ring { position: absolute; width: 8.25rem; height: 8.25rem; border-radius: 50%; border: 2px solid var(--tk-glow); opacity: 0; animation: take-ring 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.take .ring:nth-child(2) { animation-delay: .8s; }
.take .ring:nth-child(3) { animation-delay: 1.6s; }
.take.quiet .ring { animation-duration: 3.6s; border-color: rgba(142,99,224,.45); }
.take.paused .ring { animation: none; opacity: 0; }
.take .progress { position: absolute; inset: 2.6rem; transform: rotate(-90deg); }
.take .progress circle { fill: none; stroke-width: 4; }
.take .progress .track-c { stroke: rgba(255,255,255,.1); }
.take .progress .fill-c { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
.take .mic-core { position: relative; width: 8.25rem; height: 8.25rem; border-radius: 50%; border: 0; background: linear-gradient(160deg, #6A36C4, #4B1F91); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 60px rgba(142,99,224,.55); transition: transform .08s linear; }
.take .mic-core svg { width: 3.25rem; height: 3.25rem; }
.take.paused .mic-core { background: #3A2A60; box-shadow: none; }
.take .mic-caption { margin-top: .4rem; color: var(--tk-muted); font-size: .9rem; min-height: 1.25rem; text-align: center; }
.take .controls { display: flex; justify-content: center; align-items: center; gap: .75rem; padding: 1rem 1.25rem 1.75rem; flex-wrap: wrap; }
.take .ctl { min-width: 7rem; height: 3.25rem; padding: 0 1.25rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 1rem var(--font); cursor: pointer; }
.take .ctl svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.take .ctl:hover { background: rgba(255,255,255,.12); }
.take .ctl:disabled { opacity: .35; cursor: default; }
.take .ctl.next { background: #fff; color: #4B1F91; border-color: #fff; min-width: 9.5rem; }
.take .ctl.next:hover { background: #EFEAF8; }
.take .ctl.finish { background: #22A06B; border-color: #22A06B; min-width: 9.5rem; }
.take .ctl.finish:hover { background: #1B8A5B; }
.take .ctl.finish.nudge { animation: nudge 1.4s ease-in-out infinite; }
.take :focus-visible { outline: 3px solid #8B6BD1; outline-offset: 3px; border-radius: 10px; }
@keyframes take-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes nudge { 50% { box-shadow: 0 0 0 8px rgba(34,160,107,.25); } }
@media (max-width: 720px) {
  .take-top { padding: .85rem 1rem; gap: .6rem; }
  .take .steps { display: none; }
  .take .cancel { margin-inline-start: auto; }
  .take .chat { padding: 0 .9rem .4rem; }
  .take .bubble { font-size: 1.3rem; }
  .take .msg.past .bubble { font-size: .9rem; }
  .take .bubble .ex { font-size: .9rem; }
  .take .mic-wrap { width: 12.5rem; height: 12.5rem; }
  .take .ring, .take .mic-core { width: 7rem; height: 7rem; }
  .take .progress { inset: 2.25rem; }
  .take .ctl { min-width: 0; flex: 1; height: 3.5rem; padding: 0 .75rem; }
  .take .ctl.next, .take .ctl.finish { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .take .ring { animation: none; opacity: .3; }
  .take .msg, .take .divider, .take .bubble { animation: none; transition: none; }
  .take .typing i, .take .live i, .take .ctl.finish.nudge { animation: none; }
}
.rec { text-align: center; padding: 1.5rem 0; }
.rec .row { justify-content: center; margin-top: .75rem; }
.rec audio { margin-top: .5rem; }
.rec .alert { text-align: start; margin-top: .75rem; }
.spinner { width: 1.4rem; height: 1.4rem; border: 3px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.htmx-request .btn-text { display: none; }
.sticky-actions { position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: .6rem 1rem; z-index: 9; }
.sticky-actions .inner { max-width: 75rem; padding-inline: 24px; margin: 0 auto; display: flex; gap: .75rem; align-items: center; }
dialog { border: 0; border-radius: var(--radius); padding: 1.25rem; max-width: 28rem; width: calc(100% - 2rem); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0,0,0,.45); }
/* ---------- Today (docs/design: today.html) ---------- */
/* Today (docs/design today.html, 2026-09 refresh): numbers across the top, the
   start banner, then the day's work in tabs beside returning patients and the
   schedule. A phone stacks it all and shows the three panels one under another. */
.td-page { max-width: 75rem; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.td-titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; position: relative; }
.td-title h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.td-title p { color: var(--muted); margin: 2px 0 0; font-size: 17px; }
.td-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.td-stat { display: flex; align-items: center; gap: 14px; padding: 18px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
a.td-stat:hover { border-color: var(--primary); color: var(--text); }
.td-stat .ic { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; }
.td-stat.green .ic { background: var(--ok-soft); color: var(--ok); }
.td-stat.amber .ic { background: var(--amber-soft); color: var(--amber); }
.td-stat.violet .ic { background: var(--primary-soft); color: var(--primary); }
.td-stat.blue .ic { background: var(--info-soft); color: var(--info); }
.td-stat .fig { display: flex; flex-direction: column; min-width: 0; }
.td-stat .fig b { font-size: 26px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.td-stat .fig b.money { font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-stat .fig > span { font-size: 14px; color: var(--muted); }
.td-stat .fig .narrow { display: none; }
.td-stat .chg { margin-inline-start: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; color: var(--muted); text-align: end; }
.td-stat .chg .delta { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--line-soft); color: var(--ink-2); }
.td-stat .chg.up .delta { background: var(--ok-soft); color: var(--ok); }
.td-stat .chg.down .delta { background: var(--danger-soft); color: var(--danger); }
.td-start { display: flex; flex-direction: column; gap: 10px; }
.td-start-btn { width: 100%; min-height: 148px; padding: 24px 32px; border: 0; border-radius: 22px; background: linear-gradient(100deg, #4B1F91 0%, #6D3BD4 55%, #7C3AED 100%); color: #fff; display: flex; align-items: center; gap: 28px; text-align: start; font: inherit; cursor: pointer; box-shadow: 0 10px 28px rgba(75, 31, 145, .28); }
.td-start-btn:hover { filter: brightness(1.06); }
.td-start-btn .mic { width: 96px; height: 96px; flex-shrink: 0; border-radius: 50%; background: #fff; color: #4B1F91; display: grid; place-items: center; box-shadow: 0 0 0 14px rgba(255, 255, 255, .12); }
.td-start-btn .copy { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.td-start-btn .copy strong { font-size: 28px; font-weight: 700; }
.td-start-btn .copy span { color: #EDE4FF; font-size: 17px; max-width: 34rem; }
.td-start-btn .go { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
.td-mic-status { display: flex; align-items: center; gap: 8px; padding-inline-start: 4px; font-size: 13px; color: var(--muted); }
.td-mic-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; flex-shrink: 0; }
.td-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.td-work { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; overflow: hidden; }
.td-tabs { display: flex; gap: 8px; padding: 12px 18px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.td-tabs button { font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-2); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px 12px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; border-radius: 10px 10px 0 0; }
.td-tabs button[aria-selected="true"] { color: var(--primary); font-weight: 600; background: var(--primary-soft); border-bottom-color: var(--primary); }
.td-tabs .count { font-size: 12px; font-weight: 700; min-width: 22px; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; text-align: center; }
.td-work .td-card { border: 0; border-radius: 0; box-shadow: none; }
.td-work .td-card .head { display: none; }
.td-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 40px 20px 36px; color: var(--primary); }
.td-empty p { margin: 0; color: var(--muted); max-width: 30rem; }
.td-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.td-card .head { padding: 16px 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.td-card .head h2 { font-size: 17px; font-weight: 600; margin: 0; }
.td-card .head .note { margin-inline-start: auto; font-size: 13px; color: #6B5A3A; }
.td-card .head .hic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.td-card .head .hic.green { background: var(--ok-soft); color: var(--ok); }
.td-card .head .hic.amber { background: var(--amber-soft); color: var(--amber); }
.td-card .empty { padding: 16px 20px; margin: 0; color: var(--muted); font-size: 14px; }
.td-card .count { font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.td-card .count.amber { background: var(--amber-soft); color: var(--amber); }
.td-card .count.green { background: var(--ok-soft); color: var(--ok); }
.td-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 20px; color: var(--text); text-decoration: none; }
.td-row + .td-row { border-top: 1px solid var(--line-soft); }
.td-row:hover { background: var(--bg); color: var(--text); }
.td-row time { font-size: 16px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.td-row .who-line { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.td-row .name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-row .meta { font-size: 13px; color: var(--muted); }
.td-row .meta.warn { color: var(--amber); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.td-row .chev { color: #8A849C; display: none; }
.td-row.done { grid-template-columns: 72px minmax(0, 1fr) auto auto; }
.td-row.done .chev { display: block; }
.td-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px; font-weight: 600; font-size: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--primary); cursor: pointer; font-family: inherit; text-decoration: none; }
.td-btn.small { min-height: 36px; padding: 0 14px; border-radius: 999px; }
.td-row:hover .td-btn { border-color: var(--primary); }
.td-btn:hover { border-color: var(--primary); color: var(--primary); }
.td-btn.primary { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.td-acts { display: flex; align-items: center; gap: 8px; }
.td-acts form, .td-pending-acts form { margin: 0; }
.td-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.td-pill.green { background: var(--ok-soft); color: var(--ok); }
.td-pill.amber { background: var(--amber-soft); color: var(--amber); }
.td-pill.grey { background: var(--line-soft); color: var(--muted); }
.td-bill { display: flex; justify-content: flex-end; padding: 0 14px 10px; margin-block-start: -4px; }
.td-branch { padding: 10px 20px 2px; font-size: 13px; border-top: 1px solid var(--line-soft); }
.td-card .more { display: block; padding: 12px 20px; border-top: 1px solid var(--line-soft); font-size: 14px; font-weight: 600; }
.td-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.td-side h2 { font-size: 18px; font-weight: 600; color: var(--text); margin: 0; }
.td-card .returning-head { padding: 18px 20px 8px; }
.td-card .returning-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.td-card .row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.td-card .row-head a { font-size: 14px; font-weight: 600; }
.td-card .person { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
.td-card .person + .person { border-top: 1px solid var(--line-soft); }
.td-card .person:last-child { padding-bottom: 16px; }
.td-card .person .initial { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--bg); color: var(--ink-2); display: grid; place-items: center; font-weight: 700; }
.td-card .person .who-line { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-card .person .name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-card .person .meta { font-size: 12px; color: var(--muted); }
.td-card .person form { margin: 0; }
.round-btn { width: 44px; height: 44px; flex-shrink: 0; padding: 0; border-radius: 50%; border: 1px solid #D6D1E2; background: var(--surface); color: var(--primary); display: grid; place-items: center; cursor: pointer; font: inherit; }
.round-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.td-card .person.sched time { width: 5rem; flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* The manager's Today (today_clinic.dtl): the cards, then one row per doctor
   and branch with a totals row. A phone turns each row into a small card. */
.tc-cal { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); }
.td-stat .fig b.tc-link { font-size: 22px; color: var(--primary); white-space: nowrap; }
.td-stat .tc-chev { margin-inline-start: auto; color: var(--muted); flex-shrink: 0; }
[dir="rtl"] .td-stat .tc-chev, [dir="rtl"] .tc-table .chev { transform: scaleX(-1); }
.tc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.tc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.tc-head h2 { font-size: 20px; font-weight: 700; margin: 0; }
.tc-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.tc-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-tools select { width: auto; min-width: 11rem; }
.tc-tools .btn { display: inline-flex; align-items: center; gap: 8px; }
.tc-card .empty { margin: 0 0 8px; color: var(--muted); }
.tc-wrap { border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.tc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tc-table th, .tc-table td { padding: 12px 14px; text-align: start; vertical-align: middle; white-space: nowrap; }
.tc-table thead th { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--line); }
.tc-table tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.tc-table tbody tr.busy td { background: var(--primary-soft); }
.tc-table .num { font-variant-numeric: tabular-nums; }
.tc-table .pill { font-size: 13px; min-width: 2.2rem; text-align: center; }
.tc-table .c-n { width: 2.5rem; color: var(--ink-2); }
.tc-table .c-doc .who { display: flex; align-items: center; gap: 12px; }
.tc-table .c-doc a { font-weight: 500; text-decoration: none; }
.tc-table .c-br { color: var(--ink-2); }
.tc-table .c-act { text-align: end; }
.tc-table .btn.soft { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.tc-table tfoot td, .tc-table tfoot th { font-weight: 700; background: var(--bg); border-top: 1px solid var(--line); }
.tc-table tfoot .c-br { color: var(--text); }
@media (max-width: 860px) {
  .tc-card { padding: 14px; }
  .tc-head { margin-bottom: 12px; }
  .tc-tools { width: 100%; }
  .tc-tools select, .tc-tools .combo { flex: 1; min-width: 0; }
  .tc-wrap { border: 0; overflow: visible; }
  .tc-table thead { display: none; }
  .tc-table, .tc-table tbody, .tc-table tfoot { display: block; }
  .tc-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
  .tc-table tbody tr + tr td { border-top: 0; }
  .tc-table tbody tr.busy { background: var(--primary-soft); border-color: transparent; }
  .tc-table tbody tr.busy td, .tc-table tfoot td, .tc-table tfoot th { background: none; border: 0; }
  .tc-table tfoot tr { background: var(--bg); }
  .tc-table th, .tc-table td { padding: 0; white-space: normal; }
  .tc-table .c-n { display: none; }
  .tc-table .c-doc { grid-column: 1 / 4; }
  .tc-table .c-act { grid-column: 4; grid-row: 1; }
  .tc-table .c-br { grid-column: 1 / -1; font-size: 13px; }
  .tc-table tfoot .c-doc, .tc-table tfoot .c-act { display: none; }
  .tc-table td.num { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 600; }
  .tc-table td.num::before { content: attr(data-label); font-size: 11px; font-weight: 500; color: var(--muted); }
  .tc-table td.num.money { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line-soft); padding-top: 8px; }
  .tc-table tbody tr.busy td.num.money { border-top: 1px solid var(--line); }
  .tc-table .pill { align-self: flex-start; }
}
@media (max-width: 1100px) {
  .td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 860px) {
  .td-page { gap: 14px; }
  .td-title h1 { font-size: 28px; }
  .td-title p { font-size: 15px; }
  .td-stats { gap: 10px; }
  .td-stat { padding: 12px; gap: 10px; box-shadow: none; }
  .td-stat.green { background: var(--ok-soft); border-color: transparent; }
  .td-stat.amber { background: var(--amber-tint); border-color: var(--amber-line); }
  .td-stat.violet { background: var(--primary-soft); border-color: transparent; }
  .td-stat.blue { background: var(--info-soft); border-color: transparent; }
  .td-stat .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--surface) !important; }
  .td-stat .ic svg { width: 18px; height: 18px; }
  .td-stat .fig b { font-size: 20px; }
  .td-stat .fig b.money { font-size: 17px; }
  .td-stat .fig > span { font-size: 12px; }
  .td-stat .fig .wide, .td-stat .chg { display: none; }
  .td-stat .fig .narrow { display: inline; }
  .td-start-btn { min-height: 0; padding: 18px; gap: 14px; border-radius: 18px; align-items: flex-start; }
  .td-start-btn .mic { width: 56px; height: 56px; box-shadow: 0 0 0 8px rgba(255, 255, 255, .12); }
  .td-start-btn .mic svg { width: 24px; height: 24px; }
  .td-start-btn .copy strong { font-size: 20px; }
  .td-start-btn .copy span { font-size: 14px; }
  .td-start-btn .go { width: 32px; height: 32px; }
  .td-start-btn .go svg { width: 16px; height: 16px; }
  .td-grid { grid-template-columns: 1fr; gap: 14px; }
  /* No tabs on a phone: the three panels stack as their own cards. */
  .td-work { background: none; border: 0; box-shadow: none; overflow: visible; display: flex; flex-direction: column; gap: 12px; }
  .td-tabs { display: none; }
  .td-panel { display: block !important; }
  .td-work .td-card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .td-work .td-card .head { display: flex; border-bottom: 0; padding: 14px 16px; }
  .td-work .td-card .head:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
  .td-card .head h2 { font-size: 16px; }
  .td-card .head .note { display: none; }
  .td-empty { padding: 4px 16px 16px; align-items: flex-start; text-align: start; }
  .td-empty svg, .td-empty .btn { display: none; }
  .td-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; }
  .td-row time { font-size: 15px; }
  .td-row .td-btn { display: none; }
  .td-row .chev { display: block; }
  .td-row.done { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .td-row.done .td-pill.green { display: none; }
}


/* Locations and schedule. Each location owns a palette slot (locations.colour,
   0..5) used for its swatch in lists and its blocks on the grid. */
.swatch { display: inline-block; width: .9rem; height: .9rem; border-radius: 4px; flex-shrink: 0; background: var(--loc-bg); border: 1px solid var(--loc-line); }
.loc-0 { --loc-bg: #EFEAF8; --loc-line: #4B1F91; --loc-ink: #2E1466; }
.loc-1 { --loc-bg: #DCFCE7; --loc-line: #166534; --loc-ink: #14532D; }
.loc-2 { --loc-bg: #FEF3C7; --loc-line: #92400E; --loc-ink: #78350F; }
.loc-3 { --loc-bg: #DBEAFE; --loc-line: #1D4ED8; --loc-ink: #1E3A8A; }
.loc-4 { --loc-bg: #FCE7F3; --loc-line: #BE185D; --loc-ink: #9D174D; }
.loc-5 { --loc-bg: #E0F2FE; --loc-line: #0369A1; --loc-ink: #0C4A6E; }
@media (prefers-color-scheme: dark) {
  .loc-0 { --loc-bg: #2e1065; --loc-line: #a78bfa; --loc-ink: #e9d5ff; }
  .loc-1 { --loc-bg: #14532d; --loc-line: #4ade80; --loc-ink: #dcfce7; }
  .loc-2 { --loc-bg: #3d2a05; --loc-line: #fdb022; --loc-ink: #fef3c7; }
  .loc-3 { --loc-bg: #1e3a8a; --loc-line: #93c5fd; --loc-ink: #dbeafe; }
  .loc-4 { --loc-bg: #831843; --loc-line: #f9a8d4; --loc-ink: #fce7f3; }
  .loc-5 { --loc-bg: #0c4a6e; --loc-line: #7dd3fc; --loc-ink: #e0f2fe; }
}
.locations li.retired .main { opacity: .6; }
.locations .main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sched .list .main, .team .list .main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.team .list .main > strong { display: inline; }
/* Every bordered group of fields: a light, rounded box (as the rate plan
   boxes), never the browser's square grooved default. Groups meant to have no
   border say so with their own rule, which wins over this one. */
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; margin: 0; min-inline-size: 0; }
fieldset.weekdays, fieldset.modes { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .8rem .7rem; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
fieldset legend { font-size: .875rem; color: var(--muted); padding: 0 .3rem; }
fieldset.modes { flex-direction: column; gap: .35rem; }
label.chk { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--text); font-size: 1rem; cursor: pointer; }
label.chk input { width: 1.1rem; height: 1.1rem; margin: 0; padding: 0; accent-color: var(--primary); }

/* Week grid: a time axis and seven day columns; blocks are absolutely
   positioned by minute within the column. On phones the columns stack and
   the blocks become a plain list, so nothing is too small to tap. */
.sched-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sched-nav { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .75rem 0; }
.sched-nav strong { font-size: 1.05rem; }
.sched-nav .legend { display: flex; gap: .9rem; flex-wrap: wrap; margin-inline-start: auto; font-size: .85rem; color: var(--muted); }
.sched-nav .legend span { display: inline-flex; align-items: center; gap: .35rem; }
.sched-actions { margin-bottom: .75rem; }
.sched-grid { display: grid; grid-template-columns: 3.2rem repeat(7, minmax(0, 1fr)); gap: 2px; --col-h: 40rem; }
.sched-grid .head { text-align: center; font-size: .8rem; color: var(--muted); padding: .3rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sched-grid .head b { display: block; font-size: 1.05rem; color: var(--text); }
.sched-day.today .head b { color: var(--primary); }
.sched-grid .col { position: relative; height: var(--col-h); background: var(--bg); border-radius: 8px; }
.sched-day.today .col { box-shadow: inset 0 0 0 2px var(--primary-soft); }
.sched-times .col { background: none; }
.sched-times .col span { position: absolute; inset-inline-end: .3rem; transform: translateY(-50%); font-size: .7rem; color: var(--muted); white-space: nowrap; }
.sched-times .col span:first-child { transform: none; }
.sched-grid .block { position: absolute; inset-inline-start: 2px; inset-inline-end: 2px; overflow: hidden; border-radius: 6px; padding: .25rem .35rem; font-size: .72rem; line-height: 1.25; background: var(--loc-bg); border-inline-start: 3px solid var(--loc-line); color: var(--loc-ink); }
.sched-grid .block .fill { position: absolute; inset: 0; }
.sched-grid .block span { display: block; pointer-events: none; }
.sched-grid .block .t { font-weight: 700; }
.sched-grid .block .m, .sched-grid .block .tag { opacity: .8; }
.sched-grid .block.extra, .sched-grid .block.modified { border: 1px dashed var(--loc-line); border-inline-start-width: 3px; }
.sched-grid .block.cancelled { background: var(--surface); border-inline-start-style: dotted; color: var(--muted); }
.sched-grid .block.cancelled .t, .sched-grid .block.cancelled .l { text-decoration: line-through; }
.sched-grid .none { position: absolute; top: 50%; inset-inline-start: 0; inset-inline-end: 0; text-align: center; color: var(--line); }
@media (max-width: 720px) {
  .sched-grid { grid-template-columns: 1fr; gap: .5rem; }
  .sched-times { display: none; }
  .sched-day { display: grid; grid-template-columns: 4rem 1fr; gap: .5rem; align-items: start; }
  .sched-grid .head { text-align: start; border: 0; padding: .35rem 0; }
  .sched-grid .col { height: auto; min-height: 2.4rem; display: flex; flex-direction: column; gap: .35rem; padding: .35rem; }
  .sched-grid .block { position: static; font-size: .85rem; padding: .45rem .6rem; }
  .sched-grid .block span { display: inline; }
  .sched-grid .block .t::after, .sched-grid .block .l::after { content: " · "; }
  .sched-grid .block .tag::before { content: " · "; }
  .sched-grid .none { position: static; text-align: start; padding: .4rem .2rem; }
  .sched-nav .legend { margin-inline-start: 0; width: 100%; }
}

/* Public availability page: read on a phone, often on the way to the clinic. */
.pub-head h1 { font-size: 1.5rem; margin: 0; }
.pub h2 { font-size: 1rem; color: var(--ink-2); margin: 1.25rem 0 .5rem; }
.pub-days { list-style: none; margin: 0; padding: 0; }
.pub-days li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--line-soft); }
.pub-days li:first-child { border-top: 0; }
.pub-days .d { display: flex; flex-direction: column; }
.pub-days .s { display: flex; flex-direction: column; gap: .4rem; }
.pub-item { display: flex; flex-direction: column; padding: .5rem .7rem; border-radius: 8px; background: var(--loc-bg); border-inline-start: 3px solid var(--loc-line); color: var(--loc-ink); }
.pub-item .when { font-weight: 700; font-variant-numeric: tabular-nums; }
.pub-item.off { background: var(--surface); border-inline-start-style: dotted; color: var(--muted); }
.pub-item.off .when, .pub-item.off .where { text-decoration: line-through; }
.pub-item .tag { font-size: .85rem; font-weight: 600; color: var(--danger); }
.pub-item .tag.live { color: var(--ok); }
.pub-locs { list-style: none; margin: 0; padding: 0; }
.pub-locs li { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--line-soft); }
.pub-locs li:first-child { border-top: 0; }
.pub-locs .swatch { margin-top: .3rem; }

/* The doctor's public page (public_doctor.dtl): who and where, the session
   now, the week, the branches, the reps' time. */
.dr-eyebrow { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 .4rem; }
.dr-hero { display: grid; grid-template-columns: 1fr minmax(0, 34rem); gap: 2rem; align-items: center; margin-bottom: 2.5rem; }
.dr-intro h1 { font-size: 2.6rem; line-height: 1.1; margin: 0 0 .5rem; letter-spacing: -.02em; }
.dr-sub { font-size: 1.15rem; color: var(--ink-2); margin: 0 0 .75rem; }
.dr-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.dr-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.dr-today { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.dr svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dr-chip svg { color: var(--primary); }
.dr-today-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.dr-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--primary-soft); color: var(--primary); white-space: nowrap; }
.dr-pill.open { background: var(--ok-soft); color: var(--ok); }
.dr-pill.open::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ok); }
.dr-pill.off { background: var(--line-soft); color: var(--muted); }
.dr-time { font-size: 1.9rem; font-weight: 700; margin: 0 0 .25rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dr-loc { font-weight: 600; margin: 0 0 .2rem; display: flex; align-items: center; gap: .5rem; }
.dr-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--loc-line); flex-shrink: 0; margin-inline-end: .45rem; vertical-align: middle; }
.dr-loc .dr-dot, .dr-place h3 .dr-dot { margin-inline-end: 0; }
.dr-how { display: flex; gap: .6rem; align-items: flex-start; background: var(--primary-soft); border-radius: 12px; padding: .8rem 1rem; margin: 1rem 0 0; font-size: .95rem; color: var(--ink-2); }
.dr-how svg { flex-shrink: 0; margin-top: .15rem; }
.dr-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.dr-today .dr-actions .btn { flex: 1 1 7rem; }
.dr-today .dr-actions .btn.primary { flex-basis: 100%; }
.dr-sec { margin-bottom: 2.5rem; }
.dr-sec h2, .dr-reps h2 { font-size: 1.35rem; margin: 0 0 1rem; }
.dr-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.dr-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .85rem; font-weight: 500; color: var(--ink-2); margin-bottom: 1rem; }
.dr-week { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dr-row { display: grid; grid-template-columns: 9rem 1.2fr 1fr 1.4fr; gap: 1rem; align-items: center; padding: .9rem 1.25rem; border-top: 1px solid var(--line-soft); }
.dr-row:first-child { border-top: 0; }
.dr-row.now { background: var(--primary-soft); box-shadow: inset 4px 0 0 var(--primary); }
.dr-row.off .dr-when, .dr-row.off .dr-where { text-decoration: line-through; color: var(--muted); }
.dr-day { display: flex; flex-direction: column; }
.dr-note.span { grid-column: 2 / -1; }
.dr-rel { font-size: .8rem; color: var(--muted); }
.dr-rel.today { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.dr-when { font-weight: 600; font-variant-numeric: tabular-nums; }
.dr-where { font-weight: 500; }
.dr-closed { color: var(--danger); font-weight: 600; }
.dr-live { color: var(--ok); font-weight: 600; }
.dr-live .dr-dot { background: var(--ok); width: .5rem; height: .5rem; }
.dr-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.dr-place { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; }
.dr-place h3 { font-size: 1.1rem; margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem; }
.dr-place p { margin: 0 0 .25rem; }
.dr-hours { margin: .75rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.dr-hours div { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.dr-hours dt, .dr-hours dd { margin: 0; }
.dr-hours dd { font-variant-numeric: tabular-nums; font-weight: 500; }
.dr-place .dr-actions { display: grid; grid-template-columns: 1fr 1fr; }
.dr-reps { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; }
.dr-reps h2 { font-size: 1.05rem; margin: 0 0 .3rem; }
.dr-reps p { margin: 0; }
.dr-reps .dr-actions { margin-top: 0; align-items: center; }
.dr-link { color: var(--primary); font-weight: 600; }
.dr-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .dr-hero { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2rem; }
  .dr-intro h1 { font-size: 2.1rem; }
  .dr-time { font-size: 1.6rem; }
  .dr-row { grid-template-columns: 1fr; gap: .25rem; padding: .9rem 1rem; }
  .dr-note.span { grid-column: auto; }
  .dr-day { flex-direction: row; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
  .dr-place .dr-actions { grid-template-columns: 1fr 1fr; }
  .dr-foot { flex-direction: column; }
}
@media (max-width: 480px) { .pub-days li { grid-template-columns: 1fr; gap: .3rem; } .pub-days .d { flex-direction: row; gap: .5rem; align-items: baseline; } }

/* Landing page. Always light, its own type pairing, every rule scoped under .landing
   so it cannot collide with the app's .btn / .row / .mic. */
body:has(.landing) { background: #fff; color: #1E1238; color-scheme: light; }
body:has(.landing) .topbar { background: #fff; border-color: #DCD5EE; }
body:has(.landing) .brand, body:has(.landing) .topbar nav a { color: #1E1238; }
body:has(.landing) .brand .dot { background: #46218C; }
body:has(.landing) main { max-width: none; padding: 0; }
.landing {
  --violet: #46218C; --violet-deep: #2E1466; --ink: #1E1238; --ink-soft: #564A6E; --wash: #F1EEFB;
  --line: #DCD5EE; --paper: #FFFFFF; --flag: #F5B82E; --flag-bg: #FFF4D6; --flag-ink: #6B4800; --ok: #2F8F47;
  --display: "Anek Latin", "Hind", system-ui, sans-serif; --body: "Hind", system-ui, sans-serif; --measure: 36rem;
  color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; -webkit-text-size-adjust: 100%;
}
.landing a { color: inherit; }
.landing :focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
.landing .wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }
/* Buttons */
.landing .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 1rem/1 var(--body); padding: .95rem 1.4rem; border-radius: 999px; border: 2px solid var(--violet); text-decoration: none; cursor: pointer; min-height: 0; box-shadow: none; }
.landing .btn-primary { background: var(--violet); color: #fff; }
.landing .btn-primary:hover { background: var(--violet-deep); border-color: var(--violet-deep); }
.landing .btn-quiet { background: transparent; color: var(--violet); }
.landing .btn-quiet:hover { background: var(--wash); }
/* Hero */
.landing .hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: center; padding: 2.5rem 0 5rem; }
.landing h1 { font-family: var(--display); font-weight: 750; font-stretch: 82%; font-size: clamp(3rem, 7vw, 5.4rem); line-height: .95; letter-spacing: -.01em; margin: 0 0 1.5rem; }
.landing h1 span { display: block; color: var(--violet); }
.landing .lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 30rem; margin: 0 0 2rem; }
.landing .actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.landing .fine { margin-top: 1.25rem; font-size: .95rem; color: var(--ink-soft); }
/* The partner programme's hook under the hero's buttons: a question that
   stands out from the actions without competing with Join the waitlist. */
.landing .partner-cta { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; padding: .6rem 1rem .6rem .8rem; border-radius: 999px; border: 1.5px solid var(--violet); background: linear-gradient(90deg, var(--wash), #fff); color: var(--ink); text-decoration: none; font-size: .95rem; line-height: 1.3; transition: transform .15s ease, box-shadow .15s ease; }
.landing .partner-cta strong { color: var(--violet); }
.landing .partner-cta-spark { color: var(--violet); font-size: 1.1rem; }
.landing .partner-cta-arrow { color: var(--violet); font-weight: 700; transition: transform .15s ease; }
.landing .partner-cta:hover, .landing .partner-cta:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(75,31,145,.18); }
.landing .partner-cta:hover .partner-cta-arrow { transform: translateX(3px); }
@media (max-width: 40rem) { .landing .partner-cta-tail { display: none; } }
/* Consultation demo */
.landing .demo { background: var(--wash); border-radius: 1.75rem; padding: 1.25rem; }
.landing .speech { display: flex; gap: 1rem; align-items: flex-start; padding: .5rem .5rem 1.25rem; }
.landing .mic { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--violet); display: grid; place-items: center; position: relative; }
.landing .mic.listening::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--violet); opacity: .35; animation: landing-ring 1.6s ease-out infinite; }
@keyframes landing-ring { from { transform: scale(.9); opacity: .5; } to { transform: scale(1.25); opacity: 0; } }
.landing .transcript { font-size: 1.05rem; line-height: 1.55; min-height: 7.8em; margin: 0; color: var(--ink); max-width: none; }
.landing .transcript .said { background: #fff; box-shadow: 0 2px 0 var(--violet); border-radius: 3px; padding: 0 .15em; }
.landing .caption { display: block; font-size: .85rem; color: var(--ink-soft); margin-bottom: .25rem; }
.landing .sheet { background: var(--paper); border-radius: 1.1rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); }
.landing .sheet-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: .75rem; margin-bottom: .5rem; }
.landing .sheet-head strong { font-family: var(--display); font-size: 1.15rem; font-stretch: 90%; }
.landing .sheet-head small { color: var(--ink-soft); }
.landing .row { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .45rem .5rem; border-radius: .5rem; transition: background-color .4s; align-items: start; }
.landing .row dt { color: var(--ink-soft); font-size: .92rem; padding-top: .1rem; }
.landing .row dd { margin: 0; font-weight: 500; min-height: 1.6em; }
.landing .row dd:empty::before { content: ""; display: block; height: .7em; margin-top: .45em; width: 60%; background: var(--wash); border-radius: 4px; }
.landing .row.just-filled { background: var(--wash); }
.landing .code { font-weight: 400; color: var(--ink-soft); }
.landing .row.flagged { background: var(--flag-bg); box-shadow: inset 4px 0 0 var(--flag); }
.landing .flag-note { display: block; font-size: .88rem; font-weight: 500; color: var(--flag-ink); }
.landing .sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line); margin-top: .5rem; padding-top: 1rem; }
.landing .replay { background: none; border: 0; color: var(--violet); font: 500 .95rem var(--body); cursor: pointer; padding: .4rem .2rem; text-decoration: underline; text-underline-offset: 3px; }
.landing .confirm { opacity: .45; pointer-events: none; transition: opacity .4s; padding: .75rem 1.2rem; }
.landing .confirm.ready { opacity: 1; pointer-events: auto; }
/* Sections */
.landing section { padding: 5rem 0; }
.landing h2 { font-family: var(--display); font-weight: 700; font-stretch: 85%; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.05; margin: 0 0 1rem; max-width: 20ch; display: block; }
.landing h3 { font-family: var(--display); font-weight: 650; font-size: 1.4rem; font-stretch: 92%; margin: 0 0 .5rem; }
.landing p { max-width: var(--measure); }
.landing .intro { color: var(--ink-soft); }
.landing .flow { border-top: 1px solid var(--line); }
.landing .steps { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: step; position: relative; }
.landing .steps li { counter-increment: step; position: relative; padding-top: 4rem; }
.landing .steps li::before { content: counter(step); position: absolute; top: 0; inset-inline-start: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; font: 700 1.2rem var(--display); background: var(--paper); color: var(--violet); border: 2px solid var(--violet); z-index: 1; }
.landing .steps li:last-child::before { background: var(--violet); color: #fff; }
.landing .steps::before { content: ""; position: absolute; top: 1.375rem; inset-inline-start: 1.4rem; inset-inline-end: 30%; height: 2px; background: var(--line); }
.landing .steps p { color: var(--ink-soft); margin: 0; }
/* Full-bleed violet band inside a centred main: paint the background out to the viewport edges. */
.landing .modules { background: var(--violet); color: #fff; box-shadow: 0 0 0 100vmax var(--violet); clip-path: inset(0 -100vmax); }
.landing .modules h2 { color: #fff; }
.landing .modules .intro { color: #DCD2F3; }
.landing .module-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0; margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.25); }
.landing .module { padding: 2rem 2rem 0 0; }
.landing .module + .module { padding-inline-start: 2rem; border-inline-start: 1px solid rgba(255,255,255,.25); }
.landing .module p { color: #E6DEF7; margin: 0; }
.landing .module:first-child h3 { font-size: 1.75rem; }
.landing .trust-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; }
.landing .trust-grid > div:first-child { position: sticky; top: 5rem; }
.landing .promises { margin: 0; padding: 0; list-style: none; }
.landing .promises li { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.landing .promises li:first-child { padding-top: 0; }
.landing .promises strong { display: block; font-family: var(--display); font-size: 1.45rem; font-stretch: 90%; font-weight: 650; margin-bottom: .25rem; }
.landing .promises span { color: var(--ink-soft); }
.landing .promises .example { display: inline-block; margin-top: .6rem; padding: .3rem .7rem; border-radius: .4rem; background: var(--flag-bg); box-shadow: inset 3px 0 0 var(--flag); color: var(--flag-ink); font-size: .92rem; font-weight: 500; }
.landing .who { background: var(--wash); border-radius: 1.75rem; padding: 3rem; display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(0, 1.3fr); gap: 2rem; align-items: center; }
.landing .who h2 { margin: 0; }
.landing .who ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.landing .who li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1.1rem; font-weight: 500; }
.landing .join-box { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; border-top: 3px solid var(--violet); padding-top: 3rem; }
.landing .join h2 { font-size: clamp(2.3rem, 5vw, 3.6rem); max-width: 16ch; margin: 0; }
.landing .waitlist label { display: block; font-weight: 600; margin-bottom: .5rem; color: var(--ink); font-size: inherit; }
.landing .fields { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; margin-bottom: 1rem; }
.landing .fields .wide { grid-column: 1 / -1; }
.landing .fields .opt { font-weight: 400; color: var(--ink-soft); font-size: .85em; }
.landing .waitlist input, .landing .waitlist select { width: 100%; font: 1rem var(--body); padding: .75rem 1rem; border-radius: 12px; border: 2px solid var(--line); color: var(--ink); background: #fff; }
.landing .waitlist input:focus, .landing .waitlist select:focus { border-color: var(--violet); outline: none; box-shadow: 0 0 0 3px var(--wash); }
/* Country and state combos: search box + customizable select in one bordered control. The
   select's picker (appearance: base-select) is the dropdown; the browser anchors it to
   the select itself (see the language picker above — a named anchor is not honoured
   everywhere). Browsers without base-select show the native select. */
.landing .combo { display: flex; align-items: stretch; border: 2px solid var(--line); border-radius: 12px; background: #fff; }
.landing .combo:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px var(--wash); }
.landing .combo input, .landing .combo select { border: 0; border-radius: 0; box-shadow: none; }
.landing .combo input { flex: 1 1 8rem; min-width: 0; border-radius: 12px 0 0 12px; }
.landing .combo input:focus, .landing .combo select:focus { box-shadow: none; outline: none; }
.landing .combo select { flex: 0 0 auto; width: auto; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-inline-start: 2px solid var(--line); border-radius: 0 12px 12px 0; color: var(--ink-soft); }
.landing .combo.chosen select { color: var(--violet); font-weight: 600; background: var(--wash); }
.landing .combo select, .landing .combo select::picker(select) { appearance: base-select; }
.landing .combo select::picker(select) { min-width: anchor-size(width); margin: .35rem 0 0; border: 2px solid var(--violet); border-radius: 12px; padding: .3rem; max-height: 16rem; box-shadow: 0 12px 32px rgba(46,20,102,.18); }
.landing .combo select option { padding: .5rem .8rem; border-radius: 8px; }
.landing .combo select option:checked { background: var(--wash); color: var(--violet); font-weight: 600; }
.landing .combo select option:hover, .landing .combo select option:focus-visible { background: var(--wash); }
.landing .combo select::picker-icon { color: var(--violet); }
.landing .field { display: flex; gap: .5rem; flex-wrap: wrap; }
.landing .field .btn { min-width: 12rem; }
.landing .waitlist p { font-size: .95rem; color: var(--ink-soft); margin: .75rem 0 0; }
/* Clinic or pharmacy: two big choices above the waitlist fields. */
.landing .waitlist .wl-product { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.landing .waitlist .wl-product legend { font-weight: 600; margin-block-end: .5rem; color: var(--ink); }
.landing .waitlist .wl-pick { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .6rem 1rem; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff; }
.landing .waitlist .wl-pick.is-on { border-color: var(--violet); box-shadow: 0 0 0 3px var(--wash); }
.landing .waitlist .wl-pick input { width: auto; }
.landing #waitlist-result { margin-top: .75rem; }
.landing #waitlist-result .alert { margin: 0; }
.landing footer { padding: 2.5rem 0 3rem; color: var(--ink-soft); font-size: .95rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
/* Three controls plus the search do not fit a narrow laptop. The branch
   keeps its pin — still a full, working select — and drops its name rather
   than truncating it to a letter; the form's title says what it is. */
@media (max-width: 1200px) {
  .topbar .inner { gap: 12px; padding: 0 20px; }
  .topbar .nav a, .topbar .nav button { padding: 10px; }
  .search-wrap { min-width: 8rem; }
  .who-text strong, .who-text small { max-width: 8rem; }
  .branch-chip select { width: auto; padding: 0 10px; }
  .branch-chip select selectedcontent { display: none; }
  .lang-pick select > button svg { display: none; }
}

/* The two products under the hero, and "book and order online" (home). */
.landing .products { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-block: -2rem 3rem; }
.landing .product { display: grid; gap: .4rem; padding: 1.4rem 1.6rem; border: 2px solid var(--line); border-radius: 1.25rem; text-decoration: none; background: #fff; transition: border-color .2s, transform .2s; }
.landing .product:hover { border-color: var(--violet); transform: translateY(-2px); }
.landing .product strong { font-family: var(--display); font-size: 1.35rem; font-stretch: 90%; font-weight: 650; line-height: 1.2; }
.landing .product-tag { justify-self: start; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--violet); background: var(--wash); border-radius: 999px; padding: .2rem .7rem; }
.landing .product.is-pharmacy .product-tag { color: #0E6B5C; background: #E3F5F0; }
.landing .product-more { color: var(--violet); font-weight: 600; }
.landing .online { border-top: 1px solid var(--line); }
.landing .online-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.landing .online-card { background: var(--wash); border-radius: 1.5rem; padding: 1.75rem; display: grid; gap: .6rem; align-content: start; }
.landing .online-card ul { margin: 0; padding-inline-start: 1.2rem; color: var(--ink-soft); display: grid; gap: .35rem; }
.landing .online-card .btn { justify-self: start; margin-top: .5rem; }
.landing .partners { border-top: 1px solid var(--line); }
.landing .partners .product-tag { display: inline-block; margin-bottom: .75rem; }
.landing .partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-block: 2.5rem 1.5rem; }
.landing .partner-grid h3, .landing .partner-grid p { margin: 0; }
.landing .partner-grid p { color: var(--ink-soft); }
.landing .who li a { text-decoration: none; }
/* The pharmacy page. */
.landing .eyebrow { margin: 0 0 .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; color: #0E6B5C; }
.landing-pharmacy h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.landing .counter-demo .scanbox { display: flex; align-items: center; gap: .6rem; background: #fff; border: 2px solid var(--violet); border-radius: 12px; padding: .75rem 1rem; margin-bottom: 1rem; font: 500 1.1rem var(--body); color: var(--violet); min-height: 3.2rem; }
.landing .scan-text { color: var(--ink); }
.landing .scan-caret { inline-size: 2px; block-size: 1.2em; background: var(--violet); animation: landing-caret 1s steps(1) infinite; }
@keyframes landing-caret { 50% { opacity: 0; } }
.landing .sale-lines { list-style: none; margin: 0; padding: 0; min-height: 11.5rem; }
.landing .sale-lines li { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: .6rem .5rem; border-bottom: 1px solid var(--line); border-radius: .5rem; transition: background-color .4s; }
.landing .sale-lines li.just-filled { background: var(--wash); }
.landing .sale-lines .l-name { font-weight: 600; }
.landing .sale-lines .l-amt { font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }
.landing .sale-lines .l-meta { grid-column: 1 / -1; font-size: .88rem; color: var(--ink-soft); }
.landing .sale-lines .l-pill { display: inline-block; margin-inline-start: .4rem; padding: 0 .45rem; border-radius: 999px; background: var(--flag-bg); color: var(--flag-ink); font-size: .78rem; font-weight: 600; }
.landing .sale-total { margin-inline-start: auto; font-size: 1.05rem; }
.landing .sale-total strong { font-family: var(--display); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.landing .sale-done { margin: .75rem 0 0; padding: .5rem .75rem; border-radius: .6rem; background: #E3F5F0; color: #0E6B5C; font-weight: 500; font-size: .95rem; max-width: none; }
.landing .module-grid.six { grid-template-columns: repeat(3, 1fr); }
.landing .module-grid.six .module { padding: 2rem 2rem 2rem 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.landing .module-grid.six .module:nth-child(3n+2), .landing .module-grid.six .module:nth-child(3n) { padding-inline-start: 2rem; border-inline-start: 1px solid rgba(255,255,255,.25); }
.landing .module-grid.six .module:nth-child(3n+1) { padding-inline-start: 0; border-inline-start: 0; }
.landing .module-grid.six .module:first-child h3 { font-size: 1.4rem; }
.landing .online-band { border-top: 1px solid var(--line); }
.landing .online-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.landing .ticks { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.landing .ticks li { padding-inline-start: 2rem; position: relative; color: var(--ink-soft); max-width: 34rem; }
.landing .ticks li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; color: #0E6B5C; font-weight: 700; }
.landing .ticks strong { color: var(--ink); }
.landing .phone { justify-self: center; inline-size: min(19rem, 100%); border: 10px solid var(--ink); border-radius: 2.5rem; background: var(--ink); box-shadow: 0 24px 60px rgba(46,20,102,.25); }
.landing .phone-screen { background: #F6F4FB; border-radius: 1.8rem; padding: 1rem .8rem .8rem; display: grid; gap: .6rem; font-size: .85rem; overflow: hidden; }
.landing .phone-head { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: .9rem; padding: .7rem .8rem; }
.landing .phone-chip { border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; font-size: .8rem; }
.landing .phone-search { background: #fff; border: 1px solid var(--line); border-radius: .7rem; padding: .55rem .7rem; color: var(--ink); }
.landing .phone-card { background: #fff; border: 1px solid var(--line); border-radius: .8rem; padding: .7rem .8rem; display: grid; gap: .2rem; }
.landing .phone-card span { color: var(--ink-soft); font-size: .8rem; }
.landing .phone-pill { justify-self: start; background: #E3F5F0; color: #0E6B5C !important; border-radius: 999px; padding: 0 .5rem; font-weight: 600; }
.landing .phone-pill.few { background: var(--flag-bg); color: var(--flag-ink) !important; }
.landing .phone-step { justify-self: start; display: flex; gap: .8rem; align-items: center; color: var(--ink) !important; font-weight: 700; }
.landing .phone-step b { border: 1px solid var(--line); border-radius: .4rem; padding: 0 .55rem; font-weight: 600; }
.landing .phone-add { justify-self: stretch; text-align: center; background: var(--violet); color: #fff !important; border-radius: .5rem; padding: .35rem; font-weight: 600; }
.landing .phone-bar { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: .8rem; padding: .6rem .7rem; box-shadow: 0 -2px 10px rgba(0,0,0,.06); }
.landing .phone-btn { background: var(--violet); color: #fff; border-radius: .5rem; padding: .25rem .6rem; font-weight: 600; }
.landing footer { display: flex; gap: 1.5rem; }
@media (max-width: 900px) {
  .landing .hero, .landing .trust-grid, .landing .join-box, .landing .who { grid-template-columns: 1fr; }
  .landing .fields { grid-template-columns: 1fr; }
  .landing .hero { gap: 2.5rem; padding-top: 1rem; }
  .landing .trust-grid > div:first-child { position: static; }
  .landing .module-grid { grid-template-columns: 1fr; }
  .landing .module, .landing .module + .module { padding: 1.75rem 0; border-inline-start: 0; border-bottom: 1px solid rgba(255,255,255,.25); }
  .landing .steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .landing .steps::before { top: 1.4rem; bottom: 2rem; inset-inline-start: 1.35rem; inset-inline-end: auto; width: 2px; height: auto; }
  .landing .steps li { padding: 0 0 0 4rem; }
  .landing .who { padding: 2rem 1.5rem; }
  .landing section { padding: 3.5rem 0; }
  .landing .products, .landing .online-grid, .landing .online-split, .landing .partner-grid { grid-template-columns: 1fr; }
  .landing .products { margin-top: -1rem; }
  .landing .module-grid.six { grid-template-columns: 1fr; }
  .landing .module-grid.six .module, .landing .module-grid.six .module:nth-child(n) { padding: 1.75rem 0; border-inline-start: 0; }
}
@media (max-width: 480px) {
  .landing .row { grid-template-columns: 1fr; gap: 0; }
  .landing .sheet { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .landing *, .landing *::before, .landing *::after { animation: none !important; transition: none !important; }
}
.otp-input { font-size: 1.6rem; letter-spacing: .5em; text-align: center; }
@media print { .topbar, .sticky-actions, .no-print { display: none !important; } body { background: #fff; } .card { box-shadow: none; } }
[x-cloak] { display: none !important; }


/* The OPD queue. Sessions are cards; tokens are rows with the number big
   enough to read across a desk, one status pill and the row's actions. */
/* The header card has the settings screens' shape: the Queue · Bookings tab
   strip, the title and day, then one toolbar with the filters on the start
   side and the actions on the end. */
.q-head h1 { margin: 0; font-size: 1.25rem; }
.q-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.q-daynav { display: flex; align-items: center; gap: .4rem; }
.q-daynav [aria-current] { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.q-toolbar { display: flex; align-items: center; gap: .75rem; margin-top: .6rem; flex-wrap: wrap; }
.q-filters { display: flex; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.q-actions { display: flex; gap: .5rem; margin-inline-start: auto; }
.q-actions .btn { white-space: nowrap; }
.q-session { padding: 0; }
/* Not clipped, so a row's ⋮ menu can spill out; the head keeps the corners. */
.q-session-head { border-radius: var(--radius) var(--radius) 0 0; }
.q-tokens > .q-token:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.q-session.ended { opacity: .75; }
.q-session-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line-soft); }
.q-session-title { display: flex; flex-direction: column; min-width: 0; }
.q-session-title h2 { margin: 0; font-size: 1rem; }
.q-counts { font-size: .85rem; color: var(--muted); }
.q-counts b { color: var(--text); }
.q-session .empty { padding: .8rem 1rem; margin: 0; }
.q-tokens { list-style: none; margin: 0; padding: 0; }
.q-token { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; grid-template-areas: "num who pill" "num acts acts"; align-items: center; column-gap: .75rem; row-gap: .35rem; padding: .7rem 1rem; border-top: 1px solid var(--line-soft); }
.q-token:first-child { border-top: 0; }
.q-token .num { grid-area: num; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-size: 1.35rem; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.q-token.st-done .num, .q-token.st-cancelled .num, .q-token.st-declined .num, .q-token.st-no_show .num { background: var(--bg); color: var(--muted); }
.q-token.st-in_consultation .num { background: var(--primary); color: var(--primary-ink); }
.q-token .q-who { grid-area: who; display: flex; flex-direction: column; min-width: 0; }
.q-token .q-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-token .q-who .meta { font-size: .85rem; color: var(--muted); }
.q-token .q-pills { grid-area: pill; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
.q-token .q-pills .pill { white-space: nowrap; }
/* The next patient: the one row the doctor's eye should land on. */
.q-token.is-next { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
[dir="rtl"] .q-token.is-next { box-shadow: inset -3px 0 0 var(--primary); }
/* The branch colour as a bar, not a square that reads as a checkbox. */
.q-session-head .swatch, .q-quiet .swatch { width: 4px; height: 2.25rem; border-radius: 2px; border: 0; background: var(--loc-line); }
.q-quiet .swatch { height: 1.2rem; }
.q-token.is-next .num { background: var(--primary); color: var(--primary-ink); }
@media (max-width: 560px) {
  .q-token { grid-template-columns: 3.25rem minmax(0, 1fr); grid-template-areas: "num who" "num pill" "num acts"; }
  .q-token .q-pills { justify-content: flex-start; }
}
.q-closed { border-top: 1px solid var(--line-soft); padding: .5rem 1rem; }
.q-closed summary { cursor: pointer; }
.q-closed .q-token { opacity: .7; padding-inline: 0; }
.q-more { position: relative; margin-inline-start: auto; }
.q-more summary { list-style: none; cursor: pointer; min-inline-size: 2.5rem; text-align: center; }
.q-more summary::-webkit-details-marker { display: none; }
.q-more[open] { flex-basis: 100%; }
.q-more-body { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; padding: .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--muted); }
.q-token .acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.q-token .acts:empty { display: none; }
.q-token .acts form { margin: 0; }
.q-patient { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.q-sessions, .q-via { border: 0; padding: 0; margin: 0; }
.q-sessions legend, .q-via legend { font-weight: 600; margin-bottom: .4rem; }
.q-session-opt { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; margin-bottom: .5rem; cursor: pointer; color: var(--text); font-size: 1rem; }
.q-session-opt input { width: 1.1rem; height: 1.1rem; margin: 0; padding: 0; flex-shrink: 0; accent-color: var(--primary); }
.q-session-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.q-session-opt.full { opacity: .7; }
.q-session-opt .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.q-session-opt .meta { font-size: .85rem; color: var(--muted); }
.q-via { display: flex; flex-wrap: wrap; gap: .75rem; }
.q-via legend { flex-basis: 100%; }
.q-via label.chk { font-size: .95rem; }
label.chk.small { font-size: .875rem; }
.token-card { text-align: center; max-width: 30rem; margin-inline: auto; }
.token-no { font-size: 5rem; font-weight: 800; line-height: 1; color: var(--primary); font-variant-numeric: tabular-nums; margin: .25rem 0 .75rem; }
.token-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0 0; text-align: start; }
.token-meta > div { background: var(--bg); border-radius: 10px; padding: .5rem .7rem; }
.token-meta dt { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.token-meta dd { margin: 0; font-weight: 600; }
.token-card .row { justify-content: center; }
.td-card.waiting .head a.note { text-decoration: none; color: var(--primary); }
/* A waiting row on Today: the token beside the patient, whose name has the
   whole width; under it the check-in, course and bill on one wrapping line;
   the buttons on a line of their own beneath, on a phone too. */
.td-row.token { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; row-gap: 10px; }
.td-row.token .who-line { gap: 4px; }
.td-row.token .td-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.td-row.token .td-acts { align-self: center; }
.td-row.token .tok { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 1.1rem; }
/* An awaiting row: the time and name link to the consultation; the actions
   (Record/Review, Mark completed) sit beside them. */
.td-row.pending-row .td-go { grid-column: 1 / 3; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; color: inherit; text-decoration: none; min-width: 0; }
.td-row.pending-row form { margin: 0; }
.td-row.pending-row a.td-btn { text-decoration: none; }
.td-row.token form { margin: 0; }
/* The row's ⋮ menu: the shared .q-more.pt-more, its items with an icon.
   The card lets it overflow; the last rows open it upwards. */
.td-work, .td-card.waiting, #today-pending, #today-done, #today-reps { overflow: visible; }
.td-row.td-done-row { grid-template-columns: minmax(0, 1fr) auto; }
.td-done-row .td-go { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; color: inherit; text-decoration: none; min-width: 0; }
.td-done-row .chev { display: none !important; }
.td-menu .q-more-body .td-mi.danger { color: var(--danger); }
.td-menu .q-more-body .td-mi { display: flex; align-items: center; gap: 10px; inline-size: 100%; min-height: 40px; font-weight: 500; white-space: nowrap; }
.td-menu .q-more-body .td-mi.primary { color: var(--primary); font-weight: 600; }
.td-menu .q-more-body form { margin: 0; }
.td-mi .bi { flex: 0 0 auto; }
.td-row:nth-last-child(-n+2):not(:nth-child(-n+3)) .td-menu .q-more-body { top: auto; bottom: 100%; }
.list li.retired { opacity: .6; }
/* Search box in front of a select (branch pickers). The landing page has its
   own, heavier version; these rules are the app's. */
.combo { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.combo:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.combo input, .combo select { border: 0; background: transparent; border-radius: 0; }
.combo input { flex: 1 1 9rem; min-width: 0; border-radius: 8px 0 0 8px; }
.combo input:focus, .combo select:focus { outline: none; }
.combo select { flex: 0 1 auto; width: auto; max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-inline-start: 1px solid var(--line); border-radius: 0 8px 8px 0; color: var(--muted); }
.combo select::picker(select) { min-width: anchor-size(width); margin: .35rem 0 0; padding: .35rem; max-height: 16rem; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.combo select option { padding: .45rem .6rem; border-radius: 8px; }
.combo select option:checked { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

/* An empty session on a busy day: one line, not a card. */
.q-quiet { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }

/* The branch / doctor filters on the queue, bookings and the end-of-day
   report: beside the buttons, one line, their own width rather than the
   full-width every other select gets. Fixed, for the same reason as the
   header's branch chip — a long branch name must not move the buttons. */
.filters { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; margin: 0; flex-wrap: wrap; }
.filters select { width: 12rem; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; }
.filters .combo { width: 20rem; }

/* Picking branches for a person: a scrollable checklist with a filter box
   when the clinic has many. */
.loc-pick { display: flex; flex-direction: column; gap: .5rem; }
.loc-pick-list { display: flex; flex-direction: column; gap: .35rem; max-height: 16rem; overflow-y: auto; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.loc-pick-list label.chk { font-size: .95rem; }

/* A queue day that spans branches names each one above its cards. */
.q-branch { font-size: 15px; font-weight: 600; color: var(--ink-2); margin: 1.25rem 0 .5rem; }
.q-branch:first-child { margin-top: 0; }
@media (max-width: 860px) {
  .td-row.token { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .td-done-row .td-go { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; }
  .td-row.pending-row .td-go { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .td-row.pending-row .td-btn { display: inline-flex; }
  .td-row.token .btn.small { display: none; }
  .q-session-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .q-session-head .q-counts { grid-column: 1 / -1; }
  .q-session-head > .pill { grid-row: 1; grid-column: 3; }
  .q-token { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
  .q-token .num { width: 2.75rem; height: 2.75rem; font-size: 1.15rem; }
  /* Phone: the two actions side by side, full width, above the filters,
     which share the next row half and half. */
  .q-toolbar { flex-direction: column-reverse; align-items: stretch; }
  .q-actions { margin-inline-start: 0; }
  .q-actions .btn { flex: 1; }
  .q-filters { flex-wrap: nowrap; }
  .q-filters > .filters { flex: 1 1 0; flex-wrap: nowrap; }
  .filters { flex: 1 0 100%; }
  .filters select, .filters .combo { width: 100%; max-width: none; }
  .token-meta { grid-template-columns: 1fr; }
}
.btn.wa { color: #128C7E; border-color: #25D366; }
.receipt { max-width: 34rem; margin-inline: auto; }

/* Product tour: the page dimmed, a ring around the control a step is about,
   and a card beside it. Placed by app.js; the shade only stops clicks from
   reaching the page while the tour is open. */
.tour-shade { position: fixed; inset: 0; z-index: 60; }
.tour-ring { position: fixed; z-index: 61; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 3px var(--primary), 0 0 0 200vmax rgba(20, 12, 40, .55); transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease; }
.tour-ring.centre { box-shadow: 0 0 0 200vmax rgba(20, 12, 40, .55); }
.tour-card { position: fixed; z-index: 62; width: min(22rem, calc(100vw - 32px)); background: var(--surface); color: var(--text); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); padding: 1rem 1.1rem .8rem; }
.tour-card h2 { font-size: 1.1rem; margin: 0 0 .35rem; }
.tour-card p { margin: 0 0 .5rem; color: var(--ink-2); font-size: .95rem; }
.tour-dots { display: flex; gap: 5px; margin: .6rem 0 .75rem; }
.tour-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .2s ease; }
.tour-dots span.on { width: 16px; background: var(--primary); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tour-nav { display: flex; gap: .4rem; }
.tour-back[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tour-ring, .tour-dots span { transition: none; } }

/* A bill form (the desk's token bill, the doctor's review): the lines as a
   compact list with the labels once above them, the totals under the
   amounts with the discount among them, then the payment. */
.bill-card { max-width: 64rem; }
.bill-form { margin-top: 1rem; }
.bill-lines { display: flex; flex-direction: column; gap: .5rem; }
.bill-head, .bill-line { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem 2.75rem; gap: .5rem; align-items: start; }
.bill-head { font-size: .8rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.bill-head span:nth-child(2) { text-align: end; }
.bill-line .desc { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.bill-line .desc small { color: var(--muted); font-size: .8rem; }
.bill-form input.amt { text-align: end; direction: ltr; font-variant-numeric: tabular-nums; }
[dir="rtl"] .bill-form input.amt { text-align: start; }
.bill-x { width: 2.75rem; height: 2.75rem; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.bill-x:hover { background: var(--danger-soft); color: var(--danger); }
.bill-add { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.bill-totals { margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); display: grid; gap: .4rem; }
.bill-totals > div { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem 2.75rem; gap: .5rem; align-items: center; }
.bill-totals dt { text-align: end; color: var(--muted); font-size: .9rem; }
.bill-totals dt label { display: inline; margin: 0; font-size: inherit; }
.bill-totals dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.bill-totals .grand dt { color: var(--text); font-weight: 600; font-size: 1rem; }
.bill-totals .grand dd { font-size: 1.35rem; font-weight: 700; }
.bill-pay { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: grid; gap: .75rem; }
.bill-pay-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.bill-pay-fields .btn-link { margin-top: .3rem; }
.bill-due { margin: 0; font-size: .95rem; color: var(--amber); }
.bill-due.over { color: var(--danger); }
.bill-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.bill-actions .btn.big { flex: 1; width: auto; }
.bill-actions .bi, .receipt-share .bi { flex: 0 0 auto; }
[dir="rtl"] .bill-actions .bi-back { transform: scaleX(-1); }
/* The bill's More menu (bill_panel.dtl; WhatsApp and Cancel in it): a button like its neighbours, the
   shared floating menu under it; no items, no button. */
.bill-more:not(:has(li)) { display: none; }
.bill-more > summary.btn { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0; }
.bill-more[open] > summary.btn { border-color: var(--primary); }
.bill-more[open] .bill-more-chev { transform: rotate(180deg); }
.bill-more .q-more-body a.td-mi, .bill-more .q-more-body button.td-mi { display: flex; align-items: center; gap: 10px; inline-size: 100%; min-height: 40px; font-weight: 500; white-space: nowrap; }
.bill-more .q-more-body .td-mi.wa .wa-icon { color: #128C7E; }
.bill-more .q-more-body .td-mi.danger { color: var(--danger); }
.bill-more .q-more-body .td-mi.danger:hover { background: var(--danger-soft); }
.receipt-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .75rem; }
.bill-form > p.small { margin: .75rem 0 0; }
@media (max-width: 560px) {
  .bill-head, .bill-line, .bill-totals > div { grid-template-columns: minmax(0, 1fr) 7rem 2.75rem; }
  .bill-pay-fields { grid-template-columns: 1fr 1fr; }
  .bill-pay-fields > div:first-child { grid-column: 1 / -1; }
}

/* A waiting row on a phone: Bill and Start consultation go under the name,
   so the name keeps the row's width. */
/* The completed consultation as a card: header (title, doctor, the bill's
   actions), the record, and a footer to step through today's completed list. */
.card.enc-card { padding: 0; overflow: hidden; }
.enc-card-head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; justify-content: space-between; align-items: flex-start; padding: 1rem; border-block-end: 1px solid var(--line); }
.enc-card-title { min-width: 0; }
.enc-card-title p { margin: .25rem 0 0; }
.enc-card-acts { gap: .5rem; flex-wrap: wrap; }
.enc-card-body { padding: 0 1rem 1rem; }
.enc-card-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; padding: .75rem 1rem; border-block-start: 1px solid var(--line); background: var(--bg); }
.enc-card-foot > :first-child { justify-self: start; }
.enc-card-foot > :last-child { justify-self: end; }
.enc-card-pos { text-align: center; }
@media print { .card.enc-card { border: 0; } .enc-card-head { border: 0; padding-inline: 0; } .enc-card-body { padding-inline: 0; } }
/* Today's help: a quiet "How Today works" that opens in place. */
.td-help summary { cursor: pointer; font-weight: 600; color: var(--primary); list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); white-space: nowrap; }
.td-help summary::-webkit-details-marker { display: none; }
.td-help-body { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 5; width: min(34rem, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 12px 32px rgba(27,21,48,.14); }
@media (max-width: 860px) { .td-help summary { padding: 8px 12px; font-size: 14px; } }
.td-help-flow { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-weight: 600; margin: 0 0 .75rem; }
[dir="rtl"] .td-help-flow [aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }
.td-help .kv > div { grid-template-columns: minmax(7rem, 12rem) 1fr; }
.td-help .kv dt { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--text); }
@media (max-width: 560px) { .td-help .kv > div { grid-template-columns: 1fr; gap: .15rem; } }
/* Awaiting your confirmation on a phone: two columns of patient cards, time and
   name on top, the buttons full width at the foot so they line up card to card. */
@media (max-width: 560px) {
  .td-pending { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
  .td-pending > .empty { grid-column: 1 / -1; }
  .td-pending .td-row.pending-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
  .td-pending .td-row + .td-row { border-top: 1px solid var(--line); }
  .td-pending .td-row.pending-row .td-go { display: flex; flex-direction: column; gap: 4px; }
  .td-pending .td-row time { font-size: 13px; color: var(--muted); }
  .td-pending .td-row .name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* Bottom-up, so the primary Review is always last and lines up across a row. */
  .td-pending .td-pending-acts { flex-direction: column-reverse; align-items: stretch; margin-block-start: auto; }
  .td-pending .td-pending-acts { align-items: flex-end; }
  .td-pending .td-row.pending-row .td-go, .td-pending .td-row.pending-row .who-line { text-align: start; align-items: stretch; min-width: 0; }
  .td-pending .td-pending-acts > * { min-width: 0; }
  .td-pending .td-pending-acts form, .td-pending .td-pending-acts .td-btn, .td-pending .td-pending-acts .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .td-pending .td-pending-acts .btn { min-height: 36px; padding: .3rem .5rem; font-size: 13px; }
  .td-pending .td-pending-acts .td-btn { min-height: 40px; padding: 0 10px; }
}

/* Online payments: the gateway choice and account on Settings → Payments,
   and the invoice's "Collect online" panel. */
.pay-settings h2 { margin: 1.5rem 0 .6rem; }
.pay-gateways { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.pay-gateway { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-size: 1rem; cursor: pointer; }
.pay-gateway input { width: auto; margin: 0; }
.pay-gateway:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.pay-gateway.off { opacity: .6; cursor: not-allowed; }
.pay-account { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.pay-payout { border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; display: grid; gap: .6rem; }
.pay-payout legend { padding: 0 .3rem; color: var(--muted); font-size: .875rem; }
.online-pay { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.online-pay h3 { margin: 0 0 .5rem; }
.online-amount { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; }
.online-amount .money { font-size: 1.5rem; font-weight: 700; }
.online-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.online-actions form { margin: 0; }
.online-pay .btn.wa-btn { background: #128C7E; border-color: #128C7E; color: #fff; }
@media (max-width: 560px) {
  .online-actions .btn { flex: 1 1 100%; }
}

/* Settings → Website: the theme editor beside a live preview of the draft. */
.site-editor { display: grid; gap: 1.25rem; margin-top: 1rem; }
@media (min-width: 1100px) { .site-editor { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } .site-preview { position: sticky; inset-block-start: 1rem; } }
.site-editor fieldset { border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; margin: 0; }
.site-editor legend { font-weight: 700; padding-inline: .3rem; }
.site-choice { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem 0; }
.site-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.site-swatch { display: grid; gap: .25rem; padding: .5rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.site-swatch:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.site-swatch .chips { display: flex; gap: .25rem; }
.site-swatch .chips i { inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.site-preview { display: grid; gap: .5rem; }
.site-frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; margin-inline: auto; inline-size: 390px; max-inline-size: 100%; }
.site-frame.wide { inline-size: 100%; }
.site-frame iframe { display: block; inline-size: 100%; block-size: 75vh; border: 0; }
.site-photos { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.site-photo { border: 1px solid var(--line); border-radius: 12px; padding: .5rem; display: grid; gap: .5rem; }
.site-photo img { inline-size: 100%; block-size: 9rem; object-fit: cover; border-radius: 8px; background: var(--bg); }
.ok-text { color: var(--ok); }
.danger { color: var(--danger); }

/* Online booking (public): session and payment choices as whole-row radios,
   the patient's token once paid. */
.book legend h2 { margin: 0; }
.book fieldset { border: 0; padding: 0; margin: 0; }
.book-option { display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.book-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.book-option input { width: auto; min-height: 0; margin: .2rem 0 0; flex: none; }
.book-main { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.book-main .when { font-weight: 700; font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; text-align: start; }
.book-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.book-pay { display: flex; flex-direction: column; gap: .5rem; }
.book-breakdown { width: 100%; margin-block-start: .4rem; }
.book-breakdown td { padding: .2rem 0; }
.book-token { display: flex; flex-direction: column; align-items: center; padding: 1rem; border-radius: 12px; background: var(--primary-soft); margin-block-end: .75rem; }
.book-token strong { font-size: 3rem; line-height: 1; color: var(--primary); }
.book-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; margin: 1rem 0; }
.book-facts dt { color: var(--muted); }
.book-facts dd { margin: 0; }
.checklist { padding-inline-start: 1.1rem; margin: .5rem 0; }
.checklist li.warn { color: var(--amber); }

/* A top-menu item that opens a short menu (support: Gateways & plans). */
.topbar .nav-drop { position: relative; }
.topbar .nav-drop > summary { list-style: none; padding: 10px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 500; cursor: pointer; white-space: nowrap; }
.topbar .nav-drop > summary::-webkit-details-marker { display: none; }
.topbar .nav-drop > summary::after { content: " ▾"; font-size: .8em; }
.topbar .nav-drop > summary:hover { background: var(--bg); color: var(--text); }
.topbar .nav-drop > summary[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.topbar .nav-drop .menu { position: absolute; inset-inline-start: 0; top: calc(100% + 6px); min-width: 12rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: .35rem; z-index: 20; display: flex; flex-direction: column; }
.topbar .nav-drop .menu a { display: block; }

/* A bill's lines (bill_lines.dtl): a grid of Sl No, Code, Item, Note, Qty,
   Price, Discount, GST, Total on a wide screen; a card per line on a phone,
   each value under its label. */
.bill-form { container-type: inline-size; container-name: bill; }
.bl-add { position: relative; margin-block: .5rem; }
.bl-add input { inline-size: 100%; max-inline-size: 26rem; }
.bl-results { position: absolute; z-index: 5; inset-inline-start: 0; margin: .25rem 0 0; padding: .25rem; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; box-shadow: 0 6px 20px rgba(0,0,0,.08); min-inline-size: min(26rem, 100%); }
.bl-results { max-block-size: 18rem; overflow-y: auto; }
.bl-results li { display: flex; gap: .5rem; align-items: baseline; padding: .45rem .5rem; border-radius: .35rem; cursor: pointer; }
.bl-results li.active { background: var(--primary-soft); color: var(--primary); }
.bl-results .money { margin-inline-start: auto; }
.bl-table { margin-block: .5rem; }
/* Fixed columns (the grid's table-layout: fixed): lines, header and totals
   share them, so the totals end on the Total column. */
.bl-head, .bl-row, .bl-sum { display: grid; gap: .4rem; align-items: center; grid-template-columns: 2rem 4rem minmax(7rem, 1fr) 5rem 4.5rem 6.5rem 8.5rem 6.5rem 2.75rem; }
.bl-table.with-gst .bl-head, .bl-table.with-gst .bl-row, .bl-table.with-gst .bl-sum { grid-template-columns: 2rem 4rem minmax(7rem, 1fr) 5rem 4.5rem 6.5rem 8.5rem 5rem 6.5rem 2.75rem; }
/* One box for every number, text or input: same height, padding and border
   (transparent at rest), right-aligned, tabular. */
.bl-num, .bl-row input.bl-num, .bl-row select.bl-num, .bl-sum input.bl-num, .bl-all input.bl-num {
  box-sizing: border-box; display: block; inline-size: 100%; block-size: 2.25rem; margin: 0;
  padding: 0 .5rem; border: 1px solid transparent; border-radius: 6px; background: transparent;
  font: inherit; line-height: calc(2.25rem - 2px); text-align: end; text-align-last: end;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit;
}
.bl-hnum { text-align: end; padding-inline-end: calc(.5rem + 1px); }
/* Editable = ghost input: a faint fill at rest, a border on hover, the
   accent on focus. */
.bl-ghost { background: var(--bg) !important; cursor: text; }
.bl-ghost:hover { border-color: var(--line) !important; }
.bl-ghost:focus, .bl-ghost:focus-within { border-color: var(--primary) !important; outline: none; box-shadow: 0 0 0 2px var(--primary-soft); }
select.bl-ghost { cursor: pointer; }
.bl-row input.bl-num[type="number"] { -moz-appearance: textfield; }
.bl-row input.bl-num::-webkit-inner-spin-button, .bl-row input.bl-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* The discount: one control — the other form, the value, the % | ₹ switch. */
.bl-disc-box { display: flex; align-items: center; gap: .15rem; padding-inline: .35rem .15rem; }
.bl-disc-box input { flex: 1 1 auto; min-inline-size: 0; inline-size: 100%; block-size: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font: inherit; text-align: end; font-variant-numeric: tabular-nums; }
.bl-disc-box input:focus { outline: none; }
.bl-disc-box .bl-other { flex: 0 0 auto; color: var(--muted); font-size: .72rem; }
.bl-disc-box input { min-inline-size: 2rem; }
.bl-disc-box .bl-mode { flex: 0 0 auto; min-inline-size: 1.75rem; block-size: 1.75rem; padding: 0 .3rem; border: 0; border-radius: 4px; background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.bl-all-box { inline-size: 7rem; }
.bl-cell { display: block; min-inline-size: 0; }
.bl-sums { margin-block-start: .75rem; padding-block-start: .5rem; border-block-start: 1px solid var(--line); }
.bl-sum { padding-block: .1rem; }
.bl-sum > .bl-sum-label { grid-column: 1 / -4; text-align: end; color: var(--muted); font-size: .9rem; margin: 0; }
/* Two columns wide, ending on the Total column's edge. */
.bl-sum > .bl-num { grid-column: -4 / -2; overflow: visible; }
.bl-sum > input.bl-num { grid-column: -3 / -2; }
.bl-sum.grand > .bl-sum-label { color: var(--text); font-weight: 600; font-size: 1rem; }
.bl-sum.grand > .bl-num { font-size: 1.3rem; font-weight: 700; block-size: 2.5rem; line-height: calc(2.5rem - 2px); }
.bl-head { font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--muted); padding-block: .35rem; border-block-end: 1px solid var(--line); }
.bl-row { padding-block: .5rem; border-block-end: 1px solid var(--line); }
.bl-name { display: flex; flex-direction: column; min-inline-size: 0; }
.bl-name small { color: var(--muted); }
.bl-note { color: var(--muted); font-size: .85rem; }
.bl-removed { display: grid; gap: .25rem; margin-block: .35rem; }
.bl-all { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-block: .5rem; }
.bl-hints ul { margin: .35rem 0 .75rem; padding-inline-start: 1.1rem; }
.bl-hints li { margin-block: .25rem; }
.invoice-lines td small { font-size: .78rem; }
.approvals-card { border-inline-start: 4px solid var(--amber); }
@container bill (max-width: 54rem) {
  .bl-head { display: none; }
  .bl-row, .bl-table.with-gst .bl-row { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: .35rem; position: relative; padding-inline-end: 2rem; }
  .bl-row .bl-cell { grid-column: span 2; }
  .bl-row .bl-total { grid-column: span 4; }
  .bl-sl { display: none; }
  .bl-code { grid-column: 1 / 3; }
  .bl-name { grid-column: 3 / -1; }
  .bl-note { grid-column: 1 / -1; }
  .bl-note:empty { display: none; }
  .bl-row [data-label]::before { content: attr(data-label); display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; text-align: end; padding-inline-end: calc(.5rem + 1px); }
  .bl-sum, .bl-table.with-gst .bl-sum { grid-template-columns: minmax(0, 1fr) 9rem; }
  .bl-sum > .bl-sum-label { grid-column: 1; }
  .bl-sum > .bl-num, .bl-sum > input.bl-num { grid-column: 2; }
  .bl-sum > .bl-sum-label { grid-column: 1; }
  .bl-note[data-label]::before { display: inline; margin-inline-end: .35rem; }
  .bl-total { font-weight: 600; }
  .bl-disc-box .bl-other { display: none; }
  .bl-row .bill-x { position: absolute; inset-block-start: .4rem; inset-inline-end: 0; }
}
.fu-mark { border: 0; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.fu-mark > div { display: flex; align-items: center; gap: .5rem; }
.fu-mark input[type=date] { inline-size: auto; }
/* Feedback survey (public) */
.fb { max-inline-size: 34rem; margin-inline: auto; }
.fb-langs { display: flex; flex-wrap: wrap; gap: .25rem .9rem; justify-content: flex-end; font-size: .9rem; margin-block-end: .5rem; }
.rate { border: 0; padding: 0; margin: 0; }
.fb .rate + .rate { margin-block-start: .9rem; }
.fb .pub-head { margin-block-end: .6rem; }
.rate legend { font-weight: 600; padding: 0; margin-block-end: .4rem; }
.rate-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.rate-opt { margin: 0; cursor: pointer; }
.rate-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-opt span { display: flex; align-items: center; justify-content: center; gap: .2rem; min-block-size: 2.9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface, #fff); font-size: 1.05rem; }
.rate-opt i { font-style: normal; color: var(--muted); }
.rate-opt input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.rate-opt input:checked + span i { color: #ffd76a; }
.rate-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.rate-ends { display: flex; justify-content: space-between; margin-block-start: .25rem; }
.fb-stages, .fb-branches { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.fb-stages li, .fb-branches li { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; }
.fb-stages p { margin: .2rem 0 .3rem; }
.fb-branch-form { margin: .4rem 0; }
.fb-branch-form .inline { display: flex; gap: .5rem; }
.fb-branch-form .inline input { flex: 1; min-inline-size: 0; }
.fb-q { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; margin: 0; }
.fb-q-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-block-end: .3rem; }
.fb-poster-sheet { text-align: center; padding: 1.5rem 1rem; }
.fb-poster-sheet h1 { font-size: 2rem; margin: .5rem 0; }
.fb-poster-clinic { font-weight: 600; color: var(--ink-2); }
.fb-qr { inline-size: min(18rem, 80vw); margin: 1rem auto; background: #fff; }
.fb-qr svg { display: block; inline-size: 100%; block-size: auto; }
.fb-poster-url { font-size: .9rem; word-break: break-all; }
.qr-mini { inline-size: 6.5rem; background: #fff; }
.qr-mini svg { display: block; inline-size: 100%; block-size: auto; }
@media print { .fb-poster { border: 0; } .bottom-nav { display: none !important; } }
.fb-score { font-weight: 700; color: var(--danger, #b42318); unicode-bidi: isolate; direction: ltr; }
.fb-answers { list-style: none; margin: 0; padding: 0; }
.fb-answers li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-top: 1px solid var(--line-soft); }
.fb-answers li:first-child { border-top: 0; }
.fb-comment { margin: .75rem 0; padding: .6rem .8rem; border-inline-start: 3px solid var(--line); background: var(--bg); border-radius: 6px; white-space: pre-wrap; }
.fb-table td.n, .fb-table th.n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-low { color: var(--danger); }
.fb-trend, .fb-comments { list-style: none; margin: 0; padding: 0; }
.fb-trend li { display: grid; grid-template-columns: 1fr 4rem 6rem; gap: .5rem; padding: .3rem 0; border-top: 1px solid var(--line-soft); }
.fb-comments li { padding: .5rem 0; border-top: 1px solid var(--line-soft); }
/* Reports → Feedback: Table | Charts, and the chart cards (one column on a phone, two when wide). */
.fb-view { display: inline-flex; gap: .2rem; padding: .2rem; margin-block: .75rem .25rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.fb-view a { padding: .35rem 1rem; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 500; min-block-size: 2.25rem; display: inline-flex; align-items: center; }
.fb-view a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.fb-charts { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); margin-block-start: 1rem; }
@media (min-width: 900px) { .fb-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fb-charts .fb-wide { grid-column: 1 / -1; } }
.fb-chart { margin: 0; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; min-inline-size: 0; break-inside: avoid; }
.fb-chart figcaption { font-weight: 600; margin-block-end: .5rem; }
.fb-chart-box { position: relative; block-size: 15rem; }
.fb-chart-box.fb-rows { block-size: calc(var(--rows, 1) * 2.75rem + 4rem); }
.fb-donut-mid { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: calc(100% - 3.25rem); margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.fb-donut-mid strong { font-size: 1.75rem; line-height: 1; }
.fb-donut-mid span { font-size: .8rem; color: var(--muted); }
.fb-qr-print { display: flex; align-items: center; gap: .9rem; margin-block-start: 1rem; padding: .6rem; border: 1px dashed var(--line); border-radius: 10px; break-inside: avoid; }
.fb-qr-print p { margin: 0; overflow-wrap: anywhere; }

/* Two branch controls that must not read as one: the top bar says where you
   are working (it decides the invoice), the day's filter what you are shown. */
.filter-k { margin: 0; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.q-filters .filters, .b-filters .filters { display: flex; align-items: center; gap: .5rem; }
.branch-chip .chip-k { font-size: .75rem; color: var(--muted); margin-inline-end: .3rem; }
@media (max-width: 720px) { .branch-chip .chip-k { display: none; } }
/* CSupport → Messaging */
.msg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.msg-head h1, .msg-head h2 { margin: 0 0 .25rem; }
.msg-head p { margin: 0; max-inline-size: 48rem; }
.msg-status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem; }
.msg-account { margin-top: .75rem; }
.msg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem 1rem; }
.msg-grid label { margin-bottom: .25rem; }
.msg-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; }
.msg-matrix { width: 100%; border-collapse: collapse; }
.msg-matrix th, .msg-matrix td { padding: .6rem .5rem; border-top: 1px solid var(--line-soft); vertical-align: top; text-align: start; }
.msg-matrix thead th { border-top: 0; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.msg-matrix thead th.lang { text-align: center; }
.msg-matrix tbody th { font-weight: 400; min-inline-size: 16rem; text-transform: none; letter-spacing: normal; font-size: .9rem; color: var(--text); }
.msg-matrix tbody th code { font-weight: 600; }
.msg-matrix .meta { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.msg-sample summary { cursor: pointer; color: var(--muted); margin-top: .2rem; }

.msg-matrix td.cell { min-inline-size: 9rem; }
.msg-cell summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .35rem; border-radius: 8px; }
.msg-cell summary::-webkit-details-marker { display: none; }
.msg-cell summary:hover { background: var(--bg); }
.msg-cell .nm { font-size: .75rem; color: var(--muted); max-inline-size: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-cell form { display: flex; flex-direction: column; gap: .35rem; margin-top: .35rem; }
.msg-cell form input, .msg-cell form select { font-size: .85rem; padding: .35rem .5rem; }
.msg-cell[open] { min-inline-size: 18rem; }
.msg-report td { vertical-align: top; }
.msg-report .msg-text { min-inline-size: 14rem; white-space: pre-line; overflow-wrap: anywhere; }
.msg-cell form textarea { font-size: .85rem; padding: .35rem .5rem; inline-size: 100%; resize: vertical; }
.msg-cell form .msg-preview, .msg-cell form .meta { margin: 0; }
.st { font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: var(--bg); color: var(--muted); }
.st-submitted { background: var(--amber-soft); color: var(--amber); }
.st-approved { background: var(--ok-soft); color: var(--ok); }
.st-rejected { background: var(--danger-soft); color: var(--danger); }
.msg-help { margin: .5rem 0 .9rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: .9rem; }
.msg-help summary { cursor: pointer; font-weight: 600; }
.msg-help ul { margin: .5rem 0 0; padding-inline-start: 1.2rem; }
.msg-help li + li { margin-top: .35rem; }
.msg-tpl { white-space: pre-line; margin: .4rem 0 0; font-size: .85rem; padding: .4rem .6rem; background: var(--bg); border-radius: 8px; }
.msg-vars { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; margin: .5rem 0 0; font-size: .85rem; }
.msg-vars dt { margin: 0; }
.msg-vars dd { margin: 0; }
.msg-preview { white-space: pre-line; margin: .5rem 0 0; font-size: .85rem; padding: .4rem .6rem; border-inline-start: 3px solid var(--ok); background: var(--ok-soft); border-radius: 6px; }

/* Booking instructions: settings list and form, Gemini's suggestions, the
   checklist a patient ticks (online, /bi/:code, the desk), status pills. */
.bi-sets { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bi-set { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; }
.bi-set.off { opacity: .7; }
.bi-set .meta { flex: 1 1 12rem; }
.bi-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bi-item { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; display: grid; gap: .35rem; }
.bi-item-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.bi-n { font-weight: 700; color: var(--muted); }
.bi-item-acts { gap: .25rem; }
.bi-text { display: grid; gap: .15rem; }
.bi-text textarea { inline-size: 100%; resize: vertical; }
.bi-assist { display: grid; gap: .35rem; padding: .6rem .8rem; border: 1px dashed var(--line); border-radius: 10px; }
.bi-assist p { margin: 0; }
.bi-suggestions { display: grid; gap: .5rem; }
.bi-sg { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; display: grid; gap: .35rem; }
.bi-sg.flagged { border-color: var(--amber-line); background: var(--amber-tint); }
.bi-sg-lang p { margin: .1rem 0 0; overflow-wrap: anywhere; }
.bi-was { text-decoration: line-through; }
.bi-check { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bi-check legend { font-weight: 600; padding: 0; margin-block-end: .25rem; }
.bi-check label.chk { align-items: flex-start; gap: .5rem; line-height: 1.4; }
.bi-check label.chk input { margin-block-start: .2rem; flex: none; }
.bi-read { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .25rem; }

/* Patients (patient_list.dtl): views and filters in a sidebar, the list beside
   them; on a phone, tabs for the views and a bottom sheet for the filters. */
.pt-page { display: flex; flex-direction: column; gap: 16px; }
.pt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pt-head h1 { margin: 0; font-size: 30px; }
.pt-head p { margin: 2px 0 0; }
.pt-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.pt-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.pt-views { display: flex; flex-direction: column; gap: 2px; }
.pt-view { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--ink-2); font-size: 14px; }
.pt-view:hover { background: var(--bg); }
.pt-view.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.pt-view:has(input:focus-visible) { outline: 2px solid var(--primary); }
.pt-view .ic { display: grid; place-items: center; }
.pt-view .lbl { flex: 1; }
.pt-view .n, .pt-check .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pt-view.on .n { background: var(--surface); color: var(--primary); border-radius: 999px; padding: 0 8px; font-weight: 700; }
.pt-filters { border-top: 1px solid var(--line-soft); padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.pt-filters-head { display: flex; align-items: center; justify-content: space-between; }
.pt-filters-head h2 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.pt-close { display: none; background: none; border: 0; color: var(--ink-2); cursor: pointer; padding: 4px; }
.pt-filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-filters legend { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 0 4px; }
.pt-check { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: 14px; cursor: pointer; }
.pt-check span:nth-child(2) { flex: 1; }
.pt-check input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }
.pt-filters-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pt-apply { display: none; }
.pt-clear { font-size: 14px; font-weight: 600; }
.pt-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pt-searchbar { display: flex; align-items: stretch; gap: 10px; }
.pt-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.pt-search:focus-within { border-color: var(--primary); }
.pt-search input { flex: 1; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; background: none; padding: 0; font: inherit; color: var(--text); outline: none; min-width: 0; -webkit-appearance: none; appearance: none; }
.pt-filter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; height: 48px; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2); font: inherit; font-weight: 600; cursor: pointer; }
.pt-filter-btn.on { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.pt-tabs { display: none; }
.pt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pt-chips:empty { display: none; }
.pt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--primary); background: var(--primary-soft); color: var(--primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pt-chips .pt-clear { margin-inline-start: auto; }
.pt-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
/* No overflow clipping on the list: the row menus spill out of it. */
.pt-headrow { border-radius: var(--radius) var(--radius) 0 0; }
.pt-row:nth-last-child(-n+3):not(.pt-headrow) .pt-more .q-more-body { top: auto; bottom: 100%; }
/* Each row is a grid of its own, so every column has a width that does not
   depend on the row's content: an `auto` Actions column (a narrow heading, a
   wide Consult button) shifted the columns before it from row to row. */
.pt-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 1fr 1.3fr 1fr 1.1fr 11rem; align-items: center; gap: 14px; padding: 12px 18px; }
.pt-row + .pt-row { border-top: 1px solid var(--line-soft); }
.pt-headrow { font-size: 12px; font-weight: 600; color: var(--muted); padding-block: 10px; background: var(--bg); }
.pt-headrow a { color: inherit; text-decoration: none; }
.pt-row .c-who { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); text-decoration: none; }
.pt-row .who { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pt-row .who strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-row .no-m { display: none; }
.pt-row .c-age, .pt-row .c-phone, .pt-row .c-no, .pt-row .c-last { font-size: 13px; color: var(--ink-2); }
.pt-row .c-age .sep { display: none; }
.pt-row .c-age .g { display: block; color: var(--muted); }
.pt-row .c-last small { display: block; color: var(--muted); font-size: 12px; }
.pt-row .c-phone, .pt-row .c-no { font-variant-numeric: tabular-nums; }
.pt-row .c-act { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.pt-more { margin-inline-start: 0; }
.pt-more[open] { flex-basis: auto; }
/* A floating ⋮ menu is one column: never wraps, scrolls when short of room. */
.pt-more .q-more-body { flex-wrap: nowrap; }
.pt-more .q-more-body { position: absolute; inset-inline-end: 0; top: 100%; z-index: 5; flex-direction: column; align-items: stretch; min-width: 12rem; box-shadow: 0 12px 28px rgba(27, 21, 48, .12); }
.pt-more .q-more-body a, .pt-more .q-more-body button { padding: 8px 10px; border-radius: 8px; border: 0; background: none; font: inherit; color: var(--text); text-align: start; text-decoration: none; cursor: pointer; }
.pt-more .q-more-body a:hover, .pt-more .q-more-body button:hover { background: var(--bg); }
.av { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--av-bg); color: var(--av-ink); }
.av-0 { --av-bg: #EFEAF8; --av-ink: #4B1F91; } .av-1 { --av-bg: #DBEAFE; --av-ink: #1D4ED8; } .av-2 { --av-bg: #FCE7F3; --av-ink: #BE185D; }
.av-3 { --av-bg: #FEF3C7; --av-ink: #92400E; } .av-4 { --av-bg: #DCFCE7; --av-ink: #166534; } .av-5 { --av-bg: #E0F2FE; --av-ink: #0369A1; }
@media (prefers-color-scheme: dark) {
  .av-0 { --av-bg: #2e1065; --av-ink: #e9d5ff; } .av-1 { --av-bg: #14254a; --av-ink: #bfdbfe; } .av-2 { --av-bg: #4a1030; --av-ink: #fbcfe8; }
  .av-3 { --av-bg: #3d2a05; --av-ink: #fef3c7; } .av-4 { --av-bg: #0b3320; --av-ink: #bbf7d0; } .av-5 { --av-bg: #0c3350; --av-ink: #bae6fd; }
}
.badge { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.badge.returning { background: var(--info-soft); color: var(--info); }
.badge.new { background: var(--ok-soft); color: var(--ok); }
.pt-row .fav { color: #BE185D; font-size: 13px; }
.pt-empty { margin: 0; padding: 24px 18px; color: var(--muted); }
.pt-more-link { display: block; padding: 12px 18px; border-top: 1px solid var(--line-soft); font-weight: 600; font-size: 14px; text-align: center; }
.pt-backdrop { display: none; }
@media (max-width: 1100px) {
  .pt-row { grid-template-columns: minmax(0, 2fr) 1fr 1.3fr 1fr 11rem; }
  .pt-row .c-no { display: none; }
}
@media (max-width: 860px) {
  .pt-head h1 { font-size: 26px; }
  .pt-head .muted { display: none; }
  .pt-layout { grid-template-columns: 1fr; }
  /* The sidebar becomes the bottom sheet: only its filters show, and only when open. */
  .pt-side { display: none; position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; top: auto; z-index: 30; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; border-radius: 22px 22px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 32px rgba(27, 21, 48, .2); }
  .pt-side.open { display: flex; }
  .pt-views { display: none; }
  .pt-filters { border-top: 0; padding-top: 0; }
  .pt-filters-head h2 { font-size: 22px; color: var(--text); }
  .pt-filters-head h2 svg { display: none; }
  .pt-close { display: block; }
  .pt-filters fieldset + fieldset { border-top: 1px solid var(--line-soft); padding-top: 12px; }
  .pt-filters legend { font-size: 16px; color: var(--text); }
  .pt-check { font-size: 16px; padding: 8px 2px; }
  .pt-filters-foot { border-top: 1px solid var(--line-soft); padding-top: 14px; }
  .pt-apply { display: inline-flex; flex: 1; max-width: 12rem; min-height: 48px; }
  .pt-backdrop { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(15, 10, 30, .45); touch-action: none; }
  .pt-filter-btn .lbl { display: none; }
  .pt-filter-btn { width: 48px; padding: 0; }
  .pt-tabs { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .pt-tabs::-webkit-scrollbar { display: none; }
  .pt-tabs label { flex: 1 0 auto; white-space: nowrap; text-align: center; padding: 10px 12px; cursor: pointer; color: var(--ink-2); border-bottom: 3px solid transparent; font-size: 15px; }
  .pt-tabs label.on { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); background: var(--primary-soft); border-radius: 10px 10px 0 0; }
  .pt-tabs .n { font-size: 12px; padding: 0 7px; border-radius: 999px; background: var(--line-soft); }
  .pt-tabs label.on .n { background: var(--surface); }
  .pt-list { border: 0; background: none; }
  .pt-headrow { display: none; }
  .pt-row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "av who act" "av age act" "av phone act"; gap: 0 12px; padding: 12px 2px; }
  .pt-row .c-who { display: contents; }
  .pt-row .av { grid-area: av; align-self: start; width: 44px; height: 44px; }
  .pt-row .who { grid-area: who; }
  .pt-row .who strong { font-size: 16px; }
  .pt-row .no-m { display: inline; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--line-soft); color: var(--ink-2); }
  .pt-row .c-age { grid-area: age; }
  .pt-row .c-age .sep { display: inline; }
  .pt-row .c-age .g { display: inline; color: inherit; }
  .pt-row .c-phone { grid-area: phone; }
  .pt-row .c-no, .pt-row .c-last { display: none; }
  .pt-row .c-act { grid-area: act; }
}
.pt-phone { font: inherit; font-size: 13px; color: var(--ink-2); background: none; border: 0; border-bottom: 1px dashed var(--line); padding: 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.pt-phone:hover { color: var(--primary); border-bottom-color: var(--primary); }
.pt-phone.shown { border-bottom: 0; color: var(--primary); text-decoration: none; font-weight: 600; }
.pt-more .pt-dots { width: 40px; height: 40px; min-inline-size: 0; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); border: 1px solid transparent; cursor: pointer; }
.pt-more .pt-dots:hover, .pt-more[open] .pt-dots { border-color: var(--primary); }
.pt-more .pt-dots:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
menu.q-more-body { margin: 0; list-style: none; }
.pt-more menu.q-more-body li { display: flex; flex-direction: column; }
/* Signed out (landing, login): Sign in sits at the top bar's far end. */
.topbar .nav-guest { margin-inline-start: auto; display: flex; }
.topbar .nav-guest a.btn { color: var(--primary-ink); background: var(--primary); border: 1.5px solid var(--primary); border-radius: 999px; padding: 8px 16px; font-weight: 600; }
.topbar .nav-guest a.btn:hover { background: var(--primary-hover); color: var(--primary-ink); }
.topbar .nav-guest { align-items: center; gap: 8px; }
.topbar .nav-guest a.nav-partners { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; border: 1.5px solid var(--primary-soft); border-radius: 999px; padding: 8px 14px; }
.topbar .nav-guest a.nav-partners:hover { background: var(--primary-soft); color: var(--primary); }
.topbar .nav-guest .nav-partners-spark { font-size: .95em; }
.topbar .nav-guest a.nav-product { padding: 8px 12px; border-radius: 999px; }
.topbar .nav-guest a.nav-pricing { padding: 8px 12px; border-radius: 999px; }
@media (max-width: 40rem) { .topbar .nav-guest a.nav-product { display: none; } }
/* A phone: the logo keeps its room, the pills tighten; up to 400px the
   Partners pill gives way to Pricing (the home hero's own "Want to be a
   partner?" is just below, and the footer links the programme). */
@media (max-width: 30rem) {
  .topbar .inner:has(> .nav-guest) { gap: 8px; }
  .topbar .inner:has(> .nav-guest) > .brand { flex-shrink: 0; }
  .topbar .nav-guest { gap: 6px; }
  .topbar .nav-guest a.nav-partners { padding: 6px 10px; gap: 4px; }
  .topbar .nav-guest a.btn { padding: 6px 12px; }
  .topbar .nav-guest a.nav-pricing { padding: 6px 4px; }
}
@media (max-width: 25rem) { .topbar .nav-guest a.nav-partners { display: none; } }
/* The queue row's ⋮ menu: the Patients list's, wider for the cancel form. */
.q-menu .q-more-body { min-width: min(20rem, calc(100vw - 7rem)); max-width: calc(100vw - 7rem); }
.q-menu .q-more-body form { margin: 0; }
.q-menu .q-more-body form > .btn:only-of-type, .q-menu .q-more-body li > form > button.btn { width: 100%; justify-content: flex-start; border: 0; background: none; color: var(--text); font-weight: 500; }
.q-menu .q-more-body li > form > button.btn:hover { background: var(--bg); }
/* The queue's buttons sit at the row's start, so its menu opens towards the row. */
.q-menu .q-more-body { inset-inline-end: auto; inset-inline-start: 0; }
.q-tokens > .q-token:nth-last-child(-n+2):not(:first-child) .q-menu .q-more-body { top: auto; bottom: 100%; }
/* The queue row's one ⋮ (queue_token.dtl): at the row's end, its items
   with icons (.td-mi, as on Today); Cancel opens its own dialog. */
.q-token { grid-template-columns: 3.25rem minmax(0, 1fr) auto auto; grid-template-areas: "num who pill acts"; }
.q-token .acts { justify-content: flex-end; }
.q-row-menu:not(:has(li)) { display: none; }
.q-menu.q-row-menu .q-more-body { inset-inline-start: auto; inset-inline-end: 0; min-width: min(16rem, calc(100vw - 4rem)); }
.q-row-menu .q-more-body .td-mi { display: flex; align-items: center; gap: 10px; inline-size: 100%; min-height: 40px; font-weight: 500; white-space: nowrap; }
.q-row-menu .q-more-body .td-mi.primary { color: var(--primary); font-weight: 600; }
.q-row-menu .q-more-body .td-mi.danger { color: var(--danger); }
.q-row-menu .q-more-body .td-mi.danger:hover { background: var(--danger-soft); }
@media (max-width: 860px) {
  .q-token { grid-template-columns: 2.75rem minmax(0, 1fr) auto auto; }
}
@media (max-width: 560px) {
  .q-token { grid-template-columns: 2.75rem minmax(0, 1fr) auto; grid-template-areas: "num who acts" "num pill pill"; }
}

/* The invoice page (bill_panel.dtl): the invoice on the left, collecting it
   on the right — the desk's record of a payment, the online link, or the
   discount awaiting approval. A phone shows Collect first. */
.bill-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.bill-split .bill-main { min-width: 0; }
.bill-side { position: sticky; top: 1rem; min-width: 0; }
.bill-side .collect { display: flex; flex-direction: column; gap: 14px; }
.bill-side .collect h2 { margin: 0; }
.bill-side .collect .alert { margin: 0; }
.collect-due { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.collect-due span { color: var(--muted); font-size: 14px; }
.collect-due strong { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.collect-form h3 { margin: 0; }
.mode-chips { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.mode-chips label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; cursor: pointer; background: var(--surface); }
.mode-chips label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.mode-chips input { margin: 0; accent-color: var(--primary); }
.collect .online-pay { margin-top: 0; }
.collect-paid { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; text-align: center; }
.collect-paid .tick { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.collect-paid p { margin: 0; font-size: 22px; font-weight: 700; }
.btn.block { display: flex; justify-content: center; inline-size: 100%; }
@media (max-width: 960px) {
  .bill-split { grid-template-columns: minmax(0, 1fr); }
  .bill-side { position: static; order: -1; }
}
@media print { .bill-split { display: block; } }


/* Settings → Payments: PhonePe at the desk */
.pp-list { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .4rem; }
.pp-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem;
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; }
.pp-row.retired > div:first-child { opacity: .6; }
.pp-row .row { gap: .35rem; flex-wrap: wrap; }
.pp-more[open] { flex-basis: 100%; display: grid; gap: .4rem; }
.pp-more .row input { flex: 1; min-inline-size: 7rem; }
.pp-add { margin: .4rem 0 .8rem; }
.pp-add[open] > form { margin-block-start: .5rem; }
.pp-qr { display: inline-flex; align-items: center; gap: .25rem; margin-inline-end: .6rem; }
.pp-qr form { display: inline; }
.link-btn { background: none; border: 0; padding: 0 .2rem; color: var(--muted); cursor: pointer; font: inherit; }
.link-btn:hover { color: var(--danger); }
.pp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.pp-head h3 { margin: 0; }
.pp-add > summary { list-style: none; display: inline-flex; cursor: pointer; }
.pp-add > summary::-webkit-details-marker { display: none; }
.pp-add-merchant[open] > summary { margin-block-end: .25rem; }
.pp-add-merchant > form { padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
/* The look of the queue's Today button. */
.pp-btn { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.pp-btn:hover { background: var(--primary-soft); color: var(--primary-hover); }
.pp-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Bill's Collect column: PhonePe printed QRs */
.qr-collect { border: 1px solid var(--line); border-radius: 12px; padding: .75rem; margin-block: .5rem .75rem; display: grid; gap: .5rem; }
.qr-collect h3, .qr-collect h4 { margin: 0; }
.qr-collect h4 { font-size: .85rem; color: var(--muted); font-weight: 600; }
.qr-show { margin: 0; padding: .5rem .65rem; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
/* With MedicDay's fee added: the amount to ask for on the printed QR. */
.qr-ask { margin: .4rem 0 0; display: flex; flex-direction: column; gap: .1rem; }
.qr-ask strong { font-size: 1.05rem; }
.qr-receipts { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.qr-receipt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 10px; }
.qr-receipt.match { border-color: var(--ok); background: var(--ok-soft); }
.qr-receipt .money { font-size: 1.05rem; }
/* Bill's Collect column: a PhonePe QR or link for this invoice */
.pp-pay { border: 1px solid var(--line); border-radius: 12px; padding: .75rem; margin-block: .5rem .75rem; display: grid; gap: .55rem; }
.pp-pay h3 { margin: 0; }
.pp-dqr { display: grid; gap: .5rem; justify-items: center; text-align: center; }
/* A QR on screen: the panel says it is waiting; paying another way is folded
   below it, as the exception. */
.pp-waiting { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 .5rem; font-weight: 600; color: var(--primary); }
.pp-waiting .spinner { display: inline-block; }
.collect-other { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .9rem; margin-top: 1rem; }
.collect-other > summary { cursor: pointer; font-weight: 600; }
.collect-other[open] > summary { margin-bottom: .25rem; }
.collect-other .collect-form { margin-top: .5rem; }
.qr-big { inline-size: min(240px, 100%); aspect-ratio: 1; background: #fff; border-radius: 10px; padding: .4rem; }
.qr-big svg { inline-size: 100%; block-size: 100%; display: block; }
.pp-actions { gap: .4rem; flex-wrap: wrap; justify-content: center; align-items: center; }
.pp-link { display: grid; gap: .4rem; }
/* A card machine's sale (PhonePe Integrated EDC): sent, or the button to send. */
.pp-edc { display: grid; gap: .4rem; padding-block: .5rem; border-block-start: 1px solid var(--line-soft); }
.pp-link .pp-actions { justify-content: flex-start; }
/* CSupport → Errors */
.err-detail { white-space: pre-wrap; word-break: break-word; font-size: .8rem; max-inline-size: 60ch; margin: .25rem 0 0; }
/* An action on the invoice that failed: the reason over the page */
/* The site's question box (mdDialog, docs/features/dialog_alerts_plan.md) and
   the bill's server-rendered error box share one look. The dialog itself has
   no padding: a click on it outside the form is a click on the backdrop. */
.md-dialog, .err-dialog { border: 1px solid var(--line); border-radius: var(--radius); max-inline-size: min(26rem, calc(100vw - 2rem));
  inline-size: 100%; background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(27, 21, 48, .28);
  opacity: 1; transform: none; transition: opacity .16s ease, transform .16s ease, overlay .16s allow-discrete, display .16s allow-discrete; }
.md-dialog { padding: 0; }
.err-dialog { padding: 1.25rem; }
.md-dialog::backdrop, .err-dialog::backdrop { background: rgba(27, 21, 48, .45); backdrop-filter: blur(2px); }
@starting-style {
  .md-dialog[open], .err-dialog[open] { opacity: 0; transform: translateY(8px) scale(.98); }
}
.md-dialog-body { display: grid; gap: 1rem; padding: 1.25rem; margin: 0; }
.md-dialog-msg { margin: 0; font-size: 1.05rem; line-height: 1.45; overflow-wrap: anywhere; }
.md-dialog-sub { display: block; margin-block-start: .2rem; font-size: .85rem; color: var(--muted); }
.md-dialog-body .chk { margin: 0; }
.md-dialog-field { display: grid; gap: .3rem; }
.md-dialog-field[hidden] { display: none; }
.md-dialog-label { font-size: .85rem; color: var(--muted); }
.md-dialog-field input { inline-size: 100%; }
.md-dialog-field input[aria-invalid="true"] { border-color: var(--danger); }
.md-dialog-foot { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.md-dialog .btn.md-danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.md-dialog .btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* A phone: a sheet at the foot of the screen, the action on top. */
@media (max-width: 480px) {
  .md-dialog { margin-block-end: 0; max-inline-size: 100vw; border-end-start-radius: 0; border-end-end-radius: 0; }
  .md-dialog-foot { flex-direction: column-reverse; }
  .md-dialog-foot .btn { inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .md-dialog, .err-dialog { transition: none; }
}
.err-dialog h2 { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--danger); }
.err-dialog ul { margin: 0 0 1rem; padding-inline-start: 1.1rem; }
.err-dialog form { display: flex; justify-content: flex-end; }
/* The patient's payment link page (/p/:code) */
.pay-link { max-inline-size: 26rem; margin-inline: auto; display: grid; gap: .75rem; }
.pay-link .pay-amount { font-size: 2rem; margin: .25rem 0 0; }
.pay-qr summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.pay-qr .qr-big { margin: .5rem auto 0; }
.pay-head { display: grid; gap: .3rem; }
.pay-clinic { margin: 0; }
.pay-facts { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .75rem; margin: .4rem 0 0; font-size: .95rem; }
.pay-facts > div { display: contents; }
.pay-facts dt { color: var(--muted); }
.pay-facts dd { margin: 0; }
.pay-head { display: grid; gap: .3rem; }
.pay-clinic { margin: 0; }
.pay-facts { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .75rem; margin: .4rem 0 0; font-size: .95rem; }
.pay-facts > div { display: contents; }
.pay-facts dt { color: var(--muted); }
.pay-facts dd { margin: 0; }

/* Settings shell, mobile first: on a phone the settings menu is a strip that
   scrolls inside itself above the page; from 960px it is a grouped sidebar
   beside the page (layout.dtl). */
.settings-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.settings-nav-title, .settings-nav-group { display: none; }
.settings-nav-scroll { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.settings-nav-scroll::-webkit-scrollbar { display: none; }
.settings-nav a { flex: 0 0 auto; display: block; white-space: nowrap; padding: .45rem .85rem; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.settings-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.settings-main { min-width: 0; }
@media (min-width: 960px) {
  .settings-shell { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2rem; align-items: start; }
  .settings-nav { position: sticky; top: 1rem; }
  .settings-nav-title { display: block; font-size: 1.35rem; margin: .25rem 0 1rem; }
  .settings-nav-group { display: block; margin: 1rem .75rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .settings-nav-group:first-child { margin-block-start: 0; }
  .settings-nav-scroll { flex-direction: column; gap: .15rem; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .settings-nav a { border-radius: 10px; padding: .55rem .75rem; white-space: normal; }
  .settings-nav a:hover { background: var(--line-soft); }
}

/* Settings → Team, mobile first: one card per person on a phone, a table
   from 760px. */
.team-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-block-end: 1rem; }
.team-head h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.team-head > .btn { inline-size: 100%; }
.team-count { font-size: 1rem; font-weight: 600; color: var(--muted); margin-inline-start: .25rem; }
.team-warn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem .75rem; align-items: start; padding: .85rem 1rem; margin-block-end: .75rem;
  background: var(--amber-tint); border: 1px solid var(--amber-line); border-radius: 14px; color: var(--amber); }
.team-warn-text { display: grid; gap: .1rem; }
.team-warn-text span { font-size: .875rem; }
.team-warn-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.team-warn-actions form { margin: 0; }
.team-warn-actions .btn { inline-size: 100%; border-color: var(--amber-line); }
.team-warn-go { background: var(--amber); color: #fff; border-color: transparent; }
.team-tools { display: grid; gap: .6rem; margin-block-end: .75rem; }
.team-search { position: relative; }
.team-search svg { position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.team-search input { padding-inline-start: 2.25rem; border-radius: 10px; }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.team-tools .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.team-tools .chip-row::-webkit-scrollbar { display: none; }
/* A row of tabs as chips (a page's reports): one line that scrolls sideways
   on a narrow screen, as Settings' menu does, its scrollbar hidden and the
   chip in use brought into view (app.js). */
.chip-row.is-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: -16px; padding-inline: 16px; padding-block: 2px; }
.chip-row.is-scroll::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; font: inherit; font-weight: 600; font-size: .9rem; min-height: 2.5rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.filter-chip.is-on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.team-off { justify-self: start; }
.team-branch select { border-radius: 10px; }
.team-table { padding: 0; overflow: visible; }
.team-table table { display: block; width: 100%; border-collapse: collapse; }
.team-table thead { display: none; }
.team-table tbody, .team-table tr, .team-table td { display: block; }
.team-table tr { padding: .8rem 1rem; border-block-end: 1px solid var(--line-soft); }
.team-table tr:last-child { border-block-end: 0; }
.team-table td { padding: .15rem 0; }
.team-table td[data-label]::before { content: attr(data-label) " · "; color: var(--muted); font-size: .8rem; }
.team-table tr.is-warn { background: var(--amber-tint); }
.team-table tr.is-off { opacity: .6; }
.team-table .num { padding-block-start: .55rem; }
.tm-who { display: flex; align-items: center; gap: .75rem; margin-block-end: .3rem; }
.tm-avatar { flex: 0 0 auto; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--primary-soft); color: var(--primary); }
.tm-avatar.role-staff { background: var(--ok-soft); color: var(--ok); }
.tm-avatar.role-admin, .tm-avatar.is-warn { background: var(--amber-soft); color: var(--amber); }
.tm-pills { display: flex; flex-wrap: wrap; gap: .3rem; margin-block-start: .2rem; }
.pill.role-doctor { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.pill.role-staff { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill.role-admin { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.tm-actions { display: flex; gap: .4rem; align-items: center; }
.tm-actions > .btn { flex: 1; }
/* The row ⋮ menu is the shared one (.q-more.pt-more): its size, look and
   closing come from there. Team rows add the danger colour, and the last
   rows open upwards so the menu is not cut off. */
.tm-more-menu .q-more-body { list-style: none; margin: 0; }
.tm-more-menu .q-more-body form { margin: 0; }
.tm-more-menu .q-more-body button { inline-size: 100%; min-height: 2.5rem; }
.tm-more-menu .danger-text { color: var(--danger); }
.team-table tr:nth-last-child(-n+2) .tm-more-menu .q-more-body { top: auto; bottom: 100%; }
.role-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-block-start: 1rem; }
.role-card p { margin: .6rem 0 0; font-size: .9rem; color: var(--ink-2); }
@media (min-width: 760px) {
  .team-head { margin-block-end: 1.25rem; }
  .team-head h1 { font-size: 1.9rem; }
  .team-head > .btn { inline-size: auto; }
  .team-warn { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
  .team-warn-text { flex: 1 1 18rem; }
  .team-warn-actions { display: flex; flex-wrap: wrap; }
  .team-warn-actions .btn { inline-size: auto; min-height: 2.5rem; }
  .team-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
  .team-search { flex: 0 1 21rem; min-inline-size: 12rem; }
  .team-branch { flex: 0 1 14rem; min-inline-size: 10rem; }
  .team-tools .chip-row { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .team-off { margin-inline-start: auto; }
  .team-table { overflow: hidden; }
  .team-table table { display: table; }
  .team-table thead { display: table-header-group; }
  .team-table tbody { display: table-row-group; }
  .team-table tr { display: table-row; padding: 0; }
  .team-table td { display: table-cell; padding: .8rem 1.1rem; border-block-end: 1px solid var(--line-soft); vertical-align: middle; }
  .team-table tr:last-child td { border-block-end: 0; }
  .team-table td[data-label]::before { content: none; }
  .team-table th { text-align: start; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: .8rem 1.1rem; border-block-end: 1px solid var(--line); }
  .team-table tr.is-warn { background: none; }
  .team-table tr.is-warn td { background: var(--amber-tint); }
  .team-table .num { text-align: end; padding-block-start: .8rem; }
  .tm-who { margin: 0; }
  .tm-actions { display: inline-flex; }
  .tm-actions > .btn { flex: 0 0 auto; }
  .role-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block-start: 1.25rem; }
}

/* Drawers, mobile first: a full-screen sheet on a phone; from 600px a panel
   that slides in from the inline end, full height. */
dialog.drawer { margin: 0; inset: 0; block-size: 100dvh; max-block-size: 100dvh; inline-size: 100vw; max-inline-size: 100vw; width: auto; max-width: none;
  padding: 0; border-radius: 0; }
dialog.drawer[open] { display: flex; }
dialog.drawer > div, dialog.drawer .drawer-panel { flex: 1; display: flex; flex-direction: column; min-block-size: 0; inline-size: 100%; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; border-block-end: 1px solid var(--line); }
.drawer-head h2 { margin: .1rem 0 0; font-size: 1.25rem; }
.drawer-head p { margin: .2rem 0 0; }
.drawer-x { flex: 0 0 auto; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--text); font-size: 1.4rem; line-height: 1; text-decoration: none; cursor: pointer; }
.drawer-head form { margin: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 1rem; display: grid; gap: 1.1rem; align-content: start; }
.drawer-foot { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--line); background: var(--surface); }
.drawer-foot form { margin: 0; }
.drawer-foot .btn { inline-size: 100%; }
.drawer-foot > :only-child { grid-column: 1 / -1; }
/* Without the dialog (no JavaScript, or a refused save): the same panel as a card. */
.settings-main > .drawer-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
@media (min-width: 600px) {
  dialog.drawer { inset-inline-start: auto; margin-inline-start: auto; inline-size: min(34rem, 100vw); }
  dialog.drawer.drawer-wide { inline-size: min(60rem, 100vw); }
  .drawer-head { padding: 1.25rem 1.5rem; }
  .drawer-head h2 { font-size: 1.35rem; }
  .drawer-body { padding: 1.25rem 1.5rem; }
  .drawer-foot { display: flex; justify-content: flex-end; padding: 1rem 1.5rem; }
  .drawer-foot .btn { inline-size: auto; }
  .settings-main > .drawer-panel { max-inline-size: 40rem; }
}
.tm-group { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; min-inline-size: 0; }
.tm-group legend { font-weight: 600; font-size: .95rem; color: var(--text); margin-block-end: .5rem; padding: 0; }
.choice-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.choice-card { display: flex; align-items: center; gap: .6rem; min-height: 2.9rem; padding: .7rem .9rem; margin: 0; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  color: var(--text); font-size: .95rem; font-weight: 600; background: var(--surface); }
.choice-card input { inline-size: auto; flex: 0 0 auto; accent-color: var(--primary); }
.choice-card.is-on, .choice-card:has(input:checked) { border: 2px solid var(--primary); background: var(--primary-soft); padding: calc(.7rem - 1px) calc(.9rem - 1px); }
.choice-card.is-static { cursor: default; }
.choice-card.wide { align-items: flex-start; }
.choice-card.wide > span { display: grid; gap: .15rem; font-weight: 400; }
.choice-card.wide strong { font-weight: 600; }
.tm-role-help { margin: .1rem 0 0; }
.check-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; margin: 0; padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 10px; color: var(--text);
  font-size: .95rem; cursor: pointer; background: var(--surface); }
.check-chip input { inline-size: auto; accent-color: var(--primary); }
.check-chip.is-dim { opacity: .55; }
.tm-inline-warn { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-block-start: .6rem; padding: .55rem .75rem;
  background: var(--amber-soft); color: var(--amber); border-radius: 8px; font-size: .875rem; }
.tm-inline-warn a { color: var(--amber); font-weight: 700; }
.tm-more summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.tm-side-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
@media (min-width: 520px) { .choice-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A switch: a submit button (PhonePe "Accepting payments") or a checkbox
   (Take online bookings), same look. */
.switch, .switch-input { position: relative; flex: 0 0 auto; inline-size: 3rem; block-size: 1.75rem; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--line); transition: background .15s ease; appearance: none; -webkit-appearance: none; margin: 0; }
.switch > span, .switch-input::before { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: calc(1.75rem - 6px); block-size: calc(1.75rem - 6px);
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s ease; }
.switch[aria-checked="true"], .switch-input:checked { background: var(--primary); }
.switch[aria-checked="true"] > span, .switch-input:checked::before { transform: translateX(1.25rem); }
[dir="rtl"] .switch[aria-checked="true"] > span, [dir="rtl"] .switch-input:checked::before { transform: translateX(-1.25rem); }
.switch-input:disabled { opacity: .5; cursor: not-allowed; }
main input.switch-input { inline-size: 3rem; max-inline-size: 3rem; }

/* Settings → Payments, mobile first: one column (Finish setup first, What it
   costs last); from 1180px the two cards sit in a column on the right. */
.pay-head h1 { margin: 0 0 .25rem; font-size: 1.6rem; }
.pay-head p { margin: 0 0 1rem; }
.pay-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; grid-template-areas: "setup" "main" "costs"; }
.pay-setup { grid-area: setup; margin: 0; }
.pay-main { grid-area: main; display: grid; gap: 1.5rem; min-inline-size: 0; }
.pay-costs { grid-area: costs; margin: 0; }
.pay-section h2 { margin: 0 0 .2rem; font-size: 1.2rem; }
.pay-section > p.muted { margin: 0 0 .75rem; }
.pay-setup-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.pay-setup-head h2 { margin: 0; font-size: 1.05rem; }
.pay-setup-count { font-weight: 700; font-size: .875rem; color: var(--primary); }
.pay-progress { block-size: 6px; border-radius: 6px; background: var(--line-soft); overflow: hidden; margin: .6rem 0 .25rem; }
.pay-progress > span { display: block; block-size: 100%; background: var(--primary); border-radius: inherit; }
.pay-progress.thin { block-size: 4px; margin: .35rem 0 .15rem; }
.pay-steps { list-style: none; margin: 0; padding: 0; }
.pay-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; padding-block: .85rem; border-block-start: 1px solid var(--line-soft); }
.pay-steps li p { margin: .15rem 0 0; }
.pay-step-icon { inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.is-done .pay-step-icon { background: var(--ok-soft); color: var(--ok); }
.is-todo .pay-step-icon { background: var(--amber-soft); color: var(--amber); }
.pay-step-go { margin-block-start: .6rem; background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.pay-account { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 0; }
.pay-account-icon { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.pay-account-main { flex: 1 1 12rem; min-inline-size: 0; }
.pay-account-main p { margin: .15rem 0 0; }
.pay-account.is-empty .btn { inline-size: 100%; }
.pp-merchants { margin-block-end: .75rem; }
.pp-merchants > summary { list-style: none; }
.pp-merchants > summary::-webkit-details-marker { display: none; }
.pp-merchants > summary::after { content: "▾"; margin-inline-start: .35rem; }
.pp-merchants[open] > summary::after { content: "▴"; }
.pp-merchants-body { margin: .5rem 0 0; display: grid; gap: .6rem; }
.pp-merchant { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.pp-add-link { justify-self: start; font-weight: 600; text-decoration: none; min-height: 2.75rem; }
.pp-qr-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pp-qr-row form { margin: 0; }
.pp-qr-add { display: grid; gap: .5rem; }
.pp-limit-card { flex-wrap: wrap; }
.pp-limit-inputs { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; font-weight: 400; }
.pp-limit-inputs input { inline-size: 7rem; }
.pp-limit-inputs select { inline-size: auto; }
.pay-note { margin: 0; padding: .75rem .9rem; border-radius: 10px; background: var(--line-soft); color: var(--ink-2); }
.pay-booking { margin: 0; display: grid; gap: 1rem; }
.pay-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding-block-end: 1rem; border-block-end: 1px solid var(--line-soft); color: var(--text); font-size: 1rem; cursor: pointer; }
.pay-switch-row > span { display: grid; gap: .1rem; }
.pay-link-row { display: grid; gap: .5rem; padding-block-end: 1rem; border-block-end: 1px solid var(--line-soft); }
.pay-url { display: block; padding: .6rem .75rem; border-radius: 10px; background: var(--line-soft); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-link-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pay-booking-fields { display: grid; gap: 1rem; }
.pay-minutes { display: flex; align-items: center; gap: .5rem; }
.pay-minutes input { max-inline-size: 6rem; }
.pay-booking > div:last-child .btn { inline-size: 100%; }
.pay-costs h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.pay-costs dl { margin: 0; }
/* Label and fee side by side when the fee is short ("No fee"); a long fee
   ("2% of the bill, at least …") wraps onto its own line under the label. */
.pay-cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1rem; padding-block: .75rem; border-block-end: 1px solid var(--line-soft); }
.pay-cost dt { flex: 1 1 auto; font-weight: 600; }
.pay-cost dd { flex: 0 1 auto; margin: 0; font-weight: 700; }
.pay-cost p { flex-basis: 100%; margin: 0; }
.pay-rates summary { cursor: pointer; color: var(--primary); font-weight: 600; padding-block: .75rem; }
@media (min-width: 700px) {
  .pay-head h1 { font-size: 1.9rem; }
  .pay-account.is-empty .btn { inline-size: auto; }
  .pp-qr-add { grid-template-columns: 1fr 1fr 1fr auto; }
  .pay-link-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .pay-link-actions { display: flex; }
  .pay-booking-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pay-booking > div:last-child .btn { inline-size: auto; }
}
@media (min-width: 1180px) {
  .pay-grid { grid-template-columns: minmax(0, 1fr) 21rem; grid-template-areas: "main setup" "main costs"; grid-template-rows: auto 1fr; column-gap: 1.75rem; align-items: start; }
}

/* A PhonePe account card, the same at every width (the card, not the
   window, decides how much room there is): the branch across the top, the
   account, its facts as label / value rows, then the actions along the
   bottom under a rule: the switch on the start side, Edit on the end. */
.pp-branch { display: grid; gap: .6rem; margin-block-end: .9rem; }
.pp-card { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "branch branch" "main main" "switch edit" "add add"; gap: .75rem; align-items: center; }
.pp-card.is-empty { grid-template-areas: "branch" "main" "add"; grid-template-columns: minmax(0, 1fr); }
.pp-branch-chip { grid-area: branch; padding: .55rem .9rem; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.pp-card-main { grid-area: main; min-inline-size: 0; margin: 0; }
.pp-card-main > strong { display: block; font-size: 1.05rem; margin-block-end: .25rem; overflow-wrap: break-word; }
.pp-facts { margin: 0; display: grid; }
.pp-facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding-block: .5rem; border-block-start: 1px solid var(--line-soft); font-size: .9rem; }
.pp-facts dt { color: var(--muted); }
.pp-facts dd { margin: 0; color: var(--text); font-weight: 500; text-align: end; overflow-wrap: break-word; min-inline-size: 0; }
.pp-card .pay-progress.thin { margin-block: 0 .25rem; }
.pp-card:not(.is-empty) .pp-card-main { padding-block-end: .25rem; border-block-end: 1px solid var(--line-soft); }
.pp-card-switch { grid-area: switch; min-inline-size: 0; }
.pp-card-edit { grid-area: edit; }
.pp-card.is-off .pp-card-main { opacity: .65; }
.pp-toggle { display: flex; align-items: center; gap: .75rem; margin: 0; }
.pp-card .pp-add-link { grid-area: add; justify-self: stretch; text-align: start; padding-block-start: .75rem; border-block-start: 1px solid var(--line-soft); min-height: 2.75rem; }
@media (min-width: 600px) {
  .pp-facts { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); column-gap: 1.25rem; }
}

/* Settings → Locations: a list of branch cards; Add and Edit are drawers. */
.loc-search { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block-end: .9rem; }
.loc-search .team-search { flex: 1 1 16rem; max-inline-size: 26rem; }
.loc-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.loc-card { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .75rem; align-items: start; }
.loc-card .swatch { margin-block-start: .35rem; }
.loc-card-main p { margin: .15rem 0 0; }
.loc-card-title strong { font-size: 1.02rem; }
.loc-card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; padding-block-start: .6rem; margin-block-start: .4rem; border-block-start: 1px solid var(--line-soft); }
.loc-card-actions form { margin: 0; }
.loc-card.is-off .loc-card-main { opacity: .6; }
@media (min-width: 700px) {
  .loc-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .loc-card-actions { grid-column: auto; padding: 0; margin: 0; border: 0; }
}
.loc-people { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.loc-people li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding-block: .35rem; border-block-end: 1px solid var(--line-soft); }
.loc-people li.is-off { opacity: .6; }
.loc-people form { margin: 0; }
.loc-people-add { display: flex; gap: .5rem; align-items: center; }
.loc-people-add select { flex: 1; }
/* A branch's opening hours: one row per days + open/close, stacked on a phone. */
.lh-row { display: grid; gap: .5rem; padding-block-end: .75rem; border-block-end: 1px solid var(--line-soft); }
.lh-row > .btn { justify-self: start; }
.lh-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
/* Without the dialog: the edit panel as a card, a little wider than a drawer. */
.settings-main > .loc-edit-panel { max-inline-size: 44rem; }

/* Fields in settings and in dialogs: rounder corners. */
.settings-main input:not([type="checkbox"]):not([type="radio"]):not(.switch-input),
.settings-main select, .settings-main textarea,
dialog.drawer input:not([type="checkbox"]):not([type="radio"]), dialog.drawer select, dialog.drawer textarea { border-radius: 12px; }
/* Bill's Collect column: the patient's mobile, confirmed before a link. */
.pay-contact { display: grid; gap: .5rem; padding: .6rem .75rem; border-radius: 10px; background: var(--line-soft); }
.pay-contact-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.pay-contact-row > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.pay-contact-row > div > .small { flex-basis: 100%; }
.pay-contact-form { display: grid; gap: .5rem; }
.pay-contact-form input[type="tel"] { border-radius: 10px; }
/* WhatsApp buttons: the WhatsApp mark before the label. */
.wa-icon { flex: 0 0 auto; vertical-align: -3px; }
.btn .wa-icon { margin-inline-end: .1rem; }
.btn.wa-btn { background: #25D366; color: #073b1c; border-color: transparent; }
.btn.wa-btn:hover { background: #20bd5a; }
/* The recording prompter: Next on the current prompt's bubble. */
.take .bubble-next { display: inline-flex; align-items: center; gap: .35rem; margin-block-start: .8rem; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 12px;
  border: 0; background: #fff; color: #4B1F91; font: 600 1rem var(--font); letter-spacing: 0; cursor: pointer; }
.take .bubble-next:hover { background: #EFEAF8; }
.take .bubble-next svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
[dir="rtl"] .take .bubble-next svg { transform: scaleX(-1); }

/* A sheet or dialog open over the page: the page behind it stays still
   (the Patients filter sheet sets .scroll-locked; any open <dialog> too),
   and a dialog's own scrolling never spills over to the page. */
html.scroll-locked, html.scroll-locked body, html:has(dialog[open]), html:has(dialog[open]) body { overflow: hidden; }
dialog .drawer-body, dialog.rx-dialog { overscroll-behavior: contain; }

/* Reports → End of day: the day's figures as cards (the Today cards' look),
   two across on a phone, three from 700px. */
.eod-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-block-end: 1rem; }
.eod-stats .td-stat { padding: 14px; gap: 10px; flex-direction: column; align-items: flex-start; }
.eod-stats .td-stat .ic { width: 40px; height: 40px; border-radius: 12px; }
.eod-stats .td-stat .fig b { font-size: 22px; }
.eod-stats .td-stat .fig b.money { font-size: 19px; }
@media (min-width: 700px) {
  .eod-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .eod-stats .td-stat { flex-direction: row; align-items: center; padding: 18px; gap: 14px; }
  .eod-stats .td-stat .ic { width: 52px; height: 52px; border-radius: 14px; }
  .eod-stats .td-stat .fig b { font-size: 26px; }
  .eod-stats .td-stat .fig b.money { font-size: 22px; }
}

/* Pharmacy: the product master (apps/medicday_pharmacy). One column on a
   phone; the search row and each product row widen on a desk. */
.ph-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
/* Every pharmacy page's title row, and Expenses' (on the same menu), as tall
   as the tallest (the Counter's, with the branch picker), the title centred
   in it: moving between pages leaves the title where it was. */
.ph-head, .ex-head { min-block-size: 2.875rem; }
.ph-head h1 { margin: 0; }
.ph-search { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ph-search input[type="search"] { flex: 1 1 16rem; }
.ph-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ph-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ph-row.is-off { opacity: .6; }
.ph-row-main { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 14rem; color: inherit; text-decoration: none; }
.ph-row-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.ph-tray { font-variant-numeric: tabular-nums; font-weight: 600; }
.ph-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.ph-off { margin-block-start: 1.25rem; padding-block-start: .75rem; border-block-start: 1px solid var(--line-soft); }
/* A product's stock in its drawer: batches by expiry, each with its adjust form. */
.ph-stock { margin-block-start: 1.25rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
.ph-stock-head { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; justify-content: space-between; }
.ph-stock-total { font-variant-numeric: tabular-nums; }
.ph-batches { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ph-batch { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; display: grid; gap: .5rem; }
.ph-batch.exp-expired { border-color: var(--danger, #c0392b); }
.ph-batch.exp-soon { border-color: var(--amber, #d4a017); }
.ph-batch-row { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; justify-content: space-between; }
.ph-batch-qty, .ph-stock-n, .ph-move-n { font-variant-numeric: tabular-nums; }
.ph-stock-n { font-weight: 600; }
.ph-stock-n.is-none { color: var(--muted); font-weight: 400; }
.ph-dir { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; align-items: end; }
.ph-dir legend { font-size: .9em; }
.ph-opening summary, .ph-moves summary { cursor: pointer; font-weight: 600; }
.ph-move-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.ph-summary { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .25rem; }
.ph-row-errors { margin: .5rem 0; padding-inline-start: 1.25rem; display: grid; gap: .2rem; max-height: 22rem; overflow: auto; }

/* Pharmacy: the counter. Mobile first: the scan box on top, the sale as
   cards, a bar at the bottom within thumb reach; a desk gets wider cards. */
.ph-counter { display: grid; gap: .75rem; padding-block-end: 6rem; }
.ph-scan input[type="search"] { width: 100%; font-size: 1.1rem; padding: .8rem 1rem; }
.ph-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ph-result { width: 100%; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; text-align: start; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface, #fff); cursor: pointer; font: inherit; color: inherit; }
.ph-result:hover, .ph-result:focus-visible { border-color: var(--accent, #5b21b6); }
/* The match ↓ / ↑ highlighted from the name box (Enter picks it). */
.ph-result.is-active { border-color: var(--accent, #5b21b6); background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
[dir="rtl"] .ph-result.is-active { box-shadow: inset -3px 0 0 var(--primary); }
.ph-result.is-none { opacity: .6; }
.ph-result-tags { display: flex; gap: .35rem; align-items: center; }
.ph-cart { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ph-line { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; display: grid; gap: .4rem; background: var(--card); }
.ph-line.is-short { border-color: var(--amber, #d4a017); }
.ph-line-head { display: flex; gap: .5rem; align-items: baseline; justify-content: space-between; }
.ph-line-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Margin (cost is shown only to those who may see it); a loss in red. */
.ph-margin { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ph-loss { color: var(--danger); }
.ph-line-edit { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ph-line-edit form { margin: 0; display: flex; gap: .35rem; align-items: center; }
.ph-step { display: inline-flex; gap: .25rem; align-items: center; }
.ph-step input, .ph-loose input { width: 3.75rem; text-align: center; font-variant-numeric: tabular-nums; }
.ph-loose { display: inline-flex; gap: .35rem; align-items: center; }
.ph-loose label { margin: 0; }
.ph-disc input { width: 4rem; }
.ph-customer summary, .ph-parked summary { cursor: pointer; font-weight: 600; }
.ph-parked ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.ph-parked li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.ph-bar { position: fixed; inset-inline: 0; inset-block-end: calc(5.25rem + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; gap: .5rem; align-items: center; padding: .6rem 1rem; background: var(--surface, #fff); border-block-start: 1px solid var(--line); box-shadow: 0 -4px 12px rgb(0 0 0 / .06); }
.ph-bar form { margin: 0; }
.ph-bar-total { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.ph-bar-total strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
@media (min-width: 60rem) {
  .ph-bar { inset-block-end: 0; }
}
/* The counter as a billing grid (counter_grid_plan.md). On a phone the entry
   row and each line are cards whose cells carry their own labels; on a wide
   screen they line up under one row of column names, the totals in a column
   on the right. One set of columns for the names, the entry row and the lines. */
/* S.No, Product name (the widest: what is typed, and long names), MFR,
   Batch / Exp (the expiry under the batch), Qty, MRP, GST, Dis %, Total, Add. */
.ph-counter { --ct-cols: 2.25rem minmax(9rem, 3fr) minmax(4rem, .9fr) minmax(7rem, 1.3fr) 6.5rem 5.5rem 3.5rem 4rem 6.5rem 4.5rem; }
/* The grid never runs past its box (the minimums above, with the gaps, fit
   the counter's width at 64rem): nothing is pushed out on the right. */
.ct-grid, .ct-lines { min-inline-size: 0; max-inline-size: 100%; }
/* A diagnosis's ICD-10 details: the AI's title, the chapter, WHO's link. */
.dx-icd { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.rx-sum .dx-icd { margin-block-start: .15rem; text-align: start; }
.dx-who { display: inline-block; margin-block-start: .25rem; }
.dx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dx-list li { display: grid; gap: .2rem; justify-items: start; }
/* Sales: the filters in one row on a wide screen; on a phone the branch,
   then the date, the invoice search and Find together. */
.ph-sales-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ph-sales-filters select { flex: 0 1 14rem; inline-size: auto; }
.ph-sales-filters input[type=date] { flex: 0 1 10.5rem; inline-size: auto; }
.ph-sales-filters input[type=search] { flex: 1 1 8rem; min-inline-size: 0; inline-size: auto; }
.ph-sales-filters .btn { flex: none; }
@media (max-width: 640px) {
  .ph-sales-filters select { flex-basis: 100%; }
  .ph-sales-filters input[type=date] { flex: 1 1 8rem; }
  .ph-sales-filters input[type=search] { flex: 1 1 5rem; }
}
.ct-unpaid:empty { display: none; }
/* The counter's round off: a small field in the totals, the amount to its end. */
.ct-sum .ct-ro-row { align-items: center; }
.ct-ro-row dd { margin: 0; }
.ct-ro-row label { display: inline; margin: 0; font: inherit; color: inherit; }
.ct-ro input { inline-size: 6rem; text-align: end; font-variant-numeric: tabular-nums; padding-block: .3rem; }
.ct-exp-t { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ct-exp-t.is-soon { color: var(--amber); font-weight: 600; }
.ct-exp-t.is-expired { color: var(--danger); font-weight: 600; }
.ct-head { display: none; }
.ph-counter, .ct-lines, .ct-foot, .ct-totals { grid-template-columns: minmax(0, 1fr); }
.ct-entry-row { grid-template-columns: minmax(0, 1fr); }
.ct-c select, .ct-c input { min-inline-size: 0; }
.ct-entry-row { display: grid; gap: .5rem; padding: .6rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ct-name { position: relative; margin: 0; }
.ct-popup { position: absolute; z-index: 20; inset-inline: 0; inset-block-start: calc(100% + .25rem); max-block-size: 22rem; overflow: auto; padding: .35rem; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgb(0 0 0 / .14); }
.ct-pick { display: grid; gap: .1rem; }
.ct-entry-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; align-items: end; }
.ct-entry-form.is-empty { opacity: .55; }
.ct-c { display: grid; gap: .15rem; min-inline-size: 0; }
.ct-l { font-size: .75rem; color: var(--muted); margin: 0; }
.ct-v { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ct-c input, .ct-c select { inline-size: 100%; }
.ct-c select { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-total .ct-v { font-size: 1.05rem; }
.ct-hint { font-size: .75rem; }
.ct-add .btn { inline-size: 100%; }
.ct-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ct-line { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.ct-line .ct-sno, .ct-line .ct-mfr, .ct-line .ct-gst { display: none; }
.ct-line .ct-prod { grid-column: 1 / -1; }
.ct-line .ct-x { justify-self: end; align-self: end; }
.ct-line form { margin: 0; }
.ct-line .ph-step input { inline-size: 4.5rem; }
.ct-foot { display: grid; gap: .75rem; margin-block-start: .75rem; }
.ct-totals { display: grid; gap: .6rem; }
.ct-sum { margin: 0; display: grid; gap: .25rem; }
.ct-sum div { display: flex; justify-content: space-between; gap: 1rem; }
.ct-sum dt { color: var(--muted); }
.ct-sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.ct-billdisc { margin: 0; }
.ct-billdisc fieldset { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 10px; }
.ct-billdisc legend { font-weight: 600; padding-inline: .25rem; }
.ct-billdisc input[name="value"] { inline-size: 6rem; }
.ct-recv { display: none; }
@media (min-width: 64rem) {
  .ct-grid { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .ct-head { display: grid; grid-template-columns: var(--ct-cols); gap: .5rem; padding: .55rem .6rem; border-block-end: 1px solid var(--line); font-size: .8rem; font-weight: 700; color: var(--accent, #5b21b6); }
  .ct-head .num { text-align: end; }
  .ct-entry-row { grid-template-columns: var(--ct-cols); gap: .5rem; border: 0; border-radius: 0; background: none; align-items: start; }
  .ct-name { grid-column: 1 / span 2; }
  .ct-entry, .ct-entry-form { display: contents; }
  .ct-entry-row .ct-l, .ct-line .ct-l { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ct-entry-row .ct-c { align-self: center; }
  /* The expiry under the entry row's batch box takes no height of its own,
     so the batch box, Qty and Dis % line up on one level. */
  .ct-entry-row { padding-block-end: 1.25rem; }
  .ct-entry-row .ct-batch { position: relative; }
  .ct-entry-row .ct-batch .ct-exp-t { position: absolute; inset-block-start: calc(100% + .15rem); inset-inline-start: 0; white-space: nowrap; }
  /* Numbers typed in sit on the right, as in the columns above them. */
  .ct-entry-row .ct-qty input, .ct-dis input { text-align: end; }
  .ct-qty, .ct-mrp, .ct-gst, .ct-dis, .ct-total { text-align: end; justify-items: end; }
  .ct-popup { inset-inline-end: auto; min-inline-size: 24rem; }
  .ct-lines { gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .ct-line { grid-template-columns: var(--ct-cols); gap: .5rem; border: 0; border-radius: 0; border-block-end: 1px solid var(--line); padding: .45rem .6rem; align-items: center; }
  .ct-line:last-child { border-block-end: 0; }
  .ct-line .ct-sno, .ct-line .ct-mfr, .ct-line .ct-gst { display: grid; }
  .ct-line .ct-prod { grid-column: auto; }
  .ct-line .ct-x { align-self: center; }
  .ct-line .ph-step input { inline-size: 2.75rem; }
  .ct-line .ph-step .btn { padding-inline: .45rem; }
  .ct-line .ph-disc input { inline-size: 100%; }
  .ct-foot { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .ct-totals { padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .ct-totals .ph-bar { position: static; box-shadow: none; border: 0; padding: .5rem 0 0; flex-wrap: wrap; background: none; }
  .ct-totals .ph-bar-total { flex-basis: 100%; }
  .ct-recv { display: inline; }
}
/* Counter keys: shown with a keyboard or mouse, never on a phone. */
.ph-key { font: 600 .7rem/1 var(--mono, ui-monospace, monospace); padding: .15rem .3rem; border: 1px solid currentColor; border-radius: 4px; opacity: .7; margin-inline-start: .25rem; }
.ph-keys { margin: 0; }
.ph-keys kbd { font: 600 .75rem var(--mono, ui-monospace, monospace); padding: .05rem .3rem; border: 1px solid var(--line); border-radius: 4px; }
@media (pointer: coarse) { .ph-key, .ph-keys { display: none; } }
.ph-step input { width: 4.5rem; }
/* A purchase's line: its fields in a grid that wraps on a phone. */
.ph-pu-line { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .4rem .5rem; margin: 0; }
.ph-pu-line label { display: grid; gap: .15rem; font-size: .8rem; color: var(--muted); margin: 0; }
.ph-pu-line input, .ph-pu-line select { width: 100%; }
.ph-pu-totals { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: flex-end; margin: .25rem 0 0; }
.ph-alerts { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.ph-alerts a { text-decoration: none; }
a.filter-chip { text-decoration: none; }
/* Pharmacy reports: the figures as tiles, one column on a phone. */
.ph-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem; }
.ph-tiles .card { display: grid; gap: .15rem; padding: .75rem; }
.ph-tiles strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }


/* Pharmacy: a photo to read, and what it was read into (or a shared
   prescription brought), beside the purchase or the sale. */
.ph-photo { margin-block: .5rem; }
.ph-photo summary { cursor: pointer; font-weight: 600; }
.ph-photo input[type=file] { max-inline-size: 100%; }
.ph-pages-add { display: flex; flex-wrap: wrap; gap: .5rem; }
.ph-pages-add[hidden] { display: none; }
.ph-pages-add label { position: relative; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
/* The camera and file inputs sit inside their buttons, out of sight but still the label's control. */
.ph-pages-file { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; inset-block-start: 0; inset-inline-start: 0; }
.ph-pages { margin: 0; padding-inline-start: 1.6rem; display: grid; gap: .4rem; }
.ph-pages:empty { display: none; }
.ph-pages li { padding-inline-start: .25rem; }
.ph-pages li > * { vertical-align: middle; }
.ph-pages li { display: list-item; }
.ph-pages li img, .ph-pages-pdf { inline-size: 2.5rem; block-size: 2.5rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--danger); background: var(--surface); }
.ph-pages-name { display: inline-block; max-inline-size: calc(100% - 7rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-inline: .5rem; font-size: .9rem; }
.ph-sg { border: 1px solid var(--line); border-radius: .6rem; padding: .75rem; margin-block: .75rem; background: var(--surface); }
.ph-sg.is-reading { border-style: dashed; }
.ph-sg-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-block-end: .4rem; }
.ph-sg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; margin-block: .25rem; }
.ph-sg-lines { padding-inline-start: 1.2rem; margin: .5rem 0 0; display: grid; gap: .6rem; }
.ph-sg-line p { margin: 0; }
.ph-sg-line.is-unsure .ph-sg-text { color: var(--amber); }
.ph-sg-line.is-done { opacity: .7; }
.ph-sg-done { color: var(--ok); }
.ph-sg-choices { display: flex; flex-wrap: wrap; gap: .35rem; margin-block: .35rem; }
.ph-sg-choices .btn { display: block; text-align: start; white-space: normal; }
.ph-rx-for { color: var(--primary); }
/* A different product given for a prescription line, and its "checked with
   the doctor" tick. */
.ph-sub { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; }
.ph-sub-form { margin: 0; }
/* Prescriptions: the clinic's of the day, one card each (two across on a desk). */
.ph-rx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.ph-rx-card { display: grid; gap: .45rem; padding: .85rem; min-width: 0; }
.ph-rx-top { display: flex; gap: .5rem; align-items: flex-start; justify-content: space-between; }
.ph-rx-top > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ph-rx-lines { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .2rem; }
.ph-rx-decline > summary { list-style: none; cursor: pointer; }
.ph-rx-decline > summary::-webkit-details-marker { display: none; }
.rx-outcome { margin-block: .5rem 0; }
.ph-wa { grid-column: 1 / -1; }
.rx-share { margin-block-start: .75rem; display: grid; gap: .5rem; }
.rx-share-row { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.rx-share-row p { margin: 0; flex: 1 1 14rem; }
.rx-share-new { align-items: center; gap: .5rem; }
.rx-public { max-inline-size: 32rem; margin-inline: auto; text-align: center; justify-items: center; }
.rx-public .rx-qr { inline-size: 12rem; }
.ph-sg-choices .btn.primary .muted { color: inherit; opacity: .85; }
/* Pharmacy payables: open invoices with an amount each. */
.ph-alloc-in { display: flex; gap: .35rem; align-items: center; }
.ph-alloc-in input { inline-size: 7rem; text-align: end; }
.ph-row.is-voided { opacity: .65; }
.ph-void { flex-basis: 100%; }
.ph-ageing { margin: 0; }
/* Pharmacy's public page and the customer's order. */
.ph-shop-results { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.ph-shop-results > .ph-row { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 1rem; }
.ph-shop-results > .ph-row > .ph-row-main { flex: 1 1 auto; }
.ph-shop-results > .ph-row > form { margin-block-start: auto; }
.ph-shop-results > .ph-row > form:not(.ph-stepper) .btn { inline-size: 100%; }
@media (min-width: 40rem) { .ph-shop-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .ph-shop-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ph-order-alert { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-block-end: 1rem; }
.ph-order-alert .ph-alert-text { flex: 1 1 14rem; font-weight: 600; }
.nav-badge:empty { display: none; }
.nav-badge { margin-inline-start: .35rem; }
.nav-badge .pill { font-size: 11px; padding: .05rem .45rem; }
/* A count raised beside its label ("Rx¹"): a red badge, as on a phone's app
   icon, the same in light and dark. */
.nav-count { display: inline-block; min-width: 1.45em; height: 1.45em; padding: 0 .35em; box-sizing: border-box; border-radius: 999px; background: #FF3B30; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.45em; text-align: center; vertical-align: super; font-variant-numeric: tabular-nums; }
.tabbar a, .tabbar .tab-group { position: relative; min-width: 0; }
/* A label never runs into its neighbour, however many items there are. */
.tabbar a > span:not(.nav-badge), .tabbar .tab-group > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* More items than fit (a pharmacy's eight): each keeps a readable width and
   the bar scrolls sideways, its scrollbar hidden; a few items still share the
   width evenly. */
@media (max-width: 860px) {
  .tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(4.75rem, 1fr); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar a, .tabbar .tab-group { scroll-snap-align: start; padding-inline: .25rem; }
  /* More than fit: the dock stays rounded at both ends and scrolls inside. */
}
/* A tab that is a group (Products, Reports): its pages in a bottom sheet that
   slides up over a dimmed page (a popover, in the top layer, so the dock's
   scrolling and blur never clip it); a tap on the dim closes it. */
.tab-menu { position: fixed; inset: auto 0 0 0; inline-size: 100%; max-inline-size: none; max-block-size: 70vh; overflow-y: auto; margin: 0; box-sizing: border-box; padding: .5rem .75rem calc(1rem + env(safe-area-inset-bottom, 0px)); border: 0; border-start-start-radius: 22px; border-start-end-radius: 22px; background: var(--surface); color: var(--text); box-shadow: 0 -10px 36px rgb(0 0 0 / .22); transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1), overlay .26s allow-discrete, display .26s allow-discrete; }
.tab-menu:popover-open { transform: translateY(0); }
@starting-style { .tab-menu:popover-open { transform: translateY(100%); } }
.tab-menu::backdrop { background: rgb(0 0 0 / 0); transition: background .26s, overlay .26s allow-discrete, display .26s allow-discrete; }
.tab-menu:popover-open::backdrop { background: rgb(0 0 0 / .38); }
@starting-style { .tab-menu:popover-open::backdrop { background: rgb(0 0 0 / 0); } }
@media (prefers-reduced-motion: reduce) { .tab-menu, .tab-menu::backdrop { transition: none; } }
.tab-menu-grab { display: block; inline-size: 40px; block-size: 5px; margin: .15rem auto .6rem; border-radius: 3px; background: var(--line); }
.tab-menu-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 .25rem .4rem .5rem; }
.tab-menu-h { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* Close, top end of the sheet: a round 40px target (a tap outside closes too). */
.tab-menu-x { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--line-soft); color: var(--text); cursor: pointer; }
.tab-menu-x:active { background: var(--line); }
/* The sheet sits inside the dock, so its links undo the dock's (an icon over
   a label, in a column): one row, label then the arrow. */
.tabbar .tab-menu a { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: .5rem; min-block-size: 52px; padding: 0 .9rem; border-radius: 14px; color: var(--text); text-decoration: none; font-size: 16px; font-weight: 500; white-space: nowrap; }
.tabbar .tab-menu a + a { margin-block-start: 2px; }
.tabbar .tab-menu a:active { background: var(--line-soft); }
.tabbar .tab-menu a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.tabbar .tab-menu a::after { content: "›"; flex: none; color: var(--muted); font-size: 20px; line-height: 1; }
[dir="rtl"] .tabbar .tab-menu a::after { content: "‹"; }
.tabbar .nav-badge { position: absolute; inset-block-start: 0; inset-inline-start: 52%; margin: 0; }
.tabbar .nav-badge .pill { font-size: 10px; padding: 0 .35rem; }
.ph-order-alert a { color: inherit; }
.ph-order-alert [hidden] { display: none; }
.ph-alert-bell { flex: 0 0 auto; transform-origin: 50% 0; }
/* Only when something new came in (app.js adds is-ringing), not on every page. */
.ph-order-alert.is-ringing .ph-alert-bell { animation: ph-ring .9s ease-in-out 2; }
@keyframes ph-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }
@media (prefers-reduced-motion: reduce) { .ph-alert-bell { animation: none; } }
.ph-shop-head { position: relative; }
.ph-shop-head h1 { padding-inline-end: 6.5rem; }
.ph-cart-chip { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; display: inline-flex; align-items: center; gap: .35rem; }
.ph-stepper { display: flex; align-items: center; gap: .4rem; }
.ph-stepper .btn { min-inline-size: 2.5rem; font-size: 1.1rem; }
.ph-stepper-n { min-inline-size: 2.2rem; text-align: center; font-variant-numeric: tabular-nums; }
/* The cart's lines: the amount in a fixed slot at the end, so every − N + sits in the same column. */
#shop-cart .ph-row-tags { flex-wrap: nowrap; align-items: center; gap: .6rem; margin-inline-start: auto; }
#shop-cart .ph-row-tags > .money { min-inline-size: 6.5rem; text-align: end; font-variant-numeric: tabular-nums; }
.ph-shop-bar:empty { display: none; }
.ph-shop-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20; padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom)); background: var(--surface); border-block-start: 1px solid var(--line); box-shadow: 0 -4px 16px rgb(0 0 0 / .08); }
.ph-shop-bar-in { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: inherit; text-decoration: none; max-inline-size: 60rem; margin-inline: auto; }
.ph-shop:has(.ph-shop-bar:not(:empty)) { padding-block-end: 4.5rem; }
.ph-shop-bar-in { inline-size: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: start; }
.ph-code { display: flex; flex-direction: column; gap: .2rem; }
.ph-code strong { font-size: 2rem; letter-spacing: .3em; }
/* A tick box or radio beside its words on the pharmacy's newer screens. */
:is(.ph-photo, .ph-order, .ph-order-settings, .ph-pay, .rx-share, .ph-wa, .bill-main) label:has(> input[type="checkbox"], > input[type="radio"]) { display: flex; align-items: center; gap: .5rem; }
:is(.ph-photo, .ph-order, .ph-order-settings, .ph-pay, .rx-share, .ph-wa, .bill-main) label > :is(input[type="checkbox"], input[type="radio"]) { inline-size: auto; flex: 0 0 auto; accent-color: var(--primary); }
.ph-checkout legend { margin-block-end: .3rem; }
/* A pharmacy's public profile on its own host. */
.profile-page { background: var(--bg); }
.profile { max-inline-size: 40rem; margin-inline: auto; padding: 1rem; }

/* Expenses (docs/features/expenses_plan.md): one column on a phone; the
   filters in a row and each expense a single line on a desk. */
.ex-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.ex-head h1 { margin: 0; }
.ex-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ex-actions .btn { display: inline-flex; gap: .4rem; align-items: center; }
.ex-voice { display: flex; flex-direction: column; gap: .25rem; }
.ex-voice .ph-loss { margin: 0; max-inline-size: 22rem; }
.ex-dot { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: currentColor; animation: ex-blink 1s infinite; }
@keyframes ex-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ex-dot { animation: none; } }
.ex-photo { margin: 0; }
.ex-photo .btn { cursor: pointer; }
.ex-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; align-items: end; }
.ex-filters > div { display: grid; gap: .2rem; min-inline-size: 0; }
.ex-filters select, .ex-filters input { inline-size: 100%; }
.ex-voided { align-self: center; }
.ex-sum { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ex-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ex-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding: .7rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ex-row.is-voided { opacity: .6; }
.ex-row.is-voided .money { text-decoration: line-through; }
.ex-main { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 14rem; min-inline-size: 0; color: inherit; text-decoration: none; }
.ex-what { overflow-wrap: anywhere; }
.ex-tags { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ex-tags form { margin: 0; }
.ex-form .grid > div, .ex-line .grid > div { display: grid; gap: .2rem; min-inline-size: 0; }
.ex-line { display: grid; gap: .6rem; }
.ex-line.is-dropped { opacity: .55; }
.ex-line-head { display: flex; gap: .75rem; align-items: center; justify-content: space-between; inline-size: 100%; padding: 0; }
.ex-line .is-check input, .ex-line .is-check select { border-color: var(--amber); background: var(--amber-tint); }
.ex-save { position: sticky; inset-block-end: 0; }
.ex-close { margin: 0; display: grid; gap: .35rem; }
.ex-close div { display: flex; justify-content: space-between; gap: 1rem; }
.ex-close dt { color: var(--muted); }
.ex-close dd { margin: 0; font-variant-numeric: tabular-nums; }
.ex-close-total { border-block-start: 1px solid var(--line); padding-block-start: .4rem; font-weight: 700; }
.ex-close-total dt { color: inherit; }
.ex-owed-head { display: flex; justify-content: space-between; gap: 1rem; margin: 0; }
.ex-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ex-cats input[name="name"] { flex: 1 1 12rem; }
@media (min-width: 48rem) {
  .ex-filters { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

/* Partner's month grid (partner_home.dtl): one square a day, its band as a
   colour and a word in its label; never a count. */
.pg-clinic { padding-block: .75rem; border-block-start: 1px solid var(--line); }
.pg-row { display: flex; gap: .5rem; align-items: center; margin-block: .25rem; }
.pg-label { flex: 0 0 5.5rem; }
.pg-grid { display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; flex: 1; max-width: 32rem; }
@media (min-width: 40rem) { .pg-grid { grid-template-columns: repeat(30, 1fr); } }
.pg-cell { display: inline-block; aspect-ratio: 1; min-width: .7rem; border-radius: 2px; background: var(--line); }
.pg-cell.red { background: var(--danger); }
.pg-cell.orange { background: #E8890C; }
.pg-cell.green { background: var(--ok); }
.pg-legend .pg-cell { inline-size: .8rem; vertical-align: middle; margin-inline-start: .5rem; }

/* Patient page → Treatment courses: details first, the actions wrap below on a phone. */
.course-list li { flex-wrap: wrap; row-gap: .5rem; }
.course-list li > .main { flex: 1 1 18rem; min-inline-size: 0; }
.course-list .course-close { flex-basis: 100%; }

/* A token that is a treatment course sitting: the course and which sitting. */
.course-tag { color: var(--primary); font-weight: 500; }
/* A course's lines in its drawer: item, qty, price, when, (sitting), remove. */
.course-lines { display: grid; gap: .5rem; }
/* Two rows a line: the item with its remove button; then qty, price, when,
   and the sitting number when "at sitting". */
.course-lines .cl-line { display: grid; grid-template-columns: 4rem 7rem minmax(0, 1fr) auto; gap: .4rem; align-items: center;
  padding-block-end: .5rem; border-block-end: 1px solid var(--line-soft); }
.course-lines .cl-line > * { min-inline-size: 0; }
.course-lines .cl-item { grid-row: 1; grid-column: 1 / 4; }
.course-lines .cl-line > button { grid-row: 1; grid-column: 4; }
.course-lines .cl-qty { grid-row: 2; grid-column: 1; }
.course-lines .cl-price { grid-row: 2; grid-column: 2; }
.course-lines .cl-at { grid-row: 2; grid-column: 3; }
.course-lines .cl-sit { grid-row: 2; grid-column: 4; inline-size: 3.5rem; }
.course-incl { margin: 0; display: grid; gap: .15rem; }
/* An invoice's treatment course: its name over its lines, which sit indented. */
.bl-course-head td { padding-block-start: .6rem; border-block-end: 0; }
.bl-in-course .bl-desc { padding-inline-start: 1rem; }
@media (max-width: 480px) { .course-lines .cl-line { grid-template-columns: 3.25rem 5.5rem minmax(0, 1fr) auto; } }

/* Settings → Billing → Attach rate plan: what the target has now, the plans to pick from. */
.at-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.at-plans fieldset { border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; margin: 0; display: grid; gap: .35rem; }
.at-plans legend { padding: 0 .25rem; font-weight: 600; }

/* A drop-down with its own search box inside the panel (Attach rate plan). */
.pick { position: relative; }
.pick-btn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; inline-size: 100%; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.pick-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pick-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.pick-panel { position: absolute; inset-inline: 0; inset-block-start: calc(100% + .35rem); z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: .5rem; }
.pick-panel input[type=search] { inline-size: 100%; margin-block-end: .35rem; }
.pick-list { max-block-size: 18rem; overflow: auto; display: grid; }
.pick-group { margin: .5rem .5rem .15rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pick-opt { padding: .5rem .6rem; border-radius: 8px; color: var(--text); text-decoration: none; }
.pick-opt:hover, .pick-opt:focus-visible { background: var(--primary-soft); outline: none; }
.pick-opt.on { font-weight: 600; color: var(--primary); }
/* A bill's payment with its refunds under it (bill_panel.dtl). */
.list li.pay-row { flex-wrap: wrap; }
.list li.pay-row > .main { flex: 1; }
.pay-refund, .pay-refund-form { flex-basis: 100%; }
.pay-refund { color: var(--muted); }
/* A partner's To do (partner_home.dtl): each reminder on a line, Call and Done at its end. */
.pt-todo h3 { margin: .75rem 0 .25rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pt-todo-list { list-style: none; margin: 0; padding: 0; }
.pt-todo-list li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .55rem 0; border-block-end: 1px solid var(--line-soft); }
.pt-todo-list li:last-child { border-block-end: 0; }
.pt-todo-list li > .row { flex-wrap: nowrap; flex-shrink: 0; }
/* A partner's doctor's tag: rep visit, both, software. */
.pill.pt-tag-rep_visit { background: color-mix(in srgb, var(--amber, #f59e0b) 18%, transparent); }
.pill.pt-tag-both { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.pill.pt-tag-software { background: var(--primary-soft); color: var(--primary); }
.pt-actions { gap: .4rem; flex-wrap: nowrap; justify-content: flex-end; }
/* A partner's doctors on a phone: each a card — the doctor, then tag, product
   and status on one line, the latest, and Introduce / Activity. */
@media (max-width: 40rem) {
  .pt-doctors thead { display: none; }
  .pt-doctors, .pt-doctors tbody, .pt-doctors tr, .pt-doctors td { display: block; inline-size: auto; }
  .pt-doctors tr { padding: .65rem 0; border-block-end: 1px solid var(--line-soft); }
  .pt-doctors td { border: 0; padding: .15rem 0; }
  .pt-doctors td.pt-inline { display: inline-block; margin-inline-end: .4rem; font-size: .9rem; }
  .pt-doctors .pt-actions { justify-content: flex-start; margin-block-start: .35rem; }
}

/* The bill's actions on a phone: closer together and a little narrower, so
   more fit on each line (Back, Print, Send on WhatsApp, Cancel, Reissue, Add bill). */
@media (max-width: 640px) {
  .bill-actions { gap: .4rem; }
  .bill-actions .btn { padding-inline: .55rem; }
}

/* Feels like an app on a phone: no tap delay or double-tap zoom on controls,
   a press that shows, no long-press callouts or text selection on the chrome,
   and drawers that scroll on their own without dragging the page. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }
dialog.drawer .drawer-body, dialog.drawer .drawer-panel { overscroll-behavior: contain; }
@media (pointer: coarse) {
  .btn, .tabbar a, .tabbar .tab-group, .who, .icon-btn, .filter-chip { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .btn:active:not(:disabled) { transform: scale(.97); }
  .tabbar a:active, .tabbar .tab-group:active { background: var(--primary-soft); }
}

/* The add-to-home-screen card: above the tab bar, once. */
.install-hint { position: fixed; inset-inline: 12px; inset-block-end: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 9; display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 28px rgb(0 0 0 / .16); }
.install-hint[hidden], .install-hint [hidden] { display: none; }
.install-hint img { border-radius: 10px; flex: 0 0 auto; }
.install-hint .install-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.install-hint .install-x { background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--muted); padding: .25rem .4rem; cursor: pointer; }
/* "Don't ask again": a quiet link, plain on the last showing. */
.install-never { align-self: flex-start; background: none; border: 0; padding: .2rem 0; font: inherit; font-size: .8rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.install-never.is-last { color: var(--text); font-weight: 600; }
/* An iPhone's steps, opened by "Show me how": Safari's own icons beside each. */
.install-steps { flex-basis: 100%; list-style: none; margin: .35rem 0 .15rem; padding: 0; display: grid; gap: .45rem; counter-reset: step; }
.install-steps li { display: grid; grid-template-columns: 1.4rem 1.2rem 1fr; align-items: start; gap: .4rem; font-size: .9rem; line-height: 1.35; counter-increment: step; }
.install-steps li::before { content: counter(step); display: grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: .78rem; }
.install-steps svg { margin-block-start: .1rem; color: var(--primary); }
/* On the sign-in page: in the page under the form, never over it. */
.install-login { max-width: 26rem; margin: -1rem auto 2rem; display: flex; gap: .85rem; align-items: flex-start; }
.install-login[hidden], .install-login [hidden] { display: none; }
.install-login img { border-radius: 11px; flex: 0 0 auto; }
.install-login .install-text { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.install-login .install-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-block-start: .35rem; }
/* A computer: open the sign-in page on a phone instead. */
.login-qr { display: none; }
@media (min-width: 861px) and (pointer: fine) {
  .login-qr { max-width: 26rem; margin: -1rem auto 2rem; display: flex; gap: 1rem; align-items: center; }
  .login-qr p { margin: .25rem 0 0; }
  .login-qr .qr-mini { flex: 0 0 7.5rem; inline-size: 7.5rem; }
}

/* The policy pages (terms, payments, privacy, contact) and the public footer's links. */
/* Pricing (/pricing, landing_pricing.dtl): three plan cards, the combined plan framed as the whole. */
.landing .pricing-hero { padding-block: 2.5rem 2rem; text-align: center; display: grid; justify-items: center; }
.landing .pricing-hero h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); max-width: 18ch; }
.landing .pricing-hero .lede { max-width: 38rem; margin-block-end: .5rem; }
.landing .pricing-hero .fine { max-width: 36rem; margin-top: .5rem; }
.landing .ea-badge { display: inline-block; margin: 0 0 1.25rem; padding: .45rem 1rem; border-radius: 999px; background: var(--flag-bg); color: var(--flag-ink); border: 1px solid var(--flag); font-weight: 600; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; }
.landing .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.landing .plan { display: flex; flex-direction: column; gap: .75rem; background: var(--paper); border: 1px solid var(--line); border-radius: 1.5rem; padding: 1.75rem; min-width: 0; }
.landing .plan .product-tag { align-self: flex-start; }
.landing .plan h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0; max-width: none; }
.landing .plan-desc { margin: 0; color: var(--ink-soft); }
.landing .plan-price { display: grid; gap: .1rem; padding-block: .5rem; border-block: 1px solid var(--line); }
.landing .plan-was { color: var(--ink-soft); font-size: .95rem; }
.landing .plan-was s { text-decoration-thickness: 2px; }
.landing .plan-now { font-family: var(--display); font-weight: 750; font-size: 3.4rem; line-height: 1; color: var(--violet); }
.landing .plan-life { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); font-size: .9rem; }
.landing .plan .btn { align-self: stretch; }
.landing .plan-features { margin: .25rem 0 0; padding-inline-start: 1.2rem; display: grid; gap: .4rem; color: var(--ink-soft); font-size: 1rem; }
.landing .plan-features strong { color: var(--ink); }
.landing .plan-both { border: 2px solid var(--violet); background: var(--wash); }
.landing .plans-note { margin: 1.5rem auto 0; max-width: 48rem; text-align: center; color: var(--ink-soft); font-size: .95rem; }
.landing .ea-why-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }
.landing .ea-why-grid p { color: var(--ink-soft); }
.landing .pricing-cta { text-align: center; }
.landing .pricing-cta h2 { margin-inline: auto; }
.landing .pricing-cta .intro { margin-inline: auto; max-width: 36rem; }
.landing .pricing-cta .actions { justify-content: center; margin-top: 1.5rem; }
@media (max-width: 900px) {
  .landing .plans, .landing .ea-why-grid { grid-template-columns: 1fr; }
  .landing .ea-why-grid { gap: 1.5rem; }
  .landing .plan { padding: 1.4rem; }
  .landing .plan-now { font-size: 2.8rem; }
}
@media (max-width: 480px) {
  .landing .pricing-cta .actions .btn { flex: 1 1 100%; }
  .landing .ea-badge { font-size: .75rem; letter-spacing: .03em; }
}
.landing .policy { padding-block: 2.5rem 1rem; line-height: 1.65; }
.landing .policy > * { max-width: 46rem; }
.landing .policy h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 .25rem; }
.landing .policy h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }
.landing .policy h3 { font-size: 1.02rem; margin: 1.25rem 0 .35rem; }
.landing .policy ul { padding-inline-start: 1.25rem; }
.landing .policy li { margin-block: .35rem; }
.landing .policy-meta { color: var(--ink-soft, var(--muted)); margin-block-end: 1.5rem; }
.landing .policy-contact { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; }
.landing .policy-contact dt { font-weight: 600; }
.landing .policy-contact dd { margin: 0; }
.landing .site-footer .footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.landing .about-lead { font-size: 1.15rem; }
.landing .about-certs { inline-size: 100%; border-collapse: collapse; }
.landing .about-certs th, .landing .about-certs td { text-align: start; padding: .5rem .75rem .5rem 0; border-block-end: 1px solid var(--line-soft, #e6e2ef); }
.landing .by-mocdoc a { font-weight: 600; }
.landing .about-certs td:nth-child(2) { white-space: nowrap; }