/* 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; }
.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; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

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

.app { display: grid; grid-template-columns: 208px 1fr; height: 100vh; }
/* Collapsed rail: icons only. Labels hide, the notice becomes its icon
   (the text is its tooltip), the account shows only the sign-out icon. */
.app.rail-collapsed { grid-template-columns: 64px 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 { display: none; }
.rail-collapsed .rail .rail-group { padding: 0; align-items: center; }
.rail-collapsed .rail .foot { justify-content: center; }
.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 .demo-note { justify-content: center; padding: 8px 0; }
.rail-collapsed .rail .demo-note svg { width: 18px; height: 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; }
.rail-collapsed .rail .navbtn:has(.count)::after { content: ""; position: absolute; top: 7px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--warning-500); }

.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-3) var(--space-3);
  gap: 2px;
}
.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; }
/* The demo notice. Pinned to the bottom of the rail so it is on every
   screen without being in the way. */
.rail .rail-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-4); }
.rail .rail-group-label { font-size: 12px; color: var(--ink-600); padding: 0 8px 6px; white-space: nowrap; }
.rail .demo-note { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-600); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.rail .demo-note:hover { background: var(--cream-300); color: var(--ink-900); }
.rail .demo-note svg { width: 14px; height: 14px; flex: none; color: var(--warning-500); }
.rail .navbtn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; background: transparent; color: var(--ink-900);
  min-height: 36px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 16px; 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); }
.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; font-weight: 600;
  display: grid; place-items: center;
}
.navtip { position: fixed; z-index: 60; max-width: 260px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--ink-900); color: var(--white); box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, .18)); font-size: 13px; line-height: 1.45; opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity var(--dur-fast), transform var(--dur-fast); }
.navtip.on { opacity: 1; transform: none; }
.navtip strong { display: block; font-weight: 600; margin-bottom: 2px; }
.navtip p { margin: 0; color: rgba(255, 255, 255, .82); }
.navtip::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; background: inherit; transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
.rail .foot { margin: 0 calc(-1 * var(--space-3)); 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; }
.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); }

/* 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: 72px; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--wash-soft); }
.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); }
.topbar .actions .assist-btn { border-color: transparent; }
/* 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; }
.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-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); }
.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; 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; }
.iconbtn:hover { background: var(--surface-hover); color: var(--text-strong); }
.iconbtn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

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; }
.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; }
.tabpick { display: none; width: auto; min-width: 220px; max-width: 100%; margin-bottom: var(--space-5); font-weight: 500; }
.tabnav.narrow .tabs { height: 0; margin: 0; border: 0; visibility: hidden; }
.tabnav.narrow .tabpick { display: block; }
.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); }

.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); }

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::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); }
details.fold[open] summary::before { transform: rotate(45deg); }
details.fold[open] summary { margin-bottom: 8px; }

.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); }
/* Since your last visit: at the top of the pinned chat column. */
.slv { margin: 10px 12px 0; border-left: 4px solid var(--accent-500); padding: 12px 14px; }
.slv .card-head h3 { font-size: 14px; }
.slv-group { margin-top: 8px; }
.slv-group .overline { margin-bottom: 4px; }
.slv-line { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 3px 0; }
.slv-line > svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--accent-500); }
/* Casebook status bar: one line under the hero. */
.statusbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding: 8px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--white); font-size: 12.5px; min-width: 0; }
.sb-item { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; border: 0; background: none; padding: 0; font: inherit; color: var(--text-muted); }
button.sb-item { cursor: pointer; }
button.sb-item:hover .sb-val { text-decoration: underline; }
.sb-val { font-family: var(--font-mono); font-weight: 600; color: var(--text-strong); }
.sb-item.warn .sb-val { color: var(--warning-600); }
.sb-item.ok .sb-val { color: var(--success-600); }
.sb-item.accent .sb-val { color: var(--accent-700); }
.sb-note { color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.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; border-left: 4px solid var(--accent-500); }
.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; }
.pinned-note > svg { flex: none; width: 16px; height: 16px; }
.pinned-note span { flex: 1; }
.pinned-note strong { color: var(--warning-600); }
.jtree .is-readonly .jval, .card.is-readonly .jval { cursor: default; }
/* 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: 11px; opacity: 0.7; }

/* ---- casebook cards ----------------------------------------------------- */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.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); }
.pcard:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.pcard-head { display: flex; align-items: center; gap: 10px; }
.pcard-head .name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-head .meta { font-size: 12.5px; color: var(--text-muted, var(--ink-500)); }
.pcard-head .badge { flex: none; }
.pcard-dx { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--ink-800); min-height: 20px; }
.pcard-dx > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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); }
.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; }
.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 ----------------------------------------------------- */

.hero { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-8); border-radius: var(--radius-xl); flex-wrap: wrap; }
.hero > div:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.hero .name { overflow-wrap: anywhere; }
.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); }
.hero .name { font-size: 26px; }
.hero .meta { color: var(--text-muted); margin-top: 4px; }
.hero .meta strong { color: var(--text-strong); font-weight: 600; }
.hero .status { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 100%; }

/* ---- 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; }
  /* The status block goes under the name, left-aligned, in a row. */
  .hero .status { margin-left: 0; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hero .status .row { justify-content: flex-start !important; }
  .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; }

/* ---- 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; }
.assist .panel {
  position: absolute; top: 0; right: 0; height: 100%; width: 560px; max-width: 94vw;
  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;
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out);
}
.assist.open .panel { transform: none; }

/* 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; }
.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% 100%, 0 0; }
  25%  { background-position: 60% 20%, 40% 80%, 0% 60%, 70% 100%, 30% 30%, 0 0; }
  50%  { background-position: 100% 100%, 0% 0%, 80% 90%, 20% 60%, 100% 0%, 0 0; }
  75%  { background-position: 30% 70%, 70% 30%, 100% 30%, 0% 10%, 60% 80%, 0 0; }
  100% { background-position: 0% 0%, 100% 100%, 50% 0%, 100% 40%, 0% 100%, 0 0; }
}
.greet .orb {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px;
  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%),
    radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(160deg, #758DFA 0%, #6BB4F7 50%, #75E7EF 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-repeat: no-repeat;
  animation: orbmesh 11s ease-in-out infinite;
  filter: blur(0.4px);
  box-shadow: var(--shadow-md), inset 0 -18px 30px rgba(255,255,255,0.45);
}
.stage .greet .orb { width: 120px; height: 120px; }
.greet h2 { font-weight: 500; }
/* The rotating topic after "Ask gSage": fades out, changes, fades in. */
.greet .rotor { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding-right: 0.08em;
  transition: opacity 250ms, transform 250ms, width 600ms ease-in-out; }
.greet .rotor.out { opacity: 0; transform: translateY(4px); }
.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; }
.suggest { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 var(--space-5) var(--space-3); }
.stage .suggest { justify-content: center; max-width: 820px; margin: 0 auto; }
.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. */
.composer .dock { border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--white); overflow: hidden; }
.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.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) {
  .ctx-summary { display: none; }
  input.effort { width: 72px; }
}
.ctx-row.actions { border-top: 1px solid var(--border-subtle); padding-top: 6px; flex-wrap: wrap; }
.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; }
.ctx-summary { color: var(--text-muted); }
.ctxbar.has-reading .ctx-summary { color: var(--accent-700); }

.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); }
.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); }
.stage .composer { border-top: 0; padding-bottom: var(--space-5); }
.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. */
.composer textarea { border: 0; padding: 6px 0; height: 34px; min-height: 0; resize: none; box-shadow: none; overflow-y: auto; }
.composer .box.tall textarea { height: 122px; }
.composer .grow-btn { width: 28px; height: 28px; border-radius: var(--radius-xs); border: 0; background: transparent; color: var(--text-subtle); cursor: pointer; display: grid; place-items: center; flex: none; align-self: flex-end; margin-bottom: 4px; }
.composer .grow-btn:hover { background: var(--surface-hover); color: var(--text-strong); }
.composer .grow-btn svg { width: 14px; height: 14px; }
.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); }
.disc { padding: 0 var(--space-5) var(--space-3); font-size: 11px; color: var(--text-subtle); font-style: italic; }
.stage .disc { 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: 50%; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(420px, var(--case-left)) 6px 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); }
.casepage .content { padding-right: var(--space-5); padding-top: var(--space-6); }
.case-split { cursor: col-resize; background: var(--border-subtle); position: relative; }
.case-split::after { content: ""; position: absolute; inset: 0 -4px; }
.case-split:hover, .casepage.dragging .case-split { background: var(--accent-300); }
.caseside { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--white); padding-top: var(--bar); }
.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; }
.caseside-head .spark { color: var(--accent-500); width: 16px; height: 16px; }
.caseside-pick { flex: 1; min-width: 0; width: auto; padding: 4px 8px; font-size: 12.5px; border-radius: var(--radius-xs); }
/* 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: var(--wash-soft); }
.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. */
.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; }
.chatpage.list-collapsed .convos-open { opacity: 1; pointer-events: auto; }
.convo-head { padding: 0 4px 10px; }
.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; }
.convo-head .searchbox { width: 100%; }
.listbar { margin-bottom: 10px; gap: 10px; align-items: center; }
.listbar .searchbox { max-width: 340px; }
.pick-find { margin-bottom: 8px; }
.convo { padding: 10px 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); box-shadow: inset 3px 0 0 var(--accent-600); }
.convo .title { font-size: 14px; color: var(--text-strong); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 2px; }
.convo.active .title { color: var(--accent-700); }
.convo .when { font-size: 12px; 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); }
.convo .x { border: 0; background: transparent; color: var(--ink-300); width: 20px; height: 20px; border-radius: 4px; cursor: pointer; display: grid; place-items: center; opacity: 0; }
.convo .x svg { width: 12px; height: 12px; }
.convo:hover .x { opacity: 1; }
.convo .x:hover { background: var(--danger-100); color: var(--danger-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; }
.chatpage .stage .body { padding-top: var(--bar); }

/* PharmaOS: the question is a cream card with dark text; the answer sits
   on the canvas. */
.msg { max-width: 88%; padding: 12px 16px; border-radius: var(--radius-lg); font-size: 16px; line-height: var(--lh-normal); }
.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; }
/* 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 stroke 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%   { stroke: #758DFA; }
  33%  { stroke: #6BB4F7; }
  66%  { stroke: #75E7EF; }
  100% { stroke: #758DFA; }
}
.msg.bot.streaming .who .spark { animation: sparkflow 1.6s linear infinite; }
.msg.bot.streaming .who .spark path, .msg.bot.streaming .who .spark polygon { stroke: inherit; }
.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; }
.md .md-h { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 14px 0 6px; color: var(--text-strong); }
.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; }
.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; }
.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 { font-family: var(--font-mono); color: var(--ink-700); }
.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: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sources a:hover { text-decoration: underline; }
.sources .src-host { font-size: 11px; color: var(--text-muted); flex: none; }
.sources .src-more { margin-top: 4px; }
.sources .src-more summary { font-size: 12px; color: var(--text-muted); cursor: pointer; }
/* 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; 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.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: 60px 1fr; height: 100%; min-height: 0; background: var(--wash-stage); }
.ann-head { display: flex; align-items: center; gap: 14px; padding: 0 24px; background: var(--acrylic-light-strong); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); border-bottom: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 1px 0 var(--cream-border-strong), var(--acrylic-edge); position: relative; z-index: 6; }
.ann-head h1 { font-size: 20px; }
.ann-head .crumb { color: var(--ink-600); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-head .crumb b { color: var(--ink-900); font-weight: 500; }
.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; }
.ann-work { display: grid; grid-template-columns: 132px minmax(0, 1fr) 300px; min-height: 0; }
.ann-pages { border-right: 1px solid rgba(255, 255, 255, .6); padding: 12px; overflow: auto; background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-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-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-left: 1px solid rgba(255, 255, 255, .6); background: var(--acrylic-light); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); box-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: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--cream-border); border-radius: 10px; background: rgba(255, 255, 255, .85); font-size: 13px; margin-top: 8px; }
.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: wrap; 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); }
.listtools .searchbox { flex: 1 1 260px; max-width: 420px; border-color: transparent; background: var(--cream-50); }
.listtools .searchbox:focus-within { background: var(--white); }
.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; }
.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); }
.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); }

/* 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: start; gap: 12px; margin: 0 2px 10px; }
.facet-line[hidden] { display: none; }
.facet-line .facet-toggle { height: 30px; background: var(--white); }
.facet-bar { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.facet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Folded: the first row on one line, fading out at the right edge. */
.facet-bar.peek { max-height: 30px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 75%, transparent); mask-image: linear-gradient(to right, #000 75%, transparent); }
.facet-bar.peek .facet { flex-wrap: nowrap; }
.facet .chip { flex: none; white-space: nowrap; }
.facet-bar .fluent, .facet-toggle .fluent { width: 16px; height: 16px; flex: none; }
.facet-toggle .caret { width: 12px; height: 12px; transition: transform var(--dur-fast); }
.facet-toggle.open .caret { transform: rotate(90deg); }
.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); }
.chip .n { font-size: 11.5px; 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: 11.5px; 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.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 ------------------------------------------ */
.modal.runmodal { width: min(720px, calc(100vw - 40px)); }
.runmodal .field > .overline { display: block; margin-bottom: 6px; }
.runmodal select { width: 100%; }
.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 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.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:active { transform: scale(.98); }
figure.click { cursor: zoom-in; }
.viewer.artifact .viewer-stage { padding: 20px; }
.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); }
.artifact-csv { max-width: none; width: 100%; padding: 0; overflow: auto; box-shadow: var(--shadow-sm); }
.artifact-csv table { font-size: 13px; border-collapse: collapse; width: 100%; }
.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-card.manual { border-left: 3px solid var(--accent-600); }
.prov-head { display: flex; align-items: center; gap: 8px; }
.prov-path { font-size: 13px; color: var(--accent-700); background: transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-change { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.prov-change code { background: var(--cream-200); padding: 2px 8px; border-radius: var(--radius-xs); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-change code:last-child { background: var(--accent-50); color: var(--accent-700); }
.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; }
.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%); }
.question .qhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.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; }
.question .opt-other { margin: -6px 0 4px; max-width: 480px; }
.question .revise-box { margin-top: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--accent-50); }
.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); }
/* Workflow details: glass, like the rest of the overlays, but roomier. */
.modal.wf-details { width: min(640px, calc(100vw - 40px)); max-height: calc(100dvh - 60px); overflow-y: auto; padding: 26px 28px 22px; }
.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); }
.row-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; white-space: nowrap; }
.row-actions a.iconbtn { display: inline-flex; }
.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.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; }
.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; }
.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)); 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; bottom: 24px; right: 24px; 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.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 casebook as a tree. Keys fixed, values editable in place. */
.jtree { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; }
.jtree > .jnode { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--white); }
.jtree > .jnode > summary { padding: 8px 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.jnode summary { cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 2px 0; list-style: none; }
.jnode summary::-webkit-details-marker { display: none; }
.jnode summary::before { content: "\25B8"; color: var(--text-muted); font-size: 11px; width: 10px; flex: none; }
.jnode[open] > summary::before { content: "\25BE"; }
.jchildren { padding: 2px 0 6px 18px; border-left: 1px solid var(--border-subtle); margin-left: 4px; }
.jtree > .jnode > .jchildren { margin-left: 16px; padding-right: 12px; }
.jkey { color: var(--text-body); }
.jmeta { color: var(--text-muted); font-size: 11px; font-family: var(--font-sans); }
.jleaf { display: flex; align-items: baseline; gap: 8px; padding: 1px 0; min-height: 22px; }
.jleaf .jkey::after { content: ":"; color: var(--text-muted); }
.jleaf .jval { cursor: text; padding: 0 4px; border-radius: 3px; border: 1px solid transparent; max-width: 60ch; white-space: pre-wrap; word-break: break-word; }
.jleaf .jval:hover { background: var(--accent-50); border-color: var(--accent-100); }
.jval.t-string { color: var(--success-600); }
.jval.t-number { color: var(--accent-700); }
.jval.t-boolean { color: var(--warning-600); }
.jval.t-null { color: var(--text-muted); font-style: italic; }
.jleaf.edited .jval { background: var(--warning-200); border-color: var(--warning-300); }
.jleaf .jby { font-size: 11px; color: var(--accent-700); background: var(--accent-50); border-radius: var(--radius-pill); padding: 1px 7px; white-space: nowrap; }
.jedit { font: inherit; padding: 0 4px; border: 1px solid var(--accent-600); border-radius: 3px; min-width: 12ch; max-width: 60ch; box-shadow: var(--ring-focus); background: var(--white); }
textarea.jedit { width: 60ch; resize: vertical; }
.jhist { opacity: 0; width: 20px; height: 20px; }
.jhist svg { width: 12px; height: 12px; }
.jleaf:hover .jhist { opacity: 1; }
.jtree .dim { opacity: 0.35; }
.jtree .hit > summary .jkey, .jleaf.hit .jkey { color: var(--accent-700); }
.jleaf.hit .jval { background: #FFFEC3; }
.modal.jh { max-width: 640px; }
.jh-rows { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; margin-top: 10px; }
.jh-row { display: grid; grid-template-columns: 150px 1fr; gap: 2px 12px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: 13px; }
.jh-row .jval { font-family: var(--font-mono); grid-column: 2; }
.jh-row .quote { grid-column: 2; font-style: italic; }

/* 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; }

/* The coding agent'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; }
.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 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; }
.callout { position: absolute; z-index: 60; max-width: 300px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--acrylic-dark); backdrop-filter: var(--acrylic-blur); -webkit-backdrop-filter: var(--acrylic-blur); color: var(--text-on-inverse, #fff);
  font-size: 12.5px; line-height: 1.45; box-shadow: var(--acrylic-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18); animation: rise var(--dur-base) var(--ease-out) both; }
/* 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: rgba(255, 255, 255, 0.82); }
.callout .co-row { margin-top: 7px; padding-left: 9px; border-left: 2px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.86); }
.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: #94DA98; }
.callout .co-row.bad { border-left-color: var(--warning-500); }
.callout .co-row.bad b { color: #FFAE68; }
.modal.skill { width: min(640px, calc(100vw - 40px)); }
.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 { 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)); }
.modal.pick .modal-text .small { font-family: var(--font-sans); }
.pick-list { 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); }
.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; }
.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; }

/* --- 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 ------------------------------------------- */

.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:
   an accent rule down the left and a tinted head. Same treatment on the
   approve card's draft, which is the same thing before approval. */

.output { border: 1px solid var(--accent-100); border-left: 4px solid var(--accent-500); 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; }

.question .draft { border-left: 4px solid var(--accent-500); }

/* 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 { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 12px; }
.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; }