/* Figtree latin-ext */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Figtree latin */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Fraunces latin-ext */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/fraunces-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Fraunces latin */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/fraunces-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --pine:#143C3C; --pine-deep:#0e2d2c; --pine-hover:#1e514e; --pine-active:#22605c;
  --side-text:#e2ece9; --side-muted:#8ba6a1; --side-line:#2a5854;
  --brass:#b98e4e; --brass-2:#cda869;
  --ground:#f3f1ea; --card:#ffffff; --card-2:#faf9f3;
  --ink:#1f2b29; --muted:#66716d; --line:#e4e1d7; --tint:#e8f0ec; --tint-ink:#0f3b39;
  --ok:#2f7d5b; --warn:#8f6d1e; --critical:#b23b32; --critical-bg:#fbeeec; --critical-line:#eecac6;
  /* aliases kept for older inline styles */
  --danger: var(--critical); --accent: var(--pine); --bg: var(--ground);
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 10px;
  --side-w: 258px;
  --ok-bg: color-mix(in srgb, var(--ok) 12%, var(--card));
  --ok-line: color-mix(in srgb, var(--ok) 35%, var(--card));
  --warn-bg: color-mix(in srgb, var(--warn) 14%, var(--card));
  --warn-line: color-mix(in srgb, var(--warn) 40%, var(--card));
  /* certification status colours: fixed in both themes; always paired with an icon and ink text */
  --s-crit:#d03b3b; --s-ser:#ec835a; --s-warn:#fab219; --s-good:#0ca30c;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { 
  color-scheme: dark;
  --ground:#0c1817; --card:#152a28; --card-2:#112221;
  --ink:#e6efec; --muted:#93a7a2; --line:#284744; --tint:#16302e; --tint-ink:#cda869;
  --ok:#5cc196; --warn:#d3a94e; --critical:#e2695f; --critical-bg:#2a1917; --critical-line:#4a2b28;
 } }
:root[data-theme="dark"] { 
  color-scheme: dark;
  --ground:#0c1817; --card:#152a28; --card-2:#112221;
  --ink:#e6efec; --muted:#93a7a2; --line:#284744; --tint:#16302e; --tint-ink:#cda869;
  --ok:#5cc196; --warn:#d3a94e; --critical:#e2695f; --critical-bg:#2a1917; --critical-line:#4a2b28;
 }

* { box-sizing: border-box; }
/* The hidden attribute must beat any class that sets display (e.g. .onb-add .day { display:inline-flex }). */
[hidden] { display:none !important; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body { margin:0; min-height:100vh; font: 15px/1.5 var(--font-body); color:var(--ink); background:var(--ground); }
h1, h2, h3 { font-family: var(--font-head); font-weight:600; letter-spacing:-.01em; color:var(--ink); }
h1 { font-size:26px; margin:0 0 16px; line-height:1.2; }
h2 { font-size:18px; margin:24px 0 8px; }
h3 { font-size:15px; margin:16px 0 6px; }
a { color: var(--tint-ink); }
a:hover { color: var(--brass); }
:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }
.skip { position:absolute; left:-999px; top:8px; background:var(--card); padding:6px 10px; border-radius:6px; z-index:99; }
.skip:focus { left:8px; }

/* ---- sidebar ---- */
.sidebar { position:fixed; top:0; bottom:0; left:0; width:var(--side-w); background:var(--pine); color:var(--side-text); display:flex; flex-direction:column; z-index:30; transition: transform .2s ease; }
.side-brand { display:flex; gap:12px; align-items:center; padding:14px 18px 8px; text-decoration:none; color:inherit; }
.side-brand:hover { color:inherit; }
.side-mark { width:36px; height:36px; border-radius:10px; background:var(--brass); color:var(--pine-deep); font: 600 20px/36px var(--font-head); text-align:center; flex:none; }
.side-brand > span { min-width:0; }
.side-brand b { display:block; font: 600 19px/1.1 var(--font-head); color:#fff; }
/* The clinic name can be long ("Big Life Integrative Health"): wrap onto two lines, never overflow the rail. */
.side-brand small { display:block; font-size:12px; line-height:1.3; color:var(--side-muted); margin-top:3px; white-space:normal; overflow-wrap:anywhere; text-wrap:balance; }
.side-nav { flex:1; overflow-y:auto; padding:0 10px 6px; }
.side-sec + .side-sec { margin-top:2px; }
.side-group { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px 2px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--side-muted); cursor:pointer; list-style:none; border-radius:8px; user-select:none; }
.side-group::-webkit-details-marker { display:none; }
.side-group:hover { color:#fff; }
.side-group:focus-visible { outline:2px solid var(--brass); outline-offset:-2px; }
.side-group .chev { flex:none; transition:transform .18s ease; transform:rotate(0deg); }
.side-sec:not([open]) > .side-group .chev { transform:rotate(-90deg); }
.side-item { display:flex; align-items:center; gap:10px; padding:3px 10px 3px 11px; border-radius:8px; color:var(--side-text); text-decoration:none; font-size:14px; border-left:3px solid transparent; }
.side-item svg { width:17px; height:17px; flex:none; color:var(--side-muted); }
.side-item:hover { background:var(--pine-hover); color:#fff; }
.side-item[aria-current="page"] { background:var(--pine-active); border-left-color:var(--brass); color:#fff; }
.side-item[aria-current="page"] svg { color:var(--brass-2); }
.side-badge { margin-left:auto; background:var(--brass); color:var(--pine-deep); font-size:11px; font-weight:700; padding:0 7px; border-radius:999px; line-height:18px; }
.side-emergency { border-top:1px solid var(--side-line); padding:10px; }
.side-emergency .side-item { color:#f6d2ce; background:rgba(178,59,50,.16); }
.side-emergency .side-item svg { color:#e8867d; }
.side-emergency .side-item:hover { background:rgba(178,59,50,.32); color:#fff; }
.side-emergency .side-item[aria-current="page"] { background:rgba(178,59,50,.32); border-left-color:#e2695f; }
.side-foot { border-top:1px solid var(--side-line); padding:8px 14px 10px; }
.side-user { display:flex; align-items:center; gap:10px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--pine-hover); color:#fff; display:grid; place-items:center; font-weight:600; font-size:13px; flex:none; border:1px solid var(--side-line); }
.side-who { flex:1; min-width:0; }
.side-who b { display:block; font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-who span { font-size:11px; color:var(--side-muted); text-transform:capitalize; }
.side-links { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; font-size:12px; }
.side-links a, .side-links button { color:var(--side-muted); text-decoration:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.side-links a:hover, .side-links button:hover { color:#fff; }
.side-links svg { width:13px; height:13px; }
.side-links form { display:inline; }
.icon-btn { width:30px; height:30px; border-radius:8px; border:0; background:transparent; color:var(--side-muted); display:grid; place-items:center; cursor:pointer; padding:0; font:inherit; }
.icon-btn:hover { background:var(--pine-hover); color:#fff; }
.icon-btn svg { width:16px; height:16px; }
.theme-toggle .sun { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display:block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display:none; }
}
:root[data-theme="dark"] .theme-toggle .sun { display:block; }
:root[data-theme="dark"] .theme-toggle .moon { display:none; }

/* ---- main column ---- */
.main { margin-left:var(--side-w); min-height:100vh; display:flex; flex-direction:column; min-width:0; }
.topbar { position:sticky; top:0; z-index:20; height:56px; display:flex; align-items:center; gap:12px; padding:0 16px; background:var(--card); border-bottom:1px solid var(--line); }
.menu-btn { display:none; color:var(--ink); }
.menu-btn:hover { background:var(--tint); color:var(--tint-ink); }
.search { flex:1 1 auto; max-width:560px; position:relative; margin:0; }
.search input[type=search] { width:100%; padding:8px 12px 8px 36px; border-radius:999px; border:1px solid var(--line); background:var(--card-2); font:inherit; color:var(--ink); }
.search input[type=search]::placeholder { color:var(--muted); }
.search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); pointer-events:none; }
/* Left-aligned, not centred: on a wide screen a centred column reads as an empty gap beside the sidebar. */
.content { flex:1; width:100%; max-width:1280px; margin:0; padding:24px 20px 48px; container-type:inline-size; container-name:content; }
.content.narrow { max-width:560px; }
.backdrop { display:none; position:fixed; inset:0; background:rgba(8,20,19,.45); z-index:25; }
@media (max-width: 860px) {
  .sidebar { transform:translateX(-100%); }
  body.nav-open .sidebar { transform:none; box-shadow:0 12px 40px rgba(0,0,0,.35); }
  body.nav-open .backdrop { display:block; }
  .main { margin-left:0; }
  .menu-btn { display:grid; }
}

/* ---- signed-out pages ---- */
.auth-body { display:grid; place-items:center; padding:24px 16px; }
.auth-wrap { width:100%; max-width:440px; }
.auth-brand { display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:20px; text-decoration:none; }
.auth-clinic { margin:-8px 0 20px; text-align:center; color:var(--muted); font-size:15px; }
.auth-brand b { font: 600 24px/1 var(--font-head); color:var(--tint-ink); }

/* ---- components (class names are shared by every page) ---- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; }
label { display:block; font-weight:600; margin:14px 0 4px; font-size:14px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], input[type=search], select, textarea {
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--card); color:var(--ink);
}
input[type=file] { font:inherit; }
button, .btn { font:inherit; font-weight:500; padding:8px 14px; border-radius:8px; border:1px solid var(--pine); background:var(--pine); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { background:var(--pine-hover); border-color:var(--pine-hover); color:#fff; }
button.secondary, .btn.secondary { background:var(--card); color:var(--tint-ink); border-color:var(--line); }
button.secondary:hover, .btn.secondary:hover { background:var(--tint); color:var(--tint-ink); }
button.small { padding:3px 8px; font-size:13px; }
button.link { background:none; border:none; color:var(--tint-ink); padding:0; text-decoration:underline; cursor:pointer; font-weight:400; display:inline; }
button.link:hover { background:none; color:var(--brass); }
button.danger, .btn.danger { background:var(--card); color:var(--critical); border-color:var(--critical-line); }
button.danger:hover, .btn.danger:hover { background:var(--critical-bg); color:var(--critical); border-color:var(--critical); }
button.danger.solid { background:var(--critical); color:#fff; border-color:var(--critical); }
button.danger.solid:hover { background:var(--critical); color:#fff; filter:brightness(1.08); }
button:disabled, button:disabled:hover { opacity:.45; cursor:not-allowed; filter:none; }
dialog.confirm { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--ink); padding:20px 24px; width:min(460px, calc(100vw - 32px)); }
dialog.confirm::backdrop { background:rgba(0,0,0,.45); }
dialog.confirm h2 { margin-top:0; }
dialog.confirm .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }
.tabs .count { display:inline-block; margin-left:6px; padding:0 7px; border-radius:999px; background:var(--tint); color:var(--tint-ink); font-size:12px; font-weight:600; }
.muted { color:var(--muted); } .error { color:var(--critical); } .ok { color:var(--ok); }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:16px; border:1px solid; }
.flash.info { background:var(--tint); border-color:color-mix(in srgb, var(--tint-ink) 22%, var(--tint)); color:var(--tint-ink); }
.flash.error { background:var(--critical-bg); border-color:var(--critical-line); color:var(--critical); }
.flash.ok { background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok); }
.flash.warn { background:var(--warn-bg); border-color:var(--warn-line); color:var(--ink); }
.flash.warn strong:first-child { color:var(--warn); }
table { width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
th, td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:var(--card-2); font-weight:600; }
tr:last-child td { border-bottom:none; }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; border:1px solid var(--line); background:var(--card-2); color:var(--ink); }
.pill.override { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); }
.pill.error { background:var(--critical-bg); border-color:var(--critical-line); color:var(--critical); }
.pill.ok { background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok); }
.toggle { display:inline-flex; align-items:center; gap:6px; }
.toggle input { width:36px; height:20px; appearance:none; background:var(--line); border-radius:999px; position:relative; cursor:pointer; margin:0; }
.toggle input:checked { background:var(--pine); }
.toggle input::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:left .12s; }
.toggle input:checked::after { left:18px; }
.row { display:flex; gap:16px; flex-wrap:wrap; } .row > * { flex:1 1 200px; }
code { background:var(--tint); color:var(--tint-ink); padding:1px 5px; border-radius:4px; font-size:13px; word-break:break-all; }
pre { color:var(--ink); }
mark { background:color-mix(in srgb, var(--brass-2) 45%, transparent); color:inherit; border-radius:2px; }
.wrap { overflow-x:auto; }
/* User Library (Users & Permissions): its own scroll container so the header row can stick. The generic table's overflow:hidden
   (and .wrap's overflow-x) would otherwise disable position:sticky, so the border and radius move to the container. */
.wrap.user-lib { overflow:auto; max-height:calc(100vh - 56px - 48px); max-height:calc(100dvh - 56px - 48px); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.wrap.user-lib table { overflow:visible; border:0; border-radius:0; }
.wrap.user-lib thead th { position:sticky; top:0; z-index:2; background:var(--card-2); border-bottom:1px solid var(--line); }
details > summary { cursor:pointer; }

/* ---- page header + tiles (home) ---- */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.page-head h1 { margin:0 0 4px; }
.page-head p { margin:0; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; }
.tile { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; color:var(--ink); }
.tile:hover { border-color:var(--brass); color:var(--ink); }
.tile svg { width:18px; height:18px; color:var(--brass); flex:none; margin-top:2px; }
.tile b { display:block; font-weight:600; }
.tile small { color:var(--muted); font-size:12px; }
.tile.critical { border-color:var(--critical-line); background:var(--critical-bg); }
.tile.critical svg, .tile.critical b { color:var(--critical); }

/* ---- segmented control ---- */
.seg { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--card); margin:0; }
.seg button { border:0; border-radius:0; background:transparent; color:var(--muted); padding:5px 12px; font-size:13px; font-weight:500; }
.seg button:hover { background:var(--tint); color:var(--tint-ink); }
.seg button[aria-pressed="true"] { background:var(--pine); color:#fff; }

/* ---- tabs (sub-views of one page) ---- */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 0 16px; flex-wrap:wrap; }
.tabs a { padding:8px 12px; text-decoration:none; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:500; }
.tabs a:hover { color:var(--tint-ink); }
.tabs a[aria-current="page"] { color:var(--tint-ink); border-bottom-color:var(--brass); }

/* ---- master-detail (list + detail) ---- */
.split { display:grid; grid-template-columns:236px minmax(0, 1fr); gap:16px; align-items:start; }
.split-list { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:sticky; top:72px; max-height:calc(100vh - 96px); overflow-y:auto; }
.split-list a { display:block; padding:10px 14px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); border-left:3px solid transparent; }
.split-list a:last-child { border-bottom:0; }
.split-list a:hover { background:var(--card-2); color:var(--ink); }
.split-list a[aria-current="true"] { background:var(--tint); border-left-color:var(--brass); color:var(--tint-ink); }
.split-list a b { display:block; font-weight:600; font-size:14px; }
.split-list a small { display:block; color:var(--muted); font-size:12px; }
.split-list a .sum { display:none; font-size:13px; color:var(--muted); margin-top:2px; }
.split-detail { min-width:0; }
.split-empty { color:var(--muted); text-align:center; padding:48px 24px; }
.back { display:none; margin-bottom:12px; text-decoration:none; font-weight:500; }
.layout-full .split { grid-template-columns:1fr; }
.layout-full .split-list { position:static; max-height:none; }
.layout-full .split-list a .sum { display:block; }
.layout-full .split.has-item .split-list { display:none; }
.layout-full .split:not(.has-item) .split-detail { display:none; }
.layout-full .split .back { display:inline-block; }
.layout-full .split-detail { max-width:760px; margin:0 auto; width:100%; }
@container content (max-width: 599px) {
  .split { grid-template-columns:1fr; }
  .split-list { position:static; max-height:none; }
  .split.has-item .split-list { display:none; }
  .split:not(.has-item) .split-detail { display:none; }
  .split .back { display:inline-block; }
}

/* ---- detail content ---- */
.chip { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--tint); color:var(--tint-ink); white-space:nowrap; }
.detail-head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.detail-head h1 { margin:0; }
.meta { display:flex; flex-wrap:wrap; gap:4px 18px; color:var(--muted); font-size:13px; margin:8px 0 14px; }
.meta b { color:var(--ink); font-weight:600; }
.lede { font-size:16px; margin:0 0 8px; }
.notice-example { font-size:12px; color:var(--warn); border:1px dashed var(--warn-line); background:var(--warn-bg); border-radius:8px; padding:5px 10px; display:inline-block; margin:0 0 12px; }
/* Developer preview (src/views/preview-chrome.tsx): brass banner, own-data note, View-as control, muted forms */
.top-stack { position:sticky; top:0; z-index:20; }
.top-stack .topbar { position:static; }
.preview-banner { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:7px 16px; background:var(--brass); color:var(--pine-deep); font-size:13px; line-height:1.4; }
.preview-banner svg { width:16px; height:16px; flex:none; }
.preview-banner b { font-weight:700; }
.preview-banner .sep { opacity:.55; }
.preview-banner form { margin:0 0 0 auto; }
.preview-banner .pb-exit { background:var(--pine-deep); border-color:var(--pine-deep); color:#fff; padding:3px 12px; font-size:13px; }
.preview-banner .pb-exit:hover { background:var(--pine-hover); border-color:var(--pine-hover); }
.own-data-note { display:inline-flex; align-items:center; gap:6px; margin:0 0 14px; padding:5px 10px; border-radius:8px; font-size:13px; background:var(--tint); color:var(--tint-ink); }
.own-data-note svg { width:14px; height:14px; }
body[data-preview] form[method="post" i]:not([data-preview-allowed]) :is(button, input:not([type="hidden"]), select, textarea) { opacity:.5; cursor:not-allowed; }
.viewas { display:grid; gap:6px; margin-top:6px; padding-top:6px; border-top:1px solid var(--side-line); font-size:12px; color:var(--side-muted); }
.viewas-row { display:flex; align-items:center; gap:6px; }
.viewas-row svg { width:13px; height:13px; flex:none; }
.viewas select { flex:1; min-width:0; width:auto; font-size:12px; padding:3px 6px; background:var(--pine-hover); color:#fff; border:1px solid var(--side-line); border-radius:6px; }
.viewas-row2 { display:flex; align-items:flex-start; gap:8px; }
.viewas-row2 details { flex:1; min-width:0; padding-top:3px; }
.viewas summary { cursor:pointer; width:max-content; }
.viewas summary:hover { color:#fff; }
.viewas-flags { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:6px; }
.viewas-flags label { display:inline-flex; align-items:center; gap:4px; color:var(--side-muted); font-weight:400; margin:0; }
.viewas-flags input { width:auto; margin:0; }
.viewas-flags label.not-held { opacity:.6; }
.viewas button { flex:none; background:var(--brass); border-color:var(--brass); color:var(--pine-deep); font-size:12px; padding:3px 10px; }
.viewas button:hover { background:var(--brass-2); border-color:var(--brass-2); color:var(--pine-deep); }

/* ---- status pills: tinted background + coloured icon, text in ink (never colour alone) ---- */
.sp { display:inline-flex; align-items:center; gap:5px; padding:1px 9px 1px 7px; border-radius:999px; font-size:12px; font-weight:600; line-height:18px; color:var(--ink); background:color-mix(in srgb, var(--s, var(--muted)) 15%, var(--card)); border:1px solid color-mix(in srgb, var(--s, var(--muted)) 40%, var(--card)); white-space:nowrap; }
.sp svg { width:13px; height:13px; color:var(--s, var(--muted)); flex:none; }
.sp-crit { --s: var(--s-crit); } .sp-ser { --s: var(--s-ser); } .sp-warn { --s: var(--s-warn); } .sp-good { --s: var(--s-good); }
.sp-missing { --s: var(--muted); background:transparent; border:1px dashed var(--muted); }
.sp-none { background:transparent; border-color:transparent; color:var(--muted); font-weight:400; }
.sp .ring { width:9px; height:9px; border-radius:50%; border:2px solid var(--s, var(--muted)); background:var(--card); flex:none; margin-left:1px; }
.dim { opacity:.35; }
/* ---- dashboard ---- */
.stiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:12px 0; }
.stile { display:block; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; color:var(--ink); }
.stile:hover { border-color:var(--brass); color:var(--ink); }
.stile.active { outline:2px solid var(--brass); outline-offset:2px; }
.stile .n { font:600 26px/1.1 var(--font-head); display:flex; align-items:center; gap:8px; }
.stile .n svg { width:18px; height:18px; color:var(--s, var(--muted)); }
.stile .l { display:block; font-weight:600; font-size:13px; margin-top:4px; }
.stile .h { display:block; color:var(--muted); font-size:12px; }
.showing { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; background:var(--tint); color:var(--tint-ink); font-size:13px; text-decoration:none; }
.showing svg { width:12px; height:12px; }
.two-up { display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
@container content (min-width: 860px) { .two-up { grid-template-columns:1fr 1fr; } }
.attn { list-style:none; margin:0; padding:0; }
.attn li { display:grid; grid-template-columns:minmax(128px, max-content) minmax(0, 1fr) max-content; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:14px; }
.attn li:first-child { border-top:0; }
.attn .pillcol { display:flex; }
.attn .who { min-width:0; }
.attn .who small { display:block; color:var(--muted); }
.chart svg { width:100%; height:auto; display:block; }
.chart .grid { stroke:var(--line); stroke-width:1; }
.chart .axis { fill:var(--muted); font-size:10px; font-family:var(--font-body); }
.chart .hit { fill:transparent; }
.chart .hit:hover, .chart g:focus-visible .hit { fill:color-mix(in srgb, var(--brass) 14%, transparent); }
.chart g:focus-visible { outline:2px solid var(--brass); }
.legend { display:flex; gap:16px; font-size:12px; color:var(--muted); margin-top:6px; flex-wrap:wrap; }
.legend i { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-right:4px; }
.board-tools { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:8px 0 4px; }
.cat { margin-top:12px; padding:12px 16px; }
.cat > summary { display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; flex-wrap:wrap; }
.cat > summary::-webkit-details-marker { display:none; }
.cat > summary::before { content:""; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg); transition:transform .15s; margin:0 4px 0 2px; flex:none; }
.cat[open] > summary::before { transform:rotate(45deg); }
.cat table td, .cat table th { white-space:nowrap; }
.cat .cell { position:relative; }
.cat .cell > span[tabindex] { display:inline-block; border-radius:999px; }
.tip { position:absolute; left:8px; top:100%; z-index:5; display:none; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px; color:var(--ink); white-space:normal; min-width:220px; box-shadow:0 8px 24px rgba(0,0,0,.14); }
.cell:hover .tip, .cell:focus-within .tip { display:block; }
.org-cat { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:12px 14px; margin-top:10px; }
.org-cat.over { outline:2px dashed var(--brass); outline-offset:2px; }
.org-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.handle { cursor:grab; color:var(--muted); display:inline-flex; }
.handle svg { width:16px; height:16px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; min-height:28px; }
.chip-type { display:inline-flex; gap:6px; align-items:center; padding:2px 6px 2px 8px; border-radius:999px; background:var(--tint); color:var(--tint-ink); font-size:12px; font-weight:600; }
.chip-type svg { width:12px; height:12px; color:var(--muted); }
.chip-type select { font-size:12px; padding:1px 4px; width:auto; }
.chip-type[draggable="true"] { cursor:grab; }
@media (max-width: 860px) { .side-item { padding-top:7px; padding-bottom:7px; } .side-group { padding-top:10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

.as-status{font-size:12px;margin-left:8px;color:var(--muted,inherit);white-space:nowrap}
.as-status:empty{display:none}
.as-status.as-ok{color:var(--ok)}
.as-status.as-err{color:var(--critical);white-space:normal;display:inline-block;max-width:28ch}
form[aria-busy="true"] .as-status:not(.as-ok):not(.as-err){opacity:.7}
@keyframes as-flash{from{background:var(--tint)}to{background:transparent}}
.as-moved{animation:as-flash 1.2s ease-out}
tr[id],li[id],section[id],div[id]{scroll-margin-top:96px}

.md { max-width:72ch; line-height:1.55; overflow-wrap:anywhere; }
.md > :first-child { margin-top:0; }
.md h1 { font-size:24px; margin:20px 0 8px; } .md h2 { font-size:19px; margin:20px 0 6px; } .md h3 { font-size:16px; margin:16px 0 4px; } .md h4, .md h5, .md h6 { font-size:14px; margin:14px 0 4px; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md table { margin:0 0 12px; }
.md ul, .md ol { padding-left:24px; } .md li { margin:3px 0; } .md li > p { margin:0; }
.md blockquote { border-left:3px solid var(--brass); padding:4px 14px; color:var(--muted); background:var(--card-2); border-radius:0 8px 8px 0; }
.md code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.92em; background:var(--card-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; }
.md pre { background:var(--card-2); border:1px solid var(--line); border-radius:8px; padding:10px 14px; overflow-x:auto; } .md pre code { border:0; padding:0; background:transparent; }
.md hr { border:0; border-top:1px solid var(--line); margin:18px 0; }
.md table { display:inline-block; width:auto; max-width:100%; overflow-x:auto; border-collapse:collapse; font-size:14px; vertical-align:top; }
.md th, .md td { border:1px solid var(--line); padding:6px 10px; vertical-align:top; text-align:left; }
.md th { background:var(--card-2); font-weight:600; white-space:nowrap; }
.md tbody tr:nth-child(even) td { background:color-mix(in srgb, var(--card-2) 50%, var(--card)); }
.md a { text-decoration:underline; text-underline-offset:2px; }