/* Design direction (sense-platform-design-feedback): calm, simple, regulated.
   Sky Blue #73AFF0 primary · Gold #EFC273 sparingly · white space everywhere.
   The legacy variable names (--sage, --terracotta) are kept so every component
   picks up the new palette without a sweep: --sage now carries Sky Blue and
   --terracotta carries the text-legible gold. */
:root {
  --sage: #73AFF0; --sage-light: #A9CCF6; --sage-pale: #EAF3FD;
  --terracotta: #C9973F; --gold: #EFC273; --terracotta-light: #F3DCA8;
  /* Round-2 §1 Option A — soft blue wash: pale Sky Blue tint as the page
     background, white cards on top. */
  --sand: #EDF4FD; --charcoal: #3A3F45;
  --charcoal-soft: #5F6670; --warm-white: #F4F8FE; --line: rgba(115,175,240,0.22);
  --shadow: 0 2px 16px rgba(58,63,69,0.05); --alert: #E07038; --alert-bg: #FDF0E7;
  --accent-orange: #F89E6B; --accent-teal: #48BDBB; --accent-lavender: #B4C1E3; --accent-purple: #6B307A;
  --side: #73AFF0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'DM Sans', Arial, sans-serif; background: var(--warm-white); color: var(--charcoal); }
a { color: inherit; text-decoration: none; }
h1,h2,h3 { font-family: 'Palanquin', Calibri, sans-serif; font-weight: 700; }
h4 { font-family: 'Palanquin', Calibri, sans-serif; font-weight: 600; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: var(--sage-pale); padding: 1px 6px; border-radius: 5px; }
.muted { color: var(--charcoal-soft); opacity: 0.8; }
.small { font-size: 12px; }

/* AUTH */
body.auth { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, var(--sand), #E4EFFC); padding: 24px; }
.auth-card { background: white; border: 1.5px solid var(--line); border-radius: 20px; padding: 40px; max-width: 440px; width: 100%; box-shadow: var(--shadow); }
.brand { font-family: 'Palanquin', Calibri, sans-serif; font-size: 22px; color: white; }
.brand span { color: var(--sage-light); font-style: italic; }
.brand.dark { color: var(--charcoal); }
.brand.dark span { color: var(--sage); }
.auth-eyebrow { margin-top: 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: lowercase; color: var(--terracotta); }
.auth-card h1 { font-size: 30px; margin: 8px 0 6px; }
.auth-sub { color: var(--charcoal-soft); font-size: 14px; margin-bottom: 22px; }
.auth-error { background: var(--alert-bg); color: var(--alert); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.auth-card label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: lowercase; color: var(--charcoal-soft); margin-bottom: 14px; }
.auth-card input, .form-grid input, .form-grid select, .inline-form select { width: 100%; margin-top: 6px; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px; background: var(--warm-white); }
.auth-card button[type=submit] { width: 100%; padding: 12px; background: var(--sage); color: white; border: none; border-radius: 100px; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; margin-top: 4px; }
.auth-card button[type=submit]:hover { background: #5C9AE0; }
/* Login page section headings + the get-started CTA, which mirrors the
   sign-in button exactly so the two entries carry equal weight. */
.auth-section-heading { font-family: 'Palanquin', Calibri, sans-serif; font-size: 17px; font-weight: 700; text-transform: lowercase; color: var(--charcoal); margin: 0 0 10px; }
.auth-section-heading::after { content: ''; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--sage); margin-top: 5px; }
.auth-start .auth-section-heading::after { background: var(--gold); margin-left: auto; margin-right: auto; }
.auth-cta { display: block; box-sizing: border-box; width: 100%; padding: 12px; background: var(--sage); color: white; border: none; border-radius: 100px; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; margin-top: 4px; text-align: center; text-decoration: none; }
.auth-cta:hover { background: #5C9AE0; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; color: var(--charcoal-soft); font-size: 12px; letter-spacing: 0.05em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* New-family panel: a warm gold zone so the two doors read as equals with
   their own identities — blue for the team, gold for families. */
.auth-start { background: #FDF7EC; border: 1.5px solid var(--terracotta-light); border-radius: 16px; padding: 18px 20px; margin: 0 -21.5px; text-align: center; }
.auth-start .auth-section-heading { margin-bottom: 6px; }
.auth-start-sub { font-size: 13px; color: var(--charcoal-soft); margin: 0 0 12px; line-height: 1.45; }
.auth-cta-gold { background: var(--terracotta); }
.auth-cta-gold:hover { background: #B78432; }
.auth-demo { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--charcoal-soft); }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.demo-grid button { padding: 8px 10px; font-size: 12px; border: 1.5px solid var(--line); background: white; border-radius: 8px; cursor: pointer; font-family: inherit; color: var(--charcoal-soft); }
.demo-grid button:hover { border-color: var(--sage); color: var(--sage); }
.auth-back { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--charcoal-soft); }

/* APP SHELL */
body.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar { background: var(--charcoal); color: var(--warm-white); padding: 24px 18px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { display: block; margin-bottom: 16px; }
.role-chip { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: lowercase; color: var(--sage-light); background: rgba(168,197,173,0.15); padding: 4px 10px; border-radius: 100px; display: inline-block; margin-bottom: 22px; align-self: flex-start; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 9px; font-size: 15px; color: rgba(250,250,247,0.75); transition: all 0.15s; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: white; }
.nav-item.active { background: var(--sage); color: white; }
.nav-item.soon { opacity: 0.5; cursor: default; }
.soon-tag { font-size: 9px; letter-spacing: 0.06em; text-transform: lowercase; background: rgba(255,255,255,0.12); padding: 2px 6px; border-radius: 100px; }
.sidebar-foot { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; margin-top: 12px; position: relative; }
.sidebar-person-row { position: relative; padding-right: 38px; min-height: 38px; }
.sidebar-view-settings { position: absolute; top: 0; right: 0; }
.sidebar-view-settings summary { width: 30px; height: 30px; border: 1.5px solid rgba(255,255,255,0.22); border-radius: 999px; display: grid; place-items: center; cursor: pointer; list-style: none; background: rgba(255,255,255,0.06); }
.sidebar-view-settings summary::-webkit-details-marker { display: none; }
.sidebar-view-settings summary:hover { border-color: var(--gold); background: rgba(239,194,115,0.16); }
.sidebar-view-settings svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; color: rgba(255,255,255,0.88); }
.sidebar-view-menu { position: absolute; right: 0; bottom: 38px; z-index: 35; width: 210px; padding: 10px; border: 1.5px solid rgba(255,255,255,0.22); border-radius: 10px; background: var(--charcoal); box-shadow: 0 10px 30px rgba(0,0,0,0.18); display: grid; gap: 10px; }
.side-menu-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: lowercase; color: var(--gold); margin: 0 0 6px 2px; }
.sidebar-view-menu a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: rgba(255,255,255,0.82); }
.sidebar-view-menu a:hover { background: rgba(255,255,255,0.08); color: white; }
.role-view-menu { display: block; }
.role-view-menu select { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1.5px solid rgba(255,255,255,0.22); border-radius: 8px; background: rgba(255,255,255,0.08); color: white; font-family: inherit; font-size: 13px; }
/* #183: the open list is drawn by the OS on a light background — white text vanished for multi-role users. */
.role-view-menu select option { color: var(--charcoal, #222); background: #fff; }
.role-view-menu select:focus { outline: 2px solid var(--gold); }
.role-view-menu option { color: var(--charcoal); }
.who { font-size: 14px; font-weight: 500; }
.who small { display: block; font-size: 11px; opacity: 0.6; font-weight: 400; margin-top: 2px; }
.logout { margin-top: 12px; width: 100%; padding: 9px; background: transparent; border: 1.5px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); border-radius: 100px; font-family: inherit; font-size: 13px; cursor: pointer; }
.logout:hover { border-color: var(--sage-light); color: white; }

.content { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 28px 40px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--warm-white); z-index: 10; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.changelog-link { width: 34px; height: 34px; border: 1.5px solid var(--line); border-radius: 999px; display: grid; place-items: center; background: white; color: var(--charcoal-soft); flex: none; }
.changelog-link:hover { border-color: var(--gold); color: var(--terracotta); background: rgba(239,194,115,0.12); }
.changelog-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: lowercase; color: var(--sage); }
.eyebrow.terra { color: var(--terracotta); }
.topbar h1 { font-size: 26px; margin-top: 4px; }
.page { padding: 32px 40px 64px; max-width: 1100px; }

/* CARDS */
.card { background: white; border: 1.5px solid var(--line); border-radius: 16px; padding: 26px; margin-bottom: 18px; }
.card h3 { font-size: 19px; margin-bottom: 14px; }
.card-link { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--sage); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hero-panel { background: linear-gradient(135deg, var(--sand), #E4EFFC); border-radius: 18px; padding: 34px; margin-bottom: 18px; }
.hero-panel h2 { font-size: 30px; margin: 8px 0 10px; }
.hero-panel p { color: var(--charcoal-soft); line-height: 1.7; max-width: 560px; margin-bottom: 20px; font-weight: 300; }
.btn-primary { display: inline-block; background: var(--sage); color: white; padding: 11px 20px; border-radius: 100px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; font-family: inherit; margin-right: 10px; }
.btn-primary:hover { background: #5C9AE0; }

.stat-row, .stat-card { }
.stat-row { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.stat-card { background: white; border: 1.5px solid var(--line); border-radius: 14px; padding: 20px 24px; flex: 1; min-width: 140px; }
.stat-card.alert { background: var(--alert-bg); border-color: rgba(192,85,47,0.3); }
.stat-num { font-family: 'Palanquin', Calibri, sans-serif; font-size: 32px; }
.stat-cap { font-size: 12px; text-transform: lowercase; letter-spacing: 0.06em; color: var(--charcoal-soft); opacity: 0.8; margin-top: 2px; }

/* LISTS */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--warm-white); border: 1px solid var(--line); border-radius: 10px; }
/* #308: author display rules (e.g. .task-row's flex) silently beat the UA's
   [hidden] { display:none }, breaking the My Caseload search filter. */
[hidden] { display: none !important; }
.task-row.big { padding: 16px 18px; }
.task-row.high { border-left: 3px solid var(--alert); }
.task-title { font-weight: 600; font-size: 14px; }
.task-meta { font-size: 12px; color: var(--charcoal-soft); opacity: 0.85; margin-top: 3px; }
.feedback-snapshot { margin-top: 10px; max-width: 760px; }
.feedback-snapshot summary { cursor: pointer; color: var(--sage); font-size: 12px; font-weight: 700; text-transform: lowercase; }
.feedback-snapshot iframe { width: min(760px, 72vw); height: 420px; margin-top: 8px; border: 1.5px solid var(--line); border-radius: 8px; background: white; }
.pill { font-size: 10px; font-weight: 600; text-transform: lowercase; letter-spacing: 0.06em; background: var(--sage-pale); color: var(--sage); padding: 3px 9px; border-radius: 100px; }
.audit-list { display: flex; flex-direction: column; gap: 10px; }
.audit-row { border-bottom: 1px solid rgba(107,143,113,0.12); padding-bottom: 9px; }
.audit-act { font-weight: 600; font-size: 13px; }
.audit-tgt { font-size: 13px; color: var(--charcoal-soft); }
.audit-meta { font-size: 11px; color: var(--charcoal-soft); opacity: 0.7; margin-top: 2px; }

/* TABLES + FORMS */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font-size: 11px; text-transform: lowercase; letter-spacing: 0.06em; color: var(--charcoal-soft); padding: 10px 12px; border-bottom: 2px solid var(--line); }
.data-table td { padding: 12px; border-bottom: 1px solid rgba(107,143,113,0.12); vertical-align: top; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form select { width: auto; margin: 0; }
.inline-form button, .task-done, .task-dismiss { padding: 8px 14px; border-radius: 100px; border: 1.5px solid var(--line); background: white; font-family: inherit; font-size: 13px; cursor: pointer; color: var(--charcoal-soft); }
.inline-form button:hover { border-color: var(--sage); color: var(--sage); }
.task-done { background: var(--sage); color: white; border-color: var(--sage); }
.task-dismiss:hover { border-color: var(--alert); color: var(--alert); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.form-grid label { font-size: 12px; font-weight: 600; text-transform: lowercase; letter-spacing: 0.04em; color: var(--charcoal-soft); }
.form-grid .btn-primary { grid-column: 1 / -1; justify-self: start; }
.flash { background: var(--sage-pale); color: var(--sage); border-radius: 10px; padding: 12px 16px; font-size: 14px; margin-bottom: 16px; }
.sos .sos-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sos .sos-list li { background: var(--alert-bg); color: var(--alert); border-radius: 8px; padding: 10px 14px; font-size: 14px; }

/* CLINICAL (Phase 1) */
.link { color: var(--sage); font-weight: 500; }
.link:hover { text-decoration: underline; }
.pill.done { background: #E8F5E9; color: #388E3C; }
.pill.muted-pill { background: #EEE; color: var(--charcoal-soft); }
.pill.alert-pill { background: var(--alert-bg); color: var(--alert); }
details.card summary { cursor: pointer; font-size: 15px; list-style: none; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::before { content: '＋ '; color: var(--sage); }
details.card[open] summary::before { content: '－ '; }
.agenda-day { margin-bottom: 20px; }
.agenda-date { font-size: 12px; font-weight: 600; text-transform: lowercase; letter-spacing: 0.06em; color: var(--sage); margin-bottom: 8px; }
.appt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.note-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.note-form label { font-size: 12px; font-weight: 600; text-transform: lowercase; letter-spacing: 0.04em; color: var(--charcoal-soft); }
.note-form label.full { grid-column: 1 / -1; }
.note-form input, .note-form select, .note-form textarea { width: 100%; margin-top: 6px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px; background: var(--warm-white); text-transform: none; font-weight: 400; color: var(--charcoal); }
.note-form textarea { resize: vertical; line-height: 1.6; }
.note-actions { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; }
.btn-secondary { background: white; color: var(--charcoal-soft); border: 1.5px solid var(--line); padding: 11px 20px; border-radius: 100px; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.btn-secondary:hover { border-color: var(--sage); color: var(--sage); }

/* BILLING (Phase 2) */
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-tab { padding: 7px 14px; border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--charcoal-soft); border: 1.5px solid var(--line); text-transform: lowercase; }
.filter-tab:hover { border-color: var(--sage); color: var(--sage); }
.filter-tab.active { background: var(--sage); border-color: var(--sage); color: white; }
.card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.alert-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--alert-bg); border: 1.5px solid rgba(192,85,47,0.3); border-radius: 14px; padding: 16px 20px; margin-bottom: 18px; color: var(--alert); font-size: 14px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.row-actions .inline-form input { width: 110px; padding: 7px 10px; margin: 0; }
.compliance-list { display: flex; flex-direction: column; gap: 4px; }
.comp-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(107,143,113,0.12); font-size: 14px; }
.comp-row:last-child { border-bottom: none; }
.comp-row b.ok { color: #388E3C; }
.comp-row b.warn { color: var(--alert); }

/* CONTENT & CARER (Phases 6–7) */
.narrative-sm { font-size: 14px; line-height: 1.7; color: var(--charcoal-soft); margin: 8px 0 12px; }
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.path-label { font-size: 11px; font-weight: 600; text-transform: lowercase; letter-spacing: 0.06em; color: var(--sage); margin-bottom: 4px; }
.resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.resource-card { display: flex; gap: 12px; padding: 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--warm-white); }
.resource-icon { font-size: 26px; flex-shrink: 0; }
.resource-title { font-weight: 600; font-size: 14px; }
.resource-meta { font-size: 11px; text-transform: lowercase; letter-spacing: 0.05em; color: var(--charcoal-soft); opacity: 0.7; margin: 2px 0 6px; }
.resource-summary { font-size: 13px; color: var(--charcoal-soft); line-height: 1.5; }
.quick-links { display: flex; flex-direction: column; gap: 8px; }
.quick-links a { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 500; font-size: 14px; transition: all 0.15s; }
.quick-links a:hover { border-color: var(--sage); color: var(--sage); }
.forum-list { display: flex; flex-direction: column; gap: 12px; }
.forum-post { padding: 14px 16px; background: var(--warm-white); border: 1px solid var(--line); border-radius: 12px; }
.forum-author { font-size: 12px; font-weight: 600; color: var(--sage); margin-bottom: 4px; }
.forum-body { font-size: 14px; line-height: 1.6; color: var(--charcoal); }

/* PAYROLL inline employment editor */
.payroll-form { flex-wrap: wrap; }
.payroll-form .mini { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--charcoal-soft); text-transform: lowercase; letter-spacing: 0.04em; }
.payroll-form .mini input { width: 64px; padding: 7px 8px; margin: 0; border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; background: var(--warm-white); }

/* FINANCE (Phase 4) */
tr.cf-neg { background: var(--alert-bg); }
.data-table td b.warn, .comp-row b.warn { color: var(--alert); }
.data-table td b.ok, .comp-row b.ok { color: #388E3C; }

/* PEOPLE & HR (Phase 3) */
.checkin-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.radio-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 14px; transition: all 0.15s; }
.radio-row:hover { border-color: var(--sage-light); }
.radio-row.selected { border-color: var(--sage); background: var(--sage-pale); }
.checkin-form label.full { font-size: 12px; font-weight: 600; text-transform: lowercase; letter-spacing: 0.04em; color: var(--charcoal-soft); }
.checkin-form textarea { width: 100%; margin-top: 6px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px; background: var(--warm-white); }
.checkin-form .btn-primary { align-self: flex-start; }
.wb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.onboard-card { border: 1.5px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 10px; }
.progress { height: 8px; background: var(--sage-pale); border-radius: 100px; overflow: hidden; margin: 10px 0; }
.progress span { display: block; height: 100%; background: var(--sage); border-radius: 100px; }

/* MASTER SPEC — login flow */
.flow-card { max-width: 520px; }
.checkin-slider { margin-top: 10px; }
.checkin-slider input[type=range] { width: 100%; accent-color: var(--sage); margin: 14px 0 6px; }
.slider-labels { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--charcoal-soft); margin-bottom: 18px; }
.slider-labels b { font-family: 'Palanquin', Calibri, sans-serif; font-size: 28px; color: var(--sage); }
.skip-link { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--charcoal-soft); opacity: 0.75; }
.selfcare-options { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 20px; }
.selfcare-options details { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.selfcare-options summary { cursor: pointer; font-weight: 500; font-size: 15px; list-style: none; }
.selfcare-options p { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--charcoal-soft); }
.support-note { background: var(--sage-pale); border-radius: 12px; padding: 12px 16px; font-size: 14px; margin-bottom: 16px; }

/* MY DAY */
.day-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.day-nav { display: flex; gap: 6px; }
.changes-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 100px; background: var(--sand); border: 1.5px solid var(--line); font-size: 13px; font-weight: 500; }
.changes-btn .badge { background: var(--terracotta); color: white; border-radius: 100px; font-size: 11px; font-weight: 600; padding: 2px 8px; }
.day-grid { display: flex; flex-direction: column; gap: 6px; }
.slot-row { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: stretch; }
.slot-time { font-size: 13px; font-weight: 600; color: var(--charcoal-soft); padding-top: 12px; }
.slot-card { border-radius: 10px; padding: 12px 16px; }
.slot-card.free { border: 1.5px dashed var(--line); color: var(--charcoal-soft); opacity: 0.6; font-size: 13px; }
.slot-card.session { background: white; border: 1.5px solid var(--line); border-left: 4px solid #73AFF0; }
.slot-card.session.group { border-left-color: #48BDBB; }
.slot-card.session.cancelled { opacity: 0.55; text-decoration: line-through; }
.slot-card.lunch-card { background: var(--sand); font-size: 13px; color: var(--charcoal-soft); }
.slot-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.slot-sub { margin: 3px 0 8px; }
.week-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.week-col { background: var(--warm-white); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px; min-height: 120px; }
.week-col.today { border-color: var(--sage); background: var(--sage-pale); }
.week-head { font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; position: sticky; top: var(--topbar-h, 96px); z-index: 9; background: var(--warm-white); border-radius: 6px; padding: 4px 2px; }
.week-col.today .week-head { background: var(--sage-pale); }
/* Free quarter rows inside merged hour cards: hover-only plus, popover menu */
.wk-q { position: relative; }
.wk-q[open] { z-index: 30; }
.wk-q > summary { list-style: none; }
.wk-q > summary::-webkit-details-marker, .wk-q > summary::marker { display: none; }
.wk-q-plus { opacity: 0; transition: opacity 0.12s; }
.wk-q summary:hover .wk-q-plus, .wk-q[open] .wk-q-plus { opacity: 1; }
.wk-q-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: white; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow); }
/* Legend collapses into a small popover */
.wk-legend { position: relative; margin-bottom: 10px; }
.wk-legend > summary { cursor: pointer; list-style: none; }
.wk-legend > summary::-webkit-details-marker, .wk-legend > summary::marker { display: none; }
.wk-legend-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; background: white; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; min-width: 280px; }
.week-block { background: white; border-left: 3px solid #73AFF0; border-radius: 6px; font-size: 12px; padding: 6px 8px; margin-bottom: 6px; }
.week-dayhead { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--charcoal-soft); margin: 10px 0 5px; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.week-dayhead:first-child { margin-top: 0; }
.week-block summary { list-style: none; }
.week-block summary::-webkit-details-marker, .week-block summary::marker { display: none; }
/* Fixed heights + absolute positions keep every day's times aligned; an
   opened card grows over its neighbours like a popover while it's open. */
.week-grid details.week-block[open] { height: auto !important; overflow: visible !important; z-index: 9 !important; box-shadow: var(--shadow); }
/* The summary fills the whole card, so a tall block is clickable anywhere —
   not just on its first line of text. */
.week-grid details.week-block:not([open]) > summary { height: 100%; }
.week-block.group { border-left-color: #48BDBB; }
.week-block.cancelled { opacity: 0.5; text-decoration: line-through; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mg-head { font-size: 11px; font-weight: 600; text-transform: lowercase; color: var(--charcoal-soft); text-align: center; }
.month-cell { position: relative; aspect-ratio: 1.4; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px; font-size: 12px; }
.month-cell.dim { opacity: 0.35; }
.month-cell.busy { background: var(--sage-pale); }
.month-cell:hover { border-color: var(--sage); }
.mc-count { position: absolute; bottom: 6px; right: 8px; font-weight: 600; color: var(--sage); }

/* CHANGES SCREEN */
.change-row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); border-left-width: 4px; background: white; }
.change-kind { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: lowercase; }
.ch-orange { border-left-color: #F57C00; } .ch-orange .change-kind { color: #F57C00; }
.ch-teal { border-left-color: #48BDBB; } .ch-teal .change-kind { color: #2e9e9c; }
.ch-blue { border-left-color: #5C6BC0; } .ch-blue .change-kind { color: #5C6BC0; }
.ch-lav { border-left-color: #9575CD; } .ch-lav .change-kind { color: #7E57C2; }
.ch-gold { border-left-color: #D4A017; } .ch-gold .change-kind { color: #B8860B; }
.ch-light { border-left-color: #90CAF9; } .ch-light .change-kind { color: #5B9BD5; }

/* MY TASKS */
.task-group { margin-bottom: 22px; }
.tick { border-radius: 50%; width: 38px; height: 38px; padding: 0; font-size: 16px; }
.tick:active { transform: scale(1.25); }
.moment { background: var(--sage-pale); border-radius: 100px; padding: 12px 22px; text-align: center; font-size: 15px; margin-bottom: 18px; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }
.quote { font-family: 'Palanquin', Calibri, sans-serif; font-style: italic; color: var(--charcoal-soft); margin-top: 12px; }
.suggest { border-color: var(--terracotta-light); }
.focus-card { text-align: left; padding: 40px; }

/* MY CLIENTS flags */
.client-row { text-decoration: none; }
.flag-red { border-left: 4px solid var(--alert); }
.flag-amber { border-left: 4px solid #E8A33D; }
.flag-blue { border-left: 4px solid #5C6BC0; }
.flag-green { border-left: 4px solid #66BB6A; }
.flag-detail { color: var(--alert); }
.doc-new { background: #FEF8EF; }

/* COMMS */
.comm-list { display: flex; flex-direction: column; gap: 10px; }
.comm-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: white; }
.comm-row.inbound { background: var(--sage-pale); }
.comm-meta { font-size: 12px; color: var(--charcoal-soft); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.comm-body { font-size: 14px; line-height: 1.6; }

/* MY PROGRESS */
.prog-wrap { margin-bottom: 10px; }
.prog-wrap summary { list-style: none; cursor: pointer; }
.prog-wrap summary::-webkit-details-marker { display: none; }
.prog-card { display: flex; align-items: center; gap: 16px; background: white; border: 1.5px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.prog-card.attention { border-left: 4px solid var(--terracotta); }
.prog-icon { font-size: 24px; }
.prog-stmt { font-family: 'Palanquin', Calibri, sans-serif; font-size: 19px; }
.prog-card .chev { margin-left: auto; color: var(--sage); font-size: 20px; }
.prog-detail { background: var(--warm-white); border: 1px solid var(--line); border-top: none; border-radius: 0 0 14px 14px; padding: 14px 20px; margin: -8px 8px 0; }
.reward-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.reward-row .btn-primary { grid-column: 1 / -1; justify-self: start; }
.sparkline { display: flex; align-items: flex-end; gap: 4px; height: 76px; margin: 12px 0; }
.spark { width: 14px; background: var(--sage-light); border-radius: 4px 4px 0 0; }
.spark.sp-amber { background: #E8A33D; }
.spark.sp-red { background: #C0552F; }
.navigator { background: var(--sand); }

/* INTAKE FORM + ADMIN (Stages 6-9) */
.intake-card { max-width: 560px; }
.step-dots { display: flex; gap: 6px; margin: 14px 0 6px; }
.step-dot { width: 26px; height: 6px; border-radius: 100px; background: var(--line); }
.step-dot.on { background: var(--sage); }
.room-grid-table td { font-size: 12px; }
.room-busy { background: var(--sage-pale); font-weight: 500; }
.room-free { color: var(--charcoal-soft); opacity: 0.5; }

/* V9 — themes (accent layer; brand frame unchanged) */
body.theme-sage { --sage: #6B8F71; --sage-light: #A8C5AD; --sage-pale: #E9F0EA; }
body.theme-terracotta { --sage: #C4714A; --sage-light: #E8A882; --sage-pale: #F9E9DF; }
body.theme-ocean { --sage: #3E7CB1; --sage-light: #8FB8DA; --sage-pale: #E3EEF7; }
body.theme-plum { --sage: #7B5EA7; --sage-light: #B49ED4; --sage-pale: #EFE9F7; }
body.theme-teal { --sage: #247B7B; --sage-light: #79B8B8; --sage-pale: #E1F0F0; }
body.theme-rose { --sage: #B85C72; --sage-light: #D99AAA; --sage-pale: #F7E7EB; }
body.theme-sunset { --sage: #D6813C; --sage-light: #EDB47E; --sage-pale: #FAEBDD; }
body.theme-navy { --sage: #355070; --sage-light: #839BB8; --sage-pale: #E5EAF0; }
body.theme-forest { --sage: #2E7D46; --sage-light: #7FB894; --sage-pale: #E3F1E8; }
body.theme-olive { --sage: #708238; --sage-light: #A9B871; --sage-pale: #EEF1DF; }
body.theme-berry { --sage: #8E4585; --sage-light: #C08BBA; --sage-pale: #F3E6F1; }
body.theme-coral { --sage: #E2725B; --sage-light: #F0A797; --sage-pale: #FBE9E4; }
body.theme-gold { --sage: #C9A227; --sage-light: #E0C877; --sage-pale: #F8F1DB; }
body.theme-slate { --sage: #5B6770; --sage-light: #97A2AA; --sage-pale: #E8EBED; }
body.theme-midnight { --sage: #A8C5AD; --sage-pale: #2f3a31; --warm-white: #191B19; --sand: #232623; --charcoal: #ECEAE4; --charcoal-soft: #B9B7B0; --line: rgba(168,197,173,0.25); }
body.theme-midnight .card, body.theme-midnight .stat-card, body.theme-midnight .task-row, body.theme-midnight .slot-card.session,
body.theme-midnight .comm-row, body.theme-midnight .week-col, body.theme-midnight .month-cell, body.theme-midnight .change-row,
body.theme-midnight .prog-card, body.theme-midnight .resource-card, body.theme-midnight .dir-card, body.theme-midnight .onboard-card { background: #222522; color: var(--charcoal); }
body.theme-midnight .data-table td, body.theme-midnight .data-table th { color: var(--charcoal); }
body.theme-midnight input, body.theme-midnight select, body.theme-midnight textarea { background: #2b2e2b !important; color: var(--charcoal) !important; border-color: var(--line) !important; }
body.text-small { font-size: 13px; } body.text-large { font-size: 17px; } body.text-xl { font-size: 19px; }

/* V9 — avatars + directory */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover; font-weight: 600; flex-shrink: 0; }
.swatch-row { display: flex; gap: 10px; margin-top: 8px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 3px solid transparent; font-size: 18px; }
.swatch.on, .swatch:has(input:checked) { border-color: var(--charcoal); box-shadow: 0 0 0 3px var(--warm-white), 0 0 0 6px var(--charcoal); transform: scale(1.12); }
.swatch { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.swatch input { display: none; }
.swatch-check { color: white; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,0.35); opacity: 0; }
.swatch input:checked + .swatch-check { opacity: 1; }
.dir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dir-card { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; background: var(--warm-white); }
.who-link { text-decoration: none; display: block; }
.who-row { display: flex; gap: 6px; align-items: baseline; }
.pron { opacity: 0.6; font-weight: 400; }

/* V9 — journey timeline + wellbeing dots + widgets */
.jt-purple { border-left-color: #7B3FB8; } .jt-purple .change-kind { color: #7B3FB8; }
.jt-teal { border-left-color: #48BDBB; } .jt-teal .change-kind { color: #2e9e9c; }
.jt-blue { border-left-color: #5C6BC0; } .jt-blue .change-kind { color: #5C6BC0; }
.jt-gold { border-left-color: #D4A017; } .jt-gold .change-kind { color: #B8860B; }
.wb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.wb-dot.green { background: #66BB6A; } .wb-dot.amber { background: #E8A33D; } .wb-dot.red { background: #C0552F; } .wb-dot.grey { background: #bbb; }
.widget .wx { border: none; background: none; cursor: pointer; color: var(--charcoal-soft); opacity: 0.5; font-size: 14px; }
.widget .wx:hover { opacity: 1; }
.notetaker summary { cursor: pointer; list-style: none; }

/* MOBILE NAV — everything lives behind the burger button */
.burger { display: none; }
@media (max-width: 860px) {
  body.auth { width: 100%; padding: 16px; overflow-x: hidden; grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .auth-card { min-width: 0; max-width: 100% !important; padding: 26px 22px; }
  .auth-start { margin: 0 -10px; padding: 16px 12px; }
  .auth-card .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .auth-card input, .auth-card select, .auth-card textarea { min-width: 0; max-width: 100%; }
  body.app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; }
  .sidebar .brand { margin-bottom: 0; }
  .burger { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 42px; height: 38px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 19px; line-height: 1; border-radius: 10px; cursor: pointer; }
  body.nav-open .burger { background: rgba(255,255,255,0.35); }
  .sidebar nav, .sidebar-foot { display: none; }
  body.nav-open .sidebar nav { display: flex; flex-direction: column; flex: 1 0 100%; margin-top: 10px; }
  body.nav-open .sidebar-foot { display: block; flex: 1 0 100%; border-top: 1px solid rgba(255,255,255,0.25); padding-top: 12px; margin-top: 8px; }
  .grid-2, .form-grid, .sos .sos-list { grid-template-columns: 1fr; }
  .topbar, .page { padding-left: 20px; padding-right: 20px; }
  /* wide data scrolls inside its own container, never the whole page */
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .week-grid { overflow-x: auto; padding-bottom: 6px; }
  .week-grid .week-col { min-width: 180px; }
  .resource-grid, .dir-grid { grid-template-columns: 1fr; }
  .inline-form { flex-wrap: wrap; }
}

/* ============================================================================
   DESIGN DIRECTION OVERRIDES — calm, simple, regulated (feedback doc, 2026-07)
   Order matters: this block ends the file so it wins the cascade.
   ========================================================================== */

/* lowercase-first chrome: headings, buttons, labels, navigation. Body copy,
   table cells and inputs keep their natural case so names stay capitalised. */
h1, h2, h3, h4, button, .btn-primary, .btn-secondary, .nav-item, .card-link,
.link, .filter-tab, .soon-tag, .role-chip, .bb-item, .bb-menu a,
.form-grid label, .note-form label, .checkin-form label.full, legend,
.auth-eyebrow, .eyebrow, .stat-cap, th, .pill, .chip { text-transform: lowercase; }
input, select, textarea, option, .task-title, .task-meta, td, p, .who, .comm-body { text-transform: none; }

/* sky-blue sidebar — a brand surface, per "large surfaces stay white, soft
   grey, or Sky Blue only". Personalisation themes recolour it via --side. */
.sidebar { background: var(--side); color: #fff; }
.sidebar .brand, .brand { color: #fff; }
.brand span { color: var(--gold); font-style: normal; }
.brand .wm-curve { display: block; margin-top: 2px; }
.role-chip { color: #fff; background: rgba(255,255,255,0.2); letter-spacing: 0.08em; }
.nav-item { color: rgba(255,255,255,0.88); }
.nav-item:hover { background: rgba(255,255,255,0.16); color: #fff; }
.nav-item.active { background: rgba(255,255,255,0.94); color: #2E6BB0; font-weight: 600; }
.sidebar-foot { border-top-color: rgba(255,255,255,0.25); }
.logout { border-color: rgba(255,255,255,0.4); color: #fff; }
.logout:hover { border-color: #fff; color: #fff; }
.soon-tag { background: rgba(255,255,255,0.25); }
.bottom-bar { background: var(--side); }
.bb-item.active { background: rgba(255,255,255,0.94); color: #2E6BB0; }
.bb-menu { background: var(--side); }
body.theme-sage { --side: #6B8F71; }
body.theme-terracotta { --side: #C4714A; }
body.theme-ocean { --side: #3E7CB1; }
body.theme-plum { --side: #7B5EA7; }
body.theme-teal { --side: #247B7B; }
body.theme-rose { --side: #B85C72; }
body.theme-sunset { --side: #D6813C; }
body.theme-navy { --side: #355070; }
body.theme-midnight { --side: #222522; }

/* generous white space, minimal visual noise, soft rounded corners */
.page { padding: 40px 48px 80px; }
.topbar { padding: 30px 48px; border-bottom-color: rgba(115,175,240,0.14); }
.card { border: none; box-shadow: 0 1px 10px rgba(58,63,69,0.05); border-radius: 20px; padding: 30px; margin-bottom: 22px; }
.stat-card { border: none; box-shadow: 0 1px 10px rgba(58,63,69,0.05); border-radius: 18px; }
.stat-card.alert { box-shadow: none; }
.hero-panel { border-radius: 22px; padding: 38px; }
.task-row, .comm-row, .resource-card, .dir-card, .onboard-card, .change-row, .forum-post { border-color: rgba(115,175,240,0.16); border-radius: 14px; }
.data-table th { border-bottom: 1px solid var(--line); font-weight: 600; }
.data-table td { border-bottom-color: rgba(115,175,240,0.12); }
.audit-row, .comp-row { border-bottom-color: rgba(115,175,240,0.12); }
body.theme-midnight .card, body.theme-midnight .stat-card { box-shadow: none; }

/* repeat-booking warnings must be unmissable — amber, bold, bordered */
.flash.warn { background: #FDF3E0; border: 2px solid #E5A33D; color: #6b4c10; font-weight: 600; line-height: 1.6; }

/* gentle empty-state voice */
.data-table td.muted, .task-list .muted { font-style: normal; }

/* brand pattern — playful scatter, low opacity; login screen only (never
   behind text, tables, forms, or data). */
body.auth {
  background-color: var(--sand);
  background-image:
    radial-gradient(circle 3px at 12% 22%, rgba(115,175,240,0.35) 97%, transparent),
    radial-gradient(circle 2px at 78% 14%, rgba(239,194,115,0.5) 97%, transparent),
    radial-gradient(circle 4px at 88% 70%, rgba(115,175,240,0.25) 97%, transparent),
    radial-gradient(circle 2px at 24% 82%, rgba(239,194,115,0.45) 97%, transparent),
    radial-gradient(circle 3px at 60% 90%, rgba(180,193,227,0.5) 97%, transparent),
    radial-gradient(circle 12px at 8% 62%, transparent 62%, rgba(115,175,240,0.18) 66%, transparent 74%),
    radial-gradient(circle 16px at 92% 34%, transparent 62%, rgba(239,194,115,0.22) 66%, transparent 72%),
    linear-gradient(60deg, transparent 49.6%, rgba(115,175,240,0.12) 49.6%, rgba(115,175,240,0.12) 50.4%, transparent 50.4%),
    linear-gradient(135deg, var(--sand), #E9F2FC);
}

/* brandmark: lowercase blue s + gold t bridged by a smiling curve */
.brandmark { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.brandmark .bm-letters { font-family: 'Palanquin', Calibri, sans-serif; font-weight: 700; font-size: 30px; letter-spacing: 1px; }
.brandmark .bm-letters .bm-s { color: var(--sage); }
.brandmark .bm-letters .bm-t { color: var(--gold); }
.brand.dark { color: var(--sage); }
.brand.dark span { color: var(--gold); }
.auth-card .brandmark { margin-bottom: 12px; }
/* round-2: back-to-logins ghost button + leader flag rows */
.back-logins { margin-top: 6px; opacity: 0.75; border-style: dashed; }
.back-logins:hover { opacity: 1; }
/* long navs (practice manager) scroll inside the sidebar so the profile,
   sign out and back-to-logins footer is always visible */
.sidebar nav { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; padding-right: 2px; }
.sidebar nav::-webkit-scrollbar { width: 5px; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 100px; }
.nav-item { padding: 8px 12px; }
.sidebar-foot { flex-shrink: 0; }
/* print: the app shell is a 248px+1fr grid — collapse it so printable pages
   (invoices, agreements) use the full sheet instead of the sidebar column */
@media print {
  body.app { display: block; background: #fff; }
  .sidebar, .topbar, .bottom-bar, .no-print { display: none !important; }
  .page { padding: 0; max-width: none; }
  .card, #invoice-doc { box-shadow: none !important; border: 1px solid #ddd; max-width: none !important; margin: 0; border-radius: 0; }
  a { text-decoration: none; }
}

/* ============================================================================
   SPACING PASS — "generous white space everywhere", tuned across every portal.
   One system-level block: all pages share these primitives.
   ========================================================================== */
.page { padding: 44px 52px 88px; max-width: 1140px; }
/* Timeline views earn the full window — five day columns need the room. */
.page:has(.week-grid) { max-width: 1560px; }
.week-grid { gap: 14px; }
.week-col { min-width: 0; }
/* Month cells: booked-time bar + whole-day actions popover. */
.month-cell { position: relative; }
.mc-load { display: block; height: 5px; border-radius: 3px; background: var(--line); margin-top: 4px; overflow: hidden; }
.mc-load-fill { display: block; height: 100%; background: var(--sage); border-radius: 3px; }
.mc-load-fill.hot { background: #C4714A; }
.mc-pct { font-size: 10px; color: var(--charcoal-soft); }
.mc-actions { position: absolute; bottom: 4px; right: 4px; }
.mc-actions summary { list-style: none; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--charcoal-soft); padding: 2px 7px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--warm-white, #fff); }
.mc-actions summary:hover { border-color: var(--sage); color: var(--sage); }
.mc-actions summary::-webkit-details-marker { display: none; }
.mc-actions[open] summary { color: var(--sage); }
.mc-pop { position: absolute; right: 0; bottom: 26px; z-index: 30; background: var(--warm-white, #fff); border: 1.5px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: var(--shadow); display: grid; gap: 6px; min-width: 230px; }
.mc-pop button { width: 100%; text-align: left; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 12.5px; }
.mc-pop button:hover { background: var(--sage-pale); }
/* Leave days stand out: tinted cell + a labelled pill. */
.month-cell.on-leave { background: #FBF3E4; }
.mc-leave { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 8px; padding: 2px 6px; margin-top: 3px; white-space: nowrap; }
.mc-leave.sick { background: #FBEAE8; color: #B3261E; }
.mc-leave.annual { background: #E3F1E8; color: #2E7D46; }
.mc-leave.unavail { background: #E8EBED; color: #5B6770; }
.month-cell.on-leave:has(.mc-leave.unavail) { background: #F0F2F3; }
/* Weekends are visibly not working days. */
.month-cell.weekend { background: #EDEFF1; opacity: 0.6; }
/* Client search — a proper search field, not a bare label. */
.client-search { margin: 4px 0 14px; }
.client-search input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 14px; background: var(--warm-white, #fff); }
.client-search input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 18%, transparent); }
.topbar { padding: 30px 52px; }
.topbar h1 { margin-top: 6px; }

/* cards + section rhythm */
.card { padding: 32px 34px; margin-bottom: 26px; }
.card h3 { margin-bottom: 18px; }
.card h3 + p.muted, .card h3 + .muted.small { margin-top: -8px; margin-bottom: 16px; }
.card-head-row { margin-bottom: 20px; gap: 16px; }
.grid-2 { gap: 24px; }
.hero-panel { padding: 40px 44px; margin-bottom: 26px; }
.hero-panel h2 { margin: 10px 0 14px; }
.hero-panel .btn-primary { margin-top: 6px; }

/* stats */
.stat-row { gap: 16px; margin-bottom: 26px; }
.stat-card { padding: 24px 28px; min-width: 150px; }
.stat-cap { margin-top: 4px; }

/* lists */
.task-list { gap: 10px; }
.task-row { padding: 14px 18px; gap: 14px; }
.task-row.big { padding: 18px 20px; }
.task-meta { margin-top: 4px; line-height: 1.5; }
.comm-list { gap: 12px; }
.comm-row { padding: 14px 18px; }
.audit-list { gap: 12px; }
.audit-row { padding-bottom: 12px; }
.quick-links { gap: 10px; }
.quick-links a { padding: 14px 16px; }
.forum-list { gap: 14px; }
.forum-post { padding: 16px 18px; }
.compliance-list { gap: 6px; }
.comp-row { padding: 13px 0; }

/* tables */
.data-table th { padding: 12px 14px; }
.data-table td { padding: 15px 14px; line-height: 1.55; }

/* forms */
.form-grid { gap: 18px; }
.note-form { gap: 20px; }
.checkin-form { gap: 10px; margin-top: 14px; }
.radio-row { padding: 13px 16px; }
.inline-form { gap: 10px; }
.row-actions { gap: 8px; }
.filter-tabs { gap: 8px; }
.flash { padding: 14px 18px; margin-bottom: 20px; }
.alert-banner { padding: 18px 22px; margin-bottom: 22px; }

/* pills breathe a little */
.pill { padding: 4px 11px; }

/* clinician day/week/month */
.day-grid { gap: 8px; }
.slot-card { padding: 14px 18px; }
.slot-time { padding-top: 14px; }
.week-grid { gap: 12px; }
.week-col { padding: 12px; }
.agenda-day { margin-bottom: 26px; }
.day-toolbar { margin-bottom: 22px; gap: 14px; }

/* cards-in-grids */
.resource-grid { gap: 16px; }
.resource-card { padding: 18px; }
.dir-grid { gap: 16px; }
.dir-card { padding: 16px 18px; }
.onboard-card { padding: 18px 20px; margin-bottom: 12px; }
.prog-card { padding: 20px 22px; }
.path-grid { gap: 16px; }

/* financial os one-page expandables */
.fin-more > summary { padding: 13px 0; }

/* mobile: keep proportions without crowding */
@media (max-width: 860px) {
  .page { padding: 24px 20px 90px; }
  .topbar { padding: 22px 20px; }
  .card { padding: 22px 20px; }
  .hero-panel { padding: 26px 22px; }
  .stat-card { padding: 18px 20px; }
}
/* public entry points on the login screen (the landing page is disabled) */
.auth-public { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }
.auth-public a { color: var(--sage); font-weight: 500; }
.auth-public a:hover { text-decoration: underline; }
/* self-registration on the login card */
.auth-register { margin-top: 16px; }
.auth-register summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--sage); list-style: none; }
.auth-register summary::-webkit-details-marker { display: none; }
.auth-register .reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-register label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: lowercase; color: var(--charcoal-soft); margin-bottom: 12px; }
.auth-register input { width: 100%; margin-top: 6px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px; background: var(--warm-white); }
.auth-register button { width: 100%; padding: 11px; background: var(--sage); color: #fff; border: none; border-radius: 100px; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }

/* global developer-feedback widget — every page, signed in or not */
.dev-fb { position: fixed; top: 10px; right: 14px; z-index: 500; font-family: 'DM Sans', Arial, sans-serif; }
.dev-fb summary { list-style: none; cursor: pointer; background: #fff; color: var(--charcoal-soft, #5F6670);
  border: 1.5px solid rgba(115,175,240,0.35); border-radius: 100px; padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(58,63,69,0.08); text-transform: lowercase; }
.dev-fb summary::-webkit-details-marker { display: none; }
.dev-fb summary:hover { color: #2E6BB0; border-color: #73AFF0; }
.dev-fb form { margin-top: 8px; background: #fff; border: 1.5px solid rgba(115,175,240,0.3); border-radius: 14px;
  padding: 14px; width: 290px; box-shadow: 0 10px 30px rgba(58,63,69,0.14); display: flex; flex-direction: column; gap: 8px; }
.dev-fb select, .dev-fb textarea, .dev-fb input { font-family: inherit; font-size: 13px; padding: 8px 10px;
  border: 1.5px solid rgba(115,175,240,0.3); border-radius: 9px; background: #fff; color: #3A3F45; resize: vertical; }
.dev-fb button { background: #73AFF0; color: #fff; border: none; border-radius: 100px; padding: 9px; font-family: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; text-transform: lowercase; }
.dev-fb button:hover { background: #5C9AE0; }
@media (max-width: 860px) { .dev-fb { top: auto; bottom: 20px; } }
/* feedback widget: room for big chunks of feedback */
.dev-fb form { width: 420px; max-width: calc(100vw - 40px); }
.dev-fb textarea { min-height: 220px; line-height: 1.55; }

/* low check-in support popup */
.wb-pop-overlay { position: fixed; inset: 0; background: rgba(58,63,69,0.45); z-index: 600; display: grid; place-items: center; padding: 20px; }
.wb-pop { background: #fff; border-radius: 20px; padding: 30px 32px; max-width: 520px; width: 100%; box-shadow: 0 20px 60px rgba(58,63,69,0.25); }
.wb-pop h3 { margin-bottom: 6px; }
.wb-opt { border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-top: 12px; }
.wb-opt b { display: block; margin-bottom: 4px; }
.wb-opt p { font-size: 13.5px; color: var(--charcoal-soft); line-height: 1.55; margin-bottom: 10px; }

/* clinic chat — the internal slack */
.chat-wrap { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: start; }
.chat-side { display: flex; flex-direction: column; gap: 8px; }
.chat-chan { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 1px 8px rgba(58,63,69,0.05); position: relative; }
.chat-chan .pill { position: absolute; top: 12px; right: 12px; }
.chat-chan.on { outline: 2px solid var(--sage); }
.chat-main { display: flex; flex-direction: column; min-height: 60vh; }
.chat-scroll { flex: 1; overflow-y: auto; max-height: 56vh; padding: 6px 4px; display: flex; flex-direction: column; gap: 10px; }
.chat-day { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--charcoal-soft); text-transform: lowercase; margin: 10px 0 2px; }
.chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.chat-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sage-pale); color: #2E6BB0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.chat-bubble { background: var(--warm-white); border-radius: 4px 14px 14px 14px; padding: 9px 13px; max-width: 78%; }
.chat-msg.mine .chat-bubble { background: var(--sage-pale); }
.chat-meta { font-size: 12px; margin-bottom: 3px; }
.chat-body { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.chat-form { display: flex; gap: 10px; margin-top: 14px; align-items: flex-end; }
.chat-form textarea { flex: 1; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 12px; font-family: inherit; font-size: 14px; resize: vertical; }
@media (max-width: 860px) { .chat-wrap { grid-template-columns: 1fr; } .chat-side { flex-direction: row; overflow-x: auto; } }

/* Chat emoji picker — one tap drops it into the message box. */
.chat-emoji { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 0 2px; }
.chat-emoji .emo { border: none; background: none; font-size: 19px; line-height: 1; padding: 4px 6px; border-radius: 8px; cursor: pointer; transition: transform 0.1s, background 0.1s; }
.chat-emoji .emo:hover { background: var(--wash, #F4F8FE); transform: scale(1.25); }

/* In-place record editing on the Child & Family tab. */
.record-edit { margin-top: 10px; }
.record-edit summary { cursor: pointer; list-style: none; }
.record-edit summary::-webkit-details-marker { display: none; }
.record-edit .form-grid { background: var(--warm-white); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }

/* Month calendar on the admin appointments diary. */
.cal-table td { vertical-align: top; height: 76px; padding: 8px; }
.cal-table td a { display: flex; flex-direction: column; gap: 4px; height: 100%; }
.cal-table td a:hover .pill { background: var(--sage); color: #fff; }
.cal-table .cal-empty { background: var(--warm-white); }
.cal-table .cal-today { outline: 2px solid var(--sage); outline-offset: -2px; border-radius: 8px; }

/* Booking flow: the needs-approval notice families cannot miss. */
.approval-note { background: #FDF6E7; border: 1.5px solid var(--gold); border-radius: 12px; padding: 12px 16px; font-size: 13.5px; line-height: 1.55; margin-bottom: 16px; text-transform: none; }

/* Chat v2: mentions, reactions, pins, threads, DMs, search, nav badge. */
.nav-badge { background: var(--gold); color: var(--charcoal); font-size: 11px; font-weight: 700; border-radius: 100px; padding: 1px 8px; }
.mention { color: var(--sage); font-weight: 600; }
.chat-msg.mine .mention { color: #2F6CB3; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chat-search { display: flex; gap: 6px; align-items: center; }
.chat-search input { border: 1.5px solid var(--line); border-radius: 100px; padding: 7px 14px; font-family: inherit; font-size: 13px; background: var(--warm-white); width: 200px; }
.chat-pins { background: #FDF6E7; border: 1.5px solid var(--gold); border-radius: 12px; padding: 10px 14px; font-size: 13px; margin: 10px 0 4px; }
.chat-pin-row { padding: 4px 0; border-top: 1px solid rgba(239,194,115,0.35); margin-top: 4px; }
.chat-pin-row:first-of-type { border-top: none; margin-top: 6px; }
.chat-dm-head { padding: 12px 4px 4px; letter-spacing: 0.08em; text-transform: lowercase; font-weight: 600; }
.chat-chan.chat-dm b { font-size: 13px; }
.chat-reply { margin-left: 44px; }
.chat-reply .chat-bubble { border-left: 3px solid var(--sage-light); }
.chat-reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.react-form { display: inline-flex; }
.react-chip { border: 1.5px solid var(--line); background: white; border-radius: 100px; padding: 2px 9px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.react-chip.mine { border-color: var(--sage); background: var(--sage-pale); }
.chat-actions { display: flex; gap: 2px; align-items: center; margin-top: 6px; opacity: 0; transition: opacity 0.12s; flex-wrap: wrap; }
.chat-msg:hover .chat-actions, .chat-actions:focus-within { opacity: 1; }
.chat-act { border: none; background: none; cursor: pointer; font-size: 12.5px; padding: 2px 6px; border-radius: 8px; color: var(--charcoal-soft); font-family: inherit; list-style: none; display: inline-block; }
.chat-act:hover { background: var(--warm-white); }
.chat-editwrap { display: inline-block; }
.chat-editwrap summary::-webkit-details-marker { display: none; }
.chat-replying { font-size: 12.5px; color: var(--charcoal-soft); padding: 6px 2px 0; }

/* Clickable author names in chat — straight to a direct message. */
.chat-name { border-bottom: 1px dashed rgba(115,175,240,0.6); }
.chat-name:hover { color: var(--sage); }

/* Compact week grid on the admin diary — the whole week on one screen. */
.wk-table { table-layout: fixed; }
.wk-table th, .wk-table td { padding: 5px 4px; vertical-align: top; }
.wk-table .wk-time { width: 52px; font-size: 11px; color: var(--charcoal-soft); white-space: nowrap; }
.wk-table th.wk-day a { display: block; text-align: center; font-size: 12px; }
.wk-table th.wk-day a:hover b { color: var(--sage); }
.wk-table .wk-today { background: var(--sage-pale); }
.wk-chip { display: block; background: white; border: 1px solid var(--line); border-left: 3px solid var(--sage); border-radius: 6px; padding: 2px 6px; font-size: 10.5px; line-height: 1.35; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-chip small { display: block; color: var(--charcoal-soft); font-size: 9.5px; }
.wk-chip:hover { border-color: var(--sage); }
.wk-chip.wk-done { border-left-color: #6BBF8A; opacity: 0.75; }
.wk-chip.wk-cancelled { border-left-color: #C9C9C9; opacity: 0.55; text-decoration: line-through; }

/* Click-to-book room slots: free cells carry a + that opens an inline popover. */
.room-grid-table td { position: relative; }
.cell-book summary { list-style: none; cursor: pointer; color: var(--charcoal-soft); opacity: 0.35; font-size: 15px; text-align: center; display: block; border-radius: 8px; padding: 2px 0; }
.cell-book summary::-webkit-details-marker { display: none; }
td.room-free:hover .cell-book summary { opacity: 1; background: var(--sage-pale); color: var(--sage); }
.cell-book[open] summary { opacity: 1; color: var(--sage); }
.cell-book form { position: absolute; z-index: 40; top: calc(100% - 6px); left: 50%; transform: translateX(-50%); background: white; border: 1.5px solid var(--sage); border-radius: 12px; box-shadow: var(--shadow-hover, 0 8px 28px rgba(58,63,69,0.16)); padding: 12px; width: 250px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cell-book form b { font-size: 12.5px; }
.cell-book form input[name=purpose] { border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 13px; background: var(--warm-white); }
.cell-book form .btn-primary { margin: 0; }
.room-grid-table tr:last-child .cell-book form, .room-grid-table tr:nth-last-child(2) .cell-book form { top: auto; bottom: calc(100% - 6px); }
/* the open popover's cell must stack above its positioned sibling cells */
.room-grid-table td:has(.cell-book[open]) { z-index: 60; }
.cell-book[open] { position: relative; z-index: 60; }
td.room-free:hover, td.room-free:has(.cell-book[open]) { opacity: 1; }

/* Carer groups: compact cards — info left, waitlist + action right. */
.group-card h3 { margin-bottom: 6px; }
.group-card p { margin: 0 0 6px; }
.group-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.group-info { min-width: 0; }
.group-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.group-side .btn-primary { margin: 0; white-space: nowrap; }
@media (max-width: 640px) { .group-row { flex-direction: column; align-items: stretch; } .group-side { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Carer documents: file picker + camera side by side. */
.doc-file-row { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.doc-file-row input[type=file] { flex: 1; margin-top: 0; }
.doc-photo-btn { border: 1.5px solid var(--sage); background: var(--sage-pale); color: var(--sage); border-radius: 10px; padding: 0 16px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.doc-photo-btn:hover { background: var(--sage); color: #fff; }
.doc-hint { display: block; margin-top: 6px; font-weight: 400; text-transform: none; }

/* Merged Users & Roles / Accounts & Roles page. */
.acct-form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.acct-roles { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.acct-role { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; text-transform: none; font-weight: 400; color: var(--charcoal); white-space: nowrap; }
.acct-role input { accent-color: var(--sage); width: auto; margin: 0; }
.acct-mgr { flex-shrink: 0; align-items: center; }
.acct-mgr select { min-width: 130px; }
@media (max-width: 720px) { .task-row.big .acct-mgr { width: 100%; } }

/* Multi-role sidebars: a labelled rule between each role's nav section. */
.nav-role-group { margin: 0; }
.nav-role-group > summary { list-style: none; cursor: pointer; }
.nav-role-group > summary::-webkit-details-marker { display: none; }
.nav-sep { display: flex; align-items: center; gap: 8px; margin: 12px 2px 4px; }
.nav-sep:first-child { margin-top: 0; }
.nav-sep::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.25); }
.nav-sep span { font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: lowercase; color: rgba(255,255,255,0.85); white-space: nowrap; }
.nav-role-group > summary.nav-sep { padding: 6px 2px; }
.nav-sep .nav-group-chevron { order: 2; font-size: 15px; line-height: 1; transition: transform 0.15s; }
.nav-sep::after { order: 1; }
.nav-role-group[open] .nav-group-chevron { transform: rotate(90deg); }
/* Dot on the heading whose group holds the current page — orientation while collapsed. */
.nav-role-group.has-active:not([open]) > summary > span:first-child::after { content: ' •'; color: var(--gold, #C9A227); font-weight: 800; }
.nav-item.nav-role-director { border-left:3px solid rgba(239,194,115,0.8); }
.nav-item.nav-role-practice_manager { border-left:3px solid rgba(168,197,173,0.9); }
.nav-item.nav-role-admin { border-left:3px solid rgba(255,255,255,0.55); }
.nav-item.nav-role-line_manager, .nav-item.nav-role-supervisor { border-left:3px solid rgba(150,210,220,0.85); }
.nav-item.nav-role-clinician { border-left:3px solid rgba(115,175,240,0.95); }
.nav-item.nav-role-finance { border-left:3px solid rgba(220,160,190,0.85); }
.nav-item.nav-role-carer { border-left:3px solid rgba(240,170,130,0.9); }
.family-setup-notice { border:1px solid rgba(239,194,115,0.9); background:rgba(239,194,115,0.14); }
.notification-inbox { max-width:920px; }
.notification-row { display:flex; align-items:center; gap:14px; padding:14px 12px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.notification-row:last-child { border-bottom:0; }
.notification-row.unread { background:rgba(239,194,115,0.1); }
.notification-row-link { display:flex; align-items:center; gap:14px; flex:1; min-width:0; color:inherit; text-decoration:none; }
.notification-read-form { flex:none; }
.notification-read-button { border:0; background:transparent; color:var(--muted); padding:6px 4px; font-size:11px; cursor:pointer; white-space:nowrap; }
.notification-read-button:hover { color:var(--ink); text-decoration:underline; }
.notification-kind { min-width:82px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.notification-copy { display:flex; flex-direction:column; gap:3px; flex:1; }
.notification-copy small { color:var(--muted); }
.notification-dot { width:8px; height:8px; border-radius:50%; background:var(--terra); flex:none; }
.notification-filter { margin:14px 0; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:rgba(115,175,240,0.06); }
.notification-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.notification-toolbar .notification-filter { flex:1; }
.notification-filter label, .notification-preference-list label { display:flex; align-items:center; gap:8px; font-size:13px; }
.notification-filter input, .notification-preference-list input { width:auto; margin:0; }
.notification-settings { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.notification-preference-list { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; }
.notification-preference-list button { flex-basis:100%; width:max-content; }
.notification-settings-link { margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); }
.notification-preference { flex:1 1 260px; align-items:flex-start !important; padding:12px; border:1px solid var(--line); border-radius:8px; background:rgba(115,175,240,0.04); }
.notification-preference span { display:flex; flex-direction:column; gap:3px; }
.notification-preference small, .notification-preference em { color:var(--muted); font-size:12px; font-style:normal; }
.notification-preference em { color:var(--terra); }
.changelog-card { max-width: 860px; }
.changelog-list { display: flex; flex-direction: column; gap: 18px; }
.changelog-entry { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.changelog-entry:first-child { padding-top: 0; border-top: 0; }
.changelog-entry time { color: var(--sage); font-size: 12px; font-weight: 700; text-transform: lowercase; }
.changelog-entry h4 { margin-bottom: 8px; font-size: 16px; }
.changelog-group + .changelog-group { margin-top: 14px; }
.changelog-group h5 { margin: 0 0 5px; color: var(--charcoal); font-size: 12px; text-transform: uppercase; letter-spacing: 0; }
.changelog-entry ul { padding-left: 18px; color: var(--charcoal-soft); line-height: 1.65; font-size: 14px; }
.changelog-entry li + li { margin-top: 4px; }
@media (max-width: 720px) {
  .changelog-entry { grid-template-columns: 1fr; gap: 6px; }
}
body.context-all .topbar { border-bottom-color:rgba(239,194,115,0.75); }
body.context-all .role-chip { background:rgba(239,194,115,0.85); color:#3c3325; }
body.context-all .role-context { border-color:rgba(239,194,115,0.85); }

/* form-grid textareas were never styled — they rendered as tiny browser
   defaults (comms compose, feedback log, invoice notes). Match the inputs. */
.form-grid textarea, .auth-card textarea, .payroll-form textarea {
  width: 100%; margin-top: 6px; padding: 11px 13px; border: 1.5px solid var(--line);
  border-radius: 10px; font-family: inherit; font-size: 14px; background: var(--warm-white);
  resize: vertical; min-height: 92px; line-height: 1.6; text-transform: none;
}
.form-grid textarea:focus { border-color: var(--sage); outline: none; }
/* .full was only ever defined for .note-form — form-grid full-width fields
   (comms message, feedback detail, SA fields) were squeezing into one column. */
.form-grid .full, .form-grid label.full { grid-column: 1 / -1; }

/* Two never-styled primitives, fixed platform-wide:
   1) text inputs inside inline forms (add-a-task, anonymous feedback,
      around-the-clinic, flag-for-admin, resolve boxes, replies...)
   2) the .btn pill (help-me-prioritise, focus mode, day-nav arrows, Go) */
.inline-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]) {
  padding: 9px 13px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 13.5px; background: var(--warm-white); margin: 0; min-width: 140px;
}
.inline-form input:focus { border-color: var(--sage); outline: none; }
.row-actions .inline-form input { width: 130px; min-width: 110px; padding: 7px 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 15px; border-radius: 100px;
  border: 1.5px solid var(--line); background: white; font-family: inherit; font-size: 13px;
  font-weight: 500; color: var(--charcoal-soft); cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--sage); color: var(--sage); }

/* Carer agreement review pages — readable plain-English terms. */
.agree-doc { line-height: 1.7; font-size: 14px; }
.agree-doc p { margin: 0 0 10px; }
.agree-doc h4 { margin: 14px 0 6px; font-size: 14px; }
.agree-doc ul { margin: 0 0 10px; padding-left: 22px; }
.agree-doc li { margin-bottom: 4px; }

/* start-a-report: labelled selects/inputs stacked under tiny captions. */
.rep-f { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--charcoal-soft); }
.rep-f select, .rep-f input { margin: 0; }

/* Hoverable info dot — a calm explainer next to actions that do several things. */
.info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--sage); color: var(--sage); font-size: 12px; font-weight: 700; font-style: italic; font-family: Georgia, serif; cursor: help; }
.info-tip .info-pop { display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: min(340px, 82vw); background: var(--charcoal); color: var(--warm-white); border-radius: 12px; padding: 14px 16px; font-size: 12.5px; line-height: 1.65; font-weight: 400; font-style: normal; font-family: 'DM Sans', Arial, sans-serif; text-align: left; z-index: 80; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.info-tip .info-pop b { display: block; margin-bottom: 6px; }
.info-tip .info-pop::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--charcoal); }
.info-tip:hover .info-pop, .info-tip:focus .info-pop { display: block; }

/* Invoice list — one card per invoice: identity left, amount/status right,
   one calm action row underneath; rare actions in a 'more' popover. */
.inv-list { display: grid; gap: 10px; }
.inv-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; background: white; }
.inv-card.overdue { border-color: #F3C9B0; background: #FFFAF6; }
.inv-card.void { opacity: 0.55; }
.inv-card-main { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.inv-card-who { min-width: 0; flex: 1; }
.inv-card-title { font-size: 15px; }
.inv-card-sub { color: var(--charcoal-soft); font-size: 12.5px; margin-top: 2px; }
.inv-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.inv-chip { font-size: 11px; padding: 2px 8px; border-radius: 100px; background: var(--sage-pale); color: var(--charcoal-soft); }
.inv-flag { margin-top: 8px; font-size: 12px; color: var(--alert); background: var(--alert-bg); border-radius: 8px; padding: 6px 10px; }
.inv-card-amount { text-align: right; white-space: nowrap; display: grid; gap: 4px; justify-items: end; }
.inv-card-money { font-family: 'Palanquin', Calibri, sans-serif; font-weight: 700; font-size: 20px; }
.inv-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.inv-card-actions .inline-form { margin: 0; }
.inv-more { position: relative; }
.inv-more > summary { list-style: none; }
.inv-more > summary::-webkit-details-marker, .inv-more > summary::marker { display: none; }
.inv-more-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: white; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); display: grid; gap: 8px; min-width: 240px; }
@media (max-width: 720px) {
  .inv-card-main { flex-direction: column; }
  .inv-card-amount { text-align: left; justify-items: start; }
}

/* "+ internal time" popover inside the ＋ quarter menu (My Week) */
.wk-q-menu { flex-wrap: wrap; }
.wk-internal { position: relative; }
.wk-internal > summary::-webkit-details-marker, .wk-internal > summary::marker { display: none; }
.wk-internal-form { position: absolute; top: calc(100% + 6px); left: -12px; z-index: 45; width: 300px; max-width: 80vw; background: white; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: var(--shadow); font-size: 13px; text-align: left; }
.wk-internal-form input, .wk-internal-form select { width: 100%; padding: 7px 9px; border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; background: var(--warm-white); }
.wk-internal-more > summary { list-style: none; }
.wk-internal-more > summary::-webkit-details-marker, .wk-internal-more > summary::marker { display: none; }
.wk-attendees { display: flex; flex-wrap: wrap; gap: 4px 10px; max-height: 96px; overflow-y: auto; }
.wk-attendees label { display: flex; align-items: center; gap: 4px; font-size: 12px; text-transform: none; font-weight: 500; letter-spacing: 0; }
.wk-attendees input { width: auto; margin: 0; }
.week-col:last-child .wk-internal-form, .week-col:nth-last-child(2) .wk-internal-form { left: auto; right: -12px; }
.wk-attendees label.is-busy { color: var(--charcoal-soft); opacity: 0.6; }
.wk-attendees label.is-busy .wk-busy-tag { color: var(--alert); font-weight: 600; }
.wk-suggest:empty, .wk-busy-hint:empty { display: none; }
.wk-meet-edit .wk-attendees { max-height: 110px; }
.week-grid details.week-block.wk-meeting[open] { min-width: 260px; }
/* A day blocked out / on leave: the whole column reads as "off" — heavy
   hatch, everything in it faded, a bold banner across the top and a big
   watermark down the column. */
.week-col.day-off { position: relative; background: repeating-linear-gradient(45deg, #ECEFF3 0 12px, #DDE2E8 12px 16px); border-color: #C9CFD8; }
.week-col.day-off .week-head { background: transparent; }
.week-col.day-off .week-head .pill { opacity: 0.6; }
.week-col.day-off > div[style*="position:relative"] { opacity: 0.38; filter: grayscale(0.7); }
.week-col.day-off > div[style*="position:relative"]:hover { opacity: 0.85; filter: none; }
.week-col.day-off::after { content: attr(data-off-label); position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; white-space: nowrap; font-size: 28px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(60, 70, 85, 0.22); pointer-events: none; }
.wk-dayoff { border-left: 4px solid #6B7683 !important; background: #3C4655; color: #fff; font-weight: 700; font-size: 13px; padding: 8px 10px; margin-bottom: 8px; box-shadow: var(--shadow); }
.wk-dayoff.leave { background: #B8860B; border-left-color: #8A6508 !important; }
.wk-dayoff .small { display: block; margin-top: 3px; font-weight: 600; color: #FFE1DC; }
/* My Day free slots: controls appear on hover / focus (always on touch) */
.slot-card.free .free-actions { opacity: 0; transition: opacity 0.12s; }
.slot-card.free:hover .free-actions, .slot-card.free:focus-within .free-actions, .slot-card.free:focus .free-actions { opacity: 1; }
.slot-card.free:hover .free-hint, .slot-card.free:focus-within .free-hint { display: none; }
@media (hover: none) { .slot-card.free .free-actions { opacity: 1; } .slot-card.free .free-hint { display: none; } }
/* Carer: "Can't make it?" chooser */
.cm-pop { margin-top: 8px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--warm-white); }
.cm-opt { padding: 8px 0; border-top: 1px solid var(--line); }
.cm-opt:first-of-type { border-top: none; padding-top: 0; }
.cm-cancel { margin-top: 4px; }


/* Floating clinic-chat bubble + panel (every staff page) */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--sage); color: #fff; font-size: 26px; box-shadow: 0 6px 22px rgba(0,0,0,0.22); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-fab.has-unread { animation: chat-pulse 1.6s ease-in-out infinite; }
.chat-fab.open { transform: scale(0.94); }
@keyframes chat-pulse { 0%,100% { box-shadow: 0 6px 22px rgba(0,0,0,0.22), 0 0 0 0 rgba(217,154,43,0.55); } 50% { box-shadow: 0 6px 22px rgba(0,0,0,0.22), 0 0 0 12px rgba(217,154,43,0); } }
.chat-fab-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--gold, #d99a2b); color: #3a2f14; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.chat-panel { position: fixed; right: 22px; bottom: 90px; z-index: 899; width: min(440px, calc(100vw - 32px)); height: min(640px, calc(100vh - 120px)); background: var(--warm-white, #fff); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.28); display: flex; flex-direction: column; overflow: hidden; }
.chat-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); background: var(--sand, #f7f7f4); }
.chat-panel iframe { flex: 1; border: none; width: 100%; background: transparent; }
@media (max-width: 640px) { .chat-panel { right: 8px; left: 8px; width: auto; bottom: 84px; } .chat-fab { right: 14px; bottom: 14px; } }
.bottom-bar ~ .chat-fab { bottom: 84px; }
/* Midnight theme: chat bubbles and channel cards follow the dark palette */
body.theme-midnight .chat-fab { background: #A8C5AD; color: #191B19; }
body.theme-midnight .chat-chan, body.theme-midnight .chat-panel-head { background: #222522; color: var(--charcoal); }
body.theme-midnight .chat-msg .chat-bubble { background: #2b2e2b; color: var(--charcoal); }
body.theme-midnight .chat-msg.mine .chat-bubble { background: #34423a; color: var(--charcoal); }
body.theme-midnight .chat-msg .chat-body, body.theme-midnight .chat-msg .chat-meta { color: var(--charcoal); }
body.theme-midnight .chat-msg .chat-avatar { background: #34423a; color: #A8C5AD; }
body.theme-midnight .chat-emoji .emo:hover { background: #2b2e2b; }
/* Session detail: destructive primary (did not arrive) stands out */
.btn-danger { background: var(--alert, #B3261E); color: #fff; border: none; border-radius: 10px; padding: 9px 16px; font-weight: 700; cursor: pointer; font-family: inherit; }
.btn-danger:hover { filter: brightness(0.92); }
.sd-changes .filter-tab { margin-bottom: 4px; }

/* Team schedule day grid (#177): clinicians across, time down, Cliniko-style. */
.ts-grid-wrap { overflow-x: auto; padding: 0; }
.ts-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 12px; }
.ts-grid th, .ts-grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; }
.ts-grid .ts-head { position: sticky; top: 0; z-index: 2; background: var(--charcoal); color: #fff; padding: 8px 10px; text-align: left; min-width: 180px; font-weight: 700; }
.ts-grid .ts-head .pill { margin-left: 6px; }
.ts-grid .ts-time { position: sticky; left: 0; z-index: 1; background: var(--warm-white, #faf8f4); color: var(--muted); font-weight: 600; width: 56px; min-width: 56px; padding: 4px 8px; text-align: right; white-space: nowrap; }
.ts-grid thead .ts-time { background: var(--charcoal); z-index: 3; }
.ts-grid tr.ts-half .ts-time { color: transparent; }
.ts-grid tr.ts-half:hover .ts-time { color: var(--muted); }
.ts-grid tr.ts-hour th, .ts-grid tr.ts-hour td { border-top: 1px solid rgba(0,0,0,0.12); }
.ts-grid td.ts-cell { min-height: 26px; height: 26px; padding: 2px 4px; }
.ts-grid td.ts-cell .week-block { margin: 0 0 4px; }
.ts-grid td.ts-cell:not(.has):hover { background: rgba(115,175,240,0.08); }

/* My Day drag-and-drop reschedule (#199) */
.slot-card.session[draggable="true"] { cursor: grab; }
.slot-card.session.dragging { opacity: 0.45; cursor: grabbing; }
.slot-card.free { position: relative; }
.slot-card.free.drop-ok { outline: 2px dashed var(--gold); outline-offset: -2px; background: rgba(239,194,115,0.18); }
.slot-card.free.drop-ok::after, .slot-card.free[data-drop-label]::after { content: attr(data-drop-label); position: absolute; right: 8px; top: 6px; font-size: 12px; font-weight: 700; color: var(--charcoal); background: #fff; border: 1px solid var(--gold); border-radius: 999px; padding: 1px 8px; pointer-events: none; }
/* Team schedule week grid (#255): people down, Mon–Fri across */
.ts-grid .ts-person { text-align: left; width: 160px; min-width: 160px; white-space: normal; color: var(--charcoal); font-weight: 700; padding: 8px 10px; vertical-align: top; }
.ts-grid td.ts-cell.wk { height: auto; }
/* Team schedule → book from a gap (#278) */
.ts-grid td.ts-cell .ts-book { display: inline-block; padding: 1px 8px; border-radius: 999px; color: var(--sage); font-weight: 700; text-decoration: none; opacity: 0; font-size: 12px; }
.ts-grid td.ts-cell:hover .ts-book { opacity: 1; }
.ts-grid td.ts-cell .ts-book:hover { background: rgba(72,189,187,0.15); }

/* Feedback loop controls: uniform button size, breathing room */
.fb-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fb-btn { width: auto !important; display: inline-block; padding: 6px 14px !important; font-size: 12.5px !important; border-radius: 999px; white-space: nowrap; margin: 0 !important; }
.task-row .inline-form + .inline-form { margin-left: 6px; }
/* dev-feedback rows: action buttons pinned top-right in one tidy same-width column */
.fb-row { align-items: flex-start; }
.fb-side { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: 0 0 auto; }
.fb-side .inline-form { margin: 0 !important; display: block; }
.fb-side .fb-side-btn { margin: 0; width: 100%; min-width: 96px; text-align: center; box-sizing: border-box; }
.fb-side .pill { margin: 0; text-align: center; white-space: nowrap; }
.task-row > .inline-form button, .task-row > form.inline-form .task-done, .task-row > form.inline-form .task-dismiss { margin: 0; }