/* Studio fills the remaining viewport under the global header. Percentage height
   used to stop at body (min-height: 100vh, height: auto), so .build-workspace's
   flex: 1 never received a definite leftover height and the canvas collapsed. */
body:has(#model-builder-host:not([hidden])) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}
#model-builder-host, #model-builder-root { min-height: 0; }
/* A <fieldset> is used wherever a group of inputs has to be disabled in one go, so it
   needs the browser's own chrome stripped. This is a base reset and belongs with the
   other base rules: it used to sit at the end of the file, where — being one class,
   the same weight as the containers it applies to — it won on order and silently
   cancelled their padding, flattening every component editor against its own border. */
.build-fieldset-reset { border: 0; padding: 0; margin: 0; min-width: 0; }
.build-fieldset-reset:disabled { opacity: .55; }
/* The builder host stays mounted (hidden) while other pages are shown, so the
   full-bleed layout must key off its visibility rather than off .build-page. */
.main-content:has(#model-builder-host:not([hidden])) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    flex: 1 1 auto;
    height: calc(100dvh - var(--header-height, 52px));
    max-height: calc(100dvh - var(--header-height, 52px));
    min-height: 0;
}
.main-content:has(#model-builder-host:not([hidden])) #page-content { display: none; }
#model-builder-host:not([hidden]),
#model-builder-host:not([hidden]) #model-builder-root {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.build-page {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--slate-50);
    color: var(--slate-900);
}
/* Layout, height and padding come from .page-subnav so this bar matches the one
   on every other tab; only the stacking context is Model Studio's own. */
.build-header {
    position: relative;
    z-index: 30;
    flex: none;
    min-width: 0;
    overflow: visible;
}
.build-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    min-width: 0;
    /* Fixed height, not content height: the model name sits on the same line on every
       step, whether the toolbar beside it carries five buttons or none. */
    min-height: 44px;
    padding: 4px 18px 5px;
    background: #fff;
    border-bottom: 1px solid var(--slate-200);
}
.build-identity { flex: none; min-width: 0; /* 270px library column minus chrome padding and gap */ width: 240px; max-width: 240px; }
.build-identity-line { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 100%; min-width: 0; }
.build-eyebrow { color: var(--text-tertiary); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.build-title-input { display: block; box-sizing: border-box; width: auto; flex: 0 1 auto; min-width: 8ch; max-width: 100%; field-sizing: content; margin: 0; border: 0; outline: 0; background: transparent; color: var(--slate-900); font: 700 14.5px/1.2 Inter, sans-serif; overflow: hidden; text-overflow: ellipsis; }
.build-title-input:focus { border-bottom: 1px solid var(--accent-primary-200); }

/* Toolbar ------------------------------------------------------------------ */
.build-tool-spacer { flex: 1 1 auto; min-width: 4px; }
.build-icon { width: 14px; height: 14px; flex: none; }
.build-tool { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--slate-600); font: 600 11px Inter, sans-serif; white-space: nowrap; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s; }
.build-tool .build-icon { color: var(--text-tertiary); transition: color .12s; }
.build-tool:hover:not(:disabled) { background: #fff; color: var(--slate-900); box-shadow: 0 1px 2px rgba(15,23,42,.10); }
.build-tool:hover:not(:disabled) .build-icon { color: var(--slate-600); }
.build-tool:focus-visible { outline: 2px solid var(--accent-primary-bright); outline-offset: 1px; }
.build-tool:disabled { color: var(--slate-300); cursor: not-allowed; }
.build-tool:disabled .build-icon { color: #dbe2ea; }
.build-tool.is-icon { width: 30px; padding: 0; justify-content: center; }
.build-tool.is-active { background: #fff; color: var(--accent-primary-dark); box-shadow: 0 1px 2px rgba(var(--accent-primary-rgb), .20); }
.build-tool.is-active .build-icon { color: var(--accent-primary); }
.build-tool.is-danger:hover:not(:disabled) { background: #fff; color: #dc2626; }
.build-tool.is-danger:hover:not(:disabled) .build-icon { color: #dc2626; }
.build-tool.is-pending { color: #b45309; }
.build-tool.is-pending .build-icon { color: #f59e0b; }
.build-run { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--accent-primary); color: #fff; font: 700 11.5px Inter, sans-serif; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), .28); transition: background .12s, transform .12s; }
.build-run:hover:not(:disabled) { background: var(--accent-primary-dark); }
.build-run:active:not(:disabled) { transform: translateY(1px); }
.build-run:focus-visible { outline: 2px solid #172554; outline-offset: 2px; }
.build-run:disabled { background: var(--accent-primary-200); box-shadow: none; cursor: progress; }

.build-workspace { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 270px minmax(420px, 1fr) 292px; grid-template-rows: minmax(0, 1fr); overflow: hidden; transition: grid-template-columns .18s ease; }
.build-workspace.library-collapsed { grid-template-columns: 42px minmax(420px, 1fr) 292px; }
.build-workspace.inspector-collapsed { grid-template-columns: 270px minmax(420px, 1fr) 42px; }
.build-workspace.library-collapsed.inspector-collapsed { grid-template-columns: 42px minmax(420px, 1fr) 42px; }
.build-library, .build-inspector { min-width: 0; min-height: 0; height: 100%; overflow-y: auto; background: #fff; padding: 20px 16px; }
.build-library { position: relative; border-right: 1px solid var(--slate-200); }
.build-library.is-disabled > :not(.build-panel-head):not(.build-library-lock) { opacity: .28; pointer-events: none; user-select: none; }
.build-library.is-disabled .build-panel-subtitle { color: var(--text-tertiary); }
.build-library-lock { position: absolute; z-index: 5; top: 50%; right: 18px; left: 18px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; padding: 20px 14px; border: 1px solid #dbe4ef; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 10px 28px rgba(15,23,42,.08); text-align: center; }
.build-library-lock > .build-icon { width: 22px; height: 22px; margin-bottom: 9px; color: var(--text-tertiary); }
.build-library-lock strong { color: var(--slate-700); font-size: 12.5px; }
.build-library-lock p { margin: 5px 0 13px; color: var(--slate-500); font-size: 10.5px; line-height: 1.45; }
.build-library-lock .build-new-model-create { height: 30px; }
.build-inspector { border-left: 1px solid var(--slate-200); }
.build-panel-title { font-size: 15px; font-weight: 750; color: var(--slate-900); }
.build-panel-subtitle { margin-top: 4px; color: var(--slate-500); font-size: 12px; line-height: 1.45; }
.build-library-group { margin-top: 14px; }
.build-library-group h3 { position: sticky; top: -20px; z-index: 2; margin: 0 0 6px; padding: 6px 0 5px; background: #fff; }
.build-library-group h3 button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: transparent; color: var(--text-tertiary); font: 800 9.5px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.build-library-group h3 button:hover { color: var(--accent-primary-dark); }
.build-library-group h3 span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.build-library-group h3 em { flex: none; padding: 1px 5px; border-radius: 999px; background: var(--slate-100); color: var(--text-tertiary); font: 700 9px Inter, sans-serif; font-style: normal; letter-spacing: 0; }
.build-group-caret { width: 11px; height: 11px; color: var(--slate-300); transform: rotate(90deg); transition: transform .15s; }
.build-library-group.is-collapsed .build-group-caret { transform: rotate(0deg); }
.build-library-item { position: relative; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 9px; margin-bottom: 4px; padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; background: #fff; cursor: grab; transition: border-color .12s, background .12s, box-shadow .12s; }
.build-library-item::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 0; width: 2px; border-radius: 0 2px 2px 0; background: currentColor; opacity: 0; transition: opacity .12s; }
.build-library-item:hover { border-color: #dfe6f2; background: #fbfcfe; box-shadow: 0 2px 6px rgba(15,23,42,.05); }
.build-library-item:hover::before { opacity: .75; }
.build-library-item:focus-visible { outline: 2px solid var(--accent-primary-bright); outline-offset: 1px; }
.build-library-item:active { cursor: grabbing; }
.build-library-item.is-design-only { opacity: .78; }
.build-library-item.is-design-only .build-library-icon { border: 1px dashed var(--slate-300); }
.build-library-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: #f6f8fc; font-size: 14px; font-weight: 700; }
.build-library-text { min-width: 0; }
.build-library-item strong { display: block; color: var(--slate-800); font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.build-library-item small { display: block; overflow: hidden; color: var(--text-tertiary); font-size: 10.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.build-library-meta { display: grid; grid-auto-flow: column; align-items: center; justify-content: end; gap: 4px; width: 38px; }
/* The add affordance only appears on hover, but its slot is always reserved so the
   row does not reflow under the pointer. */
.build-library-add { display: grid; visibility: hidden; color: var(--accent-primary); }
.build-library-item:hover .build-library-add { visibility: visible; }
.build-main { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.build-canvas { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; background: #fbfdff; }
.build-canvas .react-flow { width: 100%; height: 100%; }
.build-canvas.is-pan .react-flow__pane { cursor: grab; }
.build-canvas.is-pan .react-flow__pane:active { cursor: grabbing; }
.build-canvas.is-select .react-flow__pane { cursor: crosshair; }
/* Held space is the hand tool over the whole canvas, components included — dragging
   one while space is down pans, it does not move the component. */
.build-canvas.is-space-panning .react-flow__pane,
.build-canvas.is-space-panning .react-flow__node,
.build-canvas.is-space-panning .react-flow__edge { cursor: grab; }
.build-canvas.is-space-panning .react-flow__pane:active,
.build-canvas.is-space-panning .react-flow__node:active { cursor: grabbing; }
.build-canvas .react-flow__edge-path { stroke: var(--slate-500); stroke-width: 1.5; }
.build-canvas .react-flow__edge { cursor: pointer; }
/* A line wears the colour of the port it leaves (canvasView tags it), mirroring the dots and
   PORT_KINDS in backend/model_components.py. Before the hover and selected rule below, which
   has the same specificity and has to win. */
.build-canvas .react-flow__edge.build-edge-rows .react-flow__edge-path { stroke: #2563eb; }
.build-canvas .react-flow__edge.build-edge-customers .react-flow__edge-path { stroke: #0891b2; }
.build-canvas .react-flow__edge.build-edge-metric .react-flow__edge-path { stroke: #7c3aed; }
.build-canvas .react-flow__edge.build-edge-condition .react-flow__edge-path { stroke: #d97706; }
.build-canvas .react-flow__edge.build-edge-alert .react-flow__edge-path { stroke: #059669; }
.build-canvas .react-flow__edge.build-edge-policy .react-flow__edge-path { stroke: #4f46e5; }
.build-canvas .react-flow__edge.build-edge-evidence .react-flow__edge-path { stroke: #b45309; }
.build-canvas .react-flow__edge:hover .react-flow__edge-path,
.build-canvas .react-flow__edge.selected .react-flow__edge-path { stroke: var(--accent-primary); stroke-width: 3; }
.build-canvas .react-flow__controls { overflow: hidden; border: 1px solid var(--slate-200); border-radius: 8px; box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.build-canvas .react-flow__controls-button { width: 28px; height: 28px; border-color: var(--slate-200); background: #fff; }
.build-canvas .react-flow__minimap { border: 1px solid var(--slate-200); border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(15,23,42,.06); }
.build-canvas-hint { position: absolute; bottom: 14px; left: 50%; z-index: 4; transform: translateX(-50%); padding: 6px 10px; border: 1px solid var(--slate-200); border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(15,23,42,.05); color: var(--slate-500); font: 500 10px Inter,sans-serif; pointer-events: none; white-space: nowrap; }
/* The card is neutral: the category is the icon tile's tint, the data type is the port and
   edge colour, and the only coloured outline is selection. A coloured top stripe per category
   said the same thing as the icon a third time and clashed with the port colours beside it. */
.build-node { width: 210px; border: 1px solid #dbe3ee; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.06); overflow: hidden; }
.build-node.is-selected { border-color: var(--accent-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 18%, transparent), 0 4px 12px rgba(15,23,42,.08); }
.build-canvas.is-walkthrough .build-node.is-walkthrough-dim,
.build-canvas.is-walkthrough .build-group.is-walkthrough-dim {
  opacity: .22; filter: grayscale(.55); transform: scale(.985);
  transition: opacity .4s ease, filter .4s ease, transform .4s ease, box-shadow .4s ease;
}
.build-canvas.is-walkthrough .build-node.is-walkthrough {
  opacity: 1; filter: none; transform: scale(1.03);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .5), 0 22px 40px rgba(76, 29, 149, .28);
  z-index: 3;
}
.build-canvas.is-walkthrough .build-group.is-walkthrough {
  opacity: 1; filter: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .5), 0 22px 44px rgba(23, 37, 84, .22);
}
.build-canvas.is-walkthrough .build-node-edit,
.build-canvas.is-walkthrough .build-node-remove { display: none; }
.build-canvas.is-walkthrough .react-flow__edge.is-walkthrough-dim .react-flow__edge-path {
  stroke: var(--slate-300); stroke-width: 1.2; opacity: .18;
}
.build-canvas.is-walkthrough .react-flow__edge.is-walkthrough .react-flow__edge-path {
  stroke: #7c3aed; stroke-width: 2.4; opacity: 1;
}
.build-canvas.is-walkthrough .react-flow__minimap { opacity: .35; pointer-events: none; }
/* Top-aligned: a title wraps to three lines, and centred the icon and buttons floated beside
   its middle line instead of sitting on its first. The buttons are 20px against a 15px first
   line, so they are lifted half the difference to share its centre. */
.build-node-head { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px 7px; color: #172033; font-size: 12px; font-weight: 750; }
.build-node-head > .build-node-edit, .build-node-head > .build-node-remove { margin-top: -2.5px; }
.build-node-names { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.build-node-names > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The title gets about 96px beside the icon and the two buttons, so on one line almost
   every label was cut to an ellipsis — "Transaction stream" included. Three lines carry a
   plain-English label whole; the full text is also the element's tooltip. */
.build-node-names > .build-node-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.25; overflow-wrap: break-word; }
.build-node-kind { color: var(--slate-400); font-size: 9px; font-weight: 500; }
.build-node-remove { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--slate-400); font: 500 17px/1 Inter,sans-serif; cursor: pointer; }
.build-node-remove:hover { background: #fee2e2; color: #dc2626; }
.build-node-edit { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--slate-400); font: 700 12px/1 Inter,sans-serif; cursor: pointer; }
.build-node-edit:hover { background: var(--accent-primary-50); color: var(--accent-primary-dark); }
/* Edit and remove appear on the card being pointed at or worked on; on every card at once
   they were a dozen pairs of controls competing with the titles. Still in the tab order. */
.build-node .build-node-edit, .build-node .build-node-remove { opacity: 0; transition: opacity .12s; }
.build-node:hover .build-node-edit, .build-node:hover .build-node-remove,
.build-node.is-selected .build-node-edit, .build-node.is-selected .build-node-remove,
.build-node:focus-within .build-node-edit, .build-node:focus-within .build-node-remove { opacity: 1; }
.build-node-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--node-accent); background: color-mix(in srgb, var(--node-accent) 12%, white); font-size: 14px; }
.build-node-description { min-height: 34px; max-height: 58px; padding: 0 12px 9px; overflow: hidden; color: var(--slate-500); font-size: 9px; line-height: 1.45; white-space: pre-line; }
.build-node-status { padding: 7px 12px; border-top: 1px solid #eef2f7; background: var(--slate-50); color: var(--slate-400); font-size: 8.5px; font-weight: 500; }
.build-node .react-flow__handle { width: 8px; height: 8px; border: 2px solid #fff; background: var(--node-accent); box-shadow: 0 0 0 1px var(--node-accent); }
.build-inspector-content { margin-top: 18px; }
.build-selected-kind { margin-bottom: 16px; font-size: 13.5px; font-weight: 750; }
.build-inspector label { display: block; margin-bottom: 13px; color: var(--slate-600); font-size: 11.5px; font-weight: 650; }
.build-inspector .input { width: 100%; margin-top: 5px; font-size: 12.5px; }
.build-remove-button { width: 100%; color: #dc2626; border-color: #fecaca; background: #fff; }
.build-config-section { margin: 2px 0 16px; padding: 12px; border: 1px solid var(--accent-primary-100); border-radius: 9px; background: #f8fbff; }
.build-config-section label:last-of-type { margin-bottom: 0; }
.build-config-note { color: var(--slate-500); font-size: 10.5px; line-height: 1.5; }
.build-results-close { width: 28px; height: 28px; border: 0; border-radius: 7px; background: var(--slate-100); color: var(--slate-500); font-size: 18px; cursor: pointer; }
.build-run-context { display: flex; gap: 8px; padding: 0 14px 10px; }
.build-run-context span { padding: 4px 7px; border-radius: 999px; background: var(--accent-primary-50); color: var(--accent-primary-dark); font-size: 10px; font-weight: 650; }
.build-results-table-wrap { max-height: 230px; overflow: auto; border-top: 1px solid var(--slate-200); }
.build-board table { width: 100%; border-collapse: collapse; font-size: 12px; }
.build-board th, .build-board td { padding: 7px 10px; border-bottom: 1px solid #eef2f7; text-align: left; white-space: nowrap; }
.build-board th { position: sticky; top: 0; z-index: 1; background: var(--slate-50); color: var(--slate-500); font-size: 10.5px; text-transform: uppercase; }
.build-no-results { padding: 20px 14px; border-top: 1px solid var(--slate-200); color: var(--slate-500); font-size: 12.5px; }

/* "What each condition measured" — a plain <table> with no layout rules of its own let the
   Condition and Test prose run straight into each other with nothing to tell them apart. */
.build-condition-table { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: 12px; }
.build-condition-table col.is-condition { width: 34%; }
.build-condition-table col.is-test { width: 30%; }
.build-condition-table col.is-figure { width: 12%; }
.build-condition-table th, .build-condition-table td {
  padding: 8px 12px; border-bottom: 1px solid #eef2f7; text-align: left; vertical-align: top;
  white-space: normal; overflow-wrap: break-word; line-height: 1.4;
}
.build-condition-table th { position: sticky; top: 0; z-index: 1; background: var(--slate-50); color: var(--slate-500);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; }
.build-condition-table td:first-child { color: var(--slate-800); font-weight: 600; border-right: 1px solid var(--slate-100); }
.build-condition-table td:nth-child(2) { border-right: 1px solid var(--slate-100); color: var(--slate-600); }
.build-condition-table td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.build-condition-table th:nth-child(n+3) { text-align: right; }
.build-condition-op { color: #7c3aed; font-weight: 650; }
.build-inspector textarea.input { resize: vertical; line-height: 1.45; }
.build-model-notes textarea.input { width: 100%; color: var(--slate-700); font: 12px/1.5 Inter, sans-serif; }
.build-placeholder { margin-top: 18px; padding: 12px; border: 1px dashed var(--slate-300); border-radius: 9px; background: var(--slate-50); }
.build-placeholder strong { color: var(--slate-700); font-size: 11.5px; }
.build-placeholder p { margin: 5px 0 0; color: var(--slate-500); font-size: 10.5px; line-height: 1.5; }
.build-empty-inspector { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-tertiary); }
.build-empty-inspector span { font-size: 30px; color: var(--slate-300); }
.build-empty-inspector strong { margin-top: 8px; color: var(--slate-600); font-size: 13px; }
.build-empty-inspector p { max-width: 190px; margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; }
.build-model-notes { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--slate-200); }
.build-model-notes > summary { color: var(--slate-600); font: 650 11.5px Inter,sans-serif; cursor: pointer; }
.build-model-notes > summary:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.build-model-notes > textarea.input { margin-top: 9px; }
@media (max-width: 1100px) {
  .build-workspace { grid-template-columns: 230px minmax(380px,1fr) 250px; }
  /* Nearly aligned with the narrower library column: the 16 px short of it are what lets
     the compact Design toolbar keep every action on the row at 1024 px. */
  .build-identity { width: 184px; max-width: 184px; }
}
@media (max-width: 860px) { .build-workspace { grid-template-columns: 210px minmax(360px,1fr); } .build-inspector { display: none; } }
@media (max-width: 1180px) { .build-tool { padding: 0 8px; } }
@media (max-width: 640px) { .build-workspace { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .build-library { max-height: 180px; border-right: 0; border-bottom: 1px solid var(--slate-200); } .build-library-group { display: inline-block; vertical-align: top; width: 220px; margin-right: 8px; } }

/* Ports and node body ------------------------------------------------------ */
.build-node-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build-node.is-design-only { border-style: dashed; background: #fcfcfd; }
.build-node-ports { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 8px 6px; }
.build-node-ports ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.build-node-ports ul:last-child { align-items: flex-end; }
.build-port { display: flex; align-items: center; gap: 5px; color: var(--slate-500); font-size: 8.5px; font-weight: 650; letter-spacing: .02em; }
.build-port-out { flex-direction: row-reverse; }
/* A port's dot is coloured by the kind it carries, so an edge visibly joins two dots of
   one colour. The kind rules used to set the background directly and lost to the node-accent
   rule above on specificity, so every dot on a node wore the node's colour and an Alert
   condition output looked like an Alerts input. The colours mirror PORT_KINDS in
   backend/model_components.py, which the info dialog and the library filter draw from. */
.build-handle-rows { --port-color: #2563eb; }
.build-handle-customers { --port-color: #0891b2; }
.build-handle-metric { --port-color: #7c3aed; }
.build-handle-number { --port-color: var(--slate-500); }
.build-handle-condition { --port-color: #d97706; }
.build-handle-alert { --port-color: #059669; }
.build-handle-policy { --port-color: #4f46e5; }
.build-handle-evidence { --port-color: #b45309; }
.build-node .react-flow__handle.build-handle { position: relative; width: 9px; height: 9px; min-width: 9px; border: 2px solid #fff; border-radius: 50%;
  background: var(--port-color, var(--node-accent)); color: var(--port-color, var(--node-accent)); box-shadow: 0 0 0 1px currentColor; }
/* The states come after the kind colour so a missing input still pulses red. */
.build-port.is-required-missing { color: #b91c1c; }
.build-port.is-required-missing .build-handle { background: #ef4444; animation: build-port-pulse 1.3s ease-in-out infinite; }
.build-port.is-compatible { color: #047857; font-weight: 800; }
.build-port.is-compatible .build-handle { box-shadow: 0 0 0 4px rgba(16,185,129,.22); }
/* An output the component is complete without (the Alert output's alerts, read only by an
   AI assessment): hollow until something takes it, so it reads as an offer. */
.build-port.is-optional .build-handle { background: #fff; }
.build-port.is-optional { color: var(--slate-400); }
.build-port.is-incompatible { opacity: .28; }
@keyframes build-port-pulse { 50% { box-shadow: 0 0 0 4px rgba(239,68,68,.18); } }

/* ── The AI first read, on the alert board ────────────────────────────────── */
/* A suggestion beside a detection, not a verdict on it: the chip states the reading
   and the reason sits under it in the body colour, so the row does not read as though
   something has already been decided. */
/* The alert table sets white-space: nowrap on its cells so the numeric columns stay on
   one line. A sentence has to opt back out of that or it runs the width of the table. */
.build-assessment {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 210px; white-space: normal;
}
.build-assessment-chip { cursor: default; }
.build-assessment-chip.is-clear { border-color: #a5f3fc; background: #ecfeff; color: #0e7490; }
.build-assessment-chip.is-investigate { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.build-assessment-chip.is-insufficient { border-color: var(--line); background: var(--slate-50); color: var(--ink-3); }
.build-assessment-confidence { color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
/* Two lines and a tooltip rather than the whole paragraph: a first read is a pointer
   to the alert worth opening, and a reason long enough to double the row height stops
   the queue being scannable, which is the only thing it was for. */
.build-alert-table .build-assessment-why {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
  margin: 0; max-width: 210px; overflow: hidden;
  color: var(--ink-3); font-size: 11px; line-height: 1.45;
  white-space: normal; cursor: help;
}
.build-assessment-none { color: var(--ink-faint); }

/* ── Choosing how much to spend, at the gate ──────────────────────────────── */
/* The number is the decision, so it sits on its own line at the size of one, with the
   consequence of changing it directly underneath rather than in a tooltip. */
.build-assessment-gate { max-width: 460px; }
.build-gate-choice {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 4px 0 2px; color: var(--ink-2); font-size: 13px;
}
.build-gate-choice input {
  width: 92px; flex: none;
  text-align: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.build-gate-consequence { margin: 0; color: var(--ink-3); font-size: 11.5px; line-height: 1.5; }
.build-scope-inspector { margin: 0 0 14px; padding: 10px 11px; border: 1px solid #ccfbf1; border-radius: 9px; background: #f0fdfa; }
.build-scope-rel { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--slate-500); font-size: 11px; }
.build-scope-rel span { color: var(--text-tertiary); font-size: 10px; }
.build-anomaly-inspector { margin: 0 0 14px; padding: 10px 11px; border: 1px solid #ddd6fe; border-radius: 9px; background: #f5f3ff; }
.build-anomaly-io { display: grid; gap: 6px; margin: 0 0 8px; }
.build-anomaly-io > div { display: grid; grid-template-columns: 118px 1fr; gap: 8px; align-items: baseline; }
.build-anomaly-io dt { color: #6d28d9; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.build-anomaly-io dd { margin: 0; color: #4c1d95; font-size: 12px; font-weight: 650; }
.build-anomaly-features { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; }
.build-anomaly-features li { display: flex; flex-direction: column; gap: 1px; color: #4c1d95; font-size: 12px; }
.build-anomaly-features strong { font-weight: 700; }
.build-anomaly-features span { color: #7c3aed; font-size: 10.5px; }
/* The population sits a shade back from the calculation above it: which rows a measure
   reads is the answer to a question you only ask once, not part of its name. */
.build-anomaly-population { color: #a78bfa !important; font-size: 10px !important; letter-spacing: .01em; }
.build-anomaly-empty, .build-anomaly-note { margin: 0; color: var(--slate-500); font-size: 11px; line-height: 1.45; }
.build-anomaly-empty { margin-bottom: 8px; }
/* A rule, not a box: side padding on a container inset every field inside it by its own
   padding, so the advanced settings ended 11px short of every field above them. */
.build-advanced { margin: 2px 0 13px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--slate-200); background: transparent; }
.build-advanced summary { cursor: pointer; color: var(--slate-600); font-size: 11.5px; font-weight: 650; }
.build-advanced summary:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.build-advanced[open] summary { margin-bottom: 2px; }
.build-advanced .build-param { margin-top: 10px; }
.build-scope-inspector { margin: 0 0 14px; padding: 10px 11px; border: 1px solid #ccfbf1; border-radius: 9px; background: #f0fdfa; }
.build-scope-rel { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--slate-500); font-size: 11px; }
.build-scope-rel span { color: var(--text-tertiary); font-size: 10px; }
.build-node-status { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.build-node-flag { padding: 2px 5px; border-radius: 4px; background: #fef3c7; color: #b45309; }

/* Containers --------------------------------------------------------------- */
.build-group { width: 100%; height: 100%; border: 1px dashed var(--slate-300); border-radius: 14px; background: rgba(241,245,249,.55); }
.build-group.is-selected { border-color: var(--accent-primary-bright); background: rgba(238,242,255,.6); }
.build-group-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.build-group-stage { padding: 3px 7px; border-radius: 999px; background: var(--slate-200); color: var(--slate-600); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.build-group-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--slate-700); font-size: 12px; font-weight: 700; }
.build-group-note { padding: 0 12px 10px; color: var(--slate-500); font-size: 9px; line-height: 1.5; }
/* Collapsed: the frame stands in for what it holds, at the width of an ordinary
   component, listing the components hidden behind it. */
.build-group.is-collapsed {
  width: 100%; height: auto; border-style: solid; border-color: var(--accent-primary-200);
  background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.build-group.is-collapsed.is-selected { border-color: var(--accent-primary-bright); background: #fff; }
.build-group-toggle {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 5px; background: transparent; color: var(--slate-500);
  font-size: 10px; line-height: 1; cursor: pointer; transition: background .12s, color .12s;
}
.build-group-toggle:hover { background: var(--accent-primary-50); color: var(--accent-primary-dark); }
.build-group-contents { padding: 0 12px 10px; }
.build-group-contents ol {
  margin: 0; padding: 0; list-style: none; display: grid; gap: 3px;
}
/* Two lines before anything is cut: most component names fit, and the ones that do not
   are the descriptive ones worth reading. */
.build-group-contents li {
  padding: 4px 7px; border-radius: 6px; background: var(--slate-50); color: var(--slate-600);
  font-size: 9.5px; font-weight: 600; line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.build-group-empty { margin: 0; color: var(--slate-400); font-size: 9.5px; font-style: italic; }
.build-group-count {
  display: block; margin-top: 7px; color: var(--slate-400); font-size: 8.5px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
/* The frame's own ports, which only exist while it is standing in for its contents. */
.build-group-handle-port { border-color: var(--accent-primary-300); background: #fff; }
/* An edge drawn to a collapsed frame stands for one or more real connections. */
.react-flow__edge.is-collapsed-edge .react-flow__edge-path {
  stroke: var(--accent-primary-300); stroke-dasharray: 5 4;
}

.build-group-line { border-color: var(--accent-primary-bright); }
.build-group-handle { border-color: var(--accent-primary-bright); background: #fff; }

/* Inspector parameters ----------------------------------------------------- */
.build-param { display: block; margin-bottom: 13px; }
.build-param-label { display: block; color: var(--slate-600); font-size: 11.5px; font-weight: 650; }
.build-param .input { width: 100%; margin-top: 5px; font-size: 12.5px; }
.build-param-code { min-height: 58px; resize: vertical; background: var(--slate-900); color: var(--accent-primary-100); border-color: var(--slate-800); font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace !important; }
.build-param-help { display: block; margin-top: 4px; color: var(--text-tertiary); font-size: 10.5px; line-height: 1.45; }
/* A boolean puts its box beside its own label rather than above an input that is not
   there. Without a branch of its own it fell through to the number field, where React
   writes value="false" and the browser renders nothing at all. */
.build-param.is-boolean .build-param-label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.build-param.is-boolean input[type="checkbox"] { width: 13px; height: 13px; margin: 0; accent-color: var(--accent-primary); cursor: pointer; }
.build-chip-group { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.build-chip { padding: 4px 8px; border: 1px solid var(--slate-200); border-radius: 999px; background: #fff; color: var(--slate-500); font: 650 10.5px Inter,sans-serif; cursor: pointer; }
.build-chip:hover { border-color: var(--accent-primary-300); }
.build-chip.is-on { border-color: var(--accent-primary); background: var(--accent-primary-50); color: var(--accent-primary-dark); }
.build-rule-remove { width: 24px; height: 30px; border: 1px solid var(--slate-200); border-radius: 7px; background: #fff; color: var(--text-tertiary); font-size: 16px; cursor: pointer; }
.build-rule-remove:hover { border-color: #fecaca; background: #fff1f2; color: #dc2626; }
.build-rule-add { margin-top: 8px; padding: 6px 9px; border: 1px dashed var(--accent-primary-300); border-radius: 7px; background: #f8faff; color: var(--accent-primary-dark); font: 700 11px Inter,sans-serif; cursor: pointer; }
.build-rule-add:hover { background: var(--accent-primary-50); }
.build-value-combobox { position: relative; min-width: 0; }
.build-value-combobox .input { width: 100%; box-sizing: border-box; }
.build-value-options { position: absolute; z-index: 30; top: calc(100% + 3px); right: 0; left: 0; max-height: 180px; overflow: auto; padding: 4px; border: 1px solid var(--accent-primary-200); border-radius: 7px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.16); }
.build-value-options button { display: block; width: 100%; padding: 6px 7px; overflow: hidden; border: 0; border-radius: 4px; background: transparent; color: var(--slate-700); font: 500 11px Inter,sans-serif; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.build-value-options button:hover { background: var(--accent-primary-50); color: var(--accent-primary-deep); }
.build-inspector-edit { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px 10px; border: 1px solid var(--accent-primary-200); border-radius: 8px; background: var(--accent-primary-50); color: var(--accent-primary-dark); font: 700 11.5px Inter,sans-serif; cursor: pointer; }
.build-inspector-edit:hover { border-color: var(--accent-primary-400); background: var(--accent-primary-100); }
.build-inspector-fields { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--slate-200); }
.build-inspector-fields .build-param { margin-bottom: 12px; }
.build-inspector-fields .build-chip-group { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.build-inspector-fields .build-config-note { margin-top: 10px; }
.build-inspector-fields .build-param-code { min-height: 90px; font-size: 11.5px; }
/* Above .app-header (200), matching .modal-overlay (300) in styles.css. A dialog
   centred in the whole viewport but painted under the app header loses its own
   title and close button to it whenever the window is short. */
.build-editor-backdrop { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(15,23,42,.45); backdrop-filter: blur(5px); }
.build-editor-modal { width: min(940px, calc(100vw - 56px)); max-height: min(780px, calc(100vh - 56px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--accent-primary-200); border-radius: 15px; background: #fff; box-shadow: 0 28px 75px rgba(15,23,42,.30); }
.build-editor-modal.is-query { width: min(1140px, calc(100vw - 40px)); max-height: min(860px, calc(100vh - 36px)); }
.build-editor-modal.is-compact { width: min(740px, calc(100vw - 56px)); }
.build-editor-modal.is-compact .build-editor-body.is-split { grid-template-columns: minmax(0, 1fr) 256px; gap: 18px; }
.build-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--slate-200); background: linear-gradient(120deg, color-mix(in srgb, var(--editor-accent) 10%, white), #fff 58%); }
.build-editor-head > div { display: flex; gap: 11px; }
.build-editor-head > div > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--editor-accent) 14%, white); color: var(--editor-accent); font-size: 19px; }
.build-editor-head strong { color: var(--slate-900); font-size: 18px; }
.build-editor-head p { margin: 4px 0 0; color: var(--slate-500); font-size: 13px; line-height: 1.4; }
/* The body is a <fieldset>, and a flex item defaults to min-height:auto — so it
   refuses to shrink below its content and pushes the footer out over it instead of
   scrolling. min-height:0 is what lets it scroll inside the modal. */
/* Two columns rather than a full-width banner over a half-width form: the settings are
   the work, the specification is the reference, and neither leaves the other a column
   of empty white. The rail is sticky, so the facts stay put while the fields scroll. */
.build-editor-body { flex: 1 1 auto; min-height: 0; min-inline-size: 0; overflow: auto; padding: 18px 20px; font-size: 13px; }
.build-editor-body.is-split { display: grid; grid-template-columns: minmax(0, 1fr) 292px; align-items: start; gap: 22px; }
.build-editor-form { min-width: 0; }
.build-editor-foot { flex: 0 0 auto; }
.build-editor-body .build-param { max-width: 100%; }
.build-editor-body .build-param > .input { max-width: 460px; }
.build-editor-body.is-split .build-param > .input { max-width: none; }
.build-editor-body.is-split .build-param > textarea.input { min-height: 76px; }
/* Below the width that fits a column beside the fields, the specification goes under
   them. Declared after the two-column rules it overrides, not before them. */
@media (max-width: 900px) {
  .build-editor-body.is-split,
  .build-editor-modal.is-compact .build-editor-body.is-split { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, there is nothing left to stick to. */
  .build-editor-body.is-split > .build-spec-rail { position: static; }
}
.build-editor-body .build-param-label { font-size: 13px; }
.build-editor-body .build-param .input { font-size: 14px; }
.build-editor-body .build-param-help { font-size: 12px; }
.build-editor-body .build-config-note { font-size: 12px; }
.build-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--slate-200); background: var(--slate-50); color: var(--slate-500); font-size: 12px; }
.build-editor-foot .build-run { height: 32px; }
.build-editor-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.build-editor-cancel { height: 32px; padding: 0 14px; border: 1px solid var(--slate-200); border-radius: 9px; background: #fff; color: var(--slate-600); font: 650 11.5px Inter, sans-serif; cursor: pointer; }
.build-editor-cancel:hover { border-color: var(--slate-300); background: var(--slate-50); color: var(--slate-900); }
.build-port-summary { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.build-port-tag { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 10%, white); font-size: 8.5px; font-weight: 700; }
.build-loading { display: grid; place-items: center; height: 60vh; color: var(--slate-500); font-size: 12px; }

/* Model configuration ------------------------------------------------------ */
.build-config-intro { margin: 4px 0 12px; color: var(--slate-500); font-size: 10px; }
.build-config-wide { grid-column: 1 / -1; }

/* Collapsible panels ------------------------------------------------------- */
.build-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.build-panel-toggle { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--slate-200); border-radius: 7px; background: #fff; color: var(--text-tertiary); font-size: 11px; cursor: pointer; }
.build-panel-toggle:hover { border-color: var(--accent-primary-300); color: var(--accent-primary-dark); background: var(--accent-primary-50); }
.build-rail { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0; height: 100%; min-height: 0; background: #fff; border-right: 1px solid var(--slate-200); cursor: pointer; overflow: hidden; }
.build-workspace.inspector-collapsed > .build-rail:last-child { border-right: 0; border-left: 1px solid var(--slate-200); }
.build-rail:hover { background: var(--slate-50); }
.build-rail-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--slate-200); border-radius: 7px; color: var(--slate-500); font-size: 11px; }
.build-rail:hover .build-rail-icon { border-color: var(--accent-primary-300); color: var(--accent-primary-dark); background: var(--accent-primary-50); }
.build-rail-label { color: var(--text-tertiary); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; writing-mode: vertical-rl; }

/* Run dock and console ----------------------------------------------------- */
.build-dock { flex: none; min-width: 0; border-top: 1px solid var(--slate-200); background: #fff; }
/* The body eases open and shut over the side panels' own .18s; hidden once shut, so its
   contents leave the tab order; never eased while being dragged. */
.build-dock-body { overflow: hidden; transition: height .18s ease, visibility 0s linear .18s; visibility: hidden; }
.build-dock-body.is-open { visibility: visible; transition: height .18s ease, visibility 0s; }
.build-dock-body.is-dragging { transition: none; }
@media (prefers-reduced-motion: reduce) { .build-dock-body, .build-dock-body.is-open { transition: none; } }
.build-dock-bar { display: flex; align-items: center; gap: 6px; padding: 5px 12px; overflow-x: auto; scrollbar-width: none; }
.build-dock-bar::-webkit-scrollbar { display: none; }
.build-dock-bar .build-tool { border: 1px solid #e8edf5; background: var(--slate-50); }
/* The Activity list: the interface's own type, a time, and a dot that is coloured only
   where a line went right or wrong — not a monospace log with a level column. */
.build-console { height: 168px; overflow-y: auto; padding: 8px 16px 12px; border-top: 1px solid #eef2f7; background: #fbfdff; font-size: 13px; line-height: 1.55; }
.build-console-line { display: grid; grid-template-columns: 44px 8px minmax(0,1fr); gap: 10px; padding: 3px 0; }
.build-console-time { color: var(--text-tertiary); font-variant-numeric: tabular-nums; font-size: 12px; }
.build-console-level { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-300); align-self: center; }
.build-console-text { color: var(--slate-600); word-break: break-word; }
.build-console-line.is-success .build-console-level { background: #047857; }
.build-console-line.is-success .build-console-text { color: #047857; }
.build-console-line.is-warn .build-console-level { background: #b45309; }
.build-console-line.is-warn .build-console-text { color: #b45309; }
.build-console-line.is-error .build-console-level { background: #b91c1c; }
.build-console-line.is-error .build-console-text { color: #b91c1c; }
.build-console-empty { color: var(--text-tertiary); }
.build-count { min-width: 16px; padding: 1px 4px; border-radius: 999px; background: var(--slate-200); color: var(--slate-500); font-size: 10px; text-align: center; }
.build-count.is-error { background: #fee2e2; color: #b91c1c; }
.build-issues { height: 168px; overflow-y: auto; padding: 8px 16px 12px; border-top: 1px solid #eef2f7; background: #fbfdff; }
.build-issue { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 7px 6px; border: 0; border-bottom: 1px solid #eef2f7; background: transparent; color: var(--slate-600); font: 11.5px/1.4 Inter,sans-serif; text-align: left; cursor: pointer; }
.build-issue:disabled { cursor: default; }
.build-issue-icon { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #fef3c7; color: #b45309; font-size: 10px; font-weight: 800; }
.build-issue.is-error .build-issue-icon { background: #fee2e2; color: #b91c1c; }
.build-issue strong { display: inline-block; width: 52px; margin-right: 4px; color: #b45309; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.build-issue.is-error strong { color: #b91c1c; }
.build-issue em { color: var(--accent-primary); font-size: 10px; font-style: normal; font-weight: 700; }
.build-issues-empty { padding: 22px 6px; color: #047857; font-size: 11.5px; }

/* Simulated alert board ---------------------------------------------------- */
.build-board { position: absolute; z-index: 9; inset: 14px 18px 14px 18px; display: flex; flex-direction: column; border: 1px solid var(--accent-primary-200); border-radius: 14px; background: #fff; box-shadow: 0 18px 45px rgba(15,23,42,.18); overflow: hidden; }
.build-board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #eef2f7; }
.build-board-head strong { display: block; color: #1e1b4b; font-size: 15px; }
.build-board-head span { display: block; margin-top: 3px; color: var(--slate-500); font-size: 11.5px; }
.build-board-actions { display: flex; align-items: center; gap: 6px; }
.build-board-actions .build-tool { border: 1px solid #e8edf5; background: var(--slate-50); text-decoration: none; }
.build-alert-ref { color: var(--text-tertiary); font-size: 10px; font-weight: 750; letter-spacing: .05em; }
.build-alert-risk { padding: 2px 7px; border-radius: 999px; background: var(--slate-100); color: var(--slate-700); font-size: 11px; font-weight: 750; }
.build-alert-table-wrap { flex: 1; min-height: 0; max-height: none; background: #fff; }
.build-alert-table tbody tr:hover { background: var(--slate-50); }
.build-alert-table td { vertical-align: top; }
.build-alert-table td:nth-child(6) { min-width: 260px; white-space: normal; }
.build-alert-table-customer { color: var(--slate-900); }
.build-alert-signals { display: flex; flex-direction: column; gap: 3px; color: var(--slate-600); line-height: 1.35; }
.build-alert-signals strong { color: var(--slate-800); }
.build-alert-signals small { margin-left: 3px; color: var(--text-tertiary); font-size: 10px; white-space: nowrap; }
.build-alert-risk.is-critical { background: #fee2e2; color: #b91c1c; }
.build-alert-risk.is-high { background: #ffedd5; color: #c2410c; }
.build-alert-risk.is-medium { background: #fef3c7; color: #b45309; }
.build-alert-risk.is-low { background: #cffafe; color: #0e7490; }
.build-dock-bar a.build-tool { text-decoration: none; }

/* The dock's height, dragged on its top edge (the SQL tab wants more room than Activity). */
.build-dock-handle { display: grid; place-items: center; width: 100%; height: 8px; margin: -1px 0 -2px; padding: 0; border: 0; background: transparent; cursor: row-resize; touch-action: none; }
.build-dock-handle::before { content: ''; width: 36px; height: 3px; border-radius: 2px; background: var(--slate-300); transition: background .12s; }
.build-dock-handle:hover::before, .build-dock-handle:focus-visible::before, .build-dock-handle.is-dragging::before { background: var(--accent-primary); }
.build-dock-handle:focus-visible { outline: none; }

/* SQL tab ---------------------------------------------------------------------
   The saved model as one read-only query. Chrome in the dock's own type (Inter, 11-12px);
   the query itself in Query population's editor, so the two tabs read the same. */
.build-sql-pane { display: flex; flex-direction: column; min-height: 0; }
.build-sql { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid #eef2f7; background: #fbfdff; }
.build-sql-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 14px; color: var(--slate-600); font: 500 11.5px/1.4 Inter, sans-serif; }
.build-sql-version { color: var(--slate-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.build-sql-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 9px; border-radius: 999px; font: 700 10.5px Inter, sans-serif; white-space: nowrap; }
.build-sql-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.build-sql-chip.is-good { background: #ecfdf5; color: #047857; }
.build-sql-chip.is-stop { background: #fef3c7; color: #92400e; }
.build-sql-btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--slate-200); border-radius: 7px; background: #fff; color: var(--slate-700); font: 600 11px Inter, sans-serif; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.build-sql-btn:hover:not(:disabled) { border-color: var(--slate-300); color: var(--slate-900); }
.build-sql-btn.is-primary { border-color: var(--accent-primary); background: var(--accent-primary); color: #fff; box-shadow: 0 1px 3px rgba(var(--accent-primary-rgb), .24); }
.build-sql-btn.is-primary:hover:not(:disabled) { background: var(--accent-primary-dark); border-color: var(--accent-primary-dark); color: #fff; }
.build-sql-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.build-sql-btn:focus-visible { outline: 2px solid var(--accent-primary-bright); outline-offset: 1px; }
.build-sql-banner { margin: 0 14px 7px; padding: 6px 10px; border: 1px solid #c7dfe7; border-radius: 7px; background: #eef6f8; color: var(--slate-600); font: 500 11.5px/1.45 Inter, sans-serif; }
.build-sql-banner.is-warn { border-color: #f6d58b; background: #fef3c7; color: #92400e; font-weight: 600; }
.build-sql-params { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 14px 7px; }
.build-sql-params-label { margin-right: 2px; color: var(--text-tertiary); font: 700 9.5px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.build-sql-param { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px 0 3px; border: 1px solid var(--slate-200); border-radius: 6px; background: #fff; color: var(--slate-900); font: 500 11px Inter, sans-serif; }
.build-sql-param code { padding: 1px 4px; border-radius: 4px; background: var(--accent-primary-50); color: var(--accent-primary); font: 500 10.5px var(--font-mono); }
.build-sql-param b { font-weight: 600; font-variant-numeric: tabular-nums; }
.build-sql-more { height: 22px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--accent-primary); font: 600 11px Inter, sans-serif; cursor: pointer; }
.build-sql-more:hover { background: var(--accent-primary-50); }
.build-sql-more:focus-visible { outline: 2px solid var(--accent-primary-bright); outline-offset: 1px; }
.build-sql-note { margin: 0 14px 7px; color: var(--slate-500); font: 500 11.5px/1.4 Inter, sans-serif; }
.build-sql-editor { flex: 1 1 auto; min-height: 0; margin: 0 14px; overflow: hidden; border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; }
.build-sql-foot { margin: 6px 14px 8px; color: var(--text-tertiary); font: 500 10.5px/1.4 Inter, sans-serif; }
.build-sql.is-empty, .build-sql.is-loading { gap: 10px; padding: 16px; align-items: flex-start; }
.build-sql-empty { margin: 0; color: var(--slate-500); font: 500 12px/1.5 Inter, sans-serif; }
.build-sql-skeleton { display: grid; gap: 8px; width: min(640px, 100%); }
.build-sql-skeleton i { height: 11px; border-radius: 4px; background: linear-gradient(90deg, var(--slate-100), var(--slate-200), var(--slate-100)); background-size: 200% 100%; animation: build-sql-shimmer 1.4s ease-in-out infinite; }
.build-sql-skeleton i:nth-child(odd) { width: 86%; }
@keyframes build-sql-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .build-sql-skeleton i { animation: none; } }
.build-sql.is-unavailable { overflow-y: auto; }
.build-sql-card { display: grid; gap: 8px; max-width: 760px; margin: 0 14px 12px; padding: 12px 14px; border: 1px solid var(--slate-200); border-left: 3px solid var(--slate-300); border-radius: 10px; background: #fff; color: var(--slate-600); font: 500 12px/1.5 Inter, sans-serif; }
.build-sql-card.is-error { border-left-color: #dc2626; }
.build-sql-card strong { color: var(--slate-900); font-size: 12.5px; font-weight: 650; }
.build-sql-card p { margin: 0; color: var(--slate-500); font-size: 11.5px; }

/* Table tab: what one Data table lists. The dock's own type, as the SQL tab; the rows in the
   results tables' style, numbers on the right where they line up. */
.build-table-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid #eef2f7; background: #fbfdff; }
.build-table-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 14px; color: var(--slate-600); font: 500 11.5px/1.4 Inter, sans-serif; }
.build-table-name { color: var(--slate-900); font-weight: 650; }
.build-table-pick { height: 26px; padding: 0 8px; border: 1px solid var(--slate-200); border-radius: 7px; background: #fff; color: var(--slate-900); font: 600 11.5px Inter, sans-serif; }
.build-table-summary { color: var(--slate-500); font-variant-numeric: tabular-nums; }
.build-sql-btn.is-active { border-color: var(--accent-primary); color: var(--accent-primary); background: var(--accent-primary-50); }
.build-table-note { margin: 0 14px 7px; color: var(--slate-500); font: 500 11.5px/1.45 Inter, sans-serif; }
.build-table-panel .build-sql { border-top: 0; }
.build-table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; margin: 0 14px; border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; }
.build-data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.build-data-table th, .build-data-table td { padding: 6px 10px; border-bottom: 1px solid #eef2f7; text-align: left; white-space: nowrap; }
.build-data-table th { position: sticky; top: 0; z-index: 1; background: var(--slate-50); color: var(--slate-500); font-size: 10.5px; text-transform: uppercase; }
.build-data-table .is-number { text-align: right; font-variant-numeric: tabular-nums; }
.build-table-pager { padding: 7px 14px; border-bottom: 0; font-size: 12px; }
.build-table-panel .build-no-results { margin: 0 14px; border: 1px dashed var(--slate-200); border-radius: 8px; background: #fff; }
.build-sql-issue { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 1px solid #fecaca; border-radius: 7px; background: #fef2f2; color: var(--slate-600); font: 500 11.5px/1.4 Inter, sans-serif; text-align: left; cursor: pointer; }
.build-sql-card:not(.is-error) .build-sql-issue { border-color: var(--slate-200); background: var(--slate-50); }
.build-sql-issue:disabled { cursor: default; }
.build-sql-issue em { color: var(--accent-primary); font-style: normal; font-weight: 600; }
.build-sql-issue-mark { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 800; }
.build-sql-card:not(.is-error) .build-sql-issue-mark { background: var(--slate-200); color: var(--slate-600); }

/* Rule builder ------------------------------------------------------------- */
.build-value-options button { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.build-value-options button em { flex: none; color: var(--slate-300); font-style: normal; font-size: 10px; }
.build-value-more { padding: 6px 7px; border-top: 1px solid #eef2f7; color: var(--text-tertiary); font-size: 10px; }
.build-node-edit { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--slate-400); font-size: 11px; cursor: pointer; }
.build-node-edit:hover { background: var(--accent-primary-50); color: var(--accent-primary-dark); }
.build-value-options button.is-highlighted { background: var(--accent-primary-50); color: var(--accent-primary-deep); }
.build-value-options button em { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build-rule-readout { display: grid; gap: 4px; margin: 6px 0 8px; padding: 8px 10px; list-style: none; border: 1px solid #e8edf5; border-radius: 8px; background: var(--slate-50); }
.build-rule-readout li { display: flex; gap: 6px; color: var(--slate-700); font-size: 11.5px; line-height: 1.45; }
.build-rule-readout li span { flex: none; color: var(--text-tertiary); font-weight: 700; }
.build-rule-readout li.is-empty { color: var(--text-tertiary); }
.build-inspector-edit.is-inline { width: 100%; }

/* Schema-driven query builder --------------------------------------------- */
.build-editor-modal.is-query .build-editor-body .qb-builder { max-width: none; }

/* Shared component facts. The same object is rendered twice: as dense rows above the
   Inspector's controls, and as a reference column beside the expanded editor's fields.
   Only the density differs, so the two surfaces cannot drift apart. */
.build-fact-rows { margin: 0; }
.build-fact-rows > div { display: grid; grid-template-columns: minmax(64px, .8fr) minmax(0, 1.2fr); gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--slate-100); }
.build-fact-rows > div:last-child { border-bottom: 0; }
.build-fact-rows dt { color: var(--slate-500); font-size: 10.5px; line-height: 1.4; }
.build-fact-rows dd { margin: 0; color: var(--slate-800); font-size: 11px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.build-fact-rows > div.is-missing dd { color: #b91c1c; }

/* Inspector: identity, then the facts that change, then the controls. */
.build-insp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.build-insp-icon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--node-accent, var(--accent-primary-bright)) 12%, white); color: var(--node-accent, var(--accent-primary-bright)); font-size: 12px; }
.build-insp-kind { flex: 1; min-width: 0; overflow: hidden; color: var(--text-tertiary); font: 800 9px Inter,sans-serif; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.build-inspector .build-insp-name { width: 100%; margin: 0; color: var(--slate-900); font: 750 13px Inter,sans-serif; text-overflow: ellipsis; }
.build-insp-expand { flex: none; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 1px solid var(--accent-primary-200); border-radius: 6px; background: var(--accent-primary-50); color: var(--accent-primary-dark); font-size: 11px; cursor: pointer; }
.build-insp-expand:hover { border-color: var(--accent-primary-400); background: var(--accent-primary-100); }
.build-insp-expand:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }

.build-glance { margin: 0 0 14px; padding: 10px 11px; border: 1px solid var(--slate-200); border-radius: 10px; background: var(--slate-50); }
.build-glance-lead { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--slate-200); }
.build-glance-lead strong { display: block; color: #172554; font-size: 12px; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere; }
.build-glance .build-spec-eyebrow { margin-bottom: 3px; }

.build-insp-about { margin: 10px 0 14px; padding: 9px 11px; border: 1px solid var(--slate-200); border-radius: 10px; background: #fff; }
.build-insp-about > summary { color: var(--slate-600); font: 650 11.5px Inter,sans-serif; cursor: pointer; }
.build-insp-about > summary:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.build-insp-about-lead { margin: 9px 0 11px; color: var(--slate-600); font-size: 11px; line-height: 1.5; }
.build-insp-about-note { margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed var(--slate-200); color: var(--slate-500); font-size: 10.5px; line-height: 1.5; }

/* Expanded editor: the fields get the width, the specification stands beside them. */
.build-spec-rail { min-width: 0; align-self: start; position: sticky; top: 0; display: grid; gap: 14px; padding: 14px; border: 1px solid var(--slate-200); border-radius: 12px; background: #fbfcff; }
.build-spec-section { min-width: 0; padding-top: 12px; border-top: 1px solid #e5e7eb; }
.build-spec-rail > .build-spec-section:first-child { padding-top: 0; border-top: 0; }
.build-spec-eyebrow { display: block; margin-bottom: 5px; color: var(--slate-500); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.build-spec-section strong { display: block; color: var(--slate-800); font-size: 13px; }
.build-spec-section p { margin: 0; color: var(--slate-500); font-size: 11.5px; line-height: 1.5; }
.build-spec-calculation { color: #172554 !important; font-weight: 700; }
.build-spec-section small { display: block; margin-top: 5px; color: var(--slate-500); font-size: 10px; }
.build-spec-empty { color: var(--text-tertiary) !important; }
.build-explore-action { display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 12px; padding: 8px 10px; border: 1px solid var(--accent-primary-200); border-radius: 7px; background: var(--accent-primary-50); color: var(--accent-primary-dark); font: 750 11px Inter,sans-serif; text-align: left; cursor: pointer; }
.build-explore-action > span:last-child { margin-left: auto; }
.build-explore-action:hover { border-color: var(--accent-primary-400); background: var(--accent-primary-100); }
.build-explore-action:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.build-editor-modal.is-query .qb-builder .input { max-width: none; }
.qb-builder { padding: 14px; border: 1px solid var(--accent-primary-100); border-radius: 10px; background: #fbfdff; }
.qb-conditions { margin-top: 0; }
.qb-conditions-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.qb-conditions-head .build-param-label { margin: 0; }
.qb-conditions-head .qb-actions { margin: 0; }
.qb-list { display: grid; gap: 8px; margin-top: 8px; }
.qb-list.is-grouped { gap: 6px; margin-top: 6px; padding: 8px 8px 8px 10px; border-left: 2px solid var(--accent-primary-100); border-radius: 0 8px 8px 0; background: #fff; }
.qb-join { display: flex; align-items: center; min-height: 22px; }
.qb-builder .qb-join-select {
  display: inline-block;
  width: auto;
  min-width: 4.4rem;
  max-width: none;
  height: 24px;
  margin: 0;
  padding: 0 22px 0 8px;
  flex: 0 0 auto;
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  background: #fff;
  color: var(--slate-500);
  font: 700 10px Inter, sans-serif;
  letter-spacing: .04em;
}
.qb-join-select:focus { border-color: var(--accent-primary-300); }
.qb-row { display: grid; grid-template-columns: minmax(180px, 1.45fr) minmax(150px, .95fr) minmax(180px, 1.25fr) 28px; gap: 8px; align-items: start; }
@media (max-width: 720px) {
  .qb-row { grid-template-columns: 1fr; }
  .qb-row .build-rule-remove { justify-self: end; }
}
.qb-row .input { min-width: 0; margin-top: 0; height: 32px; padding: 0 8px; font-size: 12.5px; }
/* These rows set their own padding, which would otherwise run the text under the
   chevron the shared select style draws. */
.qb-row select.input { padding-right: 24px; }
.qb-row .qb-field .input { font-weight: 650; color: var(--slate-900); }
.qb-row .qb-operator { color: var(--slate-600); font-weight: 500; }
.qb-value-cell { min-width: 0; }
.qb-row.is-invalid .qb-field .input,
.qb-row.is-invalid .qb-operator { border-color: #fecaca; }
.qb-row-error { grid-column: 1 / -1; margin: -2px 0 0; color: #b91c1c; font-size: 11px; }
.qb-empty { margin-top: 8px; padding: 18px 16px; border: 1px dashed var(--accent-primary-200); border-radius: 10px; background: #fff; text-align: left; }
.qb-empty strong { display: block; color: var(--slate-700); font-size: 13px; }
.qb-empty p { margin: 4px 0 12px; color: var(--slate-500); font-size: 12.5px; line-height: 1.45; }
.qb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.build-rule-add.is-quiet { border-style: dashed; background: #fff; color: var(--slate-500); }
.build-rule-add.is-quiet:hover { color: var(--accent-primary-dark); background: #f8faff; }
.qb-field-options { min-width: 280px; max-height: min(320px, 45vh); }
.qb-field-heading { padding: 6px 8px 2px; color: var(--slate-500); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.qb-field-option { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qb-field-option strong { color: var(--slate-900); font-size: 12px; font-weight: 650; }
.qb-field-option em { color: var(--slate-500); font-size: 10.5px; font-style: normal; }
.qb-field-options button { align-items: flex-start; overflow: visible; white-space: normal; }
.qb-field-options button em { color: var(--slate-500); max-width: none; }
.qb-range, .qb-relative { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.qb-relative { grid-template-columns: 1fr 1fr; }
.qb-range > span { color: var(--text-tertiary); font-size: 11px; }
.build-value-combobox.is-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; min-height: 32px; padding: 3px 8px; border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; cursor: text; }
.build-value-combobox.is-multi:focus-within { border-color: var(--accent-primary-300); box-shadow: 0 0 0 3px var(--accent-primary-50); }
.qb-row .build-value-combobox.is-multi .input { flex: 1 1 72px; min-width: 72px; width: auto; height: 24px; margin: 0; padding: 0 0 0 2px; border: 0; background: transparent; box-shadow: none; font-size: 12.5px; }
.qb-row .build-value-combobox.is-multi .input:focus { outline: 0; box-shadow: none; }
.qb-multi-item { max-width: 100%; padding: 0; border: 0; background: none; color: var(--slate-900); font: 500 12.5px/1.4 Inter, sans-serif; white-space: nowrap; cursor: pointer; }
.qb-multi-item:hover { color: #b91c1c; }
.qb-multi-sep { margin: 0 4px 0 0; color: var(--text-tertiary); font-size: 12.5px; line-height: 1.4; }
.qb-bool { display: inline-flex; padding: 2px; border: 1px solid var(--slate-200); border-radius: 8px; background: var(--slate-50); }
.qb-bool button { padding: 5px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--slate-500); font: 650 11.5px Inter, sans-serif; cursor: pointer; }
.qb-bool button.is-on { background: #fff; color: var(--accent-primary-dark); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.qb-group { margin: 2px 0; padding: 10px; border: 1px solid var(--slate-200); border-radius: 10px; background: #fff; }
.qb-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.qb-group-label { color: var(--text-tertiary); font-size: 11px; font-weight: 650; }
.qb-group-body { display: grid; gap: 8px; padding-left: 6px; border-left: 2px solid var(--accent-primary-100); }
.qb-group-body.is-grouped { gap: 6px; }
.qb-nested-empty { margin: 0; color: var(--text-tertiary); font-size: 12px; }
.qb-preview { margin-top: 16px; padding: 12px 14px; border: 1px solid #e8edf5; border-radius: 10px; background: #fff; }
.qb-preview-head { color: var(--slate-500); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.qb-preview-copy { margin: 8px 0 0; color: var(--slate-500); font-size: 12.5px; }
.qb-preview-stats { display: grid; gap: 2px; margin-top: 8px; }
.qb-preview-stats strong { color: var(--slate-900); font-size: 16px; }
.qb-preview-stats span { color: var(--slate-500); font-size: 12.5px; }
.qb-preview-stats.is-stale { opacity: .65; }
.qb-preview-toggle { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--accent-primary-dark); font: 650 12px Inter, sans-serif; cursor: pointer; }
.qb-preview-toggle:disabled { color: var(--text-tertiary); cursor: default; }
.qb-preview-table-wrap { margin-top: 10px; max-height: 220px; overflow: auto; border: 1px solid #e8edf5; border-radius: 8px; }
.qb-preview-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.qb-preview-table th, .qb-preview-table td { padding: 6px 8px; border-bottom: 1px solid #eef2f7; text-align: left; white-space: nowrap; }
.qb-preview-table th { position: sticky; top: 0; background: var(--slate-50); color: var(--slate-500); font-size: 10px; text-transform: uppercase; }

.agg-editor { display: grid; gap: 14px; }
.agg-window-row { display: flex; align-items: center; gap: 8px; }
.agg-window-row .input { width: 88px; }
.agg-window-prefix, .agg-window-suffix { color: var(--slate-600); font-size: 13px; font-weight: 600; }
/* The presets are one control, so they span the field width and share it evenly rather
   than trailing off short of the input above them. */
.agg-window-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.agg-window-presets .build-chip { flex: 1 1 auto; text-align: center; }
.agg-calc-row { display: grid; gap: 8px; }
.agg-calc-row.has-field { grid-template-columns: minmax(160px, 0.9fr) minmax(220px, 1.2fr); }
/* The same two controls, stacked, where the column is too narrow to set them side by
   side — the Inspector is 292px and the pair needs 380px before it starts overflowing. */
.build-inspector .agg-calc-row.has-field { grid-template-columns: minmax(0, 1fr); }
.build-inspector .agg-window-row .input { width: 72px; }
.agg-percentile { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.agg-percentile span { color: var(--slate-600); font-size: 12.5px; font-weight: 650; }
.agg-percentile .input { width: 88px; }
.agg-formula { margin-top: 4px; padding: 12px 14px; border: 1px solid #e8edf5; border-radius: 10px; background: var(--slate-50); }
.agg-formula-kicker { color: var(--slate-500); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.agg-formula pre { margin: 8px 0 0; color: var(--slate-900); font: 650 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.agg-warn { color: #b45309 !important; }
.qb-readout { display: grid; gap: 4px; }
.qb-readout-meta { color: var(--slate-500); font-weight: 650; }
@media (max-width: 760px) {
  .qb-row { grid-template-columns: 1fr; }
  .build-rule-remove { width: 32px; }
}
.build-library-controls { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; }
.build-library-search { position: relative; display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; }
.build-library-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--slate-700); font: 500 12px Inter, sans-serif; }
.build-library-filter { flex: 0 0 84px; width: 84px; min-width: 0; height: 30px; padding: 0 4px; border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; color: var(--slate-500); font: 600 11px Inter, sans-serif; cursor: pointer; }
.build-library-filter:focus-visible, .build-library-search:focus-within { border-color: var(--accent-primary-300); }
.build-library-empty { margin-top: 18px; padding: 18px 12px; border: 1px dashed var(--slate-200); border-radius: 10px; text-align: center; }
.build-library-search .build-icon { width: 12px; height: 12px; color: var(--slate-300); }
.build-library-search:focus-within { border-color: var(--accent-primary-300); box-shadow: 0 0 0 3px var(--accent-primary-50); }
.build-library-search button { flex: none; border: 0; background: transparent; color: var(--text-tertiary); font-size: 13px; line-height: 1; cursor: pointer; }
.build-library-empty strong { display: block; color: var(--slate-600); font-size: 12px; }
.build-library-empty p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 10.5px; }
.build-library { padding-top: 16px; }
.build-param.is-muted { opacity: .55; }
.build-range-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.build-range-label { color: var(--text-tertiary); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.build-range-line strong { color: var(--slate-700); font-size: 11.5px; }
.build-range-line em { color: var(--text-tertiary); font-size: 9px; font-style: normal; }
.build-range-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.build-range-presets button { padding: 4px 8px; border: 1px solid var(--slate-200); border-radius: 999px; background: #fff; color: var(--slate-500); font: 650 9px Inter, sans-serif; cursor: pointer; }
.build-range-presets button:hover { border-color: var(--accent-primary-300); color: var(--accent-primary-dark); }
.build-range-presets button.is-on { border-color: var(--accent-primary); background: var(--accent-primary-50); color: var(--accent-primary-dark); }

/* ─── Model manager ──────────────────────────────────────────────────────── */
.build-manager-badge { padding: 2px 7px; border-radius: 999px; background: var(--slate-100); color: var(--slate-500); font: 700 8.5px Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.build-manager-badge.is-reference { background: var(--accent-primary-50); color: var(--accent-primary-dark); }
.build-manager-badge.is-deployed { background: #dcfce7; color: #15803d; }
.build-manager-badge.is-open { background: #fef3c7; color: #b45309; }
.build-manager-badge.is-id { background: var(--slate-50); color: var(--slate-600); border: 1px solid var(--slate-200); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.build-tool.is-small { height: 26px; padding: 0 9px; font-size: 10.5px; }
.build-tool.is-danger { color: #dc2626; border-color: #fecaca; }
.build-tool.is-danger:hover:not(:disabled) { background: #fef2f2; }

/* New model lifecycle ----------------------------------------------------- */
.build-new-model { width: min(460px, calc(100vw - 40px)); overflow: hidden; border: 1px solid var(--accent-primary-200); border-radius: 15px; background: #fff; box-shadow: 0 28px 75px rgba(15,23,42,.30); }
.build-new-model header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px 16px; border-bottom: 1px solid var(--slate-200); background: linear-gradient(120deg, var(--accent-primary-50), #fff 65%); }
.build-new-model header strong { color: var(--slate-900); font-size: 18px; }
.build-new-model header p { margin: 5px 0 0; max-width: 42ch; color: var(--slate-500); font-size: 12px; line-height: 1.5; }
.build-new-model > label { display: block; padding: 20px 22px 8px; color: var(--slate-600); font-size: 11.5px; font-weight: 700; }
.build-new-model > label .input { width: 100%; height: 38px; margin-top: 7px; font-size: 13px; }
.build-new-model-error { margin: 4px 22px 0; color: #b91c1c; font-size: 11.5px; }
.build-submission-error { margin: 16px 24px; padding: 16px; border: 1px solid #fca5a5; border-radius: 10px; background: #fef2f2; color: #991b1b; }
.build-submission-error p { margin: 8px 0 12px; }
.build-submission-error .build-tool + .build-tool { margin-left: 8px; }
.build-new-model footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px 20px; }
.build-new-model-create { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--accent-primary); color: #fff; font: 700 11.5px Inter, sans-serif; cursor: pointer; }
.build-new-model-create:hover:not(:disabled) { background: var(--accent-primary-dark); }
.build-new-model-create:disabled { background: var(--accent-primary-200); cursor: not-allowed; }
.build-new-model-create .build-icon { width: 14px; height: 14px; }
/* A model file: Export to a file and From a model file. The new-model dialog's frame, wider,
   with a body of short sections that scrolls when a preview has much to say. */
.build-new-model.build-model-file { width: min(560px, calc(100vw - 40px)); display: flex; flex-direction: column; max-height: calc(100vh - 60px); }
.build-model-file header p { max-width: 60ch; }
.build-model-file-name { color: var(--slate-700); font-weight: 700; overflow-wrap: anywhere; }
/* The file's name, on the footer's free side: a long model name is cut short, not the buttons. */
.build-model-file-saved-as { flex: 1 1 auto; min-width: 0; margin-right: auto; align-self: center; overflow: hidden; color: var(--slate-500); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.build-model-file-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 22px 2px; }
.build-model-file-status { margin: 14px 0 4px; color: var(--slate-500); font-size: 12px; }
.build-model-file-warning { margin: 12px 0 0; padding: 9px 12px; border: 1px solid #fde68a; border-radius: 8px; background: #fffbeb; color: #92400e; font-size: 11.5px; line-height: 1.5; }
.build-model-file-section { margin-top: 14px; }
.build-model-file-section h3 { margin: 0 0 6px; color: var(--slate-600); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.build-model-file-section ul { margin: 0; padding-left: 17px; color: var(--slate-700); font-size: 12px; line-height: 1.55; }
.build-model-file-section li + li { margin-top: 3px; }
.build-model-file-section.is-warning ul { color: #92400e; }
.build-model-file-section.is-muted ul { color: var(--slate-500); }
.build-model-file .build-new-model-error { margin: 12px 0 0; }
.build-confirm-dialog { width: min(410px, calc(100vw - 40px)); padding: 24px; border: 1px solid #fecaca; border-radius: 15px; background: #fff; box-shadow: 0 28px 75px rgba(15,23,42,.30); }
.build-confirm-dialog.is-success { border-color: #a7f3d0; }
.build-confirm-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 10px; background: #fef2f2; color: #dc2626; }
.build-confirm-icon.is-close { background: var(--accent-primary-50); color: var(--accent-primary); }
.build-confirm-icon.is-success { background: #ecfdf5; color: #047857; font-size: 19px; font-weight: 850; }
.build-confirm-icon .build-icon { width: 19px; height: 19px; }
.build-confirm-dialog > strong { color: var(--slate-900); font-size: 17px; }
.build-confirm-dialog > p { margin: 8px 0 22px; color: var(--slate-500); font-size: 12px; line-height: 1.55; }
.build-confirm-dialog > p span { color: var(--slate-700); font-weight: 700; }
.build-confirm-dialog footer { display: flex; justify-content: flex-end; gap: 8px; }
/* Every button as wide as the widest, still pushed to the right. */
.build-confirm-dialog footer.is-even { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: max-content; max-width: 100%; margin-left: auto; }
.build-confirm-danger { border: 1px solid #fecaca; background: #dc2626; color: #fff; }
.build-confirm-danger:hover:not(:disabled) { background: #b91c1c; }
.build-confirm-danger.is-secondary { background: #fff; color: #b91c1c; }
.build-confirm-danger.is-secondary:hover:not(:disabled) { background: #fef2f2; }

/* One button shape for every dialog ---------------------------------------
   Dialog footers mix toolbar buttons with the primary action, and each class
   carried its own height — the row came out ragged. Geometry and type are set
   here for all of them; the individual classes still own their colours. */
.build-editor-backdrop .build-confirm-dialog footer > button,
.build-editor-backdrop .build-new-model footer > button,
.build-editor-backdrop .build-ai-dialog footer > button,
.build-editor-backdrop .build-ai-notes footer > button,
.build-editor-backdrop .build-explain-dialog footer > button,
.build-editor-backdrop .build-info-dialog footer > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; min-width: 0; padding: 0 14px; border-radius: 8px;
  font: 700 11.5px Inter, sans-serif; white-space: nowrap; cursor: pointer;
}
.build-editor-backdrop .build-confirm-dialog footer > button .build-icon,
.build-editor-backdrop .build-new-model footer > button .build-icon,
.build-editor-backdrop .build-ai-dialog footer > button .build-icon,
.build-editor-backdrop .build-ai-notes footer > button .build-icon,
.build-editor-backdrop .build-explain-dialog footer > button .build-icon,
.build-editor-backdrop .build-info-dialog footer > button .build-icon { width: 14px; height: 14px; }
/* The neutral choice reads as a button of the same family, not as flat text. */
.build-editor-backdrop .build-confirm-dialog footer > .build-tool,
.build-editor-backdrop .build-new-model footer > .build-tool,
.build-editor-backdrop .build-ai-dialog footer > .build-tool,
.build-editor-backdrop .build-ai-notes footer > .build-tool,
.build-editor-backdrop .build-explain-dialog footer > .build-tool,
.build-editor-backdrop .build-info-dialog footer > .build-tool {
  border: 1px solid var(--slate-200); background: #fff; color: var(--slate-600);
}
.build-editor-backdrop .build-confirm-dialog footer > .build-tool:hover:not(:disabled),
.build-editor-backdrop .build-new-model footer > .build-tool:hover:not(:disabled),
.build-editor-backdrop .build-ai-dialog footer > .build-tool:hover:not(:disabled),
.build-editor-backdrop .build-ai-notes footer > .build-tool:hover:not(:disabled),
.build-editor-backdrop .build-explain-dialog footer > .build-tool:hover:not(:disabled),
.build-editor-backdrop .build-info-dialog footer > .build-tool:hover:not(:disabled) {
  border-color: var(--slate-300); background: var(--slate-50); color: var(--slate-900);
}
/* The destructive choice is a .build-tool too, so the neutral rule above — three
   classes and an element — was overriding its colour and the button that deletes
   the work looked like the one that cancels. */
.build-editor-backdrop .build-confirm-dialog footer > .build-confirm-danger {
  border-color: #dc2626; background: #dc2626; color: #fff;
}
.build-editor-backdrop .build-confirm-dialog footer > .build-confirm-danger:hover:not(:disabled) {
  border-color: #b91c1c; background: #b91c1c; color: #fff;
}
.build-editor-backdrop .build-confirm-dialog footer > .build-confirm-danger.is-secondary {
  border-color: #fecaca; background: #fff; color: #b91c1c;
}
.build-editor-backdrop .build-confirm-dialog footer > .build-confirm-danger.is-secondary:hover:not(:disabled) {
  border-color: #fca5a5; background: #fef2f2; color: #b91c1c;
}
@media (max-width: 720px) {
}

/* ─── Run summary ────────────────────────────────────────────────────────── */
.build-summary { position: absolute; inset: 14px; z-index: 6; display: flex; flex-direction: column; gap: 14px; overflow: auto; padding: 16px 18px 18px; border: 1px solid #dbe3ee; border-radius: 13px; background: #fff; box-shadow: 0 18px 48px rgba(15,23,42,.16); }
.build-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.build-summary-head > div:first-child { flex: 1; min-width: 0; }
.build-summary-head strong { display: block; color: var(--slate-900); font-size: 15px; }
.build-summary-head > div > span { display: block; margin-top: 3px; color: var(--slate-500); font-size: 11px; line-height: 1.5; }
.build-summary-actions { display: flex; align-items: center; gap: 6px; flex: none; }

.build-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.build-stat { padding: 11px 13px; border: 1px solid #e7edf5; border-radius: 10px; background: #fbfdff; }
.build-stat.is-warn { border-color: #fed7aa; background: #fffbf5; }
.build-stat-label { display: block; color: var(--text-tertiary); font: 700 8.5px Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.build-stat-value { display: block; margin-top: 5px; color: var(--slate-900); font-size: 24px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.build-stat-detail { display: block; margin-top: 4px; color: var(--text-tertiary); font-size: 10px; line-height: 1.4; }

.build-delta-note { display: flex; align-items: baseline; gap: 12px; padding: 10px 13px;
  border: 1px solid var(--accent-primary-100); border-left: 3px solid var(--accent-primary); border-radius: 10px;
  background: #f5f7ff; }
.build-delta-note strong { flex: none; color: var(--accent-primary-deep); font-size: 12px; font-weight: 750; }
.build-delta-note span { color: var(--slate-600); font-size: 11px; line-height: 1.5; }

.build-coverage { display: flex; align-items: center; gap: 11px; }
.build-coverage-track { flex: 1; height: 7px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.build-coverage-fill { height: 100%; border-radius: 999px; background: var(--accent-primary); }
.build-coverage > span { flex: none; color: var(--slate-500); font-size: 10.5px; }

.build-summary-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.build-summary-block { padding: 12px 14px 14px; border: 1px solid #e7edf5; border-radius: 11px; background: #fff; }
.build-summary-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.build-summary-block-head h4 { margin: 0; color: var(--slate-900); font-size: 12px; font-weight: 750; }
.build-summary-block-head span { color: var(--text-tertiary); font-size: 10px; text-align: right; }
.build-period-head { align-items: center; }
.build-period-heading { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.build-period-heading > span { text-align: left; white-space: nowrap; }
.build-period-controls { display: inline-flex; flex: none; gap: 1px; padding: 2px; border: 1px solid var(--slate-200); border-radius: 8px; background: var(--slate-50); }
.build-period-toggle { min-height: 25px; padding: 3px 7px; border: 0; border-radius: 5px; background: transparent; color: var(--slate-600); font: 650 9.5px Inter, sans-serif; cursor: pointer; }
.build-period-toggle:hover { background: #eef2f7; color: var(--slate-900); }
.build-period-toggle.is-active { background: #fff; color: var(--accent-primary-deep); box-shadow: 0 1px 2px #0f172a1a; }
.build-period-toggle:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

.build-band-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.build-band-list li { display: grid; grid-template-columns: 118px minmax(0, 1fr) 62px; align-items: center; gap: 10px; }
.build-band-name { display: flex; align-items: center; gap: 6px; color: var(--slate-700); font-size: 11px; font-weight: 650; }
.build-band-name i { width: 9px; height: 9px; flex: none; border-radius: 3px; }
.build-band-name small { color: var(--text-tertiary); font-size: 9.5px; font-weight: 600; }
.build-band-track { height: 8px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
.build-band-fill { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.build-band-count { color: var(--slate-900); font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.build-band-count small { display: block; color: var(--text-tertiary); font-size: 9.5px; font-weight: 600; }

.build-period-chart { display: flex; align-items: flex-end; gap: 4px; height: 132px; overflow-x: auto; }
.build-period-col { flex: 1 0 48px; min-width: 48px; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; cursor: default; }
.build-period-value-spacer { height: 12px; flex: none; }
.build-period-value { position: absolute; left: 50%; z-index: 1; transform: translateX(-50%); height: auto; color: var(--slate-500); font-size: 9.5px; line-height: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.build-period-track { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; }
.build-period-bar { width: 100%; border-radius: 4px 4px 0 0; background: var(--accent-primary); transition: background .12s; }
.build-period-bar.is-hovered { background: var(--accent-primary-deep); }
.build-period-label { color: var(--text-tertiary); font-size: 9px; white-space: nowrap; }
/* A month's bar may narrow to its label, the month over the year (PeriodAxisLabel), so a
   year of months fits Detect's card instead of overrunning it; more than that still scrolls. */
.build-period-chart.is-month .build-period-col { flex: 1 1 34px; min-width: 34px; }
.build-period-label.is-month { text-align: center; line-height: 1.15; }
.build-period-label.is-month small { display: block; font-size: .85em; }

@media (max-width: 560px) {
  .build-period-head { align-items: flex-start; flex-direction: column; }
  .build-period-heading { width: 100%; justify-content: space-between; }
  .build-period-controls { align-self: flex-end; }
}

/* With nothing to plot over time the distribution takes the full width rather than
   leaving half the row empty. */
.build-summary-columns.is-single { grid-template-columns: 1fr; }

@media (max-width: 1000px) {
  .build-summary-columns { grid-template-columns: 1fr; }
}

/* Simulation history -------------------------------------------------------- */
.build-runs-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.build-runs-table th { position: sticky; top: 0; padding: 6px 8px; background: #fbfdff; border-bottom: 1px solid var(--slate-200); color: var(--text-tertiary); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-align: left; }
.build-runs-table td { padding: 6px 8px; border-bottom: 1px solid #eef2f7; color: var(--slate-600); white-space: nowrap; }
.build-runs-table tr.is-failed td { color: #b91c1c; }
.build-runs-table tr.is-cancelled td { color: #9a3412; }
.build-runs-table tr:first-child td { font-weight: 650; color: var(--slate-800); }
.build-runs-table a { color: var(--accent-primary); font-weight: 650; text-decoration: none; }
.build-runs-table a:hover { text-decoration: underline; }
.build-stat-row.is-workload { margin-top: 8px; }
.build-summary-label { margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: var(--accent-primary-50); color: var(--accent-primary-dark); font-size: 9.5px; font-style: normal; font-weight: 700; }

.build-tool.is-send { color: var(--accent-primary-dark); }
.build-tool.is-send .build-tool-icon { color: var(--accent-primary-bright); }

/* Review and calibration ---------------------------------------------------- */
.build-calibration-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--slate-500); font-size: 10.5px; }
.build-calibration-head select { height: 26px; padding: 0 6px; border: 1px solid var(--slate-200); border-radius: 6px; background: #fff; color: var(--slate-700); font: 600 10px Inter, sans-serif; }
.build-calibration-head em { color: var(--accent-primary-dark); font-style: normal; font-weight: 650; }

/* ── Lifecycle as navigation ───────────────────────────────────────────────── */
/* The stage bar is Model Studio's submenu, so it reads as the same flat tab row
   the other tabs use rather than as a stepper widget of its own. The numbering
   and connecting track are dropped here — each stage screen still announces its
   own "Stage N" — but the gates, badges and state marks are unchanged. */
.build-stagebar { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; flex: none; grid-column: 2; align-items: stretch; justify-content: center; justify-self: center; gap: 0; padding: 0; border: 0; background: transparent; min-width: 0; overflow: visible; }
.build-steps { display: flex; align-items: stretch; justify-content: center; gap: 2px; margin: 0; padding: 0; max-width: none; list-style: none; }
.build-step { position: relative; display: flex; align-items: stretch; flex: none; min-width: 0; }
.build-step-track, .build-step-dot { display: none; }
.build-step button { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--text-tertiary); font: 600 .85rem Inter, sans-serif; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s; }
.build-step button:hover:not(:disabled) { background: transparent; color: var(--text-secondary); }
.build-step button:disabled { opacity: .45; cursor: not-allowed; }
.build-step-gate { position: absolute; z-index: 20; top: calc(100% + 8px); left: 50%; width: max-content; max-width: 270px; padding: 7px 9px; border: 1px solid #dbe3ef; border-radius: 7px; background: #fff; color: var(--slate-600); box-shadow: 0 8px 24px rgba(15,23,42,.12); font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; }
.build-step:hover .build-step-gate { opacity: 1; visibility: visible; }
/* The cycle, drawn as a tint behind the three stages that repeat rather than as a
   stepper with an arrow looping back. The track and dots above are hidden deliberately
   — this bar is the studio's tab row, not a stepper widget — so there is no line to
   bend, and the three tabs are marked individually because .build-steps is a flex row
   and the shared stylesheet stretches each .build-step to its own slot: a wrapper
   element would take one slot and squash three tabs into it. */
.build-step.is-cycle { background: #f1f6ff; }
.build-step.is-cycle-first { border-radius: 8px 0 0 8px; padding-left: 2px; }
.build-step.is-cycle-last { border-radius: 0 8px 8px 0; padding-right: 2px; }
.build-step.is-cycle.is-current { background: #e4eeff; }
.build-step-gate em { display: block; margin-top: 5px; padding-top: 5px;
  border-top: 1px solid #eef2f7; color: var(--slate-500); font-style: normal; font-weight: 600; }
.build-step.is-reached button { color: var(--text-secondary); }
.build-step.is-done button { color: var(--text-secondary); }
.build-step.is-current button { background: transparent; border-bottom-color: var(--accent-blue); color: var(--accent-blue); box-shadow: none; }
.build-step.is-current button:hover:not(:disabled) { background: transparent; color: var(--accent-blue); }
/* The current step is bold, and a label that changes weight changes width — which
   moved the whole centred row every time a tab was selected. Each label reserves
   the width of its own bold form, so selecting one shifts nothing. */
.build-step-label { display: inline-block; font-size: inherit; text-align: center; }
.build-step-label::after {
  content: attr(data-label); display: block; height: 0; overflow: hidden;
  visibility: hidden; font-weight: 700; letter-spacing: .01em; pointer-events: none;
}
.build-step.is-current .build-step-label { color: inherit; font-weight: 700; letter-spacing: .01em; }
.build-step-badge { padding: 1px 5px; border-radius: 999px; background: var(--accent-primary-50); color: var(--accent-primary-dark); font: 700 10px Inter, sans-serif; font-style: normal; }

/* ── A stage owns the whole screen ─────────────────────────────────────────── */
@media (max-width: 1100px) { }
.build-stage { flex: 1; min-height: 0; overflow-y: auto; padding: 24px clamp(20px, 4vw, 52px) 32px; background: var(--slate-50); }
.build-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; max-width: 1180px; margin: 0 auto 20px; }
.build-stage-head-copy { flex: 1; min-width: 0; }
.build-stage-eyebrow { color: var(--text-tertiary); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.build-stage-head h2 { margin: 3px 0 0; color: var(--slate-900); font-size: 26px; font-weight: 750; letter-spacing: -.01em; }
.build-stage-head p { max-width: none; margin: 6px 0 0; color: var(--slate-500); font-size: 14px; line-height: 1.6; }
.build-stage-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.build-stage-actions .build-tool { height: 34px; border: 1px solid var(--slate-200); background: #fff; text-decoration: none; }
.build-stage-tabs { display: flex; gap: 4px; max-width: 1180px; margin: 0 auto 14px; padding: 3px; border-radius: 10px; background: #eef2f7; width: fit-content; }
.build-stage-tabs button { padding: 8px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--slate-500); font: 650 14px Inter, sans-serif; cursor: pointer; }
.build-stage-tabs button.is-on { background: #fff; color: #172554; box-shadow: 0 1px 2px rgba(15,23,42,.10); }
.build-sim-progress { width: 100%; max-width: 520px; margin: 4px auto 0; text-align: left; }
.build-sim-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.build-sim-progress-copy strong { color: #172554; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.build-sim-progress-copy span { color: var(--slate-600); font-size: 13px; font-weight: 600; text-align: right; }
.build-sim-progress-row { display: flex; align-items: center; gap: 10px; }
.build-sim-progress-track { flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: var(--accent-primary-100); }
.build-sim-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-primary-bright), var(--accent-primary)); transition: width .35s ease; }
.build-sim-progress em { flex: none; min-width: 2.6em; color: var(--accent-primary-dark); font: 800 12px Inter, sans-serif; font-style: normal; text-align: right; }
.build-sim-cancel { flex: none; height: 26px; padding: 0 10px; font-size: 11px; }
.build-sim-progress.is-compact { max-width: 520px; margin: 0; }
.build-sim-progress.is-compact .build-sim-progress-track { height: 6px; }
.build-sim-progress.is-compact .build-sim-cancel { height: 24px; }
.build-sim-progress.is-compact .build-sim-progress-msg { display: block; margin-top: 4px; color: var(--slate-500); font-size: 12px; font-weight: 600; }
.build-dock-progress { padding: 0 16px 10px; border-top: 1px solid #eef2f7; background: #f8faff; }
.build-dock-progress .build-sim-progress { max-width: none; }
/* The Review stage puts its action buttons beside the Results/Alert queue/Cases tabs
   rather than above them, so both sit on one left-aligned line matching the content
   column beneath — not centered, and not pinned to the header on the far right. */
.build-review-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; max-width: 1180px; margin: 0 auto 14px; }
.build-review-toolbar .build-stage-tabs { margin: 0; }
@media (max-width: 900px) { .build-review-toolbar { flex-direction: column; align-items: flex-start; } }
.build-stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1180px; margin: 0 auto 16px; }
.build-stage-grid.is-wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.build-stage-block { padding: 16px 18px; border: 1px solid #e6ecf4; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.03); max-width: 1180px; margin: 0 auto 16px; }
.build-stage-grid .build-stage-block { margin: 0; }
.build-stage-block h3 { margin: 0 0 12px; color: var(--slate-700); font-size: 16px; font-weight: 700; }
.build-stage-block { overflow-x: auto; }

/* Stacked, collapsible stage panels — the same card as .build-stage-block, with a
   header you can fold. Stages show their panels down the page instead of behind tabs. */
.build-stage-section { max-width: 1180px; margin: 0 auto 16px; border: 1px solid #e6ecf4; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.03); overflow: hidden; }
.build-stage-section-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; cursor: pointer; list-style: none; user-select: none; }
.build-stage-section-head::-webkit-details-marker { display: none; }
.build-stage-section-head:hover { background: var(--slate-50); }
.build-stage-section[open] > .build-stage-section-head { border-bottom: 1px solid #eef2f7; }
.build-stage-section-caret { width: 12px; height: 12px; flex: none; color: var(--text-tertiary); transform: rotate(0deg); transition: transform .15s; }
.build-stage-section[open] > .build-stage-section-head .build-stage-section-caret { transform: rotate(90deg); }
.build-stage-section-title { color: var(--slate-700); font-size: 16px; font-weight: 700; }
.build-stage-section-meta { margin-left: auto; color: var(--text-tertiary); font-size: 12px; font-weight: 600; white-space: nowrap; }
.build-stage-section-body { padding: 16px 18px; overflow-x: auto; }
/* Panels already carry their own card when shown standalone; inside a section the
   section is the card, so the inner one flattens instead of nesting two frames. */
.build-stage-section-body > .build-summary.is-embedded,
.build-stage-section-body > .build-board.is-embedded { margin: 0; border: 0; box-shadow: none; padding: 0; background: transparent; }
.build-stage-section-body > .build-stage-empty { margin: 0; }
.build-stagebar { overflow: visible; flex-shrink: 0; }
.build-steps { width: max-content; min-width: 0; }
@media (max-width: 1100px) {
  .build-stage-grid, .build-stage-grid.is-wide { grid-template-columns: minmax(0, 1fr); }
  .build-stage-head { flex-wrap: wrap; gap: 12px; }
  /* Narrows the shared sub-nav on every tab, not just Model Studio's. */
  .page-subnav { grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); padding: 0 12px; }
  .build-chrome { padding: 4px 12px 5px; }
}
.build-run-history-actions { display: flex; justify-content: flex-end; gap: 5px; }
.build-run-history-actions .build-tool.is-danger { color: #b91c1c; }
.build-calibration-area { max-width: 1180px; margin: 0 auto 22px; }
.build-calibration-area-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 14px; padding: 0 2px; }
.build-calibration-area-head > div { min-width: 0; }
.build-calibration-area-head span { display: block; margin-bottom: 4px; color: var(--accent-primary-bright); font-size: 12px; font-weight: 800; letter-spacing: .11em; }
.build-calibration-area-head h2 { margin: 0; color: var(--slate-900); font-size: 24px; font-weight: 780; letter-spacing: -.02em; }
.build-calibration-area-head p { max-width: 790px; margin: 5px 0 0; color: var(--slate-500); font-size: 14px; line-height: 1.55; }
.build-calibration-area-head > em,
.build-effectiveness-head-actions > em { flex: none; margin-top: 8px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-style: normal; font-weight: 750; }
.build-calibration-area-head > em.is-complete { background: #dcfce7; color: #047857; }
.build-calibration-area-head > em.is-waiting { background: var(--slate-100); color: var(--slate-600); }
/* Genuinely earned amber: everything under this heading describes a version the
   canvas has since moved past, not the one a trainee would be simulating next. */
.build-calibration-area-head > em.is-stale { background: #fef3c7; color: #92400e; }
.build-effectiveness-area { padding: 20px; border: 1px solid #dbe4f0; border-radius: 16px; background: linear-gradient(145deg,#fff 0%,#f8faff 100%); box-shadow: 0 8px 30px rgba(30,41,59,.055); }
/* Volume sits apart from quality: a plain stat row for "how much work", styled like
   every other run summary in the app, before the panel gets into "how good". */
.build-effectiveness-summary { grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0 0 16px; }
.build-effectiveness-summary .build-stat-label { min-height: 31px; line-height: 1.2; }
.build-effectiveness-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.build-effectiveness-head-actions > em { margin-top: 0; }
.build-effectiveness-collapse { height: 28px; padding: 0 9px; border: 1px solid #dbe4ef; border-radius: 7px; background: #fff; color: var(--slate-600); font: 700 11px Inter, sans-serif; cursor: pointer; }
.build-effectiveness-collapse:hover { border-color: var(--accent-primary-200); background: #f7f8ff; color: var(--accent-primary-dark); }
/* Laundering (left pair) and escalation (right pair) are two separate stories, but
   they share one grid rather than two side-by-side ones: a longer caption on one side
   would otherwise make its row taller than the matching tile across from it, since two
   independent grids don't share row heights. One grid, four columns, `stretch` (the
   grid default) makes every tile in a row the same height regardless of which column —
   or which story — it belongs to. */
.build-effectiveness-columns { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 0 0 12px; }
.build-effectiveness-metric { position: relative; display: flex; flex-direction: column; min-height: 88px; padding: 10px 12px 18px; border: 1px solid #e5eaf2; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.035); }
.build-effectiveness-metric > span { display: block; color: var(--slate-500); font-size: 10px; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.build-effectiveness-metric > em { display: block; margin-top: 3px; color: var(--text-tertiary); font-size: 9px; font-style: normal; line-height: 1.2; }
.build-effectiveness-metric > strong { display: block; margin-top: 4px; color: var(--slate-900); font-size: 20px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.build-effectiveness-metric > small { display: block; margin-top: 3px; color: var(--text-tertiary); font-size: 11px; line-height: 1.4; }
.build-effectiveness-metric.is-headline { grid-column: span 2; min-height: 96px; }
.build-effectiveness-metric.is-headline > strong { margin-top: 5px; font-size: 24px; }
.build-effectiveness-metric.is-headline > small { font-size: 11px; }
/* One accent, plus grey for process tiles. Tiles used to carry a coloured left edge,
   orange for the lower-is-better figures (misses, false positives, escalations). It never
   read the value, so a 0% false-positive rate still looked like a warning, and the edge is
   gone; only the bar keeps the accent. Whether a figure is acceptable is the risk
   appetite's call (Calibrate), not a fixed colour's. */
.build-effectiveness-metric.is-laundering,
.build-effectiveness-metric.is-recall,
.build-effectiveness-metric.is-precision,
.build-effectiveness-metric.is-escalation,
.build-effectiveness-metric.is-false-positive,
.build-effectiveness-metric.is-false-negative { --metric:var(--accent-primary); }
.build-effectiveness-metric.is-f1 { --metric:var(--slate-400); }
/* The track sits in the same place on every tile, so the tiles keep one baseline
   whether or not the figure is a percentage; only the fill is conditional. */
.build-effectiveness-bar { position: absolute; right: 14px; bottom: 11px; left: 14px; height: 3px; overflow: hidden; border-radius: 999px; background: #eef2f7; }
.build-effectiveness-bar[aria-hidden="true"] { background: #f4f7fb; }
.build-effectiveness-bar i { display: block; height: 100%; border-radius: inherit; background: var(--metric,var(--accent-primary-bright)); }
@media (max-width: 1180px) {
  /* Two columns, not four: the headline (still span 2) becomes a full-width row of
     its own, and each story's Recall/Precision/False-positive/F1 stacks as a 2×2
     block beneath it — still one grid, so heights still sync within each row. */
  .build-effectiveness-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .build-effectiveness-metric.is-headline { grid-column: span 2; }
}
.build-effectiveness-area > .build-stage-block { max-width: none; margin: 0; background: #fff; }
.build-effectiveness-section { margin-top: 18px; padding: 16px; border: 1px solid #e6ecf4; border-radius: 12px; background: #fff; }
.build-effectiveness-section > header { margin-bottom: 12px; }
.build-effectiveness-section > header > span { display: block; color: var(--accent-primary-bright); font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.build-effectiveness-section > header > h3 { margin: 4px 0 0; color: var(--slate-800); font-size: 14px; }
.build-effectiveness-secondary { margin-top: 12px; color: var(--slate-500); font-size: 11px; line-height: 1.55; }
.build-effectiveness-pending-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.build-effectiveness-pending-panels article { display: grid; gap: 5px; padding: 16px; border: 1px dashed var(--slate-300); border-radius: 12px; background: var(--slate-50); }
.build-effectiveness-pending-panels span { color: var(--text-tertiary); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.build-effectiveness-pending-panels strong { color: var(--slate-500); font-size: 12px; }
.build-effectiveness-operations { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e6ecf4; }
.build-effectiveness-operations > span { display: block; color: var(--text-tertiary); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.build-effectiveness-operations .build-effectiveness-secondary { margin: 4px 0 0; }
.build-effectiveness-area details.build-stage-block { margin-top: 18px; }
.build-effectiveness-area details summary { cursor: pointer; color: var(--slate-700); font-size: 12px; font-weight: 700; }
.build-effectiveness-area details[open] summary { margin-bottom: 14px; }
@media (max-width: 680px) { .build-effectiveness-pending-panels { grid-template-columns: 1fr; } }
.build-threshold-performance { margin: 4px 0 16px; padding: 14px; border: 1px solid #e8edf5; border-radius: 10px; background: #fbfcfe; }
.build-threshold-performance header strong, .build-threshold-performance header span { display: block; }
.build-threshold-performance header strong { color: var(--slate-700); font-size: 13px; }
.build-threshold-performance header span { margin-top: 3px; color: var(--slate-500); font-size: 11px; }
.build-threshold-performance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px; margin-top: 12px; }
.build-threshold-performance-grid article { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; color: var(--slate-500); font-size: 11px; }
.build-threshold-performance-grid article.is-current { border-color: var(--accent-primary-400); box-shadow: 0 0 0 1px var(--accent-primary-200); }
.build-threshold-performance-grid article > strong { color: var(--slate-700); font-size: 11px; }
.build-threshold-performance-grid b { float: right; color: var(--slate-900); }
.build-threshold-performance-grid small { color: var(--text-tertiary); }
.build-calibration-trend { margin: 16px 0 0; padding: 14px; border: 1px solid #e8edf5; border-radius: 10px; background: #fbfcfe; }
.build-calibration-trend header strong, .build-calibration-trend header span { display: block; }
.build-calibration-trend header strong { color: var(--slate-700); font-size: 13px; }
.build-calibration-trend header span { margin-top: 3px; color: var(--slate-500); font-size: 11px; }
.build-calibration-trend-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 11px 0 6px; }
.build-calibration-trend-legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--slate-500); font-size: 10px; }
.build-calibration-trend-legend i { width: 8px; height: 8px; border-radius: 50%; }
.build-calibration-trend-legend b { color: var(--slate-700); font-weight: 750; }
.build-calibration-trend svg { display: block; width: 100%; height: auto; overflow: visible; }
.build-calibration-trend-note { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; padding: 9px 11px; border: 1px solid var(--accent-primary-100); border-left: 3px solid var(--accent-primary-bright); border-radius: 8px; background: #f8faff; color: var(--slate-600); font-size: 11px; line-height: 1.45; }
.build-calibration-trend-note strong { flex: none; color: var(--accent-primary-deep); font-size: 11px; }
.build-calibration-trend-note.is-improving { border-color: #bbf7d0; border-left-color: #10b981; background: #f0fdf4; }
.build-calibration-trend-note.is-improving strong { color: #047857; }
.build-calibration-trend-note.is-worsening { border-color: #fed7aa; border-left-color: #f97316; background: #fff7ed; }
.build-calibration-trend-note.is-worsening strong { color: #c2410c; }
.build-calibration-trend-note.is-mixed { border-color: #ddd6fe; border-left-color: #8b5cf6; background: #faf5ff; }
.build-calibration-trend-note.is-mixed strong { color: #6d28d9; }
.build-calibration-workbench { padding-top: 21px; border-top: 2px solid #dbe4f0; }
.build-calibration-workbench > .build-stage-block,
.build-calibration-workbench > .build-stage-empty { max-width: none; }
@media (max-width: 1000px) {
}
@media (max-width: 620px) {
  .build-effectiveness-columns { grid-template-columns: 1fr; }
  .build-effectiveness-metric.is-headline { grid-column: auto; }
  .build-calibration-area-head { flex-direction: column; gap: 8px; }
}
.build-stage-copy { margin: 0 0 10px; color: var(--slate-500); font-size: 14px; line-height: 1.65; }
.build-stage-copy strong { color: #172554; }
/* A note on a stage is information by default, not a warning. Most of what these say
   is the normal shape of the workflow — this version has been simulated, Ops has not
   finished yet, this run is under review — and colouring all of it amber told a trainee
   they had done something wrong every time they had in fact done the right thing. Amber
   is reserved for the case where the figures on screen do not describe the rule on the
   canvas; green marks a stage actually finished. */
/* A note is a headline, an explanation, and sometimes the action that resolves it.
   These used to sit on one baseline-aligned row, so a long bold headline pushed the
   body text in from a different place in every note and the trailing button floated
   halfway down three wrapped lines. The headline now owns its own line, every body
   starts at the same left edge, and the actions sit on the last line, right-aligned. */
.build-stage-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  max-width: 1180px; margin: 0 auto 12px; padding: 13px 16px;
  border: 1px solid var(--slate-200); border-left: 3px solid var(--slate-300); border-radius: 10px;
  background: var(--slate-50); color: var(--slate-600); font-size: 14px; line-height: 1.55;
}
.build-stage-note strong { flex: 0 0 100%; color: var(--slate-900); font-size: 14px; white-space: normal; }
.build-stage-note span { flex: 1 1 340px; min-width: 0; }
/* Only the first action clears the text; any that follow sit beside it. */
.build-stage-note span + button, .build-stage-note strong + button { margin-left: auto; }
.build-stage-note > button { flex: none; }
.build-calibration-diff ul { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.build-calibration-diff li { display: flex; align-items: center; gap: 6px; }
.build-calibration-diff li span { color: var(--slate-500); }
.build-calibration-diff li b { color: var(--slate-900); font-weight: 700; }
.build-calibration-diff li i { color: var(--text-tertiary); font-style: normal; }
/* Same width as every other block, so the column reads as one column. */
.build-stage-empty { margin: 16px 0; padding: 30px 34px; border: 1px dashed var(--slate-300); border-radius: 16px; background: #fff; text-align: center; }
.build-stage-empty strong { display: block; color: var(--slate-700); font-size: 18px; }
.build-stage-empty p { margin: 8px auto 16px; max-width: 520px; color: var(--slate-500); font-size: 14px; line-height: 1.65; }
/* A prompt that sits between notes and tables that are already on the page — Test's
   "ready to test" and its kin — is a step in the flow, not the whole stage's empty
   state, so it takes the same small, left-aligned shape as a .build-stage-note. */
.build-stage-empty.is-compact {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  max-width: 1180px; margin: 0 auto 12px; padding: 14px 18px;
  border: 1px solid var(--slate-200); border-radius: 10px; background: var(--slate-50); text-align: left;
}
/* Direct children only: these rules lay out the card's own title and blurb. As
   descendant selectors they also caught the "Simulating" label inside the progress
   block, which then claimed a full row of its own and pushed the status message off
   the right-hand edge of the card. */
.build-stage-empty.is-compact > strong { flex: 0 0 100%; font-size: 14px; }
.build-stage-empty.is-compact > p { flex: 1 1 340px; min-width: 0; margin: 0; max-width: none; font-size: 13.5px; line-height: 1.5; }
.build-stage-empty.is-compact > .build-run { flex: none; margin: 0; }
/* Shrinkable, so a narrow window wraps the bar instead of overflowing the card. */
.build-stage-empty.is-compact > .build-sim-progress { flex: 0 1 520px; min-width: 0; margin: 0; }
.build-stage-empty.is-compact .build-run { height: 34px; }
.build-checklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.build-checklist li { display: flex; align-items: baseline; gap: 9px; color: var(--text-tertiary); font-size: 14px; }
/* The tick is each item's first span. A level badge further along the line is a span too, and
   matched as one it was squeezed into the 20px circle: 'L4 · re-read' broke over two lines. */
.build-checklist li > span:first-child { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--slate-100); color: var(--text-tertiary); font-size: 12px; }
.build-checklist li.is-done { color: var(--slate-700); }
.build-checklist li.is-done > span:first-child { background: #d1fae5; color: #047857; }
.build-checklist li.is-waiting > span:first-child { background: var(--slate-100); color: var(--slate-600); }

/* The result panels sit inline on a stage instead of floating over the canvas. */
.build-summary.is-embedded, .build-board.is-embedded {
  position: static; inset: auto; max-height: none; max-width: 1180px; margin: 0 auto;
  box-shadow: 0 1px 2px rgba(15,23,42,.04); border-color: #e6ecf4; }
.build-board.is-embedded { height: auto; }
.build-summary.is-embedded .build-summary-columns { max-height: none; }
/* Canvas tools sit on the chrome row, to the right of the model name. */
.build-canvas-tools {
  position: relative;
  z-index: 6;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  /* One row on every stage, whatever the width: wrapping here is what used to make the
     chrome taller on Design than on the stages after it. Narrow windows scroll instead. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  /* The Design groups are the tallest thing this row ever holds; reserving their height
     for every stage is what keeps the chrome identical from step to step. */
  height: 34px;
  max-width: none;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 1px solid var(--slate-200);
  background: transparent;
}
.build-canvas-tools::-webkit-scrollbar { display: none; }
.build-canvas-tool-group { flex: none; }
.build-canvas-tool-group { display: flex; align-items: center; gap: 1px; padding: 2px; border: 1px solid #e8edf5; border-radius: 8px; background: var(--slate-50); }
.build-canvas-tools .build-tool { height: 28px; }
.build-canvas-tools .build-tool.is-icon { width: 28px; }
/* Every stage past Design fills this same row with its own actions, so the buttons
   change with the step while the chrome keeps one height throughout. */
.build-stage-toolbar:empty { border-left: 0; }
.build-canvas-tools .build-tool,
.build-canvas-tools .build-run { height: 28px; min-width: 0; font-size: 11.5px; white-space: nowrap; }
.build-canvas-tools .build-run { padding: 0 12px; box-shadow: 0 1px 4px rgba(var(--accent-primary-rgb), .24); }
.build-canvas-tools .build-tool.is-wide, .build-canvas-tools .build-run.is-wide { min-width: 0; height: 28px; }
.build-canvas-tools a.build-tool { text-decoration: none; }
/* Save, Revert, Export and Close act on the model as a stored thing, not on the work, so
   they sit at the far end of the row, away from Run. */
.build-canvas-file-actions { margin-left: auto; }
/* The compact Design toolbar. The full labels need a 1372 px window (at 1024 px they were
   about 250 px too wide), and a sideways scroll hid Save and Close; a second row would make
   the chrome taller on Design than on the stages after it. So the labels a person can spare
   go, in two steps: below 1400 px the AI buttons drop "with AI", which their tinted group
   and the spark already say; below 1300 px Select, Configure and More keep only their icon,
   still named for a screen reader and titled for the pointer. Revert, Export and Notes live
   under More at every width (design/toolbar.jsx). */
@media (max-width: 1399px) {
  .build-canvas-tools .build-tool-label.is-ai-suffix { display: none; }
}
@media (max-width: 1299px) {
  .build-canvas-tools .build-tool-label.is-compact-hidden { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .build-canvas-tools .build-tool.is-compact-icon { width: 28px; padding: 0; justify-content: center; }
}
@media (max-width: 1100px) { .build-canvas-tools .build-tool:not(.is-icon):not(.is-compact-icon) { padding: 0 7px; } }
/* Below 1100 px Validate and Calculate keep only their glyph too. Without them the row fitted
   1024 px by 3 px on a Mac and overflowed by 3 px on CI's Ubuntu, whose fonts set wider; a fit
   that depends on the font is not a fit. */
@media (max-width: 1100px) {
  .build-canvas-tools .build-tool-label.is-narrow-hidden { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .build-canvas-tools .build-tool.is-narrow-icon { width: 28px; padding: 0; justify-content: center; }
  .build-canvas-tools .build-tool.is-narrow-icon .build-tool-icon { margin: 0; }
}
/* Only the AI group is tinted; the rest keep the neutral group chrome. */
.build-canvas-ai-actions { border-color: var(--accent-primary-200); background: #f5f3ff; }
/* Run ends the model-actions group, so it carries the accent the dock's run button used to. */
.build-canvas-tools .build-tool-run { background: var(--accent-primary); color: #fff; box-shadow: 0 1px 3px rgba(var(--accent-primary-rgb), .28); }
.build-canvas-tools .build-tool-run .build-icon { color: #fff; }
/* Filled buttons keep their own hover: the neutral .build-tool hover paints a white
   ground and near-black text, which on an indigo pill reads as unreadable dark text. */
.build-canvas-tools .build-tool-run:hover:not(:disabled) { background: var(--accent-primary-dark); color: #fff; box-shadow: 0 1px 4px rgba(var(--accent-primary-rgb), .34); }
.build-canvas-tools .build-tool-run:hover:not(:disabled) .build-icon { color: #fff; }
.build-canvas-tools .build-tool-run:disabled { background: var(--slate-200); color: var(--slate-400); box-shadow: none; }
.build-canvas-tools .build-tool-run:disabled .build-icon { color: var(--slate-400); }
/* A labelled destructive action is a decision of the same weight as the primary one, so
   it gets the same solid pill — in red — rather than grey text that only turns red on hover.
   Icon-only deletes in the manipulation group stay quiet; they sit next to copy and paste. */
.build-canvas-tools .build-tool.is-danger:not(.is-icon) { background: #dc2626; color: #fff; box-shadow: 0 1px 3px rgba(220,38,38,.28); }
.build-canvas-tools .build-tool.is-danger:not(.is-icon) .build-icon { color: #fff; }
.build-canvas-tools .build-tool.is-danger:not(.is-icon):hover:not(:disabled) { background: #b91c1c; color: #fff; box-shadow: 0 1px 4px rgba(220,38,38,.34); }
.build-canvas-tools .build-tool.is-danger:not(.is-icon):hover:not(:disabled) .build-icon { color: #fff; }
.build-canvas-tools .build-tool.is-danger:not(.is-icon):disabled { background: var(--slate-200); color: var(--slate-400); box-shadow: none; }
.build-canvas-tools .build-tool.is-danger:not(.is-icon):disabled .build-icon { color: var(--slate-400); }
.build-canvas-tools .build-tool.is-danger:not(.is-icon):focus-visible { outline: 2px solid #991b1b; outline-offset: 1px; }
/* Save and Cancel keep the neutral chrome every other tool has — only their label is
   coloured, so the row reads as one bar of equal actions and the colour says which way
   each one goes rather than shouting for the click. */
.build-canvas-tools .build-tool.is-accent { color: var(--accent-primary); }
.build-canvas-tools .build-tool.is-accent .build-icon { color: var(--accent-primary-bright); }
.build-canvas-tools .build-tool.is-accent:hover:not(:disabled) { background: #fff; color: var(--accent-primary-dark); box-shadow: 0 1px 2px rgba(var(--accent-primary-rgb), .18); }
.build-canvas-tools .build-tool.is-accent:hover:not(:disabled) .build-icon { color: var(--accent-primary-dark); }
/* Disabled wins: nothing to save should not look live. */
.build-canvas-tools .build-tool.is-accent:disabled { background: transparent; color: var(--slate-300); box-shadow: none; }
.build-canvas-tools .build-tool.is-accent:disabled .build-icon { color: #dbe2ea; }
/* Unsaved work still needs to be visible, but as weight on the label, not a filled pill. */
.build-canvas-model-actions .build-tool.is-pending { background: transparent; color: var(--accent-primary); box-shadow: none; font-weight: 750; }
.build-canvas-model-actions .build-tool.is-pending .build-icon { color: var(--accent-primary-bright); }
.build-canvas-model-actions .build-tool.is-pending:hover:not(:disabled) { background: #fff; color: var(--accent-primary-dark); }
.build-canvas-model-actions .build-tool.is-pending:hover:not(:disabled) .build-icon { color: var(--accent-primary-dark); }
.build-tool.is-ai { color: #5b21b6; }
.build-tool.is-ai .build-icon { color: #7c3aed; }
.build-tool.is-ai:hover:not(:disabled), .build-tool.is-ai.is-active { background: #f5f3ff; color: #5b21b6; }
.build-tool.is-ai:hover:not(:disabled) .build-icon, .build-tool.is-ai.is-active .build-icon { color: #6d28d9; }
/* The AI accent is an affordance — when the button cannot be pressed it greys out
   with every other disabled tool rather than advertising itself. */
.build-tool.is-ai:disabled { color: var(--slate-300); }
.build-tool.is-ai:disabled .build-icon { color: #dbe2ea; }
/* Same for the destructive red in the canvas toolbar. */
.build-canvas-tools .build-tool.is-danger:disabled { color: var(--slate-300); }
.build-canvas-tools .build-tool.is-danger:disabled .build-icon { color: #dbe2ea; }

/* ── Model management landing ──────────────────────────────────────────────
   The studio's front door, and a management screen rather than a dashboard:
   one row per model, dense enough to compare them, with the workflow stage as
   a column you can click straight into.
*/
/* Keeps .build-page's 100vh height so the table scrolls inside the tab. */
.build-landing { display: flex; flex-direction: column; overflow-y: auto; height: 100%; min-height: 0; padding: 0; background: #f1f4f8; }
.build-landing-new { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--accent-primary); color: #fff; font: 700 12.5px Inter, sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), .28); transition: background .12s, transform .12s; }
.build-landing-new:hover { background: var(--accent-primary-dark); }
.build-landing-new:active { transform: translateY(1px); }

/* Kept apart from the main toolbar and table so it can't be clicked by accident. */
.build-tool.is-resume { height: 36px; padding: 0 13px; border: 1px solid var(--accent-primary-200); border-radius: 9px; background: var(--accent-primary-50); color: var(--accent-primary-dark); font-size: 12px; max-width: 300px; overflow: hidden; }
.build-tool.is-resume .build-icon { color: var(--accent-primary-bright); }

/* One toolbar: search and sort on the same line and height. Stage filtering now
   lives as an Excel-style filter on the "Workflow stage" table column instead of
   its own row, so this bar stays short. */
.build-landing-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.build-landing-search { flex: 1 1 280px; max-width: 520px; height: 36px; border-radius: 9px; }
.build-landing-search input { font-size: 12.5px; }
.build-landing-sort { display: inline-flex; align-items: center; gap: 7px; color: var(--slate-500); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.build-landing-sort select { height: 36px; padding: 0 9px; border: 1px solid var(--slate-200); border-radius: 9px; background: #fff; color: var(--slate-700); font: 600 12px Inter, sans-serif; cursor: pointer; }

/* Excel-style column filter on the "Workflow stage" header. The button sits inline
   with the header label; the menu itself is fixed-positioned off the button's
   measured rect so it is never clipped by the table wrap's scroll overflow. */
.build-th-filter { display: inline-flex; align-items: center; gap: 4px; }
.build-th-filter-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text-tertiary); cursor: pointer; }
.build-th-filter-btn:hover { background: var(--accent-primary-50); color: var(--accent-primary-dark); }
.build-th-filter-btn.is-active { background: var(--accent-primary-50); color: var(--accent-primary-dark); }
.build-th-filter-btn .build-icon { width: 11px; height: 11px; }
.build-filter-backdrop { position: fixed; inset: 0; z-index: 30; background: transparent; }
.build-filter-menu { position: fixed; z-index: 31; min-width: 216px; padding: 5px; border: 1px solid #e6ecf4; border-radius: 10px; background: #fff; box-shadow: 0 14px 32px rgba(15,23,42,.16); text-transform: none; letter-spacing: normal; }
.build-filter-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--slate-700); font: 650 12px Inter, sans-serif; text-align: left; cursor: pointer; }
.build-filter-option:hover { background: #f4f7fb; }
.build-filter-option.is-active { background: var(--accent-primary-50); color: var(--accent-primary-dark); }
.build-filter-option-label { display: inline-flex; align-items: center; }
.build-filter-option em { padding: 1px 6px; border-radius: 999px; background: var(--slate-100); color: var(--slate-500); font: 700 10.5px Inter, sans-serif; font-style: normal; }
.build-filter-option.is-active em { background: #fff; color: var(--accent-primary-dark); }
.build-filter-option-index { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--slate-100); color: var(--text-tertiary); font-size: 9.5px; font-weight: 800; margin-right: 7px; }
.build-filter-option.is-active .build-filter-option-index { background: #fff; color: var(--accent-primary-dark); }

.build-models-wrap { border: 1px solid #e6ecf4; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); overflow-x: auto; }
/* Fixed layout: the model column absorbs slack, everything else keeps its width
   and long descriptions truncate instead of shoving the actions off-screen. */
.build-models-table { width: 100%; min-width: 1040px; border-collapse: collapse; table-layout: fixed; }
.build-models-table thead th { position: sticky; top: 0; z-index: 2; padding: 9px 10px; background: var(--slate-50); border-bottom: 1px solid #e6ecf4; color: var(--slate-500); font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.build-models-table thead th.build-models-num,
.build-models-table thead th.build-models-actions { text-align: right; }
.build-models-table td { padding: 10px 10px; border-bottom: 1px solid var(--slate-100); vertical-align: middle; color: var(--slate-700); font-size: 12.5px; }
.build-models-row { transition: background .12s; }
.build-models-row:hover { background: #fbfcfe; }
.build-models-row.is-open { background: #f5f7ff; box-shadow: inset 3px 0 0 var(--accent-primary); }
.build-models-row.is-expanded td { border-bottom-color: transparent; }
.build-models-row.is-new {
  scroll-margin-top: 72px;
  scroll-margin-bottom: 32px;
  box-shadow: inset 3px 0 0 var(--accent-primary);
  animation: build-row-bar 1.9s ease;
}
.build-models-row.is-new td { animation: build-row-arrive 1.9s ease; }
.build-models-row.is-new:hover { background: var(--accent-primary-50); }
.build-model-tag.is-added {
  background: var(--accent-primary);
  color: #fff;
  animation: build-tag-pop .35s ease;
}
@keyframes build-row-bar {
  0%, 55% { box-shadow: inset 3px 0 0 var(--accent-primary); }
  100% { box-shadow: none; }
}
@keyframes build-row-arrive {
  0% { background: var(--accent-primary-100); }
  40% { background: var(--accent-primary-50); }
  100% { background: transparent; }
}
@keyframes build-tag-pop {
  from { transform: scale(.86); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .build-models-row.is-new,
  .build-models-row.is-new td,
  .build-model-tag.is-added { animation: none; }
  .build-models-row.is-new { background: var(--accent-primary-50); box-shadow: inset 3px 0 0 var(--accent-primary); }
  .build-models-row.is-new td { background: var(--accent-primary-50); }
}

.build-models-name { overflow: hidden; }
.build-models-title-row { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.build-models-title-row .build-models-title,
.build-models-title-row .build-models-rename { flex: 1; min-width: 0; }
.build-models-title-row .build-model-tag.is-added { flex: none; }
/* Renaming is an edit of the name, so its affordance sits on the name: quiet until
   the row is under the pointer, then a plain icon button beside it. */
.build-models-title-row .build-models-edit {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-tertiary);
  cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s, border-color .12s;
}
.build-models-edit .build-icon { width: 13px; height: 13px; }
.build-models-row:hover .build-models-edit,
.build-models-edit:focus-visible { opacity: 1; }
.build-models-edit:hover:not(:disabled) { border-color: #dbe4ef; background: #fff; color: var(--accent-primary); }
.build-models-edit:disabled { display: none; }
/* Column widths live on the colgroup so the header row cannot decide them. */
.build-col-stage { width: 186px; }
.build-col-version { width: 76px; }
.build-col-result { width: 152px; }
.build-col-actions { width: 146px; }
.build-models-title { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build-models-title { padding: 0; border: 0; background: transparent; color: var(--slate-900); font: 700 13.5px Inter, sans-serif; text-align: left; cursor: pointer; }
.build-models-title:hover { color: var(--accent-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.build-models-rename { max-width: 320px; font-size: 13px; font-weight: 700; }

/* A note that takes itself away. Drawn at the top level and positioned against the
   input it belongs to, because the table wrap scrolls horizontally and so clips
   anything drawn above a row. The fade is timed against RENAME_HINT_MS, which is
   what actually removes it. */
.build-rename-hint {
  position: fixed;
  z-index: 40;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--slate-900);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
  animation: build-rename-hint 5s ease forwards;
}

.build-rename-hint::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 15px;
  border: 5px solid transparent;
  border-top-color: var(--slate-900);
}

@keyframes build-rename-hint {
  0%   { opacity: 0; transform: translateY(calc(-100% - 3px)); }
  6%   { opacity: 1; transform: translateY(calc(-100% - 8px)); }
  86%  { opacity: 1; transform: translateY(calc(-100% - 8px)); }
  100% { opacity: 0; transform: translateY(calc(-100% - 12px)); }
}

@media (prefers-reduced-motion: reduce) {
  .build-rename-hint { animation: none; transform: translateY(calc(-100% - 8px)); }
}
.build-models-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; min-width: 0; overflow: hidden; }
.build-models-id { color: var(--slate-500); font: 650 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.build-model-tag { padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.build-model-tag.is-live { background: #ecfdf5; color: #047857; }
.build-model-tag.is-current { background: var(--accent-primary); color: #fff; }
.build-model-tag.is-template { background: var(--accent-primary-50); color: var(--accent-primary-dark); }

/* My models is a panel: its heading line, then the table, inside one white card, so the
   list and the controls that act on it read as one block apart from the start panel. */
.build-models-section { margin: 0 0 26px; border: 1px solid #dfe6ee; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); overflow: hidden; }
.build-models-section .build-models-wrap { border: 0; border-top: 1px solid #edf1f5; border-radius: 0; box-shadow: none; }
/* The heading and what it explains sit on one line, so a section's introduction
   uses the width of the page instead of a column down its left edge. */
.build-models-section-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 12px 16px; }
/* The list's own search and sort, at the end of its heading line. */
.build-models-section-head .build-landing-controls { flex: none; flex-wrap: nowrap; margin: 0; }
.build-models-section-head .build-landing-search { flex: none; width: 320px; }
.build-models-section-head h2 { flex: none; }
.build-models-section-head p { flex: 1 1 340px; }
.build-models-section-head p { margin: 0; max-width: none; color: var(--slate-500); font-size: 12.5px; line-height: 1.55; }
.build-models-section-count { flex: none; padding: 1px 9px; border-radius: 999px; background: #e8eef6; color: var(--accent-primary); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.build-models-section .build-landing-empty { padding: 36px 24px; }

/* The workflow as a column: every dot opens the model at that point. */

.build-trail-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.build-trail { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.build-trail-step { position: relative; }
.build-trail-step + .build-trail-step { margin-left: 9px; }
.build-trail-step + .build-trail-step::before { content: ''; position: absolute; top: 8px; left: -9px; width: 9px; height: 2px; background: #e8edf5; }
.build-trail-step.is-done::before, .build-trail-step.is-current::before { background: var(--accent-primary-300); }
.build-trail-step button { position: relative; display: block; padding: 0; border: 0; background: transparent; cursor: pointer; }
.build-trail-dot { display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid var(--slate-200); border-radius: 50%; background: #fff; color: var(--text-tertiary); font-size: 9.5px; font-weight: 800; transition: border-color .12s, background .12s, color .12s, transform .12s; }
.build-trail-step.is-done .build-trail-dot { border-color: var(--accent-primary-300); background: var(--accent-primary-50); color: var(--accent-primary-dark); }
.build-trail-step.is-current .build-trail-dot { border-color: var(--accent-primary); background: var(--accent-primary); color: #fff; box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), .16); }
.build-trail-step button:hover .build-trail-dot { border-color: var(--accent-primary-bright); transform: scale(1.12); }
.build-trail-step button:disabled { cursor: default; opacity: .55; }
.build-trail-step button:disabled:hover .build-trail-dot { transform: none; }
/* The stage name appears on hover, so the row stays compact but stays legible. */
.build-trail-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 5; padding: 3px 7px; border-radius: 6px; background: var(--slate-900); color: #fff; font-size: 10.5px; font-weight: 650; white-space: nowrap; opacity: 0; transform: translateX(-50%) translateY(2px); pointer-events: none; transition: opacity .12s, transform .12s; }
.build-trail-step button:hover .build-trail-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.build-trail-now { flex: none; font-size: 11px; font-weight: 700; color: var(--slate-600); white-space: nowrap; }
.build-trail-now.is-simulate { color: var(--accent-primary); }
.build-trail-now.is-review { color: #b45309; }
.build-trail-now.is-calibrate { color: #7c3aed; }
.build-trail-now.is-deploy { color: #047857; }

.build-models-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.build-models-num { font-weight: 650; color: var(--slate-900); }
.build-models-version { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 7px; border: 1px solid var(--accent-primary-100); border-radius: 7px; background: var(--accent-primary-50); color: var(--accent-primary-dark); font: 700 11.5px Inter, sans-serif; cursor: pointer; }
.build-models-version:hover:not(:disabled) { border-color: var(--accent-primary-300); background: var(--accent-primary-100); }
.build-models-version.is-active { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.build-models-caret { width: 11px; height: 11px; transform: rotate(90deg); }
.build-models-version.is-active .build-models-caret { transform: rotate(-90deg); }
.build-models-meta { color: var(--slate-500); font-size: 11px; font-weight: 600; white-space: nowrap; }

th.build-models-actions, td.build-models-actions { white-space: nowrap; text-align: right; padding-right: 16px; }
.build-models-table thead th.build-models-result { text-align: left; }
td.build-models-result { vertical-align: middle; }
.build-models-actions .build-tool.is-small { height: 32px; }
.build-models-open-btn { height: 32px; }
.build-models-action-grid { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 8px; align-items: center; }
.build-models-rename-actions { display: grid; grid-template-columns: 76px 62px; gap: 6px; justify-content: end; }
.build-models-rename-actions .build-models-open-btn,
.build-models-rename-actions .build-tool { width: 100%; justify-content: center; }
.build-models-row:has(.build-models-rename) { background: #f5f7ff; box-shadow: inset 3px 0 0 var(--accent-primary); }
.build-models-title:disabled { color: var(--text-tertiary); cursor: not-allowed; text-decoration: none; }
.build-models-action-grid > button { width: 100%; justify-content: center; text-align: center; }
.build-models-open-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 0; border-radius: 8px; background: var(--accent-primary); color: #fff; font: 650 13px Inter, sans-serif; letter-spacing: -.005em; cursor: pointer; box-shadow: 0 1px 2px rgba(var(--accent-primary-rgb), .24); transition: background .12s, box-shadow .12s; }
.build-models-open-btn:hover:not(:disabled) { box-shadow: 0 2px 6px rgba(var(--accent-primary-rgb), .30); }
.build-models-open-btn:hover:not(:disabled) { background: var(--accent-primary-dark); }
.build-models-open-btn:disabled { background: var(--accent-primary-200); cursor: not-allowed; }
.build-tool.is-small { height: 27px; padding: 0 8px; border: 1px solid #e8edf5; border-radius: 7px; background: var(--slate-50); font-size: 11px; }
.build-tool.is-small:hover:not(:disabled) { background: #fff; border-color: #dbe4ef; }

.build-models-versions-row > td { padding: 0 12px 12px; background: #fbfcfe; }
.build-versions { border: 1px solid #e8edf5; border-radius: 9px; background: #fff; overflow: hidden; }
.build-versions.is-loading { padding: 12px; color: var(--text-tertiary); font-size: 12px; }
.build-versions-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.build-versions-table th { padding: 7px 11px; background: #f4f7fb; color: var(--slate-500); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; text-align: left; }
.build-versions-table td { padding: 7px 11px; border-top: 1px solid #eef2f7; color: var(--slate-700); white-space: nowrap; }
.build-versions-table tr.is-current { background: #f5f7ff; }
.build-versions-tag { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--accent-primary); color: #fff; font: 700 9px Inter, sans-serif; font-style: normal; }
.build-versions-tag.is-draft { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-color); }
.build-versions-actions { display: flex; gap: 5px; justify-content: flex-end; }

.build-landing-empty { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 52px 24px; text-align: center; }
.build-landing-empty strong { color: var(--slate-700); font-size: 14.5px; }
.build-landing-empty p { max-width: 52ch; margin: 0 0 6px; color: var(--slate-500); font-size: 12.5px; line-height: 1.5; }

.build-models-id, .build-models-sub .build-model-tag { flex: none; }
.build-models-meta { flex: none; }
.build-models-blurb { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--slate-500); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Review bench, embedded in the stage ─────────────────────────────────── */
/* The bench is production Alerts/Cases markup rendered inside the stage, so it
   only needs the stage's width and rhythm — the components bring their own look. */
.build-stage-bench { max-width: 1180px; margin: 0 auto; }
.build-stage-bench .filters-bar { margin-bottom: 12px; }
.build-stage-bench .page-header { margin-bottom: 12px; }
.build-stage-bench .data-table-wrap { background: #fff; border: 1px solid #e6ecf4; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.build-stage-bench .prego-empty { background: #fff; }

/* The bench's own table sits comfortably in the normal page flow at the same width
   as every other card on this stage — no separate boxed layout, so switching to
   Alert queue or Cases is not a jump to a different kind of page. */
.build-stage-bench .data-table { min-width: 1080px; font-size: 14px; }
.build-stage-bench .data-table td { padding: 13px 14px; vertical-align: middle; }
.build-stage-bench .loading-state { display: grid; min-height: 260px; place-items: center; }

/* ── Below-the-line testing ─────────────────────────────────────────────────
   Calibrating is a loop, not a screen: sweep a band, narrow it, commit, then go
   round again. The rounds stack downwards so narrowing stays readable, and the
   laps of the wider loop sit above them for comparison.
*/

.build-round { position: relative; margin-top: 14px; }
/* The line down the left is the narrowing: each round is a step further in. */
.build-round::before { content: ''; position: absolute; top: -14px; left: 22px; width: 2px; height: 14px; background: var(--accent-primary-200); }
.build-round:first-of-type::before { display: none; }
.build-round.is-last { border-color: var(--accent-primary-200); box-shadow: 0 0 0 3px var(--accent-primary-50); }
.build-round-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.build-round-head h3 { margin: 0; }
.build-round-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.build-round-actions em { color: var(--accent-primary-dark); font-size: 13px; font-style: normal; font-weight: 700; }
.build-round-actions .build-tool { height: 32px; padding: 0 11px; border: 1px solid #e8edf5; border-radius: 7px; background: var(--slate-50); font-size: 13px; }
.build-round-actions .build-models-open-btn { height: 32px; padding: 0 12px; font-size: 13px; }

.build-cycles .build-stage-note { margin-top: 12px; }
.build-stage-note.is-warn { border-color: #fde68a; border-left-color: #f59e0b; background: #fffbeb; color: #92400e; }
.build-stage-note.is-warn strong { color: #b45309; }
.build-stage-note.is-ready { border-color: #a7f3d0; border-left-color: #10b981; background: #ecfdf5; color: #065f46; }
.build-stage-note.is-ready strong { color: #047857; }
.build-stage-note .build-tool { flex: none; height: 34px; padding: 0 13px; border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; }
.build-stage-note .build-run { flex: none; height: 34px; }

/* Below-the-line controls: key parameters and an ordered walk away from the line. */
/* The run settings as a dialog rather than a popover pinned to the Configure button.
   Anchored, it was taller than the space below the button and the last two controls were
   unreachable — and a panel you cannot scroll to the bottom of is a panel whose bottom
   half may as well not exist. */
/* .build-info-dialog pins every dialog to 620px and is declared later in this file, so
   the config dialog has to out-specify it rather than merely restate the width. */
.build-info-dialog.build-config-dialog { width: min(720px, 92vw); max-height: 88vh;
  overflow-y: auto; padding: 24px 28px 22px; }
.build-config-dialog .build-config-intro { margin: 0; color: var(--text-secondary);
  font-size: 13.5px; line-height: 1.55; }

/* Sections are rows separated by a rule, not cards. Boxed, the short sections left voids
   the long ones did not fill, and the date panel became a card inside a card. */
/* Each question is a tinted card, which is what separates them at a glance — a plain rule
   between sections made the dialog read as one long list. Fully restated rather than
   partly overridden: an older .build-config-section rule higher in this file paints its
   own blue panel, and inheriting half of it gave rows a background AND a divider. */
.build-config-dialog .build-config-section { margin: 14px 0 0; padding: 16px 18px 18px;
  border: 1px solid #e9eef6; border-radius: 12px; background: var(--slate-50); }
.build-config-dialog .build-config-section > h3 { margin: 0; color: var(--slate-400); font-size: 10.5px;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.build-config-section-help { margin: 5px 0 0; color: var(--text-secondary); font-size: 13.5px;
  line-height: 1.5; }
.build-config-fields { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
/* A control sitting straight under the section's sentence needs the same air the grouped
   ones get from .build-config-fields. */
.build-config-dialog .build-config-section > .build-param,
.build-config-dialog .build-config-section > .build-config-pair { margin-top: 14px; }
/* The CONTROL on a row of its own keeps the left column's width, so its right edge lines
   up with the paired fields above it rather than running the whole card for one digit.
   Its sentence is not constrained: wrapped into half a row it made a tall narrow column
   with dead space beside it. */
.build-config-dialog .build-config-section > .build-param > .input,
.build-config-dialog .build-config-fields > .build-param > .input { max-width: calc(50% - 10px); }
/* Two across, and the same two tracks in every section so every field edge lines up. */
.build-config-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
  align-items: start; }
.build-config-dialog .build-param { display: flex; flex-direction: column; min-width: 0; }
.build-config-dialog .build-param-label { margin-bottom: 5px; }
.build-config-dialog .build-param-help { margin-top: 5px; line-height: 1.5; }
.build-config-dialog .input { width: 100%; }

/* The loaded-data strip: a band the section owns, not a panel floating inside it. */
.build-config-dialog .build-range-line { display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px 10px; padding: 9px 12px; border: 1px solid #e9eef6; border-radius: 8px;
  background: #fff; }
.build-config-dialog .build-range-presets { display: flex; flex-wrap: wrap; gap: 6px; }

.build-config-actions { position: sticky; bottom: -22px; display: flex; align-items: center;
  gap: 10px; margin: 16px -28px -22px; padding: 14px 28px; border-top: 1px solid #eef2f7;
  background: #fff; }
.build-config-actions .build-config-note { flex: 1; min-width: 0; margin: 0;
  color: var(--text-tertiary); font-size: 12.5px; line-height: 1.4; }
.build-config-actions .build-run:disabled { opacity: .5; cursor: default; }
@media (max-width: 620px) { .build-config-pair { grid-template-columns: 1fr; } }

.build-btl-composition { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; margin-top: 14px; padding: 11px 13px; border: 1px solid var(--accent-primary-200); border-radius: 10px; background: var(--accent-primary-50); }
.build-btl-composition > span { color: var(--accent-primary-bright); font-size: 11px; font-weight: 850; letter-spacing: .09em; }
.build-btl-composition > strong { color: var(--accent-primary-deep); font-size: 14px; }
.build-btl-composition > p { grid-column: 2; margin: 0; color: var(--slate-500); font-size: 13px; line-height: 1.45; }
/* The finish line, stated before the bands are tested. Built from this screen's own
   field and kicker vocabulary rather than .build-objective, which styles a read-out and
   has no rule for an input. */
.build-band-floor { display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 4px 14px; margin-top: 14px; padding: 11px 13px; border: 1px solid #ddd6fe;
  border-radius: 10px; background: #f5f3ff; }
.build-band-floor > span { grid-column: 1 / -1; color: #6d28d9; }
.build-band-floor label { display: inline-flex; align-items: center; gap: 7px;
  color: var(--slate-800); font-size: 14px; font-weight: 700; white-space: nowrap; }
.build-band-floor input { width: 78px; height: 32px; padding: 0 8px; border: 1px solid #ddd6fe;
  border-radius: 7px; background: #fff; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.build-band-floor label em { color: #6d28d9; font-style: normal; font-weight: 700; }
.build-band-floor p { margin: 0; color: var(--slate-500); font-size: 13px; line-height: 1.45; }
.build-band-floor-error { grid-column: 1 / -1; color: var(--accent-red, #dc2626); font-weight: 650; }
/* Scoped past .build-btl-evidence.is-<tone> small, which paints the cell's detail line
   grey — the verdict has to keep its own colour inside a cell that is already toned. */
.build-btl-evidence .build-band-target { margin-top: 3px; font-weight: 700; }
.build-btl-evidence .build-band-target.is-met { color: #047857; }
.build-btl-evidence .build-band-target.is-missed { color: #b91c1c; }
.build-btl-evidence .build-band-target.is-thin,
.build-btl-evidence .build-band-target.is-unjudged { color: var(--text-tertiary); }

.build-btl-parameter-groups { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.build-btl-param-group { overflow: hidden; border: 1px solid var(--slate-200); border-radius: 11px; background: var(--slate-50); }
.build-btl-param-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-bottom: 1px solid var(--slate-200); background: #fff; }
.build-btl-param-group > header > div { min-width: 0; }
.build-btl-param-group > header span { display: block; color: #7c3aed; font-size: 11px; font-weight: 850; letter-spacing: .09em; }
.build-btl-param-group > header h4 { overflow: hidden; margin: 1px 0 0; color: var(--slate-800); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.build-btl-param-group > header em { flex: none; padding: 3px 7px; border-radius: 999px; background: #ede9fe; color: #6d28d9; font-size: 12px; font-style: normal; font-weight: 750; }
.build-param-table .build-btl-seg { overflow: hidden; border: 1px solid var(--slate-200); border-radius: 9px; background: #fff; }
.build-btl-seg.is-on { border-color: var(--accent-primary); box-shadow: inset 0 0 0 1px var(--accent-primary-200); }
.build-btl-seg > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #eef2f7; background: #f8faff; }
.build-btl-seg-all { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.build-btl-seg-all input { margin-top: 3px; accent-color: var(--accent-primary); }
.build-btl-seg-all span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.build-btl-seg-all strong { color: var(--slate-900); font-size: 14px; font-weight: 700; }
.build-btl-seg-all small { color: var(--slate-500); font-size: 12.5px; line-height: 1.4; }
.build-btl-seg > header > em { flex: none; margin-top: 2px; padding: 3px 7px; border-radius: 999px; background: #f5d0fe; color: #a21caf; font-size: 11px; font-style: normal; font-weight: 750; }
.build-btl-seg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.build-btl-seg-table th { text-align: left; color: var(--slate-500); font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; padding: 7px 10px; background: #fbfcfe; }
.build-btl-seg-table td { padding: 8px 10px; border-top: 1px solid #eef2f7; color: var(--slate-700); vertical-align: middle; }
.build-btl-seg-table tr.is-on td { background: var(--accent-primary-50); }
.build-btl-seg-table td:first-child, .build-btl-seg-table th:first-child { width: 28px; padding-right: 0; }
.build-btl-seg-table input[type="checkbox"] { accent-color: var(--accent-primary); }
.build-btl-seg-table td strong { display: block; color: var(--slate-900); font-size: 13px; }
.build-btl-seg-table td i { margin-left: 6px; color: #a21caf; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.build-btl-seg-table td small { display: block; color: var(--text-tertiary); font-size: 11px; }
.build-btl-seg-table .input { width: 118px; height: 32px; padding: 0 8px; font-size: 13px; }
.build-btl-seg-table td:nth-child(3), .build-btl-seg-table td:nth-child(4) { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-primary-dark); }

.build-band-action { display: grid; grid-template-columns: minmax(200px, 1fr) auto auto auto; align-items: center; gap: 9px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--accent-primary-100); border-radius: 11px; background: var(--accent-primary-50); }
.build-band-action > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.build-band-action > div > span { color: var(--accent-primary-bright); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.build-band-action > div > strong { overflow: hidden; color: #172554; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.build-band-action > div > small { color: var(--slate-500); font-size: 13px; }
.build-band-action .build-run, .build-band-action .build-tool { height: 34px; white-space: nowrap; }
.build-band-action .build-tool { border: 1px solid var(--slate-300); background: #fff; }
.build-calib-progress { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--accent-primary-100); border-radius: 11px; background: #fff; }
.build-calib-progress .build-sim-progress { max-width: none; margin: 0; }
.build-band-choice { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 10px; }
.build-band-choice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.build-band-choice-row > span { min-width: 58px; color: var(--slate-600); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.build-band-choice-row label { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--slate-300); border-radius: 999px; background: #fff; color: var(--slate-700); font-size: 13px; font-weight: 600; cursor: pointer; }
.build-band-choice-row label.is-on { border-color: var(--accent-primary-300); background: var(--accent-primary-50); color: var(--accent-primary); }
.build-band-choice-row input { margin: 0; }

/* Top, not middle. The count cells carry two lines each, so a centred band name and a
   centred threshold floated in the middle of a tall row while the numbers beside them
   started at the top — every row read as slightly out of true. */
.build-btl-table td { vertical-align: top; padding-top: 11px; padding-bottom: 11px; }
/* Fixed layout. Each round is its own table, so auto layout sized every one of them to
   its own longest cell and the columns drifted down the page — round 6's header sat
   nowhere near round 3's. The widths are declared here once for all of them. */
.build-btl-table { table-layout: fixed; }
.build-btl-col-band { width: 7%; }
.build-btl-col-moves { width: 17%; }
/* Each of the three count columns now carries an alert figure and the entity figure
   under it, so 8% clipped the second line onto three. */
.build-btl-col-grain { width: 11%; }
.build-btl-col-evidence { width: 21%; }
/* The two buttons are a fixed amount of text, so the column that holds them is a fixed
   width rather than a share of the table. Stacked rather than side by side: side by side
   they claimed 272px of a table whose other columns were wrapping to find room, for two
   controls that are pressed once each. */
.build-btl-col-actions { width: 168px; }
/* Fixed columns clip rather than stretch, so anything that was only readable because
   the column grew to fit it has to be allowed to wrap instead. */
.build-btl-table th { white-space: normal; }
.build-btl-table td { white-space: normal; overflow-wrap: anywhere; }
.build-btl-table .build-round-actions { align-items: stretch; flex-direction: column;
  justify-content: flex-start; gap: 6px; }
/* One width and one height for both, so the pair reads as a set — side by side the
   plain button came out 36px against the blue one's 32 and the row looked out of true. */
.build-btl-table .build-round-actions > button {
  width: 100%; height: 34px; padding: 0 10px; white-space: nowrap; }
/* The two header rows. Sticky is off for this table: both rows would pin to top: 0 and
   sit on top of each other, and a band table inside a round card is short enough that
   the header was never far away. */
.build-btl-table thead th { position: static; }
/* A rule under the label, the width of the columns it covers — so the eye is told
   where each ledger starts and stops without another vertical line. */
.build-btl-table td:nth-child(3), .build-btl-table td:nth-child(5) { border-left: 1px solid #eef2f7; }
/* Alert count over entity count, in one cell. The numbers are the reason the row
   exists, so they lead; the unit is a label under each rather than a column heading a
   reader has to carry across the table. */
.build-btl-grain { vertical-align: top; }
/* The three lines never wrap: "0 accounts" broken across two rows reads as two
   separate figures, and the column is sized to hold them whole. */
.build-btl-grain strong { display: block; color: var(--slate-900); font-size: 19px; font-weight: 700;
  line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.build-btl-grain span { display: block; color: var(--slate-500); font-size: 11px; white-space: nowrap; }
.build-btl-grain em { display: block; margin-top: 5px; color: var(--slate-700); font-size: 13px;
  font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.build-btl-grain em.is-note { color: var(--text-tertiary); font-size: 11px; font-weight: 400;
  line-height: 1.3; white-space: normal; }
.build-cycles-waiting { margin: 0 0 14px; padding: 10px 13px; border: 1px dashed var(--slate-300);
  border-radius: 9px; background: var(--slate-50); color: var(--slate-500); font-size: 13px; line-height: 1.5; }

/* Nothing measured yet: the section says what would fill it rather than vanishing. */
.build-cycles.is-empty .build-stage-copy { margin: 0; }

/* The line today against each band. A grid rather than a flex row, so the four parts
   of every row share one set of columns and the bars all start at the same x. */
.build-band-compare { margin: 14px 0 0; padding: 13px 15px; border: 1px solid var(--slate-200);
  border-radius: 11px; background: #fbfdff; }
.build-band-compare h4 { margin: 0 0 9px; color: var(--slate-800); font-size: 14px; }
.build-band-compare ul { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto auto;
  align-items: center; gap: 7px 12px; margin: 0; padding: 0; list-style: none; }
.build-band-compare li { display: contents; }
.build-band-compare-label { color: var(--slate-600); font-size: 13px; }
.build-band-compare li.is-today .build-band-compare-label { color: var(--slate-900); font-weight: 700; }
/* The track is the bar: its width is the row's share of the widest queue, and the span
   inside it is the share of that queue the verdicts say is worth working. */
.build-band-compare-bar { display: block; height: 15px; border-radius: 4px; background: var(--accent-primary-100); }
.build-band-compare-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent-primary); }
.build-band-compare li.is-today .build-band-compare-bar { background: var(--slate-200); }
.build-band-compare li.is-today .build-band-compare-bar i { background: var(--slate-600); }
.build-band-compare-figure { color: var(--slate-500); font-size: 12px; white-space: nowrap; }
.build-band-compare-figure b { color: var(--slate-900); font-size: 14px; font-variant-numeric: tabular-nums; }
.build-band-compare-figure em { margin-left: 7px; padding: 1px 6px; border-radius: 999px;
  background: var(--accent-primary-100); color: var(--accent-primary-dark); font-size: 11px; font-style: normal; font-weight: 700; }
.build-band-compare > p { margin: 10px 0 0; color: var(--slate-500); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 1100px) {
  .build-band-compare ul { grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); }
  .build-band-compare-figure { grid-column: 2; }
}

/* The line as it stands, and the grain everything in the table is counted at. */
.build-round-grain { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
  margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--slate-200); border-radius: 9px;
  background: var(--slate-50); color: var(--slate-600); font-size: 13px; }
.build-round-grain b { color: var(--slate-900); font-weight: 700; font-variant-numeric: tabular-nums; }
.build-round-grain em { color: var(--slate-500); font-size: 12px; font-style: normal; }
.build-round-grain em::before { content: '·'; margin-right: 12px; color: var(--slate-300); }
.build-btl-values { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.build-btl-values span { color: var(--slate-500); font-size: 13px; white-space: nowrap; }
.build-btl-values em { color: var(--slate-900); font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Before and after on one line: the old value struck through, the new one carrying the
   weight, so the move a reviewer has to defend reads at a glance. */
.build-threshold-move { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
/* One line, clipped with an ellipsis, full name on hover. The column is a fixed share
   of the table, so a name left to run its own length printed over the count beside it. */
.build-threshold-move b { overflow: hidden; color: var(--slate-600); font-size: 12.5px;
  font-weight: 650; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.build-threshold-values { display: flex; align-items: baseline; gap: 5px; }
.build-threshold-was { color: var(--text-tertiary); font-size: 13px; text-decoration: line-through; font-variant-numeric: tabular-nums; }
.build-threshold-move i { color: var(--accent-primary-300); font-size: 12px; font-style: normal; }
/* A band holding confirmed laundering is the finding the whole test exists to surface. */
.build-btl-table tr.is-productive { background: #fff7ed; box-shadow: inset 3px 0 0 #f59e0b; }
.build-btl-table tr.is-productive td { color: #9a3412; }
.build-stage-copy.is-finding { margin-top: 10px; padding: 9px 11px; border-radius: 8px; background: #fff7ed; color: #9a3412; }
.build-stage-copy.is-finding strong { color: #b45309; }

@media (max-width: 760px) {
  .build-band-action { grid-template-columns: 1fr 1fr; }
  .build-band-action > div { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .build-btl-composition { grid-template-columns: 1fr; }
  .build-btl-composition > p { grid-column: auto; }
  .build-band-action { grid-template-columns: 1fr; }
  .build-band-action > div { grid-column: auto; }
  .build-band-action .build-run, .build-band-action .build-tool { width: 100%; }
}

/* ── Stage consistency ─────────────────────────────────────────────────────
   A stage whose evidence describes an earlier version of the rule says so, in the
   step bar and on its own screen, in the same words each time.
*/
/* Sits inline beside the label: the stage bar's buttons are full-height tabs, so
   there is no pill corner left to pin a badge to. */
.build-step-mark { display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 800; line-height: 1; }
.build-step button { position: relative; }
.build-step-mark.is-stale { background: var(--accent-primary-400); color: #fff; }
.build-step-mark.is-waiting { background: #fbbf24; color: #78350f; }
.build-step-mark.is-blocked { background: transparent; font-size: 10px; }
.build-step.is-state-stale .build-step-dot { border-color: var(--accent-primary-400); }
.build-step.is-state-stale .build-step-label { color: inherit; }
/* The step you are on takes the tab's own colour. It used to be forced white for a
   filled pill that no longer exists, which left the current step's label invisible
   against the white bar — the "!" mark beside it was all that showed. */
.build-step.is-current.is-state-stale .build-step-label { color: inherit; }
.build-link { padding: 0; border: 0; background: none; color: var(--accent-primary-dark); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.build-link:hover { color: #172554; }

/* A locked action still reads as an action, just one that is not available yet. */
.build-tool.is-small.is-locked { color: var(--text-tertiary); background: var(--slate-50); border-style: dashed; }

/* ── Stage panels ──────────────────────────────────────────────────────────
   Every stage is the same shape: one column, blocks of equal width, and the
   actions for a stage sitting inside the panel whose evidence they act on.
*/
/* Centred with align-self, not auto margins: auto margins on the cross axis stop a
   flex item stretching, which shrink-wraps the stage to its widest child. */
.build-stage { width: 100%; max-width: 1480px; align-self: center; }
.build-stage-block { box-sizing: border-box; }
.build-stage-grid > .build-stage-block { min-height: 100%; }
/* Buttons that sit side by side are sized alike rather than by their labels. */
.build-tool.is-wide, .build-run.is-wide { min-width: 140px; height: 38px; justify-content: center; text-align: center; }
.build-stage-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.build-stage-block-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--slate-100); }
.build-tool.is-wide.is-danger { color: #dc2626; border-color: #fecaca; }
.build-tool.is-wide.is-danger:hover:not(:disabled) { background: #fff1f2; }

/* ── Design lock ──────────────────────────────────────────────────────────
   A version that has already been simulated is read-only: editing it further would
   make the measurement — and anything Ops did with it — describe a rule that no
   longer exists. Fieldsets cascade `disabled` to every control inside them, so the
   lock is enforced once per surface rather than input by input.
*/

.build-editor-lock { margin: 0 20px 0; }
.build-editor-lock.is-warn { margin-top: 0; }

.build-canvas-hint.is-locked { display: flex; align-items: center; gap: 8px; bottom: 18px; padding: 8px 14px; pointer-events: auto; border-color: #fde68a; background: #fffbeb; color: #92400e; font-size: 11.5px; font-weight: 600; }
.build-canvas-hint.is-locked .build-icon { width: 13px; height: 13px; color: #b45309; }
.build-canvas-hint.is-locked .build-link { color: #b45309; font-weight: 700; }
.build-canvas-hint.is-locked .build-link:hover { color: #78350f; }

.build-library-lock .build-new-model-create.is-danger { background: #dc2626; }
.build-library-lock .build-new-model-create.is-danger:hover:not(:disabled) { background: #b91c1c; }

/* Bulk selection on the model list. The tick column is narrow and fixed; the action
   bar only exists while something is selected, so the list is unchanged until then. */

.build-col-pick { width: 40px; }
.build-models-table th.build-models-pick,
.build-models-table td.build-models-pick { padding-right: 0; text-align: center; }
.build-models-pick input { width: 15px; height: 15px; accent-color: var(--accent-primary); cursor: pointer; }
.build-models-pick input:disabled { cursor: default; opacity: .45; }
/* Floating, not inline: position: fixed takes it out of document flow entirely, so
   its appearance/disappearance never shifts the controls or table beneath it. */
.build-landing-bulk {
  position: fixed; left: 50%; bottom: 26px; z-index: 32;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 16px; border: 1px solid var(--accent-primary-200); border-radius: 12px;
  background: var(--accent-primary-50); box-shadow: 0 14px 36px rgba(30, 58, 138,.22);
  transform: translate(-50%, 0);
  animation: build-bulk-in .16s ease;
}
.build-landing-bulk[hidden] { display: none; }
.build-landing-bulk strong { font: 700 12.5px Inter, sans-serif; color: var(--accent-primary-deep); margin-right: 2px; white-space: nowrap; }
.build-landing-bulk .build-tool.is-danger { border-color: #fecaca; color: #b91c1c; }
.build-landing-bulk .build-tool.is-danger:hover:not(:disabled) { background: #fef2f2; }
.build-landing-bulk-clear { margin-left: 4px; border: 0; background: none; color: var(--accent-primary-dark); font: 600 12px Inter, sans-serif; cursor: pointer; }
@keyframes build-bulk-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .build-landing-bulk { animation: none; }
}

/* The "i" on a library item, and the panel it opens. The button stays reachable when
   the design is locked or no model is open — reading about a component is not editing
   one — so it is not inside the item's own click target. */
.build-library-info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 1px solid var(--slate-300); border-radius: 50%; background: #fff; color: var(--slate-500); font: 700 10px/1 Georgia, 'Times New Roman', serif; font-style: italic; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.build-library-info:hover { border-color: var(--accent-primary); background: var(--accent-primary); color: #fff; }
.build-library-info:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

.build-info-dialog { width: min(620px, 94vw); max-height: 88vh; overflow: auto; padding: 20px 22px 22px; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(15,23,42,.28); }
.build-info-dialog header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.build-info-dialog header > div { flex: 1; min-width: 0; }
.build-info-dialog h2 { margin: 2px 0 0; font-size: 19px; letter-spacing: -.02em; }
.build-info-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #e5eaf2; border-radius: 9px; background: var(--slate-50); font-size: 16px; }
.build-info-lead { margin: 0 0 14px; color: var(--slate-600); font-size: 13px; line-height: 1.5; }
.build-info-flow { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.build-info-flow > section { padding: 11px 13px; border: 1px solid #e5eaf2; border-radius: 10px; background: var(--slate-50); }
.build-info-dialog h3 { margin: 0 0 7px; color: var(--slate-500); font-size: 9.5px; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.build-info-ports { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.build-info-ports li { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.build-info-ports strong { font-weight: 650; color: var(--slate-900); }
.build-info-ports em { margin-left: auto; padding: 1px 6px; border-radius: 5px; background: #eef2f7; color: var(--slate-500); font-size: 10px; font-style: normal; }
.build-info-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.build-info-empty { margin: 0; color: var(--text-tertiary); font-size: 11.5px; font-style: italic; }
.build-info-block { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #e5eaf2; border-radius: 10px; }
.build-info-block p { margin: 0; color: var(--slate-600); font-size: 12.5px; line-height: 1.55; }
.build-info-block.is-note { border-color: #ddd6fe; background: #f5f3ff; }
.build-info-block.is-note p { color: #4c1d95; }
.build-info-settings { display: grid; grid-template-columns: minmax(120px,auto) 1fr; gap: 6px 14px; margin: 0; }
.build-info-settings dt { color: var(--slate-900); font-size: 12px; font-weight: 650; }
.build-info-settings dd { margin: 0; color: var(--slate-500); font-size: 11.5px; line-height: 1.5; }
.build-info-designonly { margin: 0; padding: 10px 13px; border-radius: 9px; background: #fffbeb; color: #92400e; font-size: 11.5px; line-height: 1.5; }

.build-ai-dialog, .build-ai-notes {
  width: min(560px, calc(100vw - 40px)); max-height: 88vh; overflow: auto;
  border: 1px solid #ddd6fe; border-radius: 15px; background: #fff;
  box-shadow: 0 28px 75px rgba(15,23,42,.30);
}
.build-ai-dialog header, .build-ai-notes header {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px 16px; border-bottom: 1px solid #ede9fe;
  background: linear-gradient(120deg, #f5f3ff, #fff 65%);
}
.build-ai-dialog header strong, .build-ai-notes h2 { margin: 2px 0 0; color: var(--slate-900); font-size: 18px; letter-spacing: -.02em; }
.build-ai-dialog header p { margin: 5px 0 0; max-width: 48ch; color: var(--slate-500); font-size: 12px; line-height: 1.5; }
.build-ai-dialog header > div, .build-ai-notes header > div { flex: 1; min-width: 0; }
.build-ai-dialog header .build-info-icon, .build-ai-notes header .build-info-icon { color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff; }
.build-ai-dialog header .build-info-icon .build-icon,
.build-ai-notes header .build-info-icon .build-icon { width: 18px; height: 18px; }
.build-ai-dialog > label { display: block; padding: 18px 22px 8px; color: var(--slate-600); font-size: 11.5px; font-weight: 700; }
.build-ai-prompt { width: 100%; min-height: 132px; margin-top: 7px; padding: 10px 12px; resize: vertical; font: 400 13px/1.45 Inter, sans-serif; }
.build-ai-replace { margin: 0 22px 8px; padding: 8px 11px; border-radius: 8px; background: #fffbeb; color: #92400e; font-size: 11.5px; line-height: 1.45; }
.build-ai-replace.is-keep { background: #f5f3ff; color: #5b21b6; }
.build-ai-key-hint { margin: 6px 0 0; color: var(--text-tertiary); font-size: 11px; }
/* Inside the Design and Modify dialog a hint keeps the body's 22 px inset, as the label and
   the notes above it do; with only the default margin it sat flush with the dialog's edge. */
.build-ai-dialog > .build-ai-key-hint { margin: 4px 22px 0; line-height: 1.45; }
.build-ai-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 18px; }
.build-ai-progress { margin: 0 22px 18px; color: #6d28d9; font-size: 12px; }
.build-ai-notes { width: min(620px, calc(100vw - 40px)); padding-bottom: 18px; }
.build-ai-explanation { margin: 16px 22px 12px; color: var(--slate-700); font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.build-ai-notes .build-info-block { margin: 0 22px 14px; }
.build-ai-thresholds { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.build-ai-thresholds button {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 2px 10px;
  width: 100%; padding: 9px 11px; border: 1px solid #e5eaf2; border-radius: 9px;
  background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.build-ai-thresholds button:hover { border-color: #c4b5fd; background: #f5f3ff; }
.build-ai-thresholds strong { color: var(--slate-900); font-size: 12.5px; }
.build-ai-thresholds small { grid-column: 1 / -1; color: var(--slate-500); font-size: 11.5px; line-height: 1.45; }
.build-ai-suggested { grid-column: 1; color: #5b21b6; font-size: 11px; font-weight: 650; }
.build-ai-action { padding: 1px 7px; border-radius: 999px; background: var(--slate-100); color: var(--slate-600); font-size: 10px; font-style: normal; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; }
.build-ai-action.is-calculate { background: #ede9fe; color: #6d28d9; }
.build-ai-action.is-set_value { background: var(--accent-primary-50); color: var(--accent-primary-dark); }
.build-ai-action.is-added { background: #ecfdf5; color: #047857; }
.build-ai-action.is-removed { background: #fef2f2; color: #b91c1c; }
.build-ai-action.is-updated { background: var(--accent-primary-50); color: var(--accent-primary-dark); }
.build-ai-action.is-rewired { background: #f5f3ff; color: #6d28d9; }
.build-ai-action.is-check { background: #fffbeb; color: #b45309; }
.build-ai-action.is-corrected { background: #ecfdf5; color: #047857; }
.build-ai-guess-banner {
  margin: 0 22px 12px; padding: 10px 12px; border-radius: 9px;
  background: #fffbeb; color: #92400e; font-size: 12.5px; line-height: 1.45;
}
.build-info-block.is-check { padding: 10px 12px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; }
.build-info-block.is-check h3 { color: #92400e; }
.build-ai-thresholds button:disabled { cursor: default; opacity: .92; }
.build-ai-warnings { margin: 0; padding-left: 18px; color: #4c1d95; font-size: 12px; line-height: 1.45; }
.build-ai-errors { margin: 0 22px 8px; padding: 10px 12px; border-radius: 9px; background: #fef2f2; color: #b91c1c; font-size: 12px; line-height: 1.45; }

/* The measured distribution behind a calculated threshold. Horizontal bars because
   the rows are simultaneously a magnitude comparison and the list of candidate
   answers — a percentile is chosen by clicking the one you want, so the mark has to
   be a comfortable target and carry its own label. The selected row is the only
   coloured one; every row is named, so colour is never the only signal. */
.build-pct-panel { margin: 4px 0 2px; padding: 13px 14px 12px; border: 1px solid #e5eaf2; border-radius: 11px; background: var(--slate-50); }
.build-pct-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.build-pct-panel > header p { margin: 2px 0 0; color: var(--text-tertiary); font-size: 10.5px; }
.build-pct-panel > header em { flex: 0 0 auto; color: var(--accent-primary); font-size: 10.5px; font-style: normal; font-weight: 650; }
.build-pct-panel > header em.build-pct-note { color: var(--text-tertiary); font-weight: 500; max-width: 190px; text-align: right; line-height: 1.4; }
.build-pct-rows { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.build-pct-row { display: grid; grid-template-columns: 46px 1fr auto 74px; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border: 1px solid transparent; border-radius: 7px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .12s, border-color .12s; }
.build-pct-row:hover:not(:disabled) { background: var(--accent-primary-50); border-color: var(--accent-primary-200); }
.build-pct-row:disabled { cursor: default; }
.build-pct-row.is-selected { background: var(--accent-primary-50); border-color: var(--accent-primary); }
.build-pct-name { color: var(--slate-500); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.build-pct-row.is-selected .build-pct-name { color: var(--accent-primary-deep); }
.build-pct-track { height: 8px; overflow: hidden; border-radius: 4px; background: #e8edf5; }
.build-pct-track i { display: block; height: 100%; border-radius: 4px; background: var(--slate-400); transition: background .12s; }
.build-pct-row.is-selected .build-pct-track i,
.build-pct-row:hover:not(:disabled) .build-pct-track i { background: var(--accent-primary); }
.build-pct-value { color: var(--slate-900); font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.build-pct-share { color: var(--text-tertiary); font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.build-pct-foot { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--slate-200); }
.build-pct-foot span { display: block; color: var(--text-tertiary); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.build-pct-foot strong { display: block; margin-top: 2px; color: var(--slate-900); font-size: 12px; font-variant-numeric: tabular-nums; }
.build-pct-explain { margin: 10px 0 0; color: var(--slate-500); font-size: 11px; line-height: 1.5; }
.build-pct-warning { margin: 8px 0 0; padding: 8px 10px; border-radius: 7px; background: #fef3c7; color: #92400e; font-size: 11px; line-height: 1.5; }

/* ── Stage typography (Simulate / Review / Calibrate / Deploy) ─────────────
   Design keeps the denser canvas scale. These four stages are reading screens,
   so they follow a 14px body / 13px secondary / 12px caption scale — the
   smallest size WCAG and common dashboard practice treat as comfortably
   readable at arm's length, rather than the 9–11px the canvas uses. */
.build-stage .build-tool { height: 36px; font-size: 14px; padding: 0 12px; }
.build-stage .build-run { height: 38px; font-size: 14px; }
.build-stage .build-runs-table { font-size: 13px; }
.build-stage .build-runs-table th { font-size: 12px; padding: 8px 10px; }
.build-stage .build-runs-table td { padding: 8px 10px; }
.build-runs-table td.build-cycle-thresholds { vertical-align: top; white-space: normal; min-width: 11em; }
.build-runs-table td.build-cycle-thresholds .build-btl-values { gap: 4px; }
.build-runs-table td.build-cycle-thresholds .build-threshold-move { flex-wrap: wrap; }
.build-runs-table td.build-cycle-thresholds .build-threshold-move b { max-width: 160px; }
.build-stage .build-stat-label { font-size: 10px; }
.build-stage .build-stat-value { font-size: 22px; }
.build-stage .build-stat-detail { font-size: 11px; }
.build-stage .build-summary-head strong { font-size: 18px; }
.build-stage .build-summary-head > div > span { font-size: 14px; }
.build-stage .build-summary-block-head h4 { font-size: 14px; }
.build-stage .build-summary-block-head span { font-size: 13px; }
.build-stage .build-delta-note strong { font-size: 14px; }
.build-stage .build-delta-note span { font-size: 14px; }
.build-stage .build-coverage > span { font-size: 13px; }
.build-stage .build-band-name { font-size: 13px; }
.build-stage .build-band-name small { font-size: 12px; }
.build-stage .build-band-count { font-size: 14px; }
.build-stage .build-band-count small { font-size: 12px; }
.build-stage .build-period-value { font-size: 12px; }
.build-stage .build-period-label { font-size: 12px; }
.build-stage .build-period-toggle { min-height: 30px; padding: 4px 9px; font-size: 11px; }
.build-stage .build-summary-label { font-size: 12px; }
.build-stage .build-run-context span { font-size: 13px; }
.build-stage .build-board table { font-size: 13px; }
.build-stage .build-board th { font-size: 12px; }
.build-stage .build-no-results { font-size: 14px; }
.build-stage .build-board-head strong { font-size: 18px; }
.build-stage .build-board-head span { font-size: 14px; }
.build-stage .build-alert-ref { font-size: 12px; }
.build-stage .build-alert-risk { font-size: 13px; }
.build-stage .build-alert-signals small { font-size: 12px; }

.seg-editor { display: grid; gap: 14px; margin: 4px 0 8px; }
.seg-lead { margin: 0; color: var(--slate-600); font-size: 12.5px; line-height: 1.5; }
.seg-list { display: grid; gap: 10px; }
.seg-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.seg-empty { margin: 0; color: var(--slate-500); font-size: 12px; }
.seg-card { border: 1px solid #f0abfc; border-radius: 10px; background: #fdf4ff; padding: 10px 12px 12px; display: grid; gap: 8px; }
.seg-card-head { display: flex; align-items: center; gap: 8px; }
.seg-drag { cursor: grab; border: 0; background: transparent; color: #a21caf; font-size: 12px; letter-spacing: -2px; padding: 2px 4px; }
.seg-ordinal { width: 22px; height: 22px; border-radius: 999px; background: #c026d3; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.seg-name { flex: 1; }
.seg-match-copy { margin: 0; color: #86198f; font-size: 11px; font-weight: 700; }
.seg-menu { position: relative; }
.seg-menu-btn { border: 0; background: transparent; color: #86198f; font-size: 16px; line-height: 1; padding: 2px 6px; cursor: pointer; }
.seg-menu-list { position: absolute; right: 0; top: 22px; z-index: 4; min-width: 140px; background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; box-shadow: 0 8px 20px rgba(15,23,42,.12); padding: 4px; display: grid; }
.seg-menu-list button { border: 0; background: transparent; text-align: left; padding: 6px 8px; font-size: 12px; border-radius: 6px; cursor: pointer; }
.seg-menu-list button:hover { background: var(--slate-50); }
.seg-menu-list button:disabled { opacity: .4; cursor: default; }
.seg-menu-list .is-danger { color: #b91c1c; }
.seg-default { border: 1px dashed #d8b4fe; border-radius: 10px; padding: 10px 12px; background: #faf5ff; display: grid; gap: 6px; }
.seg-default-label { color: #6b21a8; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.seg-default p { margin: 0; color: var(--slate-500); font-size: 11.5px; line-height: 1.45; }
.seg-preview { border: 1px solid #e9d5ff; border-radius: 10px; padding: 10px 12px; background: #fff; display: grid; gap: 8px; }
.seg-preview-head { color: #6b21a8; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.seg-preview-copy { margin: 0; color: var(--slate-500); font-size: 12px; }
.seg-preview-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.seg-preview-table th { text-align: left; color: var(--slate-500); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 6px; }
.seg-preview-table td { padding: 5px 6px; border-top: 1px solid #f1e4fb; }
.seg-preview-table .is-default td { color: var(--slate-500); }
.seg-preview-table .is-total td { font-weight: 700; border-top: 1px solid #d8b4fe; }
.seg-preview-coverage { margin: 0; color: var(--slate-600); font-size: 12px; }
.seg-overlap { border-top: 1px solid #f1e4fb; padding-top: 8px; color: var(--slate-600); font-size: 12px; display: grid; gap: 4px; }
.seg-overlap ul { margin: 0; padding-left: 18px; }
.seg-warning, .seg-notice { margin: 0; color: #9a3412; font-size: 12px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 7px 9px; }
.seg-inspector { margin: 0 0 14px; padding: 10px 11px; border: 1px solid #f0abfc; border-radius: 9px; background: #fdf4ff; }
.seg-inspector-io { display: grid; gap: 6px; margin: 0 0 8px; }
.seg-inspector-io > div { display: grid; grid-template-columns: 118px 1fr; gap: 8px; align-items: baseline; }
.seg-inspector-io dt { color: #a21caf; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.seg-inspector-io dd { margin: 0; color: #701a75; font-size: 12px; font-weight: 650; }
.seg-inspector-list { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 3px; color: #701a75; font-size: 12px; }
.seg-inspector-list span { display: inline-block; width: 1.4em; font-weight: 800; color: #a21caf; }
.seg-inspector-measures { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; }
.seg-inspector-measures li { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: #701a75; }
.seg-inspector-measures span { color: #a21caf; font-size: 10.5px; }
.seg-inspector-note { margin: 0; color: var(--slate-500); font-size: 11px; line-height: 1.45; }
.seg-threshold { display: grid; gap: 10px; margin: 0 0 12px; padding: 10px 11px; border: 1px solid var(--slate-200); border-radius: 9px; background: var(--slate-50); }
.seg-mode { display: grid; gap: 6px; }
.seg-mode label { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--slate-700); }
.seg-mode label.is-on { font-weight: 700; }
.seg-same p, .seg-overrides p { margin: 0; color: var(--slate-500); font-size: 12px; }
.seg-override-head { color: var(--slate-600); font-size: 11px; font-weight: 700; }
.seg-override-row { display: grid; grid-template-columns: 1fr auto minmax(90px, 110px) auto; gap: 6px; align-items: center; }
.seg-override-prefix { color: var(--slate-500); font-size: 12px; }
.seg-explicit { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.seg-explicit th { text-align: left; color: var(--slate-500); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 6px; }
.seg-explicit td { padding: 5px 6px; border-top: 1px solid var(--slate-200); }
.seg-explicit .is-missing input { border-color: #f59e0b; }
.seg-calib-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 0; }
.seg-calib-table th { text-align: left; color: var(--slate-500); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--slate-200); }
.seg-calib-table td { padding: 7px 8px; border-bottom: 1px solid var(--slate-100); }

/* Explain with AI ---------------------------------------------------------- */
.build-explain-dialog {
  display: flex; flex-direction: column;
  width: min(1080px, calc(100vw - 40px)); max-height: 85vh; overflow: hidden;
  outline: none; border: 1px solid #ddd6fe; border-radius: 18px; background: #fff;
  box-shadow: 0 32px 80px rgba(49, 16, 88, .28);
}
.build-explain-dialog.is-loading {
  width: min(440px, calc(100vw - 40px));
  background: #fff;
}
.build-explain-dialog header {
  display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0;
  padding: 18px 22px 14px; border-bottom: 1px solid #ede9fe;
  background: linear-gradient(180deg, #faf8ff, #fff);
}
.build-explain-dialog header > div { flex: 1; min-width: 0; }
.build-explain-dialog header h2 { margin: 4px 0 0; color: var(--slate-900); font-size: 22px; letter-spacing: -.03em; }
.build-explain-dialog header .build-eyebrow { color: #7c3aed; }
.build-explain-dialog header .build-info-icon { color: #6d28d9; border-color: #ddd6fe; background: #f5f3ff; }
.build-explain-kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.build-explain-ai-pill {
  padding: 2px 7px; border: 1px solid #ede9fe; border-radius: 999px;
  background: #faf8ff; color: #7c3aed; font-size: 9px; font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase;
}
.build-explain-lede { margin: 6px 0 0; max-width: 64ch; color: var(--slate-500); font-size: 12.5px; line-height: 1.45; }
.build-explain-copy {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px;
  border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; color: var(--slate-600);
  font: 650 11px Inter, sans-serif; cursor: pointer;
}
.build-explain-copy:hover { border-color: #c4b5fd; color: #5b21b6; }
.build-explain-loading {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px 28px 32px;
}
.build-explain-loading .build-info-icon {
  width: 40px; height: 40px; margin-bottom: 14px;
  color: #6d28d9; border-color: #ddd6fe; background: #f5f3ff;
}
.build-explain-loading strong { color: var(--slate-900); font-size: 16px; letter-spacing: -.02em; }
.build-explain-checklist { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.build-explain-checklist li { display: flex; align-items: center; gap: 10px; color: var(--text-tertiary); font-size: 13px; }
.build-explain-checklist li.is-done { color: #5b21b6; }
.build-explain-checklist li.is-current { color: var(--slate-900); font-weight: 650; }
.build-explain-checklist span { width: 16px; color: #7c3aed; font-weight: 800; }
.build-explain-key, .build-explain-error { padding-bottom: 8px; }
.build-explain-key header, .build-explain-error header {
  display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 16px;
  border-bottom: 1px solid #ede9fe;
}
.build-explain-key header > div, .build-explain-error header > div { flex: 1; min-width: 0; }
.build-explain-key header p, .build-explain-error header p { margin: 4px 0 0; color: var(--slate-500); font-size: 12.5px; }
.build-explain-key .build-new-model-error, .build-explain-error .build-new-model-error { margin: 8px 22px 0; }
.build-explain-key label { display: block; padding: 16px 22px 8px; color: var(--slate-600); font-size: 11.5px; font-weight: 700; }
.build-explain-key .input { width: 100%; height: 36px; margin-top: 6px; }
.build-explain-dialog footer, .build-explain-key footer, .build-explain-error footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 22px 12px; flex-shrink: 0; border-top: 1px solid #ede9fe; background: #fff;
}
.build-explain-key footer, .build-explain-error footer { justify-content: flex-end; }
.build-explain-dialog.is-ready .build-explain-body {
  max-height: calc(85vh - 168px);
}
.build-explain-body {
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 22px 20px; overflow: auto; flex: 1; min-height: 0;
}
.build-explain-banner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid #ede9fe; border-radius: 12px; background: #faf8ff;
}
.build-explain-banner strong { display: block; color: #5b21b6; font-size: 12.5px; }
.build-explain-banner p { margin: 3px 0 0; color: var(--slate-500); font-size: 12px; }
.build-explain-banner form { display: flex; gap: 8px; align-items: center; }
.build-explain-banner .input { width: 180px; height: 32px; }
.build-explain-summary h3 { margin: 2px 0 6px; color: var(--slate-900); font-size: 18px; letter-spacing: -.02em; }
.build-explain-summary p { margin: 0; max-width: none; color: var(--slate-700); font-size: 15px; line-height: 1.5; }
.build-explain-code { color: #7c3aed; font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.build-explain-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.build-explain-chips li {
  padding: 4px 9px; border: 1px solid #ede9fe; border-radius: 999px;
  background: #faf8ff; color: #5b21b6; font-size: 11px; font-weight: 650;
}
.build-explain-block .build-eyebrow { color: #7c3aed; }
.build-explain-block h3 { margin: 6px 0 6px; color: var(--slate-900); font-size: 15px; letter-spacing: -.02em; }
.build-explain-block p { margin: 0; max-width: none; color: var(--slate-700); font-size: 15px; line-height: 1.55; }
.build-explain-block details { margin-top: 8px; }
.build-explain-block summary, .build-explain-disclosures summary {
  cursor: pointer; color: #5b21b6; font-size: 12.5px; font-weight: 650;
}
.build-explain-flow {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 10px 0 0; padding: 0; list-style: none;
}
.build-explain-flow li {
  flex: 1 1 150px; min-width: 150px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px 12px; border: 1px solid #eef2f7; border-radius: 12px; background: #fafbff;
}
.build-explain-flow span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: #f5f3ff; color: #6d28d9; font-size: 11px; font-weight: 800;
}
.build-explain-flow strong { color: var(--slate-900); font-size: 15px; letter-spacing: -.01em; line-height: 1.3; }
.build-explain-flow p { margin: 0; max-width: none; color: var(--slate-600); font-size: 14px; line-height: 1.5; }
.build-explain-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch;
}
.build-explain-card {
  padding: 12px 14px; border: 1px solid #eef2f7; border-radius: 14px; background: #fff;
  min-height: 100%;
}
.build-explain-card .build-eyebrow { color: #7c3aed; }
.build-explain-card-intro { margin: 8px 0 10px; color: var(--slate-500); font-size: 12px; }
.build-explain-compare-inline {
  margin: 8px 0 0; color: var(--slate-900); font-size: 15px; letter-spacing: -.02em; line-height: 1.35;
}
.build-explain-compare-inline span { margin: 0 6px; color: #7c3aed; font-weight: 800; }
.build-explain-meta-inline { margin: 8px 0 0; color: var(--slate-500); font-size: 12px; }
.build-explain-headline { margin: 0 0 8px; color: var(--slate-900); font-size: 14px; }
.build-explain-clauses { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--slate-900); font-size: 13px; }
.build-explain-clauses.is-ticks li, .build-explain-clauses li { display: flex; gap: 8px; }
.build-explain-clauses span { color: #7c3aed; font-weight: 800; }
.build-explain-nested { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--slate-100); border-radius: 10px; }
.build-explain-nested-label { color: #7c3aed; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.build-explain-nested ul { margin: 6px 0 0; padding-left: 16px; color: var(--slate-900); font-size: 13px; }
.build-explain-segments, .build-explain-logic-block dl, .build-explain-params {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 4px 12px; margin: 8px 0 0;
}
.build-explain-segments dt, .build-explain-logic-block dt, .build-explain-params dt {
  color: var(--slate-500); font-size: 12px;
}
.build-explain-segments dd, .build-explain-logic-block dd, .build-explain-params dd {
  margin: 0; color: var(--slate-900); font-size: 12.5px; font-weight: 650; text-align: right;
}
.build-explain-logic-block + .build-explain-logic-block { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--slate-100); }
.build-explain-logic-block h4 { margin: 0 0 6px; color: var(--slate-500); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.build-explain-disclosures { display: grid; gap: 6px; }
.build-explain-disclosures details { padding: 8px 0; border-top: 1px solid var(--slate-100); }
.build-explain-disclosures ul { margin: 8px 0 0; padding-left: 18px; color: var(--slate-700); font-size: 13px; line-height: 1.5; }
.build-explain-assumptions.is-wide { columns: 2; column-gap: 28px; }
.build-explain-assumptions.is-wide li { break-inside: avoid; }
.build-explain-tech-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin: 10px 0 0;
}
.build-explain-tech-card {
  padding: 10px 12px; border: 1px solid #eef2f7; border-radius: 12px; background: #fafbff;
}
.build-explain-tech-kicker {
  color: #7c3aed; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.build-explain-tech-card strong { display: block; margin: 3px 0 0; color: var(--slate-900); font-size: 13px; }
.build-explain-tech-card dl {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4px 10px; margin: 8px 0 0;
}
.build-explain-tech-card dt { color: var(--slate-500); font-size: 11.5px; }
.build-explain-tech-card dd { margin: 0; color: var(--slate-900); font-size: 12px; font-weight: 650; text-align: right; }
.build-explain-secondary {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border: 1px solid #ddd6fe; border-radius: 8px; background: #fff; color: #5b21b6;
  font: 700 11.5px Inter, sans-serif; cursor: pointer;
}
.build-explain-secondary:hover:not(:disabled) { background: #faf8ff; }
.build-explain-secondary:disabled { color: #c4b5fd; cursor: not-allowed; }
.build-explain-walk-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
.build-explain-walk-copy span { color: var(--text-tertiary); font-size: 11px; line-height: 1.35; white-space: nowrap; }
@media (max-width: 860px) {
  .build-explain-split, .build-explain-tech-grid { grid-template-columns: 1fr; }
  .build-explain-assumptions.is-wide { columns: 1; }
  .build-explain-dialog footer { flex-wrap: wrap; }
  .build-explain-walk-copy { flex-direction: column; align-items: flex-start; gap: 4px; }
  .build-explain-banner { flex-direction: column; }
}
@media (min-width: 861px) {
  .build-explain-tech-grid { grid-template-columns: 1fr 1fr; }
}

.build-walkthrough {
  position: absolute; z-index: 20;
  display: flex; flex-direction: column;
  width: min(480px, calc(100% - 32px));
  max-height: min(440px, calc(100% - 48px));
  overflow: hidden; border: 1px solid rgba(196, 181, 253, .55); border-radius: 20px;
  background: linear-gradient(165deg, rgba(18, 10, 48, .94), rgba(36, 18, 78, .9));
  color: #f5f3ff; box-shadow: 0 28px 70px rgba(15, 6, 40, .5);
  backdrop-filter: blur(18px);
}
.build-walkthrough.is-floating {
  left: 0; top: 0; opacity: 0; pointer-events: none;
}
.build-walkthrough.is-floating.is-placed {
  opacity: 1; pointer-events: auto;
}
.build-walkthrough.is-floating.is-placed:not(.is-dragging) {
  transition: left .28s ease, top .28s ease, opacity .2s ease;
}
.build-walkthrough.is-docked {
  left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-height: 46vh; opacity: 1;
}
.build-walkthrough-progress { height: 3px; flex-shrink: 0; background: rgba(255,255,255,.08); }
.build-walkthrough-progress i { display: block; height: 100%; background: #a78bfa; transition: width .4s ease; }
.build-walkthrough header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 16px 8px; flex-shrink: 0;
}
.build-walkthrough-drag { cursor: grab; touch-action: none; user-select: none; }
.build-walkthrough.is-dragging .build-walkthrough-drag,
.build-walkthrough-drag:active { cursor: grabbing; }
.build-walkthrough-drag .build-walkthrough-close { cursor: pointer; touch-action: auto; }
.build-walkthrough .build-eyebrow {
  display: flex; align-items: center; gap: 8px;
  color: #c4b5fd; letter-spacing: .16em;
}
.build-walkthrough-grip {
  width: 10px; height: 14px; flex-shrink: 0; opacity: .7;
  background-image: radial-gradient(circle, currentColor 1.05px, transparent 1.2px);
  background-size: 5px 5px; background-position: 0 0;
}
.build-walkthrough h2 { margin: 4px 0 0; color: #fff; font-size: 18px; letter-spacing: -.03em; line-height: 1.25; }
.build-walkthrough-sub { margin: 4px 0 0; color: #e9d5ff; font-size: 12.5px; }
.build-walkthrough-close {
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 10px; background: rgba(255,255,255,.06); color: #e9d5ff; cursor: pointer;
}
.build-walkthrough-close:hover { background: rgba(255,255,255,.12); }
.build-walkthrough-body { min-height: 0; overflow: auto; }
.build-walkthrough-copy {
  margin: 0 16px 10px; color: #e9d5ff; font-size: 13.5px; line-height: 1.55;
}
.build-walkthrough-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 16px 8px; padding: 0; list-style: none;
}
.build-walkthrough-chips li {
  padding: 3px 8px; border-radius: 999px; background: rgba(167, 139, 250, .18);
  color: #ede9fe; font-size: 10.5px; font-weight: 650; letter-spacing: .01em;
}
.build-walkthrough-config {
  display: inline-block; margin: 0 16px 10px; padding: 0; border: 0; background: none;
  color: #c4b5fd; font: 650 11.5px Inter, sans-serif; cursor: pointer;
}
.build-walkthrough-config:hover { color: #fff; }
.build-walkthrough footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 0 14px 14px; flex-shrink: 0;
}
@media (max-width: 720px) {
  .build-walkthrough-drag { cursor: default; touch-action: auto; }
}
.build-walkthrough-exit {
  margin-right: auto; padding: 0; border: 0; background: none;
  color: rgba(233, 213, 255, .7); font: 650 11px Inter, sans-serif; cursor: pointer;
}
.build-walkthrough-exit:hover { color: #fff; }
.build-walkthrough footer .build-tool {
  background: rgba(255,255,255,.08); color: #e9d5ff; border-color: transparent;
}
.build-walkthrough footer .build-tool:disabled { opacity: .35; }
.build-walkthrough footer .build-new-model-create {
  background: #6d28d9; border-color: transparent; color: #fff;
}

/* ── Variable Explorer ─────────────────────────────────────────────────────
   A wider variant of the existing editor modal rather than a new shell, so the
   header, body scrolling and footer behave exactly as every other dialog does.
   The workspace is two columns on desktop so the statistics and the distribution
   are read together rather than scrolled between. */
.build-editor-modal.is-explorer { width: min(1280px, calc(100vw - 32px)); max-height: min(940px, calc(100vh - 28px)); }
.ve-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--slate-50); }
.ve-kicker { display: block; color: #7c3aed; font-size: 10px; font-weight: 850; letter-spacing: .09em; }

.ve-head p.ve-model { margin: 3px 0 0; color: var(--slate-600); font-size: 12px; font-weight: 650; }
.ve-head p.ve-meta { margin: 2px 0 0; color: var(--text-tertiary); font-size: 11.5px; }

/* Lineage as a single compact rail rather than a card of nested cards. */
.ve-rail { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; border: 1px solid #ddd6fe; border-radius: 10px; background: linear-gradient(120deg, #f5f3ff, #fff 60%); }
.ve-rail > .ve-kicker { flex: none; }
.ve-rail ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.ve-rail li { position: relative; padding: 3px 9px; border: 1px solid var(--slate-200); border-radius: 999px; background: #fff; color: var(--slate-700); font-size: 11.5px; font-weight: 650; }
.ve-rail li + li::before { content: '→'; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); color: var(--accent-primary-300); font-size: 10px; }
.ve-rail li.is-variable { border-color: var(--accent-primary); color: var(--accent-primary-deep); box-shadow: inset 0 0 0 1px var(--accent-primary-200); }
.ve-rail > .ve-note { flex: 1 1 260px; margin: 0; }

.ve-grid { display: grid; grid-template-columns: minmax(300px, 0.35fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.ve-grid > .ve-panel { height: 100%; display: flex; flex-direction: column; }
/* The chart takes the slack, so Overview and Distribution end on the same line. */
.ve-distribution > .ve-chart { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.ve-overview > .ve-rows:last-of-type { margin-bottom: 0; }
.ve-panel { padding: 12px 14px; border: 1px solid var(--slate-200); border-radius: 11px; background: #fff; }
.ve-panel > header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.ve-panel > header h4 { margin: 0; color: var(--slate-900); font-size: 14px; letter-spacing: -.01em; }
.ve-panel > header .ve-zoom { margin-left: auto; }

/* Four figures worth reading first, then everything else as compact rows. */
.ve-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.ve-figure { padding: 7px 9px; border-radius: 8px; background: var(--slate-50); }
.ve-figure.is-key { background: var(--accent-primary-50); }
.ve-figure > span { display: block; color: var(--slate-500); font-size: 10px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.ve-figure > strong { display: block; margin-top: 1px; color: var(--slate-900); font-size: 16px; font-variant-numeric: tabular-nums; }
.ve-figure > small { display: block; color: var(--text-tertiary); font-size: 10px; }

.ve-rows { margin: 0 0 9px; border-top: 1px solid #eef2f7; }
.ve-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid var(--slate-100); }
.ve-rows dt { color: var(--slate-500); font-size: 11.5px; }
.ve-rows dt i { margin-left: 3px; color: var(--slate-300); font-style: normal; cursor: help; }
.ve-rows dd { margin: 0; color: var(--slate-900); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ve-figure > strong, .ve-side > strong, .ve-change dd { font-variant-numeric: tabular-nums; }

.ve-chart svg { display: block; width: 100%; height: auto; }
.ve-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; color: var(--slate-600); font-size: 11px; font-weight: 650; }
.ve-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ve-legend i { width: 11px; border-radius: 2px; }
.ve-offscale { margin: 6px 0 0; padding: 6px 10px; border: 1px solid var(--slate-200); border-radius: 8px; background: var(--slate-50); color: var(--slate-600); font-size: 11.5px; }

/* Threshold analysis: controls beside the comparison, never stacked out of view. */
.ve-analysis { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.ve-controls { display: flex; flex-direction: column; }
.ve-methods { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ve-presets { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.ve-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.ve-compare > .ve-side { height: 100%; display: flex; flex-direction: column; }
/* Pushes the source line to the foot of the card so both cards end level. */
.ve-side > .ve-source { margin-top: auto; padding-top: 6px; }
.ve-side { padding: 10px 12px; border: 1px solid var(--slate-200); border-radius: 10px; background: var(--slate-50); }
.ve-side.is-candidate { border-color: var(--accent-primary-200); background: var(--accent-primary-50); }
.ve-side.is-empty { background: #fff; }
.ve-side > strong { display: block; margin-top: 2px; color: var(--slate-900); font-size: 19px; font-variant-numeric: tabular-nums; }
.ve-side.is-candidate > strong { color: var(--accent-primary-deep); }
.ve-method { display: block; margin-top: 3px; color: var(--slate-500); font-size: 11px; font-weight: 700; }
.ve-rule { display: block; margin-top: 2px; color: var(--accent-primary-dark); font-size: 12px; font-style: normal; font-weight: 700; }
.ve-side .ve-rows { margin-top: 8px; }
.ve-source { display: block; color: var(--text-tertiary); font-size: 10.5px; line-height: 1.4; }
.ve-none { margin: 6px 0 0; color: var(--slate-500); font-size: 11.5px; line-height: 1.45; }
.ve-cdf { margin: 6px 0 0; color: var(--slate-600); font-size: 11.5px; line-height: 1.45; }
.ve-error { margin: 8px 0 0; color: #b91c1c; font-size: 12px; }
/* A caution, not a failure: the figures beside it are real, they just answer a
   question nobody meant to ask. Amber rather than red keeps it apart from .ve-error,
   which marks a candidate that could not be evaluated at all. */
.ve-warning { margin: 8px 0 0; padding: 7px 9px; border: 1px solid #fcd34d; border-radius: 8px;
              background: #fffbeb; color: #92400e; font-size: 11.5px; line-height: 1.45; }
.ve-warning strong { font-weight: 750; }
/* Why an action is unavailable, said on the screen rather than only in a tooltip —
   a title attribute is unreachable by keyboard and on touch. */
/* Why "Use this threshold" is off. It takes the footer's free width and reads as a
   note: squeezed right-aligned into 40ch beside the buttons it ran to six ragged lines
   with the rest of the footer empty. */
.ve-unavailable { flex: 1 1 auto; margin: 0 8px 0 0; max-width: 92ch; padding: 4px 0 4px 10px;
                  border-left: 2px solid var(--slate-300); color: var(--slate-600); font-size: 11.5px;
                  line-height: 1.45; text-align: left; }

.ve-tie { margin-top: 8px; border: 1px solid #bae6fd; border-radius: 8px; background: #f0f9ff; }
.ve-tie-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 9px; border: 0; background: none; color: #075985; font: 700 11.5px/1.3 inherit; text-align: left; cursor: pointer; }
.ve-tie-head em { flex: 1; color: #0369a1; font-style: normal; font-weight: 600; }
.ve-tie p { margin: 0; padding: 0 9px 8px; color: #075985; font-size: 11.5px; line-height: 1.5; }

.ve-change { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--slate-200); border-radius: 10px; background: #fff; }
.ve-change > dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 20px; margin: 6px 0 0; }
.ve-change dt { color: var(--text-tertiary); font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.ve-change dd { margin: 1px 0 0; color: var(--slate-900); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ve-change .ve-note { margin-top: 7px; }

.ve-boundary-pick { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.ve-boundary-pick > span { color: var(--slate-500); font-size: 11px; font-weight: 700; }
.ve-boundary-pick select { max-width: 240px; }

.ve-note { margin: 0; color: var(--slate-500); font-size: 11.5px; line-height: 1.45; }
/* A qualification on the population, not a description of it — set apart so it is not
   read as part of the sentence above. */
.ve-entity-note { margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--slate-200); }
.ve-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--slate-200); background: #fff; }
.ve-foot > .ve-note { flex: 0 0 auto; }
.ve-foot > div { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end;
                 gap: 8px; min-width: 0; }
.ve-foot > div > button { flex: 0 0 auto; }

/* The Inspector's hand-off card. */

@media (max-width: 1100px) {
  .ve-grid, .ve-analysis { grid-template-columns: minmax(0, 1fr); }
  .ve-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ve-compare, .ve-figures { grid-template-columns: minmax(0, 1fr); }
}

/* Interactive chart surface. */
.ve-chart-frame { position: relative; }
.ve-chart svg.is-dragging { cursor: ew-resize; user-select: none; }
.ve-bar { fill: var(--accent-primary-200); stroke: var(--accent-primary-300); stroke-width: .5; transition: fill .1s; }
.ve-bar.is-hovered { fill: var(--accent-primary-300); }
.ve-bar.is-selected { fill: var(--accent-primary-bright); stroke: var(--accent-primary-dark); }
/* Observations a log axis cannot place, drawn beside it rather than dropped. */
.ve-bar.is-stub { fill: var(--accent-primary-100); stroke: var(--accent-primary-200); }
.ve-curve { stroke: var(--accent-primary-bright); stroke-width: 2; stroke-linejoin: round; }
.ve-plot { cursor: crosshair; }

/* View controls: the scale, the range, and the observation axis. */
.ve-viewbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-left: auto; }
.ve-count-scale { display: inline-flex; align-items: center; gap: 5px; color: var(--slate-500); font-size: 11px; cursor: pointer; }
.ve-count-scale input { margin: 0; }
/* Inert, not absent: a control that disappears moves every control beside it. */
.ve-count-scale.is-disabled { color: var(--slate-300); cursor: not-allowed; }
.ve-count-scale.is-disabled input { cursor: not-allowed; }
.ve-viewbar .build-tool:disabled { color: var(--slate-300); border-color: #eef2f7; background: #fff; cursor: not-allowed; box-shadow: none; }
.ve-note.is-busy { color: var(--text-tertiary); }
/* The population was measured from fields the model has not saved yet. */
.ve-draft { margin: 6px 0 0; padding: 4px 9px; border-radius: 999px; border: 1px solid #fde68a; background: #fffbeb; color: #92400e; font-size: 11px; display: inline-block; }
/* Two lines of room whatever the note says, so switching view does not slide the
   chart up and down under the pointer that switched it. */
.ve-viewnote { min-height: 2.8em; margin-bottom: 4px; }

/* Which population is being described — not which picture of it is drawn. */
.ve-cohorts { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 9px 12px; border: 1px solid #ddd6fe; border-radius: 11px; background: #f5f3ff; margin-bottom: 12px; }
.ve-cohort-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.ve-cohort-picks .build-tool em { font-style: normal; font-weight: 700; opacity: .55; margin-left: 5px; }
.ve-cohorts > .ve-note { flex: 1 1 100%; margin: 0; }

/* Every cohort's line, and what it does inside its own population. */
.ve-segments { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.ve-segments button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; width: 100%; padding: 6px 8px; border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
.ve-segments button:hover:not(:disabled) { border-color: var(--accent-primary-300); background: var(--slate-50); }
.ve-segments button:disabled { cursor: default; opacity: .65; }
.ve-segment-name { color: var(--slate-900); font-size: 11.5px; font-weight: 650; }
.ve-segment-name i { margin-left: 6px; padding: 1px 5px; border-radius: 999px; background: var(--slate-100); color: var(--slate-500); font-size: 9px; font-style: normal; font-weight: 600; }
.ve-segment-line { color: var(--slate-900); font-size: 12px; font-weight: 750; text-align: right; }
.ve-segment-hit { grid-column: 1 / -1; color: var(--slate-500); font-size: 10.5px; }

/* The percentiles, laid on the axis they belong to rather than listed beside it. */
.ve-strip { margin: 2px 0 6px; }
.ve-strip > div { position: relative; height: 30px; border-top: 1px dashed var(--slate-200); }
.ve-strip span { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; }
.ve-strip i { width: 1px; height: 5px; background: var(--slate-300); }
.ve-strip em { color: var(--text-tertiary); font-size: 9px; font-style: normal; letter-spacing: .02em; }
.ve-strip b { color: var(--slate-600); font-size: 9.5px; font-weight: 600; }

/* Spread statistics, a fold away from the four that are read first. */
.ve-more { margin-bottom: 10px; }
.ve-more > summary { color: var(--slate-600); font-size: 11.5px; cursor: pointer; padding: 4px 0; }
.ve-more > summary:hover { color: var(--accent-primary); }
.ve-grab.is-draggable { cursor: ew-resize; }
.ve-handle { cursor: ew-resize; stroke: #fff; stroke-width: 2; }
.ve-handle:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.ve-drag-hint { color: var(--text-tertiary); font-size: 10.5px; font-style: normal; }
.ve-tooltip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 12px)); max-width: 240px; padding: 7px 9px; border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; box-shadow: 0 10px 25px -5px rgba(15,23,42,.18); pointer-events: none; }
.ve-tooltip strong { display: block; color: var(--slate-900); font-size: 11.5px; }
.ve-tooltip dl { margin: 4px 0 0; }
.ve-tooltip dl + dl { margin-top: 3px; }
.ve-tooltip dl > div { display: flex; justify-content: space-between; gap: 12px; }
.ve-tooltip dt { color: var(--text-tertiary); font-size: 10.5px; }
.ve-tooltip dd { margin: 0; color: var(--slate-900); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ve-selection-slot { min-height: 34px; margin-top: 7px; display: flex; align-items: center; }
.ve-selection { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; width: 100%; padding: 5px 10px; border: 1px solid var(--slate-200); border-radius: 8px; background: var(--slate-50); }
.ve-selection > .ve-kicker { flex: none; }
.ve-selection > strong { color: var(--accent-primary-deep); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ve-selection-metrics { flex: 1 1 auto; color: var(--slate-500); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ve-selection-metrics em { font-style: normal; border-bottom: 1px dotted var(--slate-300); cursor: help; }
.ve-selection > button { flex: none; padding: 2px 8px; font-size: 11px; }
.ve-reset { margin-left: auto; }

/* Branched lineage: several input roles converging on one variable. Compact by
   design — this is a statement of provenance, not a graph viewer. */
.ve-branches { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.ve-branches > ul { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.ve-branches > ul > li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.ve-branch-role { min-width: 92px; color: #7c3aed; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ve-branches ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.ve-branches ol li { position: relative; padding: 3px 9px; border: 1px solid var(--slate-200); border-radius: 999px; background: #fff; color: var(--slate-700); font-size: 11.5px; font-weight: 650; }
.ve-branches ol li + li::before { content: '→'; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); color: var(--accent-primary-300); font-size: 10px; }
/* A branch's qualification, on the same row as its chain so the rail does not grow. */
.ve-branch-context { color: var(--slate-500); font-size: 10px; font-style: normal; font-weight: 600; white-space: nowrap; }
.ve-branch-join { color: var(--accent-primary-300); font-size: 13px; }
.ve-branch-target { padding: 3px 9px; border: 1px solid var(--accent-primary); border-radius: 999px; background: #fff; color: var(--accent-primary-deep); font-size: 11.5px; font-weight: 650; box-shadow: inset 0 0 0 1px var(--accent-primary-200); }
@media (max-width: 900px) { .ve-branch-join { display: none; } }

/* ═══ The landing page ═══════════════════════════════════════════════════════
   Manage Models opens the studio, so it carries the only scale of type on the
   product: everything else here lives between 11px and 14px because it is
   working chrome around a canvas. A page that opens needs one thing that is big.

   The tokens are scoped to this page rather than :root — the rest of Studio has
   its colours written out in place, and a half-applied token layer is worse than
   none. Light only; there is no dark theme in this product.
*/
.build-landing {
  --ink: var(--slate-900);
  --ink-2: var(--slate-700);
  /* Secondary text that is still meant to be read. #94a3b8 on this background is
     2.5:1 and fails AA; this is 4.6:1. Anything lighter is decoration only. */
  --ink-3: var(--slate-500);
  --ink-faint: var(--slate-400);
  --line: #e6ecf4;
  --accent: var(--accent-primary);
  --accent-soft: var(--accent-primary-50);
  /* One hue per stage, held across the band, the trail and the row, so "amber
     means calibration" is learned once and read everywhere. */
  --stage-design: var(--slate-600);
  --stage-simulate: var(--accent-primary);
  --stage-review: #b45309;
  --stage-calibrate: #7c3aed;
  --stage-deploy: #047857;
}
/* One measured content column, and one gutter, for the whole landing page.
   The hero and the body below it used to carry their own numbers — 28px against
   32px — so every heading in the hero sat four pixels left of every heading under
   it, on both edges. They were also capped differently: 1680px counted from inside
   the hero's padding and from outside the body's, so past ~1730px the two columns
   were 64px apart. One measure and one gutter, read by both. */
.build-landing { --landing-measure: 1680px; --landing-gutter: 32px; }
.build-landing-body {
  flex: none;
  width: 100%;
  box-sizing: border-box;
  max-width: var(--landing-measure);
  margin: 0 auto;
  padding: 24px var(--landing-gutter) 44px;
}

/* ── The hero ─────────────────────────────────────────────────────────────── */
/* One dark surface in an otherwise light application. It is not decoration: it
   is how a reader knows this page is the front of the product and not another
   working screen. */
.build-hero {
  position: relative;
  flex: none;
  padding: 36px var(--landing-gutter) 32px;
  background: var(--nav-tone-dark);
  color: #e6edf8;
  overflow: hidden;
}
.build-hero::before {
  content: '';
  position: absolute;
  top: -180px; right: -120px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}
/* A faint ledger grid: the thing underneath all of this is a book of transactions. */
.build-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(148,163,184,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(148,163,184,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), transparent 78%);
  pointer-events: none;
}
.build-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* Proportional columns rather than flex with a cap on the copy: a fixed max-width
     on the text turned every pixel past ~1500 into dead space between the two. */
  grid-template-columns: minmax(0, 1.25fr) minmax(430px, 1fr);
  align-items: stretch;
  gap: 56px;
  /* The body's measure counts its gutters in; this one sits inside them already, so
     it is the same column only when the gutters are subtracted. */
  max-width: calc(var(--landing-measure) - var(--landing-gutter) * 2);
  margin: 0 auto;
}
.build-hero-copy { min-width: 0; display: flex; flex-direction: column; }
.build-hero-eyebrow {
  margin: 0 0 8px;
  color: var(--accent-primary-300);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.build-hero-title {
  margin: 0;
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.05;
}
.build-hero-lead {
  margin: auto 0 0;
  padding-top: 13px;
  max-width: 88ch;
  color: #b9c6dc;
  font-size: 17px;
  line-height: 1.6;
}
.build-hero-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.build-hero-figure {
  /* The label in its own row, then the figure with what it means beside it rather than
     under it, which kept every box a line taller than it needed to be. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 12px;
  background: rgba(148,163,184,.07);
}
.build-hero-figure dt {
  grid-column: 1 / -1;
  color: #93a3bd;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.build-hero-figure dd {
  margin: 5px 0 0;
  color: #fff;
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.build-hero-figure p { margin: 0; overflow: hidden; color: #8d9cb6; font-size: 10.5px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }

/* ── The lifecycle, at the foot of the header ────────────────────────────── */
/* Information, not a control: soft light-on-dark under the title and the figures, each
   stage's numeral in its own colour, and on the rule to the next stage what it hands on. */
.build-hero-lifecycle {
  position: relative;
  z-index: 1;
  max-width: calc(var(--landing-measure) - var(--landing-gutter) * 2);
  margin: 22px auto 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(148,163,184,.16);
}
.build-hero-lifecycle-intro { margin: 0 0 14px; color: #93a3bd; font-size: 14px; line-height: 1.55; }
.build-hero-lifecycle-intro strong { color: #e6edf8; font-weight: 700; }
.build-hero-lifecycle-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.build-hero-lifecycle li { min-width: 0; padding-right: 14px; }
.build-hero-lifecycle li.is-design { --stage: var(--slate-300); }
.build-hero-lifecycle li.is-simulate { --stage: #93c5fd; }
.build-hero-lifecycle li.is-review { --stage: #fbbf24; }
.build-hero-lifecycle li.is-calibrate { --stage: #c4b5fd; }
.build-hero-lifecycle li.is-deploy { --stage: #6ee7b7; }
.build-hero-lifecycle-head { display: flex; align-items: center; gap: 8px; }
.build-hero-lifecycle-index { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--stage); border-radius: 50%; color: var(--stage); font-size: 12px; font-weight: 750; }
.build-hero-lifecycle-rule { flex: 1; height: 1px; background: rgba(148,163,184,.3); }
.build-hero-lifecycle-hands { flex: none; color: #8d9cb6; font-size: 12.5px; }
.build-hero-lifecycle-arrow { flex: none; color: var(--slate-500); }
.build-hero-lifecycle li strong { flex: none; color: #e6edf8; font-size: 15px; font-weight: 700; }
.build-hero-lifecycle-blurb { display: block; margin-top: 3px; padding-left: 32px; color: #93a3bd; font-size: 13.5px; line-height: 1.45; }

/* ── Where the work starts ────────────────────────────────────────────────── */
/* Four ways in, as tiles of one size on one line. Cards here mirrored the five
   lifecycle tiles above and read as more of the same sequence; four filled buttons
   of one weight gave no way in more weight than another. A tile is short and wide —
   picture, name, one line — so the row costs barely more height than the buttons. */
.build-start {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 0 14px;
  /* A panel of its own, the title on the tiles' row. */
  padding: 10px 10px 10px 16px;
  border: 1px solid #dfe6ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.build-start-title { flex: none; white-space: nowrap; }
/* The two sections' titles share one style, so the start row and My models read as
   sections of one rank: a title, and a quiet line about it. */
.build-start-title, .build-models-section-head h2 { margin: 0; color: var(--ink, var(--slate-900)); font-size: 16px; font-weight: 750; letter-spacing: -.014em; }
.build-start-doors { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.build-start-door {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 60px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.build-start-door:hover:not(:disabled) { border-color: var(--accent-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 9%, transparent); }
.build-start-door.is-dropping { border-style: dashed; border-color: var(--accent-primary); background: var(--accent-primary-50); }
.build-start-door:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.build-start-door:disabled { cursor: not-allowed; opacity: .55; }
.build-start-picture { flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 8px; }
.build-start-picture svg { width: 44px; height: 44px; }
.build-start-picture .build-icon { width: 20px; height: 20px; }
.build-start-picture.is-canvas, .build-start-picture.is-file { border: 1px solid #e6ecf3; background: #f6f8fb; }
.build-start-picture.is-blank { border: 1.5px dashed #b6c2d1; background: #fbfcfd; color: var(--accent-primary); }
/* The canvas's AI purple: the one way in that asks the AI looks like the canvas's own
   AI actions. */
.build-start-picture.is-ai { border: 1px solid #ede9fe; background: #f5f3ff; color: #7c3aed; }
.build-start-door-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.build-start-door-label { color: var(--ink); font: 650 12.5px Inter, sans-serif; letter-spacing: -.005em; white-space: nowrap; }
.build-start-door-note { overflow: hidden; color: var(--ink-3); font: 500 11px Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }

/* ── The result column ────────────────────────────────────────────────────── */
.build-result { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.build-result strong { color: var(--ink); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.build-result strong.build-result-quiet { color: var(--ink-3); font-weight: 650; }
.build-result-sub { color: var(--ink-3); font-size: 10.5px; font-weight: 650; }
.build-result-sub.is-waiting { color: #b45309; }
.build-result-sub.is-conflict { color: #b91c1c; font-weight: 700; }
.build-result-bar {
  display: block;
  width: 100%;
  max-width: 116px;
  height: 4px;
  margin: 3px 0 1px;
  border-radius: 999px;
  background: #e8edf5;
  overflow: hidden;
}
.build-result-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--stage-simulate); }
/* No run, no result: an em dash, not a sentence about the model. */
.build-result-none { color: var(--ink-faint); font-size: 13px; font-weight: 650; }

/* ── One primary action per row, the rest behind a menu ───────────────────── */
.build-row-menu { display: inline-flex; }
.build-row-menu-btn {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--slate-50);
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.build-row-menu-btn:hover:not(:disabled) { background: #fff; border-color: #dbe4ef; color: var(--ink); }
.build-row-menu-btn.is-open { background: var(--accent-soft); border-color: var(--accent-primary-200); color: var(--accent-primary-dark); }
.build-row-menu-btn:disabled { color: var(--slate-300); cursor: not-allowed; }
.build-row-menu-list { min-width: 168px; }
.build-row-menu-list .build-filter-option.is-danger { color: #b91c1c; }
.build-row-menu-list .build-filter-option.is-danger:hover:not(:disabled) { background: #fef2f2; }
.build-row-menu-list .build-filter-option:disabled { color: var(--slate-300); cursor: not-allowed; background: transparent; }

/* ── The rule library as a catalogue ──────────────────────────────────────── */
.build-template-groups { display: flex; flex-direction: column; gap: 32px; }
.build-template-group-head { margin: 0 0 14px; }
.build-template-group-title { display: flex; align-items: center; gap: 14px; }
.build-template-group-rule { flex: 1 1 auto; height: 1px; background: var(--line); }
.build-template-group-count { flex: none; color: var(--ink-3); font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.build-template-group-head h3 {
  flex: none;
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 750;
  letter-spacing: -.012em;
}

.build-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); gap: 12px; }
.build-template-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color .14s, box-shadow .14s, transform .14s;
  animation: build-card-arrive .34s ease both;
  animation-delay: calc(var(--card-index, 0) * 28ms);
}
.build-template-card:hover { transform: translateY(-2px); border-color: var(--accent-primary-200); box-shadow: 0 10px 24px rgba(15,23,42,.09); }
/* Two lines of title reserved on every card: without it, one wrapped name in a
   row pushed that card's description, chips and button out of step with its
   neighbours. */
.build-template-card > header { display: flex; align-items: flex-start; gap: 9px; min-width: 0; min-height: 37px; }
.build-template-code {
  flex: none;
  margin-top: 1px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--slate-900);
  color: #fff;
  font: 750 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
}
.build-template-card h4 {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -.012em;
  line-height: 1.25;
}
.build-template-desc {
  margin: 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.build-template-desc.is-open { display: block; -webkit-line-clamp: none; }
.build-template-more {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 700 11px Inter, sans-serif;
  cursor: pointer;
}
.build-template-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.build-template-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.build-template-use { height: 32px; }

@keyframes build-card-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ── The page's last word ─────────────────────────────────────────────────── */
/* Layout only: the footer and its trigger are the app-wide .danger-footer and
   .danger-link, so Reset Studio and Reset dataset look like the same decision. */
.build-landing-foot { flex: none; margin-top: auto; padding: 16px var(--landing-gutter) 32px; flex-wrap: wrap; }
.build-landing-foot p { flex: 0 0 100%; width: 100%; max-width: none; }

@media (max-width: 1080px) {
  .build-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 1180px) {
  .build-hero-figures { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
@media (max-width: 760px) {
  /* One narrower gutter, still read by both. */
  .build-landing { --landing-gutter: 16px; }
  .build-landing-body { padding-top: 18px; padding-bottom: 36px; }
  .build-hero { padding-top: 26px; padding-bottom: 24px; }
  .build-hero-title { font-size: 27px; }
  .build-landing-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .build-template-card,
  .build-start-door { animation: none; transition: none; }
  .build-template-card:hover,
  .build-start-door:hover:not(:disabled) { transform: none; }
}

/* Below-the-line rows that are not measured results must not read as if they were: a
   band that could not run, and a band whose thresholds an earlier band already tested. */
.build-btl-row.is-duplicate td { color: var(--text-tertiary); font-style: italic; }
.build-btl-row.is-failed .build-btl-error { color: var(--accent-amber); }
.build-btl-asked { display: block; font-size: 0.68rem; color: var(--text-tertiary); font-style: italic; }
.build-btl-evidence { max-width: 250px; line-height: 1.35; }
.build-btl-evidence small { display: block; font-size: 0.68rem; color: var(--text-tertiary); margin-top: 2px; }
.build-btl-evidence.is-unjudged span { color: var(--accent-amber); }
.build-btl-evidence.is-productive span { color: var(--accent-red, #dc2626); font-weight: 600; }
.build-btl-evidence.is-barren span,
.build-btl-evidence.is-clear span { color: var(--text-secondary); }

.build-round-provenance {
    margin: 2px 0 0; font-size: 0.7rem; color: var(--text-tertiary);
}

/* ── Review sampling ───────────────────────────────────────────────────────────
   The sampling method is the argument a below-the-line defence actually rests on,
   so it gets a block of its own rather than a footnote: every number the formula
   takes is on the screen, and the wording beside it is the wording that travels
   with the sample into the queue. */

.build-sampling-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)); gap: 10px; margin: 14px 0; }
.build-sampling-field { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 10px 11px; border: 1px solid var(--slate-200); border-radius: 9px; background: var(--slate-50); }
.build-sampling-field > span { color: var(--slate-900); font-size: 13px; font-weight: 700; }
.build-sampling-field > small { color: var(--slate-500); font-size: 12px; line-height: 1.4; }
.build-sampling-field .input { width: 100%; height: 32px; padding: 0 8px; font-size: 13px; }
/* Dimmed rather than removed: reviewing everything is a choice about these numbers, and
   hiding them makes it look like a mode with no method behind it. */
.build-sampling-field.is-off { opacity: .5; }
.build-sampling-number { display: flex; align-items: center; gap: 6px; }
.build-sampling-number i { flex: none; color: var(--slate-500); font-size: 12.5px; font-style: normal; font-weight: 700; }

/* The send dialog states the method before anything is queued. It is wider than the
   confirm dialogs that only ask a yes/no, because what it is asking to be trusted is
   the sentences, not the button. */
.build-send-band-dialog { width: min(520px, calc(100vw - 40px)); border-color: var(--accent-primary-200); }
.build-send-band-dialog .build-confirm-icon { background: var(--accent-primary-50); color: var(--accent-primary); }
.build-send-band-method { margin: 12px 0 0; padding: 11px 13px 11px 30px; border-radius: 9px; background: var(--slate-50); color: var(--slate-600); font-size: 12.5px; line-height: 1.5; text-align: left; }
.build-send-band-method li + li { margin-top: 4px; }
.build-send-band-after { margin: 10px 0 0; color: var(--text-tertiary); font-size: 12.5px; line-height: 1.5; }
.build-send-band-dialog > p { margin-bottom: 0; font-size: 12.5px; }
.build-send-band-dialog > p b { color: #b45309; font-weight: 750; }
.build-send-band-dialog footer { margin-top: 18px; }

@media (max-width: 760px) {
}
/* Sent and waiting is not the same as untouched — the row says which. */
.build-btl-evidence.is-queued span { color: var(--accent-primary); font-weight: 600; }

/* A third action — sending the band for review, without moving anything — costs the row
   about ninety pixels it did not have, and the last button hung off the table edge.
   Two attempts that did not work, so nobody repeats them: wrapping the buttons made
   every row three buttons tall, and `width:1%` on the cell collapsed it to twenty pixels
   and let the buttons overlap the evidence beside them. What fits is a shorter label and
   tighter buttons. */
.build-round-actions .build-tool { padding: 0 9px; }
.build-btl-table .build-btl-evidence { max-width: none; }
.build-btl-table .build-btl-evidence small { white-space: normal; }

/* ── Calibrate, in the order the work is done ─────────────────────────────────────
   Three numbered steps — finish line, threshold, test — with each test's result
   directly under the button that ran it, and the detection cycles after them all,
   because a cycle only exists once the line has moved and been measured again. */
.build-calib-step { max-width: 1180px; margin: 0 auto 16px; padding: 16px 18px;
  border: 1px solid #e6ecf4; border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.build-calib-step > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.build-calib-step > header > i { display: grid; flex: none; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--accent-primary); color: #fff; font-size: 13px; font-style: normal; font-weight: 800; }
.build-calib-step > header h3 { margin: 2px 0 0; color: var(--slate-900); font-size: 16px; font-weight: 750; }
.build-calib-step > header p { margin: 3px 0 0; color: var(--slate-500); font-size: 13px; line-height: 1.5; }
.build-calib-step .build-band-floor { margin: 0; }
.build-calib-step .build-band-floor p b { color: var(--slate-900); }
.build-calib-step .build-band-action { margin: 0 0 12px; }
.build-calib-step .build-round { margin-top: 12px; }
.build-calib-step .build-round::before { display: none; }
.build-round.is-latest { border-color: var(--accent-primary-200); box-shadow: 0 0 0 3px var(--accent-primary-50); }

/* Folded effectiveness still says the result, one line. */
.build-effectiveness-folded { margin: 0; color: var(--slate-600); font-size: 13px; }
.build-effectiveness-folded b { color: var(--slate-900); font-variant-numeric: tabular-nums; }

/* The slices of the latest test at a glance: where the stop rule stands. */
.build-slice-map { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.build-slice-origin, .build-slice { display: flex; min-width: 108px; flex-direction: column; gap: 2px;
  padding: 7px 11px; border: 1px solid var(--slate-200); border-radius: 9px; background: var(--slate-50); }
.build-slice-origin { justify-content: center; min-width: 0; color: var(--slate-900); font-size: 13px; font-weight: 750; }
.build-slice-origin i { display: none; }
.build-slice strong { color: var(--slate-800); font-size: 13px; font-weight: 700; white-space: nowrap; }
.build-slice small { color: var(--slate-500); font-size: 12px; }
.build-slice.is-met { border-color: #6ee7b7; background: #ecfdf5; }
.build-slice.is-met small { color: #047857; font-weight: 700; }
.build-slice.is-missed { border-color: #fecaca; background: #fef2f2; }
.build-slice.is-missed small { color: #b91c1c; font-weight: 700; }
.build-slice.is-next { border-color: var(--accent-primary-300); background: var(--accent-primary-50); }
.build-slice.is-next small, .build-slice.is-queued small { color: var(--accent-primary); font-weight: 700; }
.build-slice.is-locked, .build-slice.is-empty { opacity: .62; }

/* The decision, stated above the table it comes from. */
.build-calib-recommend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin: 0 0 10px; padding: 10px 13px; border-radius: 10px; font-size: 13px; }
.build-calib-recommend strong { font-size: 14px; }
.build-calib-recommend span { flex: 1 1 280px; color: var(--slate-600); }
.build-calib-recommend .build-models-open-btn { height: 32px; }
.build-calib-recommend.is-move { border: 1px solid var(--accent-primary-300); background: var(--accent-primary-50); }
.build-calib-recommend.is-move strong { color: var(--accent-primary-dark); }
.build-calib-recommend.is-hold { border: 1px solid #a7f3d0; background: #ecfdf5; }
.build-calib-recommend.is-hold strong { color: #047857; }
.build-round-legacy { margin: 0 0 10px; padding: 8px 12px; border: 1px dashed var(--slate-300); border-radius: 9px;
  background: var(--slate-50); color: var(--slate-500); font-size: 13px; line-height: 1.5; }

/* Six columns: the line, its thresholds, the two grains, the finding, the actions. */
.build-calib-table .build-btl-col-band { width: 11%; }
.build-calib-table .build-btl-col-moves { width: 18%; }
.build-calib-table .build-btl-col-grain { width: 13%; }
.build-calib-table .build-btl-col-evidence { width: 27%; }
.build-calib-table td:nth-child(3), .build-calib-table td:nth-child(5) { border-left: 0; }
.build-calib-table td:nth-child(3), .build-calib-table td:nth-child(4) { border-left: 1px solid #eef2f7; }
.build-calib-table tr.is-tighter td { background: #fbfcfe; }
.build-calib-table tr.is-tighter td:first-child { box-shadow: inset 3px 0 0 var(--slate-300); }
.build-calib-table tr.is-today td { background: var(--slate-100); }
.build-calib-table tr.is-today td:first-child { box-shadow: inset 3px 0 0 var(--slate-600); }
.build-calib-table tr.is-recommended td { background: var(--accent-primary-50); }
.build-calib-table tr.is-recommended td:first-child { box-shadow: inset 3px 0 0 var(--accent-primary); }
.build-calib-table tr.is-locked td:not(.build-round-actions) { opacity: .7; }
.build-btl-lock { display: block; color: var(--text-tertiary); font-size: 11.5px; line-height: 1.35;
  white-space: normal; }
.build-btl-evidence.is-existing span { color: #92400e; font-weight: 600; }
.build-btl-evidence.is-loss span { color: #b91c1c; font-weight: 650; }
.build-btl-evidence.is-safe span { color: #047857; font-weight: 650; }
.build-btl-evidence.is-today span { color: var(--slate-900); font-weight: 650; }
.build-btl-definition { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--slate-100);
  color: var(--slate-600); font-size: 11px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.build-calib-earlier { margin: 14px 0 0; }
.build-calib-earlier > summary { cursor: pointer; color: var(--accent-primary); font-size: 13px; font-weight: 700; }
.build-calib-step .build-stage-empty { margin: 8px 0 0; }

/* Everything above the line: the consequence of a move, beside the slice that decides it.
   Seven columns now, so the rest give a little back. */
.build-calib-table .build-btl-col-band { width: 10%; }
.build-calib-table .build-btl-col-moves { width: 15%; }
.build-calib-table .build-btl-col-grain { width: 10%; }
.build-calib-table .build-btl-col-evidence { width: 22%; }
.build-calib-table .build-btl-col-overall { width: 13%; }
.build-calib-table .build-btl-col-actions { width: 150px; }
.build-btl-overall { border-left: 1px solid #eef2f7; }
.build-btl-overall span { display: block; color: var(--slate-900); font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.build-btl-overall small { display: block; margin-top: 2px; color: var(--slate-500); font-size: 11.5px; line-height: 1.35; }
.build-btl-overall.is-unjudged span { color: var(--text-tertiary); font-weight: 600; }

/* ── Step 2 as one table ──────────────────────────────────────────────────────────
   Every threshold a row, in the same layout for every model, so a range's two ends sit
   on one row instead of reading as two unrelated cards. The table scrolls sideways in
   its own frame on a narrow screen; the page itself never grows wider than the window. */
.build-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.build-param-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.build-btl-param-group > .build-param-table-scroll { background: #fff; }
/* Wide enough that the condition keeps a readable measure; below that the frame scrolls
   rather than squeezing the condition into a column one word wide. */
.build-param-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13px; }
.build-param-col-select { width: 44px; }
.build-param-col-today { width: 124px; }
.build-param-col-first { width: 136px; }
.build-param-col-custom { width: 168px; }
.build-param-col-alone { width: 150px; }
.build-param-table thead th { padding: 8px 12px; background: #fbfcfe; color: var(--slate-500); font-size: 10.5px;
  font-weight: 750; letter-spacing: .04em; line-height: 1.3; text-align: left; text-transform: uppercase;
  vertical-align: bottom; }
.build-param-table thead th:first-child { padding-right: 0; }
/* One grid for every row: the first line of every cell is a 20px line whose top sits 12px
   into the row, so a checkbox, a name, a figure and an input all line up across columns.
   The input is 32px tall, so its cell starts 6px higher to centre it on that line. */
.build-param-table > tbody > tr > td { padding: 12px; border-top: 1px solid #eef2f7; color: var(--slate-700);
  line-height: 20px; vertical-align: top; }
.build-param-table > tbody > tr > td.build-param-select { padding-right: 0; text-align: center; }
.build-param-table > tbody > tr > td.build-param-custom { padding-top: 6px; padding-bottom: 6px; }
.build-param-row.is-on > td { background: #f5f8ff; }
.build-param-row.is-on > td:first-child { box-shadow: inset 3px 0 0 var(--accent-primary); }
.build-param-select input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--accent-primary); vertical-align: top; }
.build-param-condition { min-width: 240px; }
.build-param-condition label { display: block; cursor: pointer; }
.build-param-condition strong { display: block; color: var(--slate-900); font-size: 14px; font-weight: 700; line-height: 20px; }
.build-param-condition small { display: block; margin-top: 2px; color: var(--slate-500); font-size: 12.5px;
  line-height: 1.45; }
.build-param-today, .build-param-first { color: var(--accent-primary-dark); font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.build-param-today small, .build-param-first small { color: var(--text-tertiary); font-size: 12px; font-weight: 500; }
/* The first slice is the "after" value, so it carries the after colour the old cards used. */
.build-param-first b { color: #b45309; font-weight: 750; }
.build-param-custom .input { width: 136px; height: 32px; padding: 0 9px; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.build-param-row.is-crossed .build-param-custom .input:not(:disabled) { border-color: #fca5a5; background: #fef2f2; }
.build-param-error, .build-param-errors li { display: block; margin: 6px 0 0; color: #b91c1c; font-size: 12.5px;
  font-weight: 600; line-height: 1.4; }
.build-param-errors { margin: 0; padding: 0 12px 10px; list-style: none; }
.build-param-chip { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-style: normal;
  font-weight: 750; letter-spacing: .03em; text-transform: uppercase; vertical-align: 2px; }
.build-param-chip.is-range { background: var(--accent-primary-50); color: var(--accent-primary); }
/* A range is one group of rows: its name, then the floor and the ceiling as rows of their
   own under it, then its number line — no rules between them, one guide down the side. */
.build-param-row.is-range-part.is-end > td,
.build-param-row.is-range-part.is-line > td { border-top: 0; }
.build-param-row.is-range-part.is-head > td { padding-bottom: 4px; }
.build-param-row.is-range-part.is-end > td { padding-top: 6px; padding-bottom: 6px; }
.build-param-row.is-range-part.is-end > td.build-param-custom { padding-top: 0; padding-bottom: 0; }
.build-param-row.is-range-part.is-end > td.build-param-custom .input { margin: 0 0 6px; }
.build-param-end-name { display: flex !important; align-items: baseline; gap: 8px; padding-left: 12px;
  border-left: 2px solid var(--slate-200); }
.build-param-row.is-on .build-param-end-name { border-left-color: var(--accent-primary-200); }
.build-param-end-name b { min-width: 52px; color: var(--slate-900); font-size: 13.5px; font-weight: 700; }
.build-param-end-name span { color: var(--slate-500); font-size: 12.5px; }
.build-param-row.is-range-part.is-line > td { padding-top: 2px; padding-bottom: 12px; }
.build-param-segments-row > td { padding: 10px !important; background: var(--slate-50); }
.build-btl-seg-table td i.is-range { color: var(--accent-primary); }
.build-param-alone { font-variant-numeric: tabular-nums; }
.build-param-alone-figure { display: block; color: var(--slate-700); font-size: 12.5px; }
.build-param-alone-figure strong { color: var(--slate-900); font-size: 14px; font-weight: 750; }
.build-param-alone-figure small { display: block; color: var(--slate-500); font-size: 11.5px; line-height: 1.3; }
.build-param-none { color: var(--text-tertiary); font-size: 12.5px; font-weight: 500; }

/* A range on a number line. Positions are percentages of the cell, so it keeps its shape
   at any width; the labels are the only thing that can collide, so only the ends and the
   deepest line on each side carry one. */
.build-rangeline { padding: 24px 14px 0; }
.build-rangeline-track { position: relative; height: 12px; margin: 0 0 22px; }
.build-rangeline-track::before { content: ''; position: absolute; top: 5px; right: 0; left: 0; height: 2px;
  border-radius: 1px; background: var(--slate-200); }
.build-rangeline-bar { position: absolute; top: 2px; height: 8px; border-radius: 4px; background: var(--accent-primary); }
.build-rangeline.is-open .build-rangeline-bar { background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-primary-300) 70%, rgba(165, 180, 252, 0) 100%); }
.build-rangeline.is-crossed .build-rangeline-bar { background: #dc2626; }
/* Looser lines are marks on the axis outside the range; tighter ones are notches cut into
   the bar, so which side of today each sits on reads without a legend. */
.build-rangeline-tick { position: absolute; width: 2px; margin-left: -1px; border-radius: 1px; }
.build-rangeline-tick.is-looser { top: 1px; height: 10px; background: var(--slate-400); }
.build-rangeline-tick.is-tighter { top: 2px; height: 8px; background: rgba(255, 255, 255, .8); }
.build-rangeline-custom { position: absolute; z-index: 2; top: 1px; width: 10px; height: 10px; margin-left: -5px;
  border: 2px solid #fff; border-radius: 2px; background: #d97706; transform: rotate(45deg); }
.build-rangeline-proposed { position: absolute; top: -3px; height: 18px; border: 1.5px dashed #d97706;
  border-radius: 6px; pointer-events: none; }
.build-rangeline-label { position: absolute; color: var(--slate-700); font-size: 11.5px; font-style: normal; font-weight: 650;
  line-height: 1; white-space: nowrap; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.build-rangeline-label.is-above { bottom: 17px; }
.build-rangeline-label.is-above.is-today { color: var(--slate-900); font-weight: 750; }
.build-rangeline-label.is-below { top: 18px; color: var(--slate-400); font-weight: 600; }
.build-rangeline-label.is-below.is-custom { color: #b45309; font-weight: 750; }
.build-rangeline-label.is-start { transform: none; }
.build-rangeline-label.is-end { transform: translateX(-100%); }
.build-rangeline-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; margin: 0;
  color: var(--slate-500); font-size: 11.5px; }
.build-rangeline-legend span { display: inline-flex; align-items: center; gap: 6px; }
.build-rangeline-legend i { display: inline-block; flex: none; }
.build-rangeline-legend i.is-bar { width: 16px; height: 6px; border-radius: 3px; background: var(--accent-primary); }
.build-rangeline-legend i.is-looser { width: 2px; height: 10px; border-radius: 1px; background: var(--slate-400); }
.build-rangeline-legend i.is-tighter { width: 12px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-primary) 45%, #fff 45%, #fff 60%, var(--accent-primary) 60%); }
.build-rangeline-legend i.is-custom { width: 8px; height: 8px; border-radius: 1px; background: #d97706; transform: rotate(45deg); }
.build-rangeline-legend b { color: #b91c1c; font-weight: 700; }

/* The order the segment lines stand in: a lane per segment on one shared axis, a dot for
   today and a ring for the custom value, so a crossing is seen rather than worked out. */
.build-seg-order { margin: 0; padding: 10px 12px 12px; border-top: 1px solid #eef2f7; }
.build-seg-order > header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: 4px 12px; margin-bottom: 6px; }
.build-seg-order > header strong { color: var(--slate-700); font-size: 12px; font-weight: 750; }
.build-seg-order > header small { display: inline-flex; align-items: center; gap: 5px; color: var(--slate-500); font-size: 11.5px; }
.build-seg-order-lanes { display: grid; grid-template-columns: minmax(90px, 160px) minmax(120px, 1fr) auto;
  align-items: center; gap: 5px 12px; margin: 0; padding: 0; list-style: none; }
.build-seg-order-lanes > li { display: contents; }
.build-seg-order-name { overflow: hidden; color: var(--slate-700); font-size: 12.5px; font-weight: 650; text-overflow: ellipsis;
  white-space: nowrap; }
.build-seg-order-lanes > li.is-flipped .build-seg-order-name { color: #a21caf; }
.build-seg-order-track { position: relative; height: 14px; }
.build-seg-order-track::before { content: ''; position: absolute; top: 6px; right: 0; left: 0; height: 2px;
  background: #eef2f7; }
.build-seg-order-track b { position: absolute; top: 6px; height: 2px; background: #f0abfc; }
.build-seg-order i.is-dot, .build-seg-order i.is-ring { display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; }
.build-seg-order-track i { position: absolute; top: 2px; margin-left: -5px; }
.build-seg-order i.is-dot { background: #a21caf; }
.build-seg-order i.is-ring { border: 2px solid #b45309; background: #fff; box-sizing: border-box; }
.build-seg-order-value { color: var(--accent-primary-dark); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.build-seg-order-value em { color: #b45309; font-style: normal; }
.build-seg-order-warnings { margin: 9px 0 0; padding: 8px 11px; border: 1px solid #f5d0fe; border-radius: 8px;
  background: #fdf4ff; list-style: none; }
.build-seg-order-warnings li { color: #86198f; font-size: 12.5px; line-height: 1.45; }
.build-seg-order-warnings li + li { margin-top: 3px; }
.build-seg-order-note { margin: 5px 0 0; color: var(--slate-500); font-size: 11.5px; }

/* Where the line binds. Its own panel under the thresholds, because what it answers —
   which condition holds the extra windows back — is a question about the whole rule. */
.build-near-miss { margin: 0; padding: 16px 18px; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; }
.build-near-miss > header h4 { margin: 0; color: var(--slate-900); font-size: 15px; font-weight: 750; }
.build-near-miss > header p { margin: 6px 0 0; color: var(--slate-600); font-size: 13px; line-height: 1.55; }
.build-near-miss > header b { color: var(--slate-900); }
.build-near-miss h5 { margin: 18px 0 2px; color: var(--slate-900); font-size: 13.5px; font-weight: 750; }
.build-near-miss-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; }
.build-near-miss-controls > span { color: var(--slate-700); font-size: 13px; font-weight: 650; }
/* The share is one choice of five, so it is drawn as one segmented control. */
.build-near-miss-choices { display: inline-flex; overflow: hidden; border: 1px solid var(--slate-300); border-radius: 8px;
  background: #fff; }
.build-near-miss-choices label { position: relative; padding: 6px 12px; color: var(--slate-700); font-size: 13px;
  font-weight: 650; cursor: pointer; font-variant-numeric: tabular-nums; }
.build-near-miss-choices label + label { border-left: 1px solid var(--slate-200); }
.build-near-miss-choices label.is-on { background: var(--accent-primary-50); color: var(--accent-primary); box-shadow: inset 0 -2px 0 var(--accent-primary); }
.build-near-miss-choices input { position: absolute; opacity: 0; pointer-events: none; }
.build-near-miss-choices label:focus-within { outline: 2px solid var(--accent-primary-300); outline-offset: -2px; }
.build-near-miss-controls button { height: 34px; }
.build-near-miss-controls .build-tool { border: 1px solid var(--slate-300); background: #fff; }
.build-near-miss-note { margin: 8px 0 0; color: var(--slate-500); font-size: 12.5px; line-height: 1.5; }
.build-near-miss-note b { color: var(--slate-700); }
.build-near-miss-result { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef2f7; }
.build-near-miss-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.build-near-miss-totals > div { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px;
  border: 1px solid var(--slate-200); border-radius: 10px; background: var(--slate-50); }
.build-near-miss-totals > div.is-near { border-color: var(--accent-primary-200); background: var(--accent-primary-50); }
.build-near-miss-totals > div.is-new { border-color: #a7f3d0; background: #ecfdf5; }
.build-near-miss-totals span { color: var(--slate-500); font-size: 11px; font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; }
.build-near-miss-totals strong { color: var(--slate-900); font-size: 22px; font-weight: 750; line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.build-near-miss-totals small { color: var(--slate-600); font-size: 12.5px; }
.build-near-miss-empty { margin: 12px 0 0; color: var(--slate-700); font-size: 13px; line-height: 1.5; }
.build-near-miss-caveat { margin: 10px 0 0; padding: 9px 12px; border: 1px solid #fde68a;
  border-radius: 8px; background: #fffbeb; color: #92400e; font-size: 12.5px; line-height: 1.5; }
.build-near-miss-result > .build-param-table-scroll { margin-top: 14px; }
.build-near-miss-table { width: 100%; min-width: 720px; border-collapse: collapse; border: 1px solid var(--slate-200);
  border-radius: 10px; font-size: 13px; }
.build-near-miss-table col.is-line { width: 130px; }
.build-near-miss-table col.is-count { width: 130px; }
.build-near-miss-table col.is-gap { width: 190px; }
.build-near-miss-table col.is-action { width: 118px; }
.build-near-miss-table th { padding: 8px 12px; background: #fbfcfe; color: var(--slate-500); font-size: 10.5px; font-weight: 750;
  letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.build-near-miss-table td { padding: 10px 12px; border-top: 1px solid #eef2f7; color: var(--slate-700); line-height: 20px;
  vertical-align: top; }
.build-near-miss-table td strong { color: var(--slate-900); }
.build-near-miss-table td small { display: block; color: var(--slate-500); font-size: 11.5px; line-height: 1.35; }
.build-near-miss-table .is-number { font-variant-numeric: tabular-nums; white-space: nowrap; }
.build-near-miss-count strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.build-near-miss-count.is-with strong { color: var(--slate-600); }
.build-near-miss-zero { color: var(--slate-400); }
.build-near-miss-table .build-tool { height: 30px; padding: 0 10px; border: 1px solid var(--slate-300); background: #fff;
  font-size: 12.5px; white-space: nowrap; }
.build-near-miss-combos { max-height: 320px; margin-top: 8px; overflow-y: auto; }
.build-near-miss-held, .build-near-miss-relaxed { margin-top: 12px; }
.build-near-miss-held > summary, .build-near-miss-relaxed > summary { cursor: pointer; color: var(--accent-primary); font-size: 12.5px;
  font-weight: 700; }
.build-near-miss-held ul { margin: 6px 0 0; padding-left: 18px; color: var(--slate-600); font-size: 12.5px; line-height: 1.5; }
.build-near-miss-relaxed .build-btl-values { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.build-band-action > div > small.build-band-problem { color: #b91c1c; font-weight: 600; }

/* A two-sided test: one ladder per end, each with its own banner and table. */
.build-round-side { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef2f7; }
.build-round-side > h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; color: var(--slate-900); font-size: 14px; }
.build-round-side > h4::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--accent-primary); }
.build-round-side.is-lower > h4::before { box-shadow: inset 3px 0 0 #fff; }
.build-round-side.is-upper > h4::before { box-shadow: inset -3px 0 0 #fff; }
.build-calib-table-wrap { overflow-x: auto; }
.build-calib-table-wrap > .build-calib-table { min-width: 860px; }
.build-calib-table tr.is-closed td { color: var(--slate-500); }
.build-calib-both { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 4px;
  padding: 10px 13px; border: 1px dashed var(--slate-300); border-radius: 10px; background: var(--slate-50); font-size: 13px; }
.build-calib-both > div { display: flex; flex: 1 1 320px; flex-direction: column; gap: 2px; min-width: 0; }
.build-calib-both strong { color: var(--slate-700); font-size: 14px; }
.build-calib-both span { color: var(--slate-600); line-height: 1.45; }
.build-calib-both b { color: var(--slate-900); }
.build-calib-both.is-ready { border-style: solid; border-color: var(--accent-primary-300); background: var(--accent-primary-50); }
.build-calib-both.is-ready strong { color: var(--accent-primary-dark); }
.build-calib-both button { height: 32px; white-space: nowrap; }
.build-calib-both .build-tool { border: 1px solid var(--slate-300); background: #fff; }
.build-both-list { margin: 4px 0 0; padding: 0; list-style: none; }
.build-both-list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--slate-200);
  border-radius: 8px; background: var(--slate-50); }
.build-both-list li + li { margin-top: 6px; }
.build-both-list b { color: var(--slate-900); font-size: 13px; }
.build-both-list small { color: var(--slate-600); font-size: 12.5px; line-height: 1.4; }

/* The slice map of a two-sided test is a number line: the floor's slices out to the left,
   today's range in the middle, the ceiling's out to the right. It scrolls rather than
   wraps, because a wrapped number line puts the far end of one side under the other. */
.build-slice-map-wrap { margin: 0 0 12px; }
.build-slice-map.is-number-line { position: relative; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 14px;
  scrollbar-width: thin; }
.build-slice-map.is-number-line .build-slice { flex: none; min-width: 96px; }
.build-slice-origin.is-range { flex: none; border-color: var(--slate-600); background: var(--slate-100); white-space: nowrap; }
.build-slice-map-caption { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: 4px 12px; margin: 0 0 6px; color: var(--slate-500); font-size: 12px; }
.build-slice-map-caption > span { font-weight: 700; }
.build-slice-map-caption > em { flex: 1 1 260px; font-style: normal; text-align: center; }
/* The line column carries the side's pick control as well as the slice, so it takes a
   little more of a sided table than of a single ladder's. */
.build-calib-table.is-sided .build-btl-col-band { width: 12%; }
.build-calib-table.is-sided .build-btl-col-moves { width: 14%; }
.build-slice-map.is-number-line .build-slice { min-width: 84px; padding: 6px 9px; }
.build-slice-map.is-number-line .build-slice strong { font-size: 12.5px; }
.build-btl-seg-table .build-param-alone-figure strong { display: inline; font-size: 14px; }
.build-btl-seg-table .build-param-alone-figure small { display: block; font-size: 11px; }
.build-near-miss-takeaway { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--accent-primary);
  border-radius: 0 8px 8px 0; background: #f5f8ff; color: var(--slate-800); font-size: 13.5px; line-height: 1.55; }
.build-near-miss-takeaway b { color: var(--slate-900); }
.build-near-miss-list { margin: 0; padding: 0; list-style: none; }
.build-near-miss-list li { position: relative; padding-left: 14px; }
.build-near-miss-list li::before { content: ''; position: absolute; top: 9px; left: 2px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--slate-400); }
.build-calib-both-picks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.build-calib-both-picks label { display: inline-flex; align-items: center; gap: 8px; }
.build-calib-both-picks label > span { min-width: 52px; color: var(--slate-900); font-size: 13px; font-weight: 700; }
.build-calib-both-picks select { height: 32px; min-width: 240px; padding: 0 8px; font-size: 13px; }
.build-round-side-note { margin: -4px 0 8px; color: var(--slate-500); font-size: 12.5px; }

/* ── Strictness level: the model's own setting (Calibrate step 1) and the Settings card ──
   One dropdown with the chosen level's description under it, and the few settings that
   level uses in an aligned two-column grid, instead of a list of every level. */
.strictness-panel {
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: var(--bg-secondary, #fafafa);
}
.strictness-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.strictness-panel-head h4 {
    margin: 0;
    font-size: 0.95rem;
}
.strictness-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft, #eef2ff);
    color: var(--accent-primary, #4338ca);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.strictness-chip em {
    font-style: normal;
    font-weight: 400;
    color: var(--text-muted, #6b7280);
}
.strictness-lede {
    margin: 4px 0 12px;
    font-size: 0.82rem;
    color: var(--text-muted, #6b7280);
}
.strictness-grid {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    row-gap: 10px;
}
.strictness-grid > label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #374151);
    align-self: start;
    padding-top: 8px;
}
.strictness-grid select.input {
    width: 100%;
    max-width: 420px;
    text-align: left;
}
.strictness-number {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted, #6b7280);
}
.strictness-number .input {
    width: 80px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.strictness-meaning {
    margin: 6px 0 0;
    max-width: 560px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted, #6b7280);
}
.strictness-meaning b {
    color: var(--text-primary, #111827);
    font-weight: 600;
}
.strictness-note {
    margin: 10px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted, #6b7280);
}
.strictness-note.is-warning {
    color: var(--accent-amber, #b45309);
}
.strictness-reason textarea {
    width: 100%;
    max-width: 574px;
    margin-top: 6px;
}
.strictness-actions {
    margin-top: 14px;
    display: flex;
    gap: 8px;
}
@media (max-width: 640px) {
    .strictness-grid { grid-template-columns: 1fr; }
    .strictness-grid > label { padding-top: 0; }
}

/* Planted laundering against a run's alerts: customers, opened to their schemes and
   episodes, an episode to its transactions. Nested levels sit on a tinted panel so a
   reader can see where one customer ends. */
.build-units-table .build-units-row { cursor: pointer; }
.build-units-table .build-units-row:hover td { background: var(--slate-50); }
.build-units-table .build-units-row.is-open > td { background: var(--slate-100); font-weight: 650; color: var(--slate-800); }
.build-units-toggle { border: 0; background: none; padding: 0 4px 0 0; color: var(--slate-500); cursor: pointer; font-size: 11px; }
.build-units-tag { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 10px; font-weight: 650; }
.build-units-hit { color: #047857; font-weight: 700; }
.build-units-miss { color: var(--slate-400); }
.build-units-detail > td { padding: 4px 8px 14px 26px; background: var(--slate-50); white-space: normal; }
.build-units-table tr:first-child td { font-weight: inherit; color: inherit; }
.build-units-customer section + section { margin-top: 12px; }
.build-units-customer h4 { display: flex; gap: 10px; align-items: baseline; margin: 8px 0 4px; font-size: 12px; color: var(--slate-800); }
.build-units-customer h4 small { color: var(--slate-500); font-weight: 500; }
.build-units-customer h4 span { margin-left: auto; color: var(--slate-500); font-weight: 500; font-size: 11px; }
.build-units-customer .build-runs-table { background: #fff; border: 1px solid var(--slate-200); }
.build-units-transactions { padding: 6px 0 2px 18px; }
.build-units-transactions .build-runs-table { background: #fff; }
.build-units-transactions tr.is-outside td { color: var(--slate-400); }
.build-units-actions { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; color: var(--slate-500); font-size: 11px; }
/* A filled button, not a .build-tool: in the tinted drill-down a plain one read as text
   until the pointer found it. */
.build-timeline-open { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--accent-primary); border-radius: 8px; background: var(--accent-primary-bright); color: #fff; font-size: 12px; font-weight: 650; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.build-timeline-open svg { width: 14px; height: 14px; fill: currentColor; }
.build-timeline-open:hover { background: var(--accent-primary); }
.build-timeline-open:focus-visible { outline: 2px solid var(--accent-primary-300); outline-offset: 2px; }
/* The timeline dialog spans the page: a year drawn in 600px made a four-day burst a dot.
   It fits inside the backdrop's 28px padding (8px wider scrolled the page sideways) and
   cannot be selected, so dragging the timeline moves it rather than highlighting it. */
.build-timeline-dialog { width: calc(100vw - 56px); max-height: calc(100vh - 56px); user-select: none; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--accent-primary-200); border-radius: 15px; background: #fff; box-shadow: 0 28px 75px rgba(15,23,42,.30); }
.build-timeline-dialog > header { display: flex; align-items: center; gap: 18px; padding: 16px 20px 12px; border-bottom: 1px solid var(--slate-200); }
.build-timeline-dialog > header h2 { margin: 0; color: var(--slate-900); font-size: 17px; }
.build-timeline-dialog > header p { margin: 3px 0 0; color: var(--slate-500); font-size: 12px; font-variant-numeric: tabular-nums; }
.build-timeline-dialog > header > .build-tool { margin-left: 12px; }
.build-timeline-controls { display: inline-flex; margin-left: auto; border: 1px solid var(--slate-200); border-radius: 9px; overflow: hidden; }
.build-timeline-controls button { min-width: 34px; border: 0; background: #fff; padding: 6px 11px; color: var(--slate-700); font-size: 12px; font-weight: 650; cursor: pointer; }
.build-timeline-controls button + button { border-left: 1px solid var(--slate-200); }
.build-timeline-controls button:hover { background: var(--accent-primary-50); color: var(--accent-primary); }
.build-timeline-canvas { padding: 14px 20px 6px; overflow: auto; }
.build-timeline-canvas svg { display: block; max-width: 100%; height: auto; font-family: inherit; cursor: grab; touch-action: none; user-select: none; }
.build-timeline-canvas svg.is-dragging { cursor: grabbing; }
.build-timeline-dialog > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 10px 20px 14px; border-top: 1px solid var(--slate-100); color: var(--slate-500); font-size: 12px; }
.build-timeline-dialog > footer em { margin-left: auto; font-style: normal; color: var(--slate-400); }
.build-timeline-dialog > footer i { display: inline-block; width: 11px; height: 11px; margin-right: 7px; border-radius: 3px; vertical-align: -1px; }
.build-timeline-dialog > footer i.is-activity { background: var(--slate-300); }
.build-timeline-dialog > footer i.is-planted { background: #fee2e2; border: 1px solid #ef4444; }
.build-timeline-dialog > footer i.is-alert { background: var(--accent-primary-bright); }
.build-timeline-dialog > footer i.is-caught { background: var(--accent-primary-bright); border-radius: 50%; }
.build-timeline-tick { fill: var(--slate-500); font-size: 11px; }
.build-timeline-grid { stroke: #eef2f7; }
.build-timeline-stripe { fill: #fef2f2; opacity: .45; }
.build-timeline-gutter { fill: #fff; }
.build-timeline-label { fill: var(--slate-700); font-size: 12px; font-weight: 650; }
.build-timeline-label.is-planted { fill: #b91c1c; }
.build-timeline-label.is-alert { fill: var(--accent-primary); }
.build-timeline-track { stroke: var(--slate-200); stroke-dasharray: 2 3; }
.build-timeline-band { fill: var(--accent-primary-100); opacity: .6; }
.build-timeline-activity { fill: var(--slate-300); }
.build-timeline-episode { fill: #fee2e2; stroke: #ef4444; stroke-width: 1; }
.build-timeline-episode.is-subtle { stroke-dasharray: 3 2; }
.build-timeline-episode-label { fill: #991b1b; font-size: 10.5px; font-weight: 650; text-anchor: middle; }
.build-timeline-dot { fill: #dc2626; }
.build-timeline-dot.is-caught { fill: var(--accent-primary-bright); stroke: #fff; stroke-width: 1; }
.build-timeline-alert { fill: var(--accent-primary-bright); }
.strictness-grid .strictness-row-label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary, #374151); align-self: start; padding-top: 8px; }
.strictness-grid .strictness-row-label small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--text-tertiary, #6b7280); }
.strictness-col-head { font-size: 0.85rem; font-weight: 700; color: var(--text-primary, #111827); padding-bottom: 4px; border-bottom: 1px solid var(--line, #e5e7eb); }
.strictness-col-head small { display: block; font-weight: 400; font-size: 0.74rem; color: var(--text-tertiary, #6b7280); }
.strictness-grid-families { row-gap: 14px; margin-top: 8px; }
.strictness-grid-families select.input { max-width: 360px; }
.strictness-grid-families .strictness-note { margin-top: 4px; }
.strictness-levels { margin: 16px 0 6px; }
.strictness-levels summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; }
.strictness-level-list { display: grid; gap: 8px; margin-top: 8px; }
.strictness-level-item { display: flex; gap: 10px; align-items: flex-start; font-size: 0.82rem; }
.strictness-level-item small { color: var(--text-tertiary, #6b7280); }
.strictness-level-code { flex: none; min-width: 26px; padding: 1px 6px; border-radius: 6px; background: var(--ink-faint, #f3f4f6); font-weight: 700; font-size: 0.78rem; text-align: center; }

/* Reference library uses the component editor modal shell. */
.build-reference-controls { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.build-reference-controls .build-library-search { flex: 1; }
@media (max-width: 600px) {
  .build-editor-modal .build-template-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Paint the hero through the reserved document gutter without widening its content. */
.build-hero { width: 100vw; box-sizing: border-box; }

.build-explain-block > .build-eyebrow { font-size: 12px; }

/* Pagination for large simulated alert runs. */
.build-alert-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eef2f7; color: var(--slate-600); font-size: 13px; flex-shrink: 0; }
.build-alert-pagination > span { margin-right: auto; }
.build-alert-pagination label { display: flex; align-items: center; gap: 8px; }
.build-alert-pagination select { padding: 5px 8px; border: 1px solid var(--slate-200); border-radius: 6px; background: #fff; color: var(--slate-700); font: inherit; }
.build-alert-pagination .build-board-actions { flex-wrap: wrap; }

/* Investigation policy documents and Customer evidence entries in the inspector. Each
   entry says who it will be read with, or why it will not be read, so that line is
   coloured: a piece of evidence nobody will read must not look like one that will. */
.build-context-item { margin-top: 6px; padding: 8px 9px; border: 1px solid var(--slate-200); border-radius: 6px; background: var(--slate-50); }
.build-context-item > small { display: block; color: var(--text-tertiary); font-size: 10.5px; margin-top: 2px; }
.build-context-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.build-context-head strong { font-size: 12px; overflow-wrap: anywhere; }
.build-context-item textarea { margin-top: 6px; width: 100%; }
.build-icon-button { flex: none; display: inline-flex; padding: 3px; border: 0; border-radius: 4px; background: none; color: var(--text-tertiary); cursor: pointer; }
.build-icon-button:hover { background: var(--slate-200); color: #b91c1c; }
.build-context-date { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--text-tertiary); }
.build-context-date .input { width: auto; padding: 3px 6px; font-size: 11.5px; }
.build-context-match { margin: 6px 0 0; font-size: 11px; line-height: 1.45; }
.build-context-match.is-matched { color: #047857; }
.build-context-match.is-unused { color: #b45309; }
.build-context-text { margin-top: 5px; font-size: 11px; }
.build-context-text pre { max-height: 220px; overflow: auto; margin: 5px 0 0; padding: 7px 8px; border-radius: 5px; background: #fff; border: 1px solid var(--slate-200); white-space: pre-wrap; font: 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.build-context-problem { display: block; margin-top: 5px; color: #b91c1c; font-size: 11px; line-height: 1.45; }
.build-gate-supplied { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--slate-50); font-size: 12.5px; line-height: 1.5; text-align: left; }
.build-gate-supplied ul { margin: 4px 0 0; padding-left: 18px; color: #b45309; }

/* The rich-text box both components write to the AI with: white, like a document, rather
   than the dark code box, because what goes in it is prose a reviewer will read back. */
.build-rich { margin-top: 6px; border: 1px solid var(--slate-300); border-radius: 7px; background: #fff; overflow: hidden; }
.build-rich:focus-within { border-color: var(--accent-primary-300); box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), .12); }
.build-rich-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--slate-200); background: var(--slate-50); }
.build-rich-tool { min-width: 26px; height: 24px; padding: 0 6px; border: 0; border-radius: 4px; background: none; color: var(--slate-700); font: 600 12px/1 inherit; cursor: pointer; }
.build-rich-tool:hover { background: var(--slate-200); color: var(--slate-900); }
.build-rich-tool.is-bold { font-weight: 800; }
.build-rich-tool.is-italic { font-style: italic; font-family: Georgia, serif; }
.build-rich-tool.is-heading { font-weight: 800; letter-spacing: -.02em; }
.build-rich-divider { width: 1px; height: 16px; margin: 0 4px; background: var(--slate-200); }
.build-rich-body { max-height: 360px; overflow: auto; padding: 9px 11px; color: var(--slate-900); font-size: 12.5px; line-height: 1.55; outline: none; cursor: text; }
.build-rich-body:empty::before { content: attr(data-placeholder); color: var(--slate-400); pointer-events: none; }
.build-rich-body p { margin: 0 0 6px; }
.build-rich-body h4 { margin: 8px 0 4px; font-size: 13.5px; font-weight: 700; }
.build-rich-body ul, .build-rich-body ol { margin: 0 0 6px; padding-left: 20px; }
.build-rich-body li { margin: 1px 0; }
.build-editor-body .build-rich-body { font-size: 13.5px; }

/* Drop a document, or click to choose one. */
.build-drop { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px; border: 1.5px dashed var(--slate-300); border-radius: 7px; background: #fff; color: var(--slate-700); cursor: pointer; transition: border-color .15s, background .15s; }
.build-drop:hover, .build-drop:focus-visible, .build-drop.is-over { border-color: var(--accent-primary-300); background: var(--accent-primary-50); outline: none; }
.build-drop.is-busy { cursor: progress; opacity: .75; }
.build-drop-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-primary-50); color: var(--accent-primary-dark); }
.build-drop-icon .build-icon { width: 15px; height: 15px; }
.build-drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.build-drop-text strong { font-size: 12.5px; }
.build-drop-text small { color: var(--text-tertiary); font-size: 11px; }
.build-context-doc { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--slate-200); border-radius: 7px; background: #fff; }
.build-context-doc > small { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 10.5px; }
.build-context-doc-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.build-context-doc-name .build-icon { flex: none; width: 14px; height: 14px; color: var(--accent-primary-dark); }
.build-context-sub { display: block; margin-top: 9px; color: var(--slate-600); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.build-context-item { padding: 10px 11px; }
.build-context-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 11px; border: 1px solid var(--slate-300); border-radius: 6px; background: #fff; color: var(--slate-700); font: 600 12px/1.2 inherit; cursor: pointer; }
.build-context-add:hover { border-color: var(--accent-primary-300); color: var(--accent-primary-dark); }
.build-context-add .build-icon { width: 13px; height: 13px; }

/* In the edit dialog the writing gets the space: the policy is the whole job of its
   component, and an evidence note sits above its document. */
.build-editor-modal .build-rich-body { min-height: 200px !important; max-height: 520px; font-size: 13.5px; }
.build-editor-modal .build-param > .build-rich .build-rich-body { min-height: 340px !important; }