/* METIS — approved monochrome identity. Values are shared by every screen. */
:root {
  color-scheme: light;
  --black: #000000;
  --graphite: #242424;
  --grey: #888888;
  --white: #ffffff;
  --off-white: #f7f7f7;
  --ink: #242424;
  --muted: #646464;
  --line: #dedede;
  --line-strong: #888888;
  --paper: #ffffff;
  --surface: #f7f7f7;
  --bg: #f7f7f7;
  --contrast-bg: #000000;
  --contrast-ink: #ffffff;
  --contrast-hover: #242424;
  --hero-bg: #000000;
  --hero-ink: #ffffff;
  --hero-muted: #bdbdbd;
  --focus: #242424;
  --forest: var(--ink);
  --mint: var(--surface);
  --orange: var(--muted);
  --radius: 12px;
  --ease-out: cubic-bezier(.2, .75, .25, 1);
  --ease-exit: cubic-bezier(.4, 0, .7, .2);
  --motion-fast: 160ms;
  --motion-control: 220ms;
  --motion-panel: 300ms;
  --shadow-soft: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f7f7f7;
  --muted: #b0b0b0;
  --line: #3c3c3c;
  --line-strong: #777777;
  --paper: #181818;
  --surface: #242424;
  --bg: #111111;
  --contrast-bg: #f7f7f7;
  --contrast-ink: #000000;
  --contrast-hover: #dcdcdc;
  --focus: #ffffff;
}
* { box-sizing: border-box; }
body { margin: 0; }
body.overlay-scroll-locked { position:fixed; top:var(--locked-scroll-top,0px); left:0; right:0; width:100%; overflow:hidden; }
::selection { background: var(--ink); color: var(--paper); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { border: 0; background: none; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
input, select, textarea {
  width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 9px;
  padding: 12px 14px; background: var(--paper); color: var(--ink); outline: none;
  transition: border-color var(--motion-control) ease, box-shadow var(--motion-control) ease, background var(--motion-control) ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px #17171712; }
input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--surface); }
input[type=checkbox] { min-height: 0; width: 18px; height: 18px; accent-color: var(--ink); flex-shrink: 0; }
textarea { resize: vertical; min-height: 100px; line-height: 1.65; }
::placeholder { color: var(--muted); }
svg { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.6; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex-shrink: 0; background: var(--paper); border-right: 1px solid var(--line);
  position: fixed; inset: 0 auto 0 0; padding: 32px 18px 22px;
  display: flex; flex-direction: column; z-index: 10;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.9px; }
.brand-mark { width: 32px; height: 35px; display: grid; place-items: center; border-radius: 7px; color: var(--paper); background: var(--ink); }
.brand-mark svg { width: 24px; height: 24px; }
.brand-mark { box-shadow: 0 2px 5px #0002, inset 0 1px #ffffff30; }
.brand small { display: block; max-width: 145px; font-size: 7px; line-height: 1.7; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.nav-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 46px 12px 12px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; margin: 3px 0; border-radius: 6px; font-size: 14px; text-align: left; font-weight: 500; color: var(--muted); white-space: nowrap; }
.nav-item:hover { background: var(--surface); color: var(--ink); }
.nav-item.active { background: var(--ink); color: var(--paper); box-shadow: 0 3px 7px #00000012; }
.nav-item svg { width: 17px; height: 17px; }
.nav-count { margin-left: auto; border-radius: 4px; background: var(--line); color: var(--muted); padding: 2px 6px; font-size: 12px; }
.nav-item.active .nav-count { background: var(--ink); color: var(--paper); }
.sidebar-bottom { margin-top: auto; }
.workspace-card { margin: 28px 6px 20px; padding: 16px 7px; border-top: 1px solid var(--line); }
.workspace-card .eyebrow { font-size: 10px; }
.workspace-card strong { display: block; margin-top: 9px; font-size: 14px; font-weight: 600; }
.workspace-card p { font-size: 12px; line-height: 1.75; color: var(--muted); margin: 8px 0 0; }
.profile { border-top: 1px solid var(--line); display: flex; align-items: center; gap: 9px; padding: 18px 5px 0; }
.avatar { height: 33px; width: 33px; flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.profile strong { font-size: 13px; display: block; font-weight: 600; }
.profile small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.profile .icon-btn { margin-left: auto; }
.main { width: calc(100% - 240px); margin-left: 240px; }
.topbar { height: 72px; border-bottom: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; padding: 0 40px; gap: 15px; }
.breadcrumb { font-size: 13px; color: var(--muted); }
.breadcrumb strong { color: var(--ink); font-weight: 500; margin-left: 10px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 12px; color: var(--muted); }
.live-dot { display: inline-block; height: 5px; width: 5px; border-radius: 50%; background: var(--ink); margin-right: 6px; vertical-align: middle; }
.content { max-width: 1350px; margin: auto; padding: 40px 40px 44px; }
.eyebrow { text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; font-weight: 600; color: var(--muted); }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-heading h1 { font-size: clamp(30px, 3vw, 42px); letter-spacing: -1.5px; line-height: 1.18; font-weight: 600; margin: 10px 0 12px; }
.page-heading p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 12px 18px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background var(--motion-control) ease, border-color var(--motion-control) ease, box-shadow var(--motion-control) ease, transform var(--motion-control) var(--ease-out); }
.btn svg { width: 15px; height: 15px; }
.btn-primary { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.btn-secondary { color: var(--ink); background: var(--paper); border-color: var(--line); }
.btn-secondary:hover { background: var(--surface); border-color: var(--line-strong); }
.btn-subtle { color: var(--muted); }
.btn-subtle:hover { color: var(--ink); }
.btn-sm { min-height: 34px; padding: 8px 11px; font-size: 12px; }
.button-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 25px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); }
.stat-top svg { color: var(--muted); width: 16px; height: 16px; }
.stat-value { font-size: 39px; font-weight: 500; letter-spacing: -1px; margin: 15px 0 6px; font-variant-numeric: tabular-nums; }
.stat-caption { font-size: 12px; color: var(--muted); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 0 0 14px; }
.section-heading h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.1px; }
.section-heading span { font-size: 12px; color: var(--muted); }
.template-card { position: relative; display: flex; align-items: center; gap: 23px; padding: 28px; margin-bottom: 32px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 10px; }
.template-icon { width: 62px; height: 70px; flex-shrink: 0; display: grid; place-items: center; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 8px; }
.template-icon svg { height: 29px; width: 29px; stroke-width: 1.3; }
.template-card .eyebrow { color: var(--line-strong); font-size: 10px; }
.template-card h3 { font-weight: 550; letter-spacing: -.6px; font-size: 23px; margin: 8px 0; }
.template-card p { font-size: 13px; line-height: 1.7; color: var(--line-strong); margin: 0; }
.template-meta { display: flex; gap: 15px; margin-top: 14px; font-size: 11px; color: var(--line-strong); }
.template-meta span { display: flex; align-items: center; gap: 5px; }
.template-meta svg { width: 12px; height: 12px; }
.template-card > .btn { margin-left: auto; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.template-card > .btn:hover { background: var(--line); border-color: var(--line); }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.notes-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 3px; }
.tab { padding: 8px 12px; border-radius: 5px; font-size: 12px; color: var(--muted); }
.tab.active { background: var(--line); color: var(--ink); font-weight: 600; }
.tab:hover { color: var(--ink); }
.search { position: relative; width: 235px; }
.search svg { position: absolute; left: 11px; top: 11px; height: 15px; width: 15px; color: var(--muted); }
.search input { font-size: 12px; min-height: 37px; padding: 9px 10px 9px 34px; border-color: var(--line); background: var(--paper); }
.table-wrap { position: relative; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
th { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 13px 21px; border-bottom: 1px solid var(--line); background: var(--paper); white-space: nowrap; }
td { padding: 18px 21px; border-bottom: 1px solid var(--line); color: var(--muted); }
tr:last-child td { border-bottom: 0; }
td.patient-name { color: var(--ink); font-weight: 550; }
td.patient-name small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; margin-top: 6px; }
.row-open:hover { background: var(--surface); cursor: pointer; }
.badge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: 4px; padding: 4px 7px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.badge.draft { background: var(--surface); border-color: var(--line); color: var(--muted); }
.badge.finalized { background: var(--line); color: var(--ink); }
.badge.sent { background: var(--ink); color: var(--paper); }
.badge.demo { background: var(--surface); border-color: var(--line); color: var(--muted); }
.badge.error { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.empty { padding: 44px 20px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.8; }
.empty svg { display: block; margin: 0 auto 14px; width: 27px; height: 27px; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: 15px; font-weight: 550; }
.table-footer { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding: 14px 20px; border-top: 1px solid var(--line); }
.bottom-note { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 11px; line-height: 1.7; color: var(--muted); margin: 26px 0 0; }
.bottom-note svg { width: 12px; height: 12px; }
.demo-banner { padding: 10px 20px; text-align: center; background: var(--surface); color: var(--muted); border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.6; }
.demo-banner button { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; margin-left: 7px; }
.form-heading { margin-bottom: 26px; }
.form-heading h1 { font-size: 29px; letter-spacing: -.9px; }
.editor-layout { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 26px; align-items: start; }
.step-nav { position: sticky; top: 25px; }
.step-btn { width: 100%; text-align: left; display: flex; gap: 10px; align-items: center; padding: 12px 9px; border-radius: 6px; margin: 3px 0; color: var(--muted); font-size: 13px; }
.step-number { width: 23px; height: 23px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; }
.step-btn.active { background: var(--line); color: var(--ink); font-weight: 600; }
.step-btn.done .step-number { border-color: var(--line-strong); color: var(--ink); }
.step-btn.active .step-number { background: var(--ink); border-color: var(--ink); color: var(--contrast-ink); }
.step-note { margin: 20px 9px 0; padding-top: 17px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.75; color: var(--muted); }
.step-note strong { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.step-note strong svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }
.form-card { padding: 29px 30px; }
.form-title { display: flex; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 25px; }
.form-title > .icon-tile { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface); }
.form-title > .icon-tile svg { width: 18px; height: 18px; }
.form-title h2 { font-size: 21px; font-weight: 550; letter-spacing: -.55px; margin: 0 0 8px; }
.form-title p { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 0; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field.full { grid-column: 1/-1; }
.field > label, .field > .field-label { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.5; }
.required { color: var(--muted); margin-left: 3px; }
.field input, .field select, .field textarea { font-size: 14px; }
.field small { font-size: 12px; line-height: 1.6; color: var(--muted); }
.field input.invalid { border: 2px solid var(--ink); }
.section-divider { grid-column: 1/-1; margin: 5px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.choice-group { display: flex; gap: 7px; }
.choice { border: 1px solid var(--line); border-radius: 5px; padding: 10px 14px; font-size: 12px; color: var(--muted); background: var(--paper); flex: 1; }
.choice:hover { border-color: var(--muted); }
.choice.selected { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.choice.unanswered { font-size: 11px; padding-left: 8px; padding-right: 8px; }
.choice.unanswered.selected { background: var(--surface); color: var(--muted); border-color: var(--line); }
.editor-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 27px; padding-top: 23px; border-top: 1px solid var(--line); gap: 10px; }
.save-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.save-state svg { height: 12px; width: 12px; }
.save-state.fail { color: var(--ink); font-weight: 600; }
.tip { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.75; }
.tip strong { color: var(--ink); font-weight: 550; }
.observations { margin-top: 27px; border-top: 1px solid var(--line); padding-top: 24px; }
.observations .section-heading { margin-bottom: 13px; }
.observation-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 30px; gap: 7px; align-items: end; margin-top: 10px; }
.observation-row label { font-size: 11px; color: var(--muted); display: block; margin-bottom: 5px; }
.observation-row input { font-size: 13px; padding: 8px 7px; min-width: 0; }
.observation-notes { margin-top: 7px; font-size: 13px; }
.icon-btn { width: 30px; height: 32px; border-radius: 5px; display: grid; place-items: center; color: var(--muted); }
.icon-btn:hover { color: var(--ink); background: var(--line); }
.icon-btn svg { width: 16px; height: 16px; }
.attachment-area { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.upload-box { border: 1px dashed var(--line-strong); background: var(--surface); border-radius: 6px; padding: 22px; text-align: center; position: relative; }
.upload-box p { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.upload-box input[type=file] { position: absolute; opacity: 0; inset: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-box strong { font-size: 14px; font-weight: 550; color: var(--ink); }
.attachments { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 13px; }
.attachment { display: flex; border: 1px solid var(--line); padding: 10px; gap: 10px; border-radius: 6px; align-items: center; }
.attachment img { height: 48px; width: 48px; border-radius: 4px; object-fit: cover; }
.attachment span { font-size: 12px; overflow: hidden; overflow-wrap: anywhere; flex: 1; line-height: 1.7; }
.attachment button { flex-shrink: 0; }
.review-block { border: 1px solid var(--line); border-radius: 6px; padding: 18px; margin-bottom: 14px; }
.review-block h3 { font-size: 14px; font-weight: 600; margin: 0 0 14px; display: flex; justify-content: space-between; align-items: center; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.review-item { min-width: 0; }
.review-item small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.review-item p { font-size: 13px; color: var(--ink); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.review-item p.missing { color: var(--muted); font-style: italic; }
.check-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--muted); line-height: 1.8; }
.check-label input { margin-top: 2px; }
.delivery-card { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); padding: 20px; margin-top: 21px; }
.delivery-card h3 { font-size: 15px; font-weight: 600; margin: 0 0 13px; }
.delivery-card h3 svg { height: 16px; width: 16px; vertical-align: -3px; margin-right: 4px; }
.delivery-card p { font-size: 13px; color: var(--muted); line-height: 1.8; margin: 12px 0; }
.recipient { display: flex; gap: 9px; align-items: center; font-size: 13px; margin: 10px 0; color: var(--muted); overflow-wrap: anywhere; }
.recipient svg { height: 15px; width: 15px; }
.recipient small { font-size: 12px; line-height: 1.6; display: block; margin-top: 5px; }
.alert, .error-box { border: 1px solid var(--line); border-left: 3px solid var(--ink); background: var(--surface); color: var(--ink); padding: 13px 15px; border-radius: 4px; font-size: 13px; line-height: 1.8; margin: 15px 0; }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
.auth-story { background: var(--ink); color: var(--paper); padding: 56px 65px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.auth-story .brand { padding: 0; }
.auth-story .brand-mark { background: var(--paper); color: var(--ink); }
.auth-story .brand small { color: var(--muted); }
.auth-story h1 { font-size: 54px; font-weight: 500; line-height: 1.12; letter-spacing: -2px; margin: 95px 0 22px; max-width: 430px; }
.auth-story > p { font-size: 15px; line-height: 1.9; color: var(--line-strong); max-width: 345px; margin: 0; }
.auth-story .auth-foot { margin-top: auto; font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 55px 40px; }
.auth-form { width: 100%; max-width: 360px; }
.auth-form h2 { font-size: 29px; font-weight: 550; letter-spacing: -.9px; line-height: 1.25; margin: 12px 0; }
.auth-form > p { font-size: 14px; color: var(--muted); line-height: 1.8; margin-bottom: 27px; }
.auth-form .field { margin-top: 18px; }
.auth-form .btn { width: 100%; margin-top: 23px; }
.auth-form .btn-secondary { margin-top: 10px; }
.auth-divider { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: 11px; letter-spacing: .4px; margin-top: 25px; }
.auth-divider:before, .auth-divider:after { content: ""; height: 1px; background: var(--line); flex: 1; }
.auth-note { font-size: 12px !important; color: var(--muted) !important; margin: 20px 0 0 !important; text-align: center; }
.auth-note svg { width: 11px; height: 11px; vertical-align: -1px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.settings-card { padding: 27px; }
.settings-card h2 { font-size: 15px; font-weight: 600; margin: 0 0 13px; }
.settings-card p { font-size: 14px; line-height: 1.8; color: var(--muted); }
.settings-value { padding: 13px 0; border-top: 1px solid var(--line); font-size: 13px; display: flex; justify-content: space-between; gap: 16px; overflow-wrap: anywhere; }
.settings-value span { color: var(--muted); flex-shrink: 0; }
.settings-value strong { font-weight: 500; text-align: right; }
.settings-card .field { margin-top: 17px; }
.modal-backdrop { position: fixed; inset: 0; background: transparent; isolation: isolate; z-index: 40; display: flex; justify-content: center; align-items: center; padding: 24px; }
.modal-backdrop::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #0006; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); pointer-events: none; }
.modal { width: 480px; max-width: 100%; max-height: 90vh; overflow: auto; background: var(--paper); border-radius: 20px; padding: 32px; box-shadow: 0 20px 80px #0002; }
.modal h2 { font-size: 24px; font-weight: 550; letter-spacing: -.6px; margin: 0 0 15px; }
.modal p { font-size: 14px; color: var(--muted); line-height: 1.8; }
.modal .field { margin: 18px 0; }
.modal .button-row { margin-top: 22px; justify-content: flex-end; }
.modal.wide { width: 950px; height: 90vh; padding: 0; display: flex; flex-direction: column; }
.modal-head { padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 15px; letter-spacing: 0; margin: 0; }
.pdf-pages { overflow: auto; flex: 1; padding: 18px 10px; text-align: center; background: var(--line); }
.pdf-pages canvas { display: block; max-width: 100%; height: auto !important; margin: 0 auto 18px; box-shadow: 0 3px 13px #0002; background: var(--paper); }
.pdf-fallback { padding: 9px; text-align: center; font-size: 12px; background: var(--surface); }
.boot { padding: 65px; text-align: center; color: var(--muted); font-size: 15px; }
#toast { position: fixed; bottom: 25px; left: calc(50% + 120px); transform: translate(-50%, 8px); opacity: 0; pointer-events: none; z-index: 70; background: var(--ink); color: var(--paper); padding: 13px 22px; border: 1px solid var(--ink); border-radius: 6px; font-size: 13px; box-shadow: 0 5px 20px #0002; transition: opacity var(--motion-control) ease, transform var(--motion-panel) var(--ease-out); max-width: 90%; line-height: 1.7; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
.mobile-menu { display: none; }
.muted { color: var(--muted); }
.margin-top { margin-top: 22px; }
.inline-error { font-size: 13px; color: var(--ink); font-weight: 550; }
.template-details { font-size: 14px; color: var(--muted); line-height: 1.8; }
.template-details ul { padding-left: 18px; }
.hidden { display: none !important; }
.nav-close, .nav-scrim { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.draft-summary { font-size: 13px; color: var(--muted); }
/* Resume controls remain visible without overwhelming the clinical form. */
.resume-card { display: flex; align-items: center; gap: 22px; padding: 22px 24px; margin-bottom: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.resume-card > svg { height: 22px; width: 22px; color: var(--muted); }
.resume-copy { flex: 1; min-width: 0; }
.resume-copy h2, .resume-copy h3 { font-size: 14px; font-weight: 600; letter-spacing: -.2px; margin: 7px 0; }
.resume-copy p, .resume-meta { font-size: 12px; color: var(--muted); margin: 5px 0 0; line-height: 1.7; }
.resume-actions { display: flex; align-items: center; gap: 9px; }
.resume-card .eyebrow { font-size: 10px; }
.draft-status { color: var(--muted); font-size: 12px; line-height: 1.6; }
.save-draft-btn { border-color: var(--line-strong); color: var(--ink); }
.booking-launcher { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.booking-launcher > div { display: flex; align-items: center; gap: 15px; }
.booking-launcher strong { display: block; font-size: 14px; font-weight: 600; }
.booking-launcher small { display: block; font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.6; }
.booking-explainer { display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 0 0 28px; }
.booking-step { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.booking-step b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; border: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--ink); }
.booking-panel { margin-top: 24px; }
.booking-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 23px; border-bottom: 1px solid var(--line); }
.booking-panel-head h2 { font-size: 15px; margin: 0; font-weight: 600; }
.booking-panel-head p { font-size: 12px; color: var(--muted); margin: 8px 0 0; line-height: 1.7; }
.booking-row { display: flex; align-items: center; gap: 24px; padding: 28px 23px; border-bottom: 1px solid var(--line); }
.booking-row:last-child { border-bottom: 0; }
.booking-time { align-self: flex-start; font-size: 20px; font-weight: 500; letter-spacing: -.5px; padding-top: 1px; font-variant-numeric: tabular-nums; }
.booking-person { flex: 1; min-width: 0; }
.booking-person h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.booking-person p { margin: 0 0 9px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.booking-person small { font-size: 12px; color: var(--muted); line-height: 1.7; display: block; }
.import-source { margin: -5px 0 26px; border: 1px solid var(--line); background: var(--paper); border-radius: 7px; font-size: 13px; }
.import-source summary { padding: 15px 18px; cursor: pointer; font-weight: 550; line-height: 1.7; }
.import-source summary > svg { width: 14px; height: 14px; vertical-align: -3px; margin: 0 7px; }
.import-source summary > span { font-weight: 400; color: var(--muted); margin-left: 16px; }
.import-source-body { border-top: 1px solid var(--line); padding: 5px 20px 12px; }
.import-source-body p { color: var(--muted); line-height: 1.8; font-size: 12px; }
.import-source-body .source-warning { color: var(--ink); }
.imported-field { font-size: 11px !important; color: var(--muted) !important; }
.imported-field svg { height: 10px; width: 10px; vertical-align: -1px; margin-right: 3px; }
.booking-settings { grid-column: 1/-1; }
.calendar-mappings { margin-top: 22px; border-top: 1px solid var(--line); }
.calendar-mapping { min-width: 0; margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.calendar-mapping > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 72px; padding: 16px 18px; cursor: pointer; list-style: none; }
.calendar-mapping > summary::-webkit-details-marker { display: none; }
.calendar-mapping > summary > span { min-width: 0; }
.calendar-mapping > summary strong { display: block; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.calendar-mapping > summary > svg { flex: 0 0 16px; width: 16px; height: 16px; transition: transform 180ms ease; }
.calendar-mapping[open] > summary > svg { transform: rotate(180deg); }
.calendar-selection-summary { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.calendar-members { min-width: 0; margin: 0; padding: 12px 18px 18px; border: 0; border-top: 1px solid var(--line); }
.calendar-members legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.calendar-member { clear: both; display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 12px 0; cursor: pointer; }
.calendar-member + .calendar-member { border-top: 1px solid var(--line); }
.calendar-member input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 3px 0 0; padding: 0; accent-color: var(--ink); cursor: pointer; }
.calendar-member > span { min-width: 0; }
.calendar-member strong, .calendar-member small { display: block; line-height: 1.6; overflow-wrap: anywhere; }
.calendar-member strong { font-size: 13px; font-weight: 500; }
.calendar-member small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.calendar-member .calendar-member-status { color: var(--ink); font-weight: 500; }
.calendar-members .calendar-suggestion { clear: both; margin: 12px 0 0; font-size: 12px; }
.calendar-owner-access { margin-top: 18px; }
.calendar-mapping:has(summary:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .calendar-mapping > summary > svg { transition: none; } }
@media (max-width: 640px) {
  .booking-launcher { display: block; padding: 18px; }
  .booking-launcher .btn { width: 100%; margin-top: 15px; }
  .booking-heading { display: block; }
  .page-heading.booking-heading > .btn { margin-top: 18px; font-size: 13px; gap: 9px; width: 100%; }
  .booking-explainer { flex-direction: column; gap: 11px; margin-bottom: 20px; }
  .booking-panel-head { padding: 19px; }
  .booking-row { gap: 15px; flex-wrap: wrap; padding: 23px 19px; }
  .booking-time { font-size: 18px; }
  .booking-person { min-width: 190px; }
  .booking-row > .btn { margin-left: 60px; flex: 1; }
  .import-source summary > span { display: block; margin-left: 27px; font-size: 12px; }
}
@media (min-width: 1600px) {
  .content { padding-top: 48px; }
  .template-card { padding: 32px; }
}
@media (max-width: 1150px) {
  .sidebar { width: 202px; padding-left: 13px; padding-right: 13px; }
  .main { margin-left: 202px; width: calc(100% - 202px); }
  .content { padding: 29px 27px; }
  .topbar { padding: 0 27px; }
  .editor-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 19px; }
  .form-card { padding: 24px; }
  .template-card { gap: 17px; padding: 23px; }
  .template-card h3 { font-size: 21px; }
  .auth-story { padding: 45px; }
  .auth-story h1 { font-size: 45px; }
  .observation-row { gap: 5px; }
  .observation-row input { padding: 8px 5px; }
  .form-heading { align-items: flex-start; }
  .form-heading > .button-row { justify-content: flex-end; max-width: 270px; }
  .form-heading .save-state { width: 100%; justify-content: flex-end; }
}
@media (max-width: 900px) {
  .sidebar { width: 178px; padding: 26px 12px; }
  .brand { font-size: 19px; gap: 8px; padding: 0 3px; }
  .brand small { font-size: 6px; letter-spacing: 1.1px; }
  .brand-mark { width: 28px; height: 31px; }
  .nav-item { font-size: 13px; padding: 12px 10px; gap: 10px; }
  .main { margin-left: 178px; width: calc(100% - 178px); }
  .content { padding: 26px 22px; }
  .topbar { padding: 0 22px; height: 65px; }
  .editor-layout { display: block; }
  .step-nav { position: static; display: flex; overflow: auto; margin-bottom: 20px; gap: 6px; }
  .step-btn { width: auto; flex-shrink: 0; padding: 8px; font-size: 12px; gap: 6px; }
  .step-number { width: 21px; height: 21px; }
  .step-note { display: none; }
  .step-btn:not(.active) .step-text { display: none; }
  .template-card { flex-wrap: wrap; }
  .template-card > .btn { margin: -3px 0 0 79px; }
  .stats { gap: 10px; }
  .stat { padding: 17px; }
  .stat-top { font-size: 12px; }
  .stat-value { font-size: 29px; }
  .settings-grid { grid-template-columns: 1fr; }
  .topbar-right .date-label { display: none; }
  .auth-story { padding: 35px; }
  .auth-story h1 { font-size: 38px; }
  .auth-main { padding: 40px 30px; }
  .notes-toolbar { padding: 13px; }
  .search { width: 185px; }
  td, th { padding-left: 16px; padding-right: 16px; }
  .template-meta { gap: 11px; }
  .resume-card { flex-wrap: wrap; gap: 15px; padding: 20px; }
  .resume-actions { margin-left: auto; }
}
@media (max-width: 640px) {
  :root { --mobile-header-height: 64px; --mobile-actions-height: 72px; scroll-padding-top: 208px; }
  .sidebar { display: none; width: 230px; box-shadow: 0 0 0 100vmax #0005; overflow-y: auto; overscroll-behavior: contain; }
  .sidebar.open { display: flex; }
  .main { width: 100%; margin-left: 0; }
  .mobile-menu { display: grid; width: 48px; height: 48px; flex-shrink: 0; }
  .mobile-menu svg { width: 24px; height: 24px; }
  .topbar { position: sticky; top: 0; z-index: 9; height: var(--mobile-header-height); padding: 0 12px; gap: 8px; }
  .breadcrumb { min-width: 0; line-height: 1.5; }
  .breadcrumb strong { margin-left: 4px; }
  .topbar-right { gap: 10px; }
  .topbar-right .workspace-status { display: none; }
  .nav-item { min-height: 48px; font-size: 15px; }
  .content { padding: 28px 18px; }
  .page-heading { align-items: flex-start; gap: 12px; margin-bottom: 23px; }
  .page-heading h1 { font-size: 27px; letter-spacing: -.9px; margin-top: 8px; }
  .page-heading p { font-size: 13px; max-width: 255px; }
  .page-heading > .button-row .btn { min-height: 48px; font-size: 14px; }
  .page-heading > .btn { padding: 12px; font-size: 0; gap: 0; min-width: 48px; min-height: 48px; margin-top: 15px; }
  .page-heading > .btn svg { width: 20px; height: 20px; }
  .stats { gap: 8px; margin-bottom: 25px; }
  .stat { padding: 15px 11px; }
  .stat-top { font-size: 11px; line-height: 1.5; min-height: 27px; }
  .stat-top svg { display: none; }
  .stat-value { font-size: 27px; margin: 8px 0 4px; }
  .stat-caption { font-size: 10px; line-height: 1.6; }
  .section-heading h2 { font-size: 14px; }
  .section-heading span { font-size: 11px; }
  .template-card { gap: 15px; padding: 22px 18px; margin-bottom: 27px; }
  .template-icon { width: 48px; height: 57px; }
  .template-card > div:nth-child(2) { flex: 1; min-width: 175px; }
  .template-card h3 { font-size: 21px; }
  .template-card p { font-size: 12px; }
  .template-card > .btn { margin: 2px 0 0 63px; }
  .template-meta { font-size: 10px; gap: 10px; }
  .template-card .eyebrow { font-size: 10px; }
  .notes-toolbar { flex-direction: column; align-items: stretch; gap: 11px; }
  .search { width: 100%; }
  .tabs .tab { flex: 1; padding: 9px 8px; }
  .table-footer { font-size: 11px; }
  .bottom-note { font-size: 11px; align-items: flex-start; }
  .bottom-note svg { margin-top: 2px; }
  .auth-layout { display: block; }
  .auth-story { padding: 28px 25px; }
  .auth-story h1 { font-size: 36px; margin: 30px 0 15px; max-width: 340px; }
  .auth-story > p { font-size: 14px; }
  .auth-main { padding: 35px 26px; }
  .auth-form { max-width: 420px; }
  .auth-form h2 { font-size: 26px; }
  /* Let the actions stick within the full content, beyond the short title block. */
  .form-heading { display: contents; }
  .form-heading > div:first-child { margin-bottom: 16px; }
  .form-heading h1 { font-size: 25px; }
  .form-heading > .button-row {
    position: sticky; top: var(--mobile-header-height); z-index: 8;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px;
    height: var(--mobile-actions-height); max-width: none; margin: 0 -18px 16px; padding: 10px 18px;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .form-heading .button-row .btn { font-size: 14px; line-height: 1.3; padding: 8px; min-height: 48px; height: 100%; white-space: normal; gap: 6px; }
  .form-heading .button-row .btn svg { width: 17px; height: 17px; }
  .form-heading .save-state { justify-content: flex-start; font-size: 11px; margin-bottom: 3px; }
  .form-card { padding: 22px 17px; }
  .form-title h2 { font-size: 21px; }
  .form-title p { font-size: 12px; }
  .fields { gap: 20px 13px; }
  .field { grid-column: 1/-1; }
  .field.compact { grid-column: auto; }
  .field > label { font-size: 13px; }
  .field input, .field select, .field textarea { font-size: 16px; min-height: 46px; }
  .choice { font-size: 14px; min-height: 44px; }
  .choice.unanswered { font-size: 12px; }
  .editor-actions { flex-wrap: wrap; }
  .editor-actions .save-state { display: none; }
  .observation-row { grid-template-columns: 1.25fr 1fr 1fr; gap: 10px; padding: 13px; background: var(--surface); border-radius: 6px; }
  .observation-row input { font-size: 16px; }
  .observation-row .icon-btn { justify-self: end; }
  .attachments { grid-template-columns: 1fr; }
  .review-grid { gap: 15px 12px; }
  .delivery-card { padding: 17px; }
  .recipient { font-size: 12px; align-items: flex-start; }
  .modal-backdrop { padding: 16px; }
  .modal { padding: 25px; }
  .modal.wide { height: 90vh; }
  .settings-card { padding: 21px; }
  #toast { left: 50%; bottom: 18px; width: max-content; max-width: 90%; font-size: 13px; }
  .badge { font-size: 10px; }
  .step-nav {
    position: sticky; top: calc(var(--mobile-header-height) + var(--mobile-actions-height)); z-index: 7;
    margin: 0 -18px 15px; padding: 8px 18px; gap: 4px; background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .step-btn { flex: 1; min-width: 44px; min-height: 44px; justify-content: center; padding: 6px; margin: 0; }
  .step-btn .step-text { display: none; }
  .step-number { width: 28px; height: 28px; font-size: 14px; }
  .demo-banner { font-size: 11px; padding: 9px 12px; }
  .resume-card { display: block; padding: 20px; }
  .resume-card > svg { display: none; }
  .resume-actions { margin-top: 15px; }
  .resume-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Invoices use the same monochrome workspace and form components. */
.invoice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; align-items: start; }
.invoice-layout > div, .invoice-layout > aside { min-width: 0; }
.invoice-details, .invoice-delivery { padding: 25px; margin-bottom: 22px; }
.invoice-details h2, .invoice-delivery h2 { font-size: 15px; margin: 0 0 20px; }
.invoice-details .fields { padding: 0; }
.invoice-bill-to { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 19px; font-size: 14px; line-height: 1.7; }
.invoice-bill-to h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); margin: 0 0 7px; }
.invoice-bill-to p { margin: 4px 0 0; }
.invoice-line { border: 1px solid var(--line); border-radius: 7px; padding: 17px; margin: 0 0 18px; min-width: 0; }
.invoice-line legend { padding: 0 7px; font-size: 13px; color: var(--muted); }
.invoice-line-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.invoice-line-description { grid-column: 1 / -1; }
.invoice-line > .btn { margin-top: 10px; }
.invoice-totals { margin-top: 20px; }
.invoice-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 14px; }
.invoice-totals .invoice-total { border-top: 1px solid var(--line); font-size: 15px; margin-top: 8px; padding-top: 20px; }
.invoice-totals small { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; }
.invoice-submit { width: 100%; margin-top: 22px; }
.invoice-delivery h2 { display: flex; align-items: center; gap: 8px; }
.invoice-delivery h2 svg { width: 17px; height: 17px; }
.invoice-delivery p { font-size: 13px; line-height: 1.8; color: var(--muted); }
.invoice-delivery .invoice-email-warning { border-left: 2px solid var(--ink); padding-left: 12px; color: var(--ink); }
.invoice-delivery .recipient { flex-wrap: wrap; overflow-wrap: anywhere; font-size: 13px; }
.invoice-delivery .recipient strong { min-width: 65px; font-size: 12px; }
.invoice-delivery .tip { margin-top: 16px; }
.invoice-list td small { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.invoice-open { text-align: left; font-weight: 600; }
@media (max-width: 1120px) { .invoice-layout { grid-template-columns: minmax(0, 1fr); } .invoice-layout > aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 650px) { .invoice-layout > aside { display: block; } .invoice-details, .invoice-delivery { padding: 20px; } .invoice-line-fields { grid-template-columns: minmax(0, 1fr); } .invoice-line-description { grid-column: auto; } }

.invoice-request-fields { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.invoice-field-hint { display: block; font-size: 12px; line-height: 1.7; color: var(--muted); margin-top: 6px; }
.invoice-contact-note { padding-top: 18px; border-top: 1px solid var(--line); margin: 24px 0 0; }
.invoice-request-layout > .invoice-details { min-width: 0; }
.invoice-request-layout .invoice-totals { margin-top: 0; }
.invoice-request-layout .invoice-total { margin-top: 0; padding-top: 0; border-top: 0; }

/* Personal note templates share the note editor without widening its sticky controls. */
.note-template-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -8px 0 24px; }
.note-template-tools p { margin: 0; color: var(--muted); font-size: 13px; }
.template-review { margin-bottom: 22px; }
.saved-templates { margin-bottom: 20px; overflow: hidden; }
.saved-template { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 25px; }
.saved-template + .saved-template { border-top: 1px solid var(--line); }
.saved-template > div:first-child { min-width: 0; }
.saved-template h3 { margin: 0 0 7px; font-size: 15px; overflow-wrap: anywhere; }
.saved-template p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.saved-template .button-row { flex-shrink: 0; }
.saved-template .icon-btn { width: 42px; height: 42px; }
.template-help { margin-bottom: 28px; }
.template-selection-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 10px; font-size: 14px; }
.template-field-selection { border: 1px solid var(--line); border-radius: 7px; max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; }
.template-field-selection > p { padding: 10px 16px; }
.template-field-choice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; }
.template-field-choice + .template-field-choice { border-top: 1px solid var(--line); }
.template-field-choice input { margin: 2px 0 0; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--ink); }
.template-field-choice > span { min-width: 0; }
.template-field-choice strong { display: block; font-size: 13px; line-height: 1.6; }
.template-field-choice span span { display: block; color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.5em; overflow-y: auto; }
.modal .template-exclusions { font-size: 13px; line-height: 1.7; margin: 14px 0; }
.template-preview { margin: 22px 0; max-height: 55vh; overflow-y: auto; }
.template-preview > div { padding: 12px 0; border-top: 1px solid var(--line); }
.template-preview dt { font-size: 13px; font-weight: 600; }
.template-preview dd { margin: 7px 0 0; color: var(--muted); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
@media (max-width: 900px) { .saved-template { align-items: flex-start; flex-direction: column; gap: 15px; } }
@media (max-width: 640px) {
  .note-template-tools { align-items: flex-start; margin: 0 0 22px; gap: 12px; }
  .note-template-tools p { max-width: 130px; line-height: 1.7; }
  .note-template-tools .btn { min-height: 48px; font-size: 14px; padding: 10px 12px; white-space: normal; }
  .saved-template { padding: 20px 17px; }
  .saved-template .button-row { width: 100%; gap: 7px; }
  .saved-template .btn { min-height: 48px; font-size: 14px; padding: 10px; }
  .saved-template .icon-btn { width: 48px; height: 48px; }
  #note-template-form > .button-row .btn { min-height: 48px; font-size: 14px; }
  .template-field-choice { padding: 12px; }
}

/* A quiet monochrome workspace, with motion kept on non-sticky surfaces. */
.topbar { background: #ffffffb8; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.topbar .workspace-status { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.nav-item { position: relative; min-height: 44px; border-radius: 9px; transition: background var(--motion-control) ease, color var(--motion-control) ease, box-shadow var(--motion-control) ease; }
.nav-item.active::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-left: auto; opacity: .65; }
.nav-item.active:has(.nav-count)::after { display: none; }
.nav-item svg, .btn svg, .icon-btn svg { transition: transform var(--motion-control) var(--ease-out); }
.profile > div:not(.avatar) { min-width: 0; }
.profile strong { overflow-wrap: anywhere; }
.btn-primary { box-shadow: 0 2px 4px #00000012, inset 0 1px #ffffff20; }
.icon-btn { transition: background var(--motion-control) ease, color var(--motion-control) ease, transform var(--motion-control) var(--ease-out); }
.btn:disabled { box-shadow: none; }
.btn-secondary { box-shadow: 0 1px 2px #00000005; }
.section-heading h2 { font-size: 15px; letter-spacing: -.25px; }
.notes-toolbar { padding: 16px 20px; }
.tabs { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: 3px; }
.tab { border: 1px solid transparent; transition: background .2s, box-shadow .2s, color .2s; }
.tab.active { background: var(--paper); border-color: var(--line); box-shadow: 0 1px 3px #00000008; }
.search input { min-height: 40px; border-radius: 8px; }
.search svg { top: 12px; }
.table-wrap { border-radius: 0 0 15px 15px; }
th { background: var(--surface); }
.row-open { transition: background .18s; }
.row-open:hover { background: var(--surface); }
.badge { border-radius: 6px; padding: 5px 8px; }
.stat { box-shadow: var(--shadow-soft); }
.stat-top svg { width: 30px; height: 30px; padding: 7px; background: var(--surface); border-radius: 9px; color: var(--ink); }
.stat-value { letter-spacing: -1.5px; line-height: 1.15; }
.stat-caption { line-height: 1.6; }
.focus-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-bottom: 24px; }
.focus-grid > section { margin: 0; min-width: 0; }
.booking-launcher { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; position: relative; isolation: isolate; overflow: hidden; min-height: 272px; padding: 28px 30px; border: 1px solid var(--ink); border-radius: 18px; color: var(--paper); background: var(--ink); box-shadow: 0 6px 20px #00000008; }
.booking-launcher > .booking-launcher-copy { display: block; position: relative; z-index: 1; }
.booking-launcher .eyebrow { color: var(--line-strong); font-size: 10px; }
.booking-launcher strong { font-size: clamp(24px, 2.2vw, 31px); line-height: 1.14; letter-spacing: -.9px; font-weight: 550; margin-top: 14px; }
.booking-launcher small { font-size: 12px; color: var(--line-strong); line-height: 1.6; margin-top: 13px; }
.booking-launcher .btn { margin-top: 24px; position: relative; z-index: 1; background: var(--paper); border-color: var(--paper); color: var(--ink); }
.focus-grid .resume-card { padding: 26px 28px; display: flex; flex-direction: column; align-items: stretch; gap: 18px; border-radius: 18px; border-color: var(--line); box-shadow: var(--shadow-soft); }
.resume-kicker { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.resume-kicker .eyebrow { font-size: 10px; letter-spacing: 1.2px; }
.resume-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--muted); flex-shrink: 0; }
.resume-icon svg { width: 17px; height: 17px; }
.focus-grid .resume-copy h2 { font-size: 24px; font-weight: 550; line-height: 1.25; letter-spacing: -.65px; margin: 20px 0 10px; overflow-wrap: anywhere; }
.focus-grid .resume-section { font-size: 13px; color: var(--ink); margin-top: 0; }
.focus-grid .resume-meta { font-size: 11px; color: var(--muted); }
.focus-grid .resume-actions { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.focus-grid .resume-actions .btn { margin-left: auto; }
.focus-grid .resume-actions .badge { font-size: 10px; }
.template-card { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-soft); }
.template-icon { background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 12px; width: 54px; height: 60px; }
.template-card .eyebrow { color: var(--muted); font-size: 10px; }
.template-card h3 { font-size: 22px; }
.template-card p { color: var(--muted); font-size: 12px; }
.template-meta { color: var(--muted); font-size: 11px; }
.template-card > .btn { color: var(--ink); border-color: var(--line); background: var(--paper); }
.template-card > .btn:hover { background: var(--surface); border-color: var(--line-strong); }
.form-title { align-items: center; }
.form-title > .icon-tile { border-radius: 11px; width: 44px; height: 44px; }
.form-title h2 { font-size: 23px; }
.form-title p { font-size: 12px; }
.step-btn { border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.step-btn.active { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-soft); }
.step-number { transition: background .2s, color .2s; }
.choice { border-radius: 8px; transition: background .18s, border-color .18s, color .18s, transform .18s; }
.choice.selected { box-shadow: 0 2px 5px #0000000a; }
.upload-box { border-radius: 12px; transition: border-color .2s, background .2s; }
.upload-box:focus-within, .upload-box:hover { border-color: var(--ink); background: var(--surface); }
.empty { padding: 52px 24px; font-size: 13px; }
.empty > svg { box-sizing: content-box; width: 24px; height: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--muted); }
.empty strong { font-size: 16px; font-weight: 550; margin-bottom: 7px; letter-spacing: -.3px; }
.booking-step b { background: var(--paper); width: 28px; height: 28px; }
.booking-panel { overflow: hidden; }
.booking-time { font-size: 24px; }
.saved-template { transition: background .18s; }
.saved-template:hover { background: var(--surface); }
.auth-story { background: var(--ink); isolation: isolate; }
.auth-story h1 { font-size: clamp(40px, 4.5vw, 68px); max-width: 580px; letter-spacing: -2.6px; line-height: 1.07; }
.auth-story > p { color: var(--line-strong); font-size: 14px; max-width: 390px; }
.auth-form h2 { font-size: 34px; letter-spacing: -1.2px; }
.auth-form > p { font-size: 14px; }
.auth-main { background: var(--surface); }
.auth-form .btn { min-height: 50px; }
#toast { border-radius: 12px; box-shadow: 0 12px 36px #0002; }
.boot.is-loading { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.boot-mark { display: grid; place-items: center; width: 58px; height: 58px; background: var(--ink); border-radius: 17px; color: var(--paper); font-size: 17px; font-weight: 600; letter-spacing: -1px; position: relative; }
.boot-mark::after { content: ''; position: absolute; inset: -7px; border: 1px solid var(--line); border-top-color: var(--ink); border-radius: 22px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { transform: translateY(-1px); }
  .btn-primary:hover:not(:disabled) { box-shadow: 0 5px 12px #00000018; }
  .btn:hover:not(:disabled) > svg:last-child { transform: translateX(1px); }
  .btn:hover:not(:disabled) > svg:first-child:not(:last-child) { transform: none; }
  .nav-item:hover > svg { transform: translateX(2px); }
}
/* Press feedback wins over hover, with a short travel and a soft release. */
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .choice:active:not(:disabled) { transform: scale(.985); transition-duration: 90ms; }
@media (prefers-reduced-motion: no-preference) {
  .motion-enter { animation: reveal-up var(--motion-panel) var(--ease-out) backwards; }
  .focus-grid > .motion-enter:first-child { animation-delay: 20ms; }
  .focus-grid > .motion-enter:last-child { animation-delay: 45ms; }
  .stats .motion-enter { animation-delay: 60ms; }
  .stats .motion-enter:nth-child(2) { animation-delay: 80ms; }
  .stats .motion-enter:nth-child(3) { animation-delay: 100ms; }
  .form-card.motion-enter, .invoice-details.motion-enter { animation: reveal-surface var(--motion-control) ease-out; }
  .modal-backdrop::before { animation: reveal-opacity 260ms ease-out; }
  .modal { animation: dialog-in var(--motion-panel) var(--ease-out); }
  .modal-backdrop.is-closing::before { animation: shade-out 200ms ease-in both; }
  .modal-backdrop.is-closing .modal { animation: dialog-out 200ms var(--ease-exit) both; }
  .auth-story h1, .auth-story > p, .auth-form { animation: reveal-up 480ms var(--ease-out) backwards; }
  .boot-mark::after { animation: loading-turn 1.6s linear infinite; }
}
@keyframes reveal-up { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes reveal-opacity { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-surface { from { opacity: .7; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes dialog-out { from { opacity: var(--exit-opacity, 1); transform: var(--exit-transform, none); } to { opacity: 0; transform: translateY(5px) scale(.995); } }
@keyframes shade-out { from { opacity: var(--exit-shade-opacity, 1); } to { opacity: 0; } }
@keyframes loading-turn { to { transform: rotate(360deg); } }
@media (max-width: 1150px) {
  .focus-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .booking-launcher { padding: 26px; }
  .focus-grid .resume-card { padding: 24px; }
  .focus-grid .resume-actions { flex-wrap: wrap; }
  .focus-grid .resume-actions .badge { display: none; }
  .template-meta { flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 800px) {
  .focus-grid { grid-template-columns: 1fr; }
  .booking-launcher { min-height: 255px; }
  .focus-grid .resume-card { min-height: 220px; }
  .focus-grid .resume-actions .badge { display: inline-flex; }
}
@media (max-width: 640px) {
  .content { padding-top: 26px; }
  .page-heading h1 { font-size: 30px; letter-spacing: -1.1px; }
  .page-heading p { font-size: 12px; }
  .page-heading > .btn { font-size: 0; }
  .topbar-right .workspace-status { display: none; }
  .sidebar { display: flex; box-shadow: 10px 0 50px #00000018; z-index: 12; width: min(290px, calc(100vw - 42px)); padding: 28px 20px 22px; visibility: hidden; transform: translateX(calc(-100% - 30px)); pointer-events: none; transition: transform var(--motion-panel) var(--ease-out), visibility 0s linear var(--motion-panel); }
  .sidebar.open { visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
  .sidebar .brand { max-width: 198px; }
  .sidebar .brand small { font-size: 7px; }
  .sidebar .brand-mark { width: 32px; height: 35px; }
  .sidebar .nav-label { margin-top: 38px; }
  .sidebar .nav-item { font-size: 14px; min-height: 48px; }
  .nav-close { display: grid; position: absolute; right: 4px; top: 0; width: 44px; height: 44px; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 11; background: #0005; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; touch-action: none; transition: opacity 260ms ease, visibility 0s linear var(--motion-panel); }
  .sidebar.open + .nav-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .nav-item.active::after { margin-right: 2px; }
  .focus-grid { gap: 14px; margin-bottom: 20px; }
  .booking-launcher { min-height: 265px; padding: 25px; border-radius: 16px; }
  .booking-launcher strong { font-size: 29px; }
  .booking-launcher small { font-size: 12px; }
  .booking-launcher .btn { width: auto; font-size: 12px; min-height: 46px; margin-top: 23px; }
  .focus-grid .resume-card { padding: 22px; min-height: 226px; border-radius: 16px; }
  .focus-grid .resume-copy h2 { font-size: 23px; margin-top: 16px; }
  .resume-kicker .eyebrow { font-size: 9px; }
  .focus-grid .resume-actions .btn { width: auto; font-size: 12px; min-height: 46px; }
  .focus-grid .resume-actions .badge { font-size: 9px; }
  .stats { gap: 8px; }
  .stat { padding: 17px 12px; border-radius: 13px; }
  .stat-top { font-size: 10px; min-height: 30px; }
  .stat-value { font-size: 32px; margin: 9px 0 6px; }
  .stat-caption { font-size: 10px; }
  .section-heading h2 { font-size: 14px; }
  .section-heading .btn { font-size: 11px; }
  .template-card { padding: 22px; gap: 16px; }
  .template-icon { width: 42px; height: 48px; }
  .template-card > div:nth-child(2) { min-width: 155px; }
  .template-card h3 { font-size: 20px; }
  .template-card > .btn { margin: 0; width: 100%; min-height: 46px; font-size: 12px; }
  .template-meta { font-size: 10px; }
  .template-meta span { gap: 4px; }
  .notes-toolbar { padding: 14px; }
  .tab { font-size: 12px; }
  .search input { font-size: 16px; min-height: 44px; }
  .search svg { top: 14px; }
  .form-heading h1 { font-size: 27px; }
  .form-heading .button-row .btn { font-size: 12px; }
  .form-heading > .button-row, .step-nav { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .form-title h2 { font-size: 22px; }
  .form-title p { font-size: 12px; }
  .form-card { padding: 24px 18px; }
  .field > label { font-size: 13px; }
  .field small { font-size: 11px; }
  .choice { font-size: 12px; }
  .choice.unanswered { font-size: 10px; }
  .step-number { font-size: 12px; }
  .step-btn { border-radius: 9px; }
  .settings-value { flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
  .settings-value strong { text-align: left; min-width: 0; overflow-wrap: anywhere; }
  .modal { border-radius: 18px; padding: 25px 22px; }
  .modal .button-row { gap: 8px; }
  .modal .button-row .btn { min-height: 46px; }
  .template-field-selection { max-height: clamp(120px, calc(90svh - 490px), 32vh); }
  #note-template-form > .button-row { position: sticky; bottom: -25px; padding: 14px 0; background: var(--paper); border-top: 1px solid var(--line); }
  .auth-story h1 { font-size: 41px; letter-spacing: -1.7px; margin: 38px 0 18px; }
  .auth-story > p { font-size: 13px; }
  .auth-story { padding: 30px 26px; }
  .auth-form h2 { font-size: 30px; }
  .auth-main { padding: 34px 26px 44px; }
  .auth-form > p { font-size: 13px; }
  .btn-sm { font-size: 11px; }
  .bottom-note { font-size: 10px; }
}

/* Personal Acuity agenda: stable rows and quiet, explicit refresh feedback. */
.agenda-heading { align-items: flex-end; }
.agenda-sync { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-3px 0 25px; font-size:12px; color:var(--muted); line-height:1.6; }
.agenda-sync-state { display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:600; white-space:nowrap; }
.agenda-sync-state i { width:7px; height:7px; border-radius:50%; background:var(--ink); }
.agenda-sync-state.is-stale i { background:transparent; border:1px solid var(--muted); }
[data-agenda-consent-check][hidden] { display:none; }
.agenda-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.agenda-search { position:relative; flex:1; }
.agenda-search svg { position:absolute; width:17px; height:17px; left:15px; top:17px; color:var(--muted); pointer-events:none; }
.agenda-search input { width:100%; min-height:50px; padding-left:42px; background:var(--paper); }
.agenda-from { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted); white-space:nowrap; }
.agenda-from input { min-height:50px; width:164px; background:var(--paper); }
.agenda-panel { overflow:hidden; }
.agenda-list-head { display:flex; justify-content:space-between; gap:12px; padding:18px 24px; border-bottom:1px solid var(--line); font-size:11px; color:var(--muted); line-height:1.6; }
.agenda-day { padding:19px 25px; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.agenda-day:first-child { border-top:0; }
.agenda-day h2 { font-size:13px; font-weight:650; margin:0; display:flex; gap:12px; align-items:baseline; }
.agenda-day h2 span { font-weight:400; color:var(--muted); font-size:12px; }
.appointment-details { border-bottom:1px solid var(--line); }
.appointment-details:last-child { border-bottom:0; }
.appointment-details summary { display:flex; align-items:center; gap:24px; padding:28px 25px; cursor:pointer; list-style:none; transition:background-color var(--motion-control) var(--ease-out); }
.appointment-details summary::-webkit-details-marker { display:none; }
.appointment-details summary:hover,.appointment-details[open] summary { background:var(--paper); }
.appointment-details summary:focus-visible { outline:2px solid var(--ink); outline-offset:-4px; border-radius:6px; }
.agenda-time { width:66px; flex-shrink:0; align-self:flex-start; }
.agenda-time strong { display:block; font-size:24px; font-weight:500; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.agenda-time span { display:block; font-size:11px; color:var(--muted); margin-top:7px; }
.agenda-patient { flex:1; min-width:0; }
.agenda-patient h3 { font-size:17px; font-weight:600; letter-spacing:-.3px; margin:0 0 7px; overflow-wrap:anywhere; }
.agenda-patient p { font-size:13px; margin:0 0 6px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.agenda-patient > span { display:block; font-size:12px; color:var(--muted); line-height:1.6; overflow-wrap:anywhere; white-space:pre-line; }
.consent-badge { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:11px; line-height:1.5; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--muted); }
.consent-badge svg { flex-shrink:0; width:14px; height:14px; }
.consent-badge.complete { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.consent-badge.missing,.consent-badge.review { color:var(--ink); border-color:var(--line-strong); background:var(--paper); }
.consent-badge.unknown { color:var(--muted); border-style:dashed; }
.agenda-chevron { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:20px; height:24px; color:var(--muted); transition:transform var(--motion-control) var(--ease-out); }
.agenda-chevron svg { width:17px; height:17px; }
.appointment-details[open] .agenda-chevron { transform:rotate(180deg); }
.appointment-body { padding:0 25px 25px 115px; }
.agenda-consent-note { border:1px solid var(--line); border-radius:9px; padding:15px 18px; background:var(--surface); margin:0 0 24px; }
.agenda-consent-note strong { font-size:12px; font-weight:650; }
.agenda-consent-note p { font-size:12px; color:var(--muted); line-height:1.7; margin:6px 0; }
.agenda-consent-note small { display:block; font-size:10px; color:var(--muted); line-height:1.6; }
.appointment-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 28px; margin:0 0 24px; }
.appointment-facts dt { font-size:10px; color:var(--muted); margin-bottom:7px; }
.appointment-facts dd { font-size:13px; color:var(--ink); line-height:1.65; margin:0; overflow-wrap:anywhere; white-space:pre-line; }
.appointment-text { border-top:1px solid var(--line); padding-top:16px; margin-bottom:18px; }
.appointment-text h4 { font-size:11px; color:var(--muted); margin:0 0 9px; font-weight:500; }
.appointment-text p { font-size:13px; line-height:1.8; color:var(--ink); margin:0; white-space:pre-line; overflow-wrap:anywhere; }
.appointment-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:20px; }
.appointment-footer > span { font-size:10px; color:var(--muted); line-height:1.8; }
.appointment-footer .btn { flex-shrink:0; font-size:12px; }
.agenda-pagination { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:22px 0; }
.agenda-pagination > span { font-size:11px; color:var(--muted); text-align:center; }
.agenda-pagination .btn { font-size:11px; }
.agenda-help { font-size:11px; color:var(--muted); line-height:1.9; max-width:840px; margin:10px 0 0; }
.agenda-empty { min-height:210px; }
.agenda-empty span { max-width:410px; line-height:1.8; }
@media(max-width:1000px) {
  .appointment-details summary { gap:17px; }
  .appointment-body { padding-left:25px; }
  .consent-badge { max-width:170px; }
}
@media(max-width:640px) {
  .agenda-heading { display:block; }
  .page-heading.agenda-heading > .btn { width:100%; margin-top:18px; min-height:48px; font-size:13px; }
  .agenda-sync { align-items:flex-start; flex-direction:column; gap:7px; font-size:11px; }
  .agenda-toolbar { flex-wrap:wrap; gap:10px; }
  .agenda-search { flex-basis:100%; }
  .agenda-search input { font-size:16px; }
  .agenda-from { flex:1; min-width:0; }
  .agenda-from input { width:100%; min-width:0; font-size:16px; }
  .agenda-toolbar > .btn { font-size:11px; min-height:50px; padding:0 12px; }
  .agenda-list-head { padding:15px 17px; font-size:10px; }
  .agenda-day { padding:17px; }
  .appointment-details summary { display:grid; grid-template-columns:50px minmax(0,1fr) 17px; gap:10px 13px; padding:23px 17px; }
  .agenda-time { width:auto; }
  .agenda-time strong { font-size:21px; }
  .agenda-time span { font-size:10px; }
  .agenda-patient h3 { font-size:16px; }
  .agenda-patient p { font-size:12px; }
  .agenda-patient > span { font-size:11px; }
  .agenda-chevron { grid-column:3; grid-row:1; }
  .consent-badge { grid-column:2/4; justify-self:start; max-width:none; font-size:10px; padding:6px 8px; }
  .appointment-body { padding:0 17px 22px; }
  .appointment-facts { gap:19px; }
  .appointment-facts dd { font-size:12px; }
  .appointment-footer { flex-direction:column; align-items:stretch; gap:15px; }
  .appointment-footer .btn { min-height:48px; }
  .agenda-pagination { flex-wrap:wrap; gap:10px; }
  .agenda-pagination .btn { flex:1; min-height:46px; gap:5px; padding:10px 8px; font-size:10px; }
  .agenda-pagination > span { order:3; width:100%; margin-top:3px; }
}

/* Records are cards at every width; actions reveal inside the clipped row. */
.note-swipe-card { position:relative; overflow:hidden; border-top:1px solid var(--line); isolation:isolate; touch-action:pan-y; }
.note-card-front { position:relative; display:flex; align-items:center; background:var(--paper); min-width:0; transform:translateX(var(--swipe-x,0px)); transition:transform 220ms cubic-bezier(.2,.85,.25,1); }
.note-swipe-card.actions-open { --swipe-x:-160px; }
.note-swipe-card.is-swiping .note-card-front { transition:none; will-change:transform; user-select:none; -webkit-user-select:none; }
.note-card-content { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(80px,.6fr); gap:20px; align-items:center; padding:22px 24px; text-align:left; width:100%; min-width:0; color:var(--ink); }
.note-card-content > span { min-width:0; overflow-wrap:anywhere; font-size:13px; }
.note-card-content strong { display:block; font-size:15px; font-weight:600; }
.note-card-content small { display:block; color:var(--muted); font-size:11px; margin:5px 0; line-height:1.5; }
.note-card-content .badge { justify-self:start; }
.note-more { flex-shrink:0; width:44px; height:44px; margin-right:14px; }
.note-card-actions { position:absolute; inset:0 0 0 auto; width:160px; display:flex; background:var(--line); }
.note-card-actions button { width:80px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; font-size:12px; font-weight:600; }
.note-card-actions svg { width:20px; height:20px; }
.note-card-actions .note-delete { background:var(--ink); color:var(--paper); }
.note-card-actions .note-restore { width:160px; }
.record-tools { display:flex; justify-content:flex-end; gap:10px; margin:16px 0; flex-wrap:wrap; }
.agenda-periods { display:flex; gap:10px; margin:22px 0 0; flex-wrap:wrap; }
.agenda-status-filter { display:flex; align-items:center; gap:8px; font-size:12px; }
.agenda-status-filter select { width:auto; min-height:46px; }
.booking-state { display:table; width:fit-content; padding:3px 8px; border:1px solid var(--line); border-radius:5px; margin-top:9px; font-size:11px; color:var(--muted); }
.booking-state.cancelled,.booking-state.no_show { background:var(--surface); border-color:var(--line-strong); font-weight:600; }
.agenda-filters { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:22px; margin:16px 0 22px; min-width:0; }
.agenda-filter-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.agenda-filter-heading strong { display:block; font-size:14px; font-weight:600; }
.agenda-filter-heading span { display:block; font-size:12px; color:var(--muted); margin-top:5px; }
.agenda-filter-heading .btn { min-height:44px; flex-shrink:0; font-size:12px; padding:8px 10px; }
.agenda-filters .agenda-toolbar { margin-bottom:16px; }
.agenda-filter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.agenda-filter-grid label { display:grid; gap:8px; min-width:0; color:var(--muted); font-size:12px; }
.agenda-filter-grid select { width:100%; min-width:0; min-height:48px; font-size:13px; background:var(--surface); }
.agenda-filter-explainer { font-size:11px; line-height:1.7; color:var(--muted); margin:15px 0 0; }
.appointment-tags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px; }
.appointment-tags .booking-state { margin:0; font-size:10px; line-height:1.5; }
.booking-state.note-progress { border-color:transparent; color:var(--muted); background:var(--surface); }
.booking-state.note-progress.is-finalised { background:var(--ink); color:var(--paper); }
@media (max-width:640px) {
  .agenda-filters { padding:16px; border-radius:12px; }
  .agenda-filter-heading { align-items:flex-start; gap:8px; }
  .agenda-filter-heading span { line-height:1.5; }
  .agenda-filters .agenda-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
  .agenda-filters .agenda-search { grid-column:1/-1; min-width:0; }
  .agenda-filters .agenda-from { display:grid; min-width:0; gap:6px; font-size:11px; }
  .agenda-filters .agenda-from input { width:100%; min-width:0; max-width:100%; font-size:16px; }
  .agenda-filters .agenda-toolbar > .btn { align-self:end; }
  .agenda-filter-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .agenda-filter-grid select { font-size:16px; }
}
.schedule-history { border-bottom:1px solid var(--line); padding:0 0 18px; margin-bottom:20px; }
.schedule-history h4 { margin:0 0 12px; }
.schedule-history ol { padding-left:20px; }
.schedule-history li { padding:6px 0; }
.schedule-history span,.schedule-history small { display:block; font-size:12px; margin-top:5px; }
.schedule-history small { color:var(--muted); }
@media(max-width:900px) {
  .note-card-content { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 16px; }
  .step-nav { flex-wrap:wrap; overflow:visible; }
}
@media(max-width:640px) {
  .main,.content,.panel,.form-card,.editor-layout,.invoice-layout { min-width:0; }
  .note-card-content { padding:18px 15px; gap:8px 12px; }
  .note-card-patient { grid-column:1/-1; }
  .note-card-content strong { font-size:16px; }
  .note-card-content .badge { grid-column:1/-1; }
  .note-more { margin:0 6px 0 0; align-self:flex-start; margin-top:12px; width:38px; }
  .note-card-content > span { font-size:12px; }
  .record-tools { justify-content:stretch; }
  .record-tools .btn { flex:1; padding:10px; white-space:normal; font-size:12px; }
  .table-wrap { overflow:visible; }
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td { display:block; width:100%; min-width:0; }
  .table-wrap thead { display:none; }
  .table-wrap tr { padding:16px; border-bottom:1px solid var(--line); }
  .table-wrap td { border:0; padding:6px 0; overflow-wrap:anywhere; white-space:normal; }
  .invoice-list td:nth-child(2)::before { content:'Date · '; color:var(--muted); }
  .invoice-list td:nth-child(3)::before { content:'Total · '; color:var(--muted); }
  .step-nav { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); overflow:visible; }
  .step-btn { min-width:0; }
  .observation-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .observation-row > div { min-width:0; }
  .agenda-toolbar { flex-wrap:wrap; }
  .agenda-status-filter { flex:1 0 100%; }
  .agenda-status-filter select { flex:1; width:100%; font-size:16px; }
  .agenda-periods { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .agenda-periods .btn { font-size:12px; padding:10px; white-space:normal; min-height:48px; }
  .agenda-pagination { flex-wrap:wrap; }
  .agenda-pagination .btn { font-size:11px; padding:10px; }
  .appointment-facts dd,.appointment-text,.schedule-history { overflow-wrap:anywhere; }
  .page-heading > .btn[data-action="refresh-note-folder"] { font-size:12px; gap:6px; }
}
@media(prefers-reduced-motion:reduce) { .note-card-front { transition:none; } }
.notes-refresh { display:flex; justify-content:flex-end; padding:0 16px 10px; }
.note-restore-direct { flex-shrink:0; margin-right:10px; font-size:12px; min-height:44px; }
@media(max-width:640px) { .note-swipe-card.is-deleted .note-card-front { flex-wrap:wrap; } .note-restore-direct { margin:0 15px 15px; } }
.nav-item.is-pending { opacity:.6; cursor:progress; }
.modal,.sidebar { overscroll-behavior:contain; }
@media(max-width:640px) {
  .nav-scrim,.modal-backdrop::before { backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media(prefers-reduced-motion:reduce) {
  .btn:active:not(:disabled),.icon-btn:active:not(:disabled),.choice:active:not(:disabled),.btn:hover:not(:disabled),.btn:hover:not(:disabled)>svg:last-child,.nav-item:hover>svg { transform:none; }
}


/* METIS component system. Contrast pairs are explicit in both appearances. */
::selection { background:var(--contrast-bg); color:var(--contrast-ink); }
body { line-height:1.5; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
input,select,textarea { border-color:var(--line-strong); border-radius:8px; }
input:focus,select:focus,textarea:focus { border-color:var(--focus); box-shadow:0 0 0 1px var(--focus); }
input[type=checkbox] { accent-color:var(--ink); }
input[readonly],input:disabled,select:disabled,textarea:disabled { background:var(--surface); }
::placeholder { color:var(--muted); opacity:1; }
.sidebar { padding-top:32px; background:var(--paper); }
.brand { gap:12px; letter-spacing:normal; font-weight:500; }
.brand-mark,.auth-story .brand-mark { width:34px; height:34px; background:transparent; color:inherit; border-radius:0; box-shadow:none; }
.brand-mark svg { width:34px; height:29px; stroke:none; }
.brand-lockup { min-width:0; }
.brand-wordmark { display:block; font-size:23px; line-height:1.25; font-weight:500; letter-spacing:.19em; }
.brand small { max-width:none; font-size:10px; line-height:1.6; letter-spacing:.01em; text-transform:none; margin-top:8px; color:var(--muted); }
.nav-label { margin-top:36px; font-size:10px; letter-spacing:.14em; }
.nav-item { border-radius:8px; min-height:44px; box-shadow:none; }
.nav-item.active { background:var(--contrast-bg); color:var(--contrast-ink); box-shadow:none; }
.nav-item.active .nav-count { background:transparent; color:inherit; border:1px solid currentColor; }
.nav-item.active::after { display:none; }
.nav-count { min-width:22px; text-align:center; font-variant-numeric:tabular-nums; }
.avatar { color:var(--ink); background:var(--surface); border-color:var(--line); }
.profile small { line-height:1.5; }
.topbar { background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; }
.topbar .workspace-status { border-radius:8px; background:var(--surface); }
.topbar-right { gap:16px; }
.theme-control { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.theme-control select { width:auto; min-width:104px; min-height:40px; padding:8px 10px; font-size:12px; background:var(--paper); border-color:var(--line); }
.theme-control-settings { margin-top:20px; justify-content:space-between; }
.theme-control-settings select { min-width:150px; }
.settings-product { border-top:1px solid var(--line); margin-top:28px; padding-top:24px; }
.settings-product .brand { padding:0; }
.settings-product .brand-wordmark { font-size:20px; }
.settings-product .brand-mark { width:30px; }
.content { max-width:1360px; padding-top:40px; }
.page-heading { margin-bottom:32px; }
.page-heading h1 { font-weight:500; font-size:clamp(30px,3vw,40px); letter-spacing:-.04em; line-height:1.2; }
.page-heading p { color:var(--muted); }
.eyebrow { font-size:10px; letter-spacing:.14em; }
.btn,.choice,.tab,.icon-btn { border-radius:8px; }
.btn,.btn:hover,.btn-primary,.btn-secondary,.choice.selected { box-shadow:none; }
.btn-primary,.choice.selected,.badge.sent,.consent-badge.complete,.booking-state.note-progress.is-finalised,.note-card-actions .note-delete { background:var(--contrast-bg); color:var(--contrast-ink); border-color:var(--contrast-bg); }
.btn-primary:hover { background:var(--contrast-hover); border-color:var(--contrast-hover); }
.btn-secondary,.template-card > .btn { background:var(--paper); color:var(--ink); border-color:var(--line-strong); }
.btn-secondary:hover,.template-card > .btn:hover { background:var(--surface); border-color:var(--ink); }
.btn-sm,.icon-btn { min-height:44px; }
.icon-btn { min-width:44px; height:44px; }
.btn-subtle { color:var(--muted); }
.stat,.panel,.template-card,.resume-card,.focus-grid .resume-card,.booking-launcher,.agenda-filters { border-radius:12px; box-shadow:none; }
.stat { padding:24px; }
.stat-top { color:var(--muted); }
.stat-top svg { color:var(--ink); border-radius:8px; background:var(--surface); }
.stat-value { font-weight:500; font-size:38px; font-variant-numeric:tabular-nums; }
.stat-caption { color:var(--muted); }
.focus-grid { grid-template-columns:1.1fr 1fr; gap:24px; }
.booking-launcher { background:var(--contrast-bg); color:var(--contrast-ink); min-height:256px; padding:28px; border-color:var(--contrast-bg); }
.booking-launcher .eyebrow,.booking-launcher small { color:inherit; opacity:.78; }
.booking-launcher strong { font-size:30px; font-weight:500; line-height:1.2; max-width:370px; letter-spacing:-.035em; }
.booking-launcher .btn { color:var(--contrast-bg); background:var(--contrast-ink); border-color:var(--contrast-ink); }
.booking-launcher .btn:hover { opacity:.9; }
.focus-grid .resume-card { padding:28px; }
.focus-grid .resume-copy h2 { font-weight:500; font-size:24px; margin-top:12px; }
.resume-icon,.template-icon,.form-title > .icon-tile { color:var(--ink); background:var(--surface); border-color:var(--line); border-radius:8px; }
.template-card { background:var(--paper); color:var(--ink); padding:24px; }
.template-card h3 { font-weight:500; }
.tabs { background:var(--surface); border-color:var(--line); border-radius:8px; }
.tab { min-height:40px; }
.tab.active { background:var(--paper); border-color:var(--line); color:var(--ink); box-shadow:none; }
.table-wrap { border-radius:0 0 12px 12px; }
th { background:var(--surface); color:var(--muted); }
.badge { border-radius:4px; font-weight:550; }
.badge.draft,.badge.demo,.badge.finalized { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.note-card-content:focus-visible { outline-offset:-4px; }
.note-card-front { background:var(--paper); }
.note-card-actions { background:var(--surface); }
.choice.unanswered.selected { background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.step-btn { border-radius:8px; min-height:44px; }
.step-btn.active { border-color:var(--line-strong); background:var(--paper); box-shadow:none; }
.step-btn.active .step-number { background:var(--contrast-bg); border-color:var(--contrast-bg); color:var(--contrast-ink); }
.form-card { padding:32px; }
.form-title h2 { font-weight:500; letter-spacing:-.03em; }
.fields { gap:24px; }
.field > label,.field > .field-label { color:var(--ink); }
.required { color:var(--ink); font-weight:650; }
.field input.invalid { border-color:var(--ink); }
.tip,.delivery-card,.alert,.error-box,.import-source,.upload-box,.review-block { border-radius:8px; }
.empty > svg { border-radius:12px; }
.modal { border:1px solid var(--line); border-radius:12px; box-shadow:none; }
.modal-backdrop::before { backdrop-filter:none; -webkit-backdrop-filter:none; }
.pdf-pages { background:var(--surface); }
/* PDF and clinical image pixels retain their original appearance in dark mode. */
.pdf-pages canvas { background:#ffffff; box-shadow:none; }
img,canvas { filter:none; }
#toast { background:var(--contrast-bg); color:var(--contrast-ink); border:1px solid var(--line-strong); border-radius:8px; box-shadow:none; }
.auth-layout { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); background:var(--paper); }
.auth-story { background:var(--hero-bg); color:var(--hero-ink); padding:56px 64px; }
.auth-story .brand small { color:var(--hero-muted); }
.auth-story .brand-mark { width:40px; height:40px; }
.auth-story .brand-mark svg { width:40px; height:34px; }
.auth-story .brand-wordmark { font-size:30px; }
.auth-statement { margin:auto 0; padding:80px 0 64px; max-width:580px; }
.auth-statement .eyebrow { color:var(--hero-muted); }
.auth-story h1 { font-size:clamp(42px,4.5vw,66px); font-weight:400; line-height:1.1; letter-spacing:-.045em; margin:24px 0; }
.auth-statement p { color:var(--hero-muted); max-width:360px; font-size:15px; line-height:1.8; }
.auth-principles { display:flex; flex-wrap:wrap; gap:24px; padding:24px 0; border-top:1px solid #444444; color:var(--hero-ink); font-size:12px; }
.auth-story .auth-foot { margin:20px 0 0; font-size:10px; line-height:1.6; letter-spacing:.1em; color:var(--hero-muted); }
.auth-main { position:relative; padding:96px 48px; background:var(--paper); }
.auth-appearance { position:absolute; top:32px; right:40px; }
.auth-form { max-width:380px; }
.auth-form h2 { font-size:34px; font-weight:500; line-height:1.2; letter-spacing:-.035em; }
.auth-note { text-align:left; line-height:1.7; }
.boot-mark { background:var(--contrast-bg); color:var(--contrast-ink); border-radius:12px; }
.boot-mark svg { width:36px; height:32px; }
.boot-mark::after { border-radius:18px; border-color:var(--line); border-top-color:var(--ink); }
@media (hover:hover) and (pointer:fine) {
  .btn:hover:not(:disabled),.btn:hover:not(:disabled)>svg:last-child,.nav-item:hover>svg { transform:none; box-shadow:none; }
}
@media (max-width:1150px) {
  .brand-wordmark { font-size:20px; }
  .brand { gap:8px; }
  .theme-control-header > span { display:none; }
  .focus-grid { grid-template-columns:1fr 1fr; gap:16px; }
  .auth-story { padding:40px; }
}
@media (max-width:900px) {
  .brand-wordmark { font-size:18px; }
  .brand-mark,.brand-mark svg { width:28px; }
  .content { padding:28px 24px; }
  .topbar-right { gap:8px; }
  .focus-grid { grid-template-columns:1fr; }
  .booking-launcher { min-height:220px; }
  .focus-grid .resume-card { min-height:210px; }
  .auth-layout { grid-template-columns:1fr 1fr; }
  .auth-story { padding:32px; }
  .auth-main { padding:100px 32px 48px; }
  .auth-appearance { right:24px; }
}
@media (max-width:640px) {
  .sidebar { box-shadow:none; border-right:1px solid var(--line-strong); }
  .sidebar .brand-wordmark { font-size:23px; }
  .sidebar .brand-mark,.sidebar .brand-mark svg { width:34px; }
  .content { padding:24px 16px 32px; }
  .topbar { height:64px; padding:0 12px; gap:8px; }
  .breadcrumb { font-size:12px; }
  .breadcrumb > span { display:none; }
  .theme-control-header select { min-width:84px; max-width:94px; font-size:12px; min-height:44px; padding:8px; }
  .topbar-right { margin-left:auto; }
  .topbar-right .badge { display:none; }
  .page-heading { gap:12px; margin-bottom:24px; }
  .page-heading h1 { font-size:30px; }
  .page-heading p { font-size:13px; }
  .booking-launcher,.focus-grid .resume-card { padding:24px; border-radius:12px; }
  .booking-launcher strong { font-size:28px; }
  .booking-launcher .btn,.focus-grid .resume-actions .btn { min-height:48px; font-size:13px; }
  .stats { gap:8px; }
  .stat { padding:16px 12px; border-radius:12px; }
  .stat-top,.stat-caption { font-size:11px; }
  .stat-value { font-size:30px; }
  .stat-top svg { display:none; }
  .form-card { padding:24px 16px; }
  .fields { gap:24px; }
  .field input,.field select,.field textarea,.observation-row input { font-size:16px; }
  .field small { font-size:12px; }
  .step-btn { justify-content:center; }
  .form-heading > .button-row,.step-nav { background:var(--paper); }
  .note-more { width:44px; }
  .btn-sm { font-size:12px; }
  .modal { padding:24px 20px; border-radius:12px; }
  .modal.wide { padding:0; }
  #note-template-form > .button-row { background:var(--paper); }
  .auth-layout { display:block; }
  .auth-story { padding:32px 24px; }
  .auth-story .brand-wordmark { font-size:26px; }
  .auth-statement { padding:40px 0 20px; }
  .auth-story h1 { font-size:40px; margin:16px 0; }
  .auth-statement p { font-size:14px; }
  .auth-principles { padding:20px 0 0; gap:16px; font-size:11px; }
  .auth-story .auth-foot { display:none; }
  .auth-main { padding:84px 24px 40px; }
  .auth-appearance { top:24px; right:24px; }
  .auth-form { max-width:none; }
  .auth-form h2 { font-size:30px; }
  .theme-control-auth select { min-height:44px; }
}
/* The appointment entry stays a quiet dark surface in either appearance. */
:root { --feature-bg:#000000; }
:root[data-theme="dark"] { --feature-bg:#242424; }
.booking-launcher { background:var(--feature-bg); border-color:var(--line); color:#ffffff; }
.booking-launcher .btn { background:#ffffff; border-color:#ffffff; color:#000000; }
@media (max-width:640px) {
  .form-heading > .button-row { margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
  .step-nav { margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
}
.nav-count { color:var(--ink); }
.sidebar { overflow-y:auto; }
.booking-launcher .btn:focus-visible { outline-color:#ffffff; }
.theme-control select { border-color:var(--line-strong); }
/* Account access screens use the same responsive cards as workspace settings. */
.access-card { min-width:0; }
.access-card .section-heading { align-items:flex-start; flex-wrap:wrap; }
.access-card h2 { min-width:0; overflow-wrap:anywhere; }
.access-card .settings-value strong { min-width:0; overflow-wrap:anywhere; }
#public-auth-form { margin-top:22px; }
#public-auth-form h3 { font-size:17px; font-weight:500; letter-spacing:-.2px; }
#public-auth-form .button-row { gap:0; }
#public-auth-form .button-row .btn { margin-top:8px; min-height:44px; }