:root {
  --bg:#f3f6f7; --surface:#fff; --ink:#0f1f24; --muted:#5a6b72; --line:#e1e8ea; --line-strong:#cbd6d9;
  --brand:#0f766e; --brand-ink:#fff; --brand-strong:#0b5d57; --brand-soft:#e3f3f1; --brand-glow:#99e2d8;
  --good:#15803d; --good-soft:#e7f6ec; --warn:#b45309; --warn-soft:#fdf3e2; --bad:#b91c1c; --bad-soft:#fdeceb;
  --due:#6d28d9; --due-soft:#f1eaff; --radius:12px;
  --hover:#f4f8f8; --chip:#edf2f3; --chip-ink:#34474d;
  --side:#0b2b2c; --side-ink:#cfe3e1; --side-group:#7fa6a3; --side-hover:#12403f; --side-line:#1a4a49;
  --shadow:0 1px 2px rgba(15,31,36,.06),0 1px 1px rgba(15,31,36,.03);
  --pop:0 12px 32px rgba(15,31,36,.18);
  --font:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@view-transition {navigation:auto;}
::view-transition-old(root), ::view-transition-new(root) {animation-duration:120ms;}

* {box-sizing:border-box;}
html {-webkit-text-size-adjust:100%;}
body {margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 var(--font); font-variant-numeric:tabular-nums;}
a {color:var(--brand); text-decoration:none;}
a:hover {text-decoration:underline;}
h1, h2, h3 {line-height:1.25; margin:0; letter-spacing:-.01em;}
h1 {font-size:22px;} h2 {font-size:16px;} h3 {font-size:14px;}
p {margin:0 0 12px;}
small, .muted {color:var(--muted);}
.nowrap {white-space:nowrap;}
.pre {white-space:pre-wrap;}
code {font-family:var(--mono); font-size:.92em;}
[hidden] {display:none !important;}
.pos, .green {color:var(--good);} .neg, .red {color:var(--bad);}
.section-h {font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 8px 2px;}

/* shell */
.shell {display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh;}
.side {background:var(--side); color:var(--side-ink); padding:16px 12px; position:sticky; top:0; height:100vh; overflow-y:auto;}
.brand {display:flex; align-items:center; gap:10px; padding:4px 8px 16px; color:#fff; font-weight:650;}
.brand:hover {text-decoration:none;}
.brand img {width:34px; height:34px; border-radius:50%; background:#fff;}
.brand span {line-height:1.15; font-size:14px;}
.brand small {display:block; color:var(--side-group); font-weight:500; font-size:11px; letter-spacing:.08em;}
.nav {display:flex; flex-direction:column; gap:1px;}
.nav .group {font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--side-group); padding:14px 10px 4px;}
.nav a {color:var(--side-ink); padding:7px 10px; border-radius:8px; display:flex; align-items:center; gap:9px;}
.nav a:hover {background:var(--side-hover); text-decoration:none; color:#fff;}
.nav a.on {background:var(--brand-glow); color:#062a27; font-weight:600;}
.nav svg {width:16px; height:16px; flex:none; opacity:.85;}
.side .who {border-top:1px solid var(--side-line); margin-top:14px; padding:12px 10px 0; font-size:13px;}
.side .who a {color:#fff;}
.who-roles {color:var(--side-group); font-size:12px; margin:2px 0 6px;}
.linkbtn {background:none; border:0; padding:0; color:var(--side-group); cursor:pointer; font:inherit;}
.linkbtn:hover {color:#fff; text-decoration:underline;}
main {padding:24px 32px 64px; width:100%; min-width:0;}
.appbar, .tabbar {display:none;}

/* page header */
.head {display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.head p {margin:4px 0 0; color:var(--muted);}
.crumbs {font-size:13px; color:var(--muted); margin-bottom:4px;}
.actions {display:flex; gap:8px; flex-wrap:wrap; align-items:center;}

/* surfaces */
.card {background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); container-type:inline-size;}
.pad {padding:16px;}
.card + .card, .card + .grid, .grid + .card, .grid + .grid, form + .card, .btn-row + .card, .card + form, .card + .btn-row, .setup + .card {margin-top:16px;}
.card-h {display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line);}
.card .card:not(.reason-form) {border:0; box-shadow:none; padding:0; background:transparent;}
.grid {display:grid; gap:16px;}
.grid > * {margin-top:0 !important; min-width:0;}
.g2 {grid-template-columns:repeat(2,minmax(0,1fr));} .g3 {grid-template-columns:repeat(3,minmax(0,1fr));} .g4 {grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1000px) {.g3, .g4 {grid-template-columns:repeat(2,minmax(0,1fr));}}
dl.facts {display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:0;}
dl.facts dt {color:var(--muted);}
dl.facts dd {margin:0; font-weight:500;}
.info-box, .warn-box, .bad-box {border-left:4px solid var(--brand); background:var(--brand-soft); margin-bottom:16px;}
.warn-box {border-left-color:var(--warn); background:var(--warn-soft);}
.bad-box {border-left-color:var(--bad); background:var(--bad-soft);}
.info-box .btn-row {margin-top:10px;}

/* tables (become cards in narrow containers) */
.table-wrap {overflow-x:auto;}
table {width:100%; border-collapse:collapse;}
th, td {text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
th {font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; background:#f8fafa; white-space:nowrap;}
tbody tr:last-child td {border-bottom:0;}
tbody tr:hover td {background:var(--hover);}
td.num, th.num {text-align:right; white-space:nowrap;}
tfoot td {font-weight:650; border-top:1px solid var(--line-strong); border-bottom:0; background:#f8fafa;}
td small.muted {display:block;}
tr[data-href] {cursor:pointer;}
.empty {padding:28px 16px; text-align:center; color:var(--muted);}
.empty-cta {margin-top:10px;}
@container (max-width:480px) {
  .table-wrap:has(table.cards) {overflow:visible;}
  table.cards thead {display:none;}
  table.cards, table.cards tbody, table.cards tfoot, table.cards tr {display:block; width:100%;}
  table.cards tr {padding:12px 16px; border-bottom:1px solid var(--line);}
  table.cards tbody tr:last-child {border-bottom:0;}
  table.cards td {display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:3px 0; border:0; text-align:right; background:none !important;}
  table.cards td::before {content:attr(data-label); flex:none; color:var(--muted); font-size:13px; font-weight:500; text-align:left;}
  table.cards td:first-child {display:block; padding:0 0 6px; text-align:left; font-weight:650; font-size:15.5px;}
  table.cards td:first-child::before {display:none;}
  table.cards td:first-child .muted, table.cards td:first-child small {display:block; font-size:13px; font-weight:500;}
  table.cards td:empty {display:none;}
}
@media (min-width:900px) {.table-wrap > table:not(.lines) > tbody > tr > td:first-child {min-width:170px;}}

/* badges */
.badge {display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; background:var(--chip); color:var(--chip-ink); white-space:nowrap;}
.badge.good {background:var(--good-soft); color:var(--good);}
.badge.warn {background:var(--warn-soft); color:var(--warn);}
.badge.bad {background:var(--bad-soft); color:var(--bad);}
.badge.brand {background:var(--brand-soft); color:var(--brand-strong);}
.badge.due {background:var(--due-soft); color:var(--due);}
.badges {display:inline-flex; gap:4px; flex-wrap:wrap; vertical-align:middle;}

/* forms */
form {margin:0;}
form.inline {display:inline;}
.form {display:grid; gap:14px; grid-template-columns:minmax(0,1fr);}
.fields {display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
.fields > * {min-width:0;}
@supports (grid-template-rows:subgrid) {
  .fields > * {grid-row:span 3;}
  .fields > label:not(.check) {grid-template-rows:subgrid; row-gap:4px; align-content:start;}
  .fields > label:not(.check) > span:first-child {align-self:end;}
  .fields > :not(label) {align-self:end;}
  .fields > label.check {align-self:end; padding-bottom:8px;}
}
.span2 {grid-column:span 2;} .span-all {grid-column:1 / -1;}
label {display:grid; gap:4px; font-weight:550; font-size:13px;}
label .hint {font-weight:400; color:var(--muted); font-size:12px;}
input, select, textarea {font:inherit; color:inherit; width:100%; min-width:0; max-width:100%; padding:8px 10px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; min-height:38px;}
textarea {min-height:70px; resize:vertical;}
input[type='date'], input[type='month'], input[type='time'] {display:block;}
@supports (-webkit-touch-callout:none) {
  input[type='date'], input[type='month'], input[type='time'] {-webkit-appearance:none; appearance:none; text-align:left; line-height:1.4;}
  input::-webkit-date-and-time-value {text-align:left; margin:0; min-height:1.4em;}
}
input:focus, select:focus, textarea:focus {outline:2px solid var(--brand-glow); outline-offset:0; border-color:var(--brand);}
input[type='checkbox'], input[type='radio'] {width:auto; min-height:0; padding:0; flex:none; accent-color:var(--brand);}
input[readonly] {background:#f5f8f8;}
.check {display:flex; align-items:center; gap:8px; font-weight:500; flex-wrap:wrap;}
.check .hint {flex-basis:100%; padding-left:24px;}
fieldset.choices {border:0; margin:0; padding:0; min-width:0;}
fieldset.choices legend {padding:0; margin-bottom:8px; font-weight:600; font-size:13px;}
.choices .opts {display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:6px 12px;}
.choices .check, .role.check {padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); margin:0;}
.choices .check:has(input:checked), .role.check:has(input:checked) {border-color:var(--brand); background:var(--brand-soft);}
form.form > .card > .pad > * + * {margin-top:14px;}
form.form > .card > .pad > p {margin-bottom:0;}
form.form > p {margin:0;}
.filters {display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin-bottom:14px;}
.filters label {min-width:150px;}
.js .auto-apply {display:none;}
.form-inline {display:flex; gap:10px; align-items:end; flex-wrap:wrap;}
.add-row {border-top:1px solid var(--line); align-items:end;}
/* required marker and inline validation */
label:has(> input:required, > select:required, > textarea:required, > .select-add select:required, > .age-in input:required) > span:first-child:not(:has(.lt))::after,
label:has(> input:required, > select:required, > textarea:required, > .select-add select:required, > .age-in input:required) > span:first-child > .lt::after {content:' *'; color:var(--bad); font-weight:600;}
label .help {font-weight:400; color:var(--muted); font-size:12.5px; line-height:1.4;}
label .help::first-letter {text-transform:uppercase;}
.field-error {display:block; color:var(--bad); font-size:12.5px; margin-top:4px; font-weight:500;}
label.invalid input, label.invalid select, label.invalid textarea, input.invalid {border-color:var(--bad); box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 15%,transparent);}
.tip {color:var(--muted); font-size:12.5px; margin:8px 0 0;}

/* buttons */
.btn {display:inline-flex; align-items:center; justify-content:center; gap:6px; font:inherit; font-weight:600; padding:8px 14px; border-radius:8px; border:1px solid var(--line-strong); background:#fff; color:var(--ink); cursor:pointer; min-height:38px; white-space:nowrap;}
.btn:hover {text-decoration:none; background:var(--hover);}
.btn.primary {background:var(--brand); border-color:var(--brand); color:var(--brand-ink);}
.btn.primary:hover {background:var(--brand-strong);}
.btn.danger {color:var(--bad); border-color:#efc4c1;}
.btn.danger:hover {background:var(--bad-soft);}
.btn.danger-solid {background:var(--bad); border-color:var(--bad); color:#fff;}
.btn.ghost {border-color:transparent; background:transparent;}
.btn.sm {padding:4px 10px; min-height:30px; font-size:13px;}
.btn.on {border-color:var(--brand); color:var(--brand); background:var(--brand-soft);}
.btn.wide {width:100%;}
.btn svg {width:18px; height:18px; flex:none;}
.btn[disabled] {opacity:.6; cursor:default;}
.btn-row {display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.pager {justify-content:flex-end;}

/* alerts, flash, copy row */
.alert {padding:10px 14px; border-radius:8px; margin-bottom:16px; border:1px solid;}
.alert.error {background:var(--bad-soft); border-color:#f2c5c2; color:#8c1616;}
.alert.ok {background:var(--good-soft); border-color:#bfe5cb; color:#135f30;}
.alert.info {background:var(--brand-soft); border-color:#bfe3de; color:var(--brand-strong);}
.alert-link {font-weight:650; color:inherit; text-decoration:underline; margin-left:4px;}
.copy-row {display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}
.copy-row input {flex:1 1 260px; min-height:32px; font-family:var(--mono); font-size:12.5px; background:#fff; color:var(--ink);}
.link-block + .link-block {margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
.link-block p {margin:2px 0 0;}
.link-block .btn-row {margin-top:8px;}

/* guides, steps, pills */
details > summary {cursor:pointer; font-weight:600; color:var(--brand); padding:2px 0;}
details[open] > summary {margin-bottom:10px;}
details.guide {background:#eef8f6; border:1px solid #cde8e3; border-radius:var(--radius); padding:10px 14px; margin-bottom:16px;}
details.guide > summary {color:var(--brand-strong); display:flex; align-items:center; gap:8px; list-style:none;}
details.guide > summary::-webkit-details-marker {display:none;}
details.guide[open] > summary {margin-bottom:6px;}
.guide-i {width:20px; height:20px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; flex:none;}
.guide-body {color:#21403f; font-size:13.5px;}
.guide-body > :last-child {margin-bottom:0;}
.guide-body ol, .guide-body ul {margin:4px 0 8px; padding-left:20px;}
.steps {list-style:none; margin:0 0 16px; padding:14px 16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;}
.steps li, .steps li > div {min-width:0;}
.steps li {display:flex; gap:10px; align-items:flex-start;}
.steps .dot {flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:12px; background:var(--chip); color:var(--muted); border:1px solid var(--line-strong);}
.steps li.done .dot {background:var(--good); border-color:var(--good); color:#fff;}
.steps li.current .dot {background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 0 0 4px var(--brand-soft);}
.steps strong {display:block; font-size:13.5px;}
.steps li.todo strong, .steps li.done strong {color:var(--muted);}
.steps small {display:block; color:var(--muted); font-size:12px; margin-bottom:6px;}
.steps .btn {margin:2px 4px 0 0; white-space:normal; text-align:left; line-height:1.25;}
.steps .step-post {border:1px solid var(--line-strong); background:var(--surface);}
.steps form {display:inline;}
.step-link {font-size:12px; margin-right:8px;}
.tabs {display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px;}
.tabs a {padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:550; font-size:13px;}
.tabs a.on {background:var(--ink); color:#fff; border-color:var(--ink);}
.tabs a:hover {text-decoration:none;}
.pill-n {display:inline-block; margin-left:6px; padding:0 6px; border-radius:9px; background:var(--chip); color:var(--muted); font-size:11.5px; font-weight:650;}
.tabs a.on .pill-n {background:rgba(255,255,255,.2); color:#fff;}

/* pickers, quick add, type-to-search */
.select-add {display:flex; gap:6px; align-items:stretch; min-width:0;}
.select-add select, .select-add .combo {flex:1; min-width:0;}
.select-add .quick {padding:0 10px; color:var(--brand); font-weight:650; flex:none;}
.select-add .quick.sm {min-height:0; padding:0 9px; font-size:16px;}
body:not([data-can-add~="locality"]) .quick[data-kind="locality"],
body:not([data-can-add~="charge"]) .quick[data-kind="charge"],
body:not([data-can-add~="paymode"]) .quick[data-kind="paymode"],
body:not([data-can-add~="doctor"]) .quick[data-kind="doctor"],
.filters .quick {display:none;}
.combo {position:relative; display:block; flex:1; min-width:0;}
.combo-native {position:absolute; inset:0; opacity:0; pointer-events:none;}
.combo-input {padding-right:28px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b72' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; text-overflow:ellipsis;}
.combo.invalid .combo-input {border-color:var(--bad);}
.combo-list {position:fixed; z-index:60; top:0; left:0; width:max-content; max-width:min(92vw,520px); max-height:300px; overflow:auto; margin:0; padding:4px; list-style:none; background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--pop);}
.combo-list li {padding:8px 10px; border-radius:6px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.combo-list li[aria-selected='true'] {font-weight:650;}
.combo-list li.active {background:var(--brand-soft);}
.combo-list li.combo-note {color:var(--muted); cursor:default; font-size:13px; white-space:normal;}
dialog.quick-dialog, dialog.ask-dialog {border:0; border-radius:14px; box-shadow:0 20px 60px rgba(15,31,36,.35);}
dialog.quick-dialog::backdrop, dialog.ask-dialog::backdrop {background:rgba(8,32,32,.45);}
dialog.quick-dialog {padding:0; width:min(760px,96vw); max-height:92vh; overflow:hidden;}
dialog.quick-dialog header {display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line);}
dialog.quick-dialog iframe {display:block; width:100%; height:360px; max-height:calc(92vh - 54px); border:0; background:var(--bg);}
dialog.ask-dialog {padding:20px; width:min(420px,92vw);}
dialog.ask-dialog p {margin:0 0 18px; font-size:15px;}
dialog.ask-dialog .btn-row {justify-content:flex-end;}
body.embed {background:var(--bg); --tabbar-h:0px;}
body.embed main {padding:16px;}
body.embed .crumbs, body.embed .head .actions, body.embed .head h1, body.embed a.btn.ghost, body.embed .appbar, body.embed details.guide {display:none !important;}
body.embed .head {margin-bottom:10px;}
body.embed .head:not(:has(p)) {display:none;}

/* reason pop-over */
details.reason-pop {position:relative; display:inline-block;}
details.reason-pop > summary {list-style:none;}
details.reason-pop > summary::-webkit-details-marker {display:none;}
details.reason-pop[open] > summary {margin-bottom:0;}
details.reason-pop .reason-form {position:absolute; z-index:20; top:calc(100% + 6px); left:0; width:min(360px,86vw); box-shadow:var(--pop); display:grid; gap:10px; text-align:left; white-space:normal; font-weight:400;}
.head .actions details.reason-pop .reason-form {left:auto; right:0;}

/* line editors: <table class="lines" data-lines> */
.lines td {padding:6px 8px; vertical-align:middle;}
.lines input, .lines select {min-width:90px;}
.lines .rm {color:var(--bad);}
.rm-text {display:none;}

/* weekly hours editor */
.hours {display:grid; gap:8px;}
.hours .day {display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:8px 12px; align-items:start; padding:8px 0; border-bottom:1px solid var(--line);}
.hours .day-name {font-weight:600; padding-top:8px;}
.sessions {display:grid; gap:6px;}
.session {display:flex; gap:6px; align-items:center;}
.session input[type='time'] {width:auto; min-width:7.5em;}
.session .to {color:var(--muted);}
html:not(.js) [data-add-session], html:not(.js) [data-rm-session], html:not(.js) [data-copy-monday] {display:none;}
.roles {display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.role.check {align-items:flex-start;}
.role.check input {margin-top:3px;}
.role small {display:block; font-weight:400; margin-top:2px;}

/* photos */

/* More menu */
.menu-group {margin-bottom:22px;}
.menu-group h2 {font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 8px 2px;}
.profile-row {display:flex; gap:12px; align-items:center; padding:14px 16px; margin-bottom:22px; color:var(--ink);}
.profile-row:hover {text-decoration:none;}
.profile-row small {display:block;}
.avatar {width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:#fff; font-weight:700; font-size:18px; flex:none;}
.menu-list a {display:flex; align-items:center; gap:12px; padding:14px 16px; color:var(--ink); border-bottom:1px solid var(--line); font-weight:550;}
.menu-list a:last-child {border-bottom:0;}
.menu-list a:hover {text-decoration:none; background:var(--hover);}
.menu-list a::after {content:'›'; margin-left:auto; color:var(--muted); font-size:20px; line-height:1;}
.menu-list svg {width:20px; height:20px; color:var(--brand); flex:none;}
.menu-list small {display:block; color:var(--muted); font-weight:400; font-size:12.5px;}

/* chart */
.only-narrow {display:none;}
.chart {width:100%; height:auto; display:block;}
.chart .axis {stroke:var(--line);}
.chart text {fill:var(--muted); font-size:11px;}

/* sign-in pages */
.auth {min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:radial-gradient(circle at 20% 0%,#dff1ee 0,transparent 50%),var(--bg);}
.auth .card {width:100%; max-width:380px;}
.auth .logo {display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:18px; text-align:center;}
.auth .logo img {width:72px; height:72px; border-radius:50%;}
.auth .logo h1 {font-size:18px;}
.auth .switch {text-align:center; margin-top:14px; font-size:13px; display:grid; gap:6px;}

/* patient-facing pages */
body.public {font-size:16px;}
body.public .public-head {display:flex; gap:12px; align-items:center; max-width:520px; margin:0 auto; padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 8px;}
body.public .public-head img {width:40px; height:40px; border-radius:50%; background:#fff; flex:none;}
body.public .public-head strong {display:block; font-size:18px;}
body.public .public-head small {display:block; font-size:13px;}
body.public main {max-width:520px; margin:0 auto; padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 40px);}
body.public h1 {font-size:20px; margin-bottom:8px;}
body.public input, body.public select, body.public textarea {font-size:16px; min-height:48px; border-radius:10px; padding:10px 12px;}
body.public .btn {min-height:48px; font-size:16px; border-radius:10px;}
body.public .btn.primary {width:100%;}
body.public label {font-size:15px;}

/* printable documents */
.print-bar {margin-bottom:12px;}
.doc-head {display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:14px;}
.doc-brand {display:flex; gap:12px; align-items:flex-start;}
.doc-brand h1 {font-size:20px;}
.doc-title {font-size:18px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; margin-bottom:6px;}
.doc-foot {margin:16px 0 0; color:var(--muted); text-align:center;}
.doc-sign {display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px 24px; margin-top:48px;}
.doc-sign div {flex:0 1 220px; border-top:1px solid var(--line-strong); padding-top:6px; text-align:center; color:var(--muted);}
.print-only {display:none;}

/* Phones & tablets: app-style shell */
@media (max-width:1024px) {
  :root {--tabbar-h:62px; --safe-b:env(safe-area-inset-bottom,0px); --radius:14px;}
  body {font-size:15px;}
  .shell {grid-template-columns:minmax(0,1fr);}
  .side {display:none;}
  main {display:flex; flex-direction:column; padding:0 16px calc(var(--tabbar-h) + var(--safe-b) + 28px);}
  main > * {flex:none;}
  a, button {-webkit-tap-highlight-color:transparent;}
  .appbar {order:-1; display:flex; align-items:center; gap:4px; position:sticky; top:0; z-index:15; margin:0 -16px 14px; padding:calc(env(safe-area-inset-top,0px) + 6px) 12px 6px; min-height:54px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
  .appbar .back {width:42px; height:42px; margin-left:-6px; display:grid; place-items:center; border-radius:50%; color:var(--ink); flex:none;}
  .appbar .back:active {background:var(--chip);}
  .appbar .back svg {width:26px; height:26px;}
  .appbar-title {font-weight:700; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .head h1, .crumbs {display:none;}
  .head {margin-bottom:14px;}
  .head > div:first-child:not(:has(p)) {display:none;}
  .head .actions {width:100%;}
  .head .actions:has(> :only-child) > *, .head .actions:has(> :only-child) .btn {flex:1 1 auto; min-height:46px;}
  .tabbar {display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:fixed; left:0; right:0; bottom:0; z-index:30; background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding-bottom:var(--safe-b); box-shadow:0 -4px 18px rgba(15,31,36,.06);}
  .tabbar a {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:var(--tabbar-h); color:#5f7076; font-size:11.5px; font-weight:600;}
  .tabbar a:hover {text-decoration:none;}
  .tabbar .ti {position:relative; display:grid; place-items:center; width:52px; height:28px; border-radius:14px; transition:background .15s;}
  .tabbar svg {width:23px; height:23px;}
  .tabbar a.on {color:var(--brand);}
  .tabbar a.on .ti {background:var(--brand-soft);}
  .tabbar a.new .ti {width:48px; height:48px; margin-top:-18px; border-radius:16px; background:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(15,118,110,.35);}
  .tabbar a.new.on .ti {background:var(--brand-strong);}
  input, select, textarea {font-size:16px; min-height:46px; border-radius:10px; padding:10px 12px;}
  input[type='checkbox'], input[type='radio'] {width:22px; height:22px; min-height:0; padding:0;}
  .btn {min-height:46px; padding:10px 16px; border-radius:10px; font-size:15px;}
  .btn.sm {min-height:38px; padding:6px 12px; font-size:14px;}
  label {font-size:14px;}
  .select-add .quick {min-width:46px;}
  .select-add .quick.sm {font-size:20px;}
  .form > .btn-row:last-child {position:sticky; bottom:calc(var(--tabbar-h) + var(--safe-b)); z-index:5; margin:4px -16px -16px; padding:12px 16px; background:rgba(255,255,255,.97); border-top:1px solid var(--line);}
  .form > .btn-row:last-child .btn.primary {flex:1 1 auto;}
  .tabs {flex-wrap:nowrap; overflow-x:auto; margin:0 -16px 14px; padding:0 16px 2px; scrollbar-width:none;}
  .tabs::-webkit-scrollbar {display:none;}
  .tabs a {flex:none; padding:9px 15px; font-size:14px;}
  .filters {display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  .filters label {min-width:0;}
  .filters > .btn {grid-column:1 / -1;}
  .menu-list a:active, tr[data-href]:active td, table.cards tr[data-href]:active {background:var(--brand-soft);}
  th, td {padding:8px 9px;}
  th {font-size:11px;}
}

/* Phones */
@media (max-width:700px) {
  .g2, .g3 {grid-template-columns:1fr;}
  .g4 {grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .grid {gap:12px;}
  .stat .value {font-size:18px;}
  .fields {grid-template-columns:1fr;}
  .span2 {grid-column:auto;}
  dl.facts {grid-template-columns:1fr; gap:0;}
  dl.facts dd {margin-bottom:8px;}
  .steps {grid-template-columns:1fr;}
  .only-wide {display:none;} .only-narrow {display:block;}
  .hours .day {grid-template-columns:minmax(0,1fr);}
  .hours .day-name {padding-top:0;}
  .hours .day > .btn {justify-self:start;}
  .session input[type='time'] {flex:1; min-width:0;}
  details.reason-pop {display:block;}
  details.reason-pop > summary {width:100%;}
  details.reason-pop .reason-form {position:static; width:100%; margin-top:8px;}
  dialog.quick-dialog {width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border-radius:0;}
  dialog.quick-dialog iframe {height:calc(100dvh - 54px) !important; max-height:none;}
  .combo-list {max-width:calc(100vw - 32px);}
  .combo-list li {padding:11px 10px;}
}
@media (max-width:480px) {.btn {white-space:normal; max-width:100%;}}

/* Phones & portrait tablets: line editors become one card per line */
@media (max-width:820px) {
  .lines thead {display:none;}
  .lines tbody, .lines tfoot {display:block;}
  .lines tbody tr {display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px; margin-bottom:10px; background:#f7fafa; border:1px solid var(--line); border-radius:12px;}
  .lines tbody td {display:block; min-width:0; padding:0; border:0; text-align:left; background:none !important;}
  .lines tbody td::before {content:attr(data-label); display:block; margin-bottom:4px; font-size:14px; font-weight:550;}
  .lines tbody td:first-child, .lines tbody td:has(.select-add) {grid-column:1 / -1;}
  .lines tbody td:empty {display:none;}
  .lines tbody td:has([data-amount]), .lines tbody td[data-amount] {grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline; padding-top:10px; border-top:1px dashed var(--line-strong); font-weight:650;}
  .lines tbody td:has(.rm) {grid-column:1 / -1; display:flex; justify-content:flex-end; margin:-6px -6px -8px 0;}
  .lines tbody td:has(.rm)::before {display:none;}
  .lines .rm {min-height:36px; padding:4px 8px; font-size:14px;}
  .lines .rm-text {display:inline;}
  .lines input, .lines select {min-width:0; background:#fff;}
  .lines tfoot tr {display:flex; justify-content:space-between; padding:4px 2px 0; font-size:16px;}
  .lines tfoot td {border:0; background:none; padding:0;}
  .lines tfoot td:empty {display:none;}
}

@media print {
  body {background:#fff; font-size:12px;}
  .side, .tabbar, .appbar, .no-print, details.guide {display:none !important;}
  .shell {display:block;}
  main {padding:0; max-width:none;}
  .card {box-shadow:none; border-color:#bbb;}
  .doc {border:0; padding:0;}
  .print-only {display:block;}
}

/* ==== OPD components (lead) ==== */
/* ---- token cards: one visit on a board or list ----
   <article class="tk s-waiting" data-visit="12">
     <span class="tk-no">7</span>                      token number, or the slot time for a booking: <span class="tk-no time">10:30<small>am</small></span>
     <div class="tk-main"><a class="tk-name" href="/visits/12">Ramesh Patel</a><small>45 y · Vastrapur · Follow-up</small></div>
     <div class="tk-side"><b>₹500</b><small>12 min</small></div>   optional: amount / waiting time / badge
     <div class="tk-act"><button class="btn sm primary">Check in</button></div>   optional: the next step
   </article>
   The whole card opens the visit (the name link is stretched); buttons in .tk-act stay clickable. */
.tk { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.tk + .tk { margin-top: 8px; }
.tk-no { grid-row: span 2; align-self: start; min-width: 46px; height: 46px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; background: #eef2f4; color: #3b4a52; line-height: 1; }
.tk-no.time { font-size: 13px; font-weight: 650; text-align: center; }
.tk-no.time small { display: block; font-size: 10px; font-weight: 600; color: inherit; opacity: 0.75; text-transform: uppercase; }
.tk-main { min-width: 0; }
.tk-name { display: block; font-weight: 650; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-name::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.tk-name:hover { text-decoration: none; }
.tk-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-side { text-align: right; white-space: nowrap; }
.tk-side b { display: block; font-size: 15px; }
.tk-side small { display: block; }
.tk-act { grid-column: 2 / -1; display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; margin-top: 4px; }
.tk-act:empty { display: none; }
.tk-act form { display: contents; }
.tk:hover { border-color: var(--line-strong); }
.tk:has(.tk-name:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.tk.s-waiting .tk-no { background: var(--warn-soft); color: var(--warn); }
.tk.s-consult .tk-no { background: var(--brand); color: #fff; }
.tk.s-billing .tk-no { background: var(--due-soft); color: var(--due); }
.tk.s-billing { border-color: #d9c8fb; }
.tk.s-done .tk-no { background: var(--good-soft); color: var(--good); }
.tk.s-cancelled, .tk.s-noshow { box-shadow: none; background: transparent; }
.tk.s-cancelled .tk-name, .tk.s-noshow .tk-name { color: var(--muted); text-decoration: line-through; }
.tk.late .tk-no { outline: 2px solid var(--warn); outline-offset: -2px; }
/* a token that just changed (live refresh) */
@keyframes tk-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--brand-glow); background: var(--brand-soft); } 100% { box-shadow: var(--shadow); background: var(--surface); } }
.tk.flash { animation: tk-flash 2.4s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .tk.flash { animation: none; outline: 3px solid var(--brand-glow); } }

/* ---- board: today's visits by stage ----
   <div class="board" id="board"> <section class="col" id="col-waiting"> <h2>Waiting <span class="pill-n">3</span></h2> …tk… </section> … </div>
   Wide screens: columns side by side. Phones: stacked; with .board[data-show="waiting"] only that column shows. */
.board { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; }
.col { background: #e9eff1; border-radius: 14px; padding: 10px; min-width: 0; }
.col > h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 2px 4px 8px; display: flex; align-items: center; gap: 6px; }
.col > h2 .pill-n { margin-left: 0; }
.col .none { color: var(--muted); font-size: 13px; padding: 10px 4px; }
.col.hot { background: var(--due-soft); }
.col.hot > h2 { color: var(--due); }
@media (max-width: 760px) {
  .board { grid-template-columns: 1fr; gap: 10px; }
  .col { background: transparent; padding: 0; }
  .col.hot { background: transparent; }
  .board[data-show] .col { display: none; }
  .board[data-show='billing'] #col-billing, .board[data-show='waiting'] #col-waiting, .board[data-show='consult'] #col-consult,
  .board[data-show='booked'] #col-booked, .board[data-show='done'] #col-done { display: block; }
  .board[data-show] .col > h2 { display: none; }
}

/* ---- "now seeing" hero on the doctor's board ---- */
.now { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: #fff; box-shadow: var(--shadow); }
.now .tk-no { background: rgba(255, 255, 255, 0.16); color: #fff; min-width: 72px; height: 72px; font-size: 34px; border-radius: 18px; }
.now h2 { font-size: 20px; color: #fff; }
.now small, .now .muted { color: rgba(255, 255, 255, 0.82); }
.now .tk-act { grid-column: 1 / -1; margin-top: 10px; }
.now .btn { background: #fff; color: var(--brand-strong); border-color: #fff; }
.now .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.now.idle { background: var(--surface); color: var(--ink); border: 1px dashed var(--line-strong); box-shadow: none; }
.now.idle h2 { color: var(--ink); }
.now.idle small { color: var(--muted); }
.now.idle .btn { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---- big amount ---- */
.amount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--due-soft); color: var(--due); }
.amount span { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.amount b { font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; }
.amount.paid { background: var(--good-soft); color: var(--good); }
.amount.plain { background: #eef2f4; color: var(--ink); }

/* ---- segmented choice (category, gender, walk-in or booking) ----
   <div class="seg"><label><input type="radio" name="category" value="new" checked><span>New case</span></label>…</div> */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { display: block; position: relative; font-weight: 550; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); text-align: center; }
.seg small { font-weight: 400; }
.seg input:checked + span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); box-shadow: inset 0 0 0 1px var(--brand); }
.seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.seg.fill label { flex: 1 1 0; }
.seg .suggested::after { content: 'suggested'; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand); margin-left: 2px; }

/* ---- days strip ----
   <nav class="days"><a class="day on" href="?date=2026-11-12"><small>Thu</small><b>12</b><small>Nov</small></a>…</nav>
   Also works as radios: <label class="day"><input type="radio" name="date" value="…"><span>…</span></label> */
.days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.days::-webkit-scrollbar { display: none; }
.days .day { position: relative; flex: none; min-width: 58px; padding: 7px 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); text-align: center; color: var(--ink); scroll-snap-align: start; line-height: 1.2; }
.days .day:hover { text-decoration: none; border-color: var(--brand); }
.days .day b { display: block; font-size: 18px; }
.days .day small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.days .day.on, .days .day:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; }
.days .day.on small, .days .day:has(input:checked) small { color: rgba(255, 255, 255, 0.85); }
.days .day.off { background: transparent; border-style: dashed; color: var(--muted); }
.days .day input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.days .day .dot { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }

/* ---- slot picker ----
   <div class="slots"><label class="slot full"><input type="radio" name="slot" value="630"><span><b>10:30 am</b><small>Full</small></span></label>…</div>
   .full .blocked .closed .past describe the slot; closed / past slots are disabled inputs. */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot { position: relative; display: block; font-weight: 400; }
.slot input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.slot > span, a.slot { display: block; padding: 8px 6px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); text-align: center; line-height: 1.25; color: var(--ink); }
.slot b { display: block; font-size: 14px; font-weight: 650; white-space: nowrap; }
.slot small { display: block; font-size: 11.5px; color: var(--good); font-weight: 600; }
.slot.full small { color: var(--warn); }
.slot.blocked > span, a.slot.blocked { background: repeating-linear-gradient(135deg, #f6f8f9, #f6f8f9 6px, #edf1f3 6px, #edf1f3 12px); }
.slot.blocked small { color: var(--muted); }
.slot.closed > span, .slot.past > span, a.slot.closed, a.slot.past { background: #f2f5f6; color: #93a1a7; border-style: dashed; }
.slot.closed small, .slot.past small { color: #93a1a7; }
.slot input:disabled { cursor: not-allowed; }
.slot input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.slot input:checked + span small { color: rgba(255, 255, 255, 0.9); }
.slot input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.slot-part { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 14px 0 6px; }
.slot-part:first-child { margin-top: 0; }

/* ---- pick one of a few records (patients found for a phone number) ----
   <label class="pick"><input type="radio" name="patient_id" value="3"><span><b>Ramesh Patel</b><small>45 y · Vastrapur · last seen 3 Mar</small></span></label> */
.picks { display: grid; gap: 8px; }
.pick { position: relative; display: block; font-weight: 400; }
.pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick > span { display: block; padding: 10px 12px 10px 42px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); position: relative; }
.pick > span::before { content: ''; position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--line-strong); background: #fff; }
.pick input:checked + span { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.pick input:checked + span::before { border-color: var(--brand); background: radial-gradient(var(--brand) 0 45%, #fff 50%); }
.pick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.pick b { display: block; font-size: 15px; font-weight: 650; }
.pick small { display: block; }
.pick.new > span { border-style: dashed; }

/* ---- who: patient header on a visit or profile ---- */
.who-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.who-card h2 { font-size: 17px; overflow-wrap: anywhere; }
.who-card .contact { display: flex; gap: 8px; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; color: var(--brand-strong); }
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn:hover { border-color: var(--brand); text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: #eef2f4; color: #3b4a52; font-size: 12.5px; font-weight: 550; white-space: nowrap; }
.alert.due, .note-due { background: var(--due-soft); color: var(--due); border-color: #d9c8fb; }

/* ---- visit history ---- */
.hist { list-style: none; margin: 0; padding: 0; }
.hist > li { padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.hist > li:last-child { border-bottom: 0; }
.hist .h-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.hist .h-top a { font-weight: 650; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs a, .thumbs .shot { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #eef2f4; display: block; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs.lg a, .thumbs.lg .shot { width: 104px; height: 104px; }
.shot .x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(15, 31, 36, 0.7); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }

/* ---- take a photo ---- */
.shoot { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 12px; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: #f8fafb; color: var(--brand-strong); font-weight: 650; cursor: pointer; text-align: center; }
.shoot:hover, .shoot:focus-within { border-color: var(--brand); background: var(--brand-soft); }
.shoot svg { width: 22px; height: 22px; }
.shoot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
dialog.viewer { border: 0; padding: 0; background: #000; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
dialog.viewer::backdrop { background: rgba(0, 0, 0, 0.9); }
dialog.viewer img { width: 100%; height: 100%; object-fit: contain; display: block; }
dialog.viewer .x { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 22px; cursor: pointer; }

/* ---- notices that pop up when a token moves ---- */
.toasts { position: fixed; z-index: 60; top: 14px; right: 14px; width: min(360px, calc(100vw - 28px)); display: grid; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #10292b; color: #fff; box-shadow: 0 10px 30px rgba(15, 31, 36, 0.28); font-size: 14px; line-height: 1.35; animation: toast-in 0.22s ease-out; }
.toast a { color: var(--brand-glow); font-weight: 650; white-space: nowrap; }
.toast .t-msg { flex: 1; min-width: 0; }
.toast button { background: none; border: 0; color: rgba(255, 255, 255, 0.7); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.toast.charged { background: #3b1a86; }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 760px) { .toasts { top: calc(env(safe-area-inset-top) + 58px); right: 10px; left: 10px; width: auto; } }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-right: 6px; vertical-align: 1px; }
.live-dot.off { background: var(--warn); }

/* ---- sticky primary action on phones ----
   <div class="actionbar"><button class="btn primary">Check in & give token</button></div> as the last child of a form */
.actionbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 1024px) {
  .actionbar { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); z-index: 5; margin: 6px -4px 0; padding: 10px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 20px rgba(15, 31, 36, 0.12); }
  .actionbar .btn { flex: 1 1 auto; justify-content: center; }
  .actionbar .btn:not(.primary) { flex: 0 1 auto; }
  body.embed .actionbar, body.public .actionbar { bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ---- token shown large after check-in ---- */
.token-big { text-align: center; padding: 22px 16px; }
.token-big .n { font-size: 72px; font-weight: 750; line-height: 1; letter-spacing: -0.03em; color: var(--brand-strong); }
.token-big .l { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 650; color: var(--muted); }

/* ---- money lines (charges, payments) on a visit ---- */
.sum-lines { width: 100%; }
.sum-lines td { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.sum-lines td.num { padding-left: 12px; }
.sum-lines tr:last-child td { border-bottom: 0; }
.sum-lines tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; background: none; font-weight: 700; padding-top: 9px; }
.sum-lines tbody tr:hover td { background: none; }

/* ---- slot admin: one row per slot ---- */
.slot-rows { display: grid; gap: 8px; }
.slot-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.slot-row.is-closed { background: #f2f5f6; }
.slot-row.is-blocked { background: repeating-linear-gradient(135deg, #fff, #fff 8px, #f3f6f7 8px, #f3f6f7 16px); }
.slot-row .t { font-weight: 650; white-space: nowrap; }
.slot-row .t small { display: block; font-weight: 400; }
.slot-row .seg span { min-height: 36px; padding: 4px 10px; font-size: 13px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--surface); }
.stepper button { width: 36px; height: 36px; border: 0; background: #f3f6f7; font-size: 18px; cursor: pointer; color: var(--ink); }
.stepper input { width: 44px; height: 36px; border: 0; border-radius: 0; text-align: center; padding: 0; -moz-appearance: textfield; appearance: textfield; background: transparent; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 640px) { .slot-row { grid-template-columns: minmax(0, 1fr) auto; } .slot-row .seg { grid-column: 1 / -1; order: 3; } }

/* ---- patient booking pages ---- */
.lang { display: flex; gap: 6px; margin-left: auto; }
.lang a { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; }
.lang a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pub-step { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-strong); margin-bottom: 4px; }
.confirm-box { text-align: center; padding: 20px 16px; }
.confirm-box .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--good-soft); color: var(--good); display: grid; place-items: center; margin: 0 auto 10px; font-size: 28px; }
.confirm-box .when { font-size: 20px; font-weight: 700; margin: 4px 0; }

/* ---- waiting-room screen ---- */
body.display { background: #06191a; color: #fff; min-height: 100vh; margin: 0; padding: 3vh 3vw; font-size: clamp(16px, 1.6vw, 28px); }
.tv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 3vh; }
.tv-head h1 { font-size: 1.6em; color: #fff; }
.tv-head time { font-size: 1.4em; font-weight: 600; color: var(--brand-glow); font-variant-numeric: tabular-nums; }
.tv-grid { display: grid; gap: 2.4vw; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22em), 1fr)); }
.tv-doc { background: #0c2b2c; border-radius: 1.2em; padding: 1.2em 1.4em; }
.tv-doc h2 { font-size: 1.15em; color: #cfe3e1; font-weight: 600; }
.tv-now { display: flex; align-items: center; gap: 0.5em; margin: 0.3em 0 0.5em; }
.tv-now .l { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-glow); }
.tv-now .n { font-size: 6.5em; font-weight: 750; line-height: 1; letter-spacing: -0.03em; }
.tv-now .who { font-size: 1.3em; font-weight: 600; }
.tv-next { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; }
.tv-next .l { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.1em; color: #7fa6a3; margin-right: 0.3em; }
.tv-next b { min-width: 2.2em; padding: 0.15em 0.5em; border-radius: 0.5em; background: #12403f; text-align: center; font-size: 1.5em; }
.tv-doc.flash .tv-now .n { animation: tv-flash 1.2s ease-in-out 3; }
@keyframes tv-flash { 50% { color: var(--brand-glow); transform: scale(1.06); } }
.tv-foot { margin-top: 3vh; color: #7fa6a3; font-size: 0.8em; }

/* ---- token slip and receipt (thermal paper) ---- */
.slip { width: 72mm; margin: 0 auto; padding: 4mm 2mm; background: #fff; color: #000; font: 12px/1.35 var(--font); text-align: center; }
.slip.w58 { width: 48mm; }
.slip h1 { font-size: 15px; margin-bottom: 1mm; }
.slip .n { font-size: 54px; font-weight: 800; line-height: 1.05; }
.slip .l { text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
.slip hr { border: 0; border-top: 1px dashed #000; margin: 2.5mm 0; }
.slip table { width: 100%; font-size: 12px; }
.slip td { padding: 1px 0; border: 0; text-align: left; }
.slip td.num { text-align: right; }
.slip .tot td { border-top: 1px solid #000; font-weight: 700; padding-top: 2px; }
@media print {
  body.slip-page { background: #fff; }
  body.slip-page .no-print, body.slip-page .side, body.slip-page .tabbar, body.slip-page .appbar { display: none !important; }
  body.slip-page main { padding: 0; }
  @page { margin: 3mm; }
}

/* ---- small things ---- */
.split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr); } }
.split > * { min-width: 0; }
.stack { display: grid; gap: 16px; }
.stack > * { margin-top: 0 !important; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.big-search input { font-size: 17px; min-height: 48px; }
.age-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.age-in .seg span { min-height: 0; height: 100%; padding: 4px 10px; }
.bar { height: 8px; border-radius: 999px; background: #e6ecee; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.bar.due > i { background: var(--due); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.kv:last-child { border-bottom: 0; }
.kv b { white-space: nowrap; }

/* ---- first-run checklist: a list; finished steps shrink to one line ---- */
.setup .steps { grid-template-columns: 1fr; gap: 0; padding: 2px 16px; max-width: 760px; }
.setup .steps li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.setup .steps li:last-child { border-bottom: 0; }
.setup .steps li.done { padding: 7px 0; align-items: center; }
.setup .steps li.done small, .setup .steps li.done .btn, .setup .steps li.done .step-link { display: none; }
.setup .steps li.done .dot { width: 20px; height: 20px; font-size: 11px; margin: 0 3px; }
.setup .steps small { max-width: 62ch; }
.setup .steps .step-link { margin-right: 10px; }

/* ---- board on wide screens: stages left to right in the order a patient moves; the stage pills are for phones ---- */
@media (min-width: 761px) {
  .board { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .board-pills { display: none; }
  #col-booked { order: 1; } #col-waiting { order: 2; } #col-consult { order: 3; } #col-billing { order: 4; } #col-done { order: 5; }
}

/* controls keep their own height when a neighbour in the row is taller */
.fields > label > :is(input, select, .select-add, .age-in, .seg) { align-self: start; }

/* cards inside board columns: narrow, so the name wraps and the side text sits under it */
@media (min-width: 761px) {
  .col .tk { grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 9px 10px; }
  .col .tk-no { min-width: 40px; height: 40px; font-size: 18px; border-radius: 10px; grid-row: span 3; }
  .col .tk-name { white-space: normal; font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .col .tk-main small { white-space: normal; line-height: 1.3; margin-top: 1px; }
  .col .tk-side { grid-column: 2; text-align: left; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
  .col .tk-side:empty { display: none; }
  .col .tk-side b { font-size: 14px; }
  .col .tk-act { grid-column: 2; }
}
.tk-act .more-pop { display: inline-block; }

/* wide tables scroll inside their card instead of widening the page */
main > *, main .card, main section { min-width: 0; max-width: 100%; }
@media (max-width: 380px) { .session { flex-wrap: wrap; } .session input[type='time'] { flex: 1 1 96px; } }

/* visit progress: one compact row at every width */
.visit-page .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 12px 10px; }
.visit-page .steps li { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.visit-page .steps strong { font-size: 12px; line-height: 1.2; }
.visit-page .steps small { font-size: 11px; margin: 0; line-height: 1.25; }

/* ==== OPD screens (parts) ==== */

/* ---- flow ---- */
/* ---- flow screens (Today board, new visit, visit page) ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { display: block; padding: 10px 14px; color: var(--ink); }
.tile:hover { text-decoration: none; border-color: var(--brand); }
.tile small { display: block; color: var(--muted); font-size: 12px; }
.tile b { display: block; font-size: 22px; letter-spacing: -0.02em; }
.board-tools { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.board-pills .pill-n { margin-left: 4px; }
.live-state { font-size: 12.5px; white-space: nowrap; }
.live-bar { display: block; margin: 0 auto 10px; }
.find-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-bottom: 10px; }
.cat-choice .reason { display: block; margin-top: 6px; }
.btn-row.center { justify-content: center; margin-top: 12px; }
.more-pop .reason-form { display: grid; gap: 8px; }
.more-pop .reason-form .btn { width: 100%; }
details.more > summary { font-weight: 550; font-size: 14px; margin-top: 12px; }
.step > * + * { margin-top: 12px; }
.step .secondary { margin-top: 14px; }
.balance.neg { color: var(--bad); }
.doctor-board .queue-h { margin-top: 20px; }
.doctor-board .none { padding: 4px 2px; }
.done-list > summary { list-style: none; }
.photo-in .thumbs:empty { display: none; }
.photo-in .thumbs { margin-top: 10px; }
.who-main { min-width: 0; }
.who-main .chips { margin-top: 6px; }
.consult-row b { display: block; }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tile { padding: 8px 10px; } .tile b { font-size: 18px; } .live-state { display: none; } }
.cat-choice { display: block; }
/* visit steps: one compact row on phones (dots + short labels, times hidden) */
@media (max-width: 700px) {
  .visit-page .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 10px 8px; }
  .visit-page .steps li { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
  .visit-page .steps strong { font-size: 11px; line-height: 1.2; }
  .visit-page .steps small { display: none; }
}

/* ---- booking ---- */
/* ==== Booking screens (booking agent) ==== */
/* Bookings page: summary line, one block per slot */
.bk-sum { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; color: var(--muted); font-size: 14px; }
.bk-sum b { color: var(--ink); font-size: 17px; margin-right: 3px; }
.bk-walkins, .bk-note { margin: 0 0 10px; font-size: 14px; }
.bk-closed { margin-bottom: 12px; }
.bk-closed p { margin: 6px 0 10px; }
.bk-slots { display: grid; gap: 10px; }
.bk-slot { min-width: 0; }
.bk-slot-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 44px; padding: 0 2px; }
.bk-slot-h > b { font-size: 15px; min-width: 70px; }
.bk-slot-h .bk-add { margin-left: auto; min-height: 44px; }
.bk-full { color: var(--warn); font-weight: 650; }
.bk-slot.past .bk-slot-h > b { color: var(--muted); }
.bk-slot .tk + .tk, .bk-slot-h + .tk { margin-top: 6px; }
.bk-search label { flex: 1 1 220px; }
.bk-save { margin-top: 14px; align-items: center; }
/* Slots page: 44px tap targets in the rows */
.slot-row .seg span { min-height: 44px; }
.stepper button { width: 44px; height: 44px; }
.stepper input { height: 44px; }
.slot-row .t small a { font-weight: 600; }
/* Public booking */
.pub-lang { justify-content: flex-end; margin: 0 0 12px; flex-wrap: wrap; }
.pub-lang a { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 14px; font-size: 15px; }
.pub-sec + .pub-sec, .pub-sec { margin-top: 12px; }
.pub-sec .days .day { min-width: 62px; padding: 9px 8px; }
.pub-docs { display: grid; gap: 8px; }
.pub-docs a, .pub-chosen { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); }
.pub-docs a b, .pub-chosen b { font-size: 17px; }
.pub-chosen { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; background: var(--brand-soft); border-color: var(--brand); }
.pub-chosen a { font-weight: 650; padding: 10px 4px; }
.pub-sec .slots { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
a.slot { padding: 10px 6px; }
a.slot:hover { text-decoration: none; border-color: var(--brand); }
a.slot b { font-size: 16px; }
a.slot.on { background: var(--brand); border-color: var(--brand); color: #fff; }
a.slot.on small { color: rgba(255, 255, 255, 0.9); }
.pub-form > * + * { margin-top: 14px; }
.pub-form label > span { font-size: 15px; }
.pub-when { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-strong); }
.pub-when b, .pub-when small { display: block; }
.pub-when b { font-size: 17px; }
.pub-msg .btn, .pub-actions .btn { width: 100%; margin-top: 10px; }
.pub-actions form { display: block; }
.pub-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; text-align: left; max-width: 360px; margin: 12px auto 0; }
.pub-facts dt { color: var(--muted); }
.pub-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pub-note { margin: 12px 0 0; }
.confirm-box .tick.off { background: #eef2f4; color: var(--muted); }
.confirm-box.s-cancelled .when, .confirm-box.s-noshow .when { text-decoration: line-through; color: var(--muted); }
.pub-clinic p { margin: 4px 0 0; }
/* Waiting-room screen */
.tv-status { font-size: 0.7em; color: var(--warn); }
.tv-empty { font-size: 1.6em; color: #7fa6a3; text-align: center; padding: 10vh 0; }
.tv-next b small { font-size: 0.55em; font-weight: 500; }
.tv-none { color: #7fa6a3; }

/* ---- records ---- */
/* ---- records: stat tiles, patient list, collections, dashboard ---- */
.stat { padding: 14px 16px; min-width: 0; }
.stat .label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.stat .value { font-size: 22px; font-weight: 650; margin-top: 2px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.stat .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.stat.total { background: var(--brand-soft); border-color: #bfe3de; }
.stat.due .value { color: var(--due); }
a.stat:hover { text-decoration: none; border-color: var(--brand); }
.stat-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
@media (max-width: 700px) { .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stat { padding: 12px; } .stat .value { font-size: 18px; } }
.search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.search-row input { flex: 1; min-width: 0; }
tr.fam-h td { background: #f3f7f8; color: var(--muted); font-size: 12.5px; font-weight: 600; padding-top: 6px; padding-bottom: 6px; }
tr.fam td:first-child { box-shadow: inset 3px 0 var(--brand-glow); }
.due-line { margin-top: 6px; }
.notes-box strong { display: block; margin-bottom: 2px; }
.bar-row + .bar-row { margin-top: 8px; }
.bar-row .kv { border: 0; padding: 0 0 3px; }
.recon td, .recon th { white-space: nowrap; }
.range-form { margin-top: -4px; }
.day-pick { margin-bottom: 12px; }
.day-pick .filters { margin: 6px 0 0; }
.pills-pad { padding-bottom: 0; }
.doc-sub { font-size: 14px; margin: 16px 0 4px; }
.handover { margin-top: 16px; }
.warn-line { color: var(--warn); }