/* ClinicWise product UI: backlinko.com's look (design/DESIGN-SYSTEM.md).
   One stylesheet for every product screen. Not used on clinic websites. */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/inter.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ground: #fff; --ink: #181e15; --ink-strong: #000; --ink-soft: #61655f; --ink-faint: #6b6f69;
  --accent: #bb4a03; --accent-soft: #fbefe7; --brand: #00bc98; --brand-text: #007a63; --brand-soft: #e6f8f4; --panel: #f6f7f9; --line: #e4e6e4; --hair: #eef0ee; --bad: #b42318; --good: #1f7a3f;
  /* The edge of a field, and of a control's chosen state: at least 3:1 on white (3.5) and on the panel (3.3), WCAG 1.4.11. */
  --field-edge: #868a84;
  --font: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --radius: 10px; --pill: 100px; --column: 66ch;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--ink-strong); font-weight: 800; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(30px, 4vw, 34px); line-height: 1.35; }
h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.3; margin-top: 32px; margin-bottom: 16px; }
h3 { font-size: 18px; line-height: 1.4; }
p { margin: 0 0 16px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.small, small { font-size: 14px; color: var(--ink-soft); }
.label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.kicker { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-text); margin-bottom: 8px; }
.kicker-lg { font-size: 18px; color: var(--brand); }
.faint { color: var(--ink-faint); font-size: 13px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.column { max-width: var(--column); }
.panel { background: var(--panel); border-radius: var(--radius); padding: 20px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--ground); }
.btn { display: inline-block; border: 0; border-radius: var(--pill); background: var(--ink); color: #fff; font: 600 16px/1 var(--font); letter-spacing: -0.02em; padding: 16px 32px; cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; background: #000; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn-quiet { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.btn-quiet:hover { background: var(--panel); }
.chip { display: inline-block; border-radius: var(--pill); background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 600; padding: 4px 12px; }
.chip-accent { background: var(--accent-soft); color: var(--accent); }
.chip-bad { background: #fdecea; color: var(--bad); }
.chip-dark { background: var(--ink); color: #fff; }
label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-strong); margin: 0 0 6px; }
input, select, textarea { width: 100%; font: 400 16px/1.4 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--field-edge); border-radius: var(--radius); padding: 12px 14px; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-strong); border-bottom: 2px solid var(--ink-strong); padding: 10px 12px 10px 0; }
tbody td { border-bottom: 1px solid var(--hair); padding: 12px 12px 12px 0; vertical-align: top; }
.num { font-variant-numeric: tabular-nums; }
.stat { font-size: 38px; font-weight: 800; color: var(--ink-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: var(--pill); background: var(--hair); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); }
.stack > * + * { margin-top: 24px; }
.error { color: var(--bad); font-size: 15px; }
[hidden] { display: none !important; }
/* The console's own lines, on top of design/tokens.css: only the shell's and
   the rules Home draws with other screens. A rule that one screen draws
   belongs in screens/<name>.css beside its file; one that several screens
   draw and Home does not belongs in shared.css (docs/CONSOLE-PERFORMANCE.md). */
.boot { padding-top: 48px; }
/* The frame (plan 3.7; the menu of docs/wording/28-console-ia.md and
   48-console-nav.md). A phone: the top bar with the clinic, Publish (N),
   Menu and the account menu; Menu opens the menu as a drawer from the left.
   From 960 px the same menu is a 232 px column that stays in view, the
   sections at the top and Settings at its foot, and the account menu sits
   above the screen at the right. Every control at least 44 px tall. */
.c-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 8px 16px; background: var(--ground); border-bottom: 1px solid var(--hair); }
.c-clinic { display: block; flex: 1 1 auto; min-width: 0; line-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; color: var(--ink-strong); }
.c-publish, .c-menu-btn, .c-close { flex: none; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; white-space: nowrap; }
.c-publish.is-empty { background: var(--ground); color: var(--ink-soft); border: 1px solid var(--line); }
/* A manager's Publish (N): the same link, as a link (12 October); the owner's stays the dark button. */
.c-publish.is-quiet { background: none; border: 0; padding: 0 8px; color: var(--accent); font: 600 15px/1.2 var(--font); text-decoration: underline; text-underline-offset: 3px; }
.c-publish.is-quiet:hover { color: var(--ink-strong); }
.c-publish.is-quiet.is-empty, .c-publish.is-quiet.is-busy { background: none; border: 0; color: var(--ink-soft); }
.c-menu-btn { background: var(--ground); color: var(--ink); border: 1px solid var(--ink); }
.c-menu-btn:hover { background: var(--panel); }
.c-side { display: none; background: var(--ground); }
.c-scrim { display: none; }
.is-menu-open > .c-side { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); z-index: 40; overflow-y: auto; padding: 0 12px 24px; box-shadow: 0 0 40px rgba(0, 0, 0, .18); }
.is-menu-open > .c-scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(24, 30, 21, .32); }
body.is-menu-open { overflow: hidden; }
.c-side-bar { display: flex; align-items: center; justify-content: space-between; min-height: 60px; margin: 0 -12px 12px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--hair); }
.c-side-bar strong { font-size: 20px; font-weight: 800; color: var(--ink-strong); }
.c-side-head { display: flex; flex-direction: column; gap: 10px; padding: 0 8px 16px; border-bottom: 1px solid var(--hair); }
.c-nav { flex: 1 0 auto; display: flex; flex-direction: column; padding-top: 12px; }
.c-nav ul { list-style: none; margin: 0; padding: 0; }
.c-secs-foot { margin-top: auto !important; padding-top: 16px !important; }
.c-sec + .c-sec { margin-top: 2px; }
.c-nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.3; }
.c-nav a:hover { text-decoration: none; background: var(--panel); }
.c-ico { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-soft); }
.c-sec-link[aria-current] { color: var(--ink-strong); font-weight: 800; }
.c-sec-link[aria-current] .c-ico { color: var(--accent); }
.c-sec-link[aria-current="page"] { background: var(--panel); }
.c-sub { margin: 2px 0 8px 20px !important; padding-left: 10px !important; border-left: 1px solid var(--line) !important; }
.c-sub a { font-size: 15px; font-weight: 500; color: var(--ink-soft); padding: 6px 10px; }
.c-sub a[aria-current="page"] { background: var(--panel); color: var(--ink-strong); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); border-radius: 0 8px 8px 0; }
/* 13 October (docs/wording/48-console-nav.md). On a phone a section with
   items is a button that opens them in place (its mark turns), and only an
   item goes anywhere; from 960 px it is a link to its first item. An item's
   one muted line sits inside its link's box, the whole box pressable. */
.c-sec-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 600 16px/1.3 var(--font); text-align: left; cursor: pointer; }
.c-sec-btn:hover { background: var(--panel); }
.c-sec-btn .c-sec-name { flex: 1 1 auto; }
.c-sec-btn .c-ico:last-child { width: 16px; height: 16px; transition: transform .15s; }
.c-sec-btn[aria-expanded="true"] .c-ico:last-child { transform: rotate(90deg); }
.c-sec.is-open > .c-sec-btn { color: var(--ink-strong); font-weight: 800; }
.c-sec.is-open > .c-sec-btn .c-ico:first-child { color: var(--accent); }
.c-sec.has-subs > .c-sec-link { display: none; }
.c-sub li.has-hint { display: grid; }
.c-sub li.has-hint > a, .c-sub li.has-hint > .c-nav-hint { grid-area: 1 / 1; }
.c-sub li.has-hint > a { align-items: flex-start; padding-top: 7px; }
.c-nav-hint { position: relative; padding: 28px 10px 8px; font-size: 13px; line-height: 1.35; color: var(--ink-faint); pointer-events: none; }
.signout { background: none; border: 0; color: var(--accent); font: 600 15px var(--font); cursor: pointer; min-height: 44px; padding: 0 10px; }
/* The account menu, top right: a button, and a short list under it. */
.c-acct { position: relative; flex: none; }
.c-acct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--field-edge); border-radius: var(--pill); background: var(--ground); color: var(--ink); font: 600 15px var(--font); cursor: pointer; }
.c-acct-btn:hover, .c-acct-btn[aria-expanded="true"] { background: var(--panel); }
.c-acct-btn .c-ico { color: var(--ink); }
.c-acct-btn.is-here .c-ico { color: var(--accent); }
.c-acct-top .c-acct-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-acct-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 45; width: min(280px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); box-shadow: 0 8px 28px rgba(0, 0, 0, .14); }
.c-acct-pop[hidden] { display: none; }
.c-acct-who { margin: 0; padding: 6px 10px 8px; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; border-bottom: 1px solid var(--hair); }
.c-acct-pop ul { list-style: none; margin: 4px 0; padding: 0; }
.c-acct-pop li a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--ink); font-weight: 600; text-decoration: none; }
.c-acct-pop li a:hover { background: var(--panel); text-decoration: none; }
.c-acct-pop li a[aria-current="page"] { background: var(--panel); box-shadow: inset 3px 0 0 var(--accent); border-radius: 0 8px 8px 0; }
.c-acct-pop .signout { width: 100%; text-align: left; border-top: 1px solid var(--hair); border-radius: 0; }
.c-mainbar { display: none; }
/* Tabs of an item that gathers screens (Overview, Reports, Reviews, Pages). */
.c-views { margin: 12px 0 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.c-views ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.c-views a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-bottom: 3px solid transparent; color: var(--ink-soft); font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.c-views a:hover { color: var(--ink-strong); text-decoration: none; }
.c-views a[aria-current="page"] { color: var(--ink-strong); border-bottom-color: var(--accent); }
/* Skip to content: out of sight until it has the focus. */
.c-skip { position: absolute; left: 12px; top: -80px; z-index: 60; padding: 10px 16px; border-radius: var(--radius); background: var(--ink); color: #fff; font-weight: 700; }
.c-skip:focus { top: 12px; color: #fff; text-decoration: none; }
/* The shell's own status region (#c-say): heard, not seen. */
.c-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* A link inside a line of text is underlined, never told apart by colour
   alone (the review of 12 October); links that are rows, tabs or buttons
   are not. */
:where(.c-main) :where(p, li, .c-hint, .c-help) a { text-decoration: underline; text-underline-offset: 3px; }
.c-main .btn, .c-main .c-views a, .c-main .st-link, .c-main .list > li > a, .c-main .c-acct a, .c-main .c-tabs a { text-decoration: none; }
.c-main, .c-col { min-width: 0; }
main.wrap, .c-main > .wrap { padding-top: 28px; padding-bottom: 96px; }
@media (min-width: 960px) {
  .console { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
  .c-top, .c-side-bar, .c-scrim { display: none !important; }
  .console > .c-side { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 20px 12px 16px; border-right: 1px solid var(--hair); box-shadow: none; width: auto; }
  .c-side-head .c-clinic { padding-left: 2px; }
  .c-nav a { font-size: 15px; }
  .c-sub a { font-size: 14px; }
  .c-sec-btn { display: none; }
  .c-sec.has-subs > .c-sec-link { display: flex; }
  .c-main { min-height: 100vh; }
  .c-mainbar { display: flex; justify-content: flex-end; padding: 12px 24px 0; }
  .c-main > .wrap { padding-top: 12px; padding-bottom: 120px; }
}
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.head h1 { margin: 0; }
.lede { color: var(--ink-soft); max-width: var(--column); }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.list > li { border-bottom: 1px solid var(--hair); }
.list > li > a, .list > li > .row { display: block; padding: 16px 0; color: var(--ink); }
.list > li > a:hover { text-decoration: none; background: linear-gradient(90deg, var(--panel), transparent); }
.line1 { display: flex; justify-content: space-between; gap: 12px; }
.name { font-weight: 700; color: var(--ink-strong); }
.what { margin: 2px 0 8px; color: var(--ink-soft); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.section { margin-top: 36px; }
.section > h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin: 0 0 12px; }
dl.facts { display: grid; grid-template-columns: minmax(96px, 150px) 1fr; gap: 8px 16px; margin: 0; }
dl.facts dt { color: var(--ink-soft); font-size: 14px; padding-top: 1px; }
dl.facts dd { margin: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }
.actions .btn { padding: 13px 24px; font-size: 15px; }
.btn-sm { padding: 9px 18px !important; font-size: 14px !important; }
.field { margin: 0 0 18px; max-width: 560px; }
.field .hint { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; }
.field .error { font-size: 14px; margin: 6px 0 0; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--bad); }
textarea { min-height: 120px; resize: vertical; }
.money { display: flex; align-items: center; gap: 8px; max-width: 220px; }
.money span { font-weight: 700; }
.inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.inline .field { margin: 0; flex: 1 1 180px; }
.notice { border-radius: var(--radius); padding: 14px 18px; margin: 0 0 20px; background: var(--panel); }
.notice.good { background: var(--brand-soft); }
.notice.bad { background: #fdecea; color: var(--bad); }
.notice.warn { background: var(--accent-soft); }
.empty { color: var(--ink-soft); padding: 18px 0; }
.danger { color: var(--bad); }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); font: 500 15px var(--font); cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.mt { margin-top: 20px; }
dl.facts dd, .name, .line1 span, .list .what { overflow-wrap: anywhere; min-width: 0; }
select { max-width: 100%; text-overflow: ellipsis; }
details.sort { margin-top: 8px; }
details.sort summary { cursor: pointer; color: var(--accent); font-weight: 500; list-style: none; }
details.sort summary::-webkit-details-marker { display: none; }
details.sort form { margin-top: 12px; padding: 16px; background: var(--panel); border-radius: var(--radius); }
/* Billing (plan M10), as the approved mock settings-billing.html draws it:
   the mock's own classes from mocks/console/shell.css and settings.css,
   only those the screen uses. */
.banners { margin: -12px 0 24px; }
.c-head { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 32px; }
.c-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.c-title-row h1 { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.c-help { margin: 12px 0 0; max-width: var(--column); color: var(--ink-soft); font-size: 15px; }
.c-notice { border-radius: var(--radius); padding: 14px 18px; margin: 0 0 16px; background: var(--panel); font-size: 15px; max-width: 760px; }
.c-notice strong { display: block; color: var(--ink-strong); margin-bottom: 2px; }
.c-notice p { margin: 0; }
.c-notice .c-notice-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; align-items: center; }
.c-notice.is-good { background: var(--brand-soft); }
.c-notice.is-warn { background: var(--accent-soft); }
.c-notice.is-bad { background: #fdecea; }
.c-notice.is-bad strong { color: var(--bad); }
.c-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.c-link { background: none; border: 0; padding: 0; color: var(--accent); font: 600 15px/1.4 var(--font); cursor: pointer; }
.c-link:hover { text-decoration: underline; }
.c-why { font-size: 13px; color: var(--ink-soft); }
.c-hint { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.c-empty { background: var(--panel); border-radius: var(--radius); padding: 28px 24px; max-width: 640px; margin: 0 0 22px; }
.c-empty h3 { margin: 0 0 6px; }
/* A heading one level under the page's, drawn at the size of a small one (13 October 2026: heading levels never skip). */
.c-empty h2, h2.c-h3 { font-size: 18px; line-height: 1.4; margin: 0 0 6px; }
.c-empty p { color: var(--ink-soft); margin: 0; }
/* Help and Your account (plan M12), as the approved mocks help.html and
   settings-account.html draw them: their own classes from mocks/console/
   shell.css, settings.css and people-help.css, only those the screens use. */
.guide-links { font-size: 14px; margin: -8px 0 20px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
/* The Help Centre (docs/wording/32-help-centre.md), drawn by the shell on
   any screen: Help beside a heading, to the screen's guide, and What this
   means beside a message a guide explains. */
.c-helplink { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
/* 44 px to press, without making its line taller. */
.c-see { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
.c-status { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border-radius: var(--pill); padding: 4px 12px 4px 10px; font-size: 13px; font-weight: 600; line-height: 18px; border: 1px solid transparent; }
.c-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.c-status.is-live, .c-status.is-active { background: var(--brand-soft); color: var(--brand-text); }
.c-status.is-changed, .c-status.is-new { background: var(--accent-soft); color: var(--accent); }
.c-status.is-held, .c-status.is-scheduled { background: var(--ground); color: var(--ink); border-color: var(--ink); }
.c-status.is-scheduled { border-color: var(--line); }
.c-status.is-approved, .c-status.is-paused { background: var(--panel); color: var(--ink); }
.c-status.is-ended, .c-status.is-rejected { background: var(--panel); color: var(--ink-soft); }
.c-status.is-ended::before, .c-status.is-rejected::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.c-hint.is-warn { color: var(--accent); font-weight: 500; }
.c-link.is-danger { color: var(--bad); }
.c-toast { position: fixed; z-index: 50; left: 50%; bottom: 20px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--radius); background: var(--ink); color: #fff; font-size: 15px; }
.c-toast p { margin: 0; }
.c-toast button { flex: none; background: none; border: 0; min-height: 44px; color: #fff; font: 700 15px var(--font); text-decoration: underline; cursor: pointer; }
.c-toast.is-bad { background: var(--bad); }
.c-empty .btn { min-height: 44px; }
/* L4 Forms and notifications (settings-forms.html): the mock's classes from
   mocks/console/shell.css and settings.css that this screen uses and the
   stylesheet did not have, inside the screen only (.fm); every control at
   least 44 px tall. */
.fm .c-status { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--pill); padding: 4px 12px 4px 10px; font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.fm .c-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fm .is-live { background: var(--brand-soft); color: var(--brand-text); }
.fm .is-changed { background: var(--accent-soft); color: var(--accent); }
.fm .c-link { min-height: 44px; display: inline-flex; align-items: center; }
.fm .c-link.is-danger { color: var(--bad); }
.fm .c-link[disabled] { color: #a9aca7; cursor: default; text-decoration: none; }
.fm .btn { min-height: 44px; display: inline-flex; align-items: center; }
.fm .is-error input { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.xp .c-notice { margin-bottom: 18px; }
/* Lane L5 (Phase 1): Home, Enquiries and one enquiry, This week, as the
   approved mocks home.html, enquiries.html, enquiry.html and week.html draw
   them (their home.css and week.css), only what the screens use. */
.c-cols {display:flex;flex-direction:column;gap:40px}
.c-col {display:contents}
.c-o1 {order:1}
.c-o2 {order:2}
.c-o3 {order:3}
.c-o4 {order:4}
.c-o5 {order:5}
.c-o6 {order:6}
@media (min-width:1100px) {
  .c-cols {display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:48px;align-items:start}
  .c-cols.is-even {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .c-col {display:flex;flex-direction:column;gap:40px;min-width:0}
}
.c-cols .section {margin-top:0}
.c-when {flex:none;font-size:13px;color:var(--ink-faint);white-space:nowrap}
.c-when.is-wrap {flex:0 1 auto;white-space:normal;text-align:right}
.c-why-line {margin:2px 0 0;font-size:14px;color:var(--ink-soft)}
.c-why-line b {color:var(--ink-strong)}
.c-why-line.is-bad,.c-when.is-bad {color:var(--bad);font-weight:600}
.c-card {border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.c-card.is-panel {background:var(--panel);border-color:var(--panel)}
.c-card h3 {font-size:16px;margin:0 0 6px}
.is-nodata {font-size:20px!important;color:var(--ink-soft)}
.w-sub {font-size:16px;font-weight:800;color:var(--ink-strong);margin:26px 0 10px}
.bar>span.is-unknown {background:repeating-linear-gradient(135deg,#b9bcb7 0 4px,#d9dbd7 4px 8px)}
.bar>span.is-bad {background:var(--bad)}
.bar>span.is-ink {background:var(--ink)}
details.sort summary {display:inline-flex;min-height:44px;align-items:center}
:is(.sd-sec, .pr-screen) :is(a, button, select, input:not([type=checkbox]):not([type=radio]), .c-check, .c-choice label, .hr-open) { min-height: 44px; }
:is(.sd-sec, .pr-screen) :is(a, .c-link) { display: inline-flex; align-items: center; }
.c-hint.is-warn { color: var(--accent); font-weight: 500; }
.c-status { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--pill); padding: 4px 12px 4px 10px; font-size: 13px; font-weight: 600; line-height: 18px; background: var(--panel); color: var(--ink-soft); }
.c-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.c-status.is-live { background: var(--brand-soft); color: var(--brand-text); }
.c-status.is-changed, .c-status.is-new { background: var(--accent-soft); color: var(--accent); }
.c-status.is-leaving { background: none; color: var(--accent); border: 1px dashed var(--accent); }
.c-notice .c-link, .c-head .btn-sm, .c-empty .btn-sm { min-height: 44px; }
.c-preview-stage { background: repeating-linear-gradient(135deg, var(--panel) 0 12px, #f0f1f3 12px 24px); padding: 24px 16px; }
/* The Look's picture of the clinic's own site (screens/look-preview.client.js):
   the site's fonts, its first screen at 390 or 1200 px scaled into its box,
   Live beside This version, and "Your site in three looks" (pack 3, P1-02,
   state 3). Every colour, corner and size comes from the look's tokens,
   set on .sv as --s-* (the build's own values). */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(/console/fonts/newsreader-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: swap; src: url(/console/fonts/newsreader-600-latin.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/console/fonts/public-sans-400-latin.woff2) format("woff2"); }
.sv { position: absolute; top: 0; left: 0; transform-origin: 0 0; overflow: hidden; background: var(--s-paper); color: var(--s-ink); font-family: var(--s-text); font-size: var(--sv-body); line-height: 1.6; text-align: left; pointer-events: none; user-select: none; }
.sv p { margin: 0; }
.c-notice .btn, .actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#nopages .c-actions .btn,#since .c-actions a {min-height:44px;display:inline-flex;align-items:center}
.is-nodata-sm {font-size:14px;color:var(--ink-soft);font-weight:500}
/* Lane L10: Publish and Publish history (the approved publish.html, publish-live.html, publish-history.html; the mock's publish.css, trimmed to what the screens draw). */
.c-publish.is-busy { background: var(--ink-soft); color: #fff; cursor: progress; }
@keyframes p-spin { to { transform: rotate(360deg); } }
.c-empty .c-link { min-height: 44px; }
/* Lane L10: History, one item's saved versions, and Publish history (the approved W1-designs/history.css and publish-history.css, their hi- parts). */
.c-status.is-archived { background: var(--panel); color: var(--ink-soft); }
.c-status.is-archived::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.c-head .c-head-btn { margin-left: auto; }
/* A screen being read (the shell's loading(), docs/CONSOLE-PERFORMANCE.md): its name at once and grey lines where its parts will be. */
.c-skel-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-skel-line { height: 14px; margin: 18px 0; border-radius: 7px; background: var(--hair); animation: c-skel 1.1s ease-in-out infinite alternate; }
.c-skel-title { margin: 0 0 28px; color: var(--ink-strong); font-weight: 800; letter-spacing: -0.01em; font-size: clamp(30px, 4vw, 34px); line-height: 1.35; overflow-wrap: anywhere; }
@keyframes c-skel { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .c-skel-line { animation: none; } }
/* A part folded under its heading (13 October 2026): Home's More numbers, a treatment's missing parts, Insights' second parts. */
.c-fold > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 44px; padding: 12px 32px 12px 0; position: relative; }
.c-fold > summary::-webkit-details-marker { display: none; }
.c-fold > summary::after { content: ""; position: absolute; right: 8px; top: 20px; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.c-fold[open] > summary::after { transform: rotate(-135deg); top: 24px; }
.c-fold > summary > :is(h2, h3, b) { margin: 0; }
.c-fold > summary:hover > :is(h2, h3, b) { text-decoration: underline; }
.c-fold-hint { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--ink-soft); }
/* Pages of a long list, 50 to a page (13 October 2026): Enquiries and Patients. */
.c-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; }
.c-pager .btn { min-height: 44px; }
.c-pager-at { font-size: 14px; color: var(--ink-soft); }