:root {
    /* Typography is a theme's business too — these are the only two font stacks the app uses, so a
       theme can swap the typeface by redefining them rather than by fighting 99 hardcoded stacks. */
    --fuse-font-sans: "Geist", system-ui, sans-serif;
    --fuse-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    /* Arc defaults to Geist too, so the two matched by agreement rather than by wiring — and a theme
       that changed one got Fuse's chrome in one face and Arc's components in another. Point Arc's
       tokens at ours so there is a single place to change the typeface. */
    --arc-font-sans: var(--fuse-font-sans);
    --arc-font-mono: var(--fuse-font-mono);

    --fuse-stat: #F5636B;
    --fuse-high: #F5A843;
    --fuse-normal: #5BA8F7;
    --fuse-low: #4A4D54;
    --fuse-violet: #9A6FD0; /* action-taken / embedded-mode accent */
    --fuse-done: #5BAE8C;   /* resolved/done — the design's muted green, deliberately not the accent */
    --fuse-athena: #41295C; /* athenaOne sign-in button (design 03) — dark violet works on every theme */

    /* Series palette for stacked charts. Arc ships only --arc-chart-bar and its emphasis pair, which
       is enough for one series and not for a workflow breakdown. One hue per workflow type — eight
       of them, all distinct, because two same-coloured segments stacked in one bar cannot be told
       apart. --fuse-series-9 is the fallback for a workflow type added after this list. */
    --fuse-series-1: #F5636B;  /* clinical change */
    --fuse-series-2: #5BA8F7;  /* med refill */
    --fuse-series-3: #A78BFA;  /* contact */
    --fuse-series-4: #43F5A1;  /* admission */
    --fuse-series-5: #6ED0D6;  /* discharge */
    --fuse-series-6: #F5A843;  /* billing */
    --fuse-series-7: #E879C7;  /* scheduling */
    --fuse-series-8: #8B93A7;  /* general — the catch-all workflow, deliberately the quiet grey */
    --fuse-series-9: #C2B280;
}

body {
    font-family: var(--fuse-font-sans);
    background: var(--arc-bg-0, #0b0c0e);
    color: var(--arc-fg-1, #e5e7eb);
    margin: 0;
}

.fuse-boot {
    display: grid;
    place-items: center;
    min-height: 100vh;
    color: #888;
}

/* Arc gives every bare <a> a 1px bottom border (its components opt out per-class). Fuse has no
   prose links — every anchor here is chrome: a nav item, a "View all", a row link — so the border
   reads as a stray underline. Reset it app-wide; Arc's own class-scoped link styles still win. */
a { border-bottom: 0; }

/* ── Text fields: ONE surface app-wide, from design 04's "Field states" frame — bg-1, 1px border-2,
   6px radius, 10px/12px padding, 12.5px. They had drifted to four surfaces (three radii, five
   paddings, mostly on bg-0 where the design says bg-1). Wrapper-styled inputs — the topbar search,
   .psearch, .feed-search — opt out via their own class rules, which outrank this. Context rules may
   set layout (width/max-width) only. ── */
input[type="text"], input[type="number"], input[type="date"], input[type="time"],
input[type="email"], input[type="tel"], input[type="search"], input[type="password"], textarea {
    box-sizing: border-box;
    background: var(--arc-bg-1);
    color: var(--arc-fg-1);
    border: 1px solid var(--arc-border-2);
    border-radius: 6px;
    padding: 10px 12px;
    font: 400 12.5px var(--fuse-font-sans);
    line-height: 1.45;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus, textarea:focus { outline: none; border-color: var(--arc-border-focus); box-shadow: 0 0 0 3px var(--arc-accent-soft); }
input:disabled, textarea:disabled { color: var(--arc-fg-4); border-color: var(--arc-border-1); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--arc-fg-4); }


/* ── Conceptzilla shell: 68px module icon rail + 236px module nav ── */
.shell-side { display: flex; min-height: 100vh; background: var(--fuse-rail-bg, var(--arc-bg-0)); }
.mrail { background: var(--arc-bg-0); width: 68px; flex: none; display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--arc-border-1); padding: 14px 0; }
.mrail-brand { width: 34px; height: 34px; border-radius: 9px; background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); display: flex; align-items: center; justify-content: center; color: var(--arc-accent); margin-bottom: 16px; }
.mrail-modules { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.mrail-btn { position: relative; width: 44px; height: 40px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--arc-fg-3); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .12s ease; }
.mrail-dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--arc-accent); }
.mrail-btn:hover { background: var(--arc-bg-2); color: var(--arc-fg-1); }
.mrail-btn.active { background: var(--arc-accent-soft); border-color: color-mix(in srgb, var(--arc-accent) 25%, transparent); color: var(--arc-accent); }
.mrail-foot { margin-top: auto; position: relative; }
.mrail-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--arc-bg-4); color: var(--arc-fg-1); border: 1px solid var(--arc-border-2); font: 600 12px var(--fuse-font-sans); cursor: pointer; }
.mrail-menu { position: absolute; left: 46px; bottom: 0; width: 210px; background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); border-radius: 10px; padding: 12px; z-index: 60; box-shadow: 0 12px 32px -12px rgba(0,0,0,.5); }
.mrail-menu-user { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--arc-border-1); }
/* min-width:0 lets a long name truncate instead of pushing the Profile button out of the menu. */
.mrail-menu-ident { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mrail-menu-ident > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrail-menu-profile { flex: none; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--arc-border-2); background: transparent; color: var(--arc-fg-2); font: 500 11.5px var(--fuse-font-sans); cursor: pointer; }
.mrail-menu-profile:hover { background: var(--arc-bg-3); color: var(--arc-fg-1); }
.mrail-menu-profile:focus-visible { outline: 2px solid var(--arc-accent); outline-offset: 1px; }
.mrail-menu-name { font-size: 13px; font-weight: 600; color: var(--arc-fg-1); }
.mrail-menu-role { font: 500 11.5px var(--fuse-font-sans); color: var(--arc-fg-3); }
.mrail-signout { width: 100%; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--arc-border-2); background: transparent; color: var(--arc-fg-2); font: 500 12.5px var(--fuse-font-sans); cursor: pointer; }
.mrail-signout:hover { background: var(--arc-bg-3); color: var(--arc-fg-1); }
.mnav { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 16px 0; }
.mnav-head { padding: 0 16px 6px; }
.mnav-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--arc-fg-1); }
.mnav-head .fuse-eyebrow { display: block; margin-top: 3px; letter-spacing: 0.07em; }
.mnav-ws { display: flex; align-items: center; gap: 9px; background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 7px; padding: 8px 10px; margin: 12px 12px 14px; color: var(--arc-fg-3); }
.mnav-ws-meta { min-width: 0; }
.mnav-ws-name { font: 600 11.5px var(--fuse-font-sans); color: var(--arc-fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnav-ws-kind { font: 500 11.5px var(--fuse-font-sans); color: var(--arc-fg-3); margin-top: 2px; }
.mnav-ws .chev { margin-left: auto; color: var(--arc-fg-4); flex: none; display: flex; }
.mnav-links { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.mnav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--arc-fg-2); text-decoration: none; font: 500 13px var(--fuse-font-sans); }
.mnav-link .ic { display: flex; flex: none; color: var(--arc-fg-3); }
/* Arc styles every <a> with a bottom border + accent hover — that read as an underline and a
   highlight on the nav links. The design has neither: background wash only. */
.mnav-link, .mnav-link:hover, .mnav-link.active { border-bottom: 0; }
.mnav-link:hover { background: var(--arc-bg-2); color: var(--arc-fg-1); }
.mnav-link.active .ic { color: var(--arc-accent); }
.mnav-link.active { background: var(--arc-bg-2); color: var(--arc-fg-1); font-weight: 600; }
.mnav-foot { margin: auto 10px 0; padding: 14px 6px 0; border-top: 1px solid var(--arc-border-1); display: flex; flex-direction: column; gap: 7px; }
.mnav-conn { display: flex; align-items: center; gap: 8px; font: 500 11px var(--fuse-font-sans); color: var(--arc-fg-3); white-space: nowrap; }
.mnav-conn .ic { display: flex; color: var(--arc-accent); flex: none; }
.mnav-conn.sim .ic { color: var(--arc-warn); }
.mnav-conn.off .ic { color: var(--arc-fg-4); }

/* ── 60px content header (design 00: greeting · search · bell · CTA) ── */
/* .topbar is a flex ITEM of Arc's .arc-app-shell-topbar — without flex:1 it shrank to its
   content and `margin-left:auto` on the actions had no free space to push into (the actions
   sat next to the greeting instead of at the far right). Fuse's bar owns the chrome. */
.arc-app-shell-topbar { padding: 0; border-bottom: 0; background: transparent; min-height: 0; }
.topbar { flex: 1; min-width: 0; min-height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 24px; border-bottom: 1px solid var(--arc-border-1); background: var(--fuse-rail-bg, var(--arc-bg-0)); box-sizing: border-box; }
.topbar-greet { font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--arc-fg-1); }
.topbar-ctx { font: 500 12px var(--fuse-font-sans); color: var(--arc-fg-3); margin-top: 2px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-searchbox { position: relative; display: flex; align-items: center; gap: 8px; background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 6px; padding: 0 10px 0 12px; width: 260px; color: var(--arc-fg-4); }
.topbar-searchbox:focus-within { border-color: var(--arc-border-3); color: var(--arc-fg-3); }
.topbar-searchbox input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 0; font: 400 12.5px var(--fuse-font-sans); color: var(--arc-fg-1); outline: none; }
.topbar-searchbox input::placeholder { color: var(--arc-fg-4); }
/* fg-3, not fg-4: fg-4 is the disabled/placeholder step and measured 1.9:1 here. This is a
   live control, so it takes the muted-but-legible step instead. */
.topbar-palette { display: flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 4px; border-radius: 6px; color: var(--arc-fg-3); cursor: pointer; }
.topbar-palette:hover { color: var(--arc-fg-2); background: var(--arc-bg-2); }
.topbar-search-kbd { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-2); background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); border-radius: 4px; padding: 2px 5px; }
.topbar-search-backdrop { position: fixed; inset: 0; z-index: 60; }
.topbar-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 61; background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 8px; box-shadow: 0 12px 32px rgb(0 0 0 / 0.35); padding: 6px; max-height: 420px; overflow-y: auto; }
.topbar-search-group { font: 500 11.5px var(--fuse-font-sans); color: var(--arc-fg-3); padding: 8px 8px 4px; }
.topbar-search-note { font: 400 12.5px var(--fuse-font-sans); color: var(--arc-fg-3); padding: 10px 8px; }
.topbar-search-hit { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; border-radius: 6px; padding: 8px; cursor: pointer; text-align: left; color: var(--arc-fg-3); }
.topbar-search-hit:hover { background: var(--arc-bg-2); }
.topbar-search-hit .hit-name { font: 500 12.5px var(--fuse-font-sans); color: var(--arc-fg-1); white-space: nowrap; }
.topbar-search-hit .hit-meta { font: 400 11.5px var(--fuse-font-sans); color: var(--arc-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── embedded shell (design 00b: no rail, compact chrome — context bar + tabs) ── */
.embed-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--arc-bg-0); }
.embed-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--arc-border-1); background: var(--arc-bg-1); }
.embed-brand { width: 22px; height: 22px; border-radius: 6px; background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); display: flex; align-items: center; justify-content: center; color: var(--arc-accent); flex: none; }
.embed-title { font-size: 13.5px; font-weight: 600; color: var(--arc-fg-1); }
.embed-pill { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-2); background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.embed-pill.smart { color: var(--fuse-violet); background: color-mix(in srgb, var(--fuse-violet) 12%, transparent); border-color: color-mix(in srgb, var(--fuse-violet) 30%, transparent); }
.embed-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.embed-btn { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px var(--fuse-font-sans); color: var(--arc-fg-2); background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); border-radius: 5px; padding: 5px 10px; text-decoration: none; cursor: pointer; }
.embed-btn:hover { color: var(--arc-fg-1); border-color: var(--arc-border-3); }
.embed-tabs { display: flex; align-items: center; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--arc-border-1); background: var(--arc-bg-1); }
.embed-tab { font-size: 12.5px; font-weight: 500; color: var(--arc-fg-3); padding: 10px 13px; border-bottom: 2px solid transparent; text-decoration: none; display: flex; align-items: center; gap: 7px; }
.embed-tab:hover { color: var(--arc-fg-1); }
.embed-tab.active { color: var(--arc-fg-1); font-weight: 600; border-bottom-color: var(--arc-accent); }

/* ── login (design 03: 380px card, preset rows, athena button) ── */
.login-shell { display: grid; place-items: center; min-height: 100vh; background: var(--arc-bg-0); padding: 24px; }
.login-card { width: 100%; max-width: 380px; background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 12px; padding: 28px; box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 24px 60px -16px rgba(0,0,0,.55); }
.login-brand { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.login-title { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--arc-fg-1); }
.login-users { display: flex; flex-direction: column; gap: 6px; }
.login-user { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); border-radius: 7px; padding: 9px 11px; cursor: pointer; color: inherit; font: inherit; transition: all .12s ease; }
.login-user:hover { border-color: var(--arc-accent); box-shadow: 0 0 0 3px var(--arc-accent-soft); }
.login-user-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.login-user-name { font-size: 12.5px; font-weight: 500; color: var(--arc-fg-1); }
.login-user-sub { font-size: 11px; color: var(--arc-fg-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login-side { font: 500 11px var(--fuse-font-mono); letter-spacing: 0.05em; text-transform: uppercase; border-radius: 3px; padding: 3px 7px; flex: none; }
/* Design 03: facility = accent, provider = violet. They were swapped, and neither used violet. */
.login-side.provider { color: var(--fuse-violet); background: color-mix(in srgb, var(--fuse-violet) 14%, transparent); }
.login-side.facility { color: var(--arc-accent); background: var(--arc-accent-soft); }
.login-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.login-or > span:not(.login-or-word) { flex: 1; height: 1px; background: var(--arc-border-1); }
.login-or-word { font: 500 11px var(--fuse-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--arc-fg-4); }
.athena-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--fuse-athena); border: none; border-radius: 7px; padding: 12px 0; width: 100%; box-sizing: border-box; font: 600 13.5px var(--fuse-font-sans); color: #fff; text-decoration: none; cursor: pointer; }
.athena-btn:hover { filter: brightness(1.15); }
.athena-a { width: 20px; height: 20px; border-radius: 50%; background: var(--fuse-violet); display: flex; align-items: center; justify-content: center; font: 700 11px var(--fuse-font-sans); color: #fff; }
.login-foot { font: 500 11.5px/1.6 var(--fuse-font-sans); color: var(--arc-fg-4); text-align: center; margin-top: 14px; }

/* ── boot splash (design 03's athena landing frame) — every pre-ready wait wears this: WASM boot,
   auth resolve, athena launch. Also hand-inlined in wwwroot/index.html for the pre-Blazor paint. ── */
.splash { display: flex; flex-direction: column; align-items: center; text-align: center; }
.splash-mark { width: 44px; height: 44px; border-radius: 10px; background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); display: flex; align-items: center; justify-content: center; color: var(--arc-accent); margin-bottom: 18px; }
.splash-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--arc-fg-1); margin-bottom: 8px; }
.splash-sub { font-size: 12.5px; color: var(--arc-fg-3); margin-bottom: 18px; }
.splash-bar { width: 200px; }

/* ── legacy rail pieces still used by mnav/chips (kept) ── */
.rail-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); display: flex; align-items: center; justify-content: center; color: var(--arc-accent); }
.rail-mark svg { display: block; }
.rail-count { margin-left: auto; font: 600 11px var(--fuse-font-mono); color: var(--arc-fg-1); background: var(--arc-bg-4); border-radius: 999px; padding: 2px 7px; }
.rail-count.hot { background: var(--fuse-stat); color: #fff; }
.rail-themes { display: flex; gap: 8px; padding: 0 4px 14px; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--arc-border-2); cursor: pointer; position: relative; padding: 0; }
.swatch::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--swatch, var(--arc-accent)); }
.swatch.active { box-shadow: 0 0 0 2px var(--arc-bg-0), 0 0 0 4px var(--arc-accent); }
.fuse-main { padding: 24px 28px 64px; max-width: 1180px; margin: 0 auto; box-sizing: border-box; }

/* ── shared: mono uppercase eyebrow (design's field/section label) ── */
.fuse-eyebrow { font: 500 11px/1 var(--fuse-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--arc-fg-3); }

/* ── shared page bits ── */
.fuse-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.fuse-title { font-size: 22px; font-weight: 650; margin: 0; }
.fuse-sub { color: var(--arc-fg-3, #9aa0aa); font-size: 13px; margin-top: 2px; }

/* Arc's component type scale bottoms out at 10.5px, which is below what this app should use for
   anything a clinician reads — the KPI label above a queue count is not decoration. Same reasoning
   as the ArcCard and ArcPageHeader metric blocks: Fuse's design decides the scale, Arc decides the
   structure. The notification badge is left alone: it holds a numeral inside a fixed circle, and
   growing the digit only crowds it. */
.arc-metric-card-label,
.arc-chip,
.arc-cmd-group-header,
.arc-cmd-search-hint { font-size: 11px; }

/* ArcPageHeader at Fuse's scale. Arc's default is a marketing-page hero — clamp(32px, 4.4vw, 48px)
   with a 48px bottom margin — which is right for a docs site and wrong for a dense operations tool
   where the header sits above a queue. These are the .fuse-title / .fuse-sub metrics the 25 pages
   already used, so the migration changes the markup and not the design. */
.arc-page-header { margin-bottom: 18px; }
.arc-page-header-title { font: 650 22px/1.25 var(--fuse-font-sans); letter-spacing: -0.01em; margin: 0; }
.arc-page-header-desc { font-size: 13px; line-height: 1.5; color: var(--arc-fg-3); max-width: 78ch; margin-top: 2px; }
.arc-page-header-title-row { gap: 16px; }
.arc-page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fuse-grid { display: grid; gap: 16px; }
/* minmax(0, …) rather than a bare fr: an fr track carries an automatic min-content floor, so one
   long unbreakable line (a 260-character clinical-change summary in the related-requests feed) sets
   the right track's minimum to its own width, starves the left track and pushes the whole grid past
   .fuse-main — which reads as a huge left margin. It also defeats the text-overflow: ellipsis on
   .feed-summary, because that box is never constrained enough to overflow. */
.fuse-grid.cols-2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .fuse-grid.cols-2 { grid-template-columns: 1fr; } }
/* Cards stacked inside a column wrapper (detail views) need vertical rhythm; the grid gap only
   spaces the columns, not cards within one. Direct grid-item cards (insights) are unaffected —
   they have no arc-card sibling nested under them. */
/* The request page's right column stacks cards and one .feed ("Other requests for this resident").
   Spacing here is by adjacent pair, so every block type that stacks in the column has to be named —
   .feed was not, and sat flush against the card above it while the cards had 16px between them. */
.fuse-grid.cols-2 > div > .arc-card + .arc-card,
.fuse-grid.cols-2 > div > .arc-card + .feed { margin-top: 16px; }
.fuse-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Arc's field wrapper carries a form-stack bottom margin; inside a row the row owns spacing, and the
   margin made centered siblings (a button beside a select) sit ~8px low. */
.fuse-row > .arc-field { margin-bottom: 0; }
/* An inline add/link form: labelled fields and a button on one baseline. Arc's field wrapper keeps
   its form-stack margin even inside a row, and the button is shorter than the inputs — together they
   left the button floating off the fields' bottom edge. */
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.inline-form .intake-q { margin: 0; }
.inline-form .arc-field { margin-bottom: 0; }
/* One control height for the row: Arc's select renders ~42px, text inputs ~40px and buttons 38px. */
.inline-form input:not([type="radio"]):not([type="checkbox"]), .inline-form > .arc-btn { height: 42px; box-sizing: border-box; }
.fuse-card-title { font: 500 11px/1 var(--fuse-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--arc-fg-3); margin: 0 0 12px; }
.fuse-muted { color: var(--arc-fg-3, #9aa0aa); }
/* Same reason as .fuse-grid.cols-2: a long value must wrap inside its track, not widen it. */
.fuse-kv { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 12px; font-size: 14px; }
.fuse-kv dt { color: var(--arc-fg-3, #9aa0aa); }
.fuse-kv dd { margin: 0; }

/* ── acuity + status ── */
.acuity-Stat { background: var(--fuse-stat); color: #fff; }
.acuity-High { background: var(--fuse-high); color: #fff; }
.acuity-Normal { background: var(--fuse-normal); color: #fff; }
.acuity-Low { background: var(--fuse-low); color: #fff; }

/* ── queue table ── */
.fuse-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fuse-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--arc-fg-3, #9aa0aa); padding: 8px 10px; border-bottom: 1px solid var(--arc-border-1, #26282d); }
.fuse-table td { padding: 10px; border-bottom: 1px solid var(--arc-border-1, #1c1e22); }
.fuse-table tr.clickable { cursor: pointer; }
.fuse-table tr.clickable:hover td { background: var(--arc-bg-2, #17181c); }

/* ── dashboard KPI grid — tiles are ArcMetricCard (design 01) ── */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }

/* ── incoming feed rows (design 01) ── */
.feed { background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 10px; overflow: hidden; }
.feed-head { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--arc-border-1); flex-wrap: wrap; }
.feed-head > :last-child:not(:only-child) { margin-left: auto; } /* trailing meta/controls sit right */
.feed-head-title { font-size: 14px; font-weight: 600; color: var(--arc-fg-1); }
/* The feed row is an ArcListItem now (a real <a>, so it is keyboard-reachable). Arc owns the row
   layout — icon / text / trailing — and these only restore design 04's divider rhythm over Arc's
   gapped list, plus the Stat tint Arc has no notion of. */
.arc-card-flush .arc-list, .feed .arc-list, .pane-list .arc-list, .fuse-recent-all .arc-list
    { padding: 0; gap: 0; border: 0; border-radius: 0; background: transparent; }
.feed-row.arc-list-item { border-radius: 0; padding: 15px 18px; gap: 14px; font-size: inherit; }
.arc-list-li:not(:last-child) > .feed-row { border-bottom: 1px solid var(--arc-border-1); }
.feed-row.stat { background: color-mix(in srgb, var(--fuse-stat) 4%, transparent); }
.feed-row.stat:hover:not(:disabled) { background: color-mix(in srgb, var(--fuse-stat) 8%, transparent); }
/* Arc's trailing slot is a flex-none box; the pills and age inside it need their own row. */
.feed-row .arc-list-item-trailing { display: flex; align-items: center; gap: 10px; }

/* A list card's title bar also carries the search + three filters, which is wider than a card
   header assumes. Let it wrap onto a second line rather than squeezing the title into a column. */
.arc-card-header:has(.feed-controls) { flex-wrap: wrap; }
.arc-card-header:has(.feed-controls) .arc-card-header-trailing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feed-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feed-controls .arc-input-wrap, .feed-controls .arc-field { margin: 0; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.feed-dot.Stat { background: var(--fuse-stat); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fuse-stat) 16%, transparent); }
.feed-dot.High { background: var(--fuse-high); }
.feed-dot.Normal { background: var(--fuse-normal); }
.feed-dot.Low { background: var(--fuse-low); }
.feed-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feed-name { font-size: 14px; font-weight: 600; color: var(--arc-fg-1); }
.feed-meta { font: 500 11px/1 var(--fuse-font-mono); color: var(--arc-fg-3); }
.feed-summary { font-size: 13px; color: var(--arc-fg-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-pill { font: 500 11px/1 var(--fuse-font-mono); color: var(--arc-accent); background: var(--arc-accent-soft); border: 1px solid color-mix(in srgb, var(--arc-accent) 22%, transparent); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.feed-pill.quiet { color: var(--arc-fg-3); background: var(--arc-bg-2); border-color: var(--arc-border-2); }
/* Tokens, not Tailwind light-theme hexes: #b45309/#047857 on a dark tint measured ~3:1. */
.feed-pill.working { color: var(--arc-warn); background: color-mix(in srgb, var(--arc-warn) 10%, transparent); border-color: color-mix(in srgb, var(--arc-warn) 28%, transparent); }
.feed-pill.action { color: var(--fuse-violet); background: color-mix(in srgb, var(--fuse-violet) 12%, transparent); border-color: color-mix(in srgb, var(--fuse-violet) 28%, transparent); }
.feed-pill.done { color: var(--fuse-done); background: color-mix(in srgb, var(--fuse-done) 12%, transparent); border-color: color-mix(in srgb, var(--fuse-done) 28%, transparent); }
.feed-age { font-size: 12px; color: var(--arc-fg-3); white-space: nowrap; margin-top: 3px; }
.feed-age.hot, .feed-age-col.hot { color: var(--fuse-stat); }

/* ── intake wizard ── */
.intake-section { border: 1px solid var(--arc-border-2); border-radius: 10px; padding: 16px; margin-bottom: 14px; background: var(--arc-bg-1); }
.intake-section.gate { border-color: var(--fuse-stat); }
.intake-section-desc { font-size: 13px; color: var(--arc-fg-3, #9aa0aa); margin: 0 0 10px; }
.intake-q { margin: 12px 0; }
.intake-q label.q-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--arc-fg-2); margin-bottom: 6px; }
.intake-q .q-hint { font-size: 12px; color: var(--arc-fg-3, #9aa0aa); margin-top: 4px; }
/* Text-style inputs only: radios and checkboxes inside a question keep their own size (a bare
   `.intake-q input` out-specified Arc's 16px .arc-radio and stretched the disposition radios full-width). */
.intake-q input:not([type="radio"]):not([type="checkbox"]), .intake-q textarea { width: 100%; max-width: 460px; }
.intake-q select { width: 100%; max-width: 460px; }
.intake-q textarea { min-height: 84px; }

/* ── field states (design 04): one focus/error/disabled treatment for every question set ── */
.intake-q.invalid input, .intake-q.invalid select, .intake-q.invalid textarea {
    border-color: color-mix(in srgb, var(--arc-danger) 60%, transparent);
}
.intake-q.invalid input:focus, .intake-q.invalid select:focus, .intake-q.invalid textarea:focus {
    border-color: var(--arc-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--arc-danger) 20%, transparent);
}
.q-error { font-size: 11px; color: var(--arc-danger); margin-top: 6px; }
.bool-toggle { display: inline-flex; gap: 6px; }
.bool-toggle button { padding: 6px 18px; border-radius: 8px; border: 1px solid var(--arc-border-1, #2a2c31); background: transparent; color: inherit; cursor: pointer; font: inherit; }
.bool-toggle button.on-yes { background: var(--fuse-normal); border-color: transparent; color: #fff; }
.bool-toggle button.on-no { background: var(--fuse-normal); border-color: transparent; color: #fff; }
.multi-options { display: flex; flex-wrap: wrap; gap: 6px; }
.multi-options .opt { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--arc-border-1, #2a2c31); background: transparent; color: inherit; cursor: pointer; font-size: 13px; }
.multi-options .opt.selected { background: var(--fuse-normal); border-color: transparent; color: #fff; }
.vitals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vitals-grid .vital label { display: block; font: 500 11px var(--fuse-font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--arc-fg-3); margin-bottom: 5px; }
.vitals-grid .vital input { width: 100%; }
.vitals-grid .vital select { width: 100%; }
.vital-bp { display: flex; align-items: center; gap: 4px; }
.vital-bp input { min-width: 0; }
.vital-bp span { color: var(--arc-fg-3); }
.vital-chart { display: block; margin-top: 4px; font: 500 10.5px var(--fuse-font-mono); color: var(--arc-fg-3); }
.vital-more { background: none; border: 0; padding: 4px 0 0; color: var(--arc-accent); font-size: 11.5px; cursor: pointer; }
.when-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.when-input input[type=time] { width: auto; }
.iv-chip.selected { background: var(--fuse-normal); border-color: transparent; color: #fff; }
.intake-q .q-other { margin-top: 6px; width: 100%; }
.review-missing { border: 1px solid var(--arc-warn); border-radius: 8px; padding: 12px 14px; margin: 12px 0; background: var(--arc-bg-0); }
.review-missing-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px; color: var(--arc-fg-1); }
.review-chart-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; margin-bottom: 8px; }

/* ── thread ── */
.thread-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.thread-input { display: flex; gap: 8px; }
.thread-input input { flex: 1; }

/* ── receipts ── */
.receipt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--arc-border-1, #1c1e22); font-size: 13px; }
.receipt:last-child { border-bottom: none; }

.ehr-note { font-size: 12.5px; color: var(--arc-fg-3, #9aa0aa); padding: 6px 0; }

/* ── SBAR framing (design handoff: letter-badged rows, mint-highlighted R) ── */
.sbar-row { display: flex; gap: 12px; padding: 12px 10px; border-radius: 8px; }
.sbar-row + .sbar-row { margin-top: 4px; }
.sbar-letter { flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  font: 650 13px var(--fuse-font-mono); color: var(--arc-fg-2);
  background: var(--arc-bg-2, #17181c); border: 1px solid var(--arc-border-1, #26282d); border-radius: 7px; }
.sbar-label { font: 500 11px/1 var(--fuse-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--arc-fg-3); margin-bottom: 5px; }
.sbar-row p { font-size: 13.5px; line-height: 1.45; }
.sbar-r { background: var(--arc-bg-2, #0f1012); border: 1px solid var(--arc-accent, #43f5a1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--arc-accent, #43f5a1) 10%, transparent); }
.sbar-r .sbar-letter { color: var(--arc-accent); border-color: var(--arc-accent); }

/* ── Request simulation (design handoff: dual embedded-EHR walkthrough) ── */
.sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .sim-grid { grid-template-columns: 1fr; } }
.sim-frame { border: 1px solid var(--arc-border-1, #26282d); border-radius: 12px; overflow: hidden;
  background: var(--arc-bg-1, #0b0c0e); }
.sim-ehr-bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; font-size: 12.5px;
  border-bottom: 1px solid var(--arc-border-1, #26282d); }
.sim-ehr-name { font: 650 12.5px var(--fuse-font-sans); }
.sim-pcc { background: color-mix(in srgb, #2f6fed 12%, transparent); }
.sim-ath { background: color-mix(in srgb, #7c3aed 12%, transparent); }
.sim-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px;
  border-bottom: 1px solid var(--arc-border-1, #26282d); }
.sim-avatar { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--arc-bg-2, #17181c); font: 650 11px var(--fuse-font-mono); }
.sim-panel { margin: 12px; border: 1px solid var(--arc-accent, #43f5a1); border-radius: 10px; padding: 14px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--arc-accent, #43f5a1) 7%, transparent); }
.sim-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13.5px; flex-wrap: wrap; }
.sim-chip { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--fuse-font-mono);
  padding: 3px 8px; border: 1px solid var(--arc-border-1, #26282d); border-radius: 6px; color: var(--arc-fg-2); }
.sim-chip.selected { border-color: var(--arc-accent); color: var(--arc-accent); }
.sim-step-label { font: 500 11px/1 var(--fuse-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--arc-fg-3); margin: 14px 0 8px; }
.sim-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sim-type { text-align: left; padding: 9px 11px; font-size: 13px; background: var(--arc-bg-2, #101114);
  border: 1px solid var(--arc-border-1, #26282d); border-radius: 8px; color: var(--arc-fg-1); cursor: pointer; }
.sim-type.selected { border-color: var(--arc-accent); }
.sim-symptoms { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-symptom { cursor: pointer; background: transparent; }
.sim-card { border: 1px solid var(--arc-border-1, #26282d); border-radius: 8px; padding: 11px 12px; margin-top: 12px; }
.sim-card-title { font: 500 11px/1 var(--fuse-font-mono); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--arc-fg-3); margin-bottom: 7px; }
.sim-urgency { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.sim-lanes { display: flex; gap: 8px; margin-bottom: 12px; }
.sim-timeline { margin-top: 12px; }
.sim-tstep { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px;
  border-bottom: 1px dashed var(--arc-border-1, #26282d); color: var(--arc-fg-2); }
.sim-tstep.done { color: var(--arc-fg-1); }
.sim-tstep.done span:first-child::before { content: "✓ "; color: var(--arc-accent); }

/* ── design 01 shared: panel card + mono pills + value boxes ── */
/* ── The card. ArcCard owns the structure now (Title / HeaderTrailing / Note / Footer / Flush);
   these bring its metrics to design 04's, which is a quieter surface than Arc's default: bg-1 not
   bg-2, an 18px gutter not 24, hairline separators between the sections, and no hover border —
   these are panels, not clickable cards. A card that IS clickable (ArcCard Href/OnClick) opts back
   into the hover through .arc-card-interactive. ── */
.arc-card {
    background: var(--arc-bg-1);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 0 0 rgba(255,255,255,.04) inset;
}
.arc-card:hover:not(.arc-card-interactive) { border-color: var(--arc-border-2); }
.arc-card + .arc-card, .arc-card + .pane, .pane + .arc-card, .arc-card + .feed, .feed + .arc-card { margin-top: 14px; }
/* A grid spaces its own children with gap (.fuse-grid is gap:16px). The stacking rule above assumes a
   vertical column, so on a grid's DIRECT children it pushed the second card down beside its neighbour —
   "Recent activity" sat 14px below "Needs attention" on the facility dashboard, and the same on Schemas
   and Clinical insights. Cards stacked inside a grid column (.fuse-grid > div > .arc-card) are not
   direct children and keep their spacing. Equal specificity to the rule above, so it must stay after it. */
.fuse-grid > :is(.arc-card, .pane, .feed) { margin-top: 0; }
/* Unstructured cards keep an inner gutter; structured ones get it per section below. */
.arc-card:not(.arc-card-structured) { padding: 16px 18px; }
.arc-card-header { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-bottom: 1px solid var(--arc-border-1); flex-wrap: wrap; }
.arc-card-title { font: 600 13.5px var(--fuse-font-sans); color: var(--arc-fg-1); margin: 0; }
.arc-card-header-trailing { margin-left: auto; }
.arc-card-body { padding: 16px 18px; }
.arc-card-flush .arc-card-body { padding: 0; }
.arc-card-note { display: flex; align-items: center; gap: 8px; padding: 12px 18px; margin: 0; font: 500 12px var(--fuse-font-sans); color: var(--arc-fg-3); border-top: 1px solid var(--arc-border-1); }
.arc-card-footer { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--arc-border-1); }
/* Content that should reach the card's edges — a grid, a planner, a table — inside a flush card. */
.arc-card-flush > .arc-card-body > .arc-datagrid,
.arc-card-flush > .arc-card-body > .arc-calendar-planner { border: 0; border-radius: 0; background: transparent; }

.pane { background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 0 0 rgba(255,255,255,.04) inset; }
.pane + .pane { margin-top: 14px; }
.pane-head { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-bottom: 1px solid var(--arc-border-1); flex-wrap: wrap; }
.pane-title { font-size: 13.5px; font-weight: 600; color: var(--arc-fg-1); }
.pane-body { padding: 16px 18px; }
.pane-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--arc-border-1); }
.pane-note { display: flex; align-items: center; gap: 8px; padding: 12px 18px; font: 500 12px var(--fuse-font-sans); color: var(--arc-fg-3); }
.mono-note { display: flex; align-items: center; gap: 8px; font: 500 12px var(--fuse-font-sans); color: var(--arc-fg-3); }
.mono-sub { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-3); }

.pill { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--fuse-font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--arc-fg-3); background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.pill.accent { color: var(--arc-accent); background: color-mix(in srgb, var(--arc-accent) 12%, transparent); border-color: color-mix(in srgb, var(--arc-accent) 24%, transparent); }
.pill.warn { color: var(--arc-warn); background: color-mix(in srgb, var(--arc-warn) 10%, transparent); border-color: color-mix(in srgb, var(--arc-warn) 28%, transparent); }
.pill.danger { color: var(--arc-danger); background: color-mix(in srgb, var(--arc-danger) 12%, transparent); border-color: color-mix(in srgb, var(--arc-danger) 30%, transparent); }
.pill.violet { color: var(--fuse-violet); background: color-mix(in srgb, var(--fuse-violet) 14%, transparent); border-color: color-mix(in srgb, var(--fuse-violet) 30%, transparent); }

/* static value box (review rows, read-only fields) */
.vbox { background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); border-radius: 6px; padding: 9px 11px; font-size: 12.5px; color: var(--arc-fg-1); }
.vlabel { font: 500 11px var(--fuse-font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--arc-fg-3); margin-bottom: 6px; }

/* ── intake wizard (design 01) ── */
.wiz-head { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.wiz-head .fuse-title { font-size: 18px; }
.wiz-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.wiz-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
@media (max-width: 900px) { .wiz-panels { grid-template-columns: 1fr; } }
.wiz-panel { background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 10px; padding: 18px; }
.wiz-panel-title { font-size: 13.5px; font-weight: 600; color: var(--arc-fg-1); margin-bottom: 4px; }
.wiz-panel-sub { font-size: 12.5px; color: var(--arc-fg-3); margin-bottom: 14px; }
.psearch { display: flex; align-items: center; gap: 9px; background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); border-radius: 6px; padding: 0 12px; }
.psearch:focus-within { border-color: var(--arc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--arc-accent) 14%, transparent); }
.psearch input { flex: 1; background: transparent; border: none; outline: none; padding: 10px 0; font: 400 13px var(--fuse-font-sans); color: var(--arc-fg-1); }
.plist { margin-top: 8px; background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); border-radius: 8px; overflow: hidden; max-height: 264px; overflow-y: auto; }
.plist-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: none; border-bottom: 1px solid var(--arc-border-1); width: 100%; text-align: left; background: transparent; cursor: pointer; font: inherit; color: inherit; }
.plist-row:last-child { border-bottom: none; }
.plist-row:hover { background: var(--arc-bg-2); }
.plist-row.selected { background: color-mix(in srgb, var(--arc-accent) 6%, transparent); }
.plist-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); display: flex; align-items: center; justify-content: center; font: 600 11px var(--fuse-font-sans); color: var(--arc-fg-1); flex: none; }
.plist-name { font-size: 12.5px; font-weight: 600; color: var(--arc-fg-1); }
.plist-meta { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-3); margin-top: 2px; }
.plist-check { margin-left: auto; color: var(--arc-accent); display: flex; }
.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rep-grid input { width: 100%; }
.rep-grid select { width: 100%; }

/* emergency gate + stop (design 01) */
.gate-frame { max-width: 720px; margin: 24px auto; background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 12px; padding: 32px 28px; }
.gate-frame.stop { border-color: color-mix(in srgb, var(--arc-danger) 35%, transparent); }
.gate-eyebrow { font: 500 11px var(--fuse-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--arc-danger); margin-bottom: 14px; }
.gate-title { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; color: var(--arc-fg-1); margin: 0 0 10px; }
.gate-sub { font-size: 13.5px; line-height: 1.6; color: var(--arc-fg-2); margin: 0 0 22px; }
.gate-choices { display: flex; gap: 12px; }
.gate-btn { flex: 1; text-align: center; font: 600 14px var(--fuse-font-sans); color: var(--arc-fg-1); background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); border-radius: 8px; padding: 16px 0; cursor: pointer; }
.gate-btn:hover { border-color: var(--arc-border-3); }
.gate-btn.danger { background: color-mix(in srgb, var(--arc-danger) 10%, transparent); border-color: color-mix(in srgb, var(--arc-danger) 40%, transparent); }
.gate-btn.danger:hover { background: color-mix(in srgb, var(--arc-danger) 16%, transparent); }
.gate-icon { width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--arc-danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--arc-danger) 35%, transparent); display: flex; align-items: center; justify-content: center; color: var(--arc-danger); margin-bottom: 18px; }
.gate-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; font: 500 12px var(--fuse-font-sans); color: var(--arc-fg-3); }

/* review + submitted (design 01) */
.review-kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; font-size: 12.5px; line-height: 1.5; }
.review-kv dt { font: 500 11px var(--fuse-font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--arc-fg-3); padding-top: 2px; }
.review-kv dd { margin: 0; color: var(--arc-fg-1); }
.urgency-strip { display: flex; align-items: center; gap: 10px; background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); border-radius: 8px; padding: 12px 14px; }
.done-icon { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--arc-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--arc-accent) 30%, transparent); display: flex; align-items: center; justify-content: center; color: var(--arc-accent); margin-bottom: 18px; }
.done-row { display: flex; align-items: center; gap: 10px; background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); border-radius: 7px; padding: 10px 12px; }
.done-row .val { font: 500 11.5px var(--fuse-font-mono); color: var(--arc-fg-1); margin-left: auto; }

/* uploaded attachment rows */
.file-row { display: flex; align-items: center; gap: 10px; background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); border-radius: 7px; padding: 9px 11px; margin-top: 6px; font-size: 12px; color: var(--arc-fg-1); }
.file-row .state { font: 500 11px var(--fuse-font-mono); color: var(--arc-accent); margin-left: auto; }

/* ── request feed (design 01 "Our requests") ── */
.feed-row.center { align-items: center; }
.feed-room { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-3); }
.feed-age-col { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-3); min-width: 40px; text-align: right; flex: none; }
.feed-chev { color: var(--arc-fg-4); flex: none; display: flex; }
/* Additive over the .feed-pill colours above — the uppercase mono treatment only. */
.feed-pill { text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
.inc-closed { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--arc-fg-2); background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 6px; padding: 7px 11px; cursor: pointer; }

/* ── request detail (design 01) ── */
.rd-head { padding: 0 0 14px; border-bottom: 1px solid var(--arc-border-1); margin-bottom: 14px; }
.rd-title-line { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.rd-title { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--arc-fg-1); margin: 0; }
.rd-meta { font: 500 12px var(--fuse-font-sans); color: var(--arc-fg-3); margin-left: auto; }
.rd-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip-flat { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-3); background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); border-radius: 4px; padding: 4px 9px; }
.chip-flat.danger { color: var(--arc-danger); background: color-mix(in srgb, var(--arc-danger) 10%, transparent); border-color: color-mix(in srgb, var(--arc-danger) 26%, transparent); }
.chip-flat.warn { color: var(--fuse-high); background: color-mix(in srgb, var(--fuse-high) 10%, transparent); border-color: color-mix(in srgb, var(--fuse-high) 26%, transparent); }
.flagbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: color-mix(in srgb, var(--arc-danger) 7%, transparent); border: 1px solid color-mix(in srgb, var(--arc-danger) 20%, transparent); border-radius: 8px; margin-bottom: 14px; font-size: 12.5px; color: var(--arc-fg-2); flex-wrap: wrap; }
.flagbar .lead { color: var(--arc-fg-1); font-weight: 500; }
.flagbar .due { font: 500 11px var(--fuse-font-mono); color: var(--arc-danger); margin-left: auto; }
/* acuity-Stat/High/Normal/Low below are applied as class="acuity-@tier" — built from the
   server value, so searching for the literal finds nothing. They are live. */
.acuity-pill { font: 500 11px var(--fuse-font-mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 10px; }

/* chart activity / receipts (design 01) */
.receipt .sys { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-2); font-weight: 500; min-width: 0; }
/* st-Written/HeldInFuse/Failed/Pending/Cancelled are applied as class="st-@receipt.Status" —
   same story: built from the server value, live despite having no literal caller. */
.st { font: 500 11px var(--fuse-font-mono); letter-spacing: 0.05em; text-transform: uppercase; border-radius: 4px; padding: 3px 8px; font-weight: 500; }
.st-Written { background: color-mix(in srgb, var(--arc-accent) 12%, transparent); color: var(--arc-accent); }
.st-HeldInFuse { background: color-mix(in srgb, var(--arc-warn) 12%, transparent); color: var(--arc-warn); }
.st-Failed { background: color-mix(in srgb, var(--arc-danger) 12%, transparent); color: var(--arc-danger); }
.st-Pending { background: color-mix(in srgb, var(--arc-info) 12%, transparent); color: var(--arc-info); }
.st-Cancelled { background: var(--arc-bg-3); color: var(--arc-fg-3); }

/* ── schedule (design 01) ── */
.view-toggle { display: flex; background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 999px; padding: 3px; }
.view-toggle button { font: 500 11.5px var(--fuse-font-sans); color: var(--arc-fg-3); background: transparent; border: none; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.view-toggle button.on { font-weight: 600; color: var(--arc-fg-on-accent); background: var(--fuse-accent-fill, var(--arc-accent)); }
.sched-day-head { display: flex; align-items: center; gap: 9px; padding: 11px 18px; background: var(--arc-bg-2); border-top: 1px solid var(--arc-border-1); }
.sched-day-head:first-child { border-top: none; }
.sched-day { font-size: 12.5px; font-weight: 600; color: var(--arc-fg-1); }
.sched-tag { font: 500 11px var(--fuse-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--arc-accent); background: color-mix(in srgb, var(--arc-accent) 12%, transparent); border-radius: 999px; padding: 3px 8px; }
.sched-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--arc-border-1); }
.sched-time { width: 74px; flex: none; }
.sched-time .t { font: 600 12px var(--fuse-font-mono); color: var(--arc-fg-1); }
.sched-time .d { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-4); margin-top: 2px; }
.sched-who { flex: 1; min-width: 0; }
.sched-who .p { font-size: 12.5px; font-weight: 500; color: var(--arc-fg-1); }
.sched-who .p.reserved { color: var(--arc-fg-3); font-weight: 400; }
.sched-who .y { font-size: 11.5px; color: var(--arc-fg-3); margin-top: 2px; }
.sched-prov { font-size: 11.5px; color: var(--arc-fg-2); width: 120px; flex: none; }
.sched-status { font: 500 11px var(--fuse-font-mono); letter-spacing: 0.05em; color: var(--arc-fg-3); width: 84px; text-align: right; flex: none; }
.legend { display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--arc-border-1); background: var(--arc-bg-2); flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--arc-fg-2); }
.legend-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* ── roster (design 01) ── */
.link-cell { display: flex; flex-direction: column; gap: 3px; }
.link-line { font: 500 11px var(--fuse-font-mono); }
.link-line.ok { color: var(--arc-accent); }
.link-line.missing { color: var(--arc-danger); }

/* ── integrations (design 01) ── */
.conn-logo { width: 34px; height: 34px; border-radius: 8px; background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); display: flex; align-items: center; justify-content: center; font: 700 12px var(--fuse-font-sans); color: var(--arc-fg-1); flex: none; }
.cap-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--arc-fg-2); padding: 3.5px 0; }
.cap-row.off { color: var(--arc-fg-3); }
.mstat-row { display: flex; gap: 8px; }
.mstat { flex: 1; background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); border-radius: 8px; padding: 11px 12px; }
.mstat .n { font-size: 19px; font-weight: 600; line-height: 1; color: var(--arc-fg-1); }
.mstat .n.ok { color: var(--arc-accent); }
.mstat .n.warn { color: var(--arc-warn); }
.mstat .n.bad { color: var(--arc-danger); }
.mstat .l { font-size: 11px; color: var(--arc-fg-3); margin-top: 5px; }

/* ── settings (design 01) ── */
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 800px) { .set-grid { grid-template-columns: 1fr; } }
.set-grid input { width: 100%; }
.set-grid select { width: 100%; }
.unit-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--arc-border-1); font-size: 12.5px; color: var(--arc-fg-1); }

/* ── design 02 provider: connector cards ── */
/* Equal-height cards, note pinned to the bottom: capability lists differ in length, and top-aligned
   cards left each note (and the next row) at a different height. */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; align-items: stretch; }
.conn-grid > .arc-card { display: flex; flex-direction: column; }
.conn-head { display: flex; align-items: center; gap: 10px; }
.conn-head .pill { margin-left: auto; }
.conn-head .conn-logo { width: 32px; height: 32px; }
.conn-name { font-size: 13.5px; font-weight: 600; color: var(--arc-fg-1); }
.conn-caps { display: flex; flex-direction: column; gap: 7px; margin: 14px 0; }
.conn-cap { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.45; color: var(--arc-fg-2); }
.conn-note { font: 500 12px/1.5 var(--fuse-font-sans); color: var(--arc-fg-3); padding-top: 12px; border-top: 1px solid var(--arc-border-1); margin-top: auto; }

/* ── design 02: receipts monitor rows + pill filter bar ── */
.pillbar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--arc-border-1); flex-wrap: wrap; }
button.pill { cursor: pointer; }
.pill.on { color: var(--arc-fg-on-accent); background: var(--fuse-accent-fill, var(--arc-accent)); border-color: transparent; }
.rcpt { padding: 12px 18px; border-bottom: 1px solid var(--arc-border-1); }
.rcpt:last-child { border-bottom: none; }
.rcpt-l1 { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.rcpt-req { font-size: 12.5px; font-weight: 600; color: var(--arc-fg-1); cursor: pointer; }
.rcpt-req:hover { text-decoration: underline; }
.rcpt-when { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-4); flex: none; }
.rcpt-l2 { display: flex; align-items: center; gap: 9px; }
.rcpt-sys { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-2); flex: none; }
.rcpt-desc { font-size: 11.5px; line-height: 1.45; color: var(--arc-fg-3); flex: 1; min-width: 0; }

/* ── design 02: outbox rows ── */
.obx-row { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--arc-border-1); }
.obx-row:last-child { border-bottom: none; }
.obx-msg { font: 500 11.5px var(--fuse-font-mono); color: var(--arc-fg-1); }
.obx-err { font-size: 11px; color: var(--arc-danger); margin-top: 3px; }
.obx-meta { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-3); flex: none; }
.obx-meta.dim { color: var(--arc-fg-4); }

/* ── design 02: mono grid cells + audit payload + schema read-out ── */
.cell-mono { font: 500 11.5px var(--fuse-font-mono); color: var(--arc-fg-2); }
.cell-mono.dim { color: var(--arc-fg-3); }
.cell-mono.warn { color: var(--arc-warn); }
.audit-payload { font: 400 11px/1.6 var(--fuse-font-mono); color: var(--arc-fg-2); background: var(--arc-bg-0); border: 1px solid var(--arc-border-1); border-radius: 7px; padding: 10px 12px; margin: 0; overflow-x: auto; }
.schema-body { font: 400 11.5px/1.9 var(--fuse-font-mono); color: var(--arc-fg-3); }
.schema-body .sec { color: var(--arc-fg-2); margin-top: 6px; }
.schema-body .sec:first-child { margin-top: 0; }
.schema-body .typ { color: var(--arc-fg-4); }
.schema-body .flags { color: var(--arc-accent); margin-top: 8px; }

/* ── design 02: routing SLA inputs (mono, tier-colored) ── */
.sla-input { width: 68px; border-radius: 6px; padding: 7px 10px; font: 500 12px var(--fuse-font-mono); text-align: right; }
.sla-input.stat { color: var(--fuse-stat); }
.sla-input.high { color: var(--fuse-high); }

/* ── design 02: patient detail header avatar ── */
.pd-avatar { width: 38px; height: 38px; border-radius: 9px; background: var(--arc-bg-2); border: 1px solid var(--arc-border-2); display: flex; align-items: center; justify-content: center; font: 600 13px var(--fuse-font-sans); color: var(--arc-fg-1); flex: none; }

/* ── design 04: honest loading — skeleton lines instead of a spinner ── */
.fuse-loading { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }

/* ── design 04: disposition kinds — the whole vocabulary as selectable rows ── */

/* ── design 04: attachment viewer chrome ── */
.viewer-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--arc-bg-0); border: 1px solid var(--arc-border-1); border-radius: 8px 8px 0 0; border-bottom: none; }
.viewer-bar .name { font-size: 12.5px; color: var(--arc-fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-bar .meta { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-3); }
.viewer-bar .close { margin-left: auto; }
.viewer-body { border: 1px solid var(--arc-border-1); border-radius: 0 0 8px 8px; overflow: hidden; }

/* ── design 04: bulk-import wizard (UserManager) ── */
.imp-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.imp-map { background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); border-radius: 8px; padding: 11px 12px; }
.imp-map.ignored { border-color: var(--arc-border-1); }
.imp-map .col { font: 500 11px var(--fuse-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--arc-fg-4); margin-bottom: 6px; }
.imp-map .hdr { font: 500 11.5px var(--fuse-font-mono); color: var(--arc-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-map select { width: 100%; margin-top: 9px; color: var(--arc-accent); }
.imp-map.ignored select { color: var(--arc-fg-3); }
.imp-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--arc-border-1); font-size: 12.5px; color: var(--arc-fg-1); }
.imp-row:last-child { border-bottom: none; }
.imp-row.bad { background: color-mix(in srgb, var(--arc-danger) 5%, transparent); border-bottom-color: color-mix(in srgb, var(--arc-danger) 24%, transparent); }
.imp-row .n { width: 28px; font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-4); flex: none; }
.imp-row.bad .n { color: var(--arc-danger); }
.imp-row .mono { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-row .err { font: 500 11px var(--fuse-font-mono); color: var(--arc-danger); }

/* ══ list controls: search box + pager + "last N / full history" toggle ══════════════════════ */
/* Box metrics track the canonical field surface so the search sits level with the selects beside it. */

.fuse-pager { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--arc-border-1); flex-wrap: wrap; }
.fuse-pager-note { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-3); }
.fuse-pager .arc-pagination { margin-left: auto; }
/* Pager inside a card (not a .feed/.pane) needs no full-bleed rule. */
.arc-card .fuse-pager { padding: 10px 0 0; }

.fuse-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: transparent; border: 1px solid var(--arc-border-2); border-radius: 6px; padding: 6px 11px; font: 500 11.5px var(--fuse-font-sans); color: var(--arc-fg-2); cursor: pointer; }
.fuse-more:hover { border-color: var(--arc-border-3); color: var(--arc-fg-1); }

/* ══ mobile (≤860px) ════════════════════════════════════════════════════════════════════════
   ArcAppShell Responsive collapses the sidebar track to zero width and expects the consumer to
   supply the off-canvas trigger (it ships one only for ArcSideNav, which Fuse doesn't use). So
   the rail+nav becomes a slide-over driven by the topbar hamburger. */
.fuse-nav-toggle { display: none; }
.fuse-nav-scrim { display: none; }
@media (max-width: 860px) {
    .fuse-nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 6px; background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); color: var(--arc-fg-2); cursor: pointer; }
    .fuse-nav-scrim { display: block; position: fixed; inset: 0; z-index: 119; background: rgb(0 0 0 / 0.55); }

    /* ArcAppShell's sidebar slot sits inside .arc-app-shell-sidebar-sticky, and `position: sticky`
       forms a stacking context — which would trap the drawer and its scrim below the sticky topbar
       (--arc-z-sticky = 100) no matter what z-index they carry. Sticky buys nothing at this width
       (the track is already collapsed to 0), so drop it and let the drawer escape to the root. */
    .arc-app-shell-sidebar-sticky { position: static; height: auto; }
    .shell-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 120; width: 304px; transform: translateX(-100%); transition: transform .18s ease; box-shadow: 0 0 40px -8px rgb(0 0 0 / 0.6); overflow-y: auto; }
    .shell-side.open { transform: none; }

    .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
    .topbar-greet { font-size: 14px; }
    .topbar-actions { width: 100%; margin-left: 0; gap: 8px; }
    .topbar-searchbox { flex: 1; width: auto; min-width: 0; }
    .topbar-search-kbd { display: none; }

    .fuse-main { padding: 14px 12px 56px; }
    .fuse-page-head { align-items: flex-start; }
    .fuse-title { font-size: 18px; }
    .kpi-row { gap: 10px; margin-bottom: 16px; }

    /* Feed rows: let the status pill + age drop under the summary instead of squeezing it. */
    .feed-row { flex-wrap: wrap; gap: 8px 12px; padding: 13px 14px; }
    .feed-head { padding: 12px 14px; }
    .feed-chev { display: none; }
    .feed-age-col { text-align: left; }

    .pane-head, .pane-body, .pane-foot, .pane-note, .fuse-pager, .legend, .sched-row, .obx-row, .rcpt, .unit-row { padding-left: 14px; padding-right: 14px; }
    /* Hand-rolled tables (rosters) scroll sideways rather than crushing their columns. */
    .pane { overflow-x: auto; }
    .fuse-table { min-width: 560px; }

    .fuse-grid.cols-2, .rep-grid, .sim-types, .set-grid, .wiz-panels { grid-template-columns: 1fr; }
    .fuse-kv, .review-kv { grid-template-columns: 1fr; gap: 2px 0; }
    .fuse-kv dt, .review-kv dt { margin-top: 8px; }
    .intake-q input, .intake-q select, .intake-q textarea { max-width: none; }
    .gate-frame { margin: 12px 0; padding: 22px 16px; }
    .gate-choices { flex-direction: column; }
    .embed-tabs { overflow-x: auto; }
    .embed-bar { flex-wrap: wrap; }
    .mrail-menu { left: auto; right: -8px; }
}

/* ── facility scorecard: per-unit performance table (design 01) ── */
.uscore-head, .uscore-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--arc-border-1); }
.uscore-row:last-child { border-bottom: none; }
.uscore-head { font: 500 11px var(--fuse-font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--arc-fg-3); }
.uscore-head > span, .uscore-row > span { width: 62px; flex: none; text-align: right; }
.uscore-head .u, .uscore-row .u { flex: 1; width: auto; text-align: left; }
.uscore-row .u { font-size: 12.5px; font-weight: 500; color: var(--arc-fg-1); }
.uscore-head .bar, .uscore-row .bar { width: 90px; }
.uscore-row .bar { height: 5px; border-radius: 999px; background: var(--arc-border-1); overflow: hidden; }
.uscore-row .bar > span { display: block; height: 100%; background: var(--arc-accent); border-radius: 999px; }
@media (max-width: 860px) {
    .uscore-head { display: none; }
    .uscore-row { flex-wrap: wrap; gap: 6px 10px; padding: 12px 14px; }
    .uscore-row .u { flex-basis: 100%; }
    .uscore-row .bar { width: 100%; }
    /* The header row is gone at this width, so each figure carries its own column name. */
    .uscore-row > span[data-l] { width: auto; text-align: left; }
    .uscore-row > span[data-l]::before { content: attr(data-l) " "; font-size: 11px; letter-spacing: .06em;
        text-transform: uppercase; color: var(--arc-fg-3); }
}

/* Expanded "view full history": bounded so a long tail lengthens the panel, not the page. The inset
   padding keeps row hover and the pager clear of the scrollbar. */
.fuse-recent-all { overflow-y: auto; overscroll-behavior: contain; margin-top: 2px; }
.fuse-recent-all .fuse-pager { position: sticky; bottom: 0; background: var(--arc-bg-1); }

/* Row lists sitting directly in a .pane (Chart activity, Attachments, Notifications) run full-bleed
   with the card's gutter and divider — the same shape .feed gives "Other requests for this
   resident", which is what the design draws for every row list on the request detail. */
/* ArcCard Flush drops its body padding for row lists, so its rows need the same gutter the
   .pane-list wrapper gives — without it Notifications / Chart activity text sat on the card edge. */
.pane-list > .receipt, .pane-list .receipt, .arc-card-flush .receipt { padding: 11px 18px; border-bottom: 1px solid var(--arc-border-1); }
.pane-list .receipt:last-of-type, .arc-card-flush .receipt:last-of-type { border-bottom: none; }
.pane-list .file-row { margin: 0; border: 0; border-bottom: 1px solid var(--arc-border-1); border-radius: 0; padding: 11px 18px; background: transparent; }
.pane-list .file-row:last-of-type { border-bottom: none; }
.pane-list .fuse-more, .arc-card-flush .fuse-more { margin: 8px 18px 14px; }
.pane-list > .arc-empty-state, .pane-list > .fuse-muted,
.arc-card-flush .arc-card-body > .arc-empty-state, .arc-card-flush .arc-card-body > .fuse-muted { padding: 14px 18px; }
/* Adjacent cards keep one rhythm whichever wrapper they use. */
.pane + .feed, .feed + .pane, .feed + .feed { margin-top: 14px; }

/* A .fuse-table sitting directly in a .pane runs edge to edge under the header strip; its own cell
   padding supplies the gutter, so no .pane-body wrapper. */
.pane > .fuse-table { border-top: 0; }
.pane > .fuse-table th:first-child, .pane > .fuse-table td:first-child { padding-left: 18px; }
.pane > .fuse-table th:last-child, .pane > .fuse-table td:last-child { padding-right: 18px; }
.pane > .fuse-table tr:last-child td { border-bottom: none; }

/* ── conformance sweep: shared rules the per-page fixes rely on ─────────────────────────────── */

/* An ArcDataGrid dropped straight into a .pane brought its own 12px cell gutter, stacking a second
   inset inside the card's 18px. Line the grid up with the header strip. */
.pane > .arc-datagrid .arc-datagrid-table th:first-child,
.pane > .arc-datagrid .arc-datagrid-table td:first-child { padding-left: 18px; }
.pane > .arc-datagrid .arc-datagrid-table th:last-child,
.pane > .arc-datagrid .arc-datagrid-table td:last-child { padding-right: 18px; }
.pane > .arc-datagrid .arc-datagrid-search, .pane > .arc-datagrid .arc-datagrid-toolbar { padding-left: 18px; padding-right: 18px; }

/* ArcCalendarPlanner carries its own card chrome; inside a .pane that reads as a card in a card. */
.pane > .arc-calendar-planner { border: 0; border-radius: 0; padding: 0; background: transparent; }

/* Filter-bar chips are labels, not status pills — the design draws them sentence-case (so "athenaOne"
   stays "athenaOne", not "ATHENAONE"). .pill keeps its uppercase mono treatment everywhere else. */
.pillbar .pill { text-transform: none; font-family: var(--fuse-font-sans); font-size: 11.5px; letter-spacing: 0; }

/* Nav counts: plain by default, red only where the design draws a hot badge.
   Colour only — the layout lives on the .rail-count rule above. */
.rail-count { background: var(--arc-bg-3); color: var(--arc-fg-2); }
.rail-count.hot { color: var(--fuse-stat); background: color-mix(in srgb, var(--fuse-stat) 12%, transparent); }

/* Embedded tab badge: design 00b draws it warn-tinted, not the rail's solid red. */
.embed-tab .rail-count { color: var(--arc-warn); background: color-mix(in srgb, var(--arc-warn) 12%, transparent); }

/* An even two-column field grid that still collapses on a phone — inline grid-template-columns beat
   the media query and could not. */
.fuse-grid.cols-2.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .fuse-grid.cols-2.even { grid-template-columns: 1fr; } }

/* ══ intake v3 (design handoff): questions left, live chart context pinned right ══════════════
   The schema already carried everything this draws — 13 symptom sections, the request ask, the
   disposition outcome, vitals, patient context. This is a re-layout, not new data. */
.iv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.iv-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
@media (max-width: 1100px) { .iv-grid { grid-template-columns: 1fr; } .iv-side { position: static; } }

/* Concern picker — one tile per symptom section, tri-state on the section's own `.present` gate:
   flagged / no concern / unanswered. Unanswered is a real state, not a default. */
.iv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.iv-tile { position: relative; display: flex; flex-direction: column; gap: 7px; text-align: left; padding: 11px 12px; min-height: 62px;
    background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 8px; color: var(--arc-fg-2);
    font: 500 12.5px var(--fuse-font-sans); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.iv-tile:hover { border-color: var(--arc-border-3); color: var(--arc-fg-1); }
.iv-tile .ic { color: var(--arc-fg-3); display: flex; }
.iv-tile-box { position: absolute; top: 9px; right: 10px; width: 15px; height: 15px; border-radius: 4px;
    border: 1px solid var(--arc-border-3); display: grid; place-items: center; color: transparent; }
.iv-tile.flagged { border-color: color-mix(in srgb, var(--arc-accent) 45%, transparent); background: color-mix(in srgb, var(--arc-accent) 7%, transparent); color: var(--arc-fg-1); }
.iv-tile.flagged .ic, .iv-tile.flagged .iv-tile-box { color: var(--arc-accent); }
.iv-tile.flagged .iv-tile-box { background: var(--arc-accent); border-color: var(--arc-accent); color: var(--arc-fg-on-accent); }
.iv-tile.clear { color: var(--arc-fg-3); }
.iv-tile.clear .iv-tile-box { color: var(--arc-fg-4); }

.iv-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 12px; font: 500 11px var(--fuse-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--arc-fg-3); }
.iv-legend-key { display: inline-flex; align-items: center; gap: 7px; }
.iv-legend-swatch { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--arc-border-3); flex: none; }
.iv-legend-swatch.flagged { background: var(--arc-accent); border-color: var(--arc-accent); }

/* A flagged concern's follow-up card. Severity tints the border so the one the acuity engine cares
   about is findable without reading. */
.iv-concern { background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 10px; overflow: hidden; }
.iv-concern + .iv-concern, .iv-concern + .pane, .pane + .iv-concern { margin-top: 12px; }
.iv-concern.red { border-color: color-mix(in srgb, var(--arc-danger) 32%, transparent); }
.iv-concern.warn { border-color: color-mix(in srgb, var(--arc-warn) 30%, transparent); }
.iv-concern-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--arc-border-1); cursor: pointer; }
.iv-concern-head .ic { display: flex; color: var(--arc-fg-3); flex: none; }
.iv-concern.red .iv-concern-head .ic { color: var(--arc-danger); }
.iv-concern.warn .iv-concern-head .ic { color: var(--arc-warn); }
.iv-concern-name { font-size: 13.5px; font-weight: 600; color: var(--arc-fg-1); }
.iv-concern-body { padding: 14px 16px; }

/* Read-only facts from the chart, shown inside the question card that needs them. Only rendered
   when the EHR read actually supplied them — an absent fact shows nothing, never a placeholder. */
.iv-facts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.iv-fact { display: inline-flex; align-items: center; gap: 7px; background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); border-radius: 6px; padding: 6px 10px; }
.iv-fact .ic { display: flex; color: var(--arc-fg-4); flex: none; }
.iv-fact .k { font: 500 11px var(--fuse-font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--arc-fg-3); }
.iv-fact .v { font-size: 12px; font-weight: 500; color: var(--arc-fg-1); }
.iv-fact.alert { border-color: color-mix(in srgb, var(--arc-danger) 30%, transparent); }
.iv-fact.alert .ic, .iv-fact.alert .v { color: var(--arc-danger); }

/* Two questions to a row where they fit; long text and multi-selects take the full width. */
.iv-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.iv-qgrid > .iv-wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .iv-qgrid { grid-template-columns: 1fr; } }

/* The request ask — the line the provider reads first, so it carries the accent. */
.iv-ask { border-color: color-mix(in srgb, var(--arc-accent) 30%, transparent); }
.iv-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.iv-chip { background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); border-radius: 999px; padding: 5px 11px; font: 500 11.5px var(--fuse-font-sans); color: var(--arc-fg-2); cursor: pointer; }
.iv-chip:hover { border-color: var(--arc-accent); color: var(--arc-fg-1); }

/* A single yes/no outcome, compact enough to sit in one row. */
.iv-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.iv-row .ic { display: flex; color: var(--arc-fg-3); flex: none; }
.iv-row-meta { flex: 1; min-width: 0; }
.iv-row-title { font-size: 13px; font-weight: 600; color: var(--arc-fg-1); }
.iv-row-sub { font-size: 12px; color: var(--arc-fg-3); margin-top: 2px; }

/* Vitals as read-outs rather than a form: the value is what a triage nurse scans for, and an
   out-of-range reading earns the warn tint. */

/* Allergy chips: an allergy is a hazard, so it reads as one. */
.iv-allergy { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--arc-danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--arc-danger) 28%, transparent); border-radius: 6px; padding: 5px 10px; font-size: 12px; color: var(--arc-danger); }

/* Live acuity preview — the same engine the server runs, so the reporter is never surprised. */
.iv-acuity { border-radius: 10px; padding: 13px 15px; display: flex; gap: 11px; }
.iv-acuity .ic { display: flex; flex: none; margin-top: 1px; }
.iv-acuity-title { font-size: 13px; font-weight: 600; color: var(--arc-fg-1); }
.iv-acuity-body { font-size: 12px; line-height: 1.5; color: var(--arc-fg-2); margin-top: 4px; }
.iv-acuity.stat { background: color-mix(in srgb, var(--arc-danger) 8%, transparent); border: 1px solid color-mix(in srgb, var(--arc-danger) 26%, transparent); }
.iv-acuity.stat .ic { color: var(--arc-danger); }
.iv-acuity.high { background: color-mix(in srgb, var(--fuse-high) 8%, transparent); border: 1px solid color-mix(in srgb, var(--fuse-high) 26%, transparent); }
.iv-acuity.high .ic { color: var(--fuse-high); }
.iv-acuity.calm { background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); }
.iv-acuity.calm .ic { color: var(--arc-fg-3); }

/* Wizard footer: where you are, what is left, and the one way forward. */
.iv-foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 13px 16px; background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 10px; flex-wrap: wrap; }
.iv-foot-status { font: 500 12px var(--fuse-font-sans); color: var(--arc-fg-3); margin: 0 auto; text-align: center; }

/* Vitals live in the 320px sidebar now: two to a row, compact labels, so the whole block is
   scannable without scrolling past it. The inputs stay real inputs — reported vitals are captured
   here, not just displayed. */
.iv-side .vitals-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.iv-side .vitals-grid .vital label { font-size: 11px; margin-bottom: 4px; }
.iv-side .vitals-grid .vital input, .iv-side .vitals-grid .vital select { padding: 7px 9px; font-size: 12.5px; }
.iv-side .vitals-grid .vital:has(select) { grid-column: 1 / -1; }

/* Blocks after the intake grid (attachments, validation alert) were butting straight into whichever
   column ran longest — usually the sidebar's acuity callout. One rhythm for every sibling block,
   whatever class it wears, so nothing has to remember its own top margin. */
.iv-grid + *, .iv-concern + .wiz-panel, .pane + .wiz-panel, .wiz-panel + .wiz-panel,
.wiz-panel + .pane, .wiz-panel + .iv-concern, .pane + .arc-alert, .iv-grid + .arc-alert,
.wiz-panel + .arc-alert, .iv-concern + .arc-alert { margin-top: 14px; }

/* Inside the two-up question grid a spanning field should actually span: the 460px reading-width cap
   is right for a single column and wrong the moment the cell is full width. */
.iv-qgrid .intake-q input, .iv-qgrid .intake-q select, .iv-qgrid .intake-q textarea { max-width: none; }
.iv-qgrid .iv-wide .intake-q textarea { min-height: 96px; }

/* ══ insights shell (design handoff): one framed surface, panels divided rather than floated ═════
   The old layout was a KPI row plus a grid of separate cards with gaps between them. The redesign
   reads as a single instrument panel — one border, internal rules, and every panel captioned with
   what it is and closed with what it means. */
.ins { background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 0 0 rgb(255 255 255 / .04) inset; }
.ins-head { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--arc-border-1); flex-wrap: wrap; }
.ins-head-title { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; color: var(--arc-fg-1); margin: 0; }
.ins-head-sub { font-size: 13px; color: var(--arc-fg-3); margin-top: 3px; }
.ins-head-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }

/* KPI strip: one tile per measure, each closing with the arithmetic behind it. */
/* Flex, not grid: a grid track leaves a hole when the tile count does not divide by the columns
   that fit, and no fixed minimum divides cleanly at every window width. Flex shrinks the tiles to
   keep them on one row, and stretches whatever wraps so a short row still fills. */
.ins-kpis { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--arc-border-1); }
.ins-kpi { flex: 1 1 140px; min-width: 120px; background: var(--arc-bg-0); border: 1px solid var(--arc-border-2); border-radius: 9px; padding: 13px 15px; }
.ins-kpi .k { font: 500 11px var(--fuse-font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--arc-fg-3); line-height: 1.4; }
.ins-kpi .v { font-size: 27px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--arc-fg-1); margin-top: 9px; }
.ins-kpi .v.good { color: var(--arc-accent); }
.ins-kpi .v.warn { color: var(--arc-warn); }
.ins-kpi .s { font-size: 11.5px; line-height: 1.45; color: var(--arc-fg-3); margin-top: 7px; }

/* Panel rows are divided, not gapped — the rule is the separation. */
.ins-row { display: grid; border-bottom: 1px solid var(--arc-border-1); }
.ins-row:last-child { border-bottom: none; }
.ins-row.two { grid-template-columns: 1.4fr 1fr; }
.ins-row.three { grid-template-columns: 1fr 1fr 1.3fr; }
.ins-panel { padding: 16px 20px; border-right: 1px solid var(--arc-border-1); min-width: 0; display: flex; flex-direction: column; }
.ins-panel:last-child { border-right: none; }
.ins-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.ins-panel-title { font-size: 13.5px; font-weight: 600; color: var(--arc-fg-1); }
.ins-panel-meta { font: 500 11.5px var(--fuse-font-sans); color: var(--arc-fg-3); margin-left: auto; }
/* The interpretation, not a repeat of the numbers — every claim here is computed from the window. */
.ins-note { font-size: 12px; line-height: 1.5; color: var(--arc-fg-3); margin-top: auto; padding-top: 14px; }
@media (max-width: 1000px) {
    .ins-row.two, .ins-row.three { grid-template-columns: 1fr; }
    .ins-panel { border-right: none; border-bottom: 1px solid var(--arc-border-1); }
    .ins-panel:last-child { border-bottom: none; }
}

/* Disposition breakdown: label, count, and the share as a bar under it. */
.ins-bars { display: flex; flex-direction: column; gap: 13px; }
.ins-bar-line { display: flex; align-items: baseline; gap: 10px; }
.ins-bar-label { font-size: 12.5px; color: var(--arc-fg-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-bar-value { font-size: 12.5px; font-weight: 600; color: var(--arc-fg-1); margin-left: auto; }
.ins-bar-track { display: block; height: 4px; border-radius: 999px; background: var(--arc-bg-3); margin-top: 6px; overflow: hidden; }
.ins-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--arc-accent); }

/* Donut legends read as a table: swatch, name, count, share. */
.ins-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ins-legend-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--arc-fg-1); }
.ins-legend-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ins-legend-count { margin-left: auto; font: 600 12px var(--fuse-font-mono); }
.ins-legend-share { font: 500 11px var(--fuse-font-mono); color: var(--arc-fg-3); width: 44px; text-align: right; }

/* ══ order picker (athena order creation) ═══════════════════════════════════════════════════════
   Framed inside the disposition form because the choice it captures leaves Fuse — everything else
   on that form stays here. */
.ord-block { border: 1px solid var(--arc-border-2); border-radius: 9px; padding: 12px 14px; margin: 4px 0 12px;
    background: var(--arc-bg-0); }
.ord-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ord-title { font-size: 13px; font-weight: 600; color: var(--arc-fg-1); }
.ord-head .fuse-eyebrow { margin-left: auto; }
/* States which of the two paths the disposition will take, before it is taken. */
.ord-note { font-size: 12px; line-height: 1.5; color: var(--arc-fg-3); margin-top: 10px;
    padding-top: 10px; border-top: 1px solid var(--arc-border-1); }

/* Renewal picker: one row per medication on the chart. A blocked row stays visible and unclickable
   — a provider who came to renew it needs to see why, not find it missing. */
.med-renew { display: flex; flex-direction: column; gap: 6px; }
.med-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
    text-align: left; background: var(--arc-bg-1); border: 1px solid var(--arc-border-2);
    border-radius: 7px; padding: 9px 11px; cursor: pointer; }
.med-row:hover:not(:disabled) { border-color: var(--arc-fg-4); }
.med-row.on { border-color: var(--arc-accent); background: color-mix(in srgb, var(--arc-accent) 8%, var(--arc-bg-1)); }
.med-row.blocked { opacity: .55; cursor: not-allowed; }
.med-name { font-size: 13px; font-weight: 550; color: var(--arc-fg-1); }
.med-sig { font-size: 12px; color: var(--arc-fg-3); }
.med-block { font: 500 11px var(--fuse-font-mono); letter-spacing: .06em; text-transform: uppercase;
    color: var(--arc-warn); margin-top: 2px; }

/* Multi-facility assignment: one row per facility the admin can grant. */
.fac-multi { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--arc-border-2);
    border-radius: 8px; padding: 8px 10px; max-height: 200px; overflow-y: auto; background: var(--arc-bg-0); }
.fac-row { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 4px 2px; cursor: pointer; }
.fac-row input { width: auto; margin: 0; }

/* Workspace switcher: the same card as before, now a button with a menu under it. */
.mnav-ws-wrap { position: relative; margin: 12px 12px 14px; }
.mnav-ws-wrap .mnav-ws { margin: 0; width: 100%; cursor: pointer; text-align: left; }
.mnav-ws-wrap .mnav-ws:disabled { cursor: default; }
.mnav-ws-wrap .mnav-ws:not(:disabled):hover { border-color: var(--arc-fg-4); }
.mnav-ws.open { border-color: var(--arc-accent); }
.mnav-ws-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
    background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: 8px;
    padding: 4px; box-shadow: 0 10px 28px rgb(0 0 0 / .45); max-height: 320px; overflow-y: auto; }
.ws-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none;
    border: 0; border-radius: 6px; padding: 7px 9px; font-size: 12.5px; color: var(--arc-fg-1); cursor: pointer; }
.ws-item:hover { background: var(--arc-bg-2); }
.ws-item.on { background: color-mix(in srgb, var(--arc-accent) 12%, transparent); }
.ws-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Filled vs hollow, not just gold vs grey — colour alone is not a state a colour-blind user can read. */
.ws-star { margin-left: auto; color: var(--arc-fg-4); font-size: 13px; line-height: 1; flex: none; cursor: pointer; }
.ws-star.on { color: var(--arc-warn); }
.ws-star:hover { color: var(--arc-warn); }
.ws-group { font: 500 11px var(--fuse-font-mono); letter-spacing: .08em; text-transform: uppercase;
    color: var(--arc-fg-3); padding: 8px 9px 4px; }
.ws-group:first-child { padding-top: 4px; }

/* ── Arc 3.30 chat bubbles — two upstream bugs, patched here for both consumers (the assistant
      drawer and the request message thread). Written up in docs/arc-requests-assistant.md.
   1. ArcChatBubble caps its CONTENT at min(560px, 75%), and that percentage resolves against the
      bubble's own shrink-to-fit width — so every bubble renders a quarter narrower than its text
      needs. A two-letter reply ends up narrower than one character and breaks mid-word ("o/k").
      Cap the bubble instead: it is a flex item of a container with a definite width.
   2. ArcChatThread wraps each bubble in a row-direction flex row with no justify-content, so the
      sent bubble's own align-self:flex-end only moves it vertically and it hangs on the left. An
      auto inline-start margin right-aligns it in a row, and is a no-op in the column thread on the
      request page, where align-self already works. */
.arc-chat-bubble { max-width: min(560px, 85%); }
.arc-chat-bubble-content { max-width: 100%; }
.arc-chat-bubble-sent { margin-left: auto; }

/* ── Assistant drawer (Shared/AssistantPanel.razor). Width, the filled thread and its chrome are Arc
      parameters (3.30); ArcDrawer's body still pads and scrolls itself, so hand the space to the thread. */
.fuse-assistant .arc-drawer-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.fuse-assistant .arc-drawer-footer { display: block; }
.fuse-assistant-intro { color: var(--arc-fg-2); font-size: 13px; line-height: 1.5; }
.fuse-assistant-intro p { margin: 0 0 10px; }
.fuse-assistant-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.fuse-assistant-error { padding: 0 18px 12px; }
.fuse-assistant-composer { display: flex; flex-direction: column; gap: 6px; }
.fuse-assistant-note { font-size: 11.5px; color: var(--arc-fg-3); }
.fuse-assistant .arc-markdown > :first-child { margin-top: 0; }
.fuse-assistant .arc-markdown > :last-child { margin-bottom: 0; }

/* ── Import from PointClickCare (Provider/Admin/FacilityImport.razor) ── */
.fuse-import-intro { color: var(--arc-fg-2); font-size: 13px; margin: 0 0 12px; }
.fuse-import-actions { display: flex; gap: 8px; margin-top: 14px; }
.fuse-import-results { margin: 8px 0 14px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
/* A head office cannot be imported, so its row reads as unavailable rather than merely unticked. */
.fuse-table tr.is-muted { opacity: .55; }