/* CancerOS reference UI. Surfaces, faces and edges follow PharmaOS: a warm
   cream rail, a white working canvas, cream cards and hairlines, one blue
   accent. CancerOS keeps its own acrylic, sheen, focus ring and motion. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-500); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .mono { font-family: var(--font-mono); font-size: 13px; }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--text-strong); letter-spacing: var(--ls-tight); }
h1 { font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-snug); }
h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 var(--space-2); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
em.emph { font-family: var(--font-serif); font-style: italic; color: var(--text-emphasis); font-weight: 500; }
.overline { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* Motion vocabulary. Things arrive by rising and settling, and leave by
   sinking and fading, a little faster than they came. Modals scale from
   just under full size so the glass reads as a sheet lifting off the page.
   A screen change slides the whole main column up by a hair. */
@keyframes sink { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes sheet-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scrim-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.screen-enter .main { animation: screen-in var(--dur-slow) var(--ease-out) both; }
/* The same page drawn again is a refresh, not a page turn: its parts fade
   in where they were rather than rising. */
.screen-same .content > * { animation: fadein var(--dur-base) ease-out both; }
.overlay, .palette-overlay { animation: scrim-in var(--dur-base) var(--ease-out) both; }
.overlay .modal, .palette-overlay .palette { animation: sheet-in var(--dur-slow) var(--ease-out) both; }
.overlay.leaving, .palette-overlay.leaving { animation: scrim-out var(--dur-base) ease-in both; }
.overlay.leaving .modal, .palette-overlay.leaving .palette { animation: sheet-out var(--dur-base) ease-in both; }
.toast.leaving, .callout.leaving { animation: sink var(--dur-base) ease-in both; }
/* ---- motion primitives (core/motion.ts) --------------------------------
   After ibelick's motion-primitives, as classes. Text Effect: a word
   arriving, inline so the text wraps as it did. Animated Group and In
   View: an item arriving, with a delay per item in --mp-delay. Transition
   Panel: the old panel is lifted out of the flow and sinks away while the
   new one takes its room. Text Shimmer: a sheen along a line still being
   worked on. */
@keyframes mp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mp-blur { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes mp-blur-slide { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes mp-slide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mp-scale { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mp-word { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: blur(0); } }
@keyframes mp-out { to { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
/* 360ms is WORD_MS in core/motion.ts, which picks a redrawn word up mid-way. */
.mp-w { animation: mp-word 360ms var(--ease-out) both; }
.mp-w.mp-fade { animation-name: mp-fade; }
.mp-in { animation: mp-fade var(--dur-slow) var(--ease-out) both; animation-delay: var(--mp-delay, 0ms); }
.mp-in.mp-blur { animation-name: mp-blur; }
.mp-in.mp-blur-slide { animation-name: mp-blur-slide; }
.mp-in.mp-slide { animation-name: mp-slide; }
.mp-in.mp-scale { animation-name: mp-scale; }
.mp-hidden { opacity: 0; }
.mp-host { position: relative; }
.mp-out { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; animation: mp-out var(--dur-base) ease-in both; }
@keyframes mp-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.mp-shimmer { display: inline-block; color: transparent;
  background: linear-gradient(90deg, var(--text-muted) 40%, var(--text-strong) 50%, var(--text-muted) 60%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; animation: mp-shimmer 2.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .mp-hidden { opacity: 1; } .mp-shimmer { color: inherit; background: none; } }

/* ---- shell ------------------------------------------------------------- */

.app { display: grid; grid-template-columns: 248px 1fr; grid-template-rows: minmax(0, 1fr); height: 100vh;
  /* Collapsing eases the column shut and the page follows it; the page
     itself is not redrawn (shell.refreshRail). */
  transition: grid-template-columns var(--dur-slow) var(--ease-out); }
/* Collapsed rail: icons only. Labels hide and the account shows only the
   sign-out icon. */
.app.rail-collapsed { grid-template-columns: 64px 1fr; }
/* The redrawn rail fades in over the old one's place while the column
   moves; its labels are clipped by the rail until there is room. */
@keyframes rail-swap { from { opacity: 0; } to { opacity: 1; } }
.rail.swap { animation: rail-swap var(--dur-base) var(--ease-out) both; }
/* On top (a workspace's top-right toggle): the module lifts off the page
   into a rounded sheet over a dark blurred scrim, the rail and the page
   still showing through, the way the old modal did. The same toggle puts
   it back in the page. */
body.focus-mode .main .plan-composer, body.focus-mode .main .annotate {
  position: fixed; inset: 12px; z-index: 100; height: auto;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--acrylic-shadow), var(--acrylic-edge);
  animation: sheet-in var(--dur-slow) var(--ease-out) both; }
/* The scrim is its own element on body, under the sheet. The page-enter
   animation leaves a transform on .main, which would pin a fixed sheet
   inside it; while on top, .main has none. */
.focus-scrim { position: fixed; inset: 0; z-index: 99; background: rgba(17, 19, 21, 0.32);
  backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur); animation: fadein var(--dur-base) both; }
body.focus-mode .main { animation: none; transform: none; }
/* The sheet itself is glass: the board's cream at nine tenths, blurred, so
   the page reads through it faintly. Flat, no gradient. */
body.focus-mode .main .plan-composer { background: rgba(233, 226, 211, 0.9); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); }
body.focus-mode .main .annotate { background: rgba(250, 248, 244, 0.86); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); }
.win-controls { display: inline-flex; gap: 2px; margin-left: 6px; }
/* A workspace with nothing open: the same frame, the controls top right,
   the module's icon washed out, one line, New and Open. Centred a little
   above the middle, where the eye lands. */
.ws-landing { display: grid; grid-template-rows: auto 1fr; }
.ws-landing-controls { display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 6px 6px 6px 12px; border-radius: var(--radius-pill);
  background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
.ws-landing-controls h1 { font: 600 16px var(--font-display); color: var(--text-strong); margin: 0; }
.ws-landing-controls .win-controls { margin-left: auto; }
.ws-landing-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 24px 12vh; text-align: center; }
.ws-landing-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px var(--cream-border); }
.ws-landing-ic svg { width: 34px; height: 34px; color: var(--ink-400); opacity: 0.7; }
.ws-landing-text { max-width: 520px; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.annotate.ws-landing { grid-template-rows: auto 1fr; }
.rail-collapsed .rail { padding-left: 10px; padding-right: 10px; }
.rail-collapsed .rail .label, .rail-collapsed .rail .foot .who, .rail-collapsed .rail .foot .rail-av,
.rail-collapsed .rail .navbtn .count, .rail-collapsed .rail .navbtn .count.worded, .rail-collapsed .rail .navbtn .mention-dot,
.rail-collapsed .rail .navbtn .sub-tag { display: none; }
.rail-collapsed .rail .rail-group { padding: 0; align-items: center; }
.rail-collapsed .rail .foot { justify-content: center; }
.rail .sign-out svg { transform: scaleX(-1); }
.rail .rail-mark { width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; display: grid; place-items: center; }
.rail .rail-mark:hover { background: var(--cream-300); }
.rail .mark .rail-mark img { width: 26px; height: 26px; }
.rail-collapsed .rail .navbtn { justify-content: center; padding: 10px 0; }
.rail-collapsed .rail .mark { justify-content: center; padding: 4px 0 18px; }
.rail-collapsed .rail .foot { padding: 8px 0; display: grid; place-items: center; }
/* A collapsed rail still says something is waiting: a dot on the icon. */
.rail-collapsed .rail .navbtn { position: relative; }
/* Files' pages under the folder, smaller. They slide open and shut like
   the expanded list, centred under the icon with no indent. */
.rail-collapsed .rail .rail-icons { align-self: stretch; }
.rail-collapsed .rail .rail-icons .rail-sub { padding-left: 0; align-items: center; }
.rail-collapsed .rail .rail-icons .rail-sub > :last-child { margin-bottom: 4px; }
.rail-collapsed .rail .rail-icons .navbtn.sub { width: 36px; min-height: 30px; padding: 6px 0; border-left: 0; border-radius: var(--radius-sm); }
.rail-collapsed .rail .rail-icons .navbtn.sub svg { width: 15px; height: 15px; }
.rail-collapsed .rail .navbtn:has(.count, .mention-dot)::after { content: ""; position: absolute; top: 7px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--warning-500); }
.rail-collapsed .rail .navbtn:has(.count.calm)::after { background: var(--accent-500); }
.rail-collapsed .rail .navbtn:has(.mention-dot)::after { background: var(--danger-600); }
/* A shut group's label carries one dot for the counts inside it: amber
   for a run waiting on you, blue for tasks. The pills are inside, where
   the open group shows them. */
.rail .shut-counts { display: none; width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--accent-500); flex: none; }
.rail .foldable.shut .shut-counts:not([hidden]), .rail .foldable.auto-shut .shut-counts:not([hidden]) { display: inline-block; }
.rail .shut-counts.urgent { background: var(--warning-500); }
/* The Workspace group on the collapsed rail: one icon in place of the
   label, the items' icons under it, a hairline above to set it apart. The
   body slides like the labelled group's. Shut, the icon alone says there
   is more; a dot on it says one of the pages inside has something. */
.rail-collapsed .rail .rail-icon-group { align-items: stretch; padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--cream-border); }
.rail-collapsed .rail .rail-icon-group .group-icon { color: var(--ink-500); }
.rail-collapsed .rail .rail-icon-group .group-icon svg { color: inherit; }
.rail-collapsed .rail .rail-icon-group .group-icon.active svg { color: var(--accent-600); }
.rail-collapsed .rail .rail-icon-group .rail-group-inner { gap: 3px; padding: 3px 0 0; align-items: center; }
.rail-collapsed .rail .rail-icon-group .rail-group-inner > :first-child { margin-top: 0; }
.rail-collapsed .rail .rail-icon-group .rail-group-inner > :last-child { margin-bottom: 0; }
.rail-collapsed .rail .rail-icon-group .navbtn:not(.sub) { width: 100%; }
/* The Archive row in the open rail: a quiet sub-row under the pages. */
.rail .rail-group-inner > .navbtn.sub { margin-left: 20px; width: calc(100% - 20px); }
.rail-collapsed .rail .rail-icon-group.shut:has(.navbtn .count, .navbtn .mention-dot) .group-icon::after { content: ""; position: absolute; top: 7px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--warning-500); }
/* Recent on the collapsed rail: a clock, and the pages in a popover. */
.rail-collapsed .rail .rail-recent-collapsed { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--cream-border); align-items: stretch; }
.rail .rail-recent-btn:disabled { opacity: .4; cursor: default; }
.rail .rail-recent-btn:disabled:hover { background: transparent; }
.recent-pop { position: absolute; z-index: 120; width: 280px; max-width: calc(100vw - 100px); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.recent-pop.side::before { content: ""; position: absolute; left: -6px; top: 22px; width: 10px; height: 10px; background: var(--cream-50); border-left: 1px solid var(--cream-border); border-bottom: 1px solid var(--cream-border); transform: rotate(45deg); border-radius: 0 0 0 2px; }
.recent-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 4px; font-size: 12px; color: var(--ink-600); }
.recent-pop-head strong { font-weight: 600; color: var(--text-strong); }
.recent-pop .recent-clear { opacity: 1; }
.recent-pop .recent-list { max-height: min(60vh, 440px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; }
.recent-pop .recent-list::-webkit-scrollbar { display: none; }
.recent-pop .recent-clear { border: 0; background: transparent; padding: 2px 6px; font: inherit; font-size: 11.5px; color: var(--ink-500); cursor: pointer; border-radius: var(--radius-xs); }
.recent-pop .recent-clear:hover { color: var(--ink-900); background: var(--cream-200); text-decoration: none; }
.recent-pop .navbtn.recent { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 5px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-700); font-size: 13.5px; text-align: left; cursor: pointer; }
.recent-pop .navbtn.recent:hover { background: var(--cream-300); color: var(--ink-900); }
.recent-pop .navbtn.recent svg { width: 15px; height: 15px; flex: none; color: var(--ink-500); }
.recent-pop .navbtn.recent .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.rail {
  /* PharmaOS's cream rail, with the CancerOS mesh kept as a faint tint:
     brand blobs drift slowly over the cream-to-paper fade. Each layer's
     background-size is larger than the element and its position sweeps,
     so the blobs move without the gradients ever being repainted. */
  position: relative; isolation: isolate;
  background-color: var(--cream-50);
  background-image:
    radial-gradient(900px 900px at 50% 50%, rgba(117, 141, 250, 0.10) 0%, rgba(117, 141, 250, 0) 70%),
    radial-gradient(1100px 1100px at 50% 50%, rgba(117, 231, 239, 0.08) 0%, rgba(117, 231, 239, 0) 70%),
    radial-gradient(800px 800px at 50% 50%, rgba(107, 180, 247, 0.07) 0%, rgba(107, 180, 247, 0) 70%),
    radial-gradient(760px 760px at 50% 50%, rgba(168, 121, 250, 0.06) 0%, rgba(168, 121, 250, 0) 70%),
    radial-gradient(1000px 1000px at 50% 50%, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--cream-100) 0%, var(--cream-50) 100%);
  background-size: 400% 400%, 400% 400%, 400% 400%, 400% 400%, 400% 400%, 100% 100%;
  background-repeat: no-repeat;
  animation: railmesh 40s ease-in-out infinite alternate;
  border-right: 1px solid var(--cream-border);
  color: var(--ink-700);
  display: flex; flex-direction: column;
  padding: var(--space-4) var(--space-4);
  gap: 4px;
}
.rail .mark { padding: 4px 4px 18px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail .mark img { height: 30px; display: block; min-width: 0; }
.rail .rail-toggle { width: 30px; height: 30px; flex: none; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-500); cursor: pointer; display: grid; place-items: center; }
.rail .rail-toggle:hover { background: var(--cream-300); color: var(--ink-900); }
.rail .rail-toggle svg { width: 18px; height: 18px; }
.rail .rail-group { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--space-5); }
.rail .rail-group-label { font-size: 12px; color: var(--ink-600); padding: 0 10px 8px; white-space: nowrap; }
/* Recent pages: smaller rows that scroll on their own, so a long history
   never pushes the footer off the rail. */
.rail { min-height: 0; }
.rail .rail-recent { flex: 1 1 auto; min-height: 0; margin-bottom: var(--space-2); overflow: hidden; }
.rail .rail-recent .rail-group-label { display: flex; align-items: center; }
/* The list scrolls but shows no bar: the rail stays one quiet column. */
.rail .recent-list { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; }
.rail .recent-list::-webkit-scrollbar { display: none; }
.rail .navbtn.recent { min-height: 32px; padding: 5px 10px; gap: 10px; font-size: 13.5px; color: var(--ink-700); }
.rail .navbtn.recent svg { width: 15px; height: 15px; color: var(--ink-500); }
.rail .navbtn.recent .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* A group that folds: its label is a button with a chevron that turns down
   while open. The body slides shut on a grid row, like the rail folds. */
.rail .group-fold { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.rail .group-fold:hover { color: var(--ink-900); }
.rail .group-fold svg { width: 12px; height: 12px; transform: rotate(90deg); transition: transform var(--dur-base) var(--ease-out); }
.rail .foldable.shut .group-fold svg, .rail .foldable.auto-shut .group-fold svg { transform: none; }
.rail .rail-group-body { display: grid; grid-template-rows: 1fr; min-height: 0; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.rail .foldable.shut .rail-group-body, .rail .foldable.auto-shut .rail-group-body { grid-template-rows: 0fr; }
.rail .rail-group-inner { display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden; transition: opacity var(--dur-base); }
.rail .foldable.shut .rail-group-inner, .rail .foldable.auto-shut .rail-group-inner { opacity: 0; pointer-events: none; }
/* Fit levels, set by fitRail() in app.js when the window is short. It
   measures with the slides off (fit-now) so it sees the settled layout. */
.rail.fit-now, .rail.fit-now * { transition: none !important; }
.rail.fit-cap .rail-sub > .navbtn.sub:not(.more):not(.active):nth-child(n+4) { display: none; }
.rail.fit-recent .rail-recent { display: none; }
.rail.fit-subs .rail-fold:not(.user-open) .rail-sub-wrap { grid-template-rows: 0fr; }
.rail.fit-subs .rail-fold:not(.user-open) .rail-sub-wrap > .rail-sub { opacity: 0; }
.rail.fit-subs .rail-fold:not(.user-open) .rail-sub-wrap .navbtn { pointer-events: none; }
/* Last resort, when what the user opened still does not fit. */
.rail { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
/* Recent keeps scrolling inside its fold. */
.rail .rail-recent .rail-group-body { flex: 1 1 auto; }
.rail .rail-recent .recent-list { flex: 1 1 auto; }
.rail .recent-clear { border: 0; background: transparent; padding: 0 2px; font: inherit; font-size: 11.5px; color: var(--ink-500); cursor: pointer; opacity: 0; }
.rail .rail-recent:hover .recent-clear, .rail .recent-clear:focus-visible { opacity: 1; }
.rail .recent-clear:hover { color: var(--ink-900); text-decoration: underline; }
.rail .navbtn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; background: transparent; color: var(--ink-900);
  min-height: 38px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 15.5px; font-weight: 400; text-align: left;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.rail .navbtn svg { width: 18px; height: 18px; flex: none; color: var(--ink-700); }
.rail .navbtn:hover { background: var(--cream-300); }
.rail .navbtn.active { background: var(--cream-300); font-weight: 500; }
.rail .navbtn.active svg { color: var(--accent-600); }
.rail .navbtn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* A heading that opens: its recent items indented under it, smaller. The
   wrap is a one-row grid whose row goes from 0fr to 1fr, which the browser
   can animate; the list inside fades with it. The sub-list's own breathing
   room goes on its first and last child, where the clip can take it: a
   margin on the list sits outside the row and a padding floors the row's
   automatic minimum, and either one leaves a gap under every shut
   heading. */
.rail .rail-sub-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.rail .rail-fold.open .rail-sub-wrap { grid-template-rows: 1fr; }
.rail .rail-sub-wrap > .rail-sub { overflow: hidden; opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out); }
.rail .rail-fold.open .rail-sub-wrap > .rail-sub { opacity: 1; transform: none; }
.rail .rail-fold:not(.open) .rail-sub-wrap .navbtn { pointer-events: none; }
.rail .rail-sub { display: flex; flex-direction: column; gap: 2px; padding-left: 20px; }
.rail .rail-sub > :first-child { margin-top: 2px; }
.rail .rail-sub > :last-child { margin-bottom: 6px; }
.rail .navbtn.sub { min-height: 30px; padding: 4px 10px 4px 12px; gap: 8px; font-size: 13.5px; color: var(--ink-700); border-left: 2px solid var(--cream-border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.rail .navbtn.sub .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rail .navbtn.sub svg { width: 14px; height: 14px; color: var(--ink-500); }
.rail .navbtn.sub.active { border-left-color: var(--accent-500); background: transparent; color: var(--accent-700); }
.rail .navbtn.sub.more { color: var(--ink-500); font-size: 12.5px; }
/* An invitation in the Consults list: the chat's title, and a small tag. */
.rail .navbtn.sub.invite-sub .label { flex: 1; }
.rail .navbtn.sub .sub-tag { flex: none; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--warning-100); color: var(--warning-600); }
.rail .navbtn.sub.more:hover { color: var(--accent-700); }
/* The magnifier beside gSage, Casebooks and Consults: shows on hover. */
.rail .navbtn .nav-find { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--ink-500); opacity: 0; transition: opacity var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.rail .navbtn .nav-find svg { width: 15px; height: 15px; color: inherit; }
.rail .navbtn:hover .nav-find, .rail .navbtn .nav-find:focus-visible { opacity: 1; }
.rail .navbtn .nav-find:hover { background: rgba(60, 50, 30, 0.10); color: var(--ink-900); }
.rail .navbtn .nav-find:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.rail .navbtn .nav-find + .count { margin-left: 4px; }
.rail-collapsed .rail .nav-find { display: none; }
/* The search box it lands on lights up for a moment. */
@keyframes findflash { 0%, 40% { box-shadow: 0 0 0 4px var(--accent-200), 0 0 0 1px var(--accent-500); border-color: var(--accent-500); background-color: var(--accent-50); } 100% { box-shadow: 0 0 0 4px transparent; } }
.find-flash { animation: findflash 1.8s ease-out both; }
.rail .navbtn .count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--warning-600); color: var(--white); font-size: 12px; line-height: 20px; font-weight: 600;
  display: grid; place-items: center; flex: none;
}
/* A worded count: "8 tasks", "2 waiting". Calm for work assigned to you,
   the warning colour only for a run stopped on your answer. */
.rail .navbtn .count.worded { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; padding: 0 8px; font-weight: 500; }
.rail .navbtn .count.worded b { font-weight: 700; }
.rail .navbtn .count.worded.calm { background: var(--accent-50); color: var(--accent-700); box-shadow: inset 0 0 0 1px var(--accent-100); }
.rail .navbtn .count.worded.urgent { background: var(--warning-600); color: var(--white); }
/* Hover notes (calloutTips in app.js): every title in the UI is drawn as
   this callout, never as the browser's tooltip. Beside the rail it opens
   to the right with a pointer. */
.callout.tip { pointer-events: none; z-index: 120; }
.callout.tip.side::before { content: ""; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; background: var(--cream-50); border-left: 1px solid var(--cream-border); border-bottom: 1px solid var(--cream-border); transform: translateY(-50%) rotate(45deg); border-radius: 0 0 0 2px; }
/* The account sits at the foot of the rail whatever is above it. */
.rail .foot { margin: auto calc(-1 * var(--space-3)) 0; padding: var(--space-2) var(--space-3) 0; border-top: 1px solid var(--cream-border); display: flex; align-items: center; gap: 8px; color: var(--ink-500); font-size: 14px; }
.rail .foot .who { flex: 1; min-width: 0; color: var(--ink-900); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .foot .rail-av { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #7C47CD; color: var(--white); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
/* With a chosen colour the rail avatar is that colour, white initials. */
.rail .foot .rail-av[class*=" c-"] { background: var(--c); }
.rail .foot .iconbtn.sq { width: 32px; height: 32px; color: var(--ink-600); }
.rail .foot .iconbtn.sq:hover { background: var(--cream-300); color: var(--ink-900); }
.rail .foot .rail-account { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 4px 6px; margin-left: -6px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; text-align: left; }
.rail .foot .rail-account:hover, .rail .foot .rail-account.active { background: var(--cream-300); }
.rail-collapsed .rail .foot .rail-account { flex: none; margin: 0; }
.rail-collapsed .rail .foot .rail-account .count { display: none; }
/* Still on the default password: an amber dot on the avatar. */
.rail .foot .rail-av { position: relative; }
.rail .foot .rail-av.warn::after { content: ""; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--warning-600); box-shadow: 0 0 0 2px var(--cream-100, var(--white)); }

/* Account page (D102). */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); align-items: stretch; margin-bottom: var(--space-4); }
/* Profile spans the page; inside it, two columns that fold to one when
   the pane is narrow. */
.acct-profile { margin-bottom: var(--space-4); }
.acct-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-3) var(--space-6); }
.acct-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.acct-grid .acct-actions { margin-top: auto; }
.acct-card { display: flex; flex-direction: column; gap: 10px; }
.acct-card h3 { margin: 0; }
.acct-card p { margin: 0 0 4px; }
.acct-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acct-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ink-700); min-width: 0; }
/* Something new for you: one card in the bottom corner, for a moment, that
   answers or opens it. Frosted and see-through. Waiting on the doctor reads
   as a faded amber wash over cream, with a thin amber edge drawn by ::before
   (a border would hide the glass). The full list is the notification center. */
.wait-notice { --tint: linear-gradient(160deg, rgba(255, 243, 232, 0.82) 0%, rgba(250, 248, 244, 0.72) 45%, rgba(250, 248, 244, 0.66) 100%);
  --tint-back: linear-gradient(160deg, rgba(255, 243, 232, 0.55) 0%, rgba(250, 248, 244, 0.45) 45%);
  --edge: linear-gradient(135deg, rgba(240, 200, 160, 0.70) 0%, rgba(232, 227, 217, 0.90) 55%, var(--cream-border) 100%);
  --eyebrow: color-mix(in srgb, var(--warning-600) 60%, var(--ink-600));
  position: fixed; right: 24px; bottom: 24px; z-index: 90; width: min(420px, calc(100vw - 32px)); padding: 14px 16px 12px;
  border-radius: 14px; background: var(--tint); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur);
  box-shadow: var(--shadow-lg), var(--shadow-sm); }
.wait-notice::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--edge); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* Finished: a pale brand-blue wash over cream with the brand-gradient edge.
   Failed: the amber card's red counterpart. */
.wait-notice.done { --tint: linear-gradient(160deg, rgba(236, 239, 254, 0.82) 0%, rgba(250, 248, 244, 0.72) 45%, rgba(250, 248, 244, 0.66) 100%);
  --tint-back: linear-gradient(160deg, rgba(236, 239, 254, 0.55) 0%, rgba(250, 248, 244, 0.45) 45%);
  --edge: linear-gradient(105deg, rgba(117, 141, 250, 0.40) 0%, rgba(107, 180, 247, 0.35) 48%, rgba(117, 231, 239, 0.40) 100%);
  --eyebrow: color-mix(in srgb, var(--accent-600) 60%, var(--ink-600)); }
.wait-notice.failed { --tint: linear-gradient(160deg, rgba(255, 237, 235, 0.82) 0%, rgba(250, 248, 244, 0.72) 45%, rgba(250, 248, 244, 0.66) 100%);
  --tint-back: linear-gradient(160deg, rgba(255, 237, 235, 0.55) 0%, rgba(250, 248, 244, 0.45) 45%);
  --edge: linear-gradient(135deg, rgba(235, 180, 175, 0.70) 0%, rgba(232, 227, 217, 0.90) 55%, var(--cream-border) 100%);
  --eyebrow: color-mix(in srgb, var(--danger-600) 60%, var(--ink-600)); }
.wait-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--eyebrow); }
.wait-eyebrow .iconbtn { margin: -4px -8px -4px auto; }
.wait-head { font: 600 16px var(--font-display); color: var(--text-strong); margin: 4px 0 2px; }
.wait-what { font-size: 13px; color: var(--text-muted); }
.wait-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.wait-notice .btn, .wait-notice .iconbtn, .wait-notice .iconbtn:hover { border-color: transparent; }
.wait-actions .btn:not(.primary) { background: rgba(60, 50, 30, 0.06); }
.wait-actions .btn:not(.primary):hover { background: rgba(60, 50, 30, 0.11); }
/* The card pops up from below: it rises, fades in, overshoots a touch and
   settles. Closing, or timing out, it slides back down. */
@keyframes wait-pop {
  0% { opacity: 0; translate: 0 44px; scale: .92; }
  60% { opacity: 1; translate: 0 -4px; scale: 1.015; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
.wait-notice.enter { transform-origin: 50% 100%; animation: wait-pop 520ms cubic-bezier(.2, .9, .3, 1.1) backwards; }
@keyframes wait-drop { to { opacity: 0; translate: 0 40px; } }
.wait-notice.leaving { pointer-events: none; animation: wait-drop 300ms cubic-bezier(.4, 0, 1, 1) forwards; }
/* The bell beside sign-out: filled, in the waiting amber, with the number
   unread on its shoulder, while something is unread. */
.bell { position: relative; }
.rail .foot .bell.has { color: var(--warning-600); }
.bell.has .fp-off { display: none; }
.bell.has .fp-on { display: inline; }
.bell-n { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--warning-600); color: var(--white); font: 600 10.5px/16px var(--font-body); text-align: center;
  box-shadow: 0 0 0 2px var(--white); pointer-events: none; }
/* The notification center: a slide-over from the right, the same island
   as gSage's panel, listing everything that needs you. */
.notice-host { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.notice-host.open { pointer-events: auto; }
.notice-host .scrim { position: absolute; inset: 0; background: rgba(17, 19, 21, 0.32); backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur); opacity: 0; transition: opacity var(--dur-base); }
.notice-host.open .scrim { opacity: 1; }
.notice-host .panel {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: 460px; max-width: calc(100vw - 24px);
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateX(40px) scale(0.985);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.notice-host.open .panel { transform: none; opacity: 1; }
.notice-head { height: 64px; flex: none; padding: 0 var(--space-5); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-subtle); }
.notice-head h2 { margin: 0; font: 600 18px var(--font-display); color: var(--text-strong); }
.notice-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.notice-sec { display: flex; flex-direction: column; gap: 8px; }
.notice-sec h3 { margin: 0 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
/* A row is the corner card's words laid flat: eyebrow, patient, what it
   asks, then its buttons. Unread rows carry the kind's wash and a dot. */
.notice-row { --wash: transparent; --dot: var(--warning-600); --eyebrow: var(--text-muted);
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px;
  background: var(--white); border: 1px solid var(--border-subtle); }
.notice-row.unread { background: linear-gradient(160deg, var(--wash) 0%, var(--white) 70%); border-color: color-mix(in srgb, var(--dot) 30%, var(--border-subtle)); }
.notice-row.waiting, .notice-row.invite, .notice-row.mention { --wash: rgba(255, 243, 232, 0.9); --eyebrow: color-mix(in srgb, var(--warning-600) 60%, var(--ink-600)); }
.notice-row.done { --wash: rgba(236, 239, 254, 0.9); --dot: var(--accent-600); --eyebrow: color-mix(in srgb, var(--accent-600) 60%, var(--ink-600)); }
.notice-row.failed { --wash: rgba(255, 237, 235, 0.9); --dot: var(--danger-600); --eyebrow: color-mix(in srgb, var(--danger-600) 60%, var(--ink-600)); }
.notice-row.invite, .notice-row.mention { --dot: var(--accent-600); --eyebrow: color-mix(in srgb, var(--accent-600) 60%, var(--ink-600)); }
.notice-eyebrow { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--eyebrow); }
.notice-eyebrow > span:not(.grow, .sep, .notice-dot, .notice-when) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.notice-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.notice-when { flex: none; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-subtle); }
.notice-who { font: 600 15px var(--font-display); color: var(--text-strong); }
.notice-what { font-size: 13.5px; line-height: 1.45; color: var(--text-body); }
.notice-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.notice-actions .btn.ghost { color: var(--text-muted); }
.notice-actions .btn.ghost:hover { color: var(--accent-700); }
.notice-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 24px; text-align: center; color: var(--text-muted); }
.notice-empty svg { width: 28px; height: 28px; color: var(--success-600); }
.notice-empty > div { font: 600 16px var(--font-display); color: var(--text-strong); }
.notice-empty p { margin: 0; max-width: 300px; }
/* gSage pointing at a run in an answer ([[open-run:ID]], D147). */
.run-chip { vertical-align: middle; margin: 0 2px; }
.run-chip svg { width: 14px; height: 14px; }
@keyframes run-flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--accent-300); } }
.msg.run.flash { animation: run-flash 1200ms var(--ease-out); border-radius: 12px; }
/* The casebook's Pre-authorization button while a step waits on the doctor. */
.tbtn.preauth { position: relative; }
.tbtn.preauth.waiting::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--warning-600); box-shadow: 0 0 0 2px var(--white); }
.acct-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.acct-field input { height: 36px; }
/* Password boxes styled like every other input, with an eye inside. The
   global input rule only covers text and search. */
/* Read by screen readers, not shown: the placeholder and icon name the field. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pw-wrap { position: relative; }
/* A Fluent icon inside the box, before the text. */
.in-icon { position: relative; }
/* An icon nothing sizes is text-sized rather than filling its box. */
:where(svg.fluent) { width: 1em; height: 1em; }
.in-icon > svg.fluent { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--ink-500); pointer-events: none; }
.in-icon > input { width: 100%; padding-left: 34px !important; }
.in-icon:focus-within > svg.fluent { color: var(--accent-600); }
.acct-field input[type=password], .acct-field input.pw-input, .acct-field input[type=email] {
  width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--white); outline: none; color: var(--text-strong); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.acct-field input.pw-input { padding-right: 42px; letter-spacing: 0.04em; }
.acct-field input[type=password]:focus-visible, .acct-field input.pw-input:focus-visible, .acct-field input[type=email]:focus-visible {
  border-color: var(--accent-600); box-shadow: var(--ring-focus); }
.pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-400); cursor: pointer; }
.pw-eye:hover, .pw-eye.on { background: var(--cream-200); color: var(--ink-800); }
.pw-eye svg { width: 16px; height: 16px; }
.acct-field input.ro { background: var(--cream-100); color: var(--text-subtle); cursor: default; }
.acct-actions { display: flex; justify-content: flex-end; margin-top: 2px; }
.acct-warn { display: flex; gap: 10px; align-items: center; padding: 12px 16px; margin-bottom: var(--space-5); border-radius: var(--radius-md); background: var(--warning-100); color: var(--warning-600); font-size: 14px; }
.acct-warn svg { width: 18px; height: 18px; flex: none; }
.acct-wide { grid-column: 1 / -1; }
/* The wide cards sit under the grid, one after another, with the grid's
   gap between them. */
.page .card.acct-wide + .card.acct-wide, .page .acct-grid + .card.acct-wide { margin-top: var(--space-4); }
.mem-card .mem-lists { padding-bottom: 4px; }
.users-list { max-height: 360px; overflow: auto; }
/* What gSage remembers about you: two lists of one-liners. */
/* Every account card opens the same way: glyph, title, one action right. */
.acct-head { display: flex; align-items: center; gap: 8px; }
.acct-head > svg { width: 18px; height: 18px; flex: none; color: var(--ink-500); }
.acct-head h3 { margin: 0; }
.mem-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 24px; margin-top: 8px; }
.mem-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mem-group .overline { margin-bottom: 4px; }
.mem-line { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--radius-xs); min-width: 0; }
.mem-line:hover { background: var(--surface-faint); }
.mem-line > svg { width: 14px; height: 14px; flex: none; color: var(--ink-500); }
.mem-line .mem-text { flex: 1; min-width: 0; font-size: 13px; color: var(--text-strong); overflow-wrap: anywhere; }
.mem-line .mem-when { flex: none; display: inline-flex; align-items: baseline; gap: 6px; margin-left: 12px; font-size: 11.5px; color: var(--text-subtle); white-space: nowrap; }
.mem-line .mem-from { display: inline-flex; align-items: baseline; gap: 4px; color: var(--text-subtle); text-decoration: none; }
.mem-line .mem-from::before { content: "\00b7"; margin-right: 2px; }
.mem-line .mem-from:hover { color: var(--accent-700); text-decoration: underline; }
.mem-line .mem-from span { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* Console (superuser): the platform at a glance. Shares the usage pieces. */
.con-body { display: flex; flex-direction: column; gap: var(--space-4); }
/* The tiles share one row: as many columns as tiles, each as narrow as
   150px, and only below that do they wrap to two rows of equal halves. */
.con-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.con-stats:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.con-stats:has(> :nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .con-stats:has(> :nth-child(5):last-child), .con-stats:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.con-stats .card.stat { padding: 12px 14px; }
.con-stats .card.stat .num { font-size: 24px; }
.con-grid { display: grid; gap: var(--space-4); }
.con-grid.two { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
/* Four charts as two by two, never three and one. */
.con-grid.pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .con-grid.pairs { grid-template-columns: minmax(0, 1fr); } }
.con-empty { display: grid; place-items: center; height: 100%; margin: 0; }
/* Feedback drill-down: one block per rating, worst first. */
.fb-list { display: flex; flex-direction: column; gap: 8px; }
.fb-item { padding: 10px 12px; border: 1px solid var(--border-soft); border-left-width: 3px; border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.fb-item.helpful { border-left-color: var(--success-600); }
.fb-item.not_helpful { border-left-color: var(--warning-600); }
.fb-item.inappropriate { border-left-color: var(--danger-600); }
.fb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-head > svg { width: 16px; height: 16px; color: var(--ink-600); flex: none; }
.fb-comment { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; background: var(--surface-faint); border-radius: var(--radius-xs); color: var(--text-strong); }
.fb-comment > svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--ink-500); }
.fb-q, .fb-a { display: grid; grid-template-columns: 90px 1fr; gap: 10px; color: var(--ink-700); }
.fb-q .overline, .fb-a .overline { padding-top: 2px; }
.fb-a span:last-child { color: var(--text-subtle); }
.con-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; }
.con-chart { min-width: 0; }
.con-scroll { overflow-x: auto; min-width: 0; max-width: 100%; }
.con-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.con-table th { text-align: left; font-weight: 500; color: var(--text-subtle); padding: 2px 8px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.con-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.con-table tbody tr:hover td { background: var(--surface-faint); }
.con-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.con-table code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-700); }
.con-table .badge { font-size: 11.5px; }
.con-table td:first-child { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.con-acts { display: inline-flex; gap: 6px; }
.con-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 14px; }
.con-service { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-xs); }
.con-service.bad { background: var(--danger-200); }
.con-service-name { font-weight: 500; }
.con-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink-400); }
.con-dot.ok { background: var(--success-600); }
.con-dot.warn { background: var(--warning-600); }
.con-dot.bad { background: var(--danger-600); }
.con-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.con-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-xs); cursor: pointer; font-size: 13.5px; }
.con-item:hover { background: var(--surface-faint); }
.con-item > svg { width: 16px; height: 16px; color: var(--ink-500); flex: none; }

/* Usage (D140): totals, the stacked chart, a key, and where it went. */
.usage-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.usage-controls .seg button { padding: 4px 11px; font-size: 13px; }
.usage-body { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.usage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.usage-stat { padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-faint); min-width: 0; }
.usage-stat-value { font-size: 22px; font-weight: 600; color: var(--text-strong); letter-spacing: -.01em; line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; }
.usage-stat-sub { font-size: 11.5px; color: var(--text-subtle); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-chart { height: 260px; min-width: 0; }
.usage-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.usage-key { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--white); font: inherit; font-size: 13px; color: var(--text-strong); cursor: pointer; }
.usage-key:hover { background: var(--surface-faint); }
.usage-key.off { color: var(--text-subtle); }
.usage-key.off .usage-swatch { opacity: .3; }
.usage-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.usage-key.static { cursor: default; }
.usage-key.static:hover { background: var(--white); }
.usage-swatch.dash { width: 14px; height: 0; border-radius: 0; border-top: 2px dotted var(--ink-900); }
.usage-uses .overline { margin-bottom: 6px; }
.usage-table { width: 100%; max-width: 640px; border-collapse: collapse; font-size: 13px; }
.usage-table th { text-align: left; font-weight: 500; color: var(--text-subtle); padding: 2px 8px 6px; border-bottom: 1px solid var(--border); }
.usage-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-soft); }
.usage-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table th { position: sticky; top: 0; background: var(--white); text-align: left; font-weight: 500; color: var(--text-subtle); padding: 2px 8px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.users-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.users-table tr.muted td { color: var(--text-subtle); }
.users-act { text-align: right; width: 1%; }
.users-table tr .users-act .btn { visibility: hidden; }
.users-table tr:hover .users-act .btn, .users-table tr:focus-within .users-act .btn { visibility: visible; }
.users-add { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.users-add h4 { margin: 0; font-size: 14px; font-weight: 600; }
/* The labels are screen-reader only, so every box and the button share one
   line: centred, and no flex gap left over from the hidden label. */
.users-row { display: grid; grid-template-columns: 1.1fr 1.2fr 1.5fr 1.2fr 0.8fr auto; gap: 10px; align-items: center; }
.users-row .acct-field { gap: 0; margin: 0; }
.users-row .btn { height: 36px; }
@media (max-width: 1100px) { .users-row { grid-template-columns: 1fr 1fr; } .users-row .btn { justify-self: start; } }
.acct-field select { width: 100%; height: 36px; padding: 0 12px; font-size: 14px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--white); color: var(--text-strong); }

/* The top bar floats: no row of its own. The title and the buttons are two
   acrylic pills over the page, which scrolls underneath them. --bar is the
   room each page leaves at its top. */
.main { --bar: 16px; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--wash-soft); }
/* Only a bar with something in it costs the page room at the top. Most
   pages put nothing there, and used to reserve the band regardless. */
.main:has(> .topbar .actions > *) { --bar: 72px; }
.topbar {
  position: absolute; z-index: 30; top: 12px; left: var(--space-6); right: var(--space-6);
  display: flex; align-items: center; gap: var(--space-5); pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar .actions { border-radius: var(--radius-pill); background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
.topbar .actions:empty { display: none; }
.topbar .actions { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 5px; }
/* Pills inside a pill: a rounded square in a round bar reads as a mistake. */
.topbar .actions .btn { border-color: transparent; background: rgba(255, 255, 255, 0.55); border-radius: var(--radius-pill); padding-left: 14px; padding-right: 14px; }
.topbar .actions .btn:hover { background: rgba(255, 255, 255, 0.9); }
.topbar .actions .btn.primary { background: var(--accent-600); color: var(--white); }
.topbar .actions .btn.primary:hover { background: var(--accent-700); }
/* Semantic colours in the bar: research is cyan (a look-up), archive is
   red on intent (it removes), the run is the one solid blue. */
.topbar .actions .btn.research, .btn.research { color: var(--cyan-600); background: var(--cyan-100); }
.topbar .actions .btn.research:hover, .btn.research:hover { background: color-mix(in srgb, var(--cyan-500) 18%, white); }
.topbar .actions .btn.danger-soft, .btn.danger-soft { color: var(--danger-600); }
.topbar .actions .btn.danger-soft:hover, .btn.danger-soft:hover { background: var(--danger-100); }
.btn svg.fluent { width: 16px; height: 16px; }
.assist-glyph { display: inline-flex; margin-left: 2px; opacity: 0.75; }
.assist-glyph svg { width: 15px; height: 15px; }
/* gSage sits in the bottom corner, on the side its panel opens from, and
   over the page rather than above it. .content already ends in 80px of
   padding, which is the room the pill needs. */
.assist-dock { position: absolute; z-index: 30; right: var(--space-6); bottom: var(--space-6); }
.assist-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--accent-100); background: var(--accent-50); color: var(--accent-700);
  padding: 8px 14px; border-radius: var(--radius-pill); font-weight: 600; font-size: 13.5px; cursor: pointer;
  transition: background var(--dur-fast);
}
.assist-dock .assist-btn { box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
.assist-btn:hover { background: var(--accent-100); }
.spark { width: 15px; height: 15px; }

.content { flex: 1; overflow-y: auto; padding: calc(var(--bar) + var(--space-5)) var(--space-8) 80px; min-height: 0; }
.content > * { animation: rise var(--dur-slow) var(--ease-out) both; }
/* Grids of cards build in one after another, briefly. Past the eighth they
   all arrive together; a stagger that runs for a second is a wait. */
.lib-grid > *, .stack > .card { animation: rise var(--dur-slow) var(--ease-out) both; }
.lib-grid > :nth-child(2), .stack > .card:nth-child(2) { animation-delay: 40ms; }
.lib-grid > :nth-child(3), .stack > .card:nth-child(3) { animation-delay: 80ms; }
.lib-grid > :nth-child(4), .stack > .card:nth-child(4) { animation-delay: 120ms; }
.lib-grid > :nth-child(5), .stack > .card:nth-child(5) { animation-delay: 160ms; }
.lib-grid > :nth-child(6), .stack > .card:nth-child(6) { animation-delay: 200ms; }
.lib-grid > :nth-child(7), .stack > .card:nth-child(7) { animation-delay: 240ms; }
.lib-grid > :nth-child(8), .stack > .card:nth-child(8) { animation-delay: 280ms; }
.page { max-width: 1200px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-head h1 { margin-bottom: 4px; }
.page-head .lead { color: var(--text-muted); font-size: var(--fs-body); }
.page-head .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---- controls ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: var(--white); color: var(--text-strong);
  font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.btn svg { width: 16px; height: 16px; }
/* Secondary button: the edge is what says a control exists, so it is the
   input border (Neutral500, 4.5:1), not the decorative card edge. */
.btn { border-color: var(--border-input); }
.btn:hover { background: var(--surface-hover); }
.btn:active { transform: scale(0.98); background: var(--surface-pressed); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.btn:disabled { color: var(--text-subtle); background: var(--surface-sunken); border-color: var(--cream-border); cursor: not-allowed; }
.btn.primary { background: var(--accent-600); border-color: var(--accent-600); color: var(--white); }
.btn.primary:hover { background: var(--accent-700); border-color: var(--accent-700); }
.btn.primary:active { background: var(--blue-850); }
/* The primary blue as an outline: for a main action that should not shout,
   or a second blue action beside a filled one. */
.btn.outline { background: var(--white); border-color: var(--accent-600); color: var(--accent-700); }
.btn.outline:hover { background: var(--accent-50); border-color: var(--accent-700); color: var(--accent-700); }
.btn.outline:active { background: var(--accent-100); }
.btn.outline:disabled { background: var(--white); border-color: var(--ink-200); color: var(--ink-500); cursor: not-allowed; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-body); }
.btn.ghost:hover { background: var(--accent-50); color: var(--accent-700); }
.btn.danger { color: var(--danger-600); }
.btn.danger:hover { background: var(--danger-100); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn.xs { padding: 3px 8px; font-size: 12px; border-radius: var(--radius-xs); }

.iconbtn {
  width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--text-muted); cursor: pointer; display: grid; place-items: center;
}
.iconbtn svg { width: 18px; height: 18px; display: block; }
/* The hover has to show on cream glass, where --surface-hover is almost
   the same colour: a darker cream with a hairline border. */
.iconbtn:hover { background: rgba(60, 50, 30, .08); border-color: rgba(60, 50, 30, .14); color: var(--text-strong); }
.iconbtn:active { background: rgba(60, 50, 30, .14); }
.iconbtn.danger:hover { background: var(--danger-100); border-color: var(--danger-200); color: var(--danger-600); }
.iconbtn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* The guide icon: where a paragraph of help used to sit, one small mark
   beside the title that opens the same words as a callout. */
.iconbtn.guide { width: 24px; height: 24px; border-radius: 50%; border-color: transparent; color: var(--text-subtle); }
.iconbtn.guide svg { width: 16px; height: 16px; }
.iconbtn.guide:hover { color: var(--accent-700); background: var(--accent-50); border-color: var(--accent-100); }
.card-head .guide, .tab-sub-row .guide { flex: none; }
.tab-sub-row { align-items: center; gap: 6px; margin-top: 8px; }
.tab-sub-row .tab-sub { margin-top: 0; }
.details-lead .guide { flex: none; }
.tl-sort { flex: none; }

input[type=text], input[type=search], textarea, select {
  width: 100%; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--white); outline: none; color: var(--text-strong);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:hover, textarea:hover, select:hover { background: var(--surface-faint); }
input:focus-visible, textarea:focus-visible, select:focus-visible { background: var(--white); border-color: var(--accent-600); box-shadow: var(--ring-focus); }
textarea { resize: vertical; min-height: 72px; line-height: var(--lh-normal); }
label { display: block; font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: 6px; font-weight: 500; }
.field { margin-bottom: var(--space-4); }

/* ---- cards and data ----------------------------------------------------- */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6);
}
.card + .card, .stack > .card { margin-top: 0; }
.card.wash { background: var(--wash-hero); }
.card.glass { background: var(--surface-glass); backdrop-filter: blur(var(--blur-glass)); box-shadow: var(--shadow-sm), var(--sheen-top); }
.card.sunken { background: var(--surface-sunken); border-color: transparent; box-shadow: none; }
.card.acrylic { background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); border-color: transparent; box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
.card.stat { background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); border-color: transparent; box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.card-head h3 { margin: 0; }
.card-head .sub { color: var(--text-subtle); font-size: var(--fs-caption); }
.card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.grid { display: grid; gap: var(--space-4); }
/* A grid item's default min-width is auto, so one wide child (a table, a
   long unbroken string) pushes its column past its share and squeezes the
   next one. The run page's sidebar came out one character per line that
   way. minmax(0, ...) plus min-width on the items lets columns shrink. */
.grid > * { min-width: 0; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* The report column gets the room; the sidebar holds four key-values and a
   fixed 300px is plenty. At 1.6fr/1fr it took 390px and the option cards
   were narrower than the prose in them wanted. */
.grid.report { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
@media (max-width: 1100px) {
  .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Below this the sidebar stops being a sidebar and goes under the report. */
  .grid.report { grid-template-columns: minmax(0, 1fr); }
}

.stat { padding: var(--space-5) var(--space-6); }
.stat .overline { margin-bottom: 10px; }
.stat .num { font-family: var(--font-display); font-size: 36px; font-weight: 600; letter-spacing: var(--ls-tight); line-height: 1; color: var(--text-strong); }
.stat .num.accent { color: var(--accent-500); }
.stat .foot { margin-top: 8px; font-size: var(--fs-caption); color: var(--text-subtle); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500;
  background: var(--cream-200); color: var(--ink-700); border: 1px solid transparent;
}
.badge { white-space: nowrap; max-width: 100%; min-width: 0; }
/* A long label ("few dorsal and lumbar vertebrae, left iliac bone ...") wraps
   inside its pill instead of running out of the card. */
.row.wrap > .badge { white-space: normal; overflow-wrap: anywhere; text-align: left; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge .dot.live { animation: pulse 1.2s infinite; }
/* Status lozenges: {status}.faint fill, {status} text, {status}.subtle edge.
   The text names the status; colour is reinforcement. */
.badge.accent { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-100); }
.badge.success { background: var(--success-200); color: var(--success-600); border-color: var(--success-300); }
.badge.warning { background: var(--warning-200); color: var(--warning-600); border-color: var(--warning-300); }
.badge.danger { background: var(--danger-200); color: var(--danger-600); border-color: var(--danger-300); }
.badge.cyan { background: var(--cyan-100); color: var(--cyan-600); }
.badge.ink { background: var(--ink-800); color: var(--white); }
.tag { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-xs); font-size: 12px; background: var(--cream-200); color: var(--ink-700); font-family: var(--font-mono); }
.tag.click { cursor: pointer; }
.tag.click:hover { background: var(--cream-300); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* Sentence case, per the standards: all-caps hurts screen readers and
   dyslexic readers, and wraps into vertical letters in narrow columns. */
th { text-align: left; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; transition: background var(--dur-fast); }
tr.click:hover td { background: var(--surface-faint); }
td .name { font-weight: 600; color: var(--text-strong); }
td .meta { color: var(--text-subtle); font-size: var(--fs-caption); }
.gene { font-family: var(--font-mono); font-weight: 500; color: var(--text-strong); }

/* The tab row never wraps or scrolls. When it is wider than the pane,
   app.js sets .narrow and a dropdown takes its place. The hidden row keeps
   its layout (no display:none) so its width can still be measured. */
.tabnav { min-width: 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-5); overflow: hidden; }
.tabs button > svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.tabs button.active > svg { opacity: 1; }
/* Inside a pane: its sections down the left, the sections themselves to
   the right. The list sticks while the sections scroll. */
.sectioned { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.secnav { position: sticky; top: calc(var(--bar) - 8px); display: flex; flex-direction: column; gap: 2px; padding-right: var(--space-3); border-right: 1px solid var(--border-subtle); }
.secnav-item { border: 0; background: transparent; padding: 7px 10px; border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-body-sm); font-weight: 500; color: var(--text-muted); text-align: left; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.secnav-item:hover { color: var(--text-strong); background: var(--cream-100); }
.secnav-item.active { color: var(--accent-700); background: var(--accent-50); }
.sectioned > .summary > * { scroll-margin-top: calc(var(--bar) + 8px); }
.wf-section .tab-sub { margin-top: 0; }
@container pane (max-width: 700px) {
  .sectioned { grid-template-columns: minmax(0, 1fr); }
  .secnav { position: static; flex-direction: row; flex-wrap: wrap; border-right: 0; padding: 0 0 var(--space-3); border-bottom: 1px solid var(--border-subtle); }
}
/* Two-shape Fluent icons: outlined, filled on the selected button. */
.fp .fp-on { display: none; }
.active > .fp .fp-off, .active > span > .fp .fp-off { display: none; }
.active > .fp .fp-on, .active > span > .fp .fp-on { display: inline; }
/* The collapsed tab picker names the selected tab, so its icon is filled. */
.tabpick-label > .fp .fp-off { display: none; }
.tabpick-label > .fp .fp-on { display: inline; }
/* Narrow: one full-width button naming the open tab, and a menu of all of
   them with their icons. */
.tabpick-wrap { position: relative; display: none; margin-bottom: var(--space-5); }
.tabnav.narrow .tabs { height: 0; margin: 0; border: 0; visibility: hidden; }
.tabnav.narrow .tabpick-wrap { display: block; }
.tabpick { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1.5px solid var(--accent-300); border-radius: var(--radius-md); background: var(--white); color: var(--accent-700); font: inherit; font-weight: 600; cursor: pointer; }
.tabpick:hover, .tabpick.open { border-color: var(--accent-500); }
.tabpick-label { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.tabpick-label svg { width: 18px; height: 18px; flex: none; }
.tabpick-caret { width: 18px; height: 18px; transform: rotate(90deg); transition: transform var(--dur-fast); }
.tabpick.open .tabpick-caret { transform: rotate(-90deg); }
.tabpick .n, .tabmenu .n { font-size: 12px; background: var(--cream-200); border-radius: var(--radius-pill); padding: 1px 7px; color: var(--ink-700); font-weight: 500; }
.tabmenu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 6px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg, 0 12px 32px rgba(17, 19, 21, .14)); border: 1px solid var(--border-subtle); }
.tabmenu-item { width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 0; background: transparent; border-radius: var(--radius-sm); font: inherit; font-size: 15px; color: var(--text-muted); cursor: pointer; text-align: left; }
.tabmenu-item svg { width: 20px; height: 20px; flex: none; }
.tabmenu-item:hover { background: var(--surface-hover); color: var(--text-strong); }
.tabmenu-item.active { color: var(--accent-700); background: var(--accent-50); }
.tabs button {
  border: 0; background: transparent; padding: 10px 14px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; flex: none;
}
.tabs button:hover { color: var(--text-strong); }
.tabs button.active { color: var(--accent-600); border-bottom-color: var(--accent-500); }
.tabs .n { font-size: 12px; background: var(--cream-200); border-radius: var(--radius-pill); padding: 1px 7px; color: var(--ink-700); }
/* Runs waiting on you: a slow amber-to-grey pulse. Stops under reduced motion (the rule at the top). */
.tabs .n.alert { animation: waitpulse 2.4s ease-in-out infinite; }
@keyframes waitpulse {
  0%, 100% { background: var(--warning-200); color: var(--warning-600); }
  50% { background: var(--cream-200); color: var(--ink-700); }
}
/* An approved output on the Workflows tab: a clipped preview that fades
   out, and the whole thing when asked. */
.wf-out .card-head { flex-wrap: nowrap; }
.wf-out .card-head h3 { flex: 1 1 auto; min-width: 0; }
.wf-out .card-head .right { flex: none; white-space: nowrap; }
.wf-out-body { position: relative; }
.wf-out-body.clipped { max-height: 150px; overflow: hidden; }
.wf-out-body.clipped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white)); }
.wf-out-toggle .caret, .wf-out-toggle svg { transition: transform var(--dur-fast); }
.wf-out-toggle.open svg { transform: rotate(-90deg); }
.wf-out-toggle:not(.open) svg { transform: rotate(90deg); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; font-size: 14px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; color: var(--text-strong); word-break: break-word; }
/* Label over value, for values that are sentences. */
.kv.stacked { display: block; }
.kv.stacked dt { font-size: 12px; font-weight: 500; text-transform: capitalize; }
.kv.stacked dd { margin: 2px 0 12px; line-height: 1.45; }
.kv.stacked dd:last-child { margin-bottom: 0; }
.json { background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 12px 14px; max-height: 460px; overflow: auto; font-size: 12.5px; color: var(--ink-700); }

/* A fold: a line with a chevron, and when open, its body indented under
   it behind a hairline, so the eye sees what the line contains. */
details.fold summary { cursor: pointer; color: var(--text-muted); font-size: var(--fs-body-sm); list-style: none; display: flex; align-items: center; gap: 6px; }
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary::before { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-fast); }
details.fold[open] summary::before { transform: rotate(45deg); }
details.fold[open] summary { margin-bottom: 8px; }
details.fold[open] > :not(summary) { margin-left: 3px; padding-left: 14px; border-left: 2px solid var(--cream-200); }
details.fold[open] > :not(summary) + :not(summary) { margin-top: 0; }
details.fold[open] > .fold { padding-top: 2px; }

.progress { height: 6px; border-radius: 3px; background: var(--cream-200); overflow: hidden; }
.progress > div { height: 100%; background: var(--brand-gradient); transition: width var(--dur-slow); }
/* Work in progress: the filled part carries a band of light that sweeps
   across it, so a build that is between files still reads as moving. */
.progress.live > div { background: linear-gradient(90deg, var(--accent-500) 0%, var(--accent-400) 35%, var(--accent-300) 50%, var(--accent-400) 65%, var(--accent-500) 100%); background-size: 200% 100%; animation: sweep 1.6s linear infinite; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--accent-200); border-top-color: var(--accent-600); animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
/* The card for a casebook under construction stands out from the record
   cards around it: accent border, a soft accent wash. */
.build-card { margin-top: 16px; border: 1px solid var(--accent-300); background: linear-gradient(180deg, var(--accent-50), var(--white)); box-shadow: 0 0 0 3px rgba(47, 86, 230, 0.08); }
.build-card .card-head { gap: 10px; align-items: center; }
.build-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 7px; border-radius: var(--radius-pill); background: var(--accent-50); color: var(--accent-700); font-size: 12px; font-weight: 600; border: 1px solid var(--accent-200); }
.build-chip .spin { width: 11px; height: 11px; border-width: 2px; }
tr.building td { background: rgba(47, 86, 230, 0.04); }
tr.building td:first-child { box-shadow: inset 3px 0 0 var(--accent-500); }

.empty { text-align: center; padding: 72px 24px; color: var(--text-muted); }
.empty h2 { font-weight: 500; margin-bottom: 8px; }
.empty .sub { max-width: 46ch; margin: 0 auto 20px; }

.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; border-left: 1px dotted var(--ink-300); }
.tl { position: relative; padding-bottom: 14px; }
.tl .dot { position: absolute; left: -19px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink-300); }
.tl .dot.accent { border-color: var(--accent-500); }
.tl .dot.success { border-color: var(--success-500); }
.tl .dot.warning { border-color: var(--warning-500); }
.tl .when { font-size: var(--fs-caption); color: var(--text-subtle); font-family: var(--font-mono); }
.tl .what { font-size: 14px; color: var(--text-strong); }
.tl .sub { font-size: var(--fs-body-sm); color: var(--text-muted); }

.conflict-log td, .conflict-log th { vertical-align: top; }
.conflict-log .value { font-family: var(--font-mono); font-size: 12.5px; }
.fork-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.fork-panel { margin-top: 12px; }
.fork-diff td, .fork-diff th { vertical-align: top; font-size: 13px; }
.fork-diff .fork-val { color: var(--accent-700); font-weight: 500; }
.badge.clickable { cursor: pointer; }
.badge.clickable .sep { width: 10px; height: 10px; margin-left: 2px; opacity: 0.6; transform: rotate(90deg); }
.pinned-note { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; background: var(--warning-100); border-color: var(--warning-300); color: var(--warning-600); font-size: 14px; }
.card + .card.pinned-note { margin-top: 12px; }
.pinned-note > svg { flex: none; width: 16px; height: 16px; }
.pinned-note span { flex: 1; }
.pinned-note strong { color: var(--warning-600); }
/* Full timeline tab */
.tl-full .tl-month { position: relative; margin: 6px 0 10px -20px; padding-left: 20px; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-strong); }
.tl-full .tl-month::before { content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 2px; background: var(--ink-300); }
.tl-full .tl { padding-bottom: 12px; }
.tl-full .tl-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.tl-full .tl-head .when { min-width: 2ch; font-size: 12px; }
.tl-full .tl-tag { font-size: 12px; color: var(--text-subtle); background: var(--surface-faint); border: 1px solid var(--border-subtle); padding: 0 6px; border-radius: 10px; }
.tl-full .tl-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.tl-full .tl-foot .small svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.tl-full .tl.is-record .what { color: var(--text-muted); font-size: 13px; }
.tl-full .dot.record { border-color: var(--ink-400); background: var(--ink-400); width: 8px; height: 8px; left: -18px; top: 6px; }
.chip.on { background: var(--accent-50); border-color: var(--accent-300); color: var(--accent-700); }
.chip .n { margin-left: 5px; font-size: var(--fs-case-micro); opacity: 0.7; }

/* ---- casebook cards ----------------------------------------------------- */
/* Every card the height of the tallest, footer on the bottom edge. */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.pcards .pcard-foot { margin-top: auto; }
.pgroup + .pgroup { margin-top: 20px; }
.pgroup .doc-group-head { padding: 0 2px 8px; }
.pcard { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--border-subtle, var(--cream-border)); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.pcard:hover { border-color: var(--accent-300); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
/* A card keeps the cream; its cancer's colour sits on the avatar as a ring
   with a white gap, like a story ring, around a gradient of the same hue
   that differs per patient. The chip carries the organ and the colour. */
.pcard.has-cancer { background:
    radial-gradient(90% 90% at 100% 100%, var(--cream-200) 0%, rgba(242, 239, 232, 0) 70%),
    #FFFFFF; }
.avatar.cancer-ring { background: linear-gradient(var(--av-angle), var(--av-from), var(--av-to)); color: color-mix(in srgb, var(--cancer) 70%, #000); }
.pcard-head .avatar.cancer-ring { margin: 2px; background: linear-gradient(var(--av-angle), var(--av-from), var(--av-to)); color: color-mix(in srgb, var(--cancer) 70%, #000); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--cancer); }
.badge.cancer { display: inline-flex; align-items: center; gap: 2px; padding-left: 4px; background: rgba(255, 255, 255, 0.7); color: var(--cancer); box-shadow: inset 0 0 0 1px rgba(var(--cancer-rgb), 0.25); }
.badge.cancer svg { width: 15px; height: 15px; color: var(--cancer); }
/* The colour guide in the help callout: a clinic per block, its cancers
   under it as smaller dots in the clinic's shades. */
.colour-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin-top: 10px; font-size: 12px; }
.cg-group { min-width: 0; }
.cg-head { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-strong); margin-bottom: 2px; }
.cg-head > svg.organ { width: 18px; height: 18px; color: var(--cancer); }
/* An organ icon (Health Icons, 48px grid) at the size of its neighbours. */
svg.organ { width: 18px; height: 18px; flex: none; color: var(--cancer, currentColor); }
.pick-row .pick-lead { display: inline-flex; flex: none; margin-right: 10px; }
.pick-row .pick-lead svg.organ { width: 22px; height: 22px; }
.cg-members { display: flex; flex-wrap: wrap; gap: 2px 10px; padding-left: 16px; color: var(--text-muted); }
.cg-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--cancer); box-shadow: 0 0 0 2px rgba(var(--pastel-rgb), 0.6); }
.cg-dot.sm { width: 7px; height: 7px; box-shadow: none; }
.callout.wide.guide { max-width: 640px; }
.pcard:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* Nothing on a card is cut off. The name and the MRN line wrap; the cancer
   badge sits beside them when there is room and drops under when not; the
   diagnosis runs to two lines; chips wrap onto the next row. */
.pcard-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.pcard-head .avatar { flex: none; }
.pcard-head .grow { flex: 1 1 140px; }
.pcard-head .name { font-weight: 600; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.pcard-head .meta { font-size: var(--fs-case-note); color: var(--text-muted, var(--ink-500)); line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; }
.pcard-head .badge { flex: none; margin-top: 2px; }
.pcard-dx { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-800); min-height: 20px; line-height: 1.35; }
.pcard-dx > span:first-child { flex: 1 1 160px; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pstage { flex: none; font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--cream-100); color: var(--ink-700); }
/* Performance status, the same chip on a card and in the header. */
.ecog { flex: none; display: inline-flex; align-items: baseline; gap: 3px; font-size: 12px; padding: 1px 7px; border-radius: var(--radius-xs); background: var(--cream-100); color: var(--ink-700); white-space: nowrap; }
.ecog b { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); }
.hero .meta .ecog { font-size: 13px; vertical-align: 1px; }
.pflags { display: flex; flex-wrap: wrap; gap: 6px; }
.pflag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--cream-100); color: var(--ink-700); }
.pflag svg { width: 12px; height: 12px; }
.pflag.warn { background: var(--warning-100); color: var(--warning-600); }
.pflag.review { background: var(--accent-50); color: var(--accent-700); }
.pflag.build { background: var(--accent-50); color: var(--accent-700); }
.pflag .spin { width: 10px; height: 10px; }
/* A red dot: someone named you with @ in this chat and you have not opened
   it since. The same dot as the default-password one on the avatar. */
.mention-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger-600, #D32F2F); flex: none; box-shadow: 0 0 0 2px var(--white); }
.convo .title { display: flex; align-items: center; gap: 6px; }
.convo .title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .navbtn .mention-dot { margin-left: auto; }
/* Archived casebooks and chats: one list in a dialog. */
.arch-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; margin: 12px 0; }
.arch-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--cream-border); border-radius: var(--radius-md); background: var(--white); }
.arch-row .grow { min-width: 0; }
.arch-row .t { font-weight: 500; color: var(--text-strong); }
.arch-row .d { font-size: 12px; color: var(--ink-500); }
.modal.arch { width: min(720px, calc(100vw - 40px)); }
.arch-tabs { display: inline-flex; gap: 2px; padding: 3px; margin-top: 12px; border-radius: 10px; background: var(--cream-100); }
.arch-tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink-700); cursor: pointer; }
.arch-tab svg { width: 16px; height: 16px; }
.arch-tab.on { background: var(--white); color: var(--ink-900); box-shadow: var(--shadow-xs); }
.pcard-foot { display: flex; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px solid var(--cream-border-soft, var(--cream-border)); font-size: 12px; color: var(--ink-500); }

/* ---- casebook hero ----------------------------------------------------- */

/* Two rows: who this is, with the tools for the record on the right, then
   the facts as tiles. The tools used to hold a row of their own above the
   name, and on a record column narrowed by the gSage pane the back button
   fell out of it onto a third line. The header cost 373px, 41% of the
   window, before anything about the patient was read. */
.hero { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-radius: var(--radius-xl); }
.backbtn { display: inline-flex; align-items: center; height: 36px; min-width: 36px; padding: 0 9px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--white); color: var(--ink-800); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); }
.backbtn svg { width: 16px; height: 16px; flex: none; }
.backbtn-label { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width var(--dur-base) var(--ease-out), opacity var(--dur-fast), margin var(--dur-base); }
.backbtn:hover, .backbtn:focus-visible { border-color: var(--accent-300); background: var(--accent-50); color: var(--accent-700); padding-right: 14px; }
.backbtn:hover .backbtn-label, .backbtn:focus-visible .backbtn-label { max-width: 240px; opacity: 1; margin-left: 6px; }
.backbtn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hero-top { display: flex; align-items: center; gap: var(--space-4); row-gap: 10px; flex-wrap: wrap; }
/* The toolbar takes its natural width and wraps whole rather than being
   squeezed to share the row, where it broke over two lines; on a line of
   its own it fits in one. max-width keeps it inside the line on a column
   narrower than the tools themselves, where it wraps inside itself rather
   than overflowing the card. */
.hero-top > .toolbar { margin-left: auto; flex: 0 0 auto; max-width: 100%; }
.hero-id { flex: 1 1 200px; min-width: 0; }
.hero-name { display: flex; align-items: center; gap: 6px; }
.hero-name .iconbtn { color: var(--text-muted); }
/* Version history rows: the number, what made it, and a way to read it. */
.vh-item { padding: 0; }
.vh-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.vh-changes { padding: 0 14px 12px 60px; }
.vh-diff { display: flex; flex-direction: column; gap: 8px; }
.vh-diff > p { margin: 0; }
.vh-group { display: flex; flex-direction: column; gap: 3px; }
.vh-change { display: grid; grid-template-columns: minmax(0, 2fr) 64px minmax(0, 3fr); align-items: baseline; gap: 10px; font-size: 13px; line-height: 1.45; padding: 2px 0; }
.vh-change .badge { justify-self: start; }
.vh-value { min-width: 0; overflow-wrap: anywhere; }
@container (max-width: 520px) { .vh-change { grid-template-columns: 1fr; gap: 2px; } }
.vh-field { font-weight: 500; color: var(--text-strong); min-width: 0; overflow-wrap: anywhere; }
.vh-before { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--ink-300); overflow-wrap: anywhere; }
.vh-arrow { color: var(--text-subtle); }
.vh-after { color: var(--ink-900); overflow-wrap: anywhere; }
.vh-change .badge { padding: 0 6px; font-size: 10.5px; line-height: 16px; }
.card.vh-reading { margin-bottom: 12px; }
.arch-list .arch-sub { margin: 14px 0 4px; }
.arch-list .arch-fold { margin-top: 12px; }
.arch-list .arch-fold > summary { margin-bottom: 4px; }
.vh-reading .card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.vh-reading .card-head h3 { margin: 0; }
.vh-num { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 34px; color: var(--text-muted); }
.hero .name { overflow-wrap: anywhere; }
/* The casebook toolbar: one white strip of flat tool buttons. A tool shows
   its hover as a soft fill; the main action is blue text; groups are split
   by a thin divider. */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--white); border: 1px solid var(--cream-border); }
.tbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-size: var(--fs-body-sm); font-weight: 500; color: var(--ink-800); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast); }
.tbtn svg { width: 16px; height: 16px; flex: none; }
.tbtn:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink-900); }
.tbtn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.tbtn:disabled { color: var(--ink-300); cursor: default; }
.tbtn.primary { color: var(--accent-600); }
.tbtn.primary:hover { background: var(--accent-50); color: var(--accent-700); }
.tbtn.icon { width: 32px; padding: 0; justify-content: center; color: var(--ink-600); }
.tbtn.danger:hover { background: var(--danger-100); color: var(--danger-600); }
.tbtn.tversion { font-variant-numeric: tabular-nums; }
.tbtn.tversion .tchev { width: 12px; height: 12px; transform: rotate(90deg); color: var(--ink-500); }
.tbtn.tversion.past { color: var(--warning-700, var(--warning-600)); background: var(--warning-50, #FFF7E6); }
.tsep { width: 1px; height: 18px; margin: 0 2px; background: var(--cream-border); }
.toolbar .badge { margin: 0 4px; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-600); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; gap: 6px; }
.linkbtn.warn { color: var(--warning-600); }
.linkbtn svg { width: 14px; height: 14px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--avatar-0); color: var(--blue-850); box-shadow: inset 0 0 0 1px rgba(47, 86, 230, .08); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 18px; flex: none; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.t1 { background: var(--avatar-1); } .avatar.t2 { background: var(--avatar-2); } .avatar.t3 { background: var(--avatar-3); }
.avatar.t4 { background: var(--avatar-4); } .avatar.t5 { background: var(--avatar-5); }
/* A chosen colour (c-*) on either avatar: the pale fill, the strong shade
   as the text and as --c for anything drawn in the person's colour. */
.c-blue { --c: var(--c-blue); --c-fill: var(--c-blue-fill); }
.c-teal { --c: var(--c-teal); --c-fill: var(--c-teal-fill); }
.c-green { --c: var(--c-green); --c-fill: var(--c-green-fill); }
.c-amber { --c: var(--c-amber); --c-fill: var(--c-amber-fill); }
.c-orange { --c: var(--c-orange); --c-fill: var(--c-orange-fill); }
.c-rose { --c: var(--c-rose); --c-fill: var(--c-rose-fill); }
.c-violet { --c: var(--c-violet); --c-fill: var(--c-violet-fill); }
.c-slate { --c: var(--c-slate); --c-fill: var(--c-slate-fill); }
.avatar[class*=" c-"], .bd-av[class*=" c-"] { background: var(--c-fill); color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent); }
.acct-color .acct-label { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.acct-swatches { display: inline-flex; gap: 6px; }
.acct-color { display: grid; gap: 6px; }
.acct-swatch { width: 22px; height: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--c); cursor: pointer; transition: transform var(--dur-fast); }
.acct-swatch:hover { transform: scale(1.12); }
.acct-swatch.on { border-color: var(--c); box-shadow: inset 0 0 0 2px var(--white); }
.acct-swatch:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hero .name { font-size: 22px; }
.hero .avatar { width: 40px; height: 40px; font-size: 14px; }
.hero .meta { color: var(--text-muted); margin-top: 4px; }
.hero .meta strong { color: var(--text-strong); font-weight: 600; }
/* The patient header (.ph): one card in three bands. Cream on top with
   who this is; a thin white strip of tools; then a white bento of cells,
   the patient's facts on one row and the record's state on the next,
   divided by hairlines. Each row is a wrapping flex line whose cells grow
   to fill it, so a narrow pane re-flows the cells instead of leaving
   holes; the hairlines are each cell's own right and bottom edge, and
   the row clips the outer ones. */
/* The whole card is one wash: the login page's cream-to-white fade with
   its two brand orbs. The top band, the tool strip and the bento all sit
   on it. */
.hero.ph { padding: 0; gap: 0; overflow: hidden; border: 1px solid var(--cream-border); background: var(--wash-hero); }
/* With a cancer the card is cream, not the cancer's colour: that is the
   avatar's ring (D136). The cream is a mesh of warm neutrals (sand, peach,
   ivory, champagne, stone), each a soft orb at its own spot and size over
   a white-to-cream base, so the card has depth without a hue. */
.hero.ph.has-cancer { background:
    radial-gradient(38% 70% at 8% 12%, rgba(255, 253, 248, 0.95) 0%, rgba(255, 253, 248, 0) 70%),
    radial-gradient(34% 90% at 34% 108%, rgba(239, 224, 201, 0.55) 0%, rgba(239, 224, 201, 0) 72%),
    radial-gradient(30% 80% at 58% -8%, rgba(246, 230, 214, 0.60) 0%, rgba(246, 230, 214, 0) 70%),
    radial-gradient(28% 70% at 76% 62%, rgba(243, 233, 214, 0.70) 0%, rgba(243, 233, 214, 0) 72%),
    radial-gradient(42% 110% at 102% 104%, rgba(232, 223, 208, 0.85) 0%, rgba(232, 223, 208, 0) 70%),
    radial-gradient(26% 60% at 96% 6%, rgba(250, 240, 228, 0.75) 0%, rgba(250, 240, 228, 0) 70%),
    linear-gradient(135deg, #FFFFFF 0%, var(--cream-50) 45%, var(--cream-100) 100%); }
.ph-top { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: transparent; }
/* The header's shape while the record is read (page.ts heroSkeleton):
   the same card, quiet bars where the facts go, the name shimmering. It
   fades in late enough that a quick open never shows it. */
.ph-skeleton { animation: fadein var(--dur-base) ease-out 160ms both; }
.ph-skeleton .sk-av { background: var(--cream-200); box-shadow: none; }
.ph-skeleton .name { color: var(--text-muted); font-weight: 500; }
.sk-bar { display: inline-block; height: 10px; border-radius: 5px; background: var(--cream-200); }
.ph-skeleton .sk-row { gap: 24px; padding: 16px var(--space-4); align-items: center; }
/* The casebook page's parts arrive one after another (page.ts settle),
   so the page itself does not rise as one block on top of that. */
.content > .page:has(.hero.ph) { animation: none; }
.tabs-block { margin-top: 20px; }
.ph-top .avatar.cancer-ring { margin: 3px; box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--cancer); }
/* The specialist's row: the facts this cancer's clinic reads first. */
.ph-cell.cancer .ph-k { color: var(--cancer); }
.ph-cell.cancer .ph-k::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--cancer); vertical-align: 1px; }
.ph .avatar { width: 56px; height: 56px; font-size: 18px; }
.ph .name { font-size: 26px; line-height: 1.15; }
.ph .meta { margin-top: 4px; font-size: var(--fs-body-sm); color: var(--text-muted); }
/* The tool strip and the bento are one frosted sheet laid on the mesh:
   the strip is its top edge, the bento its body. Both are mostly
   see-through; the blur is what makes them read as glass. */
.toolbar.ph-tools { margin: 0 var(--space-3); border: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; padding: 5px var(--space-3); background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 1px 0 0 rgba(255, 255, 255, 0.6), inset -1px 0 0 rgba(255, 255, 255, 0.6); }
.ph-tools > .grow { flex: 1 1 0; }
/* Glass tools on the wash: a frosted pane that lifts on hover with a glow
   along its bottom edge, the way Vista's taskbar buttons lit from below.
   The glow is the cancer's colour when the card has one, the brand blue
   when it does not. The main action carries a faint glass at rest. */
/* Tools on the glass strip: flat, as everywhere else in the app. The
   hover is a soft white fill; the main action is the brand blue. */
.ph-tools .tbtn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.72); color: var(--ink-900); }
.ph-tools .tbtn.primary:hover { background: rgba(255, 255, 255, 0.72); color: var(--accent-700); }
.ph-tools .tsep { background: rgba(17, 19, 21, 0.10); }
/* The right of the top band: the record's state as badges, and the one
   button that holds everything one can do with it (and its waiting dot). */
.ph-right { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; align-self: flex-start; }
/* Both are one glass button: same height, corners, fill and hover. */
.ph-right .badge.ph-version, .tbtn.ph-menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.45); color: var(--ink-800); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; }
.ph-right .badge.ph-version:hover, .tbtn.ph-menu-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.85); color: var(--ink-900); }
.ph-right .badge.ph-version:focus-visible, .tbtn.ph-menu-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.ph-right .badge.ph-version { font-variant-numeric: tabular-nums; }
.ph-right .badge.ph-version svg, .tbtn.ph-menu-btn svg { width: 16px; height: 16px; }
.ph-right .badge.ph-version .tchev { width: 12px; height: 12px; transform: rotate(90deg); color: var(--ink-500); }
.ph-right .badge.ph-version.past { color: var(--warning-700, var(--warning-600)); background: var(--warning-50, #FFF7E6); }
.tbtn.ph-menu-btn { width: 36px; padding: 0; }
.tbtn.ph-wrap-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.45); color: var(--ink-800); cursor: pointer; }
.tbtn.ph-wrap-btn:hover { background: rgba(255, 255, 255, 0.85); color: var(--ink-900); }
.tbtn.ph-wrap-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.tbtn.ph-wrap-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.9); color: var(--accent-700); border-color: var(--accent-200, rgba(255, 255, 255, 0.7)); }
.tbtn.ph-wrap-btn svg { width: 16px; height: 16px; }
.tbtn.ph-menu-btn.waiting::after { top: 4px; right: 4px; }
/* The cascading menu: cream acrylic, the same glass as the callouts and
   modals. One pane per level; a child pane sits to the right of the row
   that opened it. */
.phm-pane { position: fixed; z-index: 1200; min-width: 280px; max-width: 360px; padding: 6px; border-radius: var(--radius-md); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--acrylic-light-strong); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 16px 40px rgba(17, 19, 21, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--acrylic-edge); animation: rise var(--dur-base) var(--ease-out) both; }
.phm-item:hover:not(:disabled), .phm-item:focus-visible, .phm-item.open { background: rgba(255, 255, 255, 0.78); }
.phm-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-strong); font: inherit; text-align: left; cursor: pointer; }
.phm-item:hover:not(:disabled), .phm-item:focus-visible, .phm-item.open { background: rgba(255, 255, 255, 0.72); outline: none; }
.phm-item:disabled { color: var(--text-subtle); cursor: default; }
.phm-item.primary .phm-label, .phm-item.primary .phm-ic { color: var(--accent-700); }
.phm-ic { display: inline-flex; flex: none; margin-top: 2px; color: var(--text-muted); }
.phm-ic svg { width: 16px; height: 16px; }
.phm-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.phm-label { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.phm-detail { font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.phm-item:disabled .phm-detail { color: var(--text-subtle); }
.phm-caret { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--text-subtle); }
/* A heading between groups of rows; empty, it is a rule. */
.phm-sep { margin: 6px 4px 2px; padding-top: 6px; border-top: 1px solid var(--cream-border); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); font-weight: 600; }
.phm-sep:empty { padding-top: 0; margin-bottom: 4px; }
.phm-item.warn .phm-label, .phm-item.warn .phm-ic { color: var(--warning-600); }
.phm-item.ok .phm-label, .phm-item.ok .phm-ic { color: var(--success-600); }
.phm-item.danger .phm-label, .phm-item.danger .phm-ic { color: var(--danger-600); }
.phm-item.danger:hover:not(:disabled) { background: var(--danger-100); }
/* The bento is glass: a frosted white over the mesh, so the pastels show
   through and the cells still read as a table. Hairlines are white on
   the mesh, not grey, so they sit in the glass rather than on it. */
.ph-bento { display: flex; flex-direction: column; margin: 0 var(--space-3) var(--space-3); border-radius: 0 0 var(--radius-md) var(--radius-md); overflow: hidden;
  background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.6), inset -1px 0 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(17, 19, 21, 0.04); }
/* Without a toolbar above (a fork, a pinned version) the bento is the
   whole sheet and keeps all four corners. */
.ph-tools + .ph-bento { border-top: 1px solid rgba(255, 255, 255, 0.85); }
.ph-row { display: flex; flex-wrap: wrap; overflow: hidden; }
.ph-row + .ph-row { border-top: 1px solid rgba(255, 255, 255, 0.85); }
/* The patient's facts and the cancer's own are one line that scrolls
   sideways rather than wrapping: a second line was mostly empty. The
   scrollbar is hidden; chevrons at either end show while there is more
   that way. Cells keep a natural width and grow to fill a short line. */
.ph-strip { position: relative; display: flex; align-items: stretch; min-width: 0; }
.ph-strip > .ph-row.ph-facts { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
.ph-strip > .ph-row.ph-facts::-webkit-scrollbar { display: none; }
.ph-strip .ph-cell { flex: 1 0 auto; min-width: 120px; max-width: 320px; scroll-snap-align: start; }
.ph-strip .ph-cell.wide { flex: 2 0 auto; min-width: 200px; max-width: 420px; }
/* Wrapped: the row breaks onto as many lines as it needs and the card
   grows; cells share each line rather than keep their one-line widths. */
.ph-strip.wrapped > .ph-row.ph-facts { flex-wrap: wrap; overflow: hidden; scroll-snap-type: none; }
.ph-strip.wrapped .ph-cell { flex: 1 1 160px; max-width: none; }
.ph-strip.wrapped .ph-cell.wide { flex: 2 1 240px; max-width: none; }
.ph-chev { position: absolute; top: 0; bottom: 0; z-index: 2; width: 28px; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; color: var(--ink-700);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0)); }
.ph-chev.left { left: 0; }
.ph-chev.right { right: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0)); }
.ph-chev svg { width: 14px; height: 14px; }
.ph-chev.left svg { transform: rotate(180deg); }
.ph-chev:hover { color: var(--accent-700); }
.ph-chev[hidden] { display: none; }
.ph-cell { flex: 1 1 120px; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 9px var(--space-3); margin: 0 -1px -1px 0; border: 0; border-right: 1px solid rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.85); background: transparent; font: inherit; text-align: left; color: inherit; text-decoration: none; transition: background var(--dur-fast); }
.has-cancer .ph-cell { box-shadow: inset -1px -1px 0 rgba(var(--cancer-rgb), 0.05); }
.ph-cell.wide { flex: 2 1 200px; }
/* A counter is a word and a number. It starts narrow and grows, so a
   wrapped line of counters fills its row rather than leaving a hole on
   the right. */
.ph-cell.count { flex: 1 1 96px; }
/* The record's state is the housekeeping row: smaller and tighter than
   the clinical rows above it, which keep the room. */
.ph-row.ph-status .ph-cell { padding: 6px var(--space-3); gap: 1px; }
.ph-row.ph-status .ph-v { font-size: 13px; }
.ph-row.ph-status .ph-cell.wide .ph-v { -webkit-line-clamp: 1; }
/* The note cell takes what the counters leave; the counters start at a
   width that lets seven of them share a line with it at 900px, and grow
   to fill whatever line they land on. */
.ph-row.ph-status .ph-cell.wide { flex: 2 1 220px; }
.ph-row.ph-status .ph-cell.count { flex: 1 1 84px; }
/* A record is read by comparing numbers down a column -- PSA against
   PSA, a date against a date -- and proportional figures put them out of
   line with each other. Tabular figures cost nothing in prose and make
   the columns true. */
.ph-v, .ph-d, .mtile-v, .mtile-d, .dval, .sval, .sfacts dd { font-variant-numeric: tabular-nums; }
.ph-k { font-size: var(--fs-case-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A value may run to two lines before it is cut, so a regimen or a
   change note reads whole in most panes. */
.ph-v { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; align-items: center; gap: 5px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-strong); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; }
.ph-v > svg { vertical-align: -2px; margin-right: 4px; }
.ph-cell.count .ph-v { display: flex; white-space: nowrap; }
.ph-cell.wide .ph-v { font-weight: 500; }
.ph-d { font-size: var(--fs-case-micro); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ph-v .ribbon { margin-right: 3px; }
.ph-v .ribbon svg { width: 20px; height: 20px; }
.ph-v svg { width: 14px; height: 14px; flex: none; }
button.ph-cell, a.ph-cell { cursor: pointer; transition: background var(--dur-fast); }
button.ph-cell:hover, a.ph-cell:hover { background: rgba(255, 255, 255, 0.6); }
button.ph-cell:focus-visible, a.ph-cell:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-600); }
.ph-cell.warn .ph-v { color: var(--warning-600); }
.ph-cell.ok .ph-v { color: var(--success-600); }
.ph-cell.accent .ph-v, .ph-cell.link .ph-v { color: var(--accent-700); }
.ph-cell.edit .ph-v svg { color: var(--text-subtle); opacity: 0; transition: opacity var(--dur-fast); }
.ph-cell.edit:hover .ph-v svg, .ph-cell.edit.empty .ph-v svg { opacity: 1; }
.ph-cell.edit.empty .ph-v { color: var(--accent-600); font-weight: 500; }
@container pane (max-width: 760px) {
  .ph-top { padding: var(--space-4); }
  .ph .avatar { width: 44px; height: 44px; font-size: 15px; }
  .ph .name { font-size: 22px; }
  .ph-cell { flex-basis: 100px; padding: 8px 12px; }
}
/* The key markers panel: what this specialist reads first. A tile with no
   value is kept and dimmed, because a marker the disease always asks for
   and the record does not answer is itself the finding. */
/* The cancer's mark beside its name: a small filled dot in its colour,
   the same dot the specialist row's labels carry. Colour reinforces a
   label that is always there; it never carries the meaning alone. */
.marker-sub { display: inline-flex; align-items: center; gap: 6px; }
.ribbon { display: inline-flex; flex: none; }
.ribbon svg { width: 17px; height: 17px; }
/* One class for every cancer; the colour is the row's, set as --cancer on
   the ribbon itself or inherited from the header card (D136). */
.ribbon-cancer svg { color: var(--cancer, var(--text-subtle)); }
.marker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mtile { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 7px 10px; border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--cream-border-soft, var(--border-subtle)); }
/* No uppercase: Ki-67, p40 and NKX3.1 are names, and their case means
   something. */
/* A result, drawn for what it says.
   Presence is inked and carries a filled dot; absence is quiet and
   carries a hollow one. Neither is red or green, because positive is not
   good news and negative is not bad news -- ER positive is the
   favourable finding and ER negative the worse one, while node positive
   is the other way round. The two that are judged are the two whose
   words mean one thing everywhere: a result that did not answer, which
   someone has to act on, and a pathogenic variant.
   casebook/result.ts has the whole of the reasoning. */
.res { font-weight: 600; }
.res::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.res-detected { color: var(--text-strong); }
.res-detected::before { background: var(--ink-700); }
.res-absent { color: var(--text-muted); font-weight: 500; }
.res-absent::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-400); }
.res-unresolved { color: var(--warning-600); }
.res-unresolved::before { background: var(--warning-500, var(--warning-600)); }
.res-harmful { color: var(--danger-600); }
.res-harmful::before { background: var(--danger-600); }
.res-benign { color: var(--text-muted); font-weight: 500; }
.res-benign::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-300); }
/* On a tile the value is already the loud thing; the dot would crowd it. */
.mtile-v.res::before, .mtile-d.res::before { width: 5px; height: 5px; margin-right: 5px; }
.mtile-d.res { font-weight: 600; }
.mtile-k { font-size: var(--fs-case-micro); letter-spacing: .03em; font-weight: 600; color: var(--text-subtle); white-space: nowrap; }
.mtile-v { font-size: var(--fs-case-value); font-weight: 600; color: var(--text-strong); line-height: 1.25; overflow-wrap: anywhere; }
.mtile-d { font-size: var(--fs-case-micro); color: var(--text-muted); }
.mtile.gap { border-style: dashed; background: transparent; }
.mtile.gap .mtile-v { color: var(--text-subtle); font-weight: 400; }
.mtile.gene { border-color: var(--accent-100); background: var(--accent-50); }
.mtile.gene .mtile-v { color: var(--accent-700); font-family: var(--font-mono); font-size: 13px; }

/* The Key highlights grid (D133): a bento of tiles, four across, where a
   written line or a diagnosis takes two columns. The pen in the block's
   header opens the ask in a note: the sentence, then the grid it made,
   built whole with its written tiles answered, then Cancel or Pin this
   view. It is the only typed thing on
   the Summary tab and it changes what is shown, never the record. */
/* The title and the buttons share the first row; the cancer line is the
   second, the card's full width, wrapping as text. Folded, both stay. */
.hl-block .sblock-head { align-items: center; flex-wrap: wrap; row-gap: 2px; }
.hl-block .sblock-head h3 { flex: none; order: 1; }
.hl-block .sblock-head .hl-head-acts { flex: none; order: 2; }
.hl-block .sblock-head .sub { order: 3; flex: 1 0 100%; min-width: 0; }
.hl-block .sblock-head .marker-sub { display: inline; line-height: 1.5; }
.hl-block .sblock-head .marker-sub .ribbon { display: inline-flex; vertical-align: -3px; margin-right: 4px; }
.hl-block .sblock-head .marker-sub .linkbtn { display: inline; text-align: left; white-space: normal; }
/* The Design layout button at the right of the block's header. Reset to
   the key biomarkers lives in the note it opens. */
.hl-head-acts { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
/* The Design layout button opens the ask; lit while its note is open. */
.hl-design { color: var(--accent-700); }
.hl-design.on { background: var(--accent-50); border-color: var(--accent-300); }
.callout.wide.hl-note { max-width: none; padding: 14px 16px; z-index: 80; }
.hl-ask { display: flex; flex-direction: column; gap: 10px; }
.hl-ask-in { width: 100%; resize: vertical; min-height: 44px; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--white); font: inherit; font-size: 12.5px; line-height: 1.4; color: var(--text-strong); outline: none; }
.hl-ask-in:focus { border-color: var(--accent-300, var(--accent-400)); box-shadow: 0 0 0 3px var(--accent-50); }
.hl-ask-in::placeholder { color: var(--text-subtle); }
.hl-ask-acts { align-items: center; gap: 6px; }
.hl-ask-acts .btn svg { width: 14px; height: 14px; }
.hl-go .hl-go-idle, .hl-go .hl-go-busy { display: inline-flex; }
.hl-go .hl-go-busy { display: none; }
.hl-ask.busy .hl-go .hl-go-idle { display: none; }
.hl-ask.busy .hl-go .hl-go-busy { display: inline-flex; }
.hl-ask.busy .hl-go .hl-go-busy svg { animation: hl-spin 1s linear infinite; }
.hl-status { margin: 0; }
.hl-status.warn { color: var(--warning-700, #8a5a00); }
.hl-made { max-height: 46vh; overflow: auto; padding: 8px; border-radius: var(--radius-sm); background: var(--cream-50, rgba(60, 50, 30, 0.025)); border: 1px dashed var(--cream-border); }

@keyframes hl-spin { to { transform: rotate(360deg); } }
/* The grid fits as many 150px columns as the block has room for, from
   one on a phone to six on a wide record, and packs tiles into any gap
   left by a two-column tile. A two-column tile needs two columns to
   exist; it drops to one when the grid is one column wide. */
.hl-grid { --kt-min: 140px; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--kt-min), 1fr)); grid-auto-flow: dense; align-items: stretch; gap: 8px; container-type: inline-size; }
.kt { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; min-height: 58px; padding: 8px 11px; border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--cream-border-soft, var(--border-subtle)); }
.kt.w2 { grid-column: span 2; }
@container (max-width: 340px) { .kt.w2 { grid-column: span 1; } }
/* A value is clamped to two lines, a label and a detail to one; what is
   cut shows itself whole in a callout on hover (data-note-clipped). Two
   lines keep a row's tiles level with each other: a long diagnosis no
   longer stretches its neighbours. */
.kt .mtile-v { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kt .mtile-k { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.kt .mtile-kt { overflow: hidden; text-overflow: ellipsis; }
.kt .mtile-d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt .mtile-k svg { width: 12px; height: 12px; color: var(--accent-600); flex: none; }
.kt.gap { border-style: dashed; background: transparent; }
.kt.gap .mtile-v { color: var(--text-subtle); font-weight: 400; }
.kt.gene { border-color: var(--accent-100); background: var(--accent-50); }
.kt.gene .mtile-v { color: var(--accent-700); font-family: var(--font-mono); font-size: 13px; }
.kt.synth { background: linear-gradient(135deg, var(--accent-50), var(--white) 70%); border-color: var(--accent-100); }
.kt.synth .mtile-v { font-weight: 500; font-size: 13px; }
.kt.pending .mtile-v { color: var(--text-subtle); font-weight: 400; font-style: italic; animation: hl-pulse 1.6s ease-in-out infinite; }
@keyframes hl-pulse { 50% { opacity: .45; } }
.kt .mtile-d.warn { color: var(--warning-700, #8a5a00); display: inline-flex; align-items: center; gap: 3px; }
/* Where a written line came from: one chip per record entry the writer
   cited. A click opens Details at that entry. */
.kt-cites { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.kt-cite { font: inherit; font-size: 10.5px; line-height: 1.3; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--accent-100); background: var(--white); color: var(--accent-700); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-cite:hover { background: var(--accent-50); border-color: var(--accent-300); }
.hl-ask-head { align-items: center; justify-content: space-between; gap: 16px; }
/* How full the grid is: a stepped slider with its word beside it. The
   track fills up to the thumb (--fill, set from the value). */
.hl-density { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.hl-density-word { min-width: 64px; font-size: 12px; font-weight: 600; color: var(--accent-700); text-align: right; }
/* The general input rules give every input a hover and focus background,
   which would wipe out the track; the slider keeps its own in all states. */
.hl-density-in, .hl-density-in:hover, .hl-density-in:focus-visible, .hl-density-in:disabled { --fill: 0%; -webkit-appearance: none; appearance: none; width: 140px; height: 4px; margin: 0; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, var(--accent-600) var(--fill), var(--cream-border) var(--fill)); }
.hl-density-in::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--accent-600); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.hl-density-in::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 2px solid var(--accent-600); }
.hl-density-in:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hl-density-in:disabled { cursor: progress; opacity: .6; }
.kt .mtile-d.warn svg { width: 12px; height: 12px; }
@container pane (max-width: 760px) {
  .hl-grid { --kt-min: 130px; }
}

/* ---- the page responds to its own width, not the window's ---------
   The same record renders full width, in the case page's left half,
   and beside an open or collapsed rail. A media query on the window
   cannot tell those apart, so .content is a size container and these
   rules read its width. */
.content { container-type: inline-size; container-name: pane; }
@container pane (max-width: 760px) {
  .grid.report { grid-template-columns: minmax(0, 1fr); }
  .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding: var(--space-5); gap: var(--space-4); }
  .hero .name { font-size: 22px; }
  .page-head { flex-wrap: wrap; }
  .page-head .actions { margin-left: 0; }
}
@container pane (max-width: 520px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: minmax(0, 1fr); }
  .hero .avatar { display: none; }
  .tabs button { padding: 10px; font-size: 13.5px; }
}
/* A table wider than its card scrolls inside the card, not the page. */
.card:has(> table) { overflow-x: auto; }

/* ---- casebook summary --------------------------------------------------- */

.summary { display: flex; flex-direction: column; gap: var(--space-4); }
/* What needs you (casebook/attention.ts): a card of cards between the
   tabs and the Summary. Each card is a soft wash in its kind's colour
   (amber a run waiting, red the flags, slate the gaps) with one action.
   Shown on the Summary tab only. */
.attention-slot:empty, .attention-slot.off { display: none; }
.attention-slot { margin-bottom: var(--space-5); }
.attention { padding: 16px 18px 18px; }
.attention-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.attention-head h3 { margin: 0; font-size: 15px; }
/* A row that wraps: each run's card takes a column, and the flags and
   the gaps share one, stacked, splitting its height. Every card's action
   sits on its bottom edge, so the buttons on a line meet. The row is a
   flex wrap and not a grid so that each line's height is its own: a line
   of short cards does not stretch to the tallest question above it. */
.attention-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.attention-row > * { flex: 1 1 260px; min-width: 0; }
.att-stack { display: flex; flex-direction: column; gap: 12px; }
.att-stack > .att-card { flex: 1 1 0; }
/* With no run waiting the two short cards share the line side by side. */
.att-stack:only-child { flex-direction: row; flex-wrap: wrap; }
.att-stack:only-child > .att-card { flex: 1 1 260px; }
.att-card { --att: var(--ink-500); --att-wash: var(--cream-50); --att-edge: var(--border-subtle);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 14px 16px; border-radius: 12px;
  background: var(--att-wash); border: 1px solid var(--att-edge); }
.att-card > .btn, .att-card > .linkbtn { margin-top: auto; }
.att-card.att-waiting { --att: var(--warning-600); --att-wash: var(--warning-100); --att-edge: rgba(239, 107, 26, 0.25); }
.att-card.att-flags { --att: var(--danger-600); --att-wash: var(--danger-100); --att-edge: rgba(211, 47, 47, 0.18); }
.att-card.att-gaps { --att: var(--ink-600); --att-wash: rgba(240, 241, 246, 0.8); --att-edge: var(--border-subtle); }
.att-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--att); }
.att-eyebrow .sep { font-weight: 400; }
.att-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--att); }
.att-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-strong); }
.att-text strong { font-weight: 600; }
.att-card > .att-text, .att-card > .att-chips { margin-bottom: 4px; }
.att-card .linkbtn { font-size: 13.5px; font-weight: 500; text-decoration: none; }
.att-card .linkbtn:hover { text-decoration: underline; }
.att-card .linkbtn svg { width: 14px; height: 14px; }
.att-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.att-chip { font-size: 12.5px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--border-subtle); color: var(--ink-700); white-space: nowrap; }
.att-chip.more { color: var(--text-muted); }
/* Latest findings: the report on the left, the timeline on the right. */
.sfind { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.sfind > .sites { min-width: 0; }
@container pane (max-width: 900px) { .sfind { grid-template-columns: 1fr; } }
.sblock { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: 10px; }
.sblock-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sblock-head .sblock-open { flex: none; margin: -4px -6px -4px 0; color: var(--text-subtle); }
.sblock-head .sblock-open:hover { color: var(--accent-600); }
.sblock-head .sblock-open .fluent { width: 16px; height: 16px; }
.runs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.sblock-head .view-seg { align-self: center; }
/* Every landing card wears an icon before its title. */
.sblock-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--brand-gradient-soft); color: var(--accent-700); flex: none; }
.sblock-ic svg { width: 15px; height: 15px; }
/* A card whose lists are tabs: the bar replaces the head; the view switch
   sits at its right end; the body keeps the card's padding. */
.sblock.tabbed { padding: 0; gap: 0; overflow: hidden; }
.sblock-tabs.tabs { margin: 0; padding: 4px 10px 0; gap: 0; align-items: center; flex-wrap: wrap; background: var(--cream-50, rgba(60, 50, 30, 0.025)); overflow: visible; }
.sblock-tabs.tabs button { padding: 10px 10px; font-size: 13px; }
.sblock-tabs.tabs button > svg { width: 15px; height: 15px; }
.sblock-tabs .view-seg { margin: 0 2px 4px 0; }
.sblock-tab-body { display: flex; flex-direction: column; gap: 10px; padding: var(--space-4) var(--space-5) var(--space-5); min-height: 180px; }
.sblock-tab-body > .btn.xs { align-self: flex-start; }
.casepage .card-head h3, .casepage .sblock-head h3 { font-size: var(--fs-case-title); }
/* A card says its name once, in the display face, above the text it
   heads. It used to be 13px of tracked upper case in a muted grey --
   louder in treatment than a heading needs to be, and smaller than the
   14px it introduced, which reads as a label for the card rather than
   the title of it. */
.sblock-head h3 { margin: 0; font-size: var(--fs-case-title); font-weight: 600; color: var(--text-strong); }
.sblock-head .sub { color: var(--text-subtle); font-size: var(--fs-case-note); }
/* A folded card: the first part shows, faded at the bottom, with Show more under it. */
.sblock-clip { position: relative; }
.sblock-clip.clipped { max-height: 200px; overflow: hidden; }
.sblock-clip.clipped.over::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white)); }
.sblock-more { align-self: flex-start; }
.sblock-more svg { transform: rotate(90deg); transition: transform var(--dur-fast); }
.sblock-more.open svg { transform: rotate(-90deg); }
.sblock-more[hidden] { display: none; }
.sblock-prose { margin: 0; line-height: 1.55; color: var(--text-strong); }
/* A flags card folds from its header like a Details section. Folded, the
   card is its header alone: no gap, no fade, no Show more. */
.sblock.dsection { margin-bottom: 0; }
.sblock.dsection.folded { gap: 0; }
.sblock.dsection .dsection-body > div > .sblock-clip { margin-top: 10px; }
.sblock.dsection .sblock-more { margin-top: 10px; }
.sblock-head .guide { margin-left: -4px; }
.sfacts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
.sfacts dt { color: var(--text-muted); }
.sfacts dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
.sites { display: flex; flex-direction: column; gap: 6px; }
.chip.static { cursor: default; }
.srep-file { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); min-width: 0; }
.srep-file svg { width: 14px; height: 14px; flex: none; }
.srep-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srep-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-body-sm); }
.srep-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.srep-list .slabel { color: var(--text-muted); }
.srep-list .sval { color: var(--text-strong); font-weight: 500; overflow-wrap: anywhere; }
/* Latest on the timeline: date, a kind dot, the event, its kind. */
.slatest .swhen { font-variant-numeric: tabular-nums; flex: none; }
.slatest li { flex-wrap: nowrap; align-items: flex-start; }
.slatest .sval { flex: 1; min-width: 0; }
.slatest .dot { position: static; width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; border: 2px solid var(--ink-400); background: var(--white); }
.slatest .dot.accent { border-color: var(--accent-500); }
.slatest .dot.success { border-color: var(--success-500); }
.slatest .dot.warning { border-color: var(--warning-500); }
.slatest .btn { margin-top: 8px; align-self: flex-start; }
.sflag-row { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
/* The oldest stale inputs and the button share one column, the button
   under the list, so it never sits alone on a wrapped line. */
.sflag-side { flex: 1 1 260px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.more-chip { cursor: pointer; border: 1px dashed var(--cream-border); background: transparent; color: var(--ink-600); font: inherit; font-size: 12px; }
.more-chip:hover { border-color: var(--accent-300); color: var(--accent-700); }
.sflag-row .btn { margin-left: auto; }
.sflags { display: flex; flex-wrap: wrap; gap: 8px; }
.sflag { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--white); font: inherit; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.sflag-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-case-title); font-weight: 600; color: var(--text-strong); }
.sflag.warn { border-color: var(--warning-300); background: var(--warning-100); }
.sflag.warn .sflag-n { color: var(--warning-600); }
.sflag.danger { border-color: var(--danger-300); background: var(--danger-100, var(--danger-200)); }
.sflag.danger .sflag-n { color: var(--danger-600); }
.sflag.zero .sflag-n { color: var(--ink-300); }
.sflag-list { margin: 0; padding-left: 18px; font-size: 13px; }
.sblock > .btn.xs { align-self: flex-start; }
.sopts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sopts li { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--white); }
/* One option is a fold: the line is the summary, the reasoning the body. */
.sopt > summary { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.sopt > summary .sopt-name { flex: 1 1 200px; }
.sopt > summary > .caret { order: 1; margin-left: 4px; }
.sopt > summary > .tag { order: 0; }
.sopt > summary > .sopt-cite { order: 2; }
.sopt > summary::-webkit-details-marker { display: none; }
.sopt > summary .caret, .sopt-more > summary .caret { width: 14px; height: 14px; flex: none; color: var(--text-subtle); transition: transform var(--dur-fast); }
.sopt[open] > summary .caret, .sopt-more[open] > summary .caret { transform: rotate(90deg); }
.sopt-body { display: flex; flex-direction: column; gap: 8px; padding: 2px 12px 12px 44px; font-size: 13.5px; }
.sopt-fact .overline { display: block; margin-bottom: 1px; }
.sopt-more > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 13px; color: var(--text-muted); }
.sopt-more > summary::-webkit-details-marker { display: none; }
.sopt-more .sopt-body { padding: 10px 0 0; }
.sopt-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--ink-800); color: var(--white); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.sopt-cite { display: inline-flex; align-items: flex-start; gap: 5px; font-size: 12.5px; color: var(--accent-700); flex: 1 1 100%; padding-left: 32px; }
.sopt-cite svg { margin-top: 3px; }
.sopt-cite svg { width: 13px; height: 13px; flex: none; }
/* Option fields are rendered markdown; keep them inline-sized, not prose. */
.sopts .md p, .sblock > .md p { margin: 0; }
.sopt-name { font-weight: 600; color: var(--text-strong); min-width: 0; }
.sopt-line { font-size: 13px; color: var(--text-muted); }
.warn-text { color: var(--warning-600); }
.flag-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.flag-rows li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.flag-rows li:last-child { border-bottom: 0; }
.flag-rows .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tab-sub { margin: 8px 2px 0; font-size: 14px; color: var(--text-muted); }

/* ---- casebook details: the record as cards ------------------------------ */

.details-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.details-bar input[type=search] { max-width: 280px; }
.details-lead { margin: 0 0 10px; gap: 12px; align-items: baseline; }
.details-lead p { margin: 0; }
/* The section pills stay at the top of the pane as it scrolls, under the
   floating top bar. Once stuck they sit on cream glass so the cards
   passing underneath do not show through. */
/* Sticky top counts from inside the pane's top padding, which differs by
   layout (the pane leaves room for the floating bar only when gSage is
   hidden). Both land the strip just under the floating buttons. */
.djumps { position: sticky; top: calc(64px - var(--space-5)); z-index: 4; display: flex; justify-content: center; margin: 0 0 14px; pointer-events: none; }
/* The island spans the pane, so it keeps one width whichever view is on.
   Cream acrylic: a strong blur of what passes underneath, tinted cream.
   The pills under the top line wrap into two even lines (balanced in
   detailsTab) and sit centred. */
.djumps-row { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 10px 12px;
  border-radius: 24px; border: 1px solid var(--cream-border);
  background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur);
  box-shadow: var(--acrylic-edge), 0 4px 14px rgba(60, 50, 30, 0.06);
  transition: box-shadow var(--dur-base); }
/* One line: the view's name, the section pills (scrolling sideways when
   there are more than fit, no scrollbar), then two icons at the right:
   search (opens the line below) and the switch to the other view. */
.djumps-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 28px; }
.djumps-title { font-weight: 600; font-size: 14px; color: var(--text-strong); padding-left: 4px; flex: none; }
.djumps-icons { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
/* All changes: its filters and count on the title line, in the pills' place. */
.djumps-inline { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; justify-content: center; }
.djumps-inline:empty { display: none; }
.djumps-inline select { height: 30px; padding-top: 0; padding-bottom: 0; line-height: 28px; font-size: 13px; width: auto; background-color: var(--white); border-color: var(--cream-border-input); }
.djumps-inline .muted.small { white-space: nowrap; }
.djumps-ic { width: 28px; height: 28px; border-radius: 50%; border-color: transparent; color: var(--ink-700); }
.djumps-ic svg { width: 16px; height: 16px; }
.djumps-ic.on { background: var(--accent-50); border-color: var(--accent-200); color: var(--accent-700); }
/* Second line, open on demand: the search box, or in All changes that
   view's filters. Folds from its measured height like the pills. The
   search takes whatever width is left. */
.djumps-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; overflow: hidden;
  transition: height var(--dur-base) ease, opacity var(--dur-base) ease, margin-top var(--dur-base) ease; }
.djumps-tools.shut { height: 0; opacity: 0; margin-top: -8px; pointer-events: none; }
/* One height for every control on the island, with the text centred in it. */
.djumps-tools input[type=search], .djumps-tools select { height: 34px; padding-top: 0; padding-bottom: 0; line-height: 32px; font-size: 13.5px; background-color: var(--white); border-color: var(--cream-border-input); }
.djumps-tools input[type=search] { flex: 1 1 220px; width: auto; min-width: 0; }
.djumps-tools select { width: auto; }
.djumps-tools .muted.small { white-space: nowrap; }
/* The section pills, in Values only, on the same line as the title. One
   row that scrolls sideways inside the chevron scroller (.hscroll), which
   fades the row under a chevron while there is more that way; the marked
   pill is kept in view. */
.djumps-scroll { flex: 1 1 auto; min-width: 0; }
.djumps-scroll[hidden] { display: none; }
.djumps-pills { display: flex; flex-wrap: nowrap; justify-content: safe center; gap: 6px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 0; }
.djumps-pills::-webkit-scrollbar { display: none; }
.djumps-scroll .hs-chev { --hs-height: 28px; --hs-bottom: 2px; }
.djumps-row .chip { white-space: nowrap; }
.djumps.stuck .djumps-row { box-shadow: var(--acrylic-edge), var(--acrylic-shadow); }
.djumps-row .chip { flex: none; background: var(--white); border-color: var(--cream-border-input); color: var(--ink-800); }
.djumps-row .chip:hover { border-color: var(--accent-300); color: var(--accent-700); }
.djumps-row .chip.on { background: var(--accent-600); border-color: var(--accent-600); color: var(--white); }
.dsection { margin-bottom: var(--space-4); scroll-margin-top: 108px; }
/* A section folds from its header. The body is a one-row grid that goes
   from 1fr to 0fr, which the browser can animate. */
.dsection .dhead { cursor: pointer; user-select: none; }
.dsection .dhead .dfold { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-subtle); cursor: pointer; }
.dsection .dhead:hover .dfold { background: rgba(60, 50, 30, .08); border-color: rgba(60, 50, 30, .14); color: var(--text-strong); }
.dsection .dfold svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform var(--dur-base) var(--ease-out); }
.dsection.folded .dfold svg { transform: rotate(0deg); }
.dsection-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.dsection-body > div { overflow: hidden; min-height: 0; }
.dsection.folded .dsection-body { grid-template-rows: 0fr; }
/* A tall card is cut at a set height and fades out, with Show all under it. */
.dcap { position: relative; }
.dcap.capped { max-height: 520px; overflow: hidden; }
.dcap.capped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white)); }
.dcap-foot { display: flex; justify-content: center; }
.dcap-foot:has(.dcap-more[hidden]) { display: none; }
.dsection.folded .dcap-foot { display: none; }
.dcap-more { margin-top: 10px; }
.dcap-more[hidden] { display: none; }
.dcap-more svg { width: 12px; height: 12px; transform: rotate(90deg); transition: transform var(--dur-fast); }
.dcap-more.open svg { transform: rotate(-90deg); }
.dsection.folded .dhead { margin-bottom: 0; }
.dfields { display: flex; flex-direction: column; }
.dfield { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid var(--border-subtle); border-radius: var(--radius-xs); transition: background var(--dur-base); }
.dfield:last-child { border-bottom: 0; }
.dfield.found, .dentry.found, tr.found td { background: var(--accent-50); }
.dlabel { color: var(--text-muted); font-size: 13px; }
.dval { color: var(--text-strong); font-size: 14px; overflow-wrap: anywhere; cursor: text; border-radius: var(--radius-xs); padding: 1px 4px; margin: -1px -4px; }
.dval:not(.ro):hover { background: var(--surface-hover); }
.dval.ro { cursor: default; }
.dedit { width: 100%; font: inherit; font-size: 14px; }
.dsrc { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: 12px; color: var(--text-subtle); white-space: nowrap; }
.dsrc > button, .dsrc > span { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 6px; border-radius: var(--radius-pill); font: inherit; color: inherit; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
.dsrc > button { cursor: pointer; color: var(--accent-700); background: var(--accent-50); }
.dsrc > button.unmapped { color: var(--text-muted); background: var(--cream-100); }
/* The biomarker table's last column: one icon per row for where the
   value came from, drawn like the field cards' history button: bare,
   no background, the file and page in its tooltip. */
.dbiomarkers th.dsrc-th, .dbiomarkers td.dsrc-td { width: 1%; white-space: nowrap; text-align: center; }
.dsrc-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--text-muted); cursor: pointer; padding: 0; }
.dsrc-ic:hover { background: var(--surface-hover); color: var(--ink-900); }
.dsrc-ic.quiet { cursor: default; }
.dsrc-ic.quiet:hover { background: none; color: var(--text-muted); }
.dsrc-ic svg { width: 15px; height: 15px; }
.dsrc > button.hist { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 8px; background: none; color: var(--text-muted); }
.dsrc > button.hist:hover { text-decoration: none; background: var(--surface-hover); color: var(--ink-900); }
.dsrc > button.hist svg { width: 15px; height: 15px; }
.dhist-go { gap: 8px; margin-top: 6px; }
.dhist-go .btn svg { width: 12px; height: 12px; }
/* A change opened from a field's history flashes once. */
@keyframes cardflash {
  0%, 12%, 36% { background: var(--accent-50); box-shadow: 0 0 0 2px var(--accent-500, var(--accent-600)); }
  24% { background: var(--surface-card); box-shadow: 0 0 0 2px transparent; }
  100% { background: var(--surface-card); box-shadow: 0 0 0 2px transparent; }
}
.prov-card.flash { animation: cardflash 2.4s ease-out both; }
.dsrc > button:hover { text-decoration: underline; }
.dsrc .manual { color: var(--warning-600); background: var(--warning-100); }
.dsrc .nosrc { color: var(--ink-300); }
.dsrc svg { width: 12px; height: 12px; flex: none; }
.dgroup { margin-top: 10px; }
.dgroup > .overline { margin: 0 0 6px 4px; }
.dentries { display: flex; flex-direction: column; gap: 10px; }
.dentry { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 8px 12px 4px; background: var(--white); }
.dentry-head { font-size: var(--fs-case-title); font-weight: 600; color: var(--text-strong); margin-bottom: 2px; overflow-wrap: anywhere; }
.dbig summary { cursor: pointer; font-size: 13px; color: var(--accent-700); padding: 4px; }
.dbig-scroll { max-height: 360px; overflow: auto; margin-top: 6px; }
.dtable td, .dtable th { font-size: 12.5px; padding: 6px 8px; }
.quote-pop { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.quote-pop blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent-300); background: var(--surface-faint); font-size: 13.5px; line-height: 1.5; }
.quote-pop .btn { align-self: flex-start; }
.dhist-list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
.dhist-list li { padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.dhist-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dhist-val { font-weight: 600; color: var(--text-strong); }
.listdlg-rows { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.listdlg-rows li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-xs); background: var(--surface-faint); font-size: 13.5px; }
.listdlg-rows li.struck { text-decoration: line-through; color: var(--text-subtle); }
.listdlg-rows li.muted { color: var(--text-muted); }
.prov-v { font-size: 13.5px; color: var(--text-strong); background: var(--cream-200); padding: 2px 8px; border-radius: var(--radius-xs); overflow-wrap: anywhere; }
.prov-change .prov-v:last-child { background: var(--accent-50); color: var(--accent-700); }
@container pane (max-width: 620px) {
  .dfield { grid-template-columns: minmax(0, 1fr); }
  .dsrc { justify-content: flex-start; }
}

/* ---- assistant --------------------------------------------------------- */

.assist { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.assist.open { pointer-events: auto; }
.assist .scrim { position: absolute; inset: 0; background: rgba(17, 19, 21, 0.32); backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur); opacity: 0; transition: opacity var(--dur-base); }
.assist.open .scrim { opacity: 1; }
/* The slide-over is a floating island inset from the window's edges; it
   slides and fades in over a blurred scrim. */
.assist .panel {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: 560px; max-width: calc(100vw - 24px);
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateX(40px) scale(0.985);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.assist.open .panel { transform: none; opacity: 1; }

/* The chat engine is mounted into .assist .panel (slide-over) or .stage
   (full page). Both get the same parts. */
.chat-ui { display: flex; flex-direction: column; min-height: 0; }
.panel .head, .stage .head { height: 64px; flex: none; padding: 0 var(--space-5); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-subtle); }
.head .brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; color: var(--accent-700); }
.head .ctx { color: var(--text-muted); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; padding: 3px 6px; margin-left: -6px; border-radius: var(--radius-xs); }
/* Showing the conversation's own name rather than what it is about: it
   reads as the heading it is, and clicking renames it in place. */
.head .ctx.own { color: var(--text-strong); font-family: var(--font-display); font-weight: 600; font-size: 13.5px; cursor: text; }
.head .ctx.own:hover { background: var(--surface-hover); }
.head .ctx.editing { background: var(--white); box-shadow: 0 0 0 2px var(--accent-400); outline: none; overflow-x: auto; text-overflow: clip; }
.panel .body, .stage .body { flex: 1; overflow-y: auto; padding: var(--space-5); min-height: 0; }
.body .thread { display: flex; flex-direction: column; gap: 14px; padding-bottom: 36px; }
.stage .body .thread { max-width: 820px; margin: 0 auto; }
.greet { text-align: center; padding: 48px 20px 24px; }
.stage .greet { padding-top: 12vh; }
/* Gradient mesh keyframes. One background-position list per keyframe,
   one entry per blob; the entries move at different rates and directions
   so the blobs cross rather than slide together. The base layer stays put. */
@keyframes railmesh {
  0%   { background-position: 100% 0%, 0% 100%, 50% 60%, 0% 0%, 100% 100%, 0 0; }
  33%  { background-position: 40% 40%, 60% 60%, 100% 0%, 80% 100%, 0% 30%, 0 0; }
  66%  { background-position: 0% 100%, 100% 0%, 20% 100%, 100% 30%, 50% 0%, 0 0; }
  100% { background-position: 80% 100%, 100% 20%, 0% 30%, 20% 60%, 90% 80%, 0 0; }
}
@keyframes orbmesh {
  0%   { background-position: 0% 0%, 100% 100%, 50% 0%, 100% 40%, 0 0; }
  25%  { background-position: 60% 20%, 40% 80%, 0% 60%, 70% 100%, 0 0; }
  50%  { background-position: 100% 100%, 0% 0%, 80% 90%, 20% 60%, 0 0; }
  75%  { background-position: 30% 70%, 70% 30%, 100% 30%, 0% 10%, 0 0; }
  100% { background-position: 0% 0%, 100% 100%, 50% 0%, 100% 40%, 0 0; }
}
/* The greeting mark: a flat, solid round of the moving mesh with still
   film grain on top. No lighting. Behind it sits a copy of the same mesh,
   heavily blurred and nearly clear, so the colours seem to bleed out. It
   shares the orb's background and animation (see .greet .orb below), so
   the two move together. */
.greet .orb-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto 18px; isolation: isolate; }
.greet .orb-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none;
  transform: scale(1.12); filter: blur(26px) saturate(1.6); opacity: 0.35; }
.stage .greet .orb-wrap { width: 120px; height: 120px; }
.caseside .stage .greet .orb-wrap { width: 72px; height: 72px; }
.greet .orb-wrap .orb { position: relative; width: 100%; height: 100%; margin: 0; border-radius: 50%; filter: saturate(1.6); }
/* Grain: grey fractal noise, blended into the colour under it. */
.greet .orb-wrap .orb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: soft-light; }
.greet .orb { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px; }
.greet .orb, .greet .orb-wrap::before {
  background-color: #6BB4F7;
  background-image:
    radial-gradient(60% 60% at 50% 50%, #758DFA 0%, rgba(117, 141, 250, 0) 100%),
    radial-gradient(70% 70% at 50% 50%, #75E7EF 0%, rgba(117, 231, 239, 0) 100%),
    radial-gradient(55% 55% at 50% 50%, #A879FA 0%, rgba(168, 121, 250, 0) 100%),
    radial-gradient(65% 65% at 50% 50%, #6BB4F7 0%, rgba(107, 180, 247, 0) 100%),
    linear-gradient(160deg, #758DFA 0%, #6BB4F7 50%, #75E7EF 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-repeat: no-repeat;
  animation: orbmesh 11s ease-in-out infinite;
}
.stage .greet .orb { width: 120px; height: 120px; }
.greet h2 { font-weight: 500; }
/* The rotating phrase after "Ask gSage" or "Consult with": fades out,
   changes, fades in. Lead and phrase sit on one baseline; a clipped
   inline-block would otherwise sit on its bottom edge or its top. */
.greet .rotor-line { display: inline-flex; align-items: baseline; justify-content: center; flex-wrap: wrap; column-gap: 0.28em; }
.greet .rotor { display: block; white-space: nowrap; overflow: hidden; padding: 0 0.08em 0.12em 0; margin-bottom: -0.12em;
  transition: opacity 250ms, transform 250ms, filter 250ms, width 600ms ease-in-out; }
/* Text Loop: the old phrase lifts away blurred, the new one rises in. */
.greet .rotor.out { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
.greet .rotor.in { opacity: 0; transform: translateY(8px); filter: blur(4px); transition: none; }
.stage .greet h2 { font-size: 30px; }
.greet .sub { color: var(--text-muted); max-width: 38ch; margin: 6px auto 0; font-size: 14px; }
.stage .greet .sub { font-size: 15px; max-width: 48ch; }
/* The suggestions sit inside the greeting and scroll with it: they read
   as the rest of what it says, and a column too short for both scrolls
   one block rather than squeezing the questions against the box. */
.suggest { display: flex; gap: 8px; flex-wrap: wrap; padding: var(--space-4) 0 0; }
/* Under the greeting the chips are centred like the words above them,
   wherever the greeting is drawn (the page, or the side panel). */
.greet .suggest:not(.asked) { justify-content: center; }
.stage .suggest { justify-content: center; max-width: 820px; margin: 0 auto; }
/* Questions written about this record (D139). Each is a sentence, so it
   is a row and shows the whole of itself: a question cut to "EGFR L858R
   plan..." is not one a clinician can judge without opening it. */
.suggest.asked { flex-direction: column; align-items: stretch; gap: 6px; }
.stage .suggest.asked { max-width: 620px; }
.opening { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; text-align: left;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--white);
  font: inherit; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.opening:hover { border-color: var(--accent-300); background: var(--accent-50); }
.opening:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.opening-lead { font-size: var(--fs-case-micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-700); }
.opening-q { font-size: var(--fs-body-sm); line-height: 1.45; color: var(--text-strong); }
.chip { border: 1px solid var(--border-default); background: var(--white); color: var(--text-body); padding: 6px 12px; border-radius: var(--radius-pill); font-size: 13px; cursor: pointer; }
.chip:hover { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); }
/* --- chat context bar ---------------------------------------------------- */
/* Above the input. One line collapsed ("2 casebooks, 3 files attached"),
   the buttons, and the reasoning-effort slider. Expanded, the attached
   items as rows. */

/* The dock is one object: context bar on top, input below, a single border
   and a single shadow around both. */
/* The composer's edge is the warm input edge the rest of the cream UI
   uses, not the mid-grey of a form field; focus turns it the accent. */
.composer .dock { border: 1px solid var(--cream-border-input); border-radius: var(--radius-md); background: var(--white); position: relative; transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.composer .dock:hover:not(:focus-within) { border-color: var(--ink-200); }
/* The dock cannot clip (its popups open above it), so whatever sits at
   its top takes the dock's own curve; a tighter corner pokes out over
   the border at the top left and right. */
.composer .dock > .box, .composer .dock > .ctxbar, .composer .dock > .box > textarea { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.composer .dock > .box > textarea { background: transparent; }

/* ---- the question box: chips, the field, one bar, a footer ------------
   Every row starts 12px inside the box, so the chips, the text and the
   first glyph of the bar line up. */
.composer .dock .box, .stage .composer .dock .box { display: block; padding: 0; position: relative; }
.composer .dock textarea { display: block; width: 100%; padding: 10px 12px 4px; font-size: 15px; line-height: 22px; height: 47px; overflow-y: hidden; transition: height var(--dur-base) var(--ease-out); scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }
.composer .dock textarea.ta-probe { position: absolute; left: 0; top: 0; height: 0 !important; min-height: 0; visibility: hidden; pointer-events: none; overflow: hidden; transition: none; }

.dock-chips { display: flex; align-items: center; gap: 6px; padding: 10px 12px 0; overflow: hidden; min-width: 0; }
.dock-chips[hidden] { display: none; }
.dchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 4px 0 8px; border-radius: var(--radius-pill); background: var(--cream-100); color: var(--ink-700); font-size: 12px; line-height: 1; white-space: nowrap; flex: none; max-width: 240px; min-width: 0; border: 1px solid transparent; cursor: default; outline: 0; transition: background var(--dur-fast), box-shadow var(--dur-fast), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), max-width var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out); }
.dchip:hover, .dchip:focus-visible { background: var(--cream-300); }
.dchip:focus-visible { box-shadow: 0 0 0 2px var(--accent-300); }
.dchip > svg { width: 14px; height: 14px; flex: none; color: var(--text-subtle); }
.dchip-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dchip-meta { color: var(--text-subtle); flex: none; }
.dchip-meta::before { content: "\00b7\00a0"; }
.dchip .chip-x { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-400); border: 0; background: none; padding: 0; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.dchip .chip-x svg { width: 12px; height: 12px; }
.dchip .chip-x:hover { background: rgba(0, 0, 0, .08); color: var(--text-strong); }
.dchip.casebook { background: var(--accent-50); color: var(--accent-700); }
.dchip.casebook:hover, .dchip.casebook:focus-visible { background: var(--accent-100); }
.dchip.casebook > svg { color: var(--accent-700); }
.dchip.reading { background: transparent; border-color: var(--ink-300); border-style: dashed; }
.dchip.reading .dchip-meta { color: var(--accent-700); }
.dchip.failed .dchip-meta { color: var(--danger-600); }
.dchip.memory, .dchip.skill { background: transparent; border-color: var(--border-subtle); }
.dchip.memory > svg, .dchip.skill > svg { color: var(--accent-600); }
.dchip.more { background: transparent; color: var(--accent-700); cursor: pointer; padding: 0 9px; font: 500 12px var(--font-body); }
.dchip.more:hover, .dchip.more.open { border-color: var(--accent-100); background: var(--accent-50); }
.dchip.more[hidden] { display: none; }
@keyframes dchip-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.dchip.enter { animation: dchip-in var(--dur-slow) var(--ease-out) both; }
.dchip.leaving { opacity: 0; transform: scale(.85); max-width: 0 !important; padding-left: 0; padding-right: 0; margin-right: -6px; border-width: 0; }
@keyframes dchip-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 86, 230, .45); } 100% { box-shadow: 0 0 0 8px rgba(47, 86, 230, 0); } }
.dchip.pulse { animation: dchip-pulse 900ms var(--ease-out); }

/* A chip's callout: page one, the name, what is known, Open and Remove. */
.callout.chip-note { width: 264px; max-width: 264px; padding: 8px; }
.chip-peek .fprev-frame.chip-pg { width: 248px; height: 150px; margin-bottom: 8px; }
.chip-peek-name { font-weight: 500; color: var(--text-strong); overflow-wrap: anywhere; line-height: 1.35; margin: 0 2px 2px; font-size: 12.5px; }
.chip-peek-fact { color: var(--text-subtle); font-size: 11.5px; margin: 0 2px; }
.chip-peek-acts { display: flex; gap: 6px; margin-top: 8px; }
.chip-peek-acts .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }

.dock-bar { display: flex; align-items: center; gap: 2px; padding: 2px 8px 8px 5px; }
.dock-anchor { position: relative; display: inline-flex; }
.dock-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-600); border: 0; background: none; padding: 0; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), opacity var(--dur-base); }
.dock-ic svg { width: 18px; height: 18px; }
.dock-ic:hover, .dock-ic.open { background: var(--cream-100); color: var(--text-strong); }
.dock-ic.on { background: var(--accent-50); color: var(--accent-700); }
.dock-wf { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px 0 7px; border-radius: var(--radius-pill); color: var(--ink-600); font: 12.5px var(--font-body); border: 0; background: none; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), opacity var(--dur-base); }
.dock-wf > svg { width: 18px; height: 18px; }
.dock-wf:hover, .dock-wf.open { background: var(--cream-100); color: var(--text-strong); }
.dock-car { width: 12px; height: 12px; transition: transform var(--dur-base) var(--ease-out); }
.dock-wf.open .dock-car { transform: rotate(180deg); }

/* Send, Queue and Stop share the right end; a hidden one folds to nothing
   instead of vanishing, so the bar never jumps. */
.dock-bar .act { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; cursor: pointer; overflow: hidden; transition: width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.dock-bar .act[hidden] { display: grid; width: 0; opacity: 0; transform: scale(.6); margin: 0; border-width: 0; padding: 0; pointer-events: none; }
.dock-bar .act svg { width: 16px; height: 16px; }
.dock-bar .send { border: 0; background: var(--accent-600); color: #fff; }
.dock-bar .send.off { background: var(--ink-200); cursor: default; }
.dock-bar .queue-add { border: 1px solid var(--accent-600); background: var(--white); color: var(--accent-600); margin-right: 6px; }
.dock-bar .queue-add svg { width: 18px; height: 18px; }
.dock-bar .queue-add:hover { background: var(--accent-50); }
.dock-bar .stop { border: 1px solid var(--danger-300); background: var(--white); color: var(--danger-600); }
.dock-bar .stop:hover { background: var(--danger-50); }
.dock-bar .stop svg { width: 14px; height: 14px; }
/* Attachments dim while an answer streams: the running turn froze its
   context. Effort stays live: it names the next question's, which may be
   queued while this one streams. */
.composer.streaming .dock-ic, .composer.streaming .dock-wf { opacity: .45; pointer-events: none; }

.dock-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 0 12px 8px; font-size: 11px; color: var(--text-subtle); min-height: 15px; }
.dock-foot .disc { padding: 0; white-space: nowrap; }
.dock-shared { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; }
.dock-shared svg { width: 12px; height: 12px; flex: none; }
.dock-count { justify-self: end; font: inherit; color: var(--accent-700); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.dock-count[hidden] { display: none; }
.dock-count:hover { text-decoration: underline; }
@container (max-width: 560px) {
  .dock-wf-label { display: none; }
  .dock-foot { grid-template-columns: minmax(0, 1fr) auto; }
  .dock-foot .disc { grid-column: 1 / -1; grid-row: 2; text-align: center; }
}

/* Every menu the bar opens rises and fades from its button. */
.dock-pop { position: absolute; bottom: calc(100% + 8px); z-index: 30; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(17, 19, 21, .14); opacity: 0; transform: translateY(6px) scale(.98); visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.dock-pop.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s; }
.dock-menu { left: 0; width: 320px; padding: 6px; transform-origin: bottom left; }
.dock-list { left: 12px; width: min(420px, calc(100% - 24px)); max-height: min(420px, 60vh); overflow: auto; padding: 6px; transform-origin: bottom left; }
.dock-list .pins { display: flex; flex-direction: column; gap: 2px; padding: 0 0 4px; }
.dock-list .pins.memlist { border-top: 1px dashed var(--border-subtle); padding-top: 4px; }
.dock-list .pins.memlist[hidden] { display: none; }
.dock-list .ctx-note { margin: 4px 0 0; padding: 6px 6px 2px; border-top: 1px dashed var(--border-subtle); font-size: 11.5px; color: var(--text-subtle); }
.dock-mh { padding: 6px 10px 4px; font-size: 11px; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.dock-rule { height: 1px; background: var(--border-subtle); margin: 4px 6px; }
.dock-mi { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--radius-xs); border: 0; background: none; text-align: left; font: 13px var(--font-body); color: var(--text-strong); cursor: pointer; transition: background var(--dur-fast); }
.dock-mi:hover:not(:disabled), .dock-mi:focus-visible { background: var(--surface-faint); }
.dock-mi > svg { width: 18px; height: 18px; flex: none; color: var(--text-subtle); margin-top: 1px; }
.dock-mi-text { display: flex; flex-direction: column; min-width: 0; }
.dock-mi-d { color: var(--text-subtle); font-size: 11.5px; }
.dock-mi.off { color: var(--ink-400); cursor: default; }

/* Effort: a dropdown naming the stop, with a gauge whose needle sits at
   it; the slider is in its popover. The range input lies over the drawn
   track, so the knob can ease. The names are qeff-, not eff-: the research
   composer has its own eff- slider with unscoped rules. */
.qeff-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px 0 8px; margin-right: 6px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: var(--cream-50); color: var(--ink-700); font: 500 12.5px var(--font-body); cursor: pointer; transition: background var(--dur-fast), opacity var(--dur-base); }
.qeff-btn:hover, .qeff-btn.open { background: var(--cream-100); }
.qeff-gauge-slot { display: contents; }
.qeff-btn .qeff-gauge { width: 16px; height: 16px; flex: none; color: var(--accent-700); }
.qeff-btn .qeff-gauge.high { transform: scaleX(-1); }
.qeff-name { display: inline-block; min-width: 56px; text-align: left; }
.qeff-car { width: 12px; height: 12px; color: var(--text-subtle); transition: transform var(--dur-base) var(--ease-out); }
.qeff-btn.open .qeff-car { transform: rotate(180deg); }
.dock-pop.qeff-pop { right: 6px; width: 300px; padding: 12px 14px; transform-origin: bottom right; }
.qeff-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; }
.qeff-head b { font-size: 14px; }
.qeff-head span { font-size: 11.5px; color: var(--text-subtle); }
.qeff-track { position: relative; height: 24px; margin: 14px 10px 0; }
.qeff-words { padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.qeff-rail { position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px; background: var(--accent-100); }
.qeff-fill { position: absolute; left: 0; top: 10px; height: 4px; border-radius: 4px; background: var(--accent-600); transition: width var(--dur-slow) var(--ease-out); }
.qeff-dot { position: absolute; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-300); transform: translateX(-50%); }
.qeff-knob { position: absolute; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 2px solid var(--accent-600); box-shadow: var(--shadow-sm); transform: translateX(-50%); transition: left var(--dur-slow) var(--ease-out); pointer-events: none; }
.qeff-track input.qeff-input { position: absolute; inset: 0 -10px; width: calc(100% + 20px); height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.qeff-track:has(input:focus-visible) .qeff-knob { box-shadow: 0 0 0 3px var(--accent-100), var(--shadow-sm); }
.qeff-stops { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.qeff-stop { font: 11.5px var(--font-body); color: var(--text-subtle); background: none; border: 0; padding: 2px 0; cursor: pointer; transition: color var(--dur-base); text-align: left; }
.qeff-stop:nth-child(2) { text-align: center; }
.qeff-stop:nth-child(3) { text-align: right; }
.qeff-stop:hover { color: var(--text-strong); }
.qeff-stop.on { color: var(--text-strong); font-weight: 600; }
.qeff-words { transition: opacity var(--dur-fast); }
.qeff-words.swap { opacity: 0; }
.qeff-what { margin: 10px 0 0; font-size: 12px; color: var(--ink-700); }
.qeff-pro, .qeff-con { margin: 6px 0 0; font-size: 11.5px; display: grid; grid-template-columns: 80px 1fr; gap: 6px; }
.qeff-pro b { color: var(--success-600); font-weight: 600; }
.qeff-con b { color: var(--warning-600); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .dock-pop, .dchip, .qeff-knob, .qeff-fill, .composer .dock textarea, .dock-bar .act { transition: none; } .dchip.enter, .dchip.pulse { animation: none; } }
.composer .dock:focus-within { border-color: var(--accent-600); box-shadow: var(--ring-focus); }
.stage .composer .dock { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.composer .dock .ctxbar { border: 0; border-radius: 0; margin: 0; background: linear-gradient(180deg, var(--cream-50) 0%, var(--white) 100%); border-bottom: 1px solid var(--border-subtle); }
.composer .dock .box { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
/* Beats .stage .composer .box, which is where the standalone radius and
   shadow came from. */
.stage .composer .dock .box, .composer .dock .box:focus-within { border: 0; border-radius: 0; box-shadow: none; }

.ctxbar { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--white); margin-bottom: 8px; font-size: 12.5px; color: var(--text-muted); }
/* Turn trajectory: one toast, one bar, 90% of the dock's width. It floats
   above the composer and over the end of the thread, on a borderless
   acrylic pill: stage and time left, the glowing lane, tokens right. When
   the turn ends it becomes one line of totals. */
.trajbar { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 5; width: 90%; margin: 0 auto -6px; container-type: inline-size; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.trajbar.shown { opacity: 1; transform: none; }
.trajbar.leaving { opacity: 0; transform: translateY(6px); }
.traj { pointer-events: auto; display: grid; grid-template-columns: 9.5rem 1fr 6rem; align-items: center; gap: 14px; padding: 9px 18px; border-radius: var(--radius-pill);
  background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur);
  box-shadow: var(--acrylic-shadow), var(--acrylic-edge); font-size: 12.5px; color: var(--text-strong); }
.traj .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.traj .tok { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.traj .done { grid-column: 1 / -1; text-align: center; }
.traj .done svg { width: 12px; height: 12px; margin-left: 8px; vertical-align: -2px; color: var(--text-subtle); }
.trajbar.dismissable .traj { cursor: pointer; }
.trajbar.dismissable .traj:hover .done svg, .trajbar.dismissable .traj:focus-visible .done svg { color: var(--text-strong); }
.traj.finished .name, .traj.finished .lanes, .traj.finished .tok { display: none; }
/* The lane is drawn twice, stacked: a blurred copy underneath so the glow
   is the segments' own colours, and the crisp one on top. */
.traj .lanes { position: relative; height: 6px; }
.traj .lane { position: absolute; inset: 0; border-radius: var(--radius-pill); overflow: hidden; }
.traj .lane.glow { overflow: visible; filter: blur(4px) saturate(1.25); opacity: 0.75; transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }
.traj.live .lane.glow { filter: blur(6px) saturate(1.4); opacity: 0.95; }
.traj .lane.top { background: rgba(15, 23, 42, 0.07); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95); }
.traj .lane i { position: absolute; top: 0; height: 100%; cursor: pointer; }
.traj .lane.top i:hover { filter: brightness(0.85); }
.traj .lane i.sent { background: var(--ink-400); }
.traj .lane i.reading { background: #7C47CD; }
.traj .lane i.thinking { background: var(--accent-300); }
.traj .lane i.tools { background: var(--warning-500); }
.traj .lane i.writing { background: var(--accent-600); }
.traj.live .lane.top i:last-child { animation: pulse 1.2s infinite; }
@container (max-width: 470px) { .traj { grid-template-columns: 7.5rem 1fr 4.5rem; gap: 8px; padding: 7px 12px; } }
.callout strong { display: block; margin-bottom: 2px; }
.callout .small { margin-top: 3px; opacity: 0.75; }
.ctx-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; min-width: 0; }
/* The context bar lives in panes of very different widths: the full chat
   page, the case page's half, the slide-over. It sizes to its own width,
   not the window's. Narrow, the effort control drops its caption and the
   summary truncates instead of pushing "Standard" off the edge. */
.composer .dock { container-type: inline-size; }
.ctx-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-toggle { min-width: 0; }
@container (max-width: 520px) {
  .ctx-row.actions .btn { font-size: 12px; padding-left: 6px; padding-right: 6px; }
}
@container (max-width: 400px) {
  input.effort { width: 72px; }
}
.ctx-row.actions { border-top: 1px solid var(--border-subtle); padding-top: 6px; flex-wrap: wrap; gap: 2px; }
/* Snip: the frozen tab frame, dimmed except the record column; the box
   being dragged is clear with a blue edge. */
.snip-layer { position: fixed; inset: 0; z-index: 200; cursor: crosshair; outline: none; overflow: hidden;
  background: rgba(17, 19, 21, 0.32); backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur); animation: fadein var(--dur-base) var(--ease-out) both; }
.snip-stage { position: absolute; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--acrylic-shadow), 0 0 0 1px var(--cream-border); }
.snip-shot { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.snip-box { position: absolute; border: 2px solid var(--accent-500); background: rgba(47, 86, 230, 0.06); border-radius: 2px; pointer-events: none; }
.snip-hint { position: absolute; left: 50%; top: 16px; translate: -50% 0; padding: 8px 14px; border-radius: var(--radius-pill); pointer-events: none; white-space: nowrap;
  background: var(--acrylic-dark); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); color: #fff; font-size: 13px; box-shadow: var(--acrylic-shadow); }
/* File preview callout: page one, the name, the page count. */
.callout.fprev-note { max-width: 260px; padding: 8px; }
.fprev { display: flex; flex-direction: column; gap: 6px; }
.fprev-img { display: block; width: 240px; height: 300px; object-fit: contain; object-position: top center; border-radius: 6px; background: var(--white); border: 1px solid var(--cream-border); }
/* The page box holds its size from the first frame; a shimmer stands in
   for the picture until it loads, then the picture fades in over it. */
.fprev-frame { position: relative; width: 244px; height: 300px; }
.fprev-frame.loaded .fprev-img { object-position: center; }
.fprev-frame .fprev-img { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.fprev-frame.loaded .fprev-img { opacity: 1; }
.fprev-frame .fprev-load { position: absolute; inset: 0; border-radius: 6px; border: 1px solid var(--cream-border); background: linear-gradient(100deg, var(--cream-100, #f6f5f2) 30%, var(--white) 50%, var(--cream-100, #f6f5f2) 70%); background-size: 300% 100%; animation: fprev-load 1.2s linear infinite; }
.fprev-frame.loaded .fprev-load { display: none; }
@keyframes fprev-load { from { background-position: 100% 0; } to { background-position: 0 0; } }
.fprev-name { font-size: 12px; font-weight: 500; color: var(--text-strong); overflow-wrap: anywhere; line-height: 1.35; padding: 0 2px; }
.fprev .co-sub { font-size: 11.5px; padding: 0 2px; }
/* View switch: large grid, small grid, list. */
.view-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--cream-100); flex: none; }
.view-btn { display: grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-600); cursor: pointer; }
.view-btn svg { width: 16px; height: 16px; }
.view-btn:hover { color: var(--ink-900); }
.view-btn.on { background: var(--white); color: var(--accent-700); box-shadow: var(--shadow-xs); }
.view-slot { display: inline-flex; }
/* Thumbnail grids. auto-fill makes as many columns as fit, so the grid
   scales with the pane; the large grid keeps tiles big enough to read. */
.ftiles { display: grid; gap: 12px; }
.ftiles.lg { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ftiles.sm { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.ftile { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--cream-border); border-radius: var(--radius-md); background: var(--white); overflow: hidden; transition: box-shadow var(--dur-fast), border-color var(--dur-fast); }
.ftile:hover { border-color: var(--accent-300); box-shadow: var(--shadow-sm); }
.ftile.off { opacity: 0.6; }
.ftile.off:hover { border-color: var(--cream-border); box-shadow: none; }
.ftile-pic { display: grid; place-items: center; aspect-ratio: 3 / 4; width: 100%; padding: 0; border: 0; border-bottom: 1px solid var(--cream-border); background: var(--cream-50); cursor: pointer; overflow: hidden; }
.ftile-pic:disabled { cursor: default; }
.ftile-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ftile-ic svg { width: 36px; height: 36px; color: var(--ink-400); }
.ftiles.sm .ftile-ic svg { width: 28px; height: 28px; }
.ftile-body { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; min-width: 0; }
.ftile-name { font-size: 13px; font-weight: 500; color: var(--text-strong); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ftiles.sm .ftile-name { font-size: 12px; -webkit-line-clamp: 2; }
.ftile-meta { font-size: 11.5px; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftile-body .meta { font-size: 11.5px; color: var(--ink-500); }
.ftile-foot { display: flex; align-items: center; gap: 2px; padding: 4px 6px; margin-top: auto; border-top: 1px solid var(--cream-border-soft, var(--cream-border)); }
.ftile-foot .row-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; }
/* The small grid keeps one row: the tick box, view, download, delete. The
   rest (read again, annotate, pair) are in the large grid and the list. */
.ftiles.sm .ftile-foot .btn:not(.iconbtn) { display: none; }
.ftiles.sm .ftile-foot .row-actions { flex-wrap: nowrap; }
.ftiles.sm .ftile-foot .row-actions > :not([title="View"]):not([data-note="View"]):not([title="Download"]):not([data-note="Download"]):not([title="Delete"]):not([data-note="Delete"]) { display: none; }
.ftile-foot .iconbtn { width: 28px; height: 28px; }
.sblock .ftiles { margin-top: 4px; }
/* Casebook Files tab: a file still in the system opens in the viewer. */
tr.doc-open { cursor: pointer; }
tr.doc-open:hover td { background: var(--surface-hover); }
tr.doc-open .link { color: var(--accent-700); }
td.doc-act { width: 1%; white-space: nowrap; text-align: right; }
/* Icon-only tools in the context bar; each names itself in a callout. */
.ctx-row.actions .btn.ctx-ic { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; }
.ctx-row.actions .btn.ctx-ic svg { width: 18px; height: 18px; }
.ctx-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 4px; cursor: pointer; color: var(--text-strong); font: inherit; font-size: 12.5px; border-radius: var(--radius-xs); }
.ctx-toggle:hover { background: var(--surface-faint); }
.ctx-toggle svg { width: 14px; height: 14px; transition: transform 0.18s ease; color: var(--text-subtle); }
.ctxbar.open .ctx-toggle svg { transform: rotate(90deg); }
.ctx-title { font-family: var(--font-display); font-weight: 600; }
/* The count, like a notification: attached items plus memory entries.
   It pulses once when the agent remembers something mid-answer. */
.ctx-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-500); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1; }
.ctxbar.has-reading .ctx-badge { background: var(--accent-700); }
.ctx-badge.pulse { animation: ctx-pulse 0.9s var(--ease-out) 1; }
@keyframes ctx-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47, 86, 230, 0.45); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(47, 86, 230, 0); }
}

.effort-wrap { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--text-muted); cursor: default; flex: none; }
.effort-name { font-family: var(--font-display); font-weight: 500; color: var(--text-strong); }
input.effort { width: 96px; height: 18px; margin: 0; padding: 0; appearance: none; background: transparent; box-shadow: none; border: 0; cursor: pointer; }
input.effort::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ink-200) 0%, var(--accent-300) 50%, var(--accent-500) 100%); }
input.effort::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--accent-500); margin-top: -5px; box-shadow: var(--shadow-sm); }
input.effort::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ink-200) 0%, var(--accent-300) 50%, var(--accent-500) 100%); }
input.effort::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--accent-500); }

/* The list and the note are the expanded part. */
.ctxbar .pins, .ctxbar .ctx-note { display: none; }
.ctxbar.open .pins { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 8px; border-top: 1px solid var(--border-subtle); }
.ctxbar.open .ctx-note { display: block; margin: 0; padding: 6px 10px 8px; border-top: 1px dashed var(--border-subtle); font-size: 11.5px; color: var(--text-subtle); }
.ctxbar.open .pins.memlist { border-top: 1px dashed var(--border-subtle); }
.ctxbar .pins.memlist[hidden] { display: none; }
.ctx-item.ctx-memhead .ctx-name { font-family: var(--font-display); font-weight: 600; }
.ctx-item.is-memory > svg, .ctx-item.ctx-memhead > svg { color: var(--accent-600); }
.ctx-item .ctx-meta.ctx-desc { font-family: inherit; font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
/* The tree as one file, in a modal. */
.modal.memfile { width: min(720px, 92vw); max-height: 84vh; display: flex; flex-direction: column; }
.memfile-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-strong); }
.memfile-head > svg { width: 18px; height: 18px; color: var(--accent-600); }
.memfile-body { overflow: auto; margin-top: 10px; padding: 12px 16px; border: 1px solid var(--cream-border); border-radius: var(--radius-md); background: var(--cream-50); font-size: 13.5px; }
.memfile-body h1 { font-size: 17px; margin: 0 0 8px; }
.memfile-body h2 { font-size: 15px; margin: 14px 0 4px; }
.memfile-body h3, .memfile-body h4, .memfile-body h5, .memfile-body h6 { font-size: 13.5px; margin: 10px 0 2px; }
.memfile-body em:first-of-type { color: var(--text-muted); }
/* Chips under an answer: what the memory tools wrote in that turn. */
.mem-slot:empty { display: none; }
.memchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.memchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px 3px 6px; border-radius: var(--radius-pill); border: 1px solid var(--accent-200); background: var(--accent-50); color: var(--accent-800); font-size: 12px; cursor: default; }
.memchip > svg { width: 14px; height: 14px; flex: none; color: var(--accent-600); }
.memchip.user { border-color: var(--cream-border); background: var(--cream-50); color: var(--text-strong); }
.memchip.user > svg { color: var(--ink-500); }
.memchip.gone { opacity: 0.7; }
.memchip.gone .memchip-what { text-decoration: line-through; }
.memchip-verb { font-weight: 600; flex: none; }
.memchip-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--radius-xs); color: var(--text-strong); }
.ctx-item:hover { background: var(--surface-faint); }
.ctx-item > svg { width: 14px; height: 14px; flex: none; color: var(--text-subtle); }
.ctx-item .ctx-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.ctx-item .ctx-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); white-space: nowrap; }
.ctx-item .ctx-meta .reading { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-700); }
.ctx-item .ctx-meta .reading .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-500); animation: pulse 1s infinite; }
.ctx-item .ctx-meta .failed { color: var(--danger-600); }
.ctx-item .iconbtn.xs { width: 22px; height: 22px; }
.ctx-item .iconbtn.xs svg { width: 13px; height: 13px; }
.composer { position: relative; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-subtle); }
/* The dock is the last thing on the stage, and its bottom edge lines up
   with the bottom of the conversation list, which floats 12px off. */
.stage .composer { border-top: 0; padding-bottom: 12px; }
.stage .composer > * { max-width: 820px; margin-left: auto; margin-right: auto; }
.stage .composer > .trajbar { max-width: 738px; }
.composer .box { border: 1px solid var(--border-input); border-radius: var(--radius-md); padding: 6px 8px 6px 12px; display: flex; align-items: flex-end; gap: 8px; background: var(--white); }
.stage .composer .box { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 10px 10px 10px 16px; }
.composer .box:focus-within { border-color: var(--accent-400); box-shadow: var(--ring-focus); }
/* Two fixed heights, chosen with the expand button: one line, or five. No
   drag handle; it sat on top of the send button and resized by accident. */
/* Heights in px from the line height (22px at 14.5px type), not lh: an
   lh-based height inside a flex row re-measured itself every frame. */
/* One line to start with. The height after that is set on the element as
   the question is typed (box-size.ts), so it is the size of what is in
   it, and it only scrolls once it has stopped growing. */
.composer textarea { border: 0; padding: 6px 0; height: 34px; min-height: 0; resize: none; box-shadow: none; overflow-y: hidden; }
.composer textarea:hover, .composer textarea:focus, .composer textarea:focus-visible { box-shadow: none; background: transparent; }
.composer .box:focus-within { border-color: var(--accent-600); box-shadow: var(--ring-focus); }
.composer .stop { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--danger-300); background: var(--white); color: var(--danger-600); cursor: pointer; display: grid; place-items: center; flex: none; }
.composer .stop:hover { background: var(--danger-50); }
.composer .stop svg { width: 15px; height: 15px; }
.composer .send { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 0; background: var(--accent-500); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.composer .send:disabled { background: var(--ink-200); }
/* While an answer streams, the same button queues instead of sending. */
.composer .send.queued { background: var(--white); color: var(--accent-600); border: 1px solid var(--accent-600); }
.composer .send.queued:hover { background: var(--accent-50); }

/* Questions waiting their turn, floating above everything else in the
   composer as a stack of cards. The list is rendered back to front, so the
   last card is the one that goes next: nearest the input, full size, full
   opacity. The ones behind it peek out above, each a little smaller and
   fainter and tucked under its neighbour. */
.queue { display: flex; flex-direction: column; margin: 0 0 10px; }
/* No entry animation here: a filled animation would win the cascade over the
   per-card opacity and transform below and flatten the stack. */
.queue-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 14px rgba(30, 40, 80, 0.10); font-size: 13px; color: var(--text-body);
  transform-origin: bottom center; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.queue-item:not(:last-child) { margin-bottom: -5px; opacity: 0.7; transform: scale(0.975); }
.queue-item:nth-last-child(3) { opacity: 0.48; transform: scale(0.95); }
.queue-item:nth-last-child(n+4) { opacity: 0.32; transform: scale(0.93); }
/* Hovering brings a buried card forward so it can be read and removed. */
.queue-item:hover { opacity: 1; transform: none; position: relative; z-index: 2; }
.queue-item > svg { width: 14px; height: 14px; color: var(--accent-600); flex: none; }
.queue-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item .iconbtn.xs { width: 22px; height: 22px; }
.queue-item .iconbtn.xs svg { width: 13px; height: 13px; }
.composer .send svg { width: 16px; height: 16px; }
.composer .bar { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--text-subtle); }
.composer select { width: auto; padding: 3px 8px; font-size: 12px; border-radius: var(--radius-xs); }
/* The notice sits inside the dock, under the field: a quiet last line of
   the same card rather than a block beneath it. */
.disc { margin: 0; padding: 0 12px 7px; font-size: 11px; color: var(--text-subtle); font-style: italic; text-align: center; }
.drop .composer .box { border-color: var(--accent-400); background: var(--accent-50); }

/* One case: record left, gSage right, always open. */
/* Record and chat share the page, half and half by default (--case-left is
   set from the drag handle). Neither side goes narrower than it can use. */
.casepage { --case-left: 60%; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(420px, var(--case-left)) 12px minmax(360px, 1fr); }
.casepage.dragging { cursor: col-resize; user-select: none; }
/* Ask gSage hides the right column; the record takes the whole width. */
.casepage.pane-hidden { grid-template-columns: minmax(0, 1fr) 0 0; }
.casepage.pane-hidden .case-split, .casepage.pane-hidden .caseside { display: none; }
.casepage.pane-hidden .content { padding-right: var(--space-8); }
.assist-btn.on { background: var(--accent-100); border-color: var(--accent-300); }
/* With gSage open the floating pill sits over the gSage column, so the
   record starts near the top. With it hidden the pill is over the record,
   and the record starts below it. */
.casepage .content { padding-right: var(--space-5); padding-top: var(--space-5); }
/* The record's scrollbar comes and goes as the split moves and the page
   reflows. Its room is kept, so the record does not jump when it comes,
   and it is thin, so it is not mistaken for the split bar beside it. */
.casepage > .content { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--cream-border-input, var(--cream-border)) transparent; }
.casepage.pane-hidden .content { padding-top: calc(var(--bar) + var(--space-2)); }
.casepage.pane-hidden .djumps { top: calc(64px - var(--bar) - var(--space-2)); }
/* The bar between record and chat: 12px to grab, a line that lights on
   hover, and a grip in the middle. It sits above both columns so a
   scroller's edge never takes the pointer from it. */
.case-split { cursor: col-resize; position: relative; z-index: 5; touch-action: none; }
.case-split::after { content: ""; position: absolute; inset: 0 -4px; }
.case-split::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 5px; width: 2px; border-radius: 2px; background: var(--cream-border); transition: background var(--dur-fast); }
.case-split:hover::before, .casepage.dragging .case-split::before { background: var(--accent-300); }
.case-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 22px; height: 34px; border-radius: 11px; background: var(--white); border: 1px solid var(--cream-border); color: var(--text-subtle); box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.06)); pointer-events: none; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
.case-grip svg { width: 15px; height: 15px; }
.case-split:hover .case-grip, .casepage.dragging .case-grip { color: var(--accent-700); border-color: var(--accent-300); background: var(--accent-50); }
/* gSage on a case is a floating island below the pill bar. It casts a
   shadow but no scrim: the record beside it stays sharp and usable. */
.caseside { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
  margin: 12px 12px 12px 0; border-radius: var(--radius-lg);
  background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur);
  box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
@keyframes pane-in { from { opacity: 0; transform: translateX(28px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes pane-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(28px) scale(0.985); } }
/* While the island is open its head carries the hide button, so the
   floating pill steps aside and covers nothing. It returns once gSage is
   hidden, as the way to show it again. */
.main > .topbar, .main > .assist-dock { transition: opacity var(--dur-base) var(--ease-out); }
.main:has(> .casepage:not(.pane-hidden)) > .topbar,
.main:has(> .casepage:not(.pane-hidden)) > .assist-dock { opacity: 0; pointer-events: none; }
.main:has(> .casepage:not(.pane-hidden)) > .topbar *,
.main:has(> .casepage:not(.pane-hidden)) > .assist-dock * { pointer-events: none; }
/* Same blue as the Show gSage pill; a round fill on hover. */
.iconbtn.caseside-hide { flex: none; border-radius: 50%; border-color: transparent; color: var(--accent-700); }
.iconbtn.caseside-hide:hover { background: var(--accent-100); border-color: var(--accent-300); color: var(--accent-700); }
.iconbtn.caseside-hide:active { background: var(--accent-100); }
.casepage.pane-opening .caseside { animation: pane-in var(--dur-slow) var(--ease-out) both; }
.casepage.pane-closing .caseside { animation: pane-out 220ms ease-in both; }
.caseside-head { height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--border-subtle); }
.caseside-head .brand { font-family: var(--font-display); font-weight: 600; color: var(--accent-700); font-size: 13px; }
/* The conversation's name, in the slot the wordmark had. Muted while it
   is only saying which patient this is about: there is no name yet, and
   nothing to rename. */
.caseside-name { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 3px 6px; margin-left: -6px; border-radius: var(--radius-xs); }
.caseside-name.own { color: var(--text-strong); cursor: text; }
.caseside-name.own:hover { background: var(--surface-hover); }
.caseside-name.editing { background: var(--white); box-shadow: 0 0 0 2px var(--accent-400); outline: none; overflow-x: auto; text-overflow: clip; }
/* 453px of panel cannot spend 235px of it on three labels and still have
   room for the conversation's name, so the glyphs stand alone here and
   each button says what it is in its tooltip. Everywhere wider keeps its
   words. */
.caseside-head .btn-label { display: none; }
.caseside-head .btn { padding-left: 7px; padding-right: 7px; }
.caseside-mine { display: inline-flex; align-items: center; gap: 4px; }
.caseside-mine:not(:empty) { margin-right: 2px; padding-right: 6px; border-right: 1px solid var(--border-subtle); }
.caseside-head .spark { color: var(--accent-500); width: 16px; height: 16px; }

/* The side column is narrow, so it keeps the lighter wash; the strong one is
   for the full-width stage. */
.caseside .stage { flex: 1; background: transparent; }
.caseside .stage .head { display: none; }
.caseside .stage .body .thread, .caseside .stage .suggest, .caseside .stage .composer > *, .caseside .stage .composer > .trajbar { max-width: none; }
.caseside .stage .greet { padding-top: 6vh; }
.caseside .stage .greet .orb { width: 72px; height: 72px; }
.caseside .stage .greet h2 { font-size: 20px; }
.caseside .stage .composer .dock { box-shadow: none; }
.caseside-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-subtle); font-size: 13px; padding: 24px; text-align: center; }
.caseside-empty .spark { width: 28px; height: 28px; color: var(--ink-300); }

/* Full-page gSage: conversation list + stage */
/* The conversation list floats over the stage on acrylic, so the thread and
   its wash show through it. Collapsed, it is a single pill button. */
/* gSage's top bar carries the name of the conversation on screen. It
   starts where the stage starts, and slides with it when the list folds
   away, so it never sits over the list. align-self: stretch rather than a
   height of its own: it is then exactly as tall as the button pill beside
   it, and the two share a top edge with the list card at 12px. */
.chat-name { align-self: stretch; display: flex; align-items: center; min-width: 0; margin: 0; padding: 0 16px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-strong); cursor: text;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge);
  transition: margin-left var(--dur-slow) var(--ease-out), background var(--dur-fast), box-shadow var(--dur-fast); }
.chat-name[hidden] { display: none; }
.chat-name:hover { background: rgba(255, 255, 255, 0.9); }
/* Renaming happens in place: the pill becomes the field, so there is no
   dialog between wanting a better name and typing one. */
.chat-name.editing { cursor: text; background: var(--white); box-shadow: var(--acrylic-shadow), 0 0 0 2px var(--accent-400); outline: none; overflow-x: auto; text-overflow: clip; }
.main:has(.chatpage:not(.list-collapsed)) .chat-name { margin-left: calc(304px - var(--space-6)); }
.chatpage { flex: 1; min-height: 0; display: flex; position: relative; }
.chatpage > .stage { flex: 1; transition: padding-left var(--dur-slow) var(--ease-out); }
/* Padding, not a margin: the stage's wash still runs under the list, which
   is what the acrylic shows. */
.chatpage:not(.list-collapsed) > .stage { padding-left: 304px; }
.convos { position: absolute; z-index: 20; top: 12px; left: 12px; bottom: 12px; width: 280px; display: flex; flex-direction: column; min-height: 0;
  border-radius: var(--radius-lg); background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur);
  box-shadow: var(--acrylic-shadow), var(--acrylic-edge); padding: 12px 8px; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.convo-rows { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--cream-border-input) transparent; }
.chatpage.list-collapsed .convos { opacity: 0; transform: translateX(-24px) scale(0.98); pointer-events: none; }
.convos-open { position: absolute; z-index: 20; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge);
  font-size: 13px; font-weight: 500; color: var(--accent-700); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.convos-open svg { width: 16px; height: 16px; }
/* In gSage the pill sits in the top bar, before the conversation's name,
   so the name can never cover the way back to the list. It is laid out
   only while the list is folded, rather than being an invisible item the
   bar keeps room for. */
.topbar .convos-open { position: static; align-self: stretch; display: none; }
.main:has(.chatpage.list-collapsed) .topbar .convos-open { display: inline-flex; opacity: 1; pointer-events: auto; animation: fadein var(--dur-base) var(--ease-out) both; }
/* With the list folded, New has nowhere to be, so it keeps a place beside
   the way back to it. Icon only: two labelled pills and a title is a
   crowded corner, and the pair is already read as one group. */
.convos-new { padding: 8px 12px; margin-left: calc(0px - var(--space-5) + 6px); }
/* gSage always floats a bar over the thread -- the conversation's name,
   and the pills for the folded list -- with or without a button in the
   actions pill, so the page keeps the room for it either way. Consults
   carries its own and is not included. */
.main:has(.chatpage:not(.hubchat)) { --bar: 72px; }
.chatpage.list-collapsed .convos-open { opacity: 1; pointer-events: auto; }
.convo-head { padding: 0 4px 10px; }
/* Find one or start one, on a line of their own above the conversations.
   The box gives up its minimum here: the card is 280px wide and the two
   share it. */
.convo-find { display: flex; align-items: center; gap: 6px; }
.convo-find .searchbox { flex: 1; min-width: 0; }
.convo-new { flex: none; width: 34px; height: 34px; padding: 0; justify-content: center; }
.convo-new svg { width: 20px; height: 20px; }
/* Archived is a destination, so it sits at the far end of the card, under
   the conversations rather than beside the heading. */
.convo-foot { flex: none; margin: 8px 4px 0; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.convo-foot .btn { width: 100%; justify-content: flex-start; color: var(--text-muted); }
.convo-foot .btn:hover { color: var(--text-strong); }
.convo-head .row { display: flex; align-items: center; padding: 0 0 8px 8px; }
.convo-head .overline { padding: 0; }
.convo-head .iconbtn { width: 28px; height: 28px; }
/* The search under the tabs is the card's full width. */
.convo-head > .searchbox { display: flex; width: 100%; min-width: 0; }

.listbar { margin-bottom: 10px; gap: 10px; align-items: center; }
.listbar .searchbox { max-width: 340px; }
.pick-find { margin-bottom: 8px; }
.convo-day { padding: 10px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.convo-day:first-child { padding-top: 2px; }
.convo { display: flex; align-items: center; gap: 6px; padding: 7px 10px 7px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--dur-fast); }
.convo:hover { background: rgba(236, 231, 222, 0.6); }
.convo.active { background: var(--cream-300); }
.convo .title { flex: 1; min-width: 0; font-size: 14px; color: var(--text-strong); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.convo.active .title { color: var(--accent-700); }
/* Only the rows under Older carry a date; under Today and Yesterday the
   heading has already said which day it was. */
.convo .when { flex: none; font-size: 11px; color: var(--text-subtle); }
.convo .with { font-size: 12px; color: var(--text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 2px; }
.invites { margin: 0 4px 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.8); border: 1px solid var(--accent-100); }
.invites .overline { margin-bottom: 6px; color: var(--accent-700); }
.invite + .invite { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-subtle); }
.invite .title { font-size: 13.5px; font-weight: 500; color: var(--text-strong); }
/* Rename and archive cost the row no width until you are on it. They used
   to be laid out at every row and merely made invisible, which took 46px
   off every title for buttons nobody could see. The date steps aside for
   them, so reaching a row barely moves the title. */
.convo .x { flex: none; border: 0; padding: 0; background: transparent; color: var(--ink-300); width: 0; min-width: 0; height: 20px; border-radius: 4px; cursor: pointer; display: grid; place-items: center; overflow: hidden; opacity: 0;
  transition: width var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.convo .x svg { width: 12px; height: 12px; }
.convo:hover .x, .convo:focus-within .x { width: 20px; opacity: 1; }
.convo:hover .when, .convo:focus-within .when { display: none; }
.convo .x:hover { background: var(--danger-100); color: var(--danger-600); }
.convo .x.edit:hover { background: var(--accent-50); color: var(--accent-600); }
.stage { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--wash-stage); }
.stage .head { display: none; }
.stage .body { background: transparent; }
/* The question map of a longer chat: short lines down the right edge, the
   one in view dark. Resting on a line shows its question in a card. */
.has-tmap { position: relative; }
.tmap { position: absolute; top: calc(var(--bar, 0px) + 36px); right: 16px; z-index: 5; display: flex; flex-direction: column; padding: 8px 5px; border-radius: 12px;
  background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
.tmap[hidden] { display: none; }
.tmap-mark { width: 26px; height: 12px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tmap-mark::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--ink-300); transition: width var(--dur-fast), background var(--dur-fast); }
.tmap-mark:hover::before, .tmap-mark:focus-visible::before { width: 18px; background: var(--ink-600); }
.tmap-mark.on::before { width: 18px; background: var(--ink-900); }
.tmap-mark:focus-visible { outline: none; }
.tmap-peek { position: absolute; right: calc(100% + 10px); width: 340px; transform: translateY(-50%); padding: 14px 16px; border-radius: 16px; pointer-events: none;
  background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge);
  animation: fadein var(--dur-fast) ease-out both; }
.tmap-peek[hidden] { display: none; }
.tmap-peek strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-900); }
.tmap-peek p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.chatpage .stage .body { padding-top: var(--bar); }
/* Consults, the share hub (D128): gSage's island, wider for the tree, over
   the open consult. Collapsed, it is the same pill. */
.hubchat .convos { width: 360px; }
.hubchat:not(.list-collapsed) > .stage { padding-left: 384px; }
.hub .convo-rows { padding: 0 4px; }
.hub .invites { margin: 0 0 10px; }
.hub-sides { display: flex; gap: 4px; padding: 3px; margin-bottom: 10px; border-radius: var(--radius-pill); background: var(--cream-200); }
.hub-sides button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; border: 0; border-radius: var(--radius-pill); background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; }
.hub-sides button.active { background: var(--white); color: var(--accent-700); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.hub-sides .n { font-size: 11.5px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--cream-100); color: var(--ink-700); }
.hub-sides button.active .n { background: var(--accent-50); color: var(--accent-700); }
.hub-note { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.hub-note svg { width: 14px; height: 14px; color: var(--warning-600); }
.hub-tree { display: flex; flex-direction: column; gap: 6px; }
.hub-group { border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.7); border: 1px solid var(--border-subtle); }
.hub-group.none-here:not(.open) { opacity: .7; }
.hub-group-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-strong); cursor: pointer; border-radius: var(--radius-md); text-align: left; }
.hub-group-head:hover { background: var(--cream-50, #faf8f4); }
.hub-group-head .n { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.hub-group.open .hub-group-head .hub-ic .filled { display: inline; }
.hub-list { padding: 0 6px 8px; }
.hub-empty { padding: 4px 12px 6px 38px; margin: 0; }
.hub-chev { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border: 0; padding: 0; background: transparent; color: var(--ink-400, var(--ink-300)); cursor: pointer; border-radius: 4px; transition: transform var(--dur-fast); }
.hub-chev svg { width: 12px; height: 12px; }
.hub-chev.open { transform: rotate(90deg); }
.hub-chev.none { cursor: default; }
.hub-ic { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--accent-600); }
.hub-ic svg { width: 18px; height: 18px; }
.hub-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.hub-row:hover, .hub-row:focus-visible { background: var(--cream-100); outline: none; }
.hub-row.active { background: var(--accent-50); box-shadow: inset 3px 0 0 var(--accent-500); }
.hub-row.active .hub-title { color: var(--accent-700); }
.hub-row.k-casebook .hub-ic { color: var(--success-600); }
.hub-row.k-run .hub-ic { color: var(--warning-600); }
.hub-row.k-plan .hub-ic { color: var(--ink-600); }
.hub-row.k-file .hub-ic, .hub-row.k-direct .hub-ic { color: var(--ink-500); }
.hub-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hub-title { font-size: 13.5px; font-weight: 500; color: var(--text-strong); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hub-meta { display: flex; gap: 8px; font-size: 12px; color: var(--text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hub-meta .tone { font-size: 12px; font-weight: 500; }
.hub-faces { display: flex; flex: none; }
.hub-faces .avatar { width: 22px; height: 22px; font-size: 9.5px; margin-left: -6px; box-shadow: 0 0 0 2px var(--white); }
.hub-count { flex: none; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--cream-200); font-size: 11px; color: var(--ink-700); display: grid; place-items: center; }
.hub-end { opacity: 0; }
.hub-row:hover .hub-end, .hub-row:focus-within .hub-end { opacity: 1; }
/* Children hang from a line, so the path a share came by reads as a tree. */
.hub-kids { position: relative; margin-left: 17px; padding-left: 12px; border-left: 1.5px solid var(--cream-border-input, var(--border-subtle)); }
.hub-kids .hub-row::before { content: ""; position: absolute; left: -12px; top: 50%; width: 10px; border-top: 1.5px solid var(--cream-border-input, var(--border-subtle)); }
.hub-kids .hub-row { padding-top: 5px; padding-bottom: 5px; }
.hub-kids .hub-title { font-size: 13px; font-weight: 400; }

/* An empty Consults page: who to invite, before any conversation exists. */
.consult-start { flex: 1; display: flex; flex-direction: column; align-items: center; padding: var(--bar) var(--space-6) var(--space-8); overflow-y: auto; }
.consult-start-form { width: min(540px, 100%); }
.consult-start-form .row { gap: 8px; }
.consult-start-form .team-row { flex-wrap: nowrap; }
.consult-start-form .team-row .btn { white-space: nowrap; }
.consult-start-form input { flex: 1; min-width: 0; }
.consult-start-form .err { color: var(--danger-600); font-size: 12.5px; margin-top: 6px; min-height: 1em; }

/* PharmaOS: the question is a cream card with dark text; the answer sits
   on the canvas. */
/* The reading size of the thread. It was the page body size, which made
   a paragraph of the answer the largest type on the screen, larger than
   the name of the conversation it belonged to. A step down, with the
   looser leading long clinical prose wants at this measure. */
.msg { max-width: 88%; padding: 12px 16px; border-radius: var(--radius-lg); font-size: 15px; line-height: var(--lh-relaxed); }
.msg.user { align-self: flex-end; background: var(--cream-100); color: var(--ink-900); border: 1px solid var(--cream-border-soft); border-bottom-right-radius: 6px; word-break: break-word; }
/* @mentions: in the bubble, and the line above it saying who it is for. */
.md .mention { color: var(--accent-700, var(--accent-600)); font-weight: 500; }
.msg-from.mine { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; }
.msg-from .to { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-500); margin: 0 6px 3px; }
.msg-from .to svg { width: 12px; height: 12px; }
.msg.user.for-me { border-color: var(--accent-300, var(--accent-600)); }
.mention-pick { position: absolute; left: 12px; bottom: calc(100% + 6px); z-index: 20; min-width: 220px; padding: 4px; border-radius: var(--radius-md);
  background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
.mention-hit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--ink-900); }
.mention-hit.on, .mention-hit:hover { background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px var(--cream-border); }
.mention-name { font-size: 14px; font-weight: 500; }
.composer .box { position: relative; }
/* A colleague's question: their name above it, on the left, in grey. */
.msg-from { align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; }
.msg-from .from { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin: 0 0 4px 4px; }
/* A colleague's question: the same card on the left, a shade lighter, so
   whose question is whose reads from position and name, not colour. */
.msg-from .msg.user { align-self: flex-start; max-width: 100%; background: var(--white); border-color: var(--cream-border); border-bottom-right-radius: var(--radius-lg); border-bottom-left-radius: 6px; }
.msg.user .md a { text-decoration: underline; }
.msg.user .md code, .msg.user .md .md-code { background: rgba(255, 255, 255, 0.7); border-color: var(--cream-border); }
.msg.user .md .md-table { background: rgba(255, 255, 255, 0.6); }
.msg.user .md .md-table th, .msg.user .md .md-table td { border-color: var(--cream-border); }
.msg.bot { align-self: flex-start; background: var(--surface-faint); color: var(--ink-800); border: 1px solid var(--border-subtle); border-bottom-left-radius: 6px; max-width: 96%; }
.msg.bot .who { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--accent-700); margin-bottom: 6px; }
.msg.bot .who svg { width: 12px; height: 12px; }

/* The spark while an answer streams: its colour sweeps through the brand
   gradient. When the turn finishes the class comes off and it settles to
   the accent blue in one step, no fade, which is the "snap". */
@keyframes sparkflow {
  0%   { color: #758DFA; }
  33%  { color: #6BB4F7; }
  66%  { color: #75E7EF; }
  100% { color: #758DFA; }
}
.msg.bot.streaming .who .spark { animation: sparkflow 1.6s linear infinite; }
.msg.bot .who .spark { color: var(--accent-500); }
.msg.bot .answer { word-break: break-word; }
.msg.bot .answer:not(:has(.md)) { white-space: pre-wrap; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 10px; }
/* Headings sized against the text they introduce, not in pixels: every
   level came out at 15px, so in a 16px answer a heading was smaller than
   its own paragraphs and "#" looked the same as "###". In em the scale
   holds wherever .md is used, and the smallest heading never falls below
   the body it heads. Markdown's "#" is rendered as h3, so h3 to h6 is
   the whole range. */
.md .md-h { font-family: var(--font-display); font-weight: 600; margin: 16px 0 6px; color: var(--text-strong); line-height: var(--lh-snug); }
.md h3.md-h { font-size: 1.2em; }
.md h4.md-h { font-size: 1.07em; }
.md h5.md-h, .md h6.md-h { font-size: 1em; }
.md .md-list { margin: 0 0 10px; padding-left: 20px; }
.md .md-list li { margin: 3px 0; }
.md .md-list .md-list { margin: 4px 0 0; }
.md code { background: var(--white); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0 5px; font-size: 12px; }
.md .md-code { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); padding: 10px 12px; font-size: 12px; margin: 0 0 10px; overflow: auto; }
.md .md-table { font-size: 13px; margin: 0 0 10px; background: var(--white); border-radius: var(--radius-xs); display: block; overflow-x: auto; max-width: 100%; }
.md .md-table th, .md .md-table td { padding: 6px 10px; }
/* Whole words in a cell. The answer around it breaks long tokens so a URL
   cannot push the bubble wide, but word-break: break-word also drops a
   cell's smallest possible width to one character -- so instead of the
   table being too wide and scrolling, every column squeezed, and a narrow
   panel spelled "Staging" down the page a letter at a time. With words
   kept whole the table is wider than the panel and overflow-x scrolls it,
   which is what it was there for. */
.md .md-table th, .md .md-table td { overflow-wrap: normal; word-break: normal; }
.md strong { color: var(--text-strong); font-weight: 600; }
.msg.bot.streaming .answer:empty::after { content: ""; display: inline-block; width: 7px; height: 14px; background: var(--accent-400); animation: pulse 1s infinite; vertical-align: text-bottom; border-radius: 1px; }
.msg.bot .steps { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
/* Reasoning and tool steps behind one borderless fold; it folds away when
   the answer starts. The grid row animates the height without measuring. */
.msg.bot .trace { margin: 0 0 6px; }
.msg.bot .trace-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: -2px; padding: 2px; background: none; border: 0; border-radius: var(--radius-xs); font: inherit; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.msg.bot .trace-toggle:hover { color: var(--text-strong); }
.msg.bot .trace-toggle svg { width: 14px; height: 14px; color: var(--text-subtle); transition: transform var(--dur-slow) var(--ease-out); }
.msg.bot .trace.open .trace-toggle svg { transform: rotate(90deg); }
.msg.bot .trace-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 480ms var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.msg.bot .trace.open .trace-body { grid-template-rows: 1fr; opacity: 1; }
.msg.bot .trace-inner { min-height: 0; overflow: hidden; }
/* motion-primitives' Text Shimmer: a highlight as wide as the words sweeps
   across a muted base, clipped to the letters. */
.msg.bot .trace-label.shimmer { color: transparent; background-image: linear-gradient(90deg, transparent calc(50% - var(--spread, 24px)), var(--ink-900), transparent calc(50% + var(--spread, 24px))), linear-gradient(var(--ink-400), var(--ink-400)); background-size: 250% 100%, auto; background-repeat: no-repeat, padding-box; -webkit-background-clip: text; background-clip: text; animation: text-shimmer 2s linear infinite; }
@keyframes text-shimmer { from { background-position: 100% center; } to { background-position: 0% center; } }
/* motion-primitives' Border Trail: a block travels the bubble's rounded
   edge on an offset path, masked so only the border ring shows it. */
.msg.bot { position: relative; }
.msg.bot > .trail { position: absolute; inset: -1px; border: 1px solid transparent; border-radius: inherit; pointer-events: none; mask-image: linear-gradient(transparent, transparent), linear-gradient(#000, #000); mask-clip: padding-box, border-box; mask-composite: intersect; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.msg.bot.streaming > .trail { opacity: 1; }
.msg.bot > .trail i { position: absolute; width: 72px; aspect-ratio: 1; offset-path: rect(0 auto auto 0 round 20px); background: linear-gradient(to left, var(--accent-300), var(--accent-500), var(--accent-300)); box-shadow: 0 0 24px 12px rgba(77, 118, 240, 0.35); animation: border-trail 5s linear infinite; animation-play-state: paused; }
.msg.bot.streaming > .trail i { animation-play-state: running; }
@keyframes border-trail { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .msg.bot > .trail { display: none; } .msg.bot .trace-label.shimmer { color: inherit; background: none; } }
.msg.bot .trace .steps { margin: 0; padding: 4px 0 2px; }
.step { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.step .st { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); flex: none; position: relative; top: -1px; }
.step .st.running { background: var(--accent-400); animation: pulse 1s infinite; }
.step .st.done { background: var(--success-500); }
.step .st.error { background: var(--danger-500); }
.step .tool { color: var(--ink-700); }
/* While a lookup runs its words carry the sheen (core/motion.ts shimmer);
   the reasoning header does the same while the block is still written. */
.step .tool.mp-shimmer { color: transparent; background-image: linear-gradient(90deg, var(--ink-500) 40%, var(--ink-900) 50%, var(--ink-500) 60%); }
.msg.bot .reason .overline .mp-shimmer { color: transparent; background-image: linear-gradient(90deg, var(--accent-400) 40%, var(--accent-700) 50%, var(--accent-400) 60%); }
.step details { display: inline; min-width: 0; }
.step details:not([open]) pre { display: none; }
.step summary { display: inline; cursor: pointer; color: var(--accent-600); font-size: 12px; }
.step pre { margin-top: 6px; max-height: 160px; overflow: auto; font-size: 11.5px; background: var(--white); padding: 8px; border-radius: var(--radius-xs); border: 1px solid var(--border-subtle); }
/* Reasoning: visible, formatted, quieter than the answer. Same markdown
   renderer, smaller and muted, with a hairline on the left so the eye
   separates "how it got there" from "what it says". */
.msg.bot .reason { margin: 2px 0 6px; padding: 8px 12px 8px 14px; border-left: 2px solid var(--accent-200); background: rgba(74, 91, 238, 0.035); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.msg.bot .reason .overline { font-size: 10.5px; color: var(--accent-600); margin-bottom: 4px; }
.msg.bot .reason-body .md { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.msg.bot .reason-body .md .md-h { font-size: 13px; color: var(--text-muted); }
.msg.bot .reason-body .md p { margin: 0 0 6px; }

/* Charts the agent drew. A white card inside the answer; the SVG scales
   to the card's width. Sources always print under it. */
.chart { margin: 10px 0 12px; padding: 12px 14px; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--ink-800); }
.chart figcaption { font-size: 13px; margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.chart figcaption strong { color: var(--text-strong); }
.chart .chart-cap { color: var(--text-muted); font-size: 12.5px; }
/* A Plotly figure. Its toolbar only shows on hover, top right, as pills. */
.chart-plot { width: 100%; max-width: 760px; }
.chart-plot .modebar { background: transparent !important; }
.chart-plot .modebar-group { background: var(--acrylic-light) !important; border-radius: var(--radius-pill); padding: 2px 4px !important; box-shadow: var(--acrylic-shadow); }
.chart-plot .modebar-btn path { fill: var(--ink-500) !important; }
.chart-plot .modebar-btn:hover path, .chart-plot .modebar-btn.active path { fill: var(--accent-600) !important; }
.chart .chart-warn { margin-top: 8px; padding: 6px 10px; border-radius: var(--radius-xs); background: var(--warning-100); color: var(--warning-600); font-size: 12px; }
.chart .chart-foot { margin-top: 8px; display: flex; gap: 10px; align-items: baseline; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.chart .chart-srcs { flex: 1; min-width: 0; }
.chart .chart-srcs .overline { font-size: 10.5px; }
.chart .chart-srcs ol { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.chart .chart-src { display: flex; gap: 8px; align-items: baseline; line-height: 1.4; }
.chart .chart-src .src-n { font-family: var(--font-mono); font-size: 11px; flex: none; width: 14px; text-align: right; }
.chart .chart-src a { color: var(--accent-600); text-decoration: none; }
.chart .chart-src a:hover { text-decoration: underline; }
.chart .chart-data summary { cursor: pointer; color: var(--accent-600); }
.chart .chart-data pre { margin-top: 6px; max-height: 200px; overflow: auto; font-size: 11px; background: var(--surface-sunken); padding: 8px; border-radius: var(--radius-xs); }
.chart-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: step; }
.chart-steps li { position: relative; padding-left: 28px; }
.chart-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-500); color: var(--white); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.chart-steps li + li::after { content: ""; position: absolute; left: 9px; top: -6px; height: 10px; border-left: 2px solid var(--accent-200); }
.chart-step { padding: 7px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); background: var(--surface-faint); font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.chart-step-text { color: var(--text-strong); }
.chart-steps li.decision .chart-step { border-style: dashed; background: var(--white); }
.chart-steps li.deviation .chart-step { border-color: var(--warning-300); background: var(--warning-100); }
.chart-steps li.deviation::before { background: var(--warning-600); }
.chart-step-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--warning-600); }
.chart-step-note { color: var(--text-muted); font-size: 12px; }
.chart-branches { display: flex; gap: 12px; flex-wrap: wrap; margin: 3px 0 2px 10px; font-size: 12px; color: var(--text-muted); }
.chart-branch.yes { color: var(--success-600); }
.chart-branch.no { color: var(--warning-600); }
/* Mermaid: a toolbar, then a scrollable stage the SVG scales inside. */
.chart-tools { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 12px; color: var(--text-muted); }
.chart-tools .btn { min-width: 26px; padding: 2px 6px; font-family: var(--font-mono); }
.chart-pick-wrap { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.chart-pick { width: auto; padding: 2px 6px; font-size: 12px; border-radius: var(--radius-xs); }
.chart-stage { overflow: auto; max-height: 70vh; padding: 8px; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); }
.chart-stage svg { display: block; max-width: 100%; height: auto; transition: transform var(--dur-fast); }
.chart-mermaid[data-theme=contrast] .chart-stage { background: #fff; border-color: #000; }
.chart-mermaid[data-theme=inverted] .chart-stage { background: #000; border-color: #000; }
.chart-stage.pan { cursor: grab; user-select: none; touch-action: none; }
.chart-stage.pan.grabbing { cursor: grabbing; }
.chart-tools .btn.on { background: var(--accent-50); color: var(--accent-600); }
.chart-tools .btn svg { width: 14px; height: 14px; }
.chart-err { color: var(--danger-600); font-size: 12.5px; margin-bottom: 6px; }
.chart-raw { font-size: 11.5px; white-space: pre-wrap; max-height: 200px; overflow: auto; background: var(--surface-sunken); padding: 8px; border-radius: var(--radius-xs); }

/* Sources under the answer. Numbered, one line each, host name faint. */
.sources { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.sources ol { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.sources li { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; line-height: 1.4; min-width: 0; }
.sources .src-n { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); flex: none; width: 16px; text-align: right; }
.sources a { color: var(--accent-600); text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.sources a:hover { text-decoration: underline; }
/* Sources that arrive on a live answer open downward and their rows come
   in one after another. A stored answer draws them still. */
.src-slot.arrive { display: grid; animation: src-open 480ms var(--ease-out) both; }
.src-slot.arrive > .sources { min-height: 0; overflow: hidden; }
.src-slot.arrive .sources > .overline, .src-slot.arrive .sources > ol > li, .src-slot.arrive .sources > .src-more { animation: src-row var(--dur-slow) var(--ease-out) both; animation-delay: 120ms; }
.src-slot.arrive .sources > ol > li:nth-child(1) { animation-delay: 180ms; }
.src-slot.arrive .sources > ol > li:nth-child(2) { animation-delay: 240ms; }
.src-slot.arrive .sources > ol > li:nth-child(3) { animation-delay: 300ms; }
.src-slot.arrive .sources > ol > li:nth-child(4) { animation-delay: 360ms; }
.src-slot.arrive .sources > ol > li:nth-child(5) { animation-delay: 420ms; }
.src-slot.arrive .sources > ol > li:nth-child(6) { animation-delay: 480ms; }
.src-slot.arrive .sources > .src-more { animation-delay: 540ms; }
@keyframes src-open { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
@keyframes src-row { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sources .src-host { font-size: 11px; color: var(--text-muted); flex: none; }
.src-more { margin-top: 4px; }
/* Was scoped to .sources, so the same fold on the Flags tab kept the
   page's 16px and became the largest thing in its card. */
.src-more > summary { font-size: var(--fs-case-note); color: var(--text-muted); cursor: pointer; }
.src-more > summary .when-open, .src-more[open] > summary .when-shut { display: none; }
.src-more[open] > summary .when-open { display: inline; }
/* Inline citations: quieter than body links so they read as footnotes. */
.msg.bot .answer a { color: var(--accent-600); text-decoration: none; border-bottom: 1px dotted currentColor; }
.msg.bot .answer a:hover { border-bottom-style: solid; }
.msg.bot .foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; color: var(--text-subtle); font-size: 12px; }
.msg.bot .foot .btn.on { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); }
.msg .foot .btn svg.fluent, .msg-tools .btn svg.fluent { width: 15px; height: 15px; }
.foot-tools { display: inline-flex; gap: 4px; }
.msg.bot .foot .feedback-tools { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--border-subtle); }
/* A question's Copy sits under its bubble and shows on hover. */
.msg.user { position: relative; }
.msg-tools { position: absolute; right: 6px; bottom: -30px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--dur-fast); }
.msg.user:hover .msg-tools, .msg-tools:focus-within { opacity: 1; }
.msg.user:has(.msg-tools) { margin-bottom: 26px; }
.msg.bot .err { color: var(--danger-600); background: var(--danger-100); padding: 8px 10px; border-radius: var(--radius-xs); font-size: 13px; margin-top: 8px; }

/* ---- annotate ----------------------------------------------------------- */

.annotate { display: grid; grid-template-rows: 72px 1fr; height: 100%; min-height: 0; background: var(--wash-stage); }
/* The header is an island, the same pill as the composer's bar. */
.ann-head { display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 6px 6px 6px 16px; border-radius: var(--radius-pill);
  background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); position: relative; z-index: 6; }
.ann-head h1 { font: 600 16px var(--font-display); }
.ann-head .ann-trail { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ann-head .ann-pageno { color: var(--ink-600); font-size: 13px; white-space: nowrap; }
/* The composer's bar: trail, a chevron, then the editable plan name. */
.cmp-bar .crumb-sep { display: grid; place-items: center; width: 16px; color: var(--text-subtle); }
.cmp-bar .crumb-sep svg { width: 13px; height: 13px; }
.ann-head .hint { color: var(--ink-600); font-size: 13px; }
.ann-head .ann-group { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--cream-border-input); border-radius: var(--radius-sm); background: var(--white); }
.iconbtn.sq { width: 36px; height: 36px; border-radius: var(--radius-xs); color: var(--ink-800); }
.iconbtn.sq:disabled { color: var(--ink-300); background: transparent; cursor: default; }
.btn.pill { border-radius: var(--radius-pill); padding-left: 18px; padding-right: 18px; }
/* The page strip and the side panel are islands too, like the composer's
   panels: rounded acrylic cards with the stage showing around them. */
.ann-work { display: grid; grid-template-columns: 132px minmax(0, 1fr) 300px; gap: 12px; padding: 12px; min-height: 0; }
.ann-pages { padding: 12px; overflow: auto; border-radius: var(--radius-lg); background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
.ann-pages .thumb { box-shadow: var(--shadow-xs); transition: transform var(--dur-fast), box-shadow var(--dur-fast); }
.ann-pages .thumb:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ann-pages .thumb { display: block; width: 100%; border: 1px solid var(--cream-border); border-radius: 6px; background: var(--white); margin-bottom: 10px; position: relative; padding: 0; cursor: pointer; overflow: hidden; aspect-ratio: 3 / 4; }
.ann-pages .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ann-pages .thumb svg { width: 24px; height: 24px; margin: 30% auto; display: block; color: var(--ink-400); }
.ann-pages .thumb.on { outline: 2px solid var(--accent-600); outline-offset: 1px; }
.ann-pages .thumb .n { position: absolute; right: 5px; bottom: 5px; font: 11px var(--font-mono); background: var(--cream-200); padding: 0 5px; border-radius: 4px; color: var(--ink-700); }
.ann-pages .thumb .dot { position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--warning-500); box-shadow: 0 0 0 2px var(--white); }
.ann-stage { position: relative; min-width: 0; min-height: 0; display: grid; }
.ann-zoom { left: 16px; bottom: 14px; }
.ann-canvas { place-items: start center; padding-bottom: 64px; }
.ann-canvas { position: relative; display: grid; place-items: center; overflow: auto; padding: 20px; min-height: 0; }
.ann-canvas canvas, .ann-canvas .konvajs-content { border-radius: 2px; }
.ann-canvas .konvajs-content { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .8); background: var(--white); animation: rise var(--dur-slow) var(--ease-out) both; }
.ann-toolbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 4px; padding: 5px; border-radius: var(--radius-pill); background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
.ann-tool { width: 38px; height: 38px; border-radius: var(--radius-pill); border: 0; background: transparent; display: grid; place-items: center; color: var(--ink-800); position: relative; cursor: pointer; }
.ann-tool:hover { background: rgba(255, 255, 255, .7); }
.ann-tool.on { background: var(--accent-600); color: var(--white); }
.ann-tool svg { width: 18px; height: 18px; }
.ann-tool .k { position: absolute; bottom: -15px; font: 10px var(--font-mono); color: var(--ink-500); }
.ann-tool:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.ann-sep { width: 1px; background: rgba(17, 19, 21, .12); margin: 6px 4px; }
.viewer-stage { position: relative; }
.viewer-layer { position: absolute; pointer-events: none; }
.ctx-marks { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: inherit; color: inherit; padding: 0 4px; border-radius: var(--radius-xs); }
.ctx-marks:hover { background: var(--cream-300); }
.ctx-marks.on { color: var(--accent-700); }
.ann-textedit { position: absolute; z-index: 6; min-height: 32px; padding: 6px 8px; border: 1px solid var(--accent-600); border-radius: 8px; background: var(--white); color: var(--ink-900); font-family: var(--font-sans); line-height: 1.3; box-shadow: var(--shadow-md), var(--ring-focus); resize: none; }
.ann-side { border-radius: var(--radius-lg); background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); padding: 18px; overflow: auto; display: flex; flex-direction: column; gap: 18px; }
.ann-side section { padding: 14px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7); box-shadow: var(--shadow-xs), var(--sheen-top); }
.ann-side h3 { font-size: 13px; font-weight: 600; color: var(--ink-600); margin-bottom: 8px; }
.ann-side .hint { font-size: 12.5px; color: var(--ink-600); line-height: 1.45; }
.ann-side .swatches { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ann-side .sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--cream-border-input); cursor: pointer; padding: 0; }
.ann-side .sw.on { box-shadow: 0 0 0 2px var(--accent-600); }
.ann-side .ver { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 10px; align-items: center; padding: 10px; border: 1px solid var(--cream-border); border-radius: 10px; background: rgba(255, 255, 255, .85); font-size: 13px; margin-top: 8px; }
/* Name beside the avatar and the button; time and note run full width below. */
.ann-side .ver > .grow { display: contents; }
.ann-side .ver > .grow > .who { grid-column: 2; grid-row: 1; }
.ann-side .ver > .grow > .meta { grid-column: 1 / -1; }
.ann-side .ver > .btn { grid-column: 3; grid-row: 1; }
.ann-side .ver:first-of-type { margin-top: 0; }
.ann-side .ver.on { border-color: var(--accent-600); background: var(--accent-50); }
.ann-side .ver .av { width: 28px; height: 28px; border-radius: 50%; background: #7C47CD; color: var(--white); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.ann-side .ver .who { font-weight: 500; }
.ann-side .ver .meta { color: var(--ink-600); font-size: 12px; }
.ann-side .ver .badge { font-size: 11px; padding: 0 6px; }
.ann-side textarea { width: 100%; min-height: 64px; margin-bottom: 8px; }
@media (max-width: 1100px) { .ann-work { grid-template-columns: 96px minmax(0, 1fr) 260px; } }

/* ---- search palette ----------------------------------------------------- */

.navbtn.search-nav { margin-bottom: var(--space-3); border: 1px solid var(--cream-border); background: rgba(255, 255, 255, .55); }
.navbtn.search-nav:hover { background: rgba(255, 255, 255, .85); }
.navkbd { margin-left: auto; font: 500 10.5px var(--font-mono); color: var(--ink-500); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--cream-border); background: var(--cream-100); }
.palette-overlay { position: fixed; inset: 0; z-index: 900; display: flex; justify-content: center; align-items: flex-start; padding-top: 14vh; background: rgba(40, 34, 22, .18); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
.palette { width: min(680px, calc(100vw - 32px)); border-radius: 18px; overflow: hidden; background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: 0 30px 80px rgba(40, 30, 10, .28), var(--acrylic-shadow), var(--acrylic-edge); }
.palette-hit { transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.palette-box { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 58px; border-bottom: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 1px 0 var(--cream-border); }
.palette-box svg { width: 20px; height: 20px; flex: none; color: var(--accent-600); }
.palette-box input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; height: 100%; font-size: 17px; font-family: var(--font-display); box-shadow: none; color: var(--ink-900); }
.palette-box input:hover, .palette-box input:focus-visible { background: transparent; box-shadow: none; outline: none; }
.palette-list { padding: 8px; min-height: 64px; max-height: 60vh; overflow: auto; }
.palette-hit { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--ink-900); }
.palette-hit.on { background: rgba(255, 255, 255, .85); box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--cream-border); }
.palette-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--cream-200); color: var(--ink-700); }
.palette-hit.on .palette-ic { background: var(--accent-100, var(--cream-300)); color: var(--accent-700, var(--ink-900)); }
.palette-ic svg { width: 17px; height: 17px; }
.palette-hit .t { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-hit .d { display: block; font-size: 12.5px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-kind { flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); }
.palette-none { padding: 18px 14px; font-size: 14px; color: var(--ink-600); }
.palette-foot { display: flex; gap: 18px; padding: 8px 18px; font-size: 12px; color: var(--ink-600); border-top: 1px solid var(--cream-border); background: rgba(255, 255, 255, .35); }
.palette-foot kbd { font: 500 11px var(--font-mono); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--cream-border); background: var(--cream-100); color: var(--ink-700); margin-right: 4px; }

/* ---- skills and analyses ------------------------------------------------ */

.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-4); }
.lib-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.lib-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 8px 24px rgba(60, 50, 30, .10)); }
.lib-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 16px; background: var(--cream-50); border: 1px solid transparent; transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.lib-card:hover { background: var(--cream-100); box-shadow: var(--shadow-sm); }
.lib-head { display: flex; align-items: center; gap: 10px; }
.lib-head h3 { flex: 1; min-width: 0; font-size: 17px; margin: 0; }
.lib-ic { width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--white); color: var(--accent-600); box-shadow: var(--shadow-xs); }
.lib-ic svg { width: 17px; height: 17px; }
.lib-desc { margin: 0; font-size: 14px; color: var(--ink-700); }
.lib-body { margin: 0; font-size: 13.5px; color: var(--ink-600); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.lib-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--cream-border); }
.seg { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--cream-200); gap: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: var(--radius-pill); font: inherit; font-size: 14px; cursor: pointer; color: var(--ink-700); }
.seg button.on { background: var(--white); color: var(--ink-900); font-weight: 500; box-shadow: var(--shadow-xs); }

/* ---- document facets and tags ------------------------------------------ */
/* The bar above a long list, and the pager under it. */
.listtools { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin: 16px 0 10px; padding: 6px; border: 1px solid var(--cream-border); border-radius: var(--radius-md, 12px); background: rgba(255, 255, 255, .72); box-shadow: var(--shadow-xs); }
/* Every control in the bar is 34px tall and sits on the same line; a
   label with a select inside would otherwise ride on the baseline. */
.listtools > * { align-self: center; flex: none; }
.listtools .tb-pick, .listtools .view-seg, .listtools .btn.sm { height: 34px; box-sizing: border-box; margin: 0; }
.listtools .view-seg { align-items: center; }
/* One line, always: the search gives way first, then the buttons drop
   their words and keep their glyphs. */
.listtools .searchbox { flex: 1 1 260px; min-width: 150px; max-width: 360px; border-color: transparent; background: var(--cream-50); }
.listtools .searchbox:focus-within { background: var(--white); }
.listtools .searchbox input { min-width: 0; width: 100%; }
.listtools .grow { flex: 1 1 0; min-width: 0; }
.listtools .tb-pick { flex: 0 1 auto; min-width: 0; }
.listtools .tb-pick select.sm { min-width: 0; text-overflow: ellipsis; }
@container pane (max-width: 1040px) {
  .listtools .btn .btn-label { display: none; }
  .listtools .btn.sm { padding-left: 9px; padding-right: 9px; gap: 0; }
  .listtools .tb-pick select.sm { max-width: 150px; }
}
@container pane (max-width: 760px) {
  .listtools { gap: 6px; }
  .listtools .searchbox { min-width: 120px; }
  .listtools .tb-pick select.sm { max-width: 104px; }
}
.tb-pick { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 2px 0 10px; border: 1px solid var(--cream-border); border-radius: var(--radius-sm); background: var(--white); color: var(--ink-600); cursor: pointer; }
.tb-pick:hover { border-color: var(--cream-border-input); }
.tb-pick:focus-within { border-color: var(--accent-400); box-shadow: var(--ring-focus); }
.tb-pick .fluent { width: 16px; height: 16px; flex: none; }
.tb-pick .grade-label { flex: none; }
/* Research: groups, and the .skill installer. */
.lib-group + .lib-group { margin-top: 26px; }
.lib-group-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 10px; }
.modal.install { width: min(620px, calc(100vw - 40px)); }
/* The install dialog's body holds the result, the plan and the review: it
   scrolls, the heading stays put. */
.modal.wf-details > .install-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin-right: -14px; padding-right: 14px; }
.install-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; padding: 34px 20px; cursor: pointer; }
.install-drop .ic, .install-drop .fluent { width: 28px; height: 28px; flex: none; color: var(--accent-600); }
.install-wait { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 22px 18px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.install-wait .name { font-weight: 500; margin-bottom: 2px; }
.spin.big { width: 28px; height: 28px; border-width: 3px; }
/* Loading screen: a ring in the brand gradient, drawn as a conic sweep with
   the centre cut out, and the text under it. */
/* It waits a beat before showing: what arrives inside 160 ms never flashes
   a ring, and what takes longer fades the ring in rather than popping it. */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 64px 0; color: var(--text-muted); font-size: 14px; animation: fadein var(--dur-base) ease-out 160ms both; }
.loading p { margin: 0; }
.loading .ring { width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 18%, var(--brand-indigo) 30%, var(--brand-blue) 60%, var(--brand-cyan) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  animation: spin 0.9s linear infinite; }
.loading.sm { padding: 40px 0; gap: 10px; font-size: 13px; }
.loading.sm .ring { width: 28px; height: 28px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.view-in { animation: rise var(--dur-base) ease-out both; }
.install-result { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md); }
.install-result h3 { margin: 4px 0 6px; font-size: 17px; }
.install-result p { margin: 0 0 4px; font-size: 14px; line-height: 1.5; }
.install-result.ok { background: var(--success-50, #eef8f1); box-shadow: inset 0 0 0 1px var(--success-200, #bfe3cb); }
.install-result.bad { background: var(--danger-100); box-shadow: inset 0 0 0 1px var(--danger-200, #f3c1c1); }
.install-result.bad .overline { color: var(--danger-600); }
/* A medical-direction warning, or a package installed over one. */
.install-result.warn, .install-result.bad.warn { background: var(--warning-100); box-shadow: inset 0 0 0 1px var(--warning-500); }
.install-result.warn .overline { color: var(--warning-600); }
.install-files { list-style: none; padding-left: 0 !important; }
.install-files li { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; }
.tb-pick select.sm, .tb-pick select.sm:hover, .tb-pick select.sm:focus-visible { border: 0; background: transparent; box-shadow: none; height: 32px; padding: 0 6px 0 0; color: var(--ink-900); cursor: pointer; }
.listtools .btn .fluent { width: 16px; height: 16px; flex: none; }
.pagelist { scroll-margin-top: calc(var(--bar) + 16px); }
/* Files: the scopes beside the list. Each is a preset over the same facets
   the list filters by, so the rail and the tag bar can never disagree. The
   rail folds above the list on a narrow pane. */
/* The drop zone with the storage card beside it, the same height; the
   scope tabs share .tabs with Workflows and Administration and sit under. */
.drop-row { display: flex; align-items: stretch; gap: 12px; }
.drop-row .drop { flex: 1; min-width: 0; }
.drop-row .scope-quota { flex: none; display: flex; }
.scope-quota .quota { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 190px; margin: 0; padding: 16px 18px; border: 1px solid var(--cream-border); border-radius: var(--radius-lg); background: var(--white); }
.scope-quota .quota-row { display: flex; flex-direction: column; gap: 2px; font-size: 13px; white-space: nowrap; }
.scope-quota .quota-row .muted { font-size: 11.5px; line-height: 1.35; white-space: normal; }
.scope-quota .progress { height: 4px; }
.scope-quota .quota.clickable { cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); }
.scope-quota .quota.clickable:hover, .scope-quota .quota.clickable:focus-visible { background: var(--cream-100); border-color: var(--cream-border-input); outline: none; }
.scope-tabs { margin-top: 14px; overflow-x: auto; scrollbar-width: none; }

/* A sideways-scrolling row (widgets.scrollRow). The row keeps its own look
   and margins; the chevrons sit over its ends, centred on its height, and
   the row fades under whichever end has more. A mask, not a white fade, so
   it works on any background. */
.hscroll { position: relative; min-width: 0; }
.hscroll > .hs-row { overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.hscroll > .hs-row::-webkit-scrollbar { display: none; }
.hscroll.more-right > .hs-row { mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.hscroll.more-left > .hs-row { mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); }
.hscroll.more-left.more-right > .hs-row { mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.hs-chev { position: absolute; z-index: 2; bottom: var(--hs-bottom, 0); height: var(--hs-height, 100%); width: 28px; display: grid; place-items: center; border: 0; padding: 0; background: none; cursor: pointer; color: var(--ink-600); }
.hs-chev::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--white); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.hs-chev svg { position: relative; width: 14px; height: 14px; }
.hs-chev.left { left: -4px; }
.hs-chev.left svg { transform: rotate(180deg); }
.hs-chev.right { right: -4px; }
.hs-chev:hover { color: var(--accent-700); }
.hs-chev:hover::before { border-color: var(--accent-300); box-shadow: var(--shadow-md); }
.hs-chev[hidden] { display: none; }
/* A tab row has a margin under it; the chevrons centre on the tabs, not on
   the gap below. */
.hscroll:has(> .tabs) { --hs-bottom: var(--space-5); --hs-height: calc(100% - 14px - var(--space-5)); }
.scope-tabs::-webkit-scrollbar { display: none; }
.scope-tabs button { flex: none; }
/* Folders mode: a file browser under the toolbar. The tree on the left
   with the hierarchy picker at its head; an address bar with Back,
   Forward, Up and the path over the table; subfolders in a table of their
   own above the files. */
.folder-pane { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; align-items: start; }
.folder-main { min-width: 0; }
.file-tree { display: flex; flex-direction: column; gap: 0; padding: 8px; border: 1px solid var(--cream-border); border-radius: var(--radius-md); background: rgba(255, 255, 255, .6); }
.file-tree .scope { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 13.5px; color: var(--ink-800); cursor: pointer; text-align: left; transition: background var(--dur-fast), color var(--dur-fast); }
.file-tree .scope:hover { background: var(--cream-300); color: var(--ink-900); }
.file-tree .scope.on { background: var(--cream-300); font-weight: 500; }
.file-tree .scope-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-tree .scope-n { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-subtle); }
.file-tree .scope.on .scope-n { color: var(--ink-700); }
.file-tree .tree-head { padding: 0 0 8px; }
.file-tree .tree-head select.tree-hier { width: 100%; height: 32px; }
.file-tree .tree-body { display: flex; flex-direction: column; gap: 1px; max-height: calc(100dvh - var(--bar) - 220px); overflow-y: auto; }
@container pane (max-width: 820px) {
  .folder-pane { grid-template-columns: minmax(0, 1fr); }
  .file-tree .tree-body { max-height: 240px; }
}
/* The folders table: name, what it holds, when. Sits above the files. */
.folders-table { table-layout: fixed; width: 100%; margin-bottom: 4px; }
.folders-table col.fc-holds { width: 160px; }
.folders-table col.fc-when { width: 90px; }
.folders-table col.fc-open { width: 40px; }
.folders-table td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.folders-table .fcol-open { text-align: right; }
.folders-table .fcol-open .iconbtn { opacity: 0; transition: opacity var(--dur-fast); }
.folders-table tr:hover .fcol-open .iconbtn, .folders-table tr:focus-within .fcol-open .iconbtn { opacity: 1; }
.folders-table + .files-table { margin-top: 10px; }
.folders-table tr.folder-row { cursor: default; user-select: none; }
.folders-table tr.folder-row:hover td { background: var(--cream-100); }
.folders-table tr.folder-row.selected td { background: var(--accent-50, var(--cream-200)); }
.folders-table tr.folder-row:focus-visible { outline: none; }
.folders-table tr.folder-row:focus-visible td { box-shadow: inset 0 0 0 2px var(--accent-300, var(--accent-600)); }
.folders-table .folder-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--accent-600); }
.folders-table .folder-ic .fluent, .folders-table .folder-ic svg { width: 18px; height: 18px; }
.folders-table .folder-name { font-weight: 600; color: var(--text-strong); }
.folders-table .file-line { display: flex; align-items: center; gap: 6px; min-width: 0; height: 24px; }
.file-tree .tree-node { gap: 4px; min-height: 28px; padding-top: 3px; padding-bottom: 3px; padding-right: 8px; font-size: 13px; user-select: none; }
.file-tree div.tree-node:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.file-tree .tree-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--ink-500); }
.file-tree .tree-ic .fluent, .file-tree .tree-ic svg { width: 16px; height: 16px; }
.file-tree .tree-node.on .tree-ic { color: var(--accent-600); }
.file-tree .tree-caret { width: 18px; height: 18px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink-400); cursor: pointer; }
.file-tree .tree-caret .fluent { width: 11px; height: 11px; transition: transform var(--dur-fast); }
.file-tree .tree-caret.open .fluent { transform: rotate(90deg); }
.file-tree button.tree-caret:hover { background: var(--cream-400, var(--cream-300)); color: var(--ink-700); }
.file-tree .tree-caret.leaf { cursor: default; }
.folder-bar { display: flex; align-items: center; gap: 4px; margin: 0 2px 8px; min-height: 36px; padding: 2px 6px; border: 1px solid var(--cream-border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .6); }
.folder-bar .iconbtn { width: 30px; height: 30px; }
.folder-bar .iconbtn .fluent { width: 16px; height: 16px; }
.folder-bar .iconbtn:disabled { opacity: .35; }
.folder-bar .folder-path { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; margin: 0 0 0 6px; min-height: 0; flex-wrap: nowrap; }
.folder-bar .folder-path .crumb { padding-top: 0; padding-bottom: 0; height: 30px; }
.folder-bar .folder-what { line-height: 30px; }
.folder-bar .folder-crumb { max-width: 320px; }
.folder-bar .folder-crumb > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-bar .folder-what { flex: none; white-space: nowrap; }
.folder-tiles + .ftiles { margin-top: 10px; }
/* File rows, laid out like Explorer's Content view: a large icon, the
   name with its badges on the first line, where it came from and its
   tags on the second, and at the right a two-line block of status with
   size, then the date. Nothing is cut to a column, so nothing clips; a
   long name wraps once. Actions appear when the pointer is on the row. */
.files-table td { padding-top: 8px; padding-bottom: 8px; vertical-align: middle; }
.files-table .fr { display: flex; align-items: center; gap: 12px; min-width: 0; }
.files-table .fr-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; }
.files-table .fr-ic .file-ic { width: 30px; height: 30px; margin: 0; color: var(--ink-500); }
.files-table .fr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.files-table .fr-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.files-table .fr-name .name { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.files-table .fr-name .badge.xs { display: inline-flex; flex: none; gap: 4px; margin-left: 0; padding: 0 6px; font-size: 10.5px; line-height: 16px; }
.files-table .fr-name .badge.xs .dot { width: 5px; height: 5px; }
.files-table .fr-line2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--text-muted); min-width: 0; }
.files-table .fr-fact { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.files-table .fr-fact .linkbtn { font-size: inherit; }
.files-table .fr-tags { display: inline-flex; align-items: center; }
.files-table .fr-tags .tag-row { margin: 0; }
.files-table .fr-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
.files-table .fr-meta-top { display: inline-flex; align-items: center; gap: 8px; }
/* The actions pill: hidden until the pointer is on the row or a button
   in it has focus, then it floats over the right end of the meta cell,
   covering the size and date. No column is held empty for it. */
.files-table td.col-meta { position: relative; }
.files-table .fr-actions { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 3px 4px; border: 1px solid var(--cream-border); border-radius: var(--radius-pill); background: var(--white); box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); }
.files-table .fr-actions .iconbtn.xs { width: 28px; height: 28px; flex: none; }
.files-table .fr-actions .btn.xs { flex: none; }
.files-table tr:hover .fr-actions, .files-table tr:focus-within .fr-actions { opacity: 1; pointer-events: auto; }
.files-table tr.doc-kid .fr-ic { width: 28px; height: 28px; margin-left: 24px; }
.files-table tr.doc-kid .fr-ic .file-ic { width: 22px; height: 22px; }
.files-table tr.doc-kid .fr-name .name { font-size: 13px; }
/* The meta head holds two sort buttons side by side. */
.files-table th.col-meta { text-align: right; }
.files-table .th-pair { display: inline-flex; justify-content: flex-end; gap: 2px; }
.files-table .th-pair .th-sort { width: auto; padding: 8px 8px; }
.ftile.folder-tile { cursor: pointer; padding: 0; font: inherit; text-align: left; color: inherit; }
.ftile.folder-tile:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.ftile.folder-tile .folder-pic { display: grid; place-items: center; color: var(--accent-600); background: var(--cream-100); }
.ftile.folder-tile .folder-pic .fluent { width: 40px; height: 40px; }
.ftiles.sm .ftile.folder-tile .folder-pic .fluent { width: 28px; height: 28px; }
@container pane (max-width: 820px) {
  .drop-row { flex-direction: column; }
  .drop-row .scope-quota .quota { min-width: 0; }
}
/* The files table: fixed column shares so rows line up whatever is in
   them. Long text clips to two lines; the whole of it is a callout on
   hover. The name is the one column that grows. */
/* Column widths live on a colgroup so the File column always gets what
   is left, whatever the pane width. */
.files-table { table-layout: fixed; width: 100%; }
.files-table col.c-tick { width: 30px; }
.files-table col.c-file { width: auto; }
.files-table col.c-meta { width: 170px; }
.files-table td.col-file { min-width: 0; }
.clip { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.clip-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.files-table .source-run { display: inline; max-width: 100%; text-align: left; }
.files-table .source-run .source-title { display: inline; }
/* Sortable headers: the button fills the cell; the active one shows its
   arrow and reads a shade darker. */
.files-table th.sortable { padding: 0; }
.files-table .th-sort { display: inline-flex; align-items: center; gap: 4px; width: 100%; padding: 8px 12px; border: 0; background: transparent; font: inherit; font-weight: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.files-table .th-sort:hover { color: var(--ink-900); background: var(--cream-200); }
.files-table th.sorted .th-sort { color: var(--ink-900); }
.files-table .th-sort .fluent { width: 14px; height: 14px; flex: none; }
/* The stats dialog reuses the landing's storage and donut cards. */
.modal.fstats { position: relative; width: min(880px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); overflow-y: auto; }
.modal.fstats .modal-text { margin-right: 40px; }
.modal.fstats .modal-text p.small { font-family: var(--font-sans); font-size: 13.5px; color: var(--text-muted); margin: 6px 0 0; }
.modal.fstats .fstore-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.modal.fstats .fstats-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; }
.modal.fstats .fstats-close .fluent { width: 16px; height: 16px; }
.pager { display: flex; align-items: center; gap: 4px; margin-top: 14px; }
.pager .pg { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 13px; color: var(--ink-700); cursor: pointer; display: inline-grid; place-items: center; }
.pager .pg:hover:not(:disabled) { background: var(--cream-200); }
.pager .pg.on { background: var(--white); border-color: var(--cream-border); color: var(--ink-900); font-weight: 600; box-shadow: var(--shadow-xs); }
.pager .pg:disabled { opacity: .35; cursor: default; }
.pager .pg .fluent { width: 14px; height: 14px; }
.pager .pg-gap { padding: 0 4px; color: var(--ink-400); }
.card > .pager, .card > div > .pager { margin: 8px 6px 6px; }

/* A datagrid (widgets/datagrid.ts): cards or a sortable list, paged. The
   tools sit in the section head: the sort buttons (cards only), then the
   two-icon view toggle the Files page has. */
.dg-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dg-sorts[hidden] { display: none; }
/* A sort segment carries a word, so it is wider than an icon segment. */
.view-btn.dg-sort { width: auto; padding: 0 11px; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13px; }
.view-btn.dg-sort.on { font-weight: 500; }
.view-btn.dg-sort svg { width: 13px; height: 13px; }
.dg-body { margin-top: 12px; }
.dg-cards { display: grid; gap: 10px; }
.dg-tablewrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--white); }
.dg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dg-table th, .dg-table td { padding: 9px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-soft); }
.dg-table thead th { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); background: var(--cream-50); white-space: nowrap; }
.dg-table tbody tr:last-child td { border-bottom: 0; }
.dg-table tbody tr.click { cursor: pointer; }
.dg-table tbody tr.click:hover td { background: var(--cream-50); }
.dg-table td.num, .dg-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dg-table .th-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-transform: inherit; letter-spacing: inherit; }
.dg-table th.sorted .th-sort { color: var(--accent-700); }
.dg-table .th-sort svg { width: 12px; height: 12px; }
.dg-table td .name { font-weight: 500; color: var(--text-strong); }
.dg-table td.ell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-table td.nowrap { white-space: nowrap; }
.dg-body > .pager { margin-top: 10px; }

/* Tags line: the button in its own column, the rows in the next. */
.facet-line { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 2px 10px; min-height: 30px; }
.facet-line[hidden] { display: none; }
.facet-line .facet-toggle { height: 30px; background: var(--white); }
.facet-line .facet-toggle.open { border-color: var(--accent-600); color: var(--accent-700); }
.facet-bar { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.facet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.facet-hint { padding-left: 2px; }
.chip .chip-facet { color: var(--ink-500); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.chip.on .chip-facet { color: rgba(255, 255, 255, .75); }
.chip.on .fluent { width: 12px; height: 12px; }
/* The filter picker: facets down the left, the chosen facet's values on the right. */
.modal.fp-modal { width: min(860px, calc(100vw - 40px)); max-width: none; height: min(580px, 86vh); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.fp-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.fp-side { padding: 14px 10px; border-right: 1px solid var(--cream-border); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.fp-facet { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; text-align: left; font: inherit; font-size: 14px; color: var(--text-body); padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.fp-facet:hover { background: var(--cream-200); }
.fp-facet.on { background: var(--accent-50); color: var(--accent-700); font-weight: 500; }
.fp-facet .fluent { width: 16px; height: 16px; flex: none; }
.fp-facet .grow { flex: 1 1 auto; }
.fp-facet .n { font-size: 12px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.fp-facet .n.on { padding: 0 7px; border-radius: var(--radius-pill); background: var(--accent-600); color: var(--white); }
.fp-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; min-height: 0; }
.fp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-head p { margin: 0; flex: 1 1 auto; }
.fp-title { display: inline-flex; align-items: center; gap: 8px; }
.fp-title h3 { margin: 0; font-size: 17px; }
.fp-title .fluent { width: 18px; height: 18px; color: var(--accent-600); }
.fp-find { font: inherit; font-size: 13.5px; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--cream-border-input); background: var(--white); }
.fp-find[hidden] { display: none; }
.fp-values { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; overflow-y: auto; min-height: 0; flex: 1 1 auto; scrollbar-width: thin; }
.fp-foot { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-top: 1px solid var(--cream-border); }
/* Folded: the first row on one line, fading out at the right edge. */
.facet .chip { flex: none; white-space: nowrap; }
.facet-bar .fluent, .facet-toggle .fluent { width: 16px; height: 16px; flex: none; }
.facet-toggle .n { margin-left: 4px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent-600); color: var(--white); font-size: 11px; }
.facet-label { display: inline-flex; align-items: center; gap: 6px; width: 96px; flex: none; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--cream-border); background: rgba(255, 255, 255, .6); font: inherit; font-size: 13px; color: var(--ink-800); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); }
.chip:hover { background: var(--white); }
/* Same selector as the one above it, half a pixel apart. Kept for its
   colour and its figures; the size comes from the one rule. */
.chip .n { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.chip.on { background: var(--accent-600); border-color: var(--accent-600); color: var(--white); }
.chip.on .n { color: rgba(255, 255, 255, .8); }
.chip.clear { padding: 3px 6px; }
.chip.clear .fluent { width: 12px; height: 12px; }
select.sm, .row select.sm { width: auto; height: 32px; padding: 0 10px; font-size: 13px; border-radius: var(--radius-sm); }
.doc-group + .doc-group { margin-top: 12px; }
.doc-group-head { display: flex; align-items: baseline; gap: 10px; padding: 6px 8px 2px; }
.doc-group-head h3 { margin: 0; font-size: 15px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--fs-case-micro); line-height: 18px; border: 1px solid transparent; }
.tag.user { background: var(--accent-100, var(--cream-300)); color: var(--accent-800, var(--ink-900)); }
.tag.suggested { border: 1px dashed var(--accent-300, var(--cream-border)); color: var(--ink-700); background: transparent; }
.tag.edit { border: 1px solid var(--cream-border); background: transparent; cursor: pointer; color: var(--ink-600); font: inherit; font-size: 11.5px; }
.tag-row .tag { font-family: var(--font-body); white-space: nowrap; }
.tag.edit svg { width: 11px; height: 11px; }
tr.doc-fold td { padding-top: 0; padding-bottom: 4px; border-top: 0; }
tr.doc-kid td:nth-child(2) { padding-left: 28px; border-left: 2px solid var(--cream-border); }

/* A file's tag: mark layers, or a flattened copy. Sits under the name. */
td .badge + .meta, td .name + .badge { display: inline-block; margin-left: 8px; vertical-align: middle; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-what { margin: 6px 0 12px; padding-left: 18px; }
.save-what li { margin: 4px 0; }

/* ---- run dialog and artifacts ------------------------------------------ */
/* A run dialog fits the window: the heading and the buttons stay put and
   the middle scrolls, so a long casebook or file list never pushes Run off
   the screen. */
.modal.runmodal { width: min(720px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; overflow: hidden; }
.runmodal > .modal-text, .runmodal > .err, .runmodal > .runmodal-foot { flex: none; }
.runmodal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -14px; padding: 0 14px;
  scrollbar-width: thin; scrollbar-color: var(--cream-border-strong, rgba(0,0,0,.18)) transparent; }
.runmodal-foot { justify-content: flex-end; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--cream-border); }
.runmodal .field > .overline { display: block; margin-bottom: 6px; }
.runmodal select { width: 100%; }

/* ---- pre-auth simulation (D103) ------------------------------------------ */
/* One modal. A step rail on the left, the step on the right; the header
   and the SIM banner stay put and only the step scrolls. Every simulated
   value carries the SIM tag. */
.sim-tag { display: inline-flex; align-items: center; padding: 0 5px; border-radius: var(--radius-pill); font: 500 10px var(--font-mono); letter-spacing: 0.08em;
  color: var(--ink-400); background: transparent; border: 1px solid var(--ink-150); vertical-align: middle; line-height: 15px; }
.modal.pa-modal { width: min(1320px, calc(100vw - 40px)); height: min(940px, calc(100dvh - 48px)); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.pa-head { flex: none; display: flex; align-items: flex-start; gap: var(--space-3); padding: 20px 24px 12px; }
.pa-title { display: flex; align-items: center; gap: 10px; }
.pa-title h2 { margin: 0; font-family: var(--font-display, var(--font-sans)); font-size: 1.375rem; letter-spacing: -0.01em; }
.pa-head p { margin: 2px 0 0; }
/* The rail's marks: status in the disc, the actor in the badge. */
.pa-stepname { flex: 1 1 auto; white-space: nowrap; }
.pa-step.wait .pa-dot { background: var(--warning-100); color: var(--warning-600); }
.pa-step.blocked .pa-dot { background: var(--danger-100); color: var(--danger-600); }
.pa-step.live .pa-dot { background: var(--accent-600); color: var(--white); }
.pa-step.upcoming .pa-dot { background: transparent; color: var(--ink-300); box-shadow: inset 0 0 0 1px var(--cream-border); }
.pa-dot .fluent { width: 13px; height: 13px; }
.pa-actor { width: 22px; height: 22px; flex: none; border-radius: 6px; display: grid; place-items: center; }
.pa-actor .fluent, .pa-who .fluent { width: 13px; height: 13px; }
.pa-actor.dec, .pa-who.dec { background: var(--accent-50); color: var(--accent-700); }
.pa-actor.llm, .pa-who.llm { background: #ECEEF1; color: var(--ink-600); }
.pa-actor.person, .pa-who.person { background: var(--success-100); color: var(--success-600); }
.pa-actor.sim, .pa-who.sim { background: var(--warning-100); color: var(--warning-600); }
.pa-actor.code, .pa-who.code { background: var(--cream-300); color: var(--ink-600); }
.pa-step.upcoming .pa-actor { opacity: .55; }
.pa-who { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
/* A probability as a bar; the threshold is the dark tick. */
.pa-bar { position: relative; display: inline-block; width: 120px; height: 8px; vertical-align: middle; border-radius: 4px; background: var(--cream-300); overflow: visible; }
.pa-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--accent-600); }
.pa-bar.low i { background: var(--warning-600); }
.pa-bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink-900); }
.pa-probs td:first-child { width: 40%; }
.pa-letter { margin: 0 0 14px; }
.pa-letter .overline { margin-bottom: 4px; }
.pa-reading h4 { margin: 14px 0 4px; }
.pa-currency { width: auto; flex: none; font: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--cream-border-input); background: var(--white); color: var(--text-body); align-self: center; }
.pa-currency[hidden] { display: none; }
.pa-restart { align-self: center; flex: none; white-space: nowrap; }
.pa-restart[hidden] { display: none; }
.pa-restart .fluent { width: 14px; height: 14px; }
.pa-banner { flex: none; display: flex; gap: 10px; align-items: flex-start; margin: 0 24px 12px; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--cream-100); color: var(--text-subtle); font-size: 12.5px; line-height: 1.45; }
.pa-banner svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.pa-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 252px 1fr; border-top: 1px solid var(--cream-border); }
.pa-step > span:last-child { white-space: nowrap; }
.pa-rail { padding: 14px 10px; border-right: 1px solid var(--cream-border); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.pa-step { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; text-align: left; font: inherit; font-size: 14px; color: var(--text-body);
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.pa-step:hover:not(:disabled) { background: var(--cream-200); }
.pa-step.on { background: var(--accent-50); color: var(--accent-700); font-weight: 500; }
.pa-step:disabled { color: var(--ink-300); cursor: default; }
.pa-dot { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--font-mono); background: var(--cream-200); color: var(--ink-600); }
.pa-step.on .pa-dot { background: var(--accent-600); color: var(--white); }
.pa-step.done .pa-dot { background: var(--success-100); color: var(--success-600); }
.pa-dot svg { width: 12px; height: 12px; }
.pa-body { overflow-y: auto; padding: 18px 24px 24px; scrollbar-width: thin; }
.pa-body h3 { margin: 0 0 6px; }
.pa-h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.pa-h3 h3, .pa-h3 h4 { margin: 0; }
.pa-body h4 { margin: 18px 0 6px; font-size: 14px; }
.pa-body .question { margin-top: 12px; }
.pa-empty { padding: 24px; text-align: center; }
.pa-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.pa-option { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--cream-border); border-radius: var(--radius-md); background: var(--white); cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.pa-option:hover { border-color: var(--cream-border-input); }
.pa-option.on { border-color: var(--accent-600); box-shadow: 0 0 0 3px var(--accent-50); }
.pa-option input { margin-top: 4px; accent-color: var(--accent-600); }
.pa-optcard { min-width: 0; overflow-wrap: anywhere; }
.pa-optcard .md { margin: 8px 0 0; }
.pa-optcard .md p { margin: 0; }
.pa-option { min-width: 0; }
.pa-body { overflow-x: hidden; }
.pa-optcard .row { gap: 8px; align-items: flex-start; }
.pa-rank { width: 22px; height: 22px; flex: none; border-radius: 6px; display: grid; place-items: center; font: 600 12px var(--font-mono); background: var(--cream-200); color: var(--ink-700); }
.pa-warn { color: var(--warning-600); }
.pa-plan { display: flex; flex-direction: column; gap: 6px; max-width: 420px; margin-top: 8px; }
.pa-foot { margin-top: 16px; gap: 10px; align-items: center; }
.pa-working { display: flex; align-items: center; gap: 10px; padding: 14px 16px; margin-top: 12px; border-radius: var(--radius-sm); background: var(--cream-100); font-size: 14px; }
.pa-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 14px 0; }
.pa-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--cream-border); min-width: 0; }
.pa-kpi .k { font-size: 12px; color: var(--text-subtle); }
.pa-kpi .v { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.pa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--white); border: 1px solid var(--cream-border); border-radius: var(--radius-sm); overflow: hidden; }
.pa-table th, .pa-table td { padding: 9px 12px; border-top: 1px solid var(--cream-border-soft); text-align: left; vertical-align: top; }
.pa-table thead th { border-top: 0; font-weight: 500; color: var(--text-subtle); font-size: 12px; background: var(--cream-50); }
.pa-table .r { text-align: right; white-space: nowrap; }
.pa-pill { display: inline-flex; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; background: var(--cream-200); color: var(--ink-700); white-space: nowrap; }
.pa-pill.ok { background: var(--success-100); color: var(--success-600); }
.pa-pill.warn { background: var(--warning-100); color: var(--warning-600); }
.pa-pill.bad { background: var(--danger-100); color: var(--danger-600); }
.pa-decision { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin: 12px 0; border-radius: var(--radius-md); background: var(--cream-100); }
.pa-decision.ok { background: var(--success-100); }
.pa-decision.warn { background: var(--warning-100); }
.pa-decision.bad { background: var(--danger-100); }
.pa-outcome { font: 600 13px var(--font-mono); letter-spacing: 0.06em; }
.pa-respond { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--cream-border); background: var(--white); display: flex; flex-direction: column; gap: 10px; }
.pa-respond p { margin: 0; }
.pa-resp { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--cream-100); }
.pa-msg { white-space: pre-wrap; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--cream-border); }
.pa-cov { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.pa-cov .bar { height: 4px; border-radius: 2px; background: var(--cream-200); overflow: hidden; }
.pa-cov .bar i { display: block; height: 100%; background: var(--success-500); }
.pa-covlist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.pa-covlist li { display: flex; gap: 6px; align-items: flex-start; }
.pa-covmark { width: 14px; flex: none; color: var(--ink-300); text-align: center; }
.pa-covlist li.met .pa-covmark, .pa-covlist li.inferred .pa-covmark { color: var(--success-600); }
.pa-covmark svg { width: 13px; height: 13px; margin-top: 2px; }
.pa-items td { vertical-align: top; }
.pa-tick { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--ink-200); color: var(--white); }
.pa-tick.on { background: var(--success-500); border-color: var(--success-500); }
.pa-tick svg { width: 12px; height: 12px; }
.cl { display: flex; flex-direction: column; gap: 10px; }
/* A row is ready to send when it has a value (or is marked unavailable);
   a row that still needs one carries a warning edge. No tick: sending
   approves the list. */
.cl-row { padding: 12px 14px; border: 1px solid var(--cream-border); border-left-width: 3px; border-radius: var(--radius-md); background: var(--white);
  transition: border-color var(--dur-fast) var(--ease-out); }
.cl-row.ok { border-left-color: var(--success-500); }
.cl-row.needs { border-left-color: var(--warning-500); }
.cl-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cl-what { display: flex; align-items: center; gap: 8px; }
.cl-said { font-size: 13px; }
.cl-fields { display: grid; grid-template-columns: 130px 1fr; gap: 8px; }
.cl-fields textarea { width: 100%; }
@media (max-width: 760px) { .cl-fields { grid-template-columns: 1fr; } }
.pa-stephead { margin-bottom: 12px; }
.pa-stephead p { margin: 4px 0 0; }
.pa-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 14px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--cream-border); font-size: 13.5px; }
.pa-facts dt { color: var(--text-subtle); white-space: nowrap; }
.pa-facts dd { margin: 0; color: var(--text-strong); min-width: 0; overflow-wrap: anywhere; }
.pa-facts dd .pa-list { margin: 0; padding-left: 16px; }
.pa-code { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: 5px; background: var(--cream-200); color: var(--ink-800); margin-right: 4px; }
.pa-list { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
.pa-list li { margin: 3px 0; }
.pa-notyet { padding: 18px; text-align: center; border: 1px dashed var(--cream-border-input); border-radius: var(--radius-sm); }
.pa-step.live .pa-dot { background: var(--accent-600); color: var(--white); }
.pa-step.live .pa-dot .spin { width: 12px; height: 12px; border-color: rgba(255,255,255,.4); border-top-color: var(--white); }
.pa-summary h4 { margin: 18px 0 6px; }
@media print {
  body > *:not(.pa-overlay) { display: none !important; }
  .pa-overlay { position: static; background: none; backdrop-filter: none; display: block; }
  .modal.pa-modal { width: auto; height: auto; box-shadow: none; background: var(--white); backdrop-filter: none; }
  .pa-main { display: block; border: 0; }
  .pa-rail, .pa-head .iconbtn, .pa-foot .btn, .pa-respond, .question { display: none !important; }
  .pa-body { overflow: visible; padding: 0; }
}
.pa-thread { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pa-thread li { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.5; }
.pa-thread li p { margin: 4px 0 0; white-space: pre-wrap; }
.pa-msg-payer { align-self: flex-start; background: var(--warning-100); border-bottom-left-radius: 6px; }
.pa-msg-onc { align-self: flex-end; background: var(--white); border: 1px solid var(--cream-border); border-bottom-right-radius: 6px; }
.pa-who { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-subtle); }
.ta-wrap { position: relative; }
.ta-wrap textarea { width: 100%; padding-right: 44px; }
.ta-spark { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: var(--accent-50); color: var(--accent-600); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.ta-spark:hover { background: var(--accent-100); }
.ta-spark svg { width: 16px; height: 16px; }
.draft-hint { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--accent-700); }
.draft-hint svg { width: 13px; height: 13px; }
.draft-hint.ai-warn { display: inline-flex; padding: 3px 9px; border-radius: var(--radius-sm); background: var(--warning-100); color: var(--warning-600); }
.draft-hint.ai-warn.edited { background: var(--success-100); color: var(--success-600); }
.pa-events { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.pa-events li { display: grid; grid-template-columns: 130px 1fr; column-gap: 12px; padding: 9px 0; border-top: 1px solid var(--cream-border-soft); }
.pa-events li > :last-child { grid-column: 2; }
@media (max-width: 760px) {
  .pa-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .pa-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--cream-border); padding: 8px; }
  .pa-step { flex: none; }
  .pa-events li { grid-template-columns: 1fr; }
  .pa-events li > :last-child { grid-column: 1; }
}
.doc-list { max-height: 220px; overflow: auto; border: 1px solid var(--cream-border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .6); padding: 4px; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; }
.doc-row:hover { background: var(--cream-200); }
.doc-row input { margin: 0; }
.doc-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-preview { max-height: 220px; overflow: auto; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-faint); border: 1px solid var(--cream-border); font-size: 14px; }
.btn.blocked { opacity: .55; }
.artifact-run .figures.small-figs { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 8px; }
.artifact-run .figures.small-figs img { max-height: 150px; object-fit: contain; }
.artifact-files, .run-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.artifact-table-wrap { overflow-x: auto; }
.artifact-table { width: 100%; border-collapse: collapse; }
.artifact-table th, .artifact-table td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.artifact-file-name { justify-content: flex-start; text-align: left; overflow-wrap: anywhere; }
.artifact-file-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-raised); text-align: left; min-width: 0; }
.artifact-file-tile .name { overflow-wrap: anywhere; }
.artifact-file-tile > svg { width: 32px; height: 32px; }
/* A file's type icon, beside its name wherever files are listed. */
.file-ic { width: 16px; height: 16px; flex: none; color: var(--ink-600); vertical-align: -3px; }
td > .file-ic { margin-right: 8px; }
.doc-row > .file-ic { color: var(--ink-500); }
.run-files { margin: 0 0 6px; }
.artifact-file { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--cream-200); color: var(--ink-900); text-decoration: none; font: inherit; font-size: 14px; border: 1px solid var(--cream-border); cursor: pointer; transition: background var(--dur-fast), transform var(--dur-fast); }
.artifact-file.archive { background: var(--white); border-color: var(--accent-600); color: var(--accent-700); }
.artifact-file.archive svg { width: 16px; height: 16px; }
.artifact-file:active { transform: scale(.98); }
figure.click { cursor: zoom-in; }
.viewer.artifact .viewer-stage { padding: 20px; }
.viewer-archive { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 420px; padding: 28px 32px; margin: auto; text-align: center; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.viewer-archive > svg { width: 40px; height: 40px; color: var(--accent-600); }
.viewer-archive strong { overflow-wrap: anywhere; font-size: 15px; }
.viewer-archive .archive-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 6px 0 2px; font-size: 13px; text-align: left; width: 100%; }
.viewer-archive .archive-facts dt { color: var(--text-subtle); }
.viewer-archive .archive-facts dd { margin: 0; color: var(--ink-700); overflow-wrap: anywhere; }
.viewer-archive p { margin: 4px 0 8px; color: var(--ink-700); font-size: 13px; line-height: 1.5; }
.artifact-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.artifact-md { max-width: 90ch; width: 100%; padding: 28px 36px; white-space: normal; font-size: 14.5px; line-height: 1.6; box-shadow: var(--shadow-sm); }
.viewer-text.artifact-csv { max-width: none; }
.artifact-csv { max-width: none; width: 100%; justify-self: stretch; align-self: start; padding: 0; overflow: auto; box-shadow: var(--shadow-sm); font-family: var(--font-body, inherit) !important; }
.artifact-csv table { font-size: 13px; border-collapse: collapse; width: 100%; }
.artifact-csv td { white-space: normal !important; vertical-align: top; min-width: 90px; max-width: 520px; overflow-wrap: anywhere; line-height: 1.45; }
.artifact-csv tbody tr:nth-child(even) td { background: var(--cream-50, rgba(0,0,0,.015)); }
.artifact-csv th { position: sticky; top: 0; background: var(--cream-100); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--cream-border); font-weight: 600; }
.artifact-csv td { padding: 6px 12px; border-bottom: 1px solid var(--cream-border); white-space: nowrap; }
.viewer-text.artifact-csv, pre.viewer-text { margin: 0; font-family: var(--font-mono); }
.artifact-file:hover { background: var(--cream-300); }
.artifact-file svg { width: 14px; height: 14px; color: var(--ink-600); }

/* ---- provenance cards --------------------------------------------------- */

.prov-bar { gap: 10px; margin-bottom: var(--space-4); }
.prov-bar select { width: auto; }
.prov-bar input { max-width: 260px; }
.prov-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-3); }
.prov-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-xs); }

.prov-head { display: flex; align-items: center; gap: 8px; }
/* The field's path: two lines at most, then cut; the whole path is in a
   callout on hover. */
.prov-path { font-size: 13px; color: var(--text-strong); font-weight: 600; background: transparent; min-width: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* What the change did, as coloured text: green added, blue modified, red removed. */
.prov-kind { flex: none; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.prov-kind.success { color: var(--success-600); }
.prov-kind.accent { color: var(--accent-600); }
.prov-kind.danger { color: var(--danger-600); }
.prov-file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-file b { font-weight: 500; }
.callout .co-full { max-width: 420px; overflow-wrap: anywhere; color: var(--text-strong); }
.prov-change { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.prov-arrow { color: var(--text-subtle); }
.prov-empty { color: var(--text-subtle); font-style: italic; font-size: 13px; }
.prov-quote { margin: 0; padding: 6px 10px; border-left: 2px solid var(--warning-300); background: var(--warning-100); font-size: 13px; color: var(--ink-800); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.prov-src { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); border: 0; background: transparent; padding: 0; text-align: left; font: inherit; }
.prov-src svg { width: 15px; height: 15px; flex: none; }
.prov-src.doc { cursor: pointer; color: var(--accent-700); }
.prov-src.doc:hover b { text-decoration: underline; }
.prov-src.doc > span { flex: 1; min-width: 0; }
.prov-src { min-width: 0; font-size: 13px; }
.prov-av { width: 22px; height: 22px; border-radius: 50%; background: #7C47CD; color: var(--white); display: grid; place-items: center; font-size: 10px; font-weight: 600; flex: none; }
.prov-note { color: var(--ink-700); font-style: italic; }

/* ---- questions --------------------------------------------------------- */

.question { border: 1px solid var(--accent-100); background: linear-gradient(180deg, var(--accent-50) 0%, var(--white) 60%); }
/* The ask's header: what is being asked, which workflow, which patient.
   The pills hold their size and the row wraps instead; left to shrink,
   a pill squashes narrower than its own text and the workflow slug
   breaks over two lines. The patient's name gives way first. */
.question .qhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.question .qhead > .badge, .question .qhead > .tag { flex: none; }
.question .qhead > .tag { white-space: nowrap; }
.question .qhead > .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.question .qtext { font-size: 17px; color: var(--text-strong); margin-bottom: 14px; font-family: var(--font-display); font-weight: 500; }
/* 360px was right when a draft was a paragraph and a list. A compute
   workflow's draft carries a Kaplan-Meier curve, and clipping the figure to
   a third of itself makes the thing being approved unreadable. */
.question .draft { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 14px; font-size: 14px; max-height: min(70vh, 780px); overflow: auto; }
.question .options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.question .options label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; color: var(--text-strong); margin: 0; background: var(--white); }
.question .options label:hover { border-color: var(--accent-300); }
.question .options label:has(input:checked) { border-color: var(--accent-500); background: var(--accent-50); }
.question .options input { width: auto; accent-color: var(--accent-500); }
.question .options .opt-choice { align-items: flex-start; }
.question .options .opt-choice > span { display: flex; flex-direction: column; gap: 2px; }
.question .options .opt-detail { font-size: 12.5px; }
.question .options .opt-detail p { margin: 0; }
/* Suggested changes on an approve: one row each, picking one sends the
   draft back with that sentence. */
.question .q-suggest { gap: 4px; }
.question .q-suggest > .muted { margin: 2px 0 2px; }
.question .opt-row { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 9px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--white); color: var(--text-strong); font: 14px var(--font-body); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.question .opt-row:hover { border-color: var(--accent-300); background: var(--accent-50); }
.question .opt-row > svg { width: 16px; height: 16px; flex: none; color: var(--accent-600); margin-top: 2px; }
/* The typed box every question has, and the line under it saying what
   sending it does. */
.question .q-typed-wrap { margin-bottom: 10px; }
.question .q-typed { width: 100%; max-width: 640px; min-height: 38px; max-height: 220px; resize: none; font: 14px/1.5 var(--font-body); padding: 8px 10px; }
.question .q-typed-why { margin-top: 4px; }
.question .q-acts { align-items: center; gap: 8px; }
.question .ta-wrap { position: relative; max-width: 640px; }
/* The casebook tab: smaller workflow cards, and one row per run or output. */
.wf-mini { padding: 14px 16px; gap: 8px; }
.wf-mini .lib-head h3 { font-size: 15px; }
.wf-mini .lib-desc { font-size: 13px; }
/* Casebook > Workflows > Run a workflow: one row per workflow, searchable.
   One column in the narrow casebook pane, two when there is room. */
.wf-pick-tools { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; }
.wf-pick-tools .searchbox { flex: 1; min-width: 0; }
.wf-pick-tools .searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 14px; background: none; }
.wf-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }
.wf-pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--white); transition: border-color var(--dur-base) var(--ease-out); }
.wf-pick[hidden] { display: none; }
.wf-pick:hover, .wf-pick:focus-within { border-color: var(--accent-300); }
.wf-pick-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.wf-pick-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-50); color: var(--accent-700); }
.wf-pick-ic svg { width: 18px; height: 18px; }
/* The family in the tile's colour: clinical in the accent, research in
   cyan, records in cream. The tooltip says it in words. */
.wf-pick-ic.fam-research { background: var(--cyan-100); color: var(--cyan-600); }
.wf-pick-ic.fam-records { background: var(--cream-200); color: var(--ink-700); }
/* The last row: the way to the rest of the library, across the whole
   width, on a cream ground so it reads as a door and not as one more
   workflow. */
.wf-pick.wf-pick-more { margin-top: 8px; background: var(--cream-50); border-style: dashed; }
.wf-pick.wf-pick-more:hover { border-color: var(--accent-300); background: var(--accent-50); }
.wf-pick-ic.fam-more { background: var(--ink-800); color: var(--white); }
.wf-pick-more .wf-pick-run svg { width: 14px; height: 14px; }
.wf-pick-text { display: grid; gap: 3px; min-width: 0; }
.wf-pick-name { font-size: 15px; font-weight: 600; color: var(--text-strong); line-height: 1.3; }
.wf-pick-desc { font-size: 13.5px; line-height: 1.45; color: var(--text-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wf-pick-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: 12px; }
.wf-pick-last { color: var(--text-muted); white-space: nowrap; }
.wf-pick-run { flex: none; gap: 4px; border-color: var(--accent-500); color: var(--accent-700); background: var(--white); }
.wf-pick-run:hover { background: var(--accent-50); }
.wf-pick-run svg { width: 14px; height: 14px; }
.wf-pick-none { margin: 6px 2px 0; }
/* A run waiting on you, as a row: what it asks on the right, a chevron
   saying it opens. The modal it opens carries the run's head, the exchange
   so far and the question with its full controls. */
.waiting-row { align-items: center; }
.waiting-row .waiting-q { color: var(--text-body); }
.waiting-row .waiting-meta { display: grid; justify-items: end; gap: 2px; flex: none; text-align: right; }
.waiting-row .waiting-ask { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.waiting-row .waiting-go { flex: none; color: var(--text-subtle); display: grid; }
.waiting-row .waiting-go svg { width: 16px; height: 16px; }
.waiting-row:hover .waiting-go { color: var(--accent-700); }
/* The answer modal: head, a body that scrolls, and a foot with the
   buttons. Head and foot are the modal's own edges, full width. */
.modal.answer-run { width: min(880px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.answer-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 12px; border-bottom: 1px solid var(--border-subtle); }
.answer-title { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.answer-title h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.answer-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--accent-50); color: var(--accent-700); }
.answer-ic svg { width: 20px; height: 20px; }
.answer-sub { margin-top: 2px; }
.answer-actions { flex: none; align-items: center; gap: 8px; }
.answer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 22px 18px; }
/* The modal is the card. The question inside it has no frame of its own
   and the draft reads as a document down the body. */
.answer-body > .card.question { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.answer-body .question .draft { border: 0; background: transparent; padding: 0; margin: 4px 0 18px; max-height: none; overflow: visible; }
.answer-body .question .q-typed-wrap { margin-bottom: 0; }
.answer-body .question .q-typed { max-width: none; }
.answer-foot { flex: none; display: flex; padding: 12px 22px 16px; border-top: 1px solid var(--border-subtle); background: var(--white); }
.answer-foot .q-acts { flex: 1; margin: 0; }
.answer-earlier { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.answer-earlier > summary { color: var(--text-subtle); font-size: 13px; }
.answer-earlier .ev-list { margin-top: 8px; }
.answer-earlier .ev-list::before { display: none; }
/* A casebook's Workflows tab: a section head carries the list's tools.
   The title is set in the display face, so it reads as a heading and
   not as one more line of the list. */
.wf-sect-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 4px; }
.wf-sect-head .tab-sub { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-strong); }
.wf-sect-head .tab-sub .muted { font-family: var(--font-sans); font-weight: 400; }
.wf-section + .wf-section { margin-top: 28px; }
.wf-row-waiting { border-color: var(--warning-300); background: linear-gradient(90deg, var(--warning-100), var(--white) 40%); }
.wf-row-q { color: var(--ink-700); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The artifacts a run made, as chips under its name; each opens in the
   viewer. In the list they are a sub-row under the run's row. */
.wf-files { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.wf-files-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); margin-right: 4px; }
.wf-file-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 260px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--radius-pill); background: var(--cream-100); color: var(--ink-700); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.wf-file-chip:hover { background: var(--accent-50); color: var(--accent-700); }
.wf-file-chip .file-ic { width: 13px; height: 13px; flex: none; }
.wf-run-card { align-items: flex-start; }
.wf-run-card .wf-took, .wf-run-card .tone { margin-top: 2px; }
.dg-table tr.has-sub td { border-bottom: 0; padding-bottom: 4px; }
.dg-table tr.dg-sub td { padding: 0 12px 10px 12px; }
.dg-table tr.dg-sub .wf-files { margin-top: 0; }
.dg-table tr.dg-sub .wf-file-chip { max-width: 520px; }
.wf-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.wf-row .name { font-weight: 500; color: var(--text-strong); }
.wf-row > svg { width: 16px; height: 16px; flex: none; color: var(--text-subtle); }
.wf-row .wf-took { white-space: nowrap; }
.stack.tight { gap: 6px; }
.wf-card .lib-head .badge { margin-left: auto; }
.wf-card .lib-desc { flex: 1; }
.wf-card .lib-foot { align-items: center; }
.wf-card .wf-meta { gap: 10px; align-items: center; flex-wrap: wrap; }
.run-error { border-color: var(--danger-200, #f3c1c1); background: var(--danger-100); }
.run-error .overline { color: var(--danger-600); margin-bottom: 6px; }
/* Cost and time grades: three marks, the used ones strong. */
.grades { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.grade-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); }
.grade-label + .grade { margin-right: 6px; }
.grade { display: inline-flex; gap: 1px; font-weight: 600; letter-spacing: 0; }
.grade span { color: var(--ink-300); }
.grade span.on { color: var(--accent-700); }
/* A label's value beside it ("INPUT Files"), and any status as coloured
   text instead of a pill. */
.grade-val { font-size: 12.5px; font-weight: 600; color: var(--ink-800); margin-right: 6px; white-space: nowrap; }
.tone { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-600); white-space: nowrap; }
.tone .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tone .dot.live { animation: pulse 1.2s infinite; }
.tone.success { color: var(--success-600); }
.tone.accent { color: var(--accent-600); }
.tone.warning { color: var(--warning-600); }
.tone.danger { color: var(--danger-600); }
.grade-val.tone { font-size: 12.5px; }
/* Workflow details: glass, like the rest of the overlays, but roomier. */
/* A tall panel: the header and the buttons stay put and only the middle
   scrolls (.wfd-scroll, from detailsBox). The rounded box never scrolls,
   so no bar touches its corners. */
.modal.wf-details { width: min(640px, calc(100vw - 40px)); max-height: calc(100dvh - 60px); padding: 26px 28px 22px; display: flex; flex-direction: column; overflow: hidden; }
.modal.wf-details > .wfd-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin-right: -14px; padding-right: 14px;
  scrollbar-width: thin; scrollbar-color: var(--cream-border-strong, rgba(0,0,0,.18)) transparent; }
.modal.wf-details > .wfd-head, .modal.wf-details > .row { flex: none; }
.wfd-head { display: flex; align-items: flex-start; gap: 14px; }
.wfd-head h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 22px; }
.wfd-blurb { margin: 6px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.wfd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0 6px; }
.wfd-section { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.wfd-section .overline { margin-bottom: 6px; }
.wfd-section ul, .wfd-section ol { margin: 0; padding-left: 20px; line-height: 1.55; font-size: 14px; }
.wfd-section li + li { margin-top: 4px; }
.wfd-section p { margin: 0; font-size: 14px; line-height: 1.55; }
.question .ctx { margin-bottom: 12px; }
.question .ctx .kv { font-size: 13px; }

/* ---- documents --------------------------------------------------------- */

.drop { border: 1.5px dashed var(--ink-200); border-radius: var(--radius-lg); padding: 28px; text-align: center; color: var(--text-muted); transition: all var(--dur-fast); background: var(--white); }
/* Storage against the quota, under the drop zone. Amber past 80 percent. */
.quota { margin-top: 10px; padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--white); font-size: 13px; }
.quota-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.quota.warn .progress > div { background: var(--warning-500); }
.progress.warn > div { background: var(--warning-500); }
/* By-tag donut: a conic gradient with the centre cut out, count in the middle. */
.donut-row { display: flex; align-items: center; gap: var(--space-5); }
.donut { width: 112px; height: 112px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.donut-n { width: 68px; height: 68px; border-radius: 50%; background: var(--white); display: grid; place-items: center; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text-strong); }
.donut-legend { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 18px; font-size: 13px; min-width: 0; flex: 1; }
/* Storage: the amount used, its bar, and four counts on one line. */
.fstore { gap: 8px; }
.fstore-used { font-size: 20px; font-family: var(--font-display); color: var(--text-strong); }
.fstore-used .muted { font-size: 14px; font-family: var(--font-body, inherit); }
.fstore-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; }
.fstore-stats > div { border: 1px solid var(--cream-border); border-radius: var(--radius-sm); padding: 6px 10px; min-width: 0; }
.fstore-stats dt { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; }
/* File lists on the Files home: plain rows split by a hairline. */
.fgrid { align-items: start; }
.frows { display: flex; flex-direction: column; margin: 0 -8px; }
.frow { display: flex; align-items: center; gap: 10px; padding: 7px 8px; width: 100%; border: 0; border-top: 1px solid var(--cream-border); background: transparent; font: inherit; color: inherit; text-align: left; border-radius: var(--radius-xs); }
/* An archived run's row: the words open it, the button beside restores. */
.frow.arch-run { cursor: default; }
.frow .linkish { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.frow .linkish:hover .name { color: var(--accent-700); }
.frow.arch-run .btn { flex: none; }
.frow:first-child { border-top: 0; }
button.frow { cursor: pointer; }
button.frow:hover { background: var(--cream-100); }
.frow > svg { width: 15px; height: 15px; flex: none; color: var(--text-subtle); }
.frow .name { font-size: 13.5px; font-weight: 500; color: var(--text-strong); }
.frow .small { font-size: 12px; }
.fstore-stats dd { margin: 0; font-weight: 600; color: var(--text-strong); }
.donut-legend li { display: flex; align-items: center; gap: 8px; }
.donut-legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; white-space: nowrap; }
.row-actions a.iconbtn { display: inline-grid; place-items: center; line-height: 0; text-decoration: none; }
.nowrap { white-space: nowrap; }
.name.link, .ctx-name.link { cursor: pointer; }
.name.link:hover, .ctx-name.link:hover { color: var(--accent-600); text-decoration: underline; }

/* Imaging capture: a stage the slide or slice draws on, a toolbar, and a
   tray of captures waiting to upload. */
.modal.capture { width: min(1600px, calc(100vw - 10vw)); height: min(1100px, calc(100dvh - 8vh)); display: flex; flex-direction: column; padding: 16px 20px; }
.cap-view { flex: 1; min-height: 0; position: relative; background: var(--surface-sunken); border-radius: var(--radius-xs); overflow: hidden; }
.cap-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cap-head strong { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.cap-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cap-stage { position: absolute; inset: 0; display: block; background: var(--surface-sunken); cursor: grab; touch-action: none; }
.cap-stage:active { cursor: grabbing; }
.cap-stage.box-tool, .cap-stage.box-tool:active { cursor: crosshair; }
.zoombar .iconbtn.on { background: var(--accent-50); color: var(--accent-600); }
.zoombar-sep { width: 1px; height: 18px; margin: 0 4px; background: rgba(17, 19, 21, 0.15); }
.cap-tray { display: flex; gap: 8px; flex-wrap: wrap; min-height: 0; }
.cap-thumb { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: 12px; background: var(--white); }
.cap-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: 3px; }

/* What the model was given, under the question: one chip per file read
   as text, one thumbnail per page it saw as a picture. */
.atts { align-self: flex-end; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 88%; margin: -4px 0 2px; }
.att { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--white); font-size: 12px; color: var(--text-muted); cursor: pointer; max-width: 260px; }
.att:hover { border-color: var(--accent-400); color: var(--text-strong); }
.att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att img { width: 34px; height: 44px; object-fit: cover; border-radius: 3px; border: 1px solid var(--border-subtle); background: var(--surface-sunken); }
.att.text { padding-left: 8px; }
.att svg { width: 13px; height: 13px; flex: none; }
.ctx-vis { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--accent-600); margin-left: 6px; }
.ctx-vis svg { width: 12px; height: 12px; }

/* Document viewer: a wide modal, thumbnails down the left, the page on
   the right, fitted and centred. Pages are JPEGs ingestion wrote beside
   the file. On a big screen the frame leaves a margin around it. */
.viewer-overlay { padding: max(24px, 4vh) max(24px, 5vw); }
.viewer-overlay .viewer { width: min(1400px, 100%); height: min(1000px, 100%); }
.viewer { display: flex; flex-direction: column; background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); border-radius: var(--radius-lg); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); overflow: hidden; height: 100%; }
.viewer-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); font-size: 13px; }
.viewer-name { font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.viewer-count { color: var(--text-muted); }
.viewer-body { display: flex; flex: 1; min-height: 0; }
.viewer-strip { width: 120px; flex: none; overflow-y: auto; padding: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.25); display: flex; flex-direction: column; gap: 8px; }
.viewer-thumb { position: relative; border: 2px solid transparent; border-radius: var(--radius-xs); padding: 0; background: var(--white); cursor: pointer; overflow: hidden; }
.viewer-thumb img { display: block; width: 100%; }
.viewer-thumb.on { border-color: var(--accent-500); }
.viewer-thumb .n { position: absolute; right: 4px; bottom: 4px; font-size: 10.5px; font-family: var(--font-mono); background: rgba(17, 19, 21, 0.7); color: #fff; padding: 0 5px; border-radius: 3px; }
.viewer-main { flex: 1; min-width: 0; position: relative; display: flex; }
/* Grid with margin:auto on the page centres it both ways while it fits and
   lets the stage scroll from the top-left edge once it does not. */
.viewer-stage { flex: 1; overflow: auto; padding: 16px; background: rgba(17, 19, 21, 0.06); display: grid; }
.viewer-stage > * { margin: auto; }
.viewer-stage > .viewer-html { width: 100%; height: 100%; min-height: 55vh; border: 0; background: var(--white); }
/* The report viewer: the file as it downloads, in a frame that fills the
   stage; the frame's own page is the sheet on a cream ground. */
.report-viewer .viewer-body { background: #ECE7DE; }
.report-stage { display: flex; }
.report-frame { flex: 1; width: 100%; height: 100%; border: 0; background: #ECE7DE; }
.viewer-stage.zoomed { cursor: grab; }
.viewer-stage.grabbing { cursor: grabbing; }
.viewer-page { display: block; max-width: none; box-shadow: var(--shadow-md); background: var(--white); user-select: none; -webkit-user-drag: none; }
.zoombar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: var(--radius-pill);
  background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
.zoombar .iconbtn { width: 28px; height: 28px; }
.zoombar-val { min-width: 48px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-strong); }
.viewer-text { font-size: 13px; white-space: pre-wrap; background: var(--white); padding: 16px; border-radius: var(--radius-sm); max-width: 80ch; }

/* A text file as code (widgets/code-view.ts): centred in the stage, line
   numbers in a gutter, no wrapping so each number stays on its line, a
   long line scrolls sideways. */
.viewer-stage > .code-view { margin: 0 auto; align-self: start; }
.code-view { display: flex; width: min(100%, 120ch); max-height: 100%; overflow: auto; background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); font: 13px/1.6 var(--font-mono); }
.code-gutter { position: sticky; left: 0; flex: none; min-width: calc(var(--gutter-ch, 2) * 1ch + 24px); padding: 16px 12px 16px 12px; text-align: right; white-space: pre; color: var(--ink-400); background: var(--cream-50); border-right: 1px solid var(--border-subtle); user-select: none; }
.code-pre { flex: 1; min-width: 0; margin: 0; padding: 16px 20px; white-space: pre; tab-size: 2; }
.code-pre code { font: inherit; background: none; padding: 0; }
/* highlight.js token colours, in the app's palette. */
.code-body .hljs-attr, .code-body .hljs-attribute { color: var(--accent-700); }
.code-body .hljs-string { color: #0a7a52; }
.code-body .hljs-number, .code-body .hljs-literal { color: #b4500e; }
.code-body .hljs-tag, .code-body .hljs-punctuation { color: var(--ink-500); }
.code-body .hljs-name { color: #8a3ab9; }
.code-body .hljs-comment { color: var(--ink-400); font-style: italic; }
.code-body .hljs-meta { color: var(--ink-500); }
.viewer-missing { color: var(--text-muted); padding: 24px; text-align: center; }
.viewer-missing a { display: block; margin-top: 8px; color: var(--accent-600); }
.drop.over { border-color: var(--accent-400); background: var(--accent-50); color: var(--accent-700); }
.drop strong { color: var(--text-strong); }

/* ---- login ------------------------------------------------------------- */

/* The PharmaOS splash, measure for measure: cream fade, two columns up to
   1120px, 48px field and button, cream edges, Inter and Schibsted Grotesk.
   CancerOS keeps its glass card, the sheen, the rise and the focus ring.
   The viewport, not 100%: the root it sits in has no height of its own. */
.login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; color: var(--ink-900); background: var(--wash-hero); }
.login-body { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 64px; align-items: center; max-width: 1120px; width: 100%; margin: 0 auto; padding: 64px 40px; box-sizing: border-box; }
.login-body > * { min-width: 0; animation: rise var(--dur-slow) var(--ease-out) both; }
.login-access { animation-delay: 80ms; }
.login-logo { display: block; height: 72px; width: auto; }
.login-pitch h1 { margin: var(--space-8) 0 0; font-size: 2.75rem; font-weight: 600; line-height: 1.08; max-width: 15ch; letter-spacing: -0.022em; color: var(--ink-900); }
.login-lead { margin: 18px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-600); max-width: 46ch; text-wrap: pretty; }
.login-points { list-style: none; margin: var(--space-10) 0 0; padding: 0 var(--space-5); max-width: 44ch; border: 1px solid var(--cream-border); border-radius: var(--radius-md); background: var(--surface-glass); backdrop-filter: blur(var(--blur-glass)); box-shadow: var(--shadow-xs), var(--sheen-top); }
.login-points li { display: flex; align-items: center; gap: 14px; padding: var(--space-4) 0; border-bottom: 1px solid var(--cream-border); font-size: 1rem; }
.login-points li:last-child { border-bottom: 0; }
.login-points svg { width: 20px; height: 20px; flex: none; color: var(--ink-600); }
.login-access { display: flex; flex-direction: column; gap: var(--space-4); max-width: 440px; width: 100%; justify-self: end; }
.login-card { background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); border: 1px solid var(--cream-border); border-radius: 16px; padding: var(--space-8); box-shadow: var(--shadow-md), var(--acrylic-edge); }
.login-card h2 { margin: 0; font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: var(--ink-900); }
.login-card .muted { margin: var(--space-2) 0 0; font-size: 0.9375rem; color: var(--ink-600); }
.login-card .err { color: var(--danger-600); font-size: 0.875rem; min-height: 0; margin-top: var(--space-3); }
.login-card .err:empty { display: none; }
.login-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-600); margin: 26px 0 var(--space-2); }
.login-input { display: flex; align-items: center; gap: 10px; border: 1px solid var(--cream-border-input); border-radius: var(--radius-sm); padding: 0 14px; height: 48px; background: var(--white); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.login-input svg { width: 18px; height: 18px; flex: none; color: var(--ink-600); }
.login-input:hover { border-color: var(--border-input); }
.login-input:focus-within { border-color: var(--accent-600); box-shadow: var(--ring-focus); }
.login-input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 1rem; color: var(--ink-900); padding: 0; box-shadow: none; }
.login-input input:hover, .login-input input:focus-visible { background: transparent; box-shadow: none; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 18px; height: 48px; border: 0; border-radius: var(--radius-sm); background: var(--accent-600); color: var(--white); font-size: 1rem; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--dur-fast), transform var(--dur-fast); }
.login-submit svg { width: 18px; height: 18px; }
.login-submit:hover { background: var(--accent-700); }
.login-submit:active { background: var(--blue-850); transform: translateY(1px); }
.login-submit:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.login-foot-note { margin: 18px 0 0; font-size: 0.9375rem; color: var(--ink-600); text-align: center; }
.login-badges { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--ink-500); }
.login-badges span { display: inline-flex; align-items: center; gap: 6px; }
.login-badges svg { width: 15px; height: 15px; }
.login-footer { padding: var(--space-5) 40px; border-top: 1px solid var(--cream-border); display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; font-size: 0.8125rem; color: var(--ink-500); }
@media (max-width: 760px) {
  .login-body { padding: 40px 24px; gap: 40px; }
  .login-pitch h1 { font-size: 2.125rem; }
  .login-access { justify-self: stretch; max-width: none; }
  .login-card { padding: var(--space-5); }
  .login-footer { padding-inline: 24px; }
}

/* ---- modal, toast ------------------------------------------------------- */

.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(17, 19, 21, 0.32); backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur); display: grid; place-items: center; }
/* A dialog never grows past the window: on a short window it scrolls inside
   its frame rather than putting its buttons below the fold. */
.modal { background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); border-radius: var(--radius-lg); padding: 22px 24px; width: min(480px, calc(100vw - 40px)); max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
.modal-text { margin-bottom: 14px; }
.modal-text > div:first-child { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--text-strong); margin-bottom: 6px; }
.modal-text .small { color: var(--text-muted); font-family: var(--font-mono); font-size: 12.5px; }
.toast { position: fixed; top: 20px; left: 50%; translate: -50% 0; z-index: 120; background: var(--acrylic-dark); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); color: #fff; padding: 11px 16px; border-radius: var(--radius-md); box-shadow: var(--acrylic-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18); font-size: 13.5px; max-width: 460px; animation: rise var(--dur-base) var(--ease-out) both; }
.toast:has(.toast-undo) { display: flex; align-items: center; gap: 14px; }
.toast-undo { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.toast-undo:hover { background: rgba(255, 255, 255, 0.22); }
.toast-undo svg { width: 16px; height: 16px; }
.toast.error { background: linear-gradient(135deg, rgba(211, 47, 47, 0.88) 0%, rgba(114, 19, 16, 0.88) 100%); }
/* A sequencing upload: stays bottom-left until its parts are all sent. */
.upload-toast { position: fixed; bottom: 24px; left: 24px; z-index: 120; width: 360px; display: grid; gap: 8px; background: var(--acrylic-dark); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); color: #fff; padding: 11px 16px; border-radius: var(--radius-md); box-shadow: var(--acrylic-shadow); }
tr.unpaired td { background: color-mix(in srgb, var(--warning-500) 6%, transparent); }

/* --- computed output from the compute workflows ------------------------ */
/* rdkit structure grids and Kaplan-Meier curves arrive as base64 PNGs in
   the run result, so they render straight out of the JSON. */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.figures figure { margin: 0; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px; }
.figures img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); cursor: zoom-in; }
.figures figcaption { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-align: center; }

.tablewrap { max-height: 360px; overflow: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.tablewrap table { margin: 0; font-variant-numeric: tabular-nums; }
.tablewrap thead th { position: sticky; top: 0; background: var(--wash); z-index: 1; }

/* The coding-agent entry card on the Workflows page. */
.card.custom-cta { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.custom-cta-body { flex: 1; min-width: 0; }
.custom-cta h3 { margin: 4px 0 6px; font-size: 17px; font-weight: 600; }
.custom-cta .sub { margin: 0; max-width: 70ch; }

/* Record tables: workflow outputs typed as lists of objects. */
.tablewrap.records { max-height: none; }
.tablewrap.records table { width: 100%; font-size: 12.5px; }
.tablewrap.records th { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.tablewrap.records td { vertical-align: top; }
.tablewrap.records td.prose { min-width: 220px; line-height: 1.45; }
.tablewrap.records td .md p { margin: 0; }
.tablewrap.records .cell-list { margin: 0; padding-left: 14px; }
.tablewrap.records .cell-list li { margin: 0 0 2px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack .sub .overline { margin-bottom: 6px; }
.md.lead { font-size: 14px; line-height: 1.55; margin-bottom: 8px; }
.md.lead p { margin: 0 0 6px; }

/* A research run's transcript: what it said, ran, and got back. Calls
   and results are monospace and quiet; the agent's own words read as prose. */
.transcript { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow: auto; padding-right: 4px; }
.transcript pre { margin: 0; padding: 8px 10px; font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; border-radius: var(--radius-sm); max-height: 220px; overflow: auto; }
.transcript .tr-agent { font-size: 13px; }
.transcript .tr-agent .md p { margin: 0 0 6px; }
/* The head says what was done in words; the path beside it stays mono. */
.transcript .tr-call .tr-head { display: flex; gap: 8px; align-items: baseline; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.transcript .tr-call .tr-head .tool { font-family: var(--font-body); font-size: 11.5px; color: var(--ink-700); }
.transcript .tr-call pre { background: var(--ink-900); color: var(--ink-150); }
.transcript .tr-result pre { background: var(--wash); color: var(--text-muted); border-left: 2px solid var(--border-subtle); }
.task .md { font-size: 13.5px; }

/* --- list picker ------------------------------------------------------- */

/* A blocked button looks disabled but still takes the click that explains it. */
.btn.can-block.blocked { opacity: 0.55; cursor: help; }
/* Callouts: cream acrylic, the same glass as the modals, with body text in
   ink. Every callout in the UI is this one element (dom.js callout()). */
.callout { position: absolute; z-index: 60; max-width: 300px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur);
  border: 1px solid var(--cream-border); color: var(--text-strong);
  font-size: 12.5px; line-height: 1.45; box-shadow: var(--acrylic-shadow), var(--acrylic-edge); animation: rise var(--dur-base) var(--ease-out) both; }
/* A field's hint has nothing to click; a click where it sits goes to the
   control under it (the sign-in button sits right under the password box). */
.callout.passive { pointer-events: none; }
/* A dense note: the effort slider has four things to say about each stop. */
.callout.wide { max-width: 420px; padding: 11px 14px; }
.callout.wide strong { font-family: var(--font-display); font-size: 13.5px; margin-bottom: 4px; }
.callout .co-sub { color: var(--text-muted); }
.callout .co-row { margin-top: 7px; padding-left: 9px; border-left: 2px solid var(--cream-border); color: var(--text-body); }
.callout .co-row b { display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; margin-bottom: 1px; }
.callout .co-row.good { border-left-color: var(--success-500); }
.callout .co-row.good b { color: var(--success-600); }
.callout .co-row.bad { border-left-color: var(--warning-500); }
.callout .co-row.bad b { color: var(--warning-600); }
.modal.skill { width: min(640px, calc(100vw - 40px)); display: flex; flex-direction: column; }
.people-modal .modal-text p.small { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); margin: 6px 0 0; }
.people { margin: 14px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.person { display: flex; align-items: center; gap: 10px; }
.person .name { font-size: 13.5px; color: var(--text-strong); }
.invite-row { gap: 8px; margin-top: 8px; }
.seat-note { margin: 2px 0 4px; }
.invite-row input { flex: 1; }
.people-modal .err { color: var(--danger-600); font-size: 12.5px; margin-top: 6px; }
.people-btn { max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.people-btn svg { flex: none; }
.modal.skill .modal-text p.small { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); margin: 6px 0 0; }
.modal.skill .field { margin-bottom: 8px; }
.modal.skill textarea { font-family: var(--font-mono); font-size: 12.5px; }
.modal.skill .err { color: var(--danger-600); font-size: 12.5px; text-align: right; }
.skill-lib { flex: 0 1 auto; min-height: 72px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle); max-height: 220px; overflow-y: auto; }
.skill-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--border-subtle); }
.skill-row .name { font-size: 13px; color: var(--text-strong); }
.ctx-item.is-skill svg:first-child { color: var(--accent-500); }
.modal.notice { width: min(560px, calc(100vw - 40px)); }
.modal.notice .modal-text p.small { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; color: var(--text); margin: 8px 0 0; }
.modal.pick { width: min(560px, calc(100vw - 40px)); display: flex; flex-direction: column; }
.modal.pick .modal-text .small { font-family: var(--font-sans); }
/* The list gives way first on a short window, so Cancel and the choice stay in view. */
.pick-list { flex: 0 1 auto; min-height: 96px; display: flex; flex-direction: column; gap: 6px; max-height: min(60vh, 520px); overflow: auto; margin: 0 -6px; padding: 0 6px; }
.pick-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; border: 1px solid var(--border-subtle); background: var(--white); border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--text-strong); }
/* A day's heading in a grouped list (Today, Yesterday, Older). Quiet, and
   it sits closer to its own rows than to the group above. */
.pick-group { margin: 10px 2px 0; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--text-subtle); }
.pick-group:first-child { margin-top: 0; }
.manifest-line { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }
.gaps { margin: 12px 0 4px; padding: 10px 14px; border-left: 3px solid var(--warning-500); background: var(--warning-100); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.gaps .overline { color: var(--warning-600); margin-bottom: 4px; }
.gaps ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-body); }
.gaps li { margin: 2px 0; }
.toolcalls summary { cursor: pointer; }
.toolcalls table { margin-top: 8px; }
/* The step tracker on a composed run's page: steps in run order, the one
   running named at the top with a spinning ring, the one waiting with a
   pulsing question mark. */
.step-tracker .card-head { flex-wrap: wrap; }
.step-tracker .st-now { font-weight: 600; color: var(--accent-700); }
.st-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.st-row:last-child { border-bottom: 0; }
.st-n { width: 20px; font-size: 12px; color: var(--text-subtle); text-align: right; font-variant-numeric: tabular-nums; }
.st-ic { width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.st-ic svg { width: 16px; height: 16px; }
.st-ic .spin { width: 16px; height: 16px; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cream-border-input, var(--border-default)); }
.st-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.st-name { font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row.st-pending .st-name { color: var(--text-muted); font-weight: 400; }
.st-row.st-running .st-name { color: var(--accent-700); font-weight: 600; }
.st-row.st-running .st-word { color: var(--accent-700); }
.st-row.st-done .st-ic, .st-row.st-approved .st-ic { color: var(--success-600); }
.st-row.st-failed .st-ic, .st-row.st-stopped .st-ic { color: var(--danger-600); }
.st-row.st-waiting .st-ic { color: var(--warning-600); animation: pulse 1.6s ease-in-out infinite; }
.st-row.st-waiting .st-name, .st-row.st-waiting .st-word { color: var(--warning-700, var(--warning-600)); }
.st-row.st-revising .st-ic { color: var(--warning-600); }
.st-row.st-skipped, .st-row.st-empty { opacity: 0.6; }
.st-picture { margin-top: 10px; }
.st-picture summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .st-row.st-waiting .st-ic { animation: none; } }
/* The run page: a timeline (docs/run-page-plan.md). The head says what,
   who and how long; a thin bar says the state; what needs you sits above
   the timeline; the timeline is everything the run did with its questions
   inline; the rail holds the plan, the lookups and what the run reads. */
.run-page { container-type: inline-size; }
.run-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: var(--space-4); }
.run-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.run-title h1 { font-size: 24px; margin: 0; letter-spacing: -.01em; }
.run-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 13px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.run-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }
.run-who { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--radius-pill); background: var(--accent-50); color: var(--accent-700); font-weight: 500; text-decoration: none; }
.run-who:hover { background: var(--accent-100); }
.run-who svg { width: 14px; height: 14px; }
.run-ids .mono { font-family: var(--font-mono); font-size: 11.5px; }
.run-meta .clock { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-700); }
.run-meta .clock svg { width: 14px; height: 14px; color: var(--ink-400); }
.run-meta .usual { border-bottom: 1px dotted var(--ink-300); cursor: help; }
.run-meta .usual.long { color: var(--warning-600); border-color: var(--warning-300); }
.run-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.run-acts .btn.on { background: var(--accent-50); border-color: var(--accent-300); color: var(--accent-700); }
.run-anchor { position: relative; display: inline-flex; }
.run-confirm { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 300px; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(17, 19, 21, .14); padding: 14px; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.run-confirm.open { opacity: 1; transform: none; pointer-events: auto; }
.run-confirm b { display: block; margin-bottom: 4px; }
.run-confirm p { margin: 0 0 12px; font-size: 13px; color: var(--ink-700); }
.run-confirm .row { justify-content: flex-end; gap: 8px; }

/* The bar: moving while it works, held while it waits, full when done. */
.run-bar { position: relative; height: 3px; border-radius: 3px; background: var(--cream-100); margin: 18px 0 22px; overflow: hidden; }
.run-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; }
.run-bar.running i { width: 32%; background: linear-gradient(90deg, transparent, var(--accent-600), transparent); animation: run-sweep 1.8s ease-in-out infinite; }
.run-bar.queued i { width: 18%; background: linear-gradient(90deg, transparent, var(--ink-300), transparent); animation: run-sweep 2.4s ease-in-out infinite; }
/* Paused: the bar holds still and breathes, the way a held note does. */
.run-bar.waiting_for_input i { width: 100%; background: var(--warning-500); animation: run-breathe 2.4s ease-in-out infinite; }
@keyframes run-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.run-bar.complete i { width: 100%; background: var(--success-600); }
.run-bar.failed i { width: 100%; background: var(--danger-300); }
.run-bar.cancelled i, .run-bar.abandoned i { width: 100%; background: var(--ink-200); }
@keyframes run-sweep { from { left: -32%; } to { left: 100%; } }

.run-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: start; }
.run-main { min-width: 0; }
.run-above > .card { margin-bottom: 20px; }
.run-above .overline { display: flex; align-items: center; gap: 6px; }
.run-above .overline svg { width: 14px; height: 14px; }
.run-error { border-color: var(--danger-300); background: var(--danger-50); }
.run-error .overline { color: var(--danger-600); }
.run-stopped { background: var(--cream-50); }
.run-stopped p { margin: 0; color: var(--ink-700); }
.run-sect { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.run-sect h2 { font-size: 13px; margin: 0; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); }
.run-folded { border: 1px dashed var(--border-subtle); border-radius: var(--radius-md); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-700); font-size: 13px; }
.run-leave { margin-top: 16px; display: flex; gap: 8px; align-items: flex-start; }
.run-leave svg { width: 14px; height: 14px; margin-top: 2px; flex: none; color: var(--ink-400); }

/* The timeline. */
.run-tl { position: relative; list-style: none; margin: 0; padding: 0; }
.run-tl::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1.5px; background: var(--cream-200); }
.tl-ev { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; padding: 9px 0; }
.tl-ev.enter, .tl-divider.enter { animation: rise var(--dur-slow) var(--ease-out) both; }
.tl-ic { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 1.5px solid var(--border-subtle); color: var(--text-subtle); }
.tl-ic svg { width: 15px; height: 15px; }
.tl-ev.done .tl-ic { background: var(--success-100); border-color: var(--success-300); color: var(--success-600); }
.tl-ev.failed .tl-ic { background: var(--danger-50); border-color: var(--danger-300); color: var(--danger-600); }
.tl-ev.stopped .tl-ic, .tl-ev.cut .tl-ic { background: var(--cream-100); color: var(--ink-500); }
.tl-ev.ask .tl-ic, .tl-ev.waiting .tl-ic { background: var(--accent-50); border-color: var(--accent-300); color: var(--accent-700); font-weight: 700; font-size: 13px; }
.tl-ev.holding .tl-ic { border-color: var(--warning-300); color: var(--warning-600); border-style: dashed; }
.tl-ev.holding .tl-t { color: var(--warning-600); }
.tl-ev.waiting .tl-ic { background: var(--warning-100); border-color: var(--warning-300); color: var(--warning-600); }
.tl-ev.line .tl-ic { width: 22px; height: 22px; margin-left: 3px; border-color: var(--cream-200); }
.tl-ev.line .tl-ic svg { width: 12px; height: 12px; }
.tl-ev.line { padding: 4px 0; }
.tl-ev.line .tl-t { font-weight: 400; color: var(--ink-600); font-size: 13px; }
.tl-ev.now .tl-ic { border-color: var(--accent-100); }
.tl-ev.now .tl-ic::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent-600); animation: spin .9s linear infinite; }
.tl-ev.now .tl-ic svg { color: var(--accent-600); }
.tl-body { min-width: 0; padding-top: 3px; }
.tl-t { font-weight: 500; color: var(--text-strong); }
.tl-ev.now .tl-t { color: var(--accent-700); }
.tl-t.shimmer { color: transparent; background-image: linear-gradient(90deg, transparent calc(50% - 24px), var(--ink-900), transparent calc(50% + 24px)), linear-gradient(var(--accent-700), var(--accent-700)); background-size: 250% 100%, auto; background-repeat: no-repeat, padding-box; -webkit-background-clip: text; background-clip: text; animation: text-shimmer 2s linear infinite; }
.tl-d { color: var(--ink-600); font-size: 13px; margin-top: 1px; }
.tl-d strong { color: var(--text-strong); font-weight: 600; }
.tl-md p { margin: 0; }
.tl-when { font-size: 12px; color: var(--ink-400); padding-top: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.tl-when .tl-took { display: block; color: var(--ink-300); }
.tl-count { font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: 600; display: inline-block; min-width: 2ch; }
.tl-count.tick { animation: tl-tick var(--dur-slow) var(--ease-out); }
@keyframes tl-tick { 0% { color: var(--accent-600); } 100% { color: var(--text-strong); } }
.tl-q { font-weight: 700; }
.tl-answer { color: var(--ink-600); }
.tl-answer strong { color: var(--text-strong); }
.tl-note { color: var(--ink-600); }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.tl-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--radius-pill); background: var(--cream-100); color: var(--ink-700); font-size: 12px; white-space: nowrap; }
.tl-chip svg { width: 13px; height: 13px; color: var(--ink-500); }
.tl-fold { margin-top: 6px; font-size: 12.5px; }
.tl-fold summary { cursor: pointer; color: var(--ink-500); list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.tl-fold summary::-webkit-details-marker { display: none; }
.tl-fold summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-base) var(--ease-out); }
.tl-fold[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.tl-fold summary:hover { color: var(--accent-700); }
.tl-fold ul { list-style: none; margin: 8px 0 0; padding: 8px 10px; background: var(--cream-50); border-radius: var(--radius-sm); color: var(--ink-600); }
.tl-fold li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.tl-fold li.failed .tl-fold-got { color: var(--danger-600); }
.tl-fold-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-fold-got { color: var(--ink-500); white-space: nowrap; }
/* The open question inside its timeline item: the card loses its frame. */
.tl-ev.waiting .tl-body > .card.question { margin: 8px 0 0; box-shadow: none; border-color: var(--warning-300); background: linear-gradient(180deg, var(--warning-100), var(--white) 70%); }
.tl-ev.waiting .tl-body > .card.question .qtext { font-size: 15.5px; }
.tl-divider { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: center; margin: 12px 0 2px; list-style: none; }
.tl-divider span:first-child { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-200); justify-self: center; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--white); }
.tl-divider b { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); font-weight: 600; }
.tl-divider.cur span:first-child { background: var(--accent-600); }
.tl-divider.cur b { color: var(--accent-700); }
.tl-skel-row { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; }
.tl-skel-row i { height: 28px; border-radius: 50%; background: var(--cream-100); }
.tl-skel-row em { height: 12px; margin-top: 8px; border-radius: 6px; background: linear-gradient(90deg, var(--cream-100), var(--cream-50), var(--cream-100)); background-size: 200% 100%; animation: tl-shimmer 1.6s linear infinite; }
@keyframes tl-shimmer { to { background-position: -200% 0; } }

/* The run page's side column: headed groups one under another, a
   hairline between, no box. (Not the app's .rail: that is the sidebar.) */
.run-rail { position: sticky; top: 16px; display: grid; gap: 0; align-content: start; }
.rail-group { padding: 14px 0 16px; border-top: 1px solid var(--border-soft); }
.rail-group:first-child { padding-top: 0; border-top: 0; }
.rail-group h4 { margin: 0 0 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); display: flex; justify-content: space-between; gap: 8px; }
.rail-group h4 span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rail-group .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; font-size: 13px; }
.rail-group .kv dt { color: var(--text-subtle); }
.rail-group .kv dd { margin: 0; color: var(--ink-700); text-align: right; overflow-wrap: anywhere; }
/* In the side column the consult strip is plain: the words, then the
   buttons on their own line. */
.rail-group .consult-strip { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; flex-wrap: wrap; font-size: 13px; }
.rail-group .consult-strip > .fluent { display: none; }
.rail-group .consult-strip > .grow { flex: 1 1 100%; min-width: 0; }
.rail-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; color: var(--text-subtle); }
.rail-steps li .s { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink-200); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.rail-steps li .s svg { width: 11px; height: 11px; }
.rail-steps li.done { color: var(--ink-700); }
.rail-steps li.done .s { background: var(--success-600); border-color: var(--success-600); color: #fff; }
.rail-steps li.cur { color: var(--accent-700); font-weight: 500; }
.rail-steps li.cur .s { border-color: var(--accent-100); border-top-color: var(--accent-600); animation: spin .9s linear infinite; }
.rail-steps li.wait { color: var(--warning-600); font-weight: 500; }
.rail-steps li.wait .s { border-color: var(--warning-600); background: var(--warning-100); color: var(--warning-600); }
.rail-steps li.bad { color: var(--danger-600); font-weight: 500; }
.rail-steps li.bad .s { background: var(--danger-600); border-color: var(--danger-600); color: #fff; }
.rail-steps li.cut { color: var(--ink-400); text-decoration: line-through; }
.rail-steps li i { font-style: normal; font-size: 12px; color: var(--ink-400); font-variant-numeric: tabular-nums; }
/* Looked up: a bar showing each source's share of the lookups, then a
   tile per source that folds open to the lookups it made, in words. Six
   source colours, by rank, so the bar and the tiles agree. */
.src-bar { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; margin: 0 0 12px; }
.src-bar i { display: block; min-width: 4px; }
.s0 { --src: var(--accent-600); --src-soft: var(--accent-50); }
.s1 { --src: var(--warning-500); --src-soft: var(--warning-100); }
.s2 { --src: var(--cyan-600); --src-soft: var(--cyan-100); }
.s3 { --src: var(--success-600); --src-soft: var(--success-50, #eef8f1); }
.s4 { --src: var(--brand-indigo); --src-soft: rgba(117, 141, 250, 0.12); }
.s5 { --src: var(--ink-400); --src-soft: var(--cream-200); }
.src-bar i { background: var(--src); }
.src-list { display: grid; gap: 6px; }
.src-fold { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--white); }
.src-fold summary { list-style: none; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 16px; gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; }
.src-fold summary::-webkit-details-marker { display: none; }
.src-fold summary > svg { width: 16px; height: 16px; color: var(--ink-400); transition: transform var(--dur-base) var(--ease-out); }
.src-fold[open] summary > svg { transform: rotate(180deg); }
.src-mark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--src); background: var(--src-soft); }
.src-words { display: flex; flex-direction: column; min-width: 0; }
.src-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.src-hint { font-size: 11.5px; color: var(--text-subtle); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.src-n { font-size: 12px; font-weight: 600; color: var(--ink-700); font-variant-numeric: tabular-nums; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--cream-100); }
.src-n.failed { color: var(--danger-600); background: var(--danger-100); }
.src-calls { list-style: none; margin: 0; padding: 4px 10px 10px 50px; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-700); }
.src-calls li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.src-calls li.failed { color: var(--danger-600); }
.src-calls .src-n { background: transparent; padding: 0; font-weight: 500; color: var(--text-subtle); }
/* Inputs: a card per thing the run read, and who set it going. */
.in-list { display: grid; gap: 8px; }
.in-card { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--white); font-size: 13px; }
.in-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-50); color: var(--accent-700); }
.in-ic svg { width: 16px; height: 16px; }
.in-ic:has(.avatar) { background: transparent; }
.in-ic .avatar.sm { width: 30px; height: 30px; font-size: 11.5px; }
.in-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.in-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.in-title { font-weight: 600; color: var(--text-strong); }
.in-pin { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-700); padding: 1px 8px; border-radius: var(--radius-pill); background: var(--cream-100); white-space: nowrap; }
.in-pin svg { width: 12px; height: 12px; }
.in-body p { margin: 0; color: var(--text-muted); line-height: 1.45; }
.in-body p.in-strong { color: var(--text-strong); font-weight: 500; }
.in-body .linkbtn { align-self: flex-start; font-size: 13px; }
/* An archived run: the card above the timeline that says so. */
.run-archived { border-color: var(--border-subtle); background: var(--cream-50); }
.run-archived .overline { color: var(--text-muted); }
.run-archived .overline svg { width: 15px; height: 15px; }
.run-archived p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-700); }
@container (max-width: 760px) {
  .run-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .run-rail { position: static; order: -1; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 24px; }
  .run-rail .rail-group { border-top: 0; padding-top: 0; }
  .run-title h1 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .run-bar i, .tl-ev.now .tl-ic::after, .rail-steps li.cur .s, .tl-skel-row em { animation: none; }
  .run-bar.waiting_for_input i { opacity: .8; }
  .tl-t.shimmer { color: inherit; background: none; }
  .tl-ev.enter, .tl-divider.enter, .tl-count.tick { animation: none; }
  .run-confirm { transition: none; }
}

/* The older run strip, kept for the answer modal. */
.run-stack { gap: var(--space-4); margin-top: var(--space-4); }
.run-stack > .card { margin: 0; }
.runstrip > .consult-strip { margin: -10px -16px 10px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 1px solid var(--border-soft); background: transparent; box-shadow: none; }
/* The open question nests inside its event in "What happened": the
   question card loses its outer frame and sits in the event's panel. */
.ev-waiting .ev-body { padding: 0; background: transparent; }
.ev-waiting .ev-body > .ev-step { margin-bottom: 4px; }
.ev-waiting .ev-body > .card.question { margin: 0; box-shadow: none; }
.ev-waiting .ev-body > .card.question .qtext { font-size: 15.5px; }
/* What happened on a run: one event per line down a rail, time at the
   left, an icon for the kind, then the words. A question is shown whole;
   an answer names who gave it. */
.ev-list { list-style: none; margin: 0; padding: 0; position: relative; }
.ev-list::before { content: ""; position: absolute; left: 81px; top: 10px; bottom: 10px; width: 1px; background: var(--border-soft); }
.ev { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; position: relative; }
.ev-time { width: 62px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 11.5px; padding-top: 3px; white-space: nowrap; }
.ev-ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 1px solid var(--border-soft); color: var(--text-subtle); z-index: 1; }
.ev-ic svg { width: 12px; height: 12px; }
.ev-body { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; }
.ev-step { margin-bottom: 1px; }
.ev-title { font-weight: 500; color: var(--text-strong); }
.ev-text { color: var(--text-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.ev-options { margin-top: 2px; color: var(--text-body); }
.ev-note { margin-top: 3px; padding-left: 9px; border-left: 2px solid var(--cream-border); color: var(--text-body); font-style: italic; }
.ev-items { margin: 4px 0 0; padding-left: 16px; }
.ev-open { margin-top: 3px; color: var(--warning-700, var(--warning-600)); }
.ev-start .ev-ic { color: var(--accent-600); border-color: var(--accent-200); }
.ev-done .ev-ic { color: var(--success-600); border-color: var(--success-200, var(--success-100)); }
.ev-failed .ev-ic, .ev-stopped .ev-ic { color: var(--danger-600); border-color: var(--danger-200); }
.ev-asked .ev-ic, .ev-waiting .ev-ic { color: var(--warning-600); border-color: var(--warning-200, var(--warning-100)); background: var(--warning-50, #FFF7E6); }
.ev-waiting .ev-ic { animation: pulse 1.6s ease-in-out infinite; }
.ev-answered .ev-ic { color: var(--white); background: var(--accent-600); border-color: var(--accent-600); }
.ev-asked .ev-body, .ev-waiting .ev-body { padding: 6px 10px; border-radius: var(--radius-sm); background: var(--cream-100); }
.ev-approve { color: var(--success-600); }
.ev-reject { color: var(--danger-600); }
.ev-revise { color: var(--warning-600); }
/* The casebook a run was started from, in the picker: in, and not for turning off. */
.doc-row.locked { background: var(--accent-50); cursor: default; }
.doc-row.locked:hover { background: var(--accent-50); }
.doc-row.locked .badge { font-size: 11px; }
.runlog summary { cursor: pointer; }
.runlog-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 360px; overflow-y: auto; }
.runlog-list li { display: flex; align-items: center; gap: 10px; padding: 5px 2px; font-size: 13.5px; border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,.05)); }
.runlog-list li:last-child { border-bottom: 0; }
.runlog-list svg { width: 15px; height: 15px; flex: none; color: var(--text-subtle); }
.runlog-time { font-family: var(--font-mono); font-size: 11.5px; min-width: 64px; }
.runlog-search svg { color: var(--accent-500); }
.runlog-write svg, .runlog-done svg { color: var(--success-600, #2f855a); }
.runlog-stop svg { color: var(--warning-600); }
.pick-tabs { margin-bottom: 8px; }
/* Consulted research (D111): usernames as chips, the notice, who has it. */
.consult-fold { margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--accent-300, #b9c6ff); border-radius: var(--radius-md); }
.consult-fold summary .fluent { width: 18px; height: 18px; color: var(--accent-500); }
.consult-notice { margin: 0 0 8px; line-height: 1.45; }
.people-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 4px 8px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--white); cursor: text; }
.people-box:focus-within { border-color: var(--accent-500); }
.people-chips { display: contents; }
.people-box input { flex: 1; min-width: 160px; border: 0; outline: 0; background: none; padding: 4px 2px; font: inherit; font-size: 13.5px; }
.people-box .chip { cursor: default; padding-right: 4px; }
.chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px; border: 0; border-radius: 50%; background: none; color: var(--ink-500); cursor: pointer; }
.chip-x:hover { background: var(--cream-200); color: var(--ink-800); }
.chip-x svg { width: 11px; height: 11px; }
.consult-strip { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-top: 12px; font-size: 13.5px; }
.consult-strip > .fluent { width: 20px; height: 20px; flex: none; color: var(--accent-500); }
.consultee .chip-x { vertical-align: -4px; }
.share-list { display: flex; flex-direction: column; gap: 6px; }
.share-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--cream-border); border-radius: var(--radius-md); background: rgba(255, 255, 255, .5); }
.share-row > .fluent { width: 18px; height: 18px; flex: none; color: var(--accent-500); }
.inline-ic { width: 14px; height: 14px; vertical-align: -2px; color: var(--accent-500); }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover, th.sortable.on { color: var(--text-body); }
.sort-mark { color: var(--accent-500); }
td .badge + .badge { margin-left: 6px; }
.lib-defaults { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border-subtle, rgba(0,0,0,.08)); }
.lib-section-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.lib-group.sub { margin-top: 10px; }
.pick-row:hover, .pick-row:focus-visible { border-color: var(--accent-400); background: var(--accent-50); outline: none; }
.pick-row.on { border-color: var(--accent-500); background: var(--accent-50); box-shadow: inset 3px 0 0 var(--accent-500); }
.pick-main { flex: 1; min-width: 0; }
.pick-title { font-family: var(--font-display); font-weight: 500; font-size: 14.5px; }
.pick-detail { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }

/* --- a workflow run, inline in the thread ------------------------------- */
/* A run started from the conversation lives in it: the card is the question
   while it waits, the summary when it finishes. */

.msg.run { align-self: stretch; max-width: 100%; background: var(--white); border: 1px solid var(--accent-100); border-radius: var(--radius-lg); padding: 12px 14px; }
.msg.run .who { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--accent-700); margin-bottom: 8px; }
.msg.run .who svg { width: 13px; height: 13px; }
.msg.run .question { border: 0; background: none; padding: 0; }
.msg.run .run-body .figures { margin-top: 10px; }
.msg.run .err { color: var(--danger-600); background: var(--danger-100); padding: 8px 10px; border-radius: var(--radius-xs); font-size: 13px; }

/* A run gSage offered: it started nothing; the button opens the dialog. */
.run-offer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 10px 0 12px; padding: 12px 14px; background: var(--white); border: 1px solid var(--accent-100); border-radius: var(--radius-sm); }
/* The text keeps 200px or the button goes to its own line. This used to be
   a width media query, which asks how wide the window is -- and the window
   is 1440px while this card sits in a 400px panel beside a casebook, so it
   never fired and the text was squeezed to two characters. */
.run-offer > .grow { flex: 1 1 200px; }
.run-offer .offer-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent-50, #EEF1FF); color: var(--accent-600); }
.run-offer .offer-ic svg { width: 18px; height: 18px; }
.run-offer .offer-kind { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.run-offer .offer-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink-900, var(--ink-800)); }
.run-offer .offer-who { font-size: 13px; color: var(--ink-700, var(--ink-800)); margin-top: 1px; }
.run-offer .offer-why { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.run-offer .offer-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.run-offer > .btn { flex: none; align-self: center; margin-left: auto; }

/* --- conflict candidates ------------------------------------------------- */

.candidates { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.candidate { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--white); }
.candidate .value { font-family: var(--font-mono); font-size: 13px; color: var(--text-strong); word-break: break-word; }
.candidate .quote { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); font-size: 13px; margin-top: 4px; }

/* --- search box on list pages ------------------------------------------- */

/* The field that finds a colleague to invite: the matches sit under it,
   over whatever the dialog has below. */
.userfind { position: relative; flex: 1; min-width: 0; display: flex; }
.userfind > input { width: 100%; }
.userfind-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; padding: 4px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--white); box-shadow: var(--shadow-md); }
.userfind-list[hidden] { display: none; }
.userfind-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-xs); background: transparent; cursor: pointer; text-align: left; font: inherit; }
.userfind-row:hover, .userfind-row.on { background: var(--surface-hover); }
.userfind-row .name { font-size: 13.5px; font-weight: 500; color: var(--text-strong); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.userfind-role { flex: none; max-width: 45%; text-align: right; font-size: 12.5px; color: var(--ink-700); overflow: hidden; }
.userfind-role > div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.userfind-none { margin: 0; padding: 8px; }
/* New casebook: drop the reports in, and the build is asked for while
   they are still being read. */
.nc-modal { width: min(560px, 92vw); display: flex; flex-direction: column; gap: 12px; }
/* .modal-text .small is monospace by default and seven dialogs already
   turn it back to sans. This is the eighth; the default is what is wrong. */
.nc-modal .modal-text p.small { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); margin: 6px 0 0; }
.nc-drop { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border: 1px dashed var(--border-default); border-radius: var(--radius-md); background: var(--surface-faint); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.nc-drop:hover, .nc-drop.over { border-color: var(--accent-600); background: var(--accent-50); }
.nc-drop svg { width: 22px; height: 22px; color: var(--accent-600); flex: none; }
.nc-pick { width: 100%; padding: 10px 16px; border-style: solid; font: inherit; color: inherit; text-align: left; }
.nc-pick svg { width: 18px; height: 18px; }
.nc-files { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.nc-files[hidden] { display: none; }
.nc-file { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface-faint); }
.nc-file > svg { width: 15px; height: 15px; flex: none; color: var(--text-subtle); }
.nc-file.parsed > svg { color: var(--success-600, var(--accent-600)); }
.nc-file.failed > svg, .nc-file.unpaired > svg { color: var(--danger-600); }
.nc-file .nc-name { font-size: 13.5px; font-weight: 500; color: var(--text-strong); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nc-for { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nc-note { margin: 0; }
.searchbox { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 0 10px; background: var(--white); height: 34px; min-width: 260px; }
.searchbox:focus-within { border-color: var(--accent-400); box-shadow: var(--ring-focus); }
.searchbox svg { width: 15px; height: 15px; color: var(--text-subtle); flex: none; }
.searchbox input { border: 0; box-shadow: none; padding: 0; height: 100%; font-size: 13.5px; background: transparent; }
.searchbox input:focus { box-shadow: none; }
.storage-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--border-default); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); background: var(--surface-faint); }
.storage-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--text-subtle); }

/* --- digital-twin: the ordered options ---------------------------------- */
/* A regimen has ten fields and four of them are paragraphs. As a table row
   it needed 1,500px inside a 1,200px page, so the reader scrolled sideways
   to find out whether a drug applied. One card per regimen instead: the
   grade and the name where the eye lands, the reasons in two columns, the
   dose, trial and safety rows behind their own folds. */

.options-list { display: flex; flex-direction: column; gap: 18px; }
.opt-class-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.opt-class-head h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-strong); }

.opt { border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-300); border-radius: var(--radius-sm);
       background: var(--white); padding: 12px 14px; margin-bottom: 8px; }
.opt-head { display: flex; align-items: flex-start; gap: 10px; }
.opt-head .rank { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cream-200); color: var(--ink-700);
                  font-size: 12px; font-weight: 600; display: grid; place-items: center; margin-top: 1px; }
.opt-head .name { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.opt-head .muted .md p { margin: 2px 0 0; }
.opt-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 42%; }
.opt .standing { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.opt .standing .tag { font-family: var(--font-body); white-space: normal; }

/* Two columns while there is room; one when there is not. */
.opt-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.opt-reasons .reasons ul { margin: 4px 0 0; padding-left: 16px; }
.opt-reasons .reasons li { font-size: 13px; line-height: 1.5; margin-bottom: 3px; }
.opt-reasons .reasons li .md p { margin: 0; }
.opt-reasons .for .overline { color: var(--success-600); }
.opt-reasons .against .overline { color: var(--warning-600); }
.opt > .fold { margin-top: 8px; }

/* The treatment in progress: a status block, never a row in the list. */
.current { border: 1px solid var(--accent-100); background: var(--accent-50); border-radius: var(--radius-sm); padding: 12px 14px; }
.current .name { font-size: 14.5px; font-weight: 600; color: var(--text-strong); margin-top: 4px; }
.current p { font-size: 13px; margin: 6px 0 0; }
.current .overline { margin-bottom: 0; }
.current ul { margin: 4px 0 0; padding-left: 16px; font-size: 13px; }
.current .fold { margin-top: 8px; }

/* --- the output of a run ------------------------------------------------ */
/* What the doctor approved is the thing on the page; the rest of the
   result is how it was reached. So the output is open, first, and marked
   with a tinted head. */

.output { border: 1px solid var(--accent-100); border-radius: var(--radius-md);
          background: var(--white); padding: 14px 18px 16px; margin-bottom: 14px; }
.output-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.output-head .overline { color: var(--accent-700); }
.output .md.lead { font-size: 14.5px; }
.output > div > .fold:first-of-type { margin-top: 6px; }
/* A passage of a result or a draft: its name small above it, the text
   at reading size. Sections follow one another with no frame between. */
.prose-sect { margin-top: 14px; }
.prose-sect:first-child { margin-top: 0; }
.prose-sect > .overline { margin-bottom: 3px; }
.prose-sect > .md { font-size: 14.5px; }
.prose-sect > .md p { margin: 0 0 6px; }
.prose-sect + .fold, .fold + .prose-sect { margin-top: 14px; }
/* A composed run's result: one level deep. An overline names each part
   (the app's words); what follows it is the content. Parts are separated
   by a hairline, nothing is boxed, and the only fold is the transcript. */
.cres-sect { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border-soft); }
.cres-sect:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.cres-sect > .overline, .cres-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cres-sect .sources { margin-top: 0; }
.cres-report { font-size: 15px; }
.cres-report > .md-h:first-child { margin-top: 0; }
.cres-report + .figures { margin-top: 14px; }
.cres > .gaps { margin-top: 14px; }
.cres-fold { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
/* The steps: the composer's numbering, flags and chips, one row per step
   with how it ended at the right and the files it made under it. */
.pl-steps { list-style: none; margin: 0; padding: 0; }
.pl-step { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.pl-step:first-child { border-top: 0; padding-top: 2px; }
.pl-step:last-child { padding-bottom: 2px; }
.pl-step.skipped { opacity: .65; }
.pl-step > .cmp-n { margin-top: 1px; }
.pl-main { min-width: 0; display: grid; gap: 6px; }
.pl-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pl-files .artifact-file { padding: 4px 10px; font-size: 13px; gap: 6px; }
.pl-files .cmp-type-ic { color: var(--ink-600); }
.pl-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pl-head .badge { flex: none; }
.pl-name { font-weight: 600; color: var(--text-strong); font-size: 14px; }
.pl-task { font-size: 13px; color: var(--ink-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-task b { color: var(--ink-700); font-weight: 600; }
.pl-ios { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pl-io { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.pl-io .cmp-lbl { margin: 0 4px 0 0; }
.pl-amend { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--ink-700); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--cream-100); }
.pl-amend .inline-ic { margin-top: 2px; }
.pl-amend.applied { background: var(--success-100); }
.pl-amend.applied b:last-child { color: var(--success-600); }
.pl-amend.failed { background: var(--danger-100); }
.pl-amend.failed b:last-child { color: var(--danger-600); }
.pl-err { font-size: 13px; color: var(--danger-600); }
.pl-note { font-size: 13px; color: var(--ink-600); font-style: italic; }

/* Record cards: what a record table becomes when its cells are paragraphs. */
.record-cards { display: flex; flex-direction: column; gap: 10px; }
.record-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--white); padding: 12px 14px; }
.record-card-head { display: flex; align-items: flex-start; gap: 10px; }
.record-card-head .rank { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cream-200); color: var(--ink-700);
                  font-size: 12px; font-weight: 600; display: grid; place-items: center; margin-top: 1px; }
.record-card-head .name { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.record-card-head .name p { margin: 0; }
.record-card-facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 8px 0 0; font-size: 13px; }
.record-card-facts dt { color: var(--text-muted); }
.record-card-facts dd { margin: 0; }
.record-card-facts dd .md p, .rec-facts dd p { margin: 0; }
.record-card-prose { margin-top: 10px; }
.record-card-prose .overline { margin-bottom: 3px; }
.record-card-prose .md { font-size: 13px; line-height: 1.5; }
.record-card-prose .md p { margin: 0 0 4px; }
.record-card-links { margin-top: 10px; font-size: 12px; }
.record-card-links ol { margin: 4px 0 0; padding-left: 18px; columns: 2 220px; column-gap: 24px; }
.record-card-links li { break-inside: avoid; overflow-wrap: anywhere; }
.record-card-links a { color: var(--accent-600); text-decoration: none; }
.record-card-links a:hover { text-decoration: underline; }

/* Run facts as one strip across the top of a run page: label value,
   label value, wrapping when narrow. */
.runstrip { padding: 10px 16px; }
.runstrip .kv { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; }
.runstrip .kv dt { color: var(--text-muted); white-space: nowrap; margin-right: 6px; }
.runstrip .kv dd { margin: 0 28px 0 0; font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.runstrip .kv dd:last-child { margin-right: 0; }
/* --- Research composer ------------------------------------------------------
   A canvas of boxes on the dot grid. The palette and the box editor float
   over it on acrylic, like the conversation list and Ask gSage, and fold
   away to a pill. Lines between boxes are drawn from what each box reads. */
.plan-composer { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--cream-board); }
.cmp-canvas { position: absolute; inset: 0; overflow: hidden; cursor: move; touch-action: none; outline: none;
  background-image: radial-gradient(var(--cream-board-dot) 1px, transparent 1px); background-size: 22px 22px; }
.cmp-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.cmp-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.cmp-wire { fill: none; stroke: url(#cmp-brand); stroke-width: 2; pointer-events: none; transition: stroke-width var(--dur-fast); }
.cmp-wire.lit { stroke-width: 3.5; }
.cmp-wire-end { fill: none; stroke: var(--brand-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cmp-wire-start { fill: var(--white); stroke: var(--brand-indigo); stroke-width: 1.5; pointer-events: none; }
.cmp-wire-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: help; }

/* Floating chrome: the bar, the two panels, the estimate and the zoom. */
.cmp-bar { position: absolute; z-index: 6; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px;
  border-radius: var(--radius-pill); background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); }
.cmp-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-gradient-soft); color: var(--accent-700); }
.cmp-mark svg { width: 16px; height: 16px; }
.cmp-title { border: 0; background: transparent; font: 600 16px var(--font-display); color: var(--text-strong); padding: 4px 8px; border-radius: var(--radius-sm); min-width: 220px; width: 32ch; }
.cmp-title:hover, .cmp-title:focus { background: rgba(255, 255, 255, 0.7); outline: none; }
.cmp-bar .btn { border-color: transparent; }
.cmp-bar .btn:not(.primary) { background: rgba(255, 255, 255, 0.6); }
.cmp-bar .btn.dirty::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-600); margin-left: 2px; }
.cmp-status { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--radius-pill); padding: 5px 12px 5px 9px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  background: var(--success-100); color: var(--success-600); }
.cmp-status svg { width: 15px; height: 15px; flex: none; }
.cmp-status.warn { background: var(--warning-100); color: var(--warning-600); }
.cmp-status.bad { background: var(--danger-100); color: var(--danger-600); }
/* What the plan is for, declared (D124): three segments in the bar. */
.cmp-kind { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--radius-pill); background: rgba(60, 50, 30, 0.07); }
.cmp-kind-seg { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: var(--radius-pill); padding: 4px 10px 4px 8px; background: transparent; color: var(--ink-600); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.cmp-kind-seg svg { width: 15px; height: 15px; flex: none; }
.cmp-kind-seg:hover:not(:disabled) { background: rgba(255, 255, 255, 0.7); }
.cmp-kind-seg.on { background: var(--white); color: var(--accent-700); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.cmp-kind-seg:disabled { cursor: default; }
@media (max-width: 1100px) { .cmp-kind-seg:not(.on) { font-size: 0; gap: 0; padding: 4px 7px; } }
/* The Decisions switch (D146): a pill on its own, off by default. */
.cmp-kind-seg.decisions { background: rgba(60, 50, 30, 0.07); padding: 6px 12px 6px 10px; }
.cmp-kind-seg.decisions.on { background: var(--accent-50); color: var(--accent-700); box-shadow: inset 0 0 0 1px var(--accent-600); }
/* The test sandbox: attached, with a ring that empties over the idle limit; busy; detached. */
.cmp-status.sandbox { background: rgba(255, 255, 255, 0.6); color: var(--ink-700); padding-left: 5px; }
.cmp-status.sandbox .ring { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--accent-700);
  background: conic-gradient(var(--accent-500) calc(var(--frac, 0) * 360deg), var(--cream-border-input) 0); }
.cmp-status.sandbox .ring::before { content: ""; grid-area: 1 / 1; width: 17px; height: 17px; border-radius: 50%; background: var(--white); }
.cmp-status.sandbox .ring > * { grid-area: 1 / 1; }
.cmp-status.sandbox .ring svg { width: 12px; height: 12px; }
.cmp-status.sandbox .ring .spinner { width: 11px; height: 11px; border: 2px solid var(--cream-border-input); border-top-color: var(--accent-700); border-radius: 50%; animation: spin 0.9s linear infinite; }
.cmp-status.sandbox .left { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 400; }
.cmp-status.sandbox.busy { color: var(--accent-700); }
.cmp-status.sandbox.off { color: var(--text-subtle); cursor: default; }
@media (max-width: 1100px) { .cmp-status.sandbox { font-size: 0; gap: 0; padding: 5px 7px; } .cmp-status.sandbox .left { display: none; } }
/* An operation step: CancerOS code, not an agent (D124). A grey strip on
   top and a line at the foot; its palette tile is outlined, not filled. */
.cmp-box.op { box-shadow: var(--shadow-md), 0 0 0 1px var(--border-default); }
.cmp-op-strip { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-md) var(--radius-md) 0 0; background: rgba(60, 50, 30, 0.06); color: var(--ink-700); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.cmp-op-strip svg { width: 13px; height: 13px; }
.cmp-op-line { padding: 6px 12px 10px; font-size: 12px; color: var(--text-muted); }
.cmp-op-banner { display: flex; gap: 10px; align-items: flex-start; margin: 4px 4px 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(60, 50, 30, 0.06); }
.cmp-op-banner svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ink-700); }
.cmp-pal.op .cmp-pal-ic { background: var(--white); border: 1px solid var(--border-default); color: var(--ink-700); }
.cmp-param { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.cmp-param select, .cmp-param input { min-width: 140px; }
.cmp-ro { padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px var(--cream-border); font-size: 13.5px; color: var(--text-strong); }
/* A built-in plan: read, test and run; Save a copy to change it. */
.cmp-ro-note { position: absolute; z-index: 6; top: 72px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); font-size: 13px; color: var(--ink-700); pointer-events: none; }
.cmp-ro-note svg { width: 15px; height: 15px; }
.plan-composer.read-only .cmp-box { cursor: pointer; }

.cmp-panel { position: absolute; z-index: 5; top: 72px; bottom: 76px; display: flex; flex-direction: column; min-height: 0; border-radius: var(--radius-lg);
  background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.cmp-palette { left: 12px; width: 240px; }
.cmp-editor { right: 12px; width: 384px; background: var(--acrylic-light-strong); }
.plan-composer.no-palette .cmp-palette { opacity: 0; transform: translateX(-24px) scale(0.98); pointer-events: none; }
.plan-composer.no-editor .cmp-editor { opacity: 0; transform: translateX(24px) scale(0.98); pointer-events: none; }
.cmp-panel-head { display: flex; align-items: center; gap: 6px; padding: 12px 10px 8px 16px; }
.cmp-panel-head .overline { flex: 1; }
.cmp-panel-head .iconbtn.xs { width: 26px; height: 26px; }
.cmp-panel-head .iconbtn.xs svg { width: 14px; height: 14px; }
.cmp-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 16px; scrollbar-width: thin; scrollbar-color: var(--cream-border-input) transparent; }
.cmp-reopen { position: absolute; z-index: 5; top: 72px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge);
  font-size: 13px; font-weight: 500; color: var(--accent-700); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.cmp-reopen svg { width: 16px; height: 16px; }
.cmp-reopen.left { left: 12px; }
.cmp-reopen.right { right: 12px; }
.plan-composer.no-palette .cmp-reopen.left, .plan-composer.no-editor .cmp-reopen.right { opacity: 1; pointer-events: auto; }

.cmp-pal { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); cursor: move; }
.cmp-pal:hover { background: rgba(255, 255, 255, 0.75); }
.cmp-pal-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--brand-gradient-soft); color: var(--accent-700); font-size: 11.5px; font-weight: 600; }
.cmp-pal.blank .cmp-pal-ic { background: var(--white); border: 1px dashed var(--border-default); color: var(--ink-600); }
.cmp-pal-ic svg { width: 16px; height: 16px; }
.cmp-head-ic { display: inline-flex; color: var(--accent-700); }
.cmp-head-ic svg { width: 16px; height: 16px; }
/* The right pane's switch: Plan or Edit step, one pane. */
.cmp-segs { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: rgba(60, 50, 30, 0.06); }
.cmp-seg { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--radius-pill); padding: 5px 12px; background: transparent; color: var(--ink-600); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.cmp-seg svg { width: 15px; height: 15px; }
.cmp-seg:hover:not(:disabled) { color: var(--text-strong); }
.cmp-seg.on { background: var(--white); color: var(--accent-700); box-shadow: var(--shadow-xs); }
.cmp-seg:disabled { color: var(--ink-300); cursor: default; }
.cmp-step-n { font-size: 12px; color: var(--text-subtle); margin: 0 4px 10px; }
/* What the plan keeps in Artifacts. */
.cmp-saved { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cmp-saved li { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--cream-border); font-size: 13px; }
.cmp-saved li.click { cursor: pointer; }
.cmp-saved li.click:hover { background: var(--white); }
.cmp-saved-type { grid-row: 1 / 3; align-self: center; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--brand-gradient-soft); color: var(--accent-700); }
.cmp-type-ic { width: 14px; height: 14px; flex: none; }
.cmp-saved-type .cmp-type-ic { width: 16px; height: 16px; }
.cmp-chip.out { display: inline-flex; align-items: center; gap: 4px; }
.cmp-chip.out .cmp-type-ic { color: var(--accent-700); }
.cmp-saved-name b { font-weight: 600; font-family: var(--font-mono); font-size: 12.5px; }
.cmp-saved-note { font-size: 12px; color: var(--text-subtle); }
.cmp-pal-name { font-size: 13.5px; font-weight: 500; color: var(--text-strong); }
.cmp-pal-hint { font-size: 12px; color: var(--text-subtle); }
.overline.cmp-sub { display: block; margin: 16px 8px 6px; }
.cmp-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin: 6px 4px; }
/* Draft from a prompt: the Prompt button in the title bar opens one box in
   the middle of the composer, over a blurred canvas, like the search box. */
.cmp-bar .cmp-prompt-toggle { flex: none; color: var(--accent-700); }
.cmp-bar .cmp-prompt-toggle.on { background: var(--accent-50); }
/* The name takes whatever room is left, so the buttons sit at the right edge. */
.cmp-bar .cmp-title { flex: 1 1 22ch; width: auto; min-width: 80px; }
.cmp-bar .crumbs { flex-shrink: 1; overflow: hidden; }
.cmp-ask { position: absolute; inset: 0; z-index: 20; display: none; justify-content: center; align-items: flex-start; padding: 16vh 24px 24px;
  background: rgba(40, 34, 22, .14); backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); }
.plan-composer.prompt-open .cmp-ask { display: flex; animation: scrim-in var(--dur-base) var(--ease-out) both; }
.cmp-ask-box { width: min(680px, 100%); border-radius: 18px; background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur);
  box-shadow: 0 30px 80px rgba(40, 30, 10, .28), var(--acrylic-shadow), var(--acrylic-edge); animation: sheet-in var(--dur-slow) var(--ease-out) both; }
.cmp-ask-line { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--cream-border); }
.cmp-ask-line > svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--accent-600); }
/* One line to start, up to five as it wraps, then it scrolls. */
.cmp-ask textarea.cmp-prompt-line { flex: 1; min-width: 0; min-height: 0; max-height: calc(5 * 1.45em); resize: none; overflow-y: auto; border: 0; padding: 0; background: transparent; box-shadow: none;
  font: 17px/1.45 var(--font-display); color: var(--ink-900); }
.cmp-ask textarea.cmp-prompt-line:hover, .cmp-ask textarea.cmp-prompt-line:focus-visible { background: transparent; box-shadow: none; outline: none; }
.cmp-ask textarea.cmp-prompt-line::placeholder { color: var(--text-subtle); }
.cmp-ask textarea.cmp-prompt-line[readonly] { color: var(--text-muted); }
.cmp-ask-foot { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; }
.cmp-ask .cmp-prompt-mode { flex: none; max-width: 260px; height: 28px; border: 0; background: rgba(60, 50, 30, 0.06); border-radius: var(--radius-pill); padding: 0 10px; font-size: 12.5px; color: var(--ink-700); text-overflow: ellipsis; }
.cmp-ask-note { flex: 1; min-width: 0; font-size: 12px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-ask-note .err { color: var(--danger-600); white-space: normal; }
.cmp-ask .cmp-prompt-go { flex: none; }
.cmp-ask .cmp-prompt-go .spinner { width: 11px; height: 11px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: var(--white); border-radius: 50%; animation: spin 0.9s linear infinite; display: inline-block; }
.plan-composer.prompt-busy .cmp-ask { cursor: progress; }
/* The screen said no (D119). */
.modal.cmp-refused { width: min(520px, 92vw); }
.modal.cmp-refused .modal-text p.small { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); margin: 6px 0 0; }
.modal.cmp-refused .modal-text svg { width: 18px; height: 18px; color: var(--danger-600); }
.warn-note { padding: 8px 10px; border-radius: var(--radius-md); background: var(--warning-50, rgba(240, 180, 60, 0.12)); }
/* The step test modal: the result scrolls; the heading and buttons stay. */
.modal.cmp-test { width: min(760px, 92vw); }
.cmp-test-body { max-height: 60vh; overflow: auto; padding: 4px 2px; }
.cmp-test-body pre { white-space: pre-wrap; max-height: 320px; overflow: auto; }
.cmp-test-body .fold { margin: 8px 0; }
.cmp-test-body .spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent-700); border-radius: 50%; animation: spin 0.9s linear infinite; display: inline-block; }
/* The step test while it runs: a cube on the greeting orb's moving mesh
   (the same background and orbmesh animation as .greet .orb), fading
   between its outline and filled shapes; the stages the sandbox has
   reached as pills; a bar; the clock. */
.cmp-run { display: flex; align-items: center; gap: 16px; padding: 6px 0 4px; }
.cmp-run .cmp-run-cube { position: relative; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; color: var(--white); flex: none; overflow: hidden; filter: saturate(1.6);
  background-color: #6BB4F7;
  background-image:
    radial-gradient(60% 60% at 50% 50%, #758DFA 0%, rgba(117, 141, 250, 0) 100%),
    radial-gradient(70% 70% at 50% 50%, #75E7EF 0%, rgba(117, 231, 239, 0) 100%),
    radial-gradient(55% 55% at 50% 50%, #A879FA 0%, rgba(168, 121, 250, 0) 100%),
    radial-gradient(65% 65% at 50% 50%, #6BB4F7 0%, rgba(107, 180, 247, 0) 100%),
    linear-gradient(160deg, #758DFA 0%, #6BB4F7 50%, #75E7EF 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-repeat: no-repeat;
  animation: orbmesh 11s ease-in-out infinite; }
.cmp-run .cmp-run-cube::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: soft-light; }
.cmp-run .cmp-run-cube .fp { position: relative; z-index: 1; width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(40, 50, 120, .25)); }
.cmp-run .cmp-run-cube .fp .fp-off { display: inline; animation: cubeoff 2.4s ease-in-out infinite; }
.cmp-run .cmp-run-cube .fp .fp-on { display: inline; animation: cubeon 2.4s ease-in-out infinite; }
@keyframes cubeon { 0%, 15% { opacity: 0; } 45%, 65% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes cubeoff { 0%, 15% { opacity: 1; } 45%, 65% { opacity: 0; } 95%, 100% { opacity: 1; } }
.cmp-run .cmp-run-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.cmp-run .cmp-stages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmp-run .cmp-stage { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(60, 50, 30, .06); color: var(--text-subtle); font-size: 12.5px; font-weight: 500; }
.cmp-run .cmp-stage.done { color: var(--success-600); background: var(--success-100); }
.cmp-run .cmp-stage.on { color: var(--accent-700); background: var(--accent-50); box-shadow: inset 0 0 0 1px var(--accent-300); }
.cmp-run .cmp-stage .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-500); animation: stagedot 1.2s ease-in-out infinite; }
@keyframes stagedot { 0%, 100% { transform: scale(.8); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }
.cmp-run .cmp-stage svg { width: 13px; height: 13px; }
.cmp-run .cmp-run-bar { height: 4px; border-radius: 2px; background: var(--accent-100); overflow: hidden; margin-top: 12px; }
.cmp-run .cmp-run-bar::after { content: ""; display: block; height: 100%; width: 30%; border-radius: 2px; background: var(--brand-gradient); animation: runbar 1.4s ease-in-out infinite; }
@keyframes runbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
.cmp-run .cmp-run-sub { font-size: 12px; color: var(--text-subtle); margin-top: 8px; }
.cmp-run .cmp-run-clock { font: 500 14px var(--font-mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
/* System (code) versus Composer (editable steps), on a library card. */
.kind-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.kind-badge svg { width: 12px; height: 12px; }
.kind-badge.workflow { color: var(--text-subtle); background: rgba(60, 50, 30, .07); }
.kind-badge.plan { color: var(--accent-700); background: var(--accent-50); }
/* The library card (workflows.libraryCard): kind under the title, the
   full description, facts on one line, tags as soft pills, round icon
   buttons with Run in the outline blue. */
.lcard .lib-head { align-items: flex-start; }
.lcard .lib-ic { position: relative; }
.lcard .lib-tt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lcard .lib-tt h3 { flex: 1 0 100%; font-size: 16.5px; line-height: 1.25; margin: 0; }
.lcard .lib-steps { font-size: 12px; font-weight: 500; color: var(--text-subtle); }
.lcard .lib-desc { flex: 1; font-size: 13.5px; line-height: 1.5; }
.lcard .lib-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.lcard .lib-facts .grades { gap: 6px; }
.lcard .lib-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.lcard .lib-tags .tone { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: rgba(60, 50, 30, .05); }
.lcard .lib-tags .tone.accent { background: var(--accent-50); color: var(--accent-700); }
.lcard .lib-tags .tone.warning { background: var(--warning-100); }
.lcard .lib-tags .tone.success { background: var(--success-100); }
.lib-act { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--border-input); background: var(--white); color: var(--ink-700);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.lib-act svg { width: 17px; height: 17px; }
.lib-act:hover { background: var(--accent-50); border-color: var(--accent-300); color: var(--accent-700); }
.lib-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.lib-act.run { border-color: var(--accent-600); color: var(--accent-700); }
.lib-act.run:hover { background: var(--accent-50); border-color: var(--accent-700); }
.lib-act.run:active { background: var(--accent-100); }
.lcard.wf-mini .lib-tt h3 { font-size: 15px; }
.lcard.wf-mini .lib-act { width: 30px; height: 30px; }
.lcard.wf-mini .lib-act svg { width: 15px; height: 15px; }
/* The Workflows landing: a bento grid of numbers, tiles and run cards. */
.grid.c4.wf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wf-stats .stat { padding: 14px 18px; }
.wf-stats .stat .num { font-size: 30px; }
.wf-stats .stat .overline { margin-bottom: 6px; }
@media (max-width: 900px) { .grid.c4.wf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.modal.cmp-test .modal-text p.small, .modal.cmp-test .cmp-test-body .small { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); margin: 6px 0 0; }
/* A landing's two kinds of card. Stats and blocks are flat: acrylic or a
   plain card, no lift, nothing happens on hover. A tile is a button: solid
   white, a shadow, an accent edge, an arrow that slides in on hover. */
.wf-tile { position: relative; display: flex; align-items: center; gap: 14px; padding: var(--space-5) 44px var(--space-5) var(--space-6); text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--white); border: 1px solid var(--cream-border-input); box-shadow: var(--shadow-md); transition: box-shadow var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.wf-tile:hover, .wf-tile:focus-visible { border-color: var(--accent-500); box-shadow: var(--shadow-lg); transform: translateY(-2px); outline: none; }
.wf-tile:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.wf-tile.primary { background: linear-gradient(135deg, rgba(117, 141, 250, 0.14), rgba(117, 231, 239, 0.14)), var(--white); border-color: var(--accent-300); }
.wf-tile-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-gradient-soft); color: var(--accent-700); }
.wf-tile-ic svg { width: 22px; height: 22px; }
.wf-tile-title { font-weight: 600; color: var(--text-strong); margin-bottom: 2px; }
.wf-tile-go { position: absolute; right: 14px; top: 50%; translate: -6px -50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-100, rgba(117, 141, 250, 0.18)); color: var(--accent-700); opacity: 0; transition: opacity var(--dur-fast), translate var(--dur-fast); }
.wf-tile-go svg { width: 14px; height: 14px; }
.wf-tile:hover .wf-tile-go, .wf-tile:focus-visible .wf-tile-go { opacity: 1; translate: 0 -50%; }
.wf-stats .card.stat { box-shadow: none; border: 1px solid var(--cream-border); }
/* Folders in Browse (D120): a run or the chat notes, opened like a directory. */
tr.doc-folder { cursor: pointer; }
tr.doc-folder:hover td { background: rgba(60, 50, 30, 0.04); }
tr.doc-folder .fileicon.folder { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; vertical-align: middle; color: var(--accent-700); }
tr.doc-folder .fileicon.folder svg { width: 18px; height: 18px; }
tr.doc-folder .row-actions svg { width: 14px; height: 14px; color: var(--text-subtle); }
.ftile.folder .ftile-pic { background: linear-gradient(135deg, rgba(117, 141, 250, 0.10), rgba(117, 231, 239, 0.10)); }
.ftile.folder .ftile-ic { color: var(--accent-700); }
/* Breadcrumbs: where you are, each step a link back, every step with its
   icon. Ancestors are muted; the last crumb is the page, dark and not a
   link. Sits above the page head, or inside a workspace's window bar. */
.crumbs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14px; color: var(--text-muted); min-height: 28px; }
.crumbs .crumb { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; font: inherit; font-weight: 500; color: var(--ink-600, var(--text-muted)); cursor: pointer; padding: 3px 8px; border-radius: var(--radius-pill); max-width: 34ch; }
.crumbs .crumb > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs .crumb svg { width: 16px; height: 16px; flex: none; }
.crumbs .crumb:hover { background: rgba(60, 50, 30, 0.06); color: var(--text-strong); }
.crumbs .crumb.here { color: var(--text-strong); font-weight: 600; cursor: default; }
.crumbs .crumb.here:hover { background: transparent; }
.crumbs .sep { display: grid; place-items: center; width: 18px; }
.crumbs .sep svg { width: 13px; height: 13px; color: var(--text-subtle); }
/* What the page is about, after the trail: a patient, a source. */
.crumbs .crumb-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 10px; border: 0; border-radius: var(--radius-pill); background: var(--accent-100, rgba(117, 141, 250, 0.16)); color: var(--accent-700); font: inherit; font-size: 12.5px; font-weight: 500; max-width: 30ch; }
.crumbs .crumb-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs .crumb-chip svg { width: 14px; height: 14px; flex: none; }
.crumbs button.crumb-chip { cursor: pointer; }
.crumbs button.crumb-chip:hover { background: var(--accent-200, rgba(117, 141, 250, 0.26)); }
/* In a workspace's window bar, the trail is the bar's left part. */
.cmp-bar .crumbs, .ann-head .crumbs { margin: 0; min-height: 0; flex: none; min-width: 0; flex-wrap: nowrap; }
.ann-head .crumbs { flex: 1; }
.cmp-bar .crumbs .crumb, .ann-head .crumbs .crumb { font-size: 13.5px; }
.ws-landing-controls .crumbs { margin: 0; min-height: 0; }
/* The casebook hero: the trail sits where the back arrow was. */
.hero-top .crumbs { margin: 0; flex-basis: 100%; }
.frow.wf-row { cursor: pointer; text-align: left; font: inherit; color: inherit; background: transparent; }
.frow.wf-row:hover { background: rgba(60, 50, 30, 0.04); }
.frow.wf-row .badge { flex: none; }
@media (max-width: 1100px) { .wf-tiles { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

/* One island along the bottom: zoom controls, then the estimate. It
   wraps onto two lines before anything overlaps on a narrow window. */
.cmp-island { position: absolute; z-index: 5; left: 264px; right: 16px; bottom: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 4px 16px 4px 4px; border-radius: 22px;
  background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge); width: fit-content; max-width: calc(100% - 280px); }
.plan-composer .cmp-palette[hidden] ~ .cmp-island, .plan-composer.no-palette .cmp-island { left: 16px; max-width: calc(100% - 32px); }
.cmp-estimate { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.cmp-estimate b { color: var(--text-strong); font-weight: 600; }
.cmp-estimate .sep { width: 1px; height: 14px; background: var(--cream-border-input); }
.cmp-zoom { display: flex; align-items: center; gap: 2px; }
.cmp-zoom button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-700); cursor: pointer; }
.cmp-zoom button:hover { background: rgba(60, 50, 30, 0.08); }
.cmp-zoom svg { width: 15px; height: 15px; }
.cmp-zoom .pct { min-width: 42px; text-align: center; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cmp-hint { position: absolute; z-index: 4; top: 72px; left: 50%; translate: -50% 0; font-size: 12px; color: var(--text-subtle); padding: 4px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.6); pointer-events: none; white-space: nowrap; }

/* Boxes: white cards; the selected one has the accent ring. */
.cmp-box { position: absolute; width: 300px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-md), 0 0 0 1px var(--cream-border); cursor: move; user-select: none;
  transition: box-shadow var(--dur-base) var(--ease-out); }
.cmp-box:hover { box-shadow: var(--shadow-lg), 0 0 0 1px var(--cream-border-input); }
.cmp-box.sel { box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent-600); }
.cmp-box.bad { box-shadow: var(--shadow-md), 0 0 0 2px var(--danger-500); }
.cmp-box.dragging { box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent-400); transition: none; }
.cmp-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px 7px 14px; }
.cmp-n { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--cream-200); color: var(--ink-600); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.cmp-name { flex: 1; min-width: 0; font: 600 14.5px var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-sect { padding: 6px 14px; border-top: 1px solid var(--cream-border-soft); }
.cmp-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 3px; }
.cmp-task { font-size: 13px; color: var(--text-body); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cmp-chip { font-size: 11.5px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--cream-200); color: var(--ink-700); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cmp-chip.in { background: var(--accent-50); color: var(--accent-700); }
.cmp-chip.src { background: var(--cyan-100); color: var(--cyan-600); }
.cmp-chip.out { background: var(--white); box-shadow: inset 0 0 0 1px var(--cream-border-input); }
.cmp-chip.tool { background: var(--cream-100); color: var(--ink-600); box-shadow: inset 0 0 0 1px var(--cream-border); }
.cmp-foot { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 14px 11px; border-top: 1px solid var(--cream-border-soft); }
.cmp-why { margin: 0 12px 11px; padding: 6px 10px; border-radius: 8px; background: var(--danger-100); color: var(--danger-600); font-size: 12px; line-height: 1.4; }
.cmp-frame { position: absolute; border: 1.5px dashed var(--cyan-500); border-radius: var(--radius-lg); background: rgba(230, 252, 255, 0.4); pointer-events: none; }
.cmp-frame-tag { position: absolute; top: -12px; left: 14px; background: var(--white); color: var(--cyan-600); box-shadow: inset 0 0 0 1px var(--cyan-500); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px; white-space: nowrap; }
.cmp-frame-tag b { color: var(--text-strong); font-weight: 600; }

/* The hover card on a line. */
.cmp-tip { position: absolute; z-index: 8; width: 320px; padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; pointer-events: none;
  background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-shadow: var(--acrylic-shadow), var(--acrylic-edge);
  animation: rise var(--dur-fast) var(--ease-out) both; }
.cmp-tip-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cmp-tip-line .arrow { color: var(--accent-600); }
.cmp-tip p { margin: 6px 0 0; color: var(--text-body); line-height: 1.45; }
.cmp-tip-path { margin-top: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-600); }

/* The editor's fields. */
.cmp-field { margin: 4px 4px 16px; }
.cmp-field > label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 6px; }
.cmp-field input:not([type]), .cmp-field textarea, .cmp-field select { width: 100%; border: 1px solid var(--border-input); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--white); color: var(--text-strong); }
.cmp-field textarea { resize: vertical; min-height: 110px; line-height: 1.45; }
.cmp-count { text-align: right; font-size: 11.5px; color: var(--text-subtle); margin-top: 3px; }
.cmp-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-pick { font: inherit; font-size: 12.5px; padding: 4px 10px; border: 0; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.8); color: var(--ink-700); box-shadow: inset 0 0 0 1px var(--cream-border-input); cursor: pointer; }
.cmp-pick:hover { background: var(--white); }
.cmp-pick.on { background: var(--accent-50); color: var(--accent-700); box-shadow: inset 0 0 0 1px var(--accent-300); }
.cmp-pick.src.on { background: var(--cyan-100); color: var(--cyan-600); box-shadow: inset 0 0 0 1px var(--cyan-500); }
.plan-composer.no-palette .cmp-zoom { left: 12px; }
.cmp-picks-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.cmp-picks-lbl { width: 100%; font-size: 11.5px; color: var(--text-subtle); }
.cmp-pick.add { box-shadow: inset 0 0 0 1px var(--border-default); background: transparent; color: var(--text-muted); margin-top: 2px; }
.cmp-out { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.cmp-out input { flex: 1; }
.cmp-out select { width: 110px; flex: none; }
.cmp-type-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 8px 0 10px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--white); color: var(--text-strong); font: inherit; font-size: 13px; cursor: pointer; }
.cmp-type-btn .cmp-type-ic { width: 16px; height: 16px; color: var(--text-muted); }
.cmp-type-btn > svg:last-child { width: 12px; height: 12px; color: var(--text-subtle); }
.cmp-type-menu { position: fixed; z-index: 1200; width: 300px; padding: 6px; border-radius: var(--radius-md); background: var(--white); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16), inset 0 0 0 1px var(--border-default); }
.cmp-type-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-strong); font: inherit; text-align: left; cursor: pointer; }
.cmp-type-item:hover, .cmp-type-item:focus-visible { background: var(--accent-50); outline: none; }
.cmp-type-item.on { box-shadow: inset 0 0 0 1px var(--accent-600); }
.cmp-type-item .cmp-type-ic { width: 18px; height: 18px; margin-top: 1px; color: var(--text-muted); flex: none; }
.cmp-type-item .name { font-size: 13.5px; font-weight: 600; }
.cmp-type-item .small { color: var(--text-muted); font-size: 12px; line-height: 1.35; }

/* Import a record: one large outlined button per format (D125). */
.modal.record-import { width: min(820px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.modal.record-import .modal-text p.small { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; color: var(--text); margin: 8px 0 0; }
.fmt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; margin: 14px 0 10px; }
.fmt-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--white); color: var(--text-strong); font: inherit; text-align: left; cursor: pointer; }
.fmt-btn:hover, .fmt-btn:focus-visible { border-color: var(--accent-600); background: var(--accent-50); outline: none; }
.fmt-btn[disabled] { opacity: 0.55; cursor: default; }
.fmt-btn > .fluent { width: 26px; height: 26px; flex: none; color: var(--accent-700); }
.fmt-btn > div { flex: 1; min-width: 0; }
.fmt-btn .name { font-size: 14px; font-weight: 600; }
.fmt-btn .small { color: var(--text-muted); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.fmt-btn .ext { flex: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-subtle); }
.tbtn-caret { width: 14px; height: 14px; vertical-align: -2px; margin-left: 2px; }
.cmp-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--cream-border); font-size: 13.5px; cursor: pointer; }
.cmp-toggle small { display: block; color: var(--text-muted); font-size: 12px; }
/* The question a step asks first: under its toggle, indented like a field. */
.cmp-ask-edit { display: flex; flex-direction: column; gap: 8px; margin: 0 4px 10px 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px var(--cream-border); }
.cmp-ask-edit textarea, .cmp-ask-edit input[type="text"] { width: 100%; border: 1px solid var(--border-input); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--white); color: var(--text-strong); resize: vertical; line-height: 1.45; }
.cmp-ask-edit .cmp-ask-opts { margin-bottom: 6px; font-family: var(--font-mono); font-size: 12.5px; }
.cmp-ask-flag { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; cursor: pointer; }
.cmp-ask-flag small { font-size: 12px; }
.cmp-test-ask p.small { margin: 4px 0 8px; color: var(--text-strong); }
.cmp-test-ask input[type="text"] { width: 100%; border: 1px solid var(--border-input); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; font-size: 13.5px; }
.cmp-checks { display: flex; flex-direction: column; gap: 4px; margin: 0 4px 14px; }
.cmp-check { font-size: 12.5px; padding: 7px 10px; border-radius: 8px; line-height: 1.4; }
.cmp-check.error { background: var(--danger-100); color: var(--danger-600); }
.cmp-check.warning { background: var(--warning-100); color: var(--warning-600); }
.cmp-check.ok { background: var(--success-100); color: var(--success-600); }
.cmp-check.click { cursor: pointer; }
.cmp-order { margin: 0; padding-left: 20px; font-size: 13px; color: var(--text-body); line-height: 1.6; }

/* As a modal: the composer fills the viewer frame. */
.composer-overlay { padding: max(16px, 2.5vh) max(16px, 2.5vw); }
.composer-overlay .annotate-frame { width: 100%; height: 100%; display: flex; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--acrylic-shadow); background: var(--white); animation: sheet-in var(--dur-slow) var(--ease-out) both; }
/* Annotate opened from Files is already a sheet over the page. Its Full
   screen button fills the window edge to edge instead; Dock brings the
   sheet back. Same two states as the in-page workspace, same button. */
body.focus-mode .composer-overlay:has(.annotate) { padding: 0; }
body.focus-mode .composer-overlay .annotate-frame { border-radius: 0; box-shadow: none; animation: none; }
.composer-overlay.leaving .annotate-frame { animation: sheet-out var(--dur-base) ease-in both; }
.main > .plan-composer { margin: 0; }
@media (max-width: 1100px) { .cmp-editor { width: 320px; } .cmp-palette { width: 210px; } .cmp-hint { display: none; } .cmp-zoom { left: 12px; bottom: 64px; } }
/* The plan drawn small on a research task's property page: titles only,
   run order left to right. Click to open the composer. */
.cmp-preview { overflow-x: auto; padding: 4px 2px 6px; border-radius: var(--radius-sm); scrollbar-width: thin; scrollbar-color: var(--cream-border-input) transparent; }
.cmp-preview.click { cursor: pointer; }
.cmp-pv-node rect { fill: var(--white); stroke: var(--cream-border-input); stroke-width: 1; }
.cmp-preview.click:hover .cmp-pv-node rect { stroke: var(--accent-300); }
.cmp-pv-node.rep rect { stroke: var(--cyan-500); stroke-dasharray: 4 3; }
.cmp-pv-node text { font: 500 12.5px var(--font-sans); fill: var(--text-strong); }
.cmp-pv-node .cmp-pv-rep { font-size: 10px; fill: var(--cyan-600); }
.cmp-pv-wire { fill: none; stroke: var(--brand-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wfd-outs { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wfd-outs li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.wfd-out-ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--brand-gradient-soft); color: var(--accent-700); }
.wfd-out-ic svg { width: 15px; height: 15px; }
.btn.primary:disabled { background: var(--ink-200); border-color: var(--ink-200); color: var(--ink-500); cursor: not-allowed; }
.cmp-preview svg { display: block; }

/* Step flags: a pause (People Edit), pro (Brain Circuit), deep search
   (Search Sparkle). The same three on the card, the preview, the run
   dialog, the runs table and the run page. */
.cmp-flags { display: inline-flex; gap: 4px; flex: none; }
.cmp-flags.inline { margin-left: 6px; vertical-align: middle; }
.cmp-flag { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; }
.cmp-flag svg { width: 14px; height: 14px; }
.cmp-flag.people_edit { background: var(--warning-100); color: var(--warning-600); }
.cmp-flag.chat_help { background: var(--accent-50); color: var(--accent-700); }
.cmp-flag.search_sparkle { background: var(--cyan-100); color: var(--cyan-600); }
/* The effort stop, when not Standard: quick cyan, light green, deep
   blue, max the brand gradient. */
.cmp-flag.tier { background: var(--accent-50); color: var(--accent-700); }
.cmp-flag.tier.quick { background: var(--cyan-100); color: var(--cyan-600); }
.cmp-flag.tier.light { background: var(--success-100); color: var(--success-600); }
.cmp-flag.tier.max { background: var(--brand-gradient); color: var(--white); }
/* The effort slider in the step editor: five stops on a line, the line
   filled to the chosen one, a card saying what the stop suits. */
.cmp-field.eff .eff-track { position: relative; height: 40px; margin: 6px 18px 0; }
.eff-line { position: absolute; left: 0; right: 0; top: 19px; height: 4px; border-radius: 2px; background: var(--cream-border-input); }
.eff-fill { height: 100%; border-radius: 2px; background: var(--brand-gradient); transition: width var(--dur-fast); }
.eff-stop { position: absolute; top: 6px; translate: -50% 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 2px solid var(--cream-border-input); background: var(--white); color: var(--ink-500); transition: all var(--dur-fast); }
.eff-stop svg { width: 14px; height: 14px; }
.eff-stop:hover { border-color: var(--accent-400); color: var(--accent-600); }
.eff-stop.past { border-color: var(--accent-400); color: var(--accent-600); }
.eff-stop.on { width: 34px; height: 34px; top: 3px; border-color: var(--accent-600); background: var(--accent-600); color: var(--white); box-shadow: 0 4px 12px rgba(80, 110, 240, .35); }
.eff-stop.on svg { width: 17px; height: 17px; }
.eff-stop:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.eff-names { position: relative; height: 18px; margin: 0 18px 8px; font-size: 11.5px; color: var(--text-subtle); }
.eff-names span { position: absolute; translate: -50% 0; white-space: nowrap; }
.eff-names span.on { color: var(--accent-700); font-weight: 600; }
.eff-card { border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px solid var(--cream-border); padding: 10px 12px; }
.eff-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.eff-def { font-size: 11px; font-weight: 600; color: var(--text-subtle); background: rgba(60, 50, 30, .07); padding: 1px 7px; border-radius: 999px; }
.eff-cost { font-size: 12px; color: var(--text-muted); }
.eff-card p { margin: 4px 0 0; font-size: 13px; color: var(--ink-700); line-height: 1.4; }
.cmp-flags.inline .cmp-flag { width: 18px; height: 18px; border-radius: 5px; }
.cmp-flags.inline .cmp-flag svg { width: 12px; height: 12px; }
.cmp-toggle-text { display: flex; align-items: flex-start; gap: 10px; }
.cmp-toggle-text > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent-700); }
.cmp-pv-flag.people_edit path { fill: var(--warning-600); }
.cmp-pv-flag.tier_deep path, .cmp-pv-flag.tier_max path { fill: var(--accent-700); }
.cmp-pv-flag.tier_quick path { fill: var(--cyan-600); }
.cmp-pv-flag.tier_light path { fill: var(--success-600); }
.cmp-pv-flag.chat_help path { fill: var(--accent-700); }
.cmp-pv-flag.search_sparkle path { fill: var(--cyan-600); }
/* The plan in the run dialog: the same small graph as the property page. */
.run-plan .cmp-preview { background: var(--cream-board); }
/* The plan on a composed run's page, each step lit by its status. */
.plan-progress .cmp-preview { padding-top: 8px; }
.cmp-pv-node.st-running rect { stroke: var(--accent-600); stroke-width: 1.5; fill: var(--accent-50); }
.cmp-pv-node.st-waiting rect, .cmp-pv-node.st-revising rect { stroke: var(--warning-500); stroke-width: 1.5; fill: var(--warning-100); }
.cmp-pv-node.st-done rect, .cmp-pv-node.st-approved rect { stroke: var(--success-500); fill: var(--success-100); }
.cmp-pv-node.st-failed rect, .cmp-pv-node.st-stopped rect { stroke: var(--danger-500); fill: var(--danger-100); }
.cmp-pv-node.st-skipped rect, .cmp-pv-node.st-empty rect { stroke-dasharray: 3 3; }
.cmp-pv-node.st-skipped text, .cmp-pv-node.st-empty text { fill: var(--text-subtle); }
.pv-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-body); }
.pv-legend .sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--cream-border-input); background: var(--white); }
.pv-legend.st-running .sw { border-color: var(--accent-600); background: var(--accent-50); }
.pv-legend.st-waiting .sw { border-color: var(--warning-500); background: var(--warning-100); }
.pv-legend.st-done .sw, .pv-legend.st-approved .sw { border-color: var(--success-500); background: var(--success-100); }
.pv-legend.st-failed .sw { border-color: var(--danger-500); background: var(--danger-100); }

.wfd-section p.row .inline-ic { flex: none; margin-top: 3px; color: var(--warning-600); }
.wfd-section p.row.muted .inline-ic { color: var(--accent-700); }

/* Annotate as a sheet over the page, the same frame as the composer. */
.annotate-frame .annotate { flex: 1; min-width: 0; height: 100%; }

/* A research card's mark: the step icon, with the count for a plan. */
.plan-mark { position: relative; display: inline-flex; }
.plan-mark-n { position: absolute; right: -7px; bottom: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--accent-600); color: var(--white); font: 600 10px/15px var(--font-sans); text-align: center; box-shadow: 0 0 0 2px var(--white); }

/* ---- healthcare roles ---- */
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.role-chip { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; background: var(--accent-50); color: var(--accent-700); border: 1px solid var(--accent-100); white-space: nowrap; }
.acct-roles { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 2px; }
.acct-roles p { margin: 0; }
.users-table td.users-roles { white-space: normal; max-width: 320px; }
.users-table tr .roles-edit { visibility: hidden; }
.users-table tr:hover .roles-edit, .users-table tr:focus-within .roles-edit { visibility: visible; }
.role-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.role-checks .overline { margin-right: 4px; }
.role-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--text-body); font-weight: 400; cursor: pointer; }
.role-check input { margin: 0; accent-color: var(--accent-600); }

/* ---- board (ClinicalOps, D131) ---- */
.page.board { max-width: none; }
.bd-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.bd-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 13.5px; text-decoration: none; margin-bottom: -1px; }
.bd-tab:hover { color: var(--text-strong); background: var(--surface-hover); border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.bd-tab.on { color: var(--text-strong); border-bottom-color: var(--accent-600); font-weight: 600; }
.bd-tab svg { width: 16px; height: 16px; }
.bd-key { font: 600 10.5px var(--font-mono); padding: 1px 5px; border-radius: var(--radius-xs); background: var(--cream-200); color: var(--ink-700); }
.bd-key.k-team { background: var(--accent-100); color: var(--accent-700); }
.bd-key.k-org { background: var(--success-100); color: var(--success-600); }
.bd-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--cream-200); color: var(--text-muted); font-size: 11.5px; font-weight: 600; text-align: center; }

.bd-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.bd-bar .searchbox { min-width: 220px; }
.bd-bar select { width: auto; max-width: 220px; height: 34px; padding: 0 8px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--white); font: inherit; font-size: 13px; }
.bd-bar .seg button { display: inline-grid; place-items: center; padding: 5px 10px; }
.bd-bar .seg svg { width: 16px; height: 16px; }
.bd-bar .iconbtn svg { width: 16px; height: 16px; }
.bd-trail-bar select { width: auto; }
.bd-filter { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--white); color: var(--text-body); font: inherit; font-size: 12.5px; cursor: pointer; }
.bd-filter:hover { border-color: var(--border-default); }
.bd-filter.on { background: var(--accent-50); border-color: var(--accent-300); color: var(--accent-700); }
.bd-filter svg { width: 12px; height: 12px; }
.bd-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; }
.bd-check input { margin: 0; accent-color: var(--accent-600); }

.bd-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.bd-wrap.with-panel { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); }
/* The board fits the viewport: the header, tabs and bar above (about 190px)
   plus .content's 80px bottom padding. The panel and the lanes share the
   offset so they end on the same line, and the page itself never scrolls. */
.page.board { --bd-above: 290px; }
.bd-panel { position: sticky; top: 0; max-height: calc(100vh - var(--bar) - var(--bd-above)); overflow: auto; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px 20px; }

/* The kanban: lanes fill the height under the bar and scroll on their own;
   the row of lanes scrolls sideways. A folded lane is a narrow strip with
   its name upright, still a drop target. */
.bd-lanes { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: stretch; height: calc(100vh - var(--bar) - var(--bd-above)); min-height: 360px; scroll-snap-type: x proximity; }
/* Each lane carries its group's colour: a strip along the top, clipped to
   the corners, and a wash of the same colour fading down from it. */
.bd-lane { --lane: var(--ink-200); flex: 0 0 290px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: linear-gradient(to bottom, color-mix(in srgb, var(--lane) 14%, var(--cream-50)) 0, var(--cream-50) 120px); border: 1px solid var(--cream-border); border-radius: var(--radius-md); scroll-snap-align: start; transition: border-color var(--dur-fast), opacity var(--dur-fast), flex-basis var(--dur-base); }
.bd-lane::before { content: ""; display: block; flex: none; height: 3px; background: var(--lane); }
.bd-lane.g-todo { --lane: var(--ink-500); }
.bd-lane.g-doing { --lane: var(--accent-500); }
.bd-lane.g-waiting { --lane: var(--warning-500); }
.bd-lane.g-done { --lane: var(--success-500); }
.bd-lane-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 10px; font-size: 13px; }
.bd-lane-head b { font: 600 13px var(--font-display); }
.bd-fold { display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px; border: 0; border-radius: var(--radius-xs); background: transparent; font: inherit; color: var(--text-strong); cursor: pointer; }
.bd-fold:hover { background: var(--surface-hover); }
.bd-cards { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 2px 8px 8px; overflow-y: auto; overflow-x: hidden; min-height: 40px; align-content: start; }
.bd-lane.folded { flex-basis: 44px; }
.bd-lane.folded .bd-lane-head { flex-direction: column; padding: 10px 4px; }
.bd-lane.folded .bd-fold { writing-mode: vertical-rl; padding: 6px 2px; }
.bd-lane.folded .bd-lane-head .grow, .bd-lane.folded .bd-lane-head .iconbtn, .bd-lane.folded .bd-cards, .bd-lane.folded .bd-quick { display: none; }
.bd-quick { padding: 0 8px 8px; }
.bd-quick-open { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 13px; color: var(--text-muted); cursor: pointer; text-align: left; }
.bd-quick-open:hover { background: var(--surface-hover); color: var(--text-strong); }
.bd-quick-open svg { width: 14px; height: 14px; }
.bd-quick textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--accent-300); border-radius: var(--radius-sm); background: var(--white); font: inherit; font-size: 13.5px; resize: none; box-shadow: var(--ring-focus); }
.bd-quick .muted { margin-top: 4px; font-size: 11.5px; }
.bd-assign { padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; line-height: 0; }
.bd-assign:hover .bd-av, .bd-assign:focus-visible .bd-av { box-shadow: 0 0 0 2px var(--accent-300); }
.bd-assign:focus-visible { outline: none; }
.bd-av.unset { background: transparent; border: 1px dashed var(--ink-300); color: var(--text-subtle); box-shadow: none; box-sizing: border-box; }
.bd-av.unset svg { width: 12px; height: 12px; }
.bd-card:not(:hover) .bd-av.unset { opacity: 0.5; }
.bd-lane.open { border-color: var(--accent-200); }
.bd-lane.over { background: linear-gradient(to bottom, color-mix(in srgb, var(--lane) 22%, var(--accent-50)) 0, var(--accent-50) 120px); border-color: var(--accent-400); }
.bd-lane.refused { opacity: 0.45; }
.bd-more { justify-self: center; }

.dot, .bd-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-300); flex: none; }
.g-backlog .dot, .bd-dot.g-backlog { background: var(--ink-300); }
.g-todo .dot, .bd-dot.g-todo { background: var(--ink-500); }
.g-doing .dot, .bd-dot.g-doing { background: var(--accent-500); }
.g-waiting .dot, .bd-dot.g-waiting { background: var(--warning-500); }
.g-done .dot, .bd-dot.g-done { background: var(--success-500); }
.g-dropped .dot, .bd-dot.g-dropped { background: var(--ink-200); }

.bd-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; padding: 10px 12px; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); cursor: pointer; touch-action: none; user-select: none; }
.bd-card > * { min-width: 0; }
.bd-card:hover { border-color: var(--border-default); }
.bd-card:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.bd-card.blocked { border-left: 3px solid var(--warning-500); }
.bd-card.hidden { cursor: default; background: var(--surface-sunken); box-shadow: none; }
.bd-card.lifted { opacity: 0.35; }
.bd-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; box-shadow: var(--shadow-lg); transform-origin: 0 0; rotate: 1.5deg; }
body.dragging, body.dragging * { cursor: grabbing !important; }
.bd-marker { height: 3px; border-radius: 2px; background: var(--accent-500); }
.bd-card-top { display: flex; align-items: center; gap: 6px; }
.bd-card-title { font-size: 13.5px; line-height: 1.35; color: var(--text-strong); overflow-wrap: anywhere; word-break: break-word; }
.bd-card-foot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bd-card-foot .bd-chip { flex: 0 1 auto; }
.bd-card-foot .bd-chip:first-child { flex-shrink: 1; }
.bd-card-foot .bd-chip:not(:first-child), .bd-card-foot .bd-assign, .bd-card-foot .bd-av { flex: none; }
.bd-ref { display: inline-flex; align-items: center; gap: 4px; font: 500 11.5px var(--font-mono); color: var(--text-subtle); white-space: nowrap; }
.bd-ref svg { width: 14px; height: 14px; }
.bd-chip { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-chip svg { width: 13px; height: 13px; flex: none; }
.bd-card-foot .grow { flex: 1 0 8px; }
.bd-chip.danger, .danger { color: var(--danger-600); }
.bd-prio { width: 14px; height: 14px; flex: none; }
.bd-prio.urgent { color: var(--danger-600); }
.bd-prio.high { color: var(--warning-600); }
.bd-prio.medium { color: var(--accent-600); }
.bd-prio.low { color: var(--ink-400); }
.bd-prio.none { display: inline-block; }
.bd-lock { width: 13px; height: 13px; color: var(--warning-600); }
.bd-av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-family: var(--font-display); font-size: 10px; font-weight: 600; color: var(--blue-850); background: var(--avatar-0); box-shadow: inset 0 0 0 1px rgba(47, 86, 230, .08); flex: none; }
.bd-av.t1 { background: var(--avatar-1); } .bd-av.t2 { background: var(--avatar-2); } .bd-av.t3 { background: var(--avatar-3); }
.bd-av.t4 { background: var(--avatar-4); } .bd-av.t5 { background: var(--avatar-5); }
.bd-av.team { background: var(--accent-100); color: var(--accent-700); }
.bd-av.team svg { width: 13px; height: 13px; }
.bd-av.none { background: transparent; }
.bd-labels { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.bd-label { --lc: var(--ink-300); display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: var(--radius-pill); font-size: 11px; line-height: 18px; color: var(--text-body); background: color-mix(in srgb, var(--lc) 22%, white); border: 1px solid color-mix(in srgb, var(--lc) 45%, white); }

.bd-list { display: grid; gap: 2px; }
.bd-group { margin-bottom: var(--space-3); }
.bd-group-head { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; }
.bd-row { display: grid; grid-template-columns: 10px 14px 70px minmax(0, 1fr) auto auto auto 22px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--border-subtle); cursor: pointer; font-size: 13.5px; }
.bd-row:hover { border-color: var(--border-default); }
.bd-row:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.bd-row.hidden { grid-template-columns: 70px minmax(0, 1fr); background: var(--surface-sunken); cursor: default; }
.bd-row.blocked { border-left: 3px solid var(--warning-500); }
.bd-row-title { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); }
.bd-empty-row { padding: 6px 10px; }
.struck { text-decoration: line-through; color: var(--text-subtle); }

.bd-item { display: grid; gap: 14px; }
.bd-item-head { display: flex; align-items: center; gap: 8px; }
.bd-head-acts { gap: 2px; }
.bd-head-acts .bd-patient-btn { margin-right: 8px; }
.bd-head-acts .bd-patient-btn svg { width: 14px; height: 14px; }
.bd-head-acts .iconbtn.on { color: var(--accent-600); }
.bd-blocked { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; color: var(--warning-600); font-family: var(--font-sans); }
.bd-title { margin: 0; font: 600 21px/1.25 var(--font-display); letter-spacing: var(--ls-tight); outline: none; border-radius: var(--radius-xs); padding: 2px 4px; margin-left: -4px; }
.bd-title[contenteditable]:hover { background: var(--surface-hover); }
.bd-title[contenteditable]:focus { background: var(--white); box-shadow: var(--ring-focus); }
.bd-body { font-size: 14px; line-height: 1.55; color: var(--text-body); padding: 6px 8px; margin-left: -8px; border-radius: var(--radius-sm); cursor: text; }
.bd-body:hover { background: var(--surface-hover); }
.bd-body p:first-child { margin-top: 0; }
.bd-body p:last-child { margin-bottom: 0; }
.bd-props { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.bd-prop { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 30px; font-size: 13.5px; }
.bd-prop .k { color: var(--text-muted); font-size: 12.5px; }
.bd-prop .v { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.bd-prop .v.pick { padding: 3px 8px; margin-left: -8px; border: 0; border-radius: var(--radius-xs); background: transparent; font: inherit; color: var(--text-strong); cursor: pointer; text-align: left; }
.bd-prop .v.pick:hover { background: var(--surface-hover); }
.bd-state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--white); font: inherit; font-size: 12.5px; cursor: pointer; }
.bd-state:disabled { cursor: default; }
.bd-sec { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.bd-sec .overline { gap: 6px; }
.bd-rels, .bd-links, .bd-subs, .bd-warn, .bd-diffs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.bd-rels li, .bd-links li, .bd-subs li { display: flex; align-items: center; gap: 8px; }
.bd-rels a, .bd-links a, .bd-subs a { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-links svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.bd-comment { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--cream-50); border: 1px solid var(--cream-border); font-size: 13.5px; }
.bd-comment .head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.bd-comment .t, .bd-trail .t, .bd-run .t { font: 11px var(--font-mono); color: var(--text-subtle); white-space: nowrap; }
.bd-comment p { margin: 0; }
.bd-compose { display: grid; gap: 6px; justify-items: end; }
.bd-compose textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; resize: vertical; }
.bd-trail { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--text-body); }
.bd-trail li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.bd-trail.wide li { grid-template-columns: 80px minmax(0, 1fr) auto; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 14px; }

/* Layout switch: icon and word. */
.bd-bar .bd-layouts button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 13px; }
.bd-bar .bd-layouts svg { width: 15px; height: 15px; }

/* Timeline: titles on the left, the scale and bars on the right; the two
   scroll together. Rows are 36px; a bar is 24px tall inside one. */
.bd-tl { display: grid; gap: 10px; }
.bd-tl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bd-tl-tools .seg button { padding: 4px 12px; font-size: 12.5px; }
.bd-tl-frame { --tl-h: calc(100vh - var(--bar) - 270px); display: grid; grid-template-columns: 300px minmax(0, 1fr); height: var(--tl-h); min-height: 360px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.bd-tl-side { overflow: hidden; border-right: 1px solid var(--border-subtle); background: var(--surface-card); }
.bd-tl-corner { position: sticky; top: 0; z-index: 2; height: 48px; border-bottom: 1px solid var(--border-subtle); background: var(--cream-50); }
.bd-tl-group { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--cream-50); border-bottom: 1px solid var(--border-subtle); font-size: 13px; white-space: nowrap; overflow: hidden; }
.bd-tl-group b { font: 600 13px var(--font-display); overflow: hidden; text-overflow: ellipsis; }
.bd-tl-row { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; font: inherit; font-size: 13px; text-align: left; color: var(--text-strong); cursor: pointer; }
.bd-tl-row:hover { background: var(--surface-hover); }
.bd-tl-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-tl-row .bd-ref { flex: none; }
.bd-tl-row.hidden { cursor: default; background: var(--surface-sunken); }
.bd-tl-grid { position: relative; overflow: auto; }
.bd-tl-scale { position: sticky; top: 0; z-index: 2; height: 48px; background: var(--cream-50); border-bottom: 1px solid var(--border-subtle); }
.bd-tl-months, .bd-tl-ticks { position: relative; height: 24px; }
.bd-tl-months span { position: absolute; top: 0; height: 24px; padding: 5px 8px 0; box-sizing: border-box; border-left: 1px solid var(--border-subtle); font: 600 11.5px var(--font-display); color: var(--text-strong); white-space: nowrap; overflow: hidden; }
.bd-tl-ticks span { position: absolute; top: 0; height: 24px; padding-top: 4px; box-sizing: border-box; border-left: 1px solid var(--border-subtle); font: 11px var(--font-mono); color: var(--text-subtle); text-align: center; }
.bd-tl-ticks span.wk { color: var(--ink-300); }
.bd-tl-body { position: relative; }
.bd-tl-grow { position: absolute; left: 0; right: 0; height: 36px; border-bottom: 1px solid var(--border-subtle); }
.bd-tl-grow.group { background: color-mix(in srgb, var(--cream-50) 70%, transparent); }
.bd-tl-grow.undated { cursor: crosshair; }
.bd-tl-grow.undated:hover { background: color-mix(in srgb, var(--accent-50) 60%, transparent); }
.bd-tl-shade { position: absolute; inset: 0 auto auto 0; width: 100%; pointer-events: none; }
.bd-tl-shade .wkend { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--cream-100) 55%, transparent); }
.bd-tl-shade .now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--danger-500); opacity: 0.7; }
.bd-tl-bar { --c: var(--ink-400); position: absolute; z-index: 1; height: 24px; box-sizing: border-box; display: flex; align-items: center; min-width: 8px; padding: 0 8px; border-radius: 6px; background: color-mix(in srgb, var(--c) 22%, white); border: 1px solid color-mix(in srgb, var(--c) 55%, white); color: var(--text-strong); font-size: 12px; cursor: grab; user-select: none; touch-action: none; box-shadow: var(--shadow-xs); }
.bd-tl-bar:hover { border-color: var(--c); }
.bd-tl-bar.dragging { cursor: grabbing; box-shadow: var(--shadow-md); z-index: 3; }
.bd-tl-bar.dragging::after { content: attr(data-dates); position: absolute; top: -22px; left: 0; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--ink-800); color: var(--white); font: 11px var(--font-mono); white-space: nowrap; }
.bd-tl-bar .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.bd-tl-bar .grip { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.bd-tl-bar .grip.start { left: -2px; }
.bd-tl-bar .grip.end { right: -2px; }
.bd-tl-bar.g-todo { --c: var(--ink-500); }
.bd-tl-bar.g-doing { --c: var(--accent-500); }
.bd-tl-bar.g-waiting { --c: var(--warning-500); }
.bd-tl-bar.g-done { --c: var(--success-500); }
.bd-tl-bar.g-done .label { color: var(--text-muted); }
.bd-tl-bar.g-dropped { --c: var(--ink-200); }
.bd-tl-bar.blocked { border-style: dashed; background: color-mix(in srgb, var(--c) 10%, white); }
.bd-tl-bar.narrow { padding: 0; }
.bd-tl-bar.narrow .label { position: absolute; left: calc(100% + 18px); flex: none; max-width: 260px; color: var(--text-body); }
.bd-tl-bar.milestone { padding: 0; width: 16px !important; height: 16px; margin: 4px 0 0 0; border-radius: 3px; transform: rotate(45deg); background: var(--c); }
.bd-tl-bar.milestone .label { left: auto; transform: rotate(-45deg) translate(18px, -14px); transform-origin: 0 0; }
.bd-tl-bar.milestone .grip { display: none; }
.bd-tl-bar.hidden { --c: var(--ink-200); cursor: default; }
.bd-tl-bar.draft { --c: var(--accent-500); pointer-events: none; opacity: 0.7; }
.bd-tl-links { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.bd-tl-links path { fill: none; stroke: var(--ink-400); stroke-width: 1.5; }
.bd-tl-links path.late { stroke: var(--danger-500); stroke-dasharray: 4 3; }
.bd-tl-links marker path { fill: var(--ink-400); stroke: none; }

.bd-journey { margin-bottom: var(--space-5); }
.bd-journey .bd-tl-frame { --tl-h: auto; height: auto; max-height: 420px; min-height: 0; }
.bd-journey .bd-tl-tools .muted { display: none; }

/* The activity trace on an item: lanes in SVG, labels beside. One colour
   class per lane: tr-trunk, tr-rules, or a person's colour. */
.bd-trace { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: start; }
.bd-trace-svg { display: block; overflow: visible; }
.tr-trunk { --tr: var(--ink-500); }
.tr-rules { --tr: #8B5CF6; }
.tr-blue { --tr: var(--c-blue); } .tr-teal { --tr: var(--c-teal); } .tr-green { --tr: var(--c-green); } .tr-amber { --tr: var(--c-amber); }
.tr-orange { --tr: var(--c-orange); } .tr-rose { --tr: var(--c-rose); } .tr-violet { --tr: var(--c-violet); } .tr-slate { --tr: var(--c-slate); }
.tr-line { fill: none; stroke: var(--tr); stroke-width: 1.8; }
.tr-line.hold { stroke-dasharray: 2 4; opacity: .7; }
.tr-line.on { opacity: .35; }
.tr-rules.tr-line, .tr-line.tr-rules { stroke-dasharray: 4 3; }
marker.tr-trunk path, marker.tr-rules path, marker[class*="tr-"] path { fill: var(--tr); }
.tr-cap { fill: var(--tr); }
.tr-dot { fill: color-mix(in srgb, var(--tr) 18%, white); stroke: var(--tr); stroke-width: 1.8; }
.tr-dot.done { fill: var(--success-100); stroke: var(--success-600); }
.tr-dot.dropped { fill: var(--white); stroke: var(--ink-300); stroke-dasharray: 2 2; }
.tr-dot.hold { fill: var(--warning-100); stroke: var(--warning-600); }
.tr-dot.open { fill: var(--white); stroke: var(--ink-500); }
.bd-trace-labels { display: grid; }
.bd-trace-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bd-trace-chip { flex: none; padding: 1px 8px; border-radius: var(--radius-pill); font: 600 10.5px var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--tr); background: color-mix(in srgb, var(--tr) 12%, white); border: 1px solid color-mix(in srgb, var(--tr) 40%, white); }
.bd-trace-text { min-width: 0; font-size: 13px; color: var(--text-body); line-height: 1.3; }
.bd-trace-text .who { font-weight: 600; color: var(--tr, var(--text-strong)); }
.bd-trace-text .who.tr-trunk { color: var(--text-strong); }
.bd-trace-text .t { display: block; margin-top: 1px; font: 11px var(--font-mono); color: var(--text-subtle); }
.bd-trace-text .t svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }

/* Activity history: a day heading, then one line per action. */
.bd-chips { gap: 6px; }
.bd-select { width: auto; max-width: 260px; height: 32px; padding: 0 8px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--white); font: inherit; font-size: 13px; }
.bd-activity { display: grid; max-width: 920px; }
.bd-day { padding: 16px 0 6px; font: 600 12px var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.bd-act { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-left: 2px solid var(--border-subtle); margin-left: 13px; padding-left: 0; position: relative; }
.bd-act > .bd-av { width: 28px; height: 28px; font-size: 11px; margin-left: -15px; box-shadow: 0 0 0 3px var(--cream-50); }
.bd-av.sys { background: var(--cream-200); color: var(--ink-600); }
.bd-av.sys svg { width: 14px; height: 14px; }
.bd-act-body { display: grid; gap: 2px; min-width: 0; padding: 2px 0; }
.bd-act-line { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bd-act-line b { font-weight: 600; color: var(--text-strong); }
.bd-act-kind { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 12px; }
.bd-act-kind svg { width: 13px; height: 13px; }
.bd-act-time { font: 11px var(--font-mono); color: var(--text-subtle); white-space: nowrap; }
.bd-act-summary { font-size: 14px; color: var(--text-body); overflow-wrap: anywhere; }
.bd-act-item { display: inline-flex; align-items: center; gap: 8px; justify-self: start; max-width: 100%; margin-top: 4px; padding: 4px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--white); color: var(--text-strong); text-decoration: none; font-size: 13px; }
.bd-act-item:hover { border-color: var(--border-default); }
.bd-act-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-act.k-rule_fired .bd-act-summary, .bd-act.k-item_sla_breached .bd-act-summary { color: var(--text-muted); }
.bd-act-rule { color: var(--text-muted); }
.bd-page { max-width: 820px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px 28px; }

.modal.bd-form { width: min(560px, calc(100vw - 40px)); display: grid; gap: 8px; }
.modal.bd-form.wide { width: min(760px, calc(100vw - 40px)); }
.modal.bd-form input[type=text], .modal.bd-form input[type=date], .modal.bd-form input[type=number], .modal.bd-form input[type=url], .modal.bd-form select, .modal.bd-form textarea { width: 100%; padding: 8px 10px; font: inherit; font-size: 14px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--white); color: var(--text-strong); box-sizing: border-box; }
.modal.bd-form textarea.mono, .mono { font-family: var(--font-mono); font-size: 12.5px; }
.modal.bd-form .field { display: grid; gap: 4px; margin: 0; }
.modal.bd-form .field-label { font-size: 12.5px; color: var(--text-muted); }
.modal.bd-form .req { color: var(--danger-600); font-style: normal; }
.modal.bd-form .err { color: var(--danger-600); font-size: 12.5px; min-height: 1em; }
.bd-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.bd-fields { display: grid; gap: 8px; }
.bd-multi { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.bd-fieldrows { display: grid; gap: 6px; }
.bd-fieldrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 120px minmax(0, 1.4fr) auto auto; gap: 6px; align-items: center; }
.bd-fieldrow input, .bd-fieldrow select { padding: 6px 8px !important; font-size: 13px !important; }

.bd-today-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.bd-stat { display: grid; gap: 2px; min-width: 120px; padding: 12px 16px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.bd-stat b { font: 600 24px/1 var(--font-display); color: var(--text-strong); }
.bd-stat span { font-size: 12.5px; color: var(--text-muted); }
.bd-stat.danger b { color: var(--danger-600); }
.bd-today-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.bd-today-cols > .stack { display: grid; gap: var(--space-4); }
.bd-today-sec { display: grid; gap: 8px; }

/* Hand-offs (D132): a folding section on the Patient view, the trace graph
   inside it, and a row of who took part. */
.bd-section-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.bd-section-fold > summary::-webkit-details-marker { display: none; }
.bd-section-fold > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-fast); }
.bd-section-fold[open] > summary::before { transform: rotate(45deg); }
.bd-group-link { color: inherit; text-decoration: none; }
.bd-group-link:hover b { text-decoration: underline; color: var(--accent-700); }
.bd-handoffs { display: grid; gap: 10px; }
.bd-handoffs .seg { flex: none; }
/* Two columns: the graph scrolls inside a fixed height on the left, so the
   page stays short; the people who took part sit beside it as cards. */
.bd-handoffs-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.bd-handoffs-graph { max-height: min(560px, 60vh); overflow: auto; padding: 8px 12px 8px 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--white); }
.bd-handoffs-side { display: grid; gap: 8px; position: sticky; top: 0; }
.bd-person-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.bd-person-card .bd-av { width: 28px; height: 28px; font-size: 11px; flex: none; }
.bd-person-card.platform { background: var(--cream-50); }
.bd-person-text { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.bd-person-text .row { gap: 8px; align-items: baseline; }
.bd-person-text .mono { font-family: var(--font-mono); font-size: 11px; }
@media (max-width: 1100px) { .bd-handoffs-cols { grid-template-columns: minmax(0, 1fr); } .bd-handoffs-side { position: static; } }
.bd-today-sec .overline { gap: 6px; }
.bd-run { padding: 12px 14px; background: var(--cream-50); border: 1px solid var(--cream-border); border-radius: var(--radius-md); }
.bd-run .head { display: flex; justify-content: space-between; gap: 8px; }
.bd-ask { margin-top: 8px; padding: 9px 12px; background: var(--cream-100); border-radius: var(--radius-sm); font-size: 13px; }
.bd-ask b { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 3px; font-weight: 600; }
.bd-patient-head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.bd-patient-head h2 { margin: 0 0 2px; font: 600 24px/1.15 var(--font-display); }
.bd-brief { margin: 0 0 var(--space-4); max-width: 820px; color: var(--text-body); font-size: 15px; line-height: 1.55; }
.bd-diff { font-family: var(--font-mono); font-size: 12px; background: var(--cream-100); border-radius: var(--radius-xs); padding: 1px 6px; }
.bd-diff s { color: var(--text-subtle); }

.bd-set-tabs { margin-bottom: var(--space-4); }
.bd-settings { display: grid; gap: var(--space-5); max-width: 980px; }
.bd-set { display: grid; gap: 8px; padding: 16px 20px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.bd-set > .btn { justify-self: start; }
.bd-set-row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 0; border-bottom: 1px solid var(--border-subtle); font-size: 14px; }
.bd-set-row:last-of-type { border-bottom: 0; }
.bd-set-row > svg.fluent { width: 18px; height: 18px; flex: none; color: var(--ink-500); }
.bd-set-row > .muted { min-width: 0; }
.bd-grid { border-collapse: collapse; font-size: 12.5px; }
.bd-grid th, .bd-grid td { padding: 6px 10px; border: 1px solid var(--border-subtle); text-align: center; }
.bd-grid tbody th, .bd-grid thead th:first-child { text-align: left; color: var(--text-muted); font-weight: 500; }
.bd-rule { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.bd-rule.off { opacity: 0.6; }
.bd-rule .row { gap: 8px; }
.bd-switch { position: relative; display: inline-block; width: 30px; height: 18px; flex: none; }
.bd-switch input { opacity: 0; width: 0; height: 0; }
.bd-switch span { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--ink-200); cursor: pointer; transition: background var(--dur-fast); }
.bd-switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); transition: transform var(--dur-fast); }
.bd-switch input:checked + span { background: var(--accent-600); }
.bd-switch input:checked + span::after { transform: translateX(12px); }
.bd-switch input:focus-visible + span { box-shadow: var(--ring-focus); }

@media (max-width: 1100px) {
  .bd-wrap.with-panel { grid-template-columns: minmax(0, 1fr); }
  .bd-panel { position: static; max-height: none; }
  .bd-today-cols { grid-template-columns: minmax(0, 1fr); }
  .bd-row { grid-template-columns: 10px 14px 64px minmax(0, 1fr) 22px; }
  .bd-row > .bd-chip, .bd-row > .bd-labels { display: none; }
}

/* Organization and department (D126). */
.acct-org .acct-field.ro { flex-direction: row; align-items: center; gap: 10px; padding: 4px 12px; min-height: 36px;
  border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--cream-100); color: var(--ink-700);
  font-weight: 400; cursor: default; }
.acct-org .acct-field.ro > svg { flex: none; width: 16px; height: 16px; color: var(--ink-500); }
.acct-org .acct-field.ro > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.acct-org .acct-field.ro .overline { font-size: 11px; color: var(--text-muted); }
.acct-org .acct-field.ro > span > span:last-child { font-size: 14px; color: var(--text-subtle); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* Administration (D127): departments, the access matrix, patients. */
.admin-org { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-4); font-size: 13px; color: var(--text-muted); }
.admin-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); }
.admin-head h3 { flex: 1; margin: 0; font-size: 16px; }
/* Service accounts (D144): policy statements, keys, the read log. */
.svc-statements { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.svc-statement { width: 100%; padding: 12px 14px; }
.svc-st-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.svc-field { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: start; margin-bottom: 8px; font-size: 13px; }
.svc-field > label { margin: 4px 0 0; }
.svc-checks, .svc-orglist { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.svc-orgs { display: flex; flex-direction: column; gap: 4px; }
.svc-orglist { padding-left: 22px; }
.svc-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--text-body); font-weight: 400; cursor: pointer; }
.svc-check input { width: 15px; height: 15px; margin: 0; }
.svc-ids { width: 100%; min-height: 60px; font-family: var(--font-mono); font-size: 12px; }
.svc-editor { margin-top: 10px; }
.svc-actions { margin-top: 10px; }
.svc-h4 { margin: var(--space-5) 0 var(--space-2); }
.svc-h4 h4 { margin: 0; flex: 1; }
.modal.svc-create { width: min(680px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); overflow-y: auto; }
.modal.svc-key { width: min(620px, calc(100vw - 40px)); }
.svc-token-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.svc-token { flex: 1; font-size: 12.5px; padding: 8px 10px; background: var(--cream-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); word-break: break-all; user-select: all; }
.dept-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.dept-card { padding: 14px 16px; }
.dept-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dept-head > svg { width: 18px; height: 18px; color: var(--ink-500); }
.dept-members { display: flex; flex-direction: column; gap: 4px; }
.dept-member { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.dept-member:last-child { border-bottom: 0; }
.dept-member select { max-width: 150px; }
.matrix-wrap { overflow: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--white); max-height: 70vh; }
.matrix { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.matrix th, .matrix td { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); text-align: center; white-space: nowrap; }
.matrix thead th { position: sticky; top: 0; background: var(--cream-50, #faf8f4); z-index: 2; font-weight: 500; color: var(--text-muted); }
.matrix thead tr:nth-child(2) th { top: 31px; }
.matrix th.grp { border-left: 1px solid var(--border-subtle); color: var(--text-strong); }
.matrix th.sub { font-size: 11.5px; max-width: 110px; white-space: normal; line-height: 1.2; }
.matrix .role-th { position: sticky; left: 0; background: var(--white); z-index: 1; text-align: left; min-width: 150px; font-weight: 500; }
.matrix .role-acts { display: flex; gap: 2px; margin-top: 2px; }
.matrix td.ck input { width: 16px; height: 16px; }
.matrix select.lvl { font-size: 12px; height: 28px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border-input); }
.matrix select.lvl-none { color: var(--text-subtle); background: var(--cream-100); }
.matrix select.lvl-view { background: var(--info-100, #e8f0fe); }
.matrix select.lvl-edit { background: var(--success-100, #e6f4ea); }
.matrix select.lvl-manage { background: var(--warning-100); }
.matrix .saved { outline: 2px solid var(--success-600, #2e7d32); outline-offset: 1px; transition: outline-color 0.6s; }
.share-target { display: flex; flex-direction: column; gap: 8px; }
.share-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.share-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--cream-border); background: transparent; color: var(--ink-700); cursor: pointer; max-width: 100%; }
.share-opt svg { flex: none; }
.share-opt.on { border-color: var(--accent-600); background: color-mix(in srgb, var(--accent-600) 9%, transparent); color: var(--accent-700); }
.share-opt:disabled { opacity: 0.5; cursor: not-allowed; }
.share-reach { margin: 0; }
.team-row { gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.orgs { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.orgs-head { display: flex; align-items: center; justify-content: space-between; }
.orgs-head h4 { margin: 0; }
.org-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--cream-border); }
.org-pick { max-width: 240px; }