:root {
  --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* SF Pro on macOS/iOS — the only shipping targets. Inter evaluated and declined 2025-09; see VISUAL-LANGUAGE-REFERENCE §1.8 */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  /* Type scale (Phase 5 · typography). Seven sizes, four weights, three tracks.
     New code uses ONLY these. Legacy px literals are being migrated workspace by
     workspace; see docs/VISUAL-LANGUAGE-REFERENCE.md §3. */
  --type-xs:   9px;    /* metadata, dt labels, footnotes, pills */
  --type-sm:   11px;   /* secondary body, list small, form labels */
  --type-base: 13px;   /* body, header copy, inputs, buttons */
  --type-md:   15px;   /* panel h2, section h3 */
  --type-lg:   18px;   /* metric values, form h2 */
  --type-xl:   20px;   /* workspace h2 */
  --type-2xl:  24px;   /* workspace h1 */
  --weight-body:     450;
  --weight-emphasis: 600;
  --weight-heading:  700;
  --weight-kicker:   800;
  --track-display: -.02em;  /* h1/h2 */
  --track-body:     0;
  --track-label:   .08em;   /* uppercase micro-labels */
  --leading-tight: 1.2;
  --leading-body:  1.5;
  --ink-950: #17262f;
  --ink-800: #2e414c;
  --ink-900: #22333d;   /* between 950 and 800 */
  --ink-850: #283a45;
  --ink-650: #536973;
  --ink-600: #5d7480;   /* between 650 and 500 */
  --ink-550: #677b85;
  --ink-500: #71858e;
  --ink-400: #93a4ac;
  --ice-50: #f8fbfc;
  --ice-100: #eef4f7;
  --ice-150: #e6eef2;
  --ice-200: #d9e5eb;
  --ice-250: #cfdde4;   /* between 200 and 300 */
  --ice-300: #c4d4dc;
  --ice-400: #b5c8d1;
  /* Glacier tint scale — added to complete the family. --glacier-400 and up
   * existed since inception; --glacier-100/200/300 were referenced by
   * .productionTimeline.isRecorded, .evidencePill.moderate, .changePill
   * state accents, .targetEvaluationPreferred, and .evaluationTimeline.isCurrent
   * without ever being defined, silently collapsing color-mix() to neutral.
   * Values interpolated between --ice-100 and --glacier-400. */
  --glacier-100: #d4e0e6;
  --glacier-200: #baccd5;
  --glacier-300: #9ab3c0;
  --glacier-400: #7a9aab;
  --glacier-500: #5e8295;
  --glacier-550: #52778a;
  --glacier-600: #4b7185;   /* between 500 and 650 */
  --glacier-650: #446b80;
  --glacier-700: #3a5d70;
  --glacier-750: #2f4f60;
  --glacier-800: #274250;
  /* Clay family — warm counterweight to the glacier family. Anchor value
   * (--clay-500 = #9a6a4e) matches the existing --warning token; the two
   * are decoupled by design so state semantics and family hue can drift
   * independently. Used for change-of-state accents (removed, decreased)
   * in the History comparison workspace. */
  --clay-100: #f3e6db;
  --clay-200: #ecd7c5;
  --clay-400: #b58974;
  --clay-500: #9a6a4e;
  --clay-650: #7b4f36;
  /* Sand family — muted warm for 'borderline / outside preferred range' health
   * states in Formula Intelligence. Lighter and less saturated than clay so
   * it reads as caution, not error. */
  --sand-400: #c9b48f;
  --sand-500: #b39a6c;
  --sand-650: #8f7748;
  --clay-750: #5f3b26;
  --surface: #ffffff;
  --surface-soft: #f5f8fa;
  --success: #557b68;
  --warning: #9a6a4e;
  --danger: #9a5b58;
  --danger-strong: #934b3e;   /* error text on light surfaces; border+text on danger buttons */
  --amber-500: #a68a5a;  /* proven-formula accent — unsaturated caramel, used in Formula Library gradient + Preferred version marker */
  --family-dairy: #e7eef6;
  --family-dairy-gradient: linear-gradient(135deg,#e7eef6,#ffffff);
  --family-milk-solids: #ebe6d3;
  --family-milk-solids-gradient: linear-gradient(135deg,#ebe6d3,#ffffff);
  --family-sugars: #f1e8d6;
  --family-sugars-gradient: linear-gradient(135deg,#f1e8d6,#ffffff);
  --family-fibers-bulking: #e5ede4;
  --family-fibers-bulking-gradient: linear-gradient(135deg,#e5ede4,#ffffff);
  --family-fats: #efe6d5;
  --family-fats-gradient: linear-gradient(135deg,#efe6d5,#ffffff);
  --family-stabilizers: #e7e5f0;
  --family-stabilizers-gradient: linear-gradient(135deg,#e7e5f0,#ffffff);
  --family-flavors: #f1e4e6;
  --family-flavors-gradient: linear-gradient(135deg,#f1e4e6,#ffffff);
  --family-other: #e9e9e6;
  --family-other-gradient: linear-gradient(135deg,#e9e9e6,#ffffff);
  --composition-water: #79a9ba;
  --composition-water-tint: #eef6f8;
  --composition-fat: #b69b62;
  --composition-fat-tint: #f7f4ec;
  --composition-protein: #70889a;
  --composition-protein-tint: #eff3f5;
  --composition-lactose: #9380a2;
  --composition-lactose-tint: #f4f1f6;
  --composition-sucrose: #9b8060;
  --composition-sucrose-tint: #f7f3ee;
  --composition-dextrose: #7f8eab;
  --composition-dextrose-tint: #f1f3f7;
  --composition-fructose: #7d947d;
  --composition-fructose-tint: #f1f5f1;
  --composition-maltose: #8e8668;
  --composition-maltose-tint: #f5f3ee;
  --composition-other-sugars: #827792;
  --composition-other-sugars-tint: #f3f1f5;
  --composition-other-carbs: #668b88;
  --composition-other-carbs-tint: #eff5f4;
  --composition-fiber: #70866c;
  --composition-fiber-tint: #f0f5f0;
  --composition-ash: #7f878b;
  --composition-ash-tint: #f2f4f4;
  --composition-alcohol: #60798c;
  --composition-alcohol-tint: #eff3f6;
  --composition-total-solids: #536f7b;
  --composition-total-solids-tint: #eef3f5;
  --composition-msnf: #657f8d;
  --composition-msnf-tint: #eff4f6;
  /* Status pairs — bg/fg for confidence, quality, origin badges. */
  --status-verified-bg: #e3efeb;    --status-verified-fg: #315f54;
  --status-high-bg: #e4edf1;        --status-high-fg: #3d6171;
  --status-provisional-bg: #f0ede2; --status-provisional-fg: #746543;
  --status-estimated-bg: #ecebef;   --status-estimated-fg: #605d6c;
  --status-incomplete-bg: #f3e7e7;  --status-incomplete-fg: #774e4e;
  --radius-sm: 7px;
  --radius-xs: 4px;
  --radius-md: 11px;
  --radius-lg: 15px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --shadow-soft: 0 10px 32px rgba(37, 63, 76, .07);
  --shadow-card: 0 1px 3px rgba(31, 53, 63, .035);
  --shadow-elevated: 0 18px 48px rgba(37, 63, 76, .14);   /* fixed overlays: ingredient editor, pickers */
  /* Warm notice background — for advisory / caution callouts (multiFactorNotice, unexpectedDifferences, confounderList, etc.) */
  --notice-warn-bg: #faf7f3;
  --notice-warn-bg-strong: #f6f0e6;
  --notice-warn-fg: #765b35;
  --notice-warn-border: #dbc9a9;
  font-family: var(--font-ui);
  color: var(--ink-950);
  background: var(--ice-100);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; max-width: 100%; min-height: 100%; }
html, body { overflow-x: hidden; }
body { margin: 0; background: var(--ice-100); font-size: var(--type-base); font-weight: var(--weight-body); line-height: var(--leading-body); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }

.appShell { min-height: 100vh; display: grid; grid-template-rows: 68px 1fr; }
.appHeader {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 252px minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-5); padding: 0 var(--space-6);
  background: rgba(248, 251, 252, .95); border-bottom: 1px solid var(--ice-200);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brandMark { width: 29px; height: 29px; border: 1px solid var(--ice-300); border-radius: 50%; display: grid; place-items: center; color: var(--glacier-650); background: var(--surface); font-size: 16px; }
.brandText strong { display: block; font-size: var(--type-base); letter-spacing: var(--track-label); }
.alphaBadge { display: inline-block; margin-top: 3px; color: var(--glacier-650); font-size: var(--type-sm); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.headerRecipe { min-width: 0; }
.headerRecipe .eyebrow { margin-bottom: 2px; }
.headerRecipe strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.headerActions { display: flex; align-items: center; gap: var(--space-2); }
.iconButton, .saveButton { height: 34px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-650); }
.iconButton { width: 34px; font-size: 15px; }
.iconButton:hover, .saveButton:hover { border-color: var(--glacier-500); color: var(--ink-950); }
.saveButton { padding: 0 14px; background: var(--glacier-650); color: white; border-color: var(--glacier-650); font-weight: var(--weight-emphasis); }
.connection { display: inline-flex; align-items: center; gap: 7px; margin-left: var(--space-2); font-size: var(--type-sm); color: var(--ink-500); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.dot.ok { background: var(--success); }

.appBody { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; }
.sideNav { border-right: 1px solid var(--ice-200); background: var(--ice-50); padding: var(--space-5) var(--space-3); }
.navSectionLabel, .eyebrow, .panelKicker { font-size: var(--type-sm); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: var(--weight-kicker); color: var(--ink-500); }
.navSectionLabel { padding: 0 10px 9px; }
.navItem { width: 100%; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 11px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-650); text-align: left; font-size: var(--type-base); }
.navItem + .navItem { margin-top: 3px; }
.navItem.active { background: var(--ice-150); color: var(--ink-950); font-weight: var(--weight-emphasis); }
.navItem:disabled { opacity: .52; }
.navIcon { width: 17px; text-align: center; color: var(--glacier-650); }
.navStatus { margin-left: auto; font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ink-500); }

.mainCanvas { min-width: 0; padding: var(--space-5); overflow: auto; }
.workspaceHeader { display: flex; justify-content: space-between; gap: var(--space-6); align-items: flex-end; margin: 0 0 var(--space-4); }
.workspaceHeader h1 { margin: 4px 0 0; font-size: var(--type-2xl); letter-spacing: var(--track-display); font-weight: var(--weight-heading); }
.workspaceHeader p { margin: 5px 0 0; color: var(--ink-500); font-size: var(--type-base); }
.contextStrip { display: flex; gap: 1px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); overflow: hidden; background: var(--ice-200); }
.contextItem { min-width: 110px; padding: 10px 14px; background: var(--surface); }
.contextItem label { display: block; font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ink-500); margin-bottom: 4px; }
.contextItem strong { font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.statusPill { color: var(--success); }

.workbenchGrid { display: grid; grid-template-columns: minmax(185px, .46fr) minmax(560px, 1.82fr) minmax(240px, .62fr); gap: var(--space-4); align-items: stretch; }
.panel { background: var(--surface); border: 1px solid var(--ice-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow: hidden; }
.formulaPanel { border-color: var(--ice-300); box-shadow: 0 12px 34px rgba(37,63,76,.085); }
.controlPanel, .summaryPanel { box-shadow: 0 8px 24px rgba(37,63,76,.045); }
.panelHeader { padding: 17px 18px 15px; border-bottom: 1px solid var(--ice-200); }
.panelHeader h2 { margin: 4px 0 0; font-size: var(--type-md); letter-spacing: var(--track-display); }
.panelBody { padding: 17px 18px; }
.field + .field { margin-top: 15px; }
.field label { display: block; margin-bottom: 6px; color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.editableControl { min-height: 38px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); cursor: text; }
.editableControl:hover { border-color: var(--ice-300); }
.editableControl:focus-within { border-color: var(--glacier-500); box-shadow: 0 0 0 3px rgba(94,130,149,.12); }
.editableControl input { border: 0; outline: 0; background: transparent; color: var(--ink-950); }
.textControl { display: flex; align-items: center; }
.textInput, .numberInput { width: 100%; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); }
.numberGroup { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.numberGroup .numberInput { text-align: right; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.numberInput::-webkit-inner-spin-button, .numberInput::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.unit { display: grid; place-items: center; min-width: 35px; border-left: 1px solid var(--ice-200); color: var(--ink-500); background: var(--surface-soft); font-size: var(--type-sm); cursor: text; }
.controlButton { width: 100%; min-height: 38px; height: auto; margin-top: 9px; padding: 8px 10px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--ink-800); font-weight: var(--weight-emphasis); line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.controlButton.primary { background: var(--glacier-650); border-color: var(--glacier-650); color: white; }
.targetNote { margin-top: 7px; font-size: var(--type-sm); color: var(--ink-500); }
.targetNote.off { color: var(--warning); }
.placeholderBlock { margin-top: 16px; padding: 12px; border: 1px dashed var(--ice-300); border-radius: var(--radius-sm); background: var(--ice-50); color: var(--ink-500); font-size: var(--type-sm); line-height: 1.45; }
.controlPanel .panelHeader { padding: 12px 14px 10px; }
.controlPanel .panelBody { padding: 0; }
.controlPanel .field + .field { margin-top: 10px; }
.controlPanel .field label { margin-bottom: 5px; }
.controlPanel .controlButton { min-height: 36px; height: auto; margin-top: 6px; }
.controlPanel .targetNote { margin-top: 4px; }
.controlSection { border-bottom: 1px solid var(--ice-150); }
.controlSection summary { min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: var(--ink-650); cursor: pointer; font-size: var(--type-sm); font-weight: var(--weight-heading); letter-spacing: var(--track-label); list-style: none; text-transform: uppercase; }
.controlSection summary::-webkit-details-marker { display: none; }
.controlSection summary::after { content: "›"; color: var(--ink-500); font-size: 15px; font-weight: 500; transform: rotate(90deg); }
.controlSection[open] summary::after { transform: rotate(-90deg); }
.controlSection summary:hover { background: var(--ice-50); color: var(--ink-800); }
.controlSection summary:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: -2px; }
.controlSectionBody { padding: 3px 14px 13px; }
.formulaControlSection { border-bottom: 0; }
.formulaControlSection h3 { min-height: 36px; display: flex; align-items: center; margin: 0; padding: 0 14px; color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.controlPanel select { width: 100%; min-height: 36px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); padding: 0 26px 0 9px; color: var(--ink-800); font: inherit; font-size: var(--type-sm); outline: none; }
.controlPanel select:hover { border-color: var(--ice-300); }
.controlPanel select:focus-visible { border-color: var(--glacier-500); box-shadow: 0 0 0 3px rgba(94,130,149,.12); }
.controlReadout { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 10px; color: var(--ink-500); font-size: var(--type-sm); }
.controlReadout strong { color: var(--ink-800); font-size: var(--type-base); font-variant-numeric: tabular-nums; }
.controlReadout small { color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.fieldError { min-height: 13px; margin: 3px 0 0; color: var(--danger); font-size: var(--type-xs); line-height: 1.35; }
.fieldError:empty { min-height: 0; margin-top: 0; }
.scaleGuidance { min-height: 13px; margin: 4px 0 0; color: var(--ink-500); font-size: var(--type-xs); line-height: 1.35; }
.scaleGuidance:empty { min-height: 0; margin: 0; }
.controlButton:disabled { border-color: var(--ice-200); background: var(--ice-100); color: var(--ink-500); cursor: not-allowed; }
.saveState { display: block; min-height: 14px; margin-top: 5px; color: var(--ink-500); font-size: var(--type-xs); text-align: center; }

.formulaPanel .panelHeader { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.formulaPanelMeta { color: var(--ink-500); font-size: var(--type-sm); }
.formulaComposition { padding: 11px 12px 12px; border-bottom: 1px solid var(--ice-200); background: var(--ice-50); }
.formulaCompositionHeader { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.formulaCompositionHeader h3 { margin: 0; color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.formulaCompositionHeader span { color: var(--ink-500); font-size: var(--type-xs); }
.formulaCompositionBar { width: 100%; height: 16px; display: flex; overflow: hidden; border: 1px solid var(--ice-200); border-radius: 999px; background: var(--ice-150); }
.formulaCompositionSegment { min-width: 3px; height: 100%; padding: 0; border: 0; border-right: 1px solid rgba(255,255,255,.65); background: var(--ingredient-color); }
.formulaCompositionSegment:last-child { border-right: 0; }
.formulaCompositionSegment:hover, .formulaCompositionSegment.is-linked { position: relative; z-index: 1; opacity: 1; box-shadow: inset 0 0 0 2px rgba(23,38,47,.38); }
.formulaCompositionSegment:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--ink-950); outline-offset: -3px; }
.formulaCompositionSegment.is-muted { opacity: .38; }
.formulaTable { width: 100%; padding: 3px 8px 7px; border-collapse: separate; border-spacing: 0 6px; table-layout: fixed; background: var(--surface-soft); }
.formulaTable th { height: 36px; padding: 0 12px; background: var(--surface-soft); color: var(--ink-500); border-bottom: 1px solid var(--ice-200); font-size: var(--type-xs); letter-spacing: var(--track-label); text-transform: uppercase; text-align: left; }
.formulaTable th:nth-child(2), .formulaTable th:nth-child(3) { text-align: right; }
.formulaTable td { height: 51px; padding: 7px 12px; border: 0; background: transparent; vertical-align: middle; font-size: var(--type-base); transition: background-color .12s ease, box-shadow .12s ease; }
.formulaTable tbody tr > td:first-child { position: relative; padding-left: 27px; border-left: 4px solid var(--ingredient-color); border-radius: var(--radius-md) 0 0 var(--radius-md); }
.formulaTable tbody tr > td:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.formulaTable tbody tr { border-radius: var(--radius-md); background: var(--ingredient-gradient); cursor: pointer; touch-action: manipulation; }
.formulaTable tbody tr:not(.is-selected):not(:focus-within):hover { filter:brightness(.985); }
.formulaTable tbody tr:focus-within > td,
.formulaTable tbody tr.is-mass-active > td,
 .formulaTable tbody tr.is-selected > td { background: transparent; box-shadow: none; }
.formulaTable tbody tr:focus-within,
.formulaTable tbody tr.is-mass-active,
.formulaTable tbody tr.is-selected { border-radius: var(--radius-md); outline: 0; box-shadow: inset 0 0 0 2px var(--glacier-500); }
.formulaTable tbody tr.is-linked { background:var(--ingredient-gradient); filter:brightness(.97); }
.formulaTable tbody tr.is-linked > td { font-weight: var(--weight-emphasis); }
.formulaTable tbody tr.is-muted { opacity: .62; }
.formulaTable tbody tr.validationTarget { background: var(--surface); }
.formulaTable tbody tr.is-dragging > td { position: relative; z-index: 2; box-shadow: 0 8px 20px rgba(37,63,76,.14),inset 0 0 0 2px var(--glacier-500); }
.formulaTable tbody tr.is-drop-target > td { background: var(--ingredient-tint); box-shadow: inset 0 -2px var(--glacier-500); }
.formulaTable tbody tr.is-read-only > td { color: var(--ink-650); background: var(--ice-50); }
.formulaTable .ingredientCol { width: 30%; }
.formulaTable .massCol { width: 18%; }
.formulaTable .percentCol { width: 13%; }
.formulaTable .categoryCol { width: 16%; }
.formulaTable .notesCol { width: 16%; }
.formulaTable .removeCol { width: 7%; }
.formulaTable td:first-child .openIngredientProfile { display: block; min-width: 0; max-width: 100%; }
.ingredientName { display: block; min-width: 0; overflow: hidden; color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-emphasis); letter-spacing: var(--track-display); text-overflow: ellipsis; white-space: nowrap; }
.ingredientRoleIcon { width: 18px; height: 18px; flex: 0 0 18px; padding: 2px; border-radius: 5px; background: var(--ingredient-tint); color: var(--ingredient-color); }
.ingredientRole { display: inline-flex; align-items: center; gap: 5px; margin-right: 5px; color: var(--ingredient-text); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.ingredientRole .ingredientRoleIcon { width: 16px; height: 16px; flex-basis: 16px; }
.ingredientCode { display: block; margin-top: 2px; color: #82939a; font-family: var(--font-mono); font-size: var(--type-xs); }
.rowGrip {
  position: absolute; left: 2px; top: 50%; width: 22px; height: 34px; display: grid; place-items: center;
  padding: 0; transform: translateY(-50%); border: 0; border-radius: 7px; background: transparent;
  color: var(--ink-500); cursor: grab; opacity: 0; touch-action: pan-y;
  transition: opacity .12s ease,background-color .12s ease,color .12s ease;
}
.rowGrip span { font-size: 15px; line-height: 1; }
.formulaTable tbody tr:hover .rowGrip,
.formulaTable tbody tr:focus-within .rowGrip,
.rowGrip:focus-visible,
.rowGrip:active,
.rowGrip.is-touch-arming { opacity: .72; }
.rowGrip:hover, .rowGrip:focus-visible { background: var(--ice-150); color: var(--glacier-650); }
.rowGrip:active, .formulaTable tbody tr.is-dragging .rowGrip { cursor: grabbing; opacity: 1; }
.massEditor { position: relative; min-height: 36px; display: block; overflow: hidden; border-radius: var(--radius-sm); background: transparent; box-shadow: none; }
.massEditor input { position: relative; z-index: 1; width: 100%; min-width: 0; height: 34px; padding: 0 28px 0 4px; border: 0; outline: 0; background: transparent; box-shadow: none; text-align: right; color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-emphasis); font-variant-numeric: tabular-nums; appearance: none; -webkit-appearance: none; -moz-appearance: textfield; pointer-events: auto; user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.massEditor input::-webkit-inner-spin-button, .massEditor input::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.massEditor span { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 24px; display: grid; place-items: center; background: transparent; color: var(--ink-500); font-size: var(--type-sm); pointer-events: none; }
.usageBadge { display:inline-flex; min-height:22px; margin-top:3px; padding:2px 7px; border:1px solid var(--ingredient-border); border-radius:999px; background:var(--surface); color:var(--ingredient-text); font-size:var(--type-xs); font-weight:var(--weight-heading); }
.rowUsageMenu { position:relative; }
.rowUsageMenu summary { width:30px; height:30px; display:grid; place-items:center; border-radius:var(--radius-sm); color:var(--ink-500); cursor:pointer; list-style:none; letter-spacing:1px; }
.rowUsageMenu summary::-webkit-details-marker { display:none; }
.rowUsageMenu summary:hover,.rowUsageMenu[open] summary { background:var(--surface); color:var(--ink-950); }
.rowUsageMenuPanel { position:absolute; z-index:20; top:calc(100% + 4px); right:0; width:max-content; min-width:170px; padding:5px; border:1px solid var(--ice-200); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-elevated); }
.rowUsageMenuPanel button { width:100%; min-height:34px; padding:0 9px; border:0; border-radius:var(--radius-xs); background:transparent; color:var(--ink-800); text-align:left; font-size:var(--type-sm); }
.rowUsageMenuPanel button:hover { background:var(--ice-100); color:var(--ink-950); }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.categoryTag { display: inline-flex; padding: 3px 7px; border: 1px solid var(--ingredient-border); border-radius: 999px; background: var(--ingredient-tint); color: var(--ingredient-text); font-size: var(--type-xs); font-weight: var(--weight-heading); }
.notesCell { color: #7d8e95; font-size: var(--type-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowActions { display: flex; justify-content: flex-end; align-items: center; gap: 1px; opacity: .45; }
.formulaTable tbody tr:hover .rowActions, .formulaTable tbody tr:focus-within .rowActions { opacity: 1; }
.removeButton { width: 22px; height: 26px; padding: 0; border: 0; background: transparent; color: var(--ink-500); border-radius: 50%; font-size: var(--type-sm); touch-action: manipulation; }
.removeButton:hover { background: #f7eeee; color: var(--danger); }
.addIngredientBar { padding: 12px 14px; background: var(--ice-50); border-top: 1px solid var(--ice-200); }
.openIngredientPicker { width: 100%; height: 36px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--glacier-650); padding: 0 12px; text-align: left; font-weight: var(--weight-emphasis); }
.openIngredientPicker:hover, .openIngredientPicker:focus { border-color: var(--glacier-500); background: var(--ice-50); outline: none; }
.ingredientPickerBackdrop { position: fixed; z-index: 50; inset: 0; background: rgba(25,43,51,.24); backdrop-filter: blur(2px); }
.ingredientPickerModal { position: fixed; z-index: 51; top: 50%; left: 50%; width: min(620px,calc(100vw - 32px)); max-height: min(720px,calc(100vh - 32px)); display: flex; flex-direction: column; overflow: hidden; transform: translate(-50%,-50%); border: 1px solid var(--ice-300); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 24px 64px rgba(31,53,63,.22); }
.ingredientPickerHeader { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--ice-200); background: var(--ice-50); }
.ingredientPickerHeader h2 { margin: 3px 0 0; color: var(--ink-950); font-size: var(--type-md); }
.pickerClose { width: 32px; height: 32px; flex: 0 0 32px; border: 0; border-radius: 50%; background: var(--ice-150); color: var(--ink-650); font-size: 19px; }
.ingredientPickerBody { min-height: 0; display: flex; flex: 1; flex-direction: column; padding: 14px 16px 0; }
.pickerSearchLabel { margin-bottom: 5px; color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.ingredientPickerBody > input { width: 100%; min-height: 40px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); padding: 0 11px; outline: none; color: var(--ink-950); }
.ingredientPickerBody > input:focus { border-color: var(--glacier-500); box-shadow: 0 0 0 3px rgba(94,130,149,.12); }
.pickerCategories { display: flex; gap: 6px; margin: 10px -2px 0; padding: 2px 2px 8px; overflow-x: auto; }
.pickerCategories button { min-height: 27px; flex: 0 0 auto; padding: 0 9px; border: 1px solid var(--ice-200); border-radius: 999px; background: var(--surface); color: var(--ink-500); font-size: var(--type-xs); }
.pickerCategories button.active { border-color: var(--glacier-500); background: var(--ice-150); color: var(--ink-800); font-weight: var(--weight-emphasis); }
.pickerResultCount { padding: 5px 2px; color: var(--ink-500); font-size: var(--type-xs); }
.ingredientOptions { min-height: 160px; max-height: 390px; overflow-y: auto; border-top: 1px solid var(--ice-150); }
.ingredientPickerResult { width: 100%; min-width: 0; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 9px; border: 0; border-bottom: 1px solid var(--ice-150); border-radius: 0; background: transparent; color: var(--ink-800); text-align: left; }
.pickerResultIdentity { min-width: 0; display: flex; align-items: center; gap: 9px; }
.pickerResultText { min-width: 0; display: grid; gap: 3px; }
.pickerResultText strong, .pickerResultText small { overflow-wrap: anywhere; }
.pickerResultText strong { color: var(--ink-950); font-size: var(--type-base); }
.pickerResultText small { color: var(--ink-500); font-size: var(--type-xs); line-height: 1.35; }
.ingredientPickerResult.is-used { opacity: .7; }
.ingredientPickerResult.is-used:hover, .ingredientPickerResult.is-used:focus-visible { opacity: 1; }
.ingredientPickerResult.highlighted, .ingredientPickerResult:hover { background: var(--ice-100); }
.ingredientPickerResult:focus-visible { position: relative; outline: 2px solid var(--glacier-500); outline-offset: -2px; opacity: 1; }
.inFormulaStatus { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: var(--ice-150); color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-heading); }
.pickerFooter { display: flex; justify-content: flex-end; padding: 11px 0 13px; }
.pickerFooter button, .pickerNoResults button, .pickerState button { min-height: 31px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); padding: 0 10px; color: var(--glacier-650); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.pickerNoResults, .pickerState { padding: 34px 16px; color: var(--ink-500); text-align: center; }
.pickerNoResults strong, .pickerState strong { display: block; color: var(--ink-800); font-size: var(--type-base); }
.pickerNoResults p, .pickerState p { margin: 6px 0 13px; font-size: var(--type-sm); line-height: 1.45; }
.duplicateChoice { display: grid; gap: 8px; padding: 20px; }
.duplicateChoice p { margin: 0 0 5px; color: var(--ink-650); font-size: var(--type-sm); }
.duplicateChoice button { min-height: 40px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-800); font-weight: var(--weight-emphasis); }
.duplicateChoice button:hover, .duplicateChoice button:focus-visible { border-color: var(--glacier-500); background: var(--ice-50); outline: 2px solid transparent; }
.customIngredientForm { min-height: 0; overflow-y: auto; padding: 16px; }
.customIngredientForm input, .customIngredientForm select, .customIngredientForm textarea { width: 100%; min-height: 36px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); padding: 7px 9px; color: var(--ink-950); outline: none; }
.customIngredientForm input:focus, .customIngredientForm select:focus, .customIngredientForm textarea:focus { border-color: var(--glacier-500); box-shadow: 0 0 0 3px rgba(94,130,149,.12); }
.customIngredientForm textarea { min-height: 66px; resize: vertical; }
.customFormGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.customAdvanced { margin-top: 12px; padding: 9px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); }
.customAdvanced summary { color: var(--ink-650); cursor: pointer; font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.customAdvanced .customFormGrid { margin-top: 10px; }
.customFormActions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.customFormActions button { min-height: 36px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); padding: 0 12px; color: var(--ink-650); }
.customFormActions button.primary { border-color: var(--glacier-650); background: var(--glacier-650); color: white; }
.pickerAnnouncement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ingredientLibraryPanel { overflow: hidden; }
.libraryHeaderActions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.functionalRoleLine { margin: 8px 0 0; color: var(--ink-500); font-size: var(--type-sm); line-height: 1.4; }
.lifecycleNotice, .duplicateNotice { margin: 8px 0 0; padding: 7px 8px; border-radius: 6px; background: var(--notice-warn-bg-strong); color: var(--notice-warn-fg); font-size: var(--type-sm); }
.duplicateNotice { background: var(--ice-100); color: var(--ink-650); }
.ingredientEditorBackdrop { position: fixed; inset: 0; z-index: 90; background: rgba(18,31,39,.42); }
.ingredientEditor { position: fixed; z-index: 91; inset: max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); width: min(880px,calc(100% - 36px)); margin: auto; overflow: auto; border: 1px solid var(--ice-200); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-elevated); }
.ingredientEditor > header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ice-200); background: rgba(255,255,255,.96); }
.ingredientEditor h2 { margin: 2px 0 0; }
.ingredientEditor form { display: grid; gap: 14px; padding: 18px; }
.ingredientEditor fieldset { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); }
.ingredientEditor legend { padding: 0 6px; color: var(--ink-650); font-weight: var(--weight-heading); }
.ingredientFormGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.ingredientFormGrid label { display: grid; align-content: start; gap: 5px; min-width: 0; color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.ingredientFormGrid .wide { grid-column: 1 / -1; }
.ingredientFormGrid input, .ingredientFormGrid select, .ingredientFormGrid textarea { width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid var(--ice-300); border-radius: 7px; background: var(--surface); color: var(--ink-950); font: inherit; }
.ingredientFormGrid textarea { min-height: 76px; resize: vertical; }
.roleChoices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.roleChoices label { display: flex; align-items: center; gap: 7px; min-height: 36px; font-size: var(--type-sm); }
.fieldHint { margin: 0 0 10px; color: var(--ink-500); font-size: var(--type-sm); }
.ingredientValidationSummary { padding: 12px; border: 1px solid var(--notice-warn-border); border-radius: var(--radius-sm); background: var(--notice-warn-bg); }
.ingredientValidationSummary h3 { margin: 0 0 8px; font-size: var(--type-base); }
.ingredientValidationSummary ul { margin: 0; padding-left: 20px; }
.ingredientValidationSummary li { margin: 4px 0; color: var(--ink-650); font-size: var(--type-sm); }
.ingredientEditor footer { position: sticky; bottom: -18px; display: flex; flex-wrap: wrap; gap: 9px; padding: 14px 0 0; background: var(--surface); }
.ingredientGovernanceSummary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ice-200); background: var(--ice-50); }
.ingredientGovernanceSummary > div { min-width: 0; padding: 9px; border: 1px solid var(--ice-150); border-radius: 7px; background: var(--surface); }
.ingredientGovernanceSummary .wide { grid-column: 1 / -1; }
.ingredientGovernanceSummary small, .ingredientGovernanceSummary strong, .ingredientGovernanceSummary span { display: block; overflow-wrap: anywhere; }
.ingredientGovernanceSummary small { color: var(--ink-500); font-size: var(--type-xs); text-transform: uppercase; }
.ingredientGovernanceSummary strong { margin-top: 3px; color: var(--ink-950); font-size: var(--type-sm); }
.ingredientGovernanceSummary span, .ingredientGovernanceSummary li { margin-top: 3px; color: var(--ink-500); font-size: var(--type-sm); }
.ingredientGovernanceSummary ul { margin: 5px 0 0; padding-left: 18px; }
.libraryHeader { gap: 24px; }
.librarySearch { width: min(320px,40vw); border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--surface); padding: 10px 12px; color: var(--ink-950); font: inherit; outline: none; }
.librarySearch:hover { border-color: var(--ice-300); }
.librarySearch:focus { border-color: var(--glacier-500); box-shadow: 0 0 0 3px rgba(94,130,149,.12); }
.ingredientLibraryGrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,330px),1fr)); gap: 12px; min-width: 0; padding: 16px; }
.ingredientLibraryCard { container-type: inline-size; min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: hidden; padding: 14px 14px 14px 12px; border: 1px solid var(--ingredient-border); border-left: 4px solid var(--ingredient-color); border-radius: var(--radius-md); background: var(--ingredient-gradient); color: inherit; font: inherit; text-align: left; }
.ingredientLibraryCard:hover, .ingredientLibraryCard:focus-visible { border-color: var(--ingredient-color); background: var(--ingredient-gradient); outline: none; }
.ingredientLibraryCard.is-selected { border-left-width: 6px; box-shadow: 0 0 0 2px var(--ingredient-tint),var(--shadow-soft); }
.ingredientLibraryCard.is-linked { border-color: var(--ingredient-color); box-shadow: 0 0 0 2px var(--ingredient-tint); }
.ingredientLibraryCard.is-muted { opacity: .68; }
.ingredientLibraryTitle { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,140px); align-items: start; gap: 10px; min-width: 0; }
.ingredientLibraryTitle > div { min-width: 0; }
.ingredientLibraryTitle strong { display: flex; align-items: center; gap: 6px; max-width: 100%; color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-emphasis); line-height: 1.28; overflow-wrap: anywhere; }
.ingredientLibraryTitle .ingredientRoleIcon { width: 20px; height: 20px; flex-basis: 20px; }
.ingredientRoleLabel { color: var(--ingredient-text); font-weight: var(--weight-heading); }
.historicalIngredientIdentity { min-width: 0; display: inline-flex; align-items: center; gap: 7px; border-left: 3px solid var(--ingredient-color); padding-left: 7px; color: var(--ink-950); text-align: left; }
.historicalIngredientIdentity > span { min-width: 0; display: grid; gap: 2px; }
.historicalIngredientIdentity strong { color: var(--ink-950); font-size: inherit; overflow-wrap: anywhere; }
.historicalIngredientIdentity small { color: var(--ingredient-text); font-size: var(--type-xs); font-weight: var(--weight-emphasis); overflow-wrap: anywhere; }
.ingredientLibraryTitle code { display: block; max-width: 100%; margin-top: 3px; color: var(--ink-500); font-size: var(--type-sm); line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.ingredientLibraryTitle .categoryTag { display: -webkit-box; justify-self: end; max-width: 140px; max-height: 2.5em; overflow: hidden; padding: 3px 7px; line-height: 1.2; text-align: center; white-space: normal; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ingredientLibraryCard dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin: 12px 0 0; }
.ingredientLibraryCard dl div { min-width: 0; }
.ingredientLibraryCard dt { color: var(--ink-500); font-size: var(--type-sm); }
.ingredientLibraryCard dd { margin: 2px 0 0; color: var(--ink-650); font-size: var(--type-sm); overflow-wrap: anywhere; }
.ingredientLibraryCard dd small { display: block; color: var(--ink-500); font-size: var(--type-xs); }
.cardBadges { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.typeBadge, .confidenceBadge { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; border-radius: 999px; background: var(--ice-150); color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-heading); }
.confidence--verified { background: var(--status-verified-bg); color: var(--status-verified-fg); }
.confidence--high { background: var(--status-high-bg); color: var(--status-high-fg); }
.confidence--provisional { background: var(--status-provisional-bg); color: var(--status-provisional-fg); }
.confidence--estimated { background: var(--status-estimated-bg); color: var(--status-estimated-fg); }
.confidence--incomplete { background: var(--status-incomplete-bg); color: var(--status-incomplete-fg); }
.cardRelationship { display: grid; min-width: 0; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ice-150); }
.cardRelationship span { display: grid; grid-template-columns: 80px minmax(0,1fr); min-width: 0; gap: 7px; color: var(--ink-650); font-size: var(--type-sm); overflow-wrap: anywhere; }
.cardRelationship b { color: var(--ink-500); font-weight: var(--weight-emphasis); }
.productLine { min-width: 0; margin: 10px 0 0; color: var(--ink-500); font-size: var(--type-sm); overflow-wrap: anywhere; }
.qualityFooter { display: flex; min-width: 0; flex-wrap: wrap; gap: 5px 10px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--ice-150); color: var(--ink-500); font-size: var(--type-xs); line-height: 1.35; }
.qualityFooter span { min-width: 0; overflow-wrap: anywhere; }
.qualityFooter b { display: inline-block; margin-left: 3px; color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.quality--complete { color: var(--status-verified-fg); }
.quality--partial { color: var(--status-provisional-fg); }
.quality--incomplete, .quality--conflicted { color: var(--danger); }
.libraryFilters { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 16px; border-bottom: 1px solid var(--ice-200); background: var(--ice-50); }
.libraryFilters select { min-height: 31px; max-width: 190px; border: 1px solid var(--ice-200); border-radius: 7px; background: var(--surface); padding: 0 28px 0 9px; color: var(--ink-650); font: inherit; font-size: var(--type-sm); }
.engineeringBackdrop { position: fixed; z-index: 40; inset: 0; background: rgba(25,43,51,.2); }
.engineeringWorkbench { position: fixed; z-index: 41; top: 0; right: 0; width: min(680px,94vw); max-width: 100vw; height: 100vh; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ingredient-gradient); border-left: 4px solid var(--ingredient-color); box-shadow: -16px 0 42px rgba(31,53,63,.16); }
.ingredientProfileWorkbench { width: min(920px,96vw); display: block; overflow-x: hidden; overflow-y: auto; }
.ingredientProfileWorkbench .engineeringHeader { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.ingredientProfileWorkbench .engineeringTabs { position: sticky; top: 73px; }
.ingredientProfileWorkbench .engineeringBody { min-height: 320px; overflow: visible; }
.ingredientKnowledgeProfile{display:grid;gap:14px;padding:16px 18px;background:color-mix(in srgb,var(--surface) 76%,transparent);border-block:1px solid var(--ingredient-border)}
.ingredientProfileHero,.ingredientKnowledgeSection{border:1px solid color-mix(in srgb,var(--ingredient-border) 60%,var(--ice-200));border-radius:var(--radius-md);background:rgba(255,255,255,.72);box-shadow:0 1px 3px rgba(31,53,63,.04)}
.ingredientProfileHero { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: 24px; padding: 18px; }
.ingredientProfileHero > div { min-width: 0; }
.ingredientProfileIcon { float: left; width: 30px; height: 30px; margin: 2px 11px 8px 0; color: var(--ingredient-color); }
.ingredientProfileHero h3 { margin: 4px 0 0; font-size: var(--type-xl); }
.ingredientProfileHero code { color: var(--ink-500); font-size: var(--type-xs); }
.ingredientProfileHero p { clear: both; margin: 14px 0 0; color: var(--ink-650); line-height: 1.55; }
.ingredientProfileHero dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.ingredientProfileHero dl div, .ingredientSupplierDetails div { min-width: 0; padding: 9px; border-radius: var(--radius-sm); background: color-mix(in srgb,var(--ingredient-tint) 38%,white); }
.ingredientProfileHero dt, .ingredientSupplierDetails dt { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); text-transform: uppercase; }
.ingredientProfileHero dd, .ingredientSupplierDetails dd { margin: 4px 0 0; overflow-wrap: anywhere; font-weight: var(--weight-emphasis); }
.ingredientProfileHero h4 { clear: both; margin: 14px 0 7px; color: var(--ink-500); font-size: var(--type-xs); text-transform: uppercase; }
.ingredientVersionHistory { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ingredientVersionHistory li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px; border-radius: var(--radius-sm); background: var(--ice-50); }
.ingredientVersionHistory span, .ingredientVersionHistory time { color: var(--ink-500); font-size: var(--type-xs); }
.ingredientVersionHistory time { text-align: right; }
.ingredientKnowledgeSection { padding: 16px; }
.ingredientKnowledgeSection > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.ingredientKnowledgeSection > header h3 { margin: 3px 0 0; font-size: var(--type-base); }
.ingredientKnowledgeSection > header > span { color: var(--ink-500); font-size: var(--type-xs); }
.ingredientKnowledgeColumns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.ingredientContributionColumns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.ingredientContributionColumns > div { padding: 12px; border-radius: var(--radius-sm); background: var(--ice-50); }
.ingredientContributionColumns h4, .ingredientRelationshipGroups h4, .ingredientAlternativeList h4 { margin: 0 0 9px; }
.ingredientKnowledgePills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ingredientKnowledgePills li { padding: 5px 9px; border: 1px solid var(--ingredient-border); border-radius: 999px; background: var(--ingredient-gradient); color: var(--ingredient-text); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.ingredientKnowledgeEmpty { margin: 0; color: var(--ink-500); font-size: var(--type-xs); }
.ingredientCompositionKnowledge { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.ingredientCompositionKnowledge article { position: relative; overflow: hidden; padding: 11px; border-radius: var(--radius-sm); background: var(--ice-50); }
.ingredientCompositionKnowledge article span, .ingredientCompositionKnowledge article strong, .ingredientCompositionKnowledge article small { position: relative; z-index: 1; display: block; }
.ingredientCompositionKnowledge article span, .ingredientCompositionKnowledge article small { color: var(--ink-500); font-size: var(--type-xs); }
.ingredientCompositionKnowledge article strong { margin-top: 4px; }
.ingredientCompositionKnowledge article small { margin-top: 2px; }
.ingredientCompositionKnowledge article i { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg,var(--ingredient-color) var(--knowledge-value),var(--ice-200) var(--knowledge-value)); }
.ingredientPropertyScale { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 0; }
.ingredientPropertyScale div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: var(--radius-sm); background: var(--ice-50); }
.ingredientPropertyScale dt { color: var(--ink-600); }
.ingredientPropertyScale dd { margin: 0; color: var(--ingredient-text); font-weight: var(--weight-emphasis); }
.ingredientMetricStrip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.ingredientMetricStrip > div { padding: 11px; border-radius: var(--radius-sm); background: var(--ingredient-gradient); }
.ingredientMetricStrip span, .ingredientMetricStrip strong { display: block; }
.ingredientMetricStrip span { color: var(--ink-500); font-size: var(--type-xs); text-transform: uppercase; }
.ingredientMetricStrip strong { margin-top: 5px; font-size: var(--type-lg); }
.ingredientUsageTrend { height: 54px; display: flex; align-items: end; gap: 4px; margin-top: 10px; padding: 7px; border-radius: var(--radius-sm); background: var(--ice-50); }
.ingredientUsageTrend i { min-width: 4px; max-width: 24px; height: var(--trend-height); flex: 1; border-radius: 3px 3px 1px 1px; background: var(--ingredient-color); }
.ingredientUsageHighlights { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.ingredientUsageHighlights p { margin: 0; padding: 9px; border-radius: var(--radius-sm); background: var(--ice-50); }
.ingredientUsageHighlights b { display: block; margin-bottom: 3px; color: var(--ink-500); font-size: var(--type-xs); text-transform: uppercase; }
.ingredientAnalyticsBreakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.ingredientAnalyticsBreakdown > div { padding: 10px; border-radius: var(--radius-sm); background: var(--ice-50); }
.ingredientAnalyticsBreakdown h4 { margin: 0 0 7px; }
.ingredientAnalyticsBreakdown ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ingredientAnalyticsBreakdown li { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-650); font-size: var(--type-xs); }
.ingredientAnalyticsBreakdown strong { color: var(--ingredient-text); }
.ingredientRelationshipGroups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.ingredientRelationshipGroups h4 { display: flex; justify-content: space-between; }
.ingredientRelationshipGroups h4 span { color: var(--ingredient-text); }
.ingredientRelationshipList { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ingredientRelationshipList button { width: 100%; display: grid; gap: 2px; padding: 8px; border: 0; border-radius: var(--radius-sm); background: var(--ice-50); text-align: left; }
.ingredientRelationshipList button:hover, .ingredientRelationshipList button:focus-visible { background: var(--ingredient-gradient); outline: 2px solid var(--ingredient-border); }
.ingredientRelationshipList strong, .ingredientRelationshipList span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ingredientRelationshipList span { color: var(--ink-500); font-size: var(--type-xs); }
.ingredientAlternativeList, .ingredientResearchNotes { display: grid; gap: 8px; }
.ingredientAlternativeList article, .ingredientResearchNotes article { padding: 10px; border-radius: var(--radius-sm); background: var(--ice-50); }
.ingredientAlternativeList p { margin: 5px 0; color: var(--ink-650); }
.ingredientAlternativeList b { display: inline-block; min-width: 58px; color: var(--ink-500); font-size: var(--type-xs); text-transform: uppercase; }
.ingredientSupplierDetails { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.ingredientKnowledgeSection > a { display: inline-block; margin-top: 10px; color: var(--glacier-650); }
.ingredientSupplierNotes { display: grid; gap: 3px; margin: 10px 0 0; padding: 9px; border-radius: var(--radius-sm); background: var(--ice-50); color: var(--ink-650); }
.ingredientSupplierNotes b { color: var(--ink-500); font-size: var(--type-xs); text-transform: uppercase; }
.ingredientPairingList { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.ingredientPairingList article { position: relative; overflow: hidden; padding: 10px; border-radius: var(--radius-sm); background: var(--ice-50); }
.ingredientPairingList article div { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px; }
.ingredientPairingList span { color: var(--ink-500); font-size: var(--type-xs); }
.ingredientPairingList i { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg,var(--ingredient-color) var(--pairing-width),transparent var(--pairing-width)); }
.ingredientResearchNotes header { display: flex; justify-content: space-between; }
.ingredientResearchNotes time, .ingredientResearchNotes small { color: var(--ink-500); font-size: var(--type-xs); }
.ingredientResearchNotes p { white-space: pre-wrap; }
@media (max-width:760px){
  .ingredientProfileWorkbench { width: 100vw; max-width: 100vw; }
  .ingredientKnowledgeProfile { padding: 12px; }
  .ingredientProfileHero { grid-template-columns: 1fr; }
  .ingredientKnowledgeColumns, .ingredientRelationshipGroups { grid-template-columns: 1fr; }
  .ingredientCompositionKnowledge, .ingredientMetricStrip { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:480px){
  .ingredientKnowledgeProfile { padding: 9px; }
  .ingredientProfileHero, .ingredientKnowledgeSection { padding: 13px; }
  .ingredientProfileHero dl, .ingredientContributionColumns, .ingredientPropertyScale, .ingredientSupplierDetails, .ingredientPairingList, .ingredientUsageHighlights, .ingredientAnalyticsBreakdown { grid-template-columns: 1fr; }
  .ingredientVersionHistory li { grid-template-columns: auto 1fr; }
  .ingredientVersionHistory time { grid-column: 2; text-align: left; }
  .ingredientProfileHero h3 { font-size: var(--type-lg); }
}
.engineeringHeader { min-width: 0; flex: 0 0 auto; display: flex; justify-content: space-between; gap: 20px; padding: 20px; border-bottom: 1px solid var(--ice-200); }
.engineeringHeader > div:first-child { min-width: 0; }
.engineeringHeader h2 { margin: 4px 0; color: var(--ink-950); font-size: var(--type-xl); font-weight: var(--weight-emphasis); line-height: 1.15; }
.engineeringHeader code { color: var(--ink-500); font-size: var(--type-xs); overflow-wrap: anywhere; }
.engineeringHeaderActions { display: flex; align-items: flex-start; gap: 8px; }
.engineeringHeaderActions button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--ice-150); color: var(--ink-650); font-size: 20px; }
.engineeringHeaderActions button[data-edit-ingredient] { width: auto; padding: 0 10px; border-radius: 999px; font-size: var(--type-sm); white-space: nowrap; }
.readMode { display: inline-flex; min-height: 24px; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--ice-150); color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); }
.engineeringTabs { position: relative; z-index: 2; width: 100%; min-width: 0; height: 52px; flex: 0 0 52px; display: flex; align-items: flex-start; column-gap: 6px; padding: 7px 12px 7px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; touch-action: pan-x; border-bottom: 1px solid var(--ice-200); background: var(--surface); box-shadow: 0 3px 8px rgba(37,63,76,.035); scrollbar-width: thin; scrollbar-color: var(--ice-300) transparent; }
.engineeringTabs::-webkit-scrollbar { height: 5px; }
.engineeringTabs::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--ice-300); }
.engineeringTabs button { width: max-content; min-width: max-content; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; overflow: visible; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-500); font: inherit; font-size: var(--type-sm); line-height: 1; white-space: nowrap; word-break: normal; overflow-wrap: normal; scroll-margin-inline: 24px; scroll-snap-align: start; }
.engineeringTabs button.active { border-bottom-color: var(--glacier-500); color: var(--ink-950); font-weight: var(--weight-heading); }
.engineeringTabs button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: -3px; }
.engineeringBody { position: relative; z-index: 1; min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; padding: 24px 20px 20px; }
.engineeringBody > section { animation: engineeringTabFade 200ms ease-out both; }
@keyframes engineeringTabFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.engineeringSectionHeader { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.engineeringSectionHeader h3 { margin: 0; color: var(--ink-950); font-size: var(--type-sm); font-weight: var(--weight-emphasis); line-height: 1.25; }
.engineeringSectionHeader span { color: var(--ink-500); font-size: var(--type-xs); }
.engineeringHealth { display: grid; grid-template-columns: minmax(120px,.7fr) minmax(0,1.3fr); gap: 18px; margin-bottom: 10px; padding: 14px; border: 1px solid var(--ice-150); border-radius: var(--radius-sm); background: var(--ice-50); }
.engineeringHealthScore h4 { margin: 0; color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.engineeringHealthScore strong { display: block; margin-top: 5px; color: var(--ink-950); font-size: var(--type-lg); font-weight: var(--weight-emphasis); line-height: 1.15; font-variant-numeric: tabular-nums; }
.engineeringHealthScore small { display: block; margin-top: 5px; color: var(--ink-500); font-size: var(--type-xs); }
.engineeringHealth ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 12px; align-content: center; margin: 0; padding: 0; list-style: none; }
.engineeringHealth li { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--ink-650); font-size: var(--type-xs); overflow-wrap: anywhere; }
.engineeringHealth--pass span { color: #477568; }
.engineeringHealth--warning span { color: #927541; }
.validationSummary { display: grid; grid-template-columns: minmax(130px,.7fr) minmax(0,1.3fr); gap: 18px; margin-bottom: 10px; padding: 14px; border: 1px solid var(--ice-150); border-radius: var(--radius-sm); background: var(--ice-50); }
.validationSummary h4 { margin: 0; color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.validationSummary strong { display: block; margin-top: 5px; color: var(--ink-950); font-size: var(--type-lg); }
.validationSummary small { display: block; margin-top: 5px; color: var(--ink-500); font-size: var(--type-xs); }
.validationSummary ul { display: grid; gap: 6px; align-content: center; margin: 0; padding: 0; list-style: none; }
.validationSummary li { display: flex; align-items: center; gap: 5px; color: var(--ink-650); font-size: var(--type-xs); }
.compositionSummary { margin-bottom: 10px; padding: 12px; border: 1px solid var(--ice-150); border-radius: var(--radius-sm); background: var(--ice-50); }
.compositionSummaryHeader { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.compositionSummaryHeader h4 { margin: 0; color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.compositionSummaryHeader span { color: var(--ink-500); font-size: var(--type-xs); }
.compositionBar { width: 100%; height: 14px; display: flex; overflow: hidden; border-radius: 999px; background: var(--ice-150); }
.compositionSegment { display: block; height: 100%; min-width: 2px; padding: 0; border: 0; border-right: 1px solid rgba(255,255,255,.68); background: var(--composition-color); }
.compositionSegment:last-child { border-right: 0; }
.compositionSegment:hover, .compositionSegment.is-composition-linked { position: relative; z-index: 1; box-shadow: inset 0 0 0 2px rgba(23,38,47,.38); }
.compositionSegment:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--ink-950); outline-offset: -3px; }
.compositionSegment.is-composition-muted { opacity: .38; }
.compositionLegend { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 9px; }
.compositionLegend > button { display: grid; grid-template-columns: 8px auto auto; align-items: center; gap: 5px; min-width: 0; padding: 2px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-500); font-size: var(--type-xs); text-align: left; }
.compositionLegend > button:hover, .compositionLegend > button.is-composition-linked { background: var(--composition-tint); }
.compositionLegend > button:focus-visible { outline: 2px solid var(--composition-color); outline-offset: 2px; }
.compositionLegend > button.is-composition-muted { opacity: .5; }
.compositionLegend b { color: var(--ink-650); font-weight: var(--weight-emphasis); }
.compositionLegend em { color: var(--ink-500); font-style: normal; font-variant-numeric: tabular-nums; }
.compositionSwatch { width: 7px; height: 7px; display: block; border-radius: 2px; background: var(--composition-color); }
.compositionReconciliation { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ice-150); }
.compositionReconciliationPrimary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compositionReconciliationPrimary span { min-width: 0; }
.compositionReconciliation small { display: block; color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.compositionReconciliationPrimary strong { display: block; margin-top: 3px; color: var(--ink-950); font-size: var(--type-lg); font-variant-numeric: tabular-nums; }
.compositionStatus { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 11px; padding: 9px 10px; border-radius: var(--radius-sm); background: rgba(227,239,235,.72); }
.compositionStatus strong { color: #315f54; font-size: var(--type-lg); }
.compositionReconciliation dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 10px 0 0; }
.compositionReconciliation dl div { min-width: 0; padding: 8px; border: 1px solid var(--ice-150); border-radius: 6px; }
.compositionReconciliation dt { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-emphasis); overflow-wrap: anywhere; }
.compositionReconciliation dd { margin: 3px 0 0; color: var(--ink-950); font-size: var(--type-lg); font-weight: var(--weight-emphasis); font-variant-numeric: tabular-nums; }
.engineeringGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; margin: 0; }
.engineeringValue { min-width: 0; padding: 12px; border: 1px solid var(--ice-150); border-radius: var(--radius-sm); background: var(--ice-50); }
.engineeringValue dt { display: flex; align-items: center; gap: 6px; color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.engineeringValue dd { margin: 5px 0 0; color: var(--ink-950); font-size: var(--type-lg); font-weight: var(--weight-emphasis); line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.compositionPropertyCard { border-left: 4px solid var(--composition-color); background: linear-gradient(120deg,var(--composition-tint),var(--ice-50) 42%); }
.compositionPropertyCard:hover, .compositionPropertyCard.is-composition-linked { border-color: var(--composition-color); box-shadow: 0 0 0 2px var(--composition-tint); }
.compositionPropertyCard:focus-visible { outline: 2px solid var(--composition-color); outline-offset: 2px; }
.compositionPropertyCard.is-composition-muted { opacity: .64; }
.compositionPropertyDot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--composition-color,var(--ice-300)); box-shadow: 0 0 0 1px rgba(23,38,47,.1); }
.engineeringValue.isNotApplicable dd { color: var(--ink-500); font-style: italic; }
.engineeringValue.isNotApplicable .engineeringUnavailable { color: var(--ink-500); }
.compositionPropertyCard.isNotApplicable { border-left: 1px dashed var(--ice-200); background: transparent; }
.compositionPropertyCard.isNotApplicable .compositionPropertyDot { background: transparent; border: 1px solid var(--ice-300); }
.engineeringRange { white-space: nowrap; }
.compositionPropertyCard.isUnknown { border-left: 1px solid var(--ice-150); background: var(--ice-50); }
.compositionPropertyCard.isUnknown .compositionPropertyDot { background: var(--ice-300); }
.compositionPropertyCard.isUnknown:hover, .compositionPropertyCard.isUnknown.is-composition-linked { border-color: var(--ice-300); box-shadow: 0 0 0 2px var(--ice-100); }
.compositionPropertyCard.isUnknown:focus-visible { outline-color: var(--ice-300); }
.engineeringValue--text dd { font-size: var(--type-base); line-height: 1.35; }
.engineeringLineage { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.engineeringLineage span { color: var(--ink-500); }
.engineeringValue small { display: grid; gap: 2px; margin-top: 10px; color: var(--ink-500); font-size: var(--type-xs); opacity: .82; overflow-wrap: anywhere; }
.engineeringValue small b { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-emphasis); letter-spacing: var(--track-label); }
.engineeringValue small span { color: var(--ink-500); font-size: var(--type-xs); line-height: 1.35; }
.engineeringValue.isUnknown dd { color: var(--ink-650); font-size: var(--type-lg); }
.engineeringUnavailable { margin: 7px 0 0; color: var(--ink-500); font-size: var(--type-xs); line-height: 1.4; }
.provenanceSummary { margin-bottom: 10px; padding: 14px; border: 1px solid var(--ice-150); border-radius: var(--radius-sm); background: var(--ice-50); }
.provenanceSummary > div > small, .historyTimeline h4 { display: block; margin: 0; color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.provenanceSummary > div > strong { display: block; margin-top: 5px; color: var(--ink-950); font-size: var(--type-lg); line-height: 1.25; overflow-wrap: anywhere; }
.provenanceSummary dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 12px 0 0; }
.provenanceSummary dl div { min-width: 0; }
.provenanceSummary dt { color: var(--ink-500); font-size: var(--type-xs); }
.provenanceSummary dd { margin: 3px 0 0; color: var(--ink-650); font-size: var(--type-sm); overflow-wrap: anywhere; }
.provenanceConfidence { display: inline-flex; padding: 2px 6px; border-radius: 999px; background: var(--ice-150); color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.provenanceSummary a { display: inline-block; margin-top: 12px; color: var(--glacier-650); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.historyTimeline { margin-bottom: 10px; padding: 14px; border: 1px solid var(--ice-150); border-radius: var(--radius-sm); background: var(--ice-50); }
.historyTimeline ol { margin: 12px 0 0; padding: 0; list-style: none; }
.historyTimeline li { position: relative; display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 9px; padding: 0 0 14px; }
.historyTimeline li:last-child { padding-bottom: 0; }
.historyTimeline li::before { position: absolute; top: 10px; bottom: 0; left: 4px; width: 1px; background: var(--ice-300); content: ""; }
.historyTimeline li:last-child::before { display: none; }
.historyTimeline li > i { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 2px; border: 2px solid var(--ice-300); border-radius: 50%; background: var(--surface); }
.historyTimeline li.isCurrent > i { border-color: var(--glacier-500); background: var(--glacier-500); }
.historyTimeline li strong, .historyTimeline li span, .historyTimeline li small { display: block; overflow-wrap: anywhere; }
.historyTimeline li strong { color: var(--ink-800); font-size: var(--type-sm); }
.historyTimeline li span { margin-top: 2px; color: var(--ink-650); font-size: var(--type-xs); }
.historyTimeline li small { margin-top: 3px; color: var(--ink-500); font-size: var(--type-xs); }
.engineeringState { padding: 28px; border: 1px dashed var(--ice-200); border-radius: var(--radius-md); color: var(--ink-500); font-size: var(--type-sm); text-align: center; }
.engineeringState p, .emptyHistory { color: var(--ink-500); font-size: var(--type-sm); }
.origin { display: inline-flex; margin-left: 6px; padding: 1px 5px; border-radius: 999px; background: var(--ice-150); color: var(--ink-500); font-size: var(--type-xs); vertical-align: 1px; }
.origin--inherited { background: #f1eef7; color: #5c5074; }
.origin--estimated { background: #f7f1e4; color: #69552e; }
.origin--unknown { background: var(--ice-150); color: var(--ink-650); }
.origin--derived { background: #edf5f7; color: #405f6c; }

@container (max-width: 360px) {
  .ingredientLibraryTitle { grid-template-columns: minmax(0,1fr); }
  .ingredientLibraryTitle .categoryTag { justify-self: start; max-width: 100%; text-align: left; }
}

@media (max-width: 620px) {
  .engineeringGrid { grid-template-columns: 1fr; }
  .engineeringHealth, .validationSummary { grid-template-columns: 1fr; }
  .provenanceSummary dl { grid-template-columns: 1fr; }
  .engineeringHeader { padding: 16px; }
  .ingredientProfileWorkbench { height: 100dvh; }
  .ingredientProfileWorkbench .engineeringHeader { padding-top: calc(16px + env(safe-area-inset-top)); }
  .ingredientProfileWorkbench .engineeringTabs { top: calc(73px + env(safe-area-inset-top)); }
  .engineeringBody { padding: 16px; }
}

@media (max-width: 620px) {
  .ingredientPickerModal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .customFormGrid { grid-template-columns: 1fr; }
  .ingredientPickerResult { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .engineeringBody > section { animation: none; }
}

.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.controlPanel, .formulaPanel, .analysisPanel { height: 100%; }
.analysisPanel { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; container: analysis / inline-size; }
.analysisDetailRegion { width: 100%; max-width: 100%; min-width: 0; margin-top: var(--space-4); }
.analysisHeader { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ice-200); }
.analysisHeader h2 { margin: 4px 0 0; font-size: var(--type-md); }
.analysisUpdate { flex: 0 0 auto; color: var(--ink-500); font-size: var(--type-xs); }
.formulaValidationStatus { min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--ice-200); background: var(--ice-50); }
.formulaValidationStatus > div { min-width: 0; }
.validationStatusIcon { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--ice-300); border-radius: 50%; color: var(--glacier-650); background: var(--surface); font-size: var(--type-sm); font-weight: var(--weight-heading); }
.formulaValidationStatus small { display: block; color: var(--ink-500); font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--track-label); }
.formulaValidationStatus strong { display: block; margin-top: 2px; color: var(--ink-950); font-size: var(--type-base); }
.formulaValidationStatus p { margin: 3px 0 0; color: var(--ink-500); font-size: var(--type-xs); line-height: 1.4; }
.formulaValidationStatus > dl { display: flex; gap: 8px; margin: 0; }
.formulaValidationStatus > dl div { min-width: 36px; text-align: center; }
.formulaValidationStatus dt { color: var(--ink-500); font-size: var(--type-xs); }
.formulaValidationStatus dd { margin: 2px 0 0; color: var(--ink-800); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.formulaValidationStatus.validation--review-recommended { border-left: 3px solid var(--warning); }
.formulaValidationStatus.validation--incomplete-analysis { border-left: 3px solid var(--glacier-500); }
.formulaValidationStatus.validation--blocking-issue { border-left: 3px solid var(--danger); background: #faf6f6; }
.formulaValidationStatus.validation--blocking-issue .validationStatusIcon { border-color: #d9bebe; color: var(--danger); }
@container analysis (max-width: 560px) {
  .formulaValidationStatus { grid-template-columns: 28px minmax(0,1fr); align-items: start; gap: 10px 12px; padding: 14px; }
  .formulaValidationStatus .validationStatusIcon { margin-top: 2px; }
  .formulaValidationStatus > dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; width: 100%; padding-top: 12px; border-top: 1px solid var(--ice-200); }
  .formulaValidationStatus > dl div { min-width: 0; padding-inline: 8px; }
  .formulaValidationStatus > dl div + div { border-left: 1px solid var(--ice-200); }
}
.formulaSnapshot { padding: 14px; background: var(--ice-50); }
.analysisSectionHeading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.analysisSectionHeading h3, .analysisBody h3 { margin: 0; color: var(--ink-800); font-size: var(--type-sm); letter-spacing: var(--track-label); text-transform: uppercase; }
.analysisSectionHeading span { color: var(--ink-500); font-size: var(--type-xs); }
.analysisSnapshotGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.analysisMetric { min-width: 0; min-height: 88px; padding: 9px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--surface); }
.analysisMetricLabel { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.analysisMetric > strong { display: block; margin: 6px 0 5px; color: var(--ink-950); font-size: var(--type-lg); line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metricState { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.metricState i { width: 14px; height: 14px; display: inline-grid; place-items: center; border: 1px solid var(--ice-300); border-radius: 50%; font-style: normal; }
.analysisMetric small { display: block; margin-top: 5px; color: var(--ink-500); font-size: var(--type-xs); }
.analysisMetric.state--outside-range { border-left: 3px solid var(--warning); }
.analysisMetric.state--near-range { border-left: 3px solid var(--glacier-500); }
.analysisMetric.state--not-available { background: var(--surface-soft); }
.analysisMetric.state--not-available > strong { color: var(--ink-500); font-size: var(--type-base); }
.analysisTabs {
  width: 100%; max-width: 100%; min-width: 0; min-height: 58px; box-sizing: border-box;
  display: flex; align-items: flex-start; gap: 2px;
  padding: 7px 10px 11px; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: 10px;
  border-bottom: 1px solid var(--ice-200); margin-bottom: 4px;
  background: var(--surface); overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--ice-300) transparent;
}
.analysisTabs::-webkit-scrollbar { height: 5px; }
.analysisTabs::-webkit-scrollbar-track { background: transparent; }
.analysisTabs::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--ice-300); }
.analysisTabs button {
  min-width: max-content; min-height: 36px; flex: 0 0 auto; padding: 8px 11px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--ink-500); font-size: var(--type-base); font-weight: var(--weight-emphasis); line-height: 1.35; white-space: nowrap;
}
.analysisTabs button.active { border-bottom-color: var(--glacier-650); color: var(--ink-950); }
.analysisTabs button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: -3px; }
.analysisBody { width: 100%; max-width: 100%; min-width: 0; padding: 14px; overflow-wrap: anywhere; }
.engineeringIntelligence { display: grid; gap: 18px; }
.intelligenceOverview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.intelligenceOverview div { min-width: 0; padding: 10px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--surface); }
.intelligenceOverview strong, .intelligenceOverview span { display: block; }
.intelligenceOverview strong { color: var(--ink-950); font-size: var(--type-lg); }
.intelligenceOverview span { margin-top: 3px; color: var(--ink-500); font-size: var(--type-sm); overflow-wrap: anywhere; }
.intelligenceBoundary { margin: 0; padding: 10px; border-radius: var(--radius-sm); background: var(--ice-50); color: var(--ink-650); font-size: var(--type-base); line-height: var(--leading-body); }
.intelligenceFindingList { display: grid; gap: 9px; }
.intelligenceFinding { min-width: 0; padding: 11px; border: 1px solid var(--ice-200); border-left: 3px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); }
.intelligenceFinding.severity--critical { border-left-color: var(--danger); }
.intelligenceFinding.severity--caution { border-left-color: var(--warning); }
.intelligenceFinding.severity--watch { border-left-color: var(--glacier-650); }
.intelligenceFinding.severity--informational { border-left-color: var(--ice-400); }
.intelligenceFinding > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-500); font-size: var(--type-xs); text-transform: capitalize; }
.intelligenceSeverity { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-800); font-weight: var(--weight-heading); }
.intelligenceSeverity i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
.intelligenceFinding > h3 { margin: 9px 0 0; color: var(--ink-950); font-size: var(--type-base); letter-spacing: var(--track-body); text-transform: none; }
.intelligenceFinding > p, .intelligenceFinding details p { margin: 5px 0 0; color: var(--ink-650); font-size: var(--type-base); line-height: var(--leading-body); overflow-wrap: anywhere; }
.intelligenceFinding details { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--ice-150); }
.intelligenceFinding summary { min-height: 36px; display: flex; align-items: center; color: var(--ink-650); cursor: pointer; font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.intelligenceFinding summary:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
.intelligenceFinding details small { display: block; margin-top: 7px; color: var(--ink-500); font-size: var(--type-sm); }
.analysisEmpty { padding: 38px 20px; color: var(--ink-500); text-align: center; }
.analysisEmpty strong { display: block; color: var(--ink-800); font-size: var(--type-base); }
.analysisEmpty p { max-width: 360px; margin: 7px auto 0; font-size: var(--type-sm); line-height: 1.5; }
.completenessCard { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--ice-50); }
.completenessCard > div:first-child { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.completenessCard span { color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.completenessCard strong { color: var(--ink-950); font-size: var(--type-md); }
.completenessCard small { grid-column: 1 / -1; color: var(--ink-500); font-size: var(--type-xs); text-transform: capitalize; }
.completenessTrack { height: 5px; overflow: hidden; border-radius: 999px; background: var(--ice-200); }
.completenessTrack i { display: block; height: 100%; border-radius: inherit; background: var(--glacier-500); }
.analysisSummary > section + section { margin-top: 15px; }
.liveFormulaIntelligence { display:grid; gap:16px; padding:15px; border:1px solid var(--ice-200); border-radius:var(--radius-md); background:linear-gradient(145deg,var(--surface),var(--ice-50)); }
.liveFormulaIntelligence > header,.livePrediction header,.liveOpportunities article header,.liveHistorical article > div:first-child { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.liveFormulaIntelligence h3 { margin:2px 0 0; color:var(--ink-950); font-size: var(--type-base); }
.liveOverall,.livePrediction header b,.liveOpportunities header span { padding:5px 8px; border:1px solid var(--ice-300); border-radius:999px; color:var(--ink-650); background:color-mix(in srgb,var(--surface) 75%,transparent); font-size: var(--type-xs); white-space:nowrap; }
.liveOverall.state--healthy { border-color:var(--glacier-400); color:var(--glacier-750); }
.liveOverall.state--outside-preferred-range { border-color:var(--sand-500); color:var(--ink-800); }
.liveBoundary { margin:0; color:var(--ink-600); font-size: var(--type-base); line-height:var(--leading-body); }
.liveHealthGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.liveHealthItem { min-width:0; padding:9px; border-left:3px solid var(--ice-300); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--surface) 82%,transparent); }
.liveHealthItem.state--healthy { border-left-color: var(--glacier-400); }
.liveHealthItem.state--borderline { border-left-color: var(--sand-400); }
.liveHealthItem.state--outside-preferred-range { border-left-color: var(--sand-650); }
.liveHealthItem span, .liveHealthItem strong, .liveHealthItem small { display: block; }
.liveHealthItem span { color: var(--ink-500); font-size: var(--type-xs); }
.liveHealthItem strong { margin-top: 3px; color: var(--ink-900); font-size: var(--type-sm); }
.liveHealthItem small { margin-top: 4px; color: var(--ink-500); font-size: var(--type-sm); line-height: 1.35; }
.livePredictionGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.livePrediction { padding: 11px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--surface); }
.livePrediction header span { color: var(--ink-600); font-size: var(--type-xs); }
.livePrediction > strong { display: block; margin-top: 8px; color: var(--ink-950); font-size: var(--type-base); }
.livePrediction details, .liveOpportunities details { margin-top: 8px; border-top: 1px solid var(--ice-150); }
.livePrediction summary, .liveOpportunities summary { min-height: 34px; display: flex; align-items: center; color: var(--glacier-750); font-size: var(--type-base); cursor: pointer; }
.livePrediction ul { margin: 0 0 8px; padding-left: 16px; color: var(--ink-650); font-size: var(--type-base); line-height: var(--leading-body); }
.livePrediction small { color: var(--ink-500); font-size: var(--type-sm); line-height: 1.4; }
.liveAdvisories, .liveOpportunities, .liveHistorical { display: grid; gap: 8px; }
.liveAdvisories article, .liveOpportunities article, .liveHistorical article { padding: 10px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: color-mix(in srgb,var(--surface) 86%,transparent); }
.liveAdvisories article { border-left: 3px solid var(--sand-400); }
.liveAdvisories strong, .liveOpportunities strong, .liveHistorical strong { color: var(--ink-900); font-size: var(--type-base); }
.liveAdvisories p, .liveOpportunities p, .liveHistorical p { margin: 4px 0 0; color: var(--ink-600); font-size: var(--type-base); line-height: var(--leading-body); }
.liveEvidenceRatings { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.liveEvidenceRatings span { padding: 4px 6px; border-radius: 999px; background: var(--ice-100); color: var(--ink-650); font-size: var(--type-xs); }
.liveHistorical footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.liveHistorical button, .liveIngredientRole button, .liveResearchLink { min-height: 34px; padding: 6px 9px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: transparent; color: var(--glacier-750); font: inherit; font-size: var(--type-base); font-weight: var(--weight-heading); cursor: pointer; }
.liveIngredientRole { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 10px; align-items: center; padding: 11px; border-radius: var(--radius-sm); background: var(--ice-100); }
.liveIngredientRole span, .liveIngredientRole strong { display: block; }
.liveIngredientRole span { color: var(--ink-500); font-size: var(--type-xs); }
.liveIngredientRole strong { margin-top: 3px; color: var(--ink-900); font-size: var(--type-base); }
.liveIngredientRole ul { margin: 0; padding-left: 16px; color: var(--ink-650); font-size: var(--type-base); line-height: var(--leading-body); }
.liveIngredientRole button { grid-column: 1/-1; justify-self: start; }
@media (max-width:700px){
  .liveHealthGrid, .livePredictionGrid { grid-template-columns: 1fr; }
  .liveFormulaIntelligence { padding: 12px; }
  .liveIngredientRole { grid-template-columns: 1fr; }
  .liveIngredientRole button { grid-column: auto; min-height: 44px; }
  .liveHistorical button, .liveResearchLink { min-height: 44px; }
}
.formulaIntelligenceWorkspace{display:grid;width:100%;max-width:100%;min-width:0;gap:18px;overflow:visible}.formulaIntelligenceIntro{display:grid;min-width:0;grid-template-columns:minmax(0,.8fr) minmax(280px,1.2fr);gap:20px;align-items:end;padding:4px}.formulaIntelligenceIntro>div,.formulaIntelligenceIntro p{min-width:0}.formulaIntelligenceIntro h2{margin:3px 0 0;font-size: var(--type-xl)}.formulaIntelligenceIntro p{max-width:70ch;margin:0;color:var(--ink-600);line-height:1.6}.formulaIntelligenceSection,.formulaDetailedAnalysis{width:100%;max-width:100%;min-width:0;padding:18px;border:1px solid var(--ice-200);border-radius:var(--radius-md);background:linear-gradient(145deg,var(--surface),var(--ice-50));box-shadow:0 1px 3px rgba(31,53,63,.035)}.formulaIntelligenceSection>header{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}.formulaIntelligenceSection>header h3{margin:3px 0 0;font-size: var(--type-md)}.formulaIntelligenceSection>header>span{max-width:44%;color:var(--ink-500);font-size: var(--type-xs);text-align:right}.formulaSectionBoundary{max-width:78ch;margin:-3px 0 16px;color:var(--ink-600);font-size: var(--type-xs);line-height:1.5}.formulaHealthOverall{padding:6px 10px;border:1px solid var(--ice-250);border-radius:999px;background:var(--ice-150);font-size: var(--type-xs)}.formulaHealthOverall.state--excellent,.formulaHealthOverall.state--balanced{background:#e3efeb;color:#315f54}.formulaHealthOverall.state--experimental{background:#f0ede2;color:#746543}.formulaHealthOverall.state--needs-validation{background:#f3e7e7;color:#774e4e}.formulaHealthSummary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.formulaHealthSummary article,.formulaHistoricalMetrics article{min-width:0;padding:11px;border-radius:var(--radius-sm);background:var(--ice-50)}.formulaHealthSummary span,.formulaHistoricalMetrics span{display:block;color:var(--ink-500);font-size: var(--type-xs);text-transform:uppercase}.formulaHealthSummary strong,.formulaHistoricalMetrics strong{display:block;margin-top:6px;overflow-wrap:anywhere;word-break:normal;white-space:normal}.formulaIntelligenceMetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.formulaIntelligenceMetric{min-width:0;padding:13px;border:1px solid var(--ice-200);border-left:3px solid var(--glacier-400);border-radius:var(--radius-md);background:color-mix(in srgb,var(--surface) 80%,var(--ice-50))}.formulaIntelligenceMetric.state--within-preferred-range,.formulaIntelligenceMetric.state--lower-end-of-working-range,.formulaIntelligenceMetric.state--upper-end-of-working-range{border-left-color:var(--glacier-500)}.formulaIntelligenceMetric.state--below-working-range,.formulaIntelligenceMetric.state--above-working-range{border-left-color:var(--warning)}.formulaIntelligenceMetric.state--preferred-range-not-assigned,.formulaIntelligenceMetric.state--insufficient-data{border-left-color:var(--ice-300)}.formulaIntelligenceMetric>header{display:flex;align-items:start;justify-content:space-between;gap:8px}.formulaIntelligenceMetric>header span{font-weight: var(--weight-heading)}.formulaIntelligenceMetric>header b{color:var(--ink-500);font-size: var(--type-xs);text-align:right}.formulaMetricImplication{min-height:3em;margin:12px 0 0;color:var(--ink-650);font-size: var(--type-xs);line-height:1.5}.formulaIntelligenceMetric details,.ingredientRangeDisclosure{margin-top:12px;border-top:1px solid var(--ice-200)}.formulaIntelligenceMetric summary,.ingredientRangeDisclosure summary{min-height:44px;display:flex;align-items:center;color:var(--glacier-750);cursor:pointer;font-size: var(--type-xs);font-weight: var(--weight-heading)}.formulaIntelligenceMetric details p,.ingredientRangeDisclosure p{margin:8px 0;color:var(--ink-650);font-size: var(--type-xs);line-height:1.5}.formulaIntelligenceMetric details p b{display:block;color:var(--ink-500);font-size: var(--type-xs);text-transform:uppercase}.formulaMetricDirections{display:grid;grid-template-columns:1fr 1fr;gap:8px}.formulaMetricDirections p{padding:9px;border-radius:var(--radius-sm);background:var(--ice-50)}.ingredientRangeDisclosure small{display:block;color:var(--ink-500);font-size: var(--type-xs)}.formulationRange{min-width:0;margin-top:11px}.formulationRangeValue{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.formulationRangeValue strong{color:var(--ink-950);font-size: var(--type-xl);font-variant-numeric:tabular-nums}.formulationRangeValue span{color:var(--ink-600);font-size: var(--type-xs);text-align:right}.formulationRangeTrack{position:relative;height:12px;margin-top:12px;border:1px solid var(--ice-300);border-radius:999px;background:repeating-linear-gradient(90deg,var(--ice-150) 0,var(--ice-150) calc(25% - 1px),var(--ice-300) 25%,var(--ice-150) calc(25% + 1px));overflow:visible}.formulationRangePreferred{position:absolute;top:1px;bottom:1px;left:var(--range-start);width:calc(var(--range-end) - var(--range-start));min-width:2px;border:1px solid var(--glacier-650);border-radius:999px;background:var(--ice-50)}.formulationRangeTrack>i{position:absolute;z-index:1;top:-5px;left:var(--range-position);width:3px;height:20px;border-radius:2px;background:var(--ink-950);transform:translateX(-50%)}.formulationRangeTrack>i:after{position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--ink-950);content:"";transform:translateX(-50%)}.formulationRangeBounds{display:flex;justify-content:space-between;margin-top:5px;color:var(--ink-500);font-size: var(--type-xs);font-variant-numeric:tabular-nums}.formulationRange>small{display:block;margin-top:6px;color:var(--ink-600);font-size: var(--type-xs)}.formulationRangeUnavailable{margin-top:11px;padding:8px;border:1px dashed var(--ice-300);border-radius:999px;color:var(--ink-500);font-size: var(--type-xs);text-align:center}.formulaContributionSystems{display:grid;gap:9px}.formulaContributionSystems>details,.formulaInteractionGrid>details{min-width:0;border:1px solid var(--ice-200);border-radius:var(--radius-md);background:var(--ice-50)}.formulaContributionSystems>details>summary,.formulaInteractionGrid>details>summary{min-height:48px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 13px;cursor:pointer}.formulaContributionSystems summary span,.formulaContributionSystems summary b,.formulaContributionSystems summary small{display:block;min-width:0}.formulaContributionSystems summary small,.formulaInteractionGrid summary small{margin-top:3px;color:var(--ink-500);font-size: var(--type-xs)}.formulaContributionSystems summary>strong{max-width:28ch;overflow:hidden;color:var(--ink-600);font-size: var(--type-xs);text-overflow:ellipsis;white-space:nowrap}.formulaContributionBars{display:grid;gap:7px;padding:0 12px 12px}.formulaContributionBars button{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;padding:10px;border:1px solid var(--ingredient-border);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--ingredient-tint) 48%,var(--surface));text-align:left}.formulaContributionBars button:hover,.formulaContributionBars button:focus-visible{outline:2px solid var(--ingredient-color);outline-offset:1px}.formulaContributionBars button span,.formulaContributionBars button b,.formulaContributionBars button small{display:block;min-width:0}.formulaContributionBars button small{margin-top:2px;color:var(--ingredient-text);font-size: var(--type-xs)}.formulaContributionBars button>strong{font-variant-numeric:tabular-nums}.formulaContributionBars button>i{grid-column:1/-1;height:7px;overflow:hidden;border-radius:999px;background:var(--surface)}.formulaContributionBars button>i>b{display:block;width:var(--contribution-share);height:100%;border-radius:inherit;background:var(--ingredient-color)}.formulaInteractionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.formulaInteractionGrid summary span{min-width:0}.formulaInteractionGrid summary b,.formulaInteractionGrid summary small{display:block}.formulaInteractionGrid summary small{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.4}.formulaInteractionGrid details>div{padding:0 13px 13px}.formulaInteractionGrid p,.formulaRecommendationList p{margin:8px 0;color:var(--ink-650);line-height:1.5}.formulaInteractionGrid p b,.formulaRecommendationList p b,.formulaInteractionGrid details>div>small b{display:block;color:var(--ink-500);font-size: var(--type-xs);text-transform:uppercase}.formulaInteractionGrid details>div>small{display:block;color:var(--ink-500);line-height:1.45}.formulaTradeoffList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.formulaTradeoffList article{min-width:0;padding:13px;border-radius:var(--radius-md);background:var(--ice-50)}.formulaTradeoffList article>header{display:flex;align-items:start;justify-content:space-between;gap:12px}.formulaTradeoffList article>header span,.formulaTradeoffList article>header strong{display:block}.formulaTradeoffList article>header span{color:var(--ink-500);font-size: var(--type-xs);text-transform:uppercase}.formulaTradeoffList article>header strong{margin-top:4px;font-size: var(--type-lg)}.formulaTradeoffList article>header>b{max-width:45%;color:var(--ink-600);font-size: var(--type-xs);text-align:right}.formulaTradeoffList article>p{min-height:3em;margin:12px 0 0;color:var(--ink-650);line-height:1.5}.formulaTradeoffList details{margin-top:10px;border-top:1px solid var(--ice-200)}.formulaTradeoffList summary{min-height:44px;display:flex;align-items:center;color:var(--glacier-750);cursor:pointer;font-size: var(--type-xs);font-weight: var(--weight-heading)}.formulaTradeoffList details p{min-height:0;margin:0 0 8px}.formulaTradeoffList details small{color:var(--ink-500);font-size: var(--type-xs);line-height:1.45}.formulaFingerprint{display:grid;gap:7px}.formulaFingerprint>div{display:grid;grid-template-columns:110px minmax(0,1fr) 72px;gap:10px;align-items:center}.formulaFingerprint span{color:var(--ink-600)}.formulaFingerprint i{height:8px;overflow:hidden;border-radius:999px;background:var(--ice-200)}.formulaFingerprint i b{width:var(--fingerprint-value);height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,var(--glacier-400),var(--glacier-650))}.formulaFingerprint strong{text-align:right}.formulaIntelligenceFootnote{margin:11px 0 0;color:var(--ink-500);font-size: var(--type-xs)}.formulaSimilarityGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.formulaSimilarityGrid article{padding:11px;border-radius:var(--radius-sm);background:var(--ice-50)}.formulaSimilarityGrid article>span,.formulaSimilarityGrid article>small{display:block;color:var(--ink-500);font-size: var(--type-xs)}.formulaSimilarityGrid h4{margin:6px 0 2px}.formulaSimilarityGrid article>div{display:flex;gap:6px;margin-top:10px}.formulaSimilarityGrid button,.formulaIntelligenceTimeline button,.formulaIngredientChanges button{min-height:32px;border:1px solid var(--ice-300);border-radius:7px;background:var(--surface);color:var(--glacier-700)}.formulaIntelligenceTimeline{display:grid;gap:0;margin:0;padding:0;list-style:none}.formulaIntelligenceTimeline li{position:relative;display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:9px;padding:0 0 15px}.formulaIntelligenceTimeline li:before{position:absolute;top:10px;bottom:0;left:5px;width:1px;background:var(--ice-300);content:""}.formulaIntelligenceTimeline li:last-child:before{display:none}.formulaIntelligenceTimeline li>i{z-index:1;width:11px;height:11px;margin-top:2px;border:2px solid var(--glacier-400);border-radius:50%;background:var(--surface)}.formulaIntelligenceTimeline span,.formulaIntelligenceTimeline time{display:block;color:var(--ink-500);font-size: var(--type-xs)}.formulaIntelligenceTimeline p{margin:3px 0;color:var(--ink-600)}.formulaHistoricalMetrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.formulaIngredientChanges{margin-top:10px}.formulaIngredientChanges h4{margin:0 0 7px}.formulaIngredientChanges button{width:100%;display:flex;justify-content:space-between;gap:8px;margin-top:5px;padding:8px;text-align:left}.formulaRecommendationList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.formulaRecommendationList article{padding:11px;border-radius:var(--radius-sm);background:var(--ice-50)}.formulaRecommendationList h4{margin:0 0 9px}.formulaRecommendationList small{color:var(--ink-500)}.formulaIntelligenceEmpty{margin:0;color:var(--ink-500)}.formulaDetailedAnalysis summary{min-height:44px;display:flex;align-items:center;font-weight: var(--weight-heading);cursor:pointer}.formulaDetailedAnalysis dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.formulaDetailedAnalysis dl div{padding:8px;border-radius:var(--radius-sm);background:var(--ice-50)}.formulaDetailedAnalysis dt{color:var(--ink-500);font-size: var(--type-xs)}.formulaDetailedAnalysis dd{margin:3px 0 0;overflow-wrap:anywhere}.formulaDetailedAnalysis li{margin-top:6px;color:var(--ink-600)}
.formulaIntelligenceTimeline li{grid-template-columns:12px minmax(0,1fr)}
.formulaIntelligenceTimeline button{display:block;width:max-content;margin-top:8px;padding:5px 12px;border-radius:var(--radius-md);font:inherit;font-size:var(--type-xs);font-weight:var(--weight-emphasis);cursor:pointer}
.formulaIntelligenceTimeline button:hover{border-color:var(--glacier-400);background:var(--ice-50)}
.formulaIntelligenceTimeline button:focus-visible{outline:2px solid var(--glacier-400);outline-offset:2px}
@media(max-width:860px){.formulaIntelligenceIntro{grid-template-columns:1fr}.formulaHealthSummary,.formulaHistoricalMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.formulaIntelligenceMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.formulaInteractionGrid,.formulaTradeoffList{grid-template-columns:1fr}.formulaDetailedAnalysis dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.formulaIntelligenceWorkspace{width:100%;max-width:100%;min-width:0;gap:13px}.formulaIntelligenceIntro{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:0}.formulaIntelligenceIntro>div,.formulaIntelligenceIntro p{width:100%;max-width:none;min-width:0}.formulaIntelligenceSection,.formulaDetailedAnalysis{width:100%;max-width:100%;min-width:0;padding:13px}.formulaIntelligenceSection>header{align-items:flex-start}.formulaIntelligenceSection>header>span{max-width:48%}.formulaHealthSummary{display:block}.formulaHealthSummary article{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:4px;padding:9px 4px;border-bottom:1px solid var(--ice-200);border-radius:0;background:transparent}.formulaHealthSummary strong{max-width:100%;margin:0;text-align:left;overflow-wrap:anywhere;white-space:normal}.formulaIntelligenceMetrics{grid-template-columns:1fr;gap:8px}.formulaIntelligenceMetric{padding:10px}.formulaIntelligenceMetric>header{display:grid}.formulaIntelligenceMetric>header b{text-align:left}.formulationRangeValue{display:grid}.formulationRangeValue span{text-align:left}.formulationRangeValue strong{font-size: var(--type-lg)}.formulaMetricImplication{min-height:0}.formulaMetricDirections{grid-template-columns:1fr}.formulaInteractionGrid details>summary{grid-template-columns:1fr}.formulaContributionSystems summary>strong{display:none}.formulaFingerprint>div{grid-template-columns:82px minmax(0,1fr) 62px}.formulaHistoricalMetrics,.formulaSimilarityGrid,.formulaRecommendationList,.formulaDetailedAnalysis dl{grid-template-columns:1fr}.formulaSimilarityGrid button,.formulaIntelligenceTimeline button,.formulaIngredientChanges button{min-height:44px}.formulaIntelligenceTimeline li{grid-template-columns:12px minmax(0,1fr)}.formulaIntelligenceTimeline button{grid-column:2;justify-self:start}}
@media(max-width:360px){.formulaIntelligenceMetrics{grid-template-columns:1fr}.formulaIntelligenceSection>header{display:grid}.formulaIntelligenceSection>header>span{max-width:none;text-align:left}}
@media(prefers-reduced-motion:reduce){.formulationRangeTrack>i,.formulaContributionBars button>i>b{transition:none}}
.validationSummaryLink { width: 100%; min-height: 34px; margin-top: 10px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--glacier-650); font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.validationSummaryLink:hover, .validationSummaryLink:focus-visible { border-color: var(--glacier-500); background: var(--ice-50); outline: 2px solid transparent; }
.validationRetry { width: 100%; min-height: 34px; margin-top: 10px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--glacier-650); font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.analysisWarnings { display: grid; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }
.analysisWarning { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 7px; padding: 9px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--surface); }
.warningIcon { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid var(--ice-300); border-radius: 50%; color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-heading); }
.analysisWarning strong { display: block; color: var(--ink-650); font-size: var(--type-sm); text-transform: capitalize; }
.analysisWarning p { margin: 3px 0 0; color: var(--ink-800); font-size: var(--type-base); line-height: var(--leading-body); }
.analysisWarning.severity--warning { border-left: 3px solid var(--warning); }
.analysisWarning.severity--error { border-left: 3px solid var(--danger); }
.analysisClear { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px; border-radius: var(--radius-sm); background: var(--ice-50); color: var(--ink-650); font-size: var(--type-base); line-height: var(--leading-body); }
.analysisCompositionGraph { padding: 12px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--ice-50); }
.analysisCompositionGraph .compositionBar { height: 18px; }
.analysisCompositionGraph .compositionBar button { min-width: 3px; height: 100%; padding: 0; border: 0; border-right: 1px solid rgba(255,255,255,.7); background: var(--composition-color); }
.analysisCompositionGraph .compositionBar button:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--ink-950); outline-offset: -2px; }
.analysisCompositionLegend { display: flex; flex-wrap: wrap; gap: 5px 9px; margin-top: 10px; }
.analysisCompositionLegend button { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 2px; border: 0; background: transparent; color: var(--ink-650); font-size: var(--type-sm); }
.analysisCompositionLegend i, .analysisPropertyName i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--composition-color); }
.analysisCompositionLegend span { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.analysisCompositionLegend button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 1px; }
.analysisCompositionCards { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.analysisCompositionCard { min-width: 0; min-height: 76px; padding: 9px 9px 9px 10px; border: 1px solid var(--ice-200); border-left: 3px solid var(--composition-color); border-radius: var(--radius-sm); background: linear-gradient(100deg,var(--composition-tint),var(--surface) 55%); }
.analysisPropertyName { display: flex; align-items: center; gap: 5px; color: var(--ink-650); font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.analysisCompositionCard > strong { display: block; margin-top: 7px; color: var(--ink-950); font-size: var(--type-lg); }
.analysisCompositionCard > span { display: block; margin-top: 4px; color: var(--ink-500); font-size: var(--type-sm); }
.analysisCompositionCard.isUnavailable { border-left-color: var(--ice-300); background: var(--surface-soft); }
.analysisCompositionCard.isUnavailable .analysisPropertyName i { background: var(--ice-300); }
.analysisCompositionCard.isUnavailable > strong { color: var(--ink-500); font-size: var(--type-sm); }
[data-composition-link], [data-ingredient-link] { transition: opacity .12s ease, outline-color .12s ease; }
.is-composition-muted { opacity: .38; }
.is-composition-linked { position: relative; z-index: 1; outline: 2px solid var(--composition-color); outline-offset: 1px; opacity: 1; }
.performanceGrid { display: grid; gap: 8px; }
.performanceCard { padding: 11px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--ice-50); }
.performanceCard > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.performanceCard span { color: var(--ink-650); font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.performanceCard strong { color: var(--ink-950); font-size: var(--type-lg); font-variant-numeric: tabular-nums; }
.performanceCard small { display: flex; align-items: center; gap: 4px; margin-top: 5px; color: var(--ink-500); font-size: var(--type-sm); }
.performanceCard small i { font-style: normal; }
.performanceCard p { margin: 8px 0 0; color: var(--ink-650); font-size: var(--type-base); line-height: var(--leading-body); }
.performanceCard.state--outside-range { border-left: 3px solid var(--warning); }
.contributionList { display: grid; gap: 7px; }
.contributionList details { border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--ice-50); }
.contributionList summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 10px; padding: 10px; cursor: pointer; }
.contributionList summary span { color: var(--ink-650); font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.contributionList summary strong { color: var(--ink-950); font-size: var(--type-base); }
.contributionList summary small { grid-column: 1 / -1; color: var(--ink-500); font-size: var(--type-sm); }
.contributionRows { padding: 0 10px 10px; }
.contributionRows > div { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 8px 0; color: var(--ink-650); font-size: var(--type-base); }
.contributionRows i { width: 7px; height: 7px; border-radius: 50%; background: var(--ingredient-color); }
.contributionRows > div.is-linked { border-radius: 6px; outline: 2px solid var(--glacier-500); outline-offset: 1px; background: var(--ingredient-tint); font-weight: var(--weight-heading); }
.contributionRows > div.is-muted { opacity: .55; }
.contributionRows b { color: var(--ink-800); font-variant-numeric: tabular-nums; }
.analysisProvenance > p { margin: 0 0 9px; color: var(--ink-500); font-size: var(--type-base); line-height:var(--leading-body); }
.analysisProvenance article { margin-top: 9px; padding: 12px 14px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--ice-50); box-shadow: var(--shadow-soft); }
.analysisProvenance article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.analysisProvenance article strong { color: var(--ink-800); font-size: var(--type-base); }
.analysisProvenance article dl { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 7px 0 0; }
.analysisProvenance article dl div { min-width: 0; }
.analysisProvenance dt { color: var(--ink-500); font-size: var(--type-xs); }
.analysisProvenance dd { margin: 2px 0 0; color: var(--ink-650); font-size: var(--type-base); overflow-wrap: anywhere; }
.analysisProvenance details { margin-top: 12px; color: var(--ink-650); font-size: var(--type-base); }
.analysisProvenance details ul { padding-left: 16px; line-height: 1.5; }
.validationHeadline { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 11px; border-radius: var(--radius-sm); background: var(--ice-50); }
.validationHeadline span { color: var(--ink-650); font-size: var(--type-base); }
.validationHeadline strong { color: var(--ink-950); font-size: var(--type-md); }
.validationHeadline small { grid-column: 1 / -1; color: var(--ink-500); font-size: var(--type-sm); text-transform: capitalize; }
.analysisValidation > dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 9px 0; }
.analysisValidation > dl div { min-width: 0; padding: 8px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); }
.analysisValidation dt { color: var(--ink-500); font-size: var(--type-xs); }
.analysisValidation dd { margin: 4px 0 0; color: var(--ink-950); font-size: var(--type-base); }
.analysisValidation section { margin-top: 12px; }
.analysisValidation ul { margin: 7px 0 0; padding: 0; list-style: none; }
.analysisValidation li { display: grid; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--ice-150); }
.analysisValidation li strong { color: var(--ink-800); font-size: var(--type-base); }
.analysisValidation li span, .analysisValidation section p { color: var(--ink-500); font-size: var(--type-base); line-height:var(--leading-body); overflow-wrap: anywhere; }
.validationIssueList { display: grid; gap: 9px; }
.validationIssue { position: relative; min-width: 0; padding: 11px; border: 1px solid var(--ice-200); border-left: 3px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); }
.validationIssue.severity--error { border-left-color: var(--danger); }
.validationIssue.severity--warning { border-left-color: var(--warning); }
.validationIssue.severity--information { border-left-color: var(--glacier-500); }
.validationIssue:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
.validationIssue > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.validationSeverity { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-heading); text-transform: capitalize; }
.validationSeverity i { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
.validationConfidence { color: var(--ink-500); font-size: var(--type-xs); text-transform: capitalize; }
.validationIssue > h3 { margin: 9px 0 0; color: var(--ink-950); font-size: var(--type-base); letter-spacing: var(--track-body); text-transform: none; }
.validationIssue > p { margin: 5px 0 0; color: var(--ink-650); font-size: var(--type-base); line-height: var(--leading-body); overflow-wrap: anywhere; }
.validationValues { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; }
.validationValues div { min-width: 92px; padding: 7px; border-radius: 6px; background: var(--ice-50); }
.validationValues dt { color: var(--ink-500); font-size: var(--type-xs); }
.validationValues dd { margin: 3px 0 0; color: var(--ink-800); font-size: var(--type-sm); font-variant-numeric: tabular-nums; }
.validationIssue > details { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--ice-150); }
.validationIssue > details summary { color: var(--ink-650); cursor: pointer; font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.validationIssue > details > div { margin-top: 8px; }
.validationIssue > details strong { color: var(--ink-500); font-size: var(--type-xs); }
.validationIssue > details p { margin: 3px 0 0; color: var(--ink-650); font-size: var(--type-base); line-height: var(--leading-body); }
.validationRuleMeta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; color: var(--ink-500); font-size: var(--type-xs); }
.validationActions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.validationActions button { min-height: 34px; padding: 0 10px; border: 1px solid var(--glacier-650); border-radius: var(--radius-sm); background: var(--glacier-650); color: white; font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.validationActions button.secondary { border-color: var(--ice-300); background: var(--surface); color: var(--glacier-650); }
.validationActions button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
.validationPriority { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.validationClean { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; padding: 14px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--ice-50); }
.validationClean > span { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--ice-300); border-radius: 50%; color: var(--success); }
.validationClean strong { color: var(--ink-950); font-size: var(--type-base); }
.validationClean p { margin: 4px 0 0; color: var(--ink-500); font-size: var(--type-base); line-height: var(--leading-body); }
.validationTarget { outline: 2px solid var(--glacier-500); outline-offset: -1px; box-shadow: 0 0 0 4px rgba(94,130,149,.12); }
.summaryGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.summaryCard { min-width: 0; min-height: 76px; padding: 12px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--ice-50); overflow: hidden; }
.summaryCard label { display: block; margin-bottom: 8px; color: var(--ink-500); font-size: var(--type-xs); line-height: 1.35; letter-spacing: var(--track-label); text-transform: uppercase; overflow-wrap: anywhere; }
.summaryCard strong { display: block; max-width: 100%; font-size: var(--type-xl); font-weight: var(--weight-emphasis); font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.summaryCard small { display: block; margin-top: 3px; color: var(--ink-500); font-size: var(--type-xs); line-height: 1.35; overflow-wrap: anywhere; }
.summaryCard.placeholder strong { color: var(--ice-300); }
.releaseNote { margin: 14px 18px 18px; padding: 12px; border-radius: var(--radius-sm); background: var(--ice-150); color: var(--ink-650); font-size: var(--type-sm); line-height: 1.45; }
.toast { position: fixed; z-index: 1000; left: 50%; bottom: 26px; width: max-content; max-width: min(620px,calc(100vw - 32px)); transform: translate(-50%, 14px); opacity: 0; pointer-events: none; padding: 11px 16px; border-radius: var(--radius-md); background: var(--ink-950); color: white; font-size: var(--type-base); line-height: 1.45; box-shadow: var(--shadow-card); transition: .18s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }
.formulaWorkspaceTabs, .detailTabs { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
.formulaWorkspaceTabs { margin: -4px 0 16px; padding: 3px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: rgba(255,255,255,.62); }
.formulaWorkspaceTabs button, .detailTabs span { flex: 0 0 auto; white-space: nowrap; }
.formulaWorkspaceTabs button { min-height: 34px; padding: 0 13px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.formulaWorkspaceTabs button:hover { background: var(--ice-100); color: var(--ink-950); }
.formulaWorkspaceTabs button.active { background: var(--surface); color: var(--ink-950); box-shadow: 0 1px 4px rgba(37,63,76,.09); }
.formulaWorkspaceTabs button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 1px; }
.historyCanvas { min-width: 0; }
.historyWorkspace { display: grid; grid-template-columns: minmax(260px,.65fr) minmax(0,1.7fr); gap: 16px; align-items: start; }
/* Formula Library — grid + slide-in detail overlay (matches Ingredient Library) */
.formulaLibraryCanvas { display: grid; gap: 18px; }
.formulaLibraryPanel { display: grid; }
.formulaLibraryPanel > .panelHeader.libraryHeader { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px 15px; border-bottom: 1px solid var(--ice-200); }
.formulaLibraryPanel > .panelHeader.libraryHeader h2 { margin: 4px 0 0; font-size: var(--type-md); letter-spacing: var(--track-display); }
.formulaLibraryPanel .libraryHeaderActions { display: flex; align-items: center; gap: 10px; }
.formulaLibraryPanel .librarySearch { min-height: 34px; padding: 6px 10px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-950); font: inherit; font-size: var(--type-sm); min-width: 260px; }
.formulaLibraryPanel .librarySearch:focus { outline: none; border-color: var(--glacier-500); box-shadow: 0 0 0 3px rgba(94,130,149,.12); }
.formulaLibraryPanel .libraryFilters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--ice-200); background: var(--ice-50); }
.formulaLibraryPanel .libraryFilters select { min-height: 32px; padding: 5px 9px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-800); font: inherit; font-size: var(--type-sm); }

.formulaLibraryGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 18px; }
.formulaLibraryCard { position: relative; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--ice-200); border-left: 4px solid var(--glacier-650); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .06s; }
/* Recency (left-border tone + cold-fade). Cold cards also mute the evidence glow so recency wins. */
.formulaLibraryCard.recency-active { border-left-color: var(--glacier-650); }
.formulaLibraryCard.recency-recent { border-left-color: var(--glacier-500); }
.formulaLibraryCard.recency-dormant { border-left-color: var(--ice-300); }
.formulaLibraryCard.recency-cold { border-left-color: var(--ice-200); background: var(--ice-50); }
.formulaLibraryCard.recency-cold strong, .formulaLibraryCard.recency-cold .formulaLibraryCardMetrics dd { color: var(--ink-650); }

.formulaLibraryCard:hover { border-color: var(--glacier-500); box-shadow: 0 3px 8px rgba(31,53,63,.08); }
.formulaLibraryCard:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
.formulaLibraryCard.is-selected { border-color: var(--glacier-500); border-left-width: 6px; box-shadow: 0 0 0 2px var(--ice-200), var(--shadow-card); }
.formulaLibraryCardTitle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; min-width: 0; }
.formulaLibraryCardTitle > div { min-width: 0; }
.formulaLibraryType { display: block; color: var(--glacier-650); font-size: var(--type-xs); font-weight: var(--weight-kicker); letter-spacing: var(--track-label); text-transform: uppercase; }
.formulaLibraryCard strong { display: block; margin-top: 4px; color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-emphasis); line-height: 1.28; overflow-wrap: anywhere; }
.formulaLibraryCard code { display: block; margin-top: 3px; color: var(--ink-500); font-family: var(--font-mono); font-size: var(--type-sm); line-height: 1.35; overflow-wrap: anywhere; }
.formulaLibraryCardBadges { display: flex; flex-wrap: wrap; gap: 4px; }
/* Evidence-stage pill: whole-pill color, desaturated. Matches the isCurrent/isPreferred badge vocabulary
   used elsewhere in the app: 8% tinted background, ~35% tinted border, full-strength colored text.
   Evaluated (moss) gets a very slight nudge — 10% bg / 42% border — because at equal-weight settings
   moss reads a hair quieter than glacier. Size of the pill does most of the categorical work; hue confirms it. */
.formulaLibraryStageLabel { align-self: start; display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--ice-300); background: var(--ice-100); color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap; }
/* Draft: quietest of the four, but must still clear WCAG AA (4.5:1) at 8px. ink-650 on ice-100 ≈ 4.86:1. */
.formulaLibraryCard.stage-draft { border-style: solid; }
.formulaLibraryCard.stage-draft .formulaLibraryStageLabel { gap: 5px; background: var(--ice-100); border-color: var(--ice-300); color: var(--ink-650); }
.formulaLibraryCard.stage-draft .formulaLibraryStageLabel::before { content: "T"; display: inline-grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; background: var(--surface); color: var(--glacier-650); font-size: 9px; line-height: 1; }
.formulaLibraryDraftCallout { margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--ice-100); color: var(--ink-650); font-size: var(--type-sm); line-height: 1.35; }
.formulaLibraryCard.stage-iterating .formulaLibraryStageLabel { background: color-mix(in srgb, var(--glacier-500) 8%, var(--surface)); border-color: color-mix(in srgb, var(--glacier-500) 35%, var(--ice-300)); color: var(--glacier-650); }
.formulaLibraryCard.stage-evaluated .formulaLibraryStageLabel { background: color-mix(in srgb, var(--success) 10%, var(--surface)); border-color: color-mix(in srgb, var(--success) 42%, var(--ice-300)); color: var(--success); }
.formulaLibraryCard.stage-proven .formulaLibraryStageLabel { background: color-mix(in srgb, var(--amber-500) 8%, var(--surface)); border-color: color-mix(in srgb, var(--amber-500) 35%, var(--ice-300)); color: color-mix(in srgb, var(--amber-500) 62%, var(--ink-950)); }
/* On cold cards, dim the pill slightly so recency still wins the hierarchy */
.formulaLibraryCard.recency-cold .formulaLibraryStageLabel { opacity: .82; }
.formulaLibraryCardMetrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; padding-top: 8px; border-top: 1px solid var(--ice-200); }
.formulaLibraryCardMetrics > div { min-width: 0; }
.formulaLibraryCardMetrics dt { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.formulaLibraryCardMetrics dd { margin: 3px 0 0; color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-emphasis); overflow-wrap: anywhere; }

.formulaLibraryBadge { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; border: 1px solid var(--ice-300); border-radius: 999px; background: var(--surface); color: var(--glacier-650); font-size: var(--type-xs); font-weight: var(--weight-heading); line-height: 1.2; white-space: nowrap; }
.formulaLibraryBadge.isQuiet { background: var(--ice-50); color: var(--ink-650); }
.formulaLibraryBadge.isCurrent { border-color: color-mix(in srgb, var(--success) 35%, var(--ice-300)); background: color-mix(in srgb, var(--success) 8%, var(--surface)); color: var(--success); }
.formulaLibraryBadge.isPreferred { border-color: color-mix(in srgb, var(--glacier-500) 40%, var(--ice-300)); background: var(--ice-100); }
.formulaLibraryBadges { display: flex; flex-wrap: wrap; gap: 5px; }

.formulaLibraryNoResults { grid-column: 1 / -1; padding: 32px; text-align: center; color: var(--ink-500); }
.formulaLibraryNoResults strong { display: block; color: var(--ink-800); font-size: var(--type-base); margin-bottom: 4px; }
.formulaLibraryNoResults p { margin: 0; font-size: var(--type-sm); }

.formulaLibraryEmptyPanel { max-width: 640px; padding: 32px; border-left: 4px solid var(--glacier-500); background: linear-gradient(135deg, var(--ice-50), var(--surface)); }
.formulaLibraryEmptyPanel h2 { margin: 5px 0; font-size: var(--type-lg); }
.formulaLibraryEmptyPanel p { color: var(--ink-500); }

/* Detail overlay — slide-in aside matching engineering workbench pattern */
.formulaLibraryDetailBackdrop { position: fixed; inset: 0; z-index: 40; background: rgba(23, 38, 47, .4); backdrop-filter: blur(2px); animation: formulaLibraryFade .18s ease-out; }
@keyframes formulaLibraryFade { from { opacity: 0; } to { opacity: 1; } }
.formulaLibraryDetail { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(560px, 92vw); display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--surface); box-shadow: -12px 0 40px rgba(23, 38, 47, .18); border-left: 1px solid var(--ice-200); animation: formulaLibrarySlide .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes formulaLibrarySlide { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.formulaLibraryDetailHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--ice-200); background: linear-gradient(135deg, var(--ice-50), var(--surface) 65%); }
.formulaLibraryDetailHeader h2 { margin: 4px 0 0; font-size: var(--type-lg); letter-spacing: var(--track-display); }
.formulaLibraryDetailHeader code { display: block; margin-top: 4px; color: var(--ink-500); font-family: var(--font-mono); font-size: var(--type-sm); line-height: 1.35; }
.formulaLibraryDetailHeaderActions { display: flex; align-items: center; gap: 8px; }
.formulaLibraryDetailHeaderActions button[data-close-formula-detail] { min-height: 34px; min-width: 34px; padding: 0 8px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-650); font-size: var(--type-lg); line-height: 1; cursor: pointer; }
.formulaLibraryDetailHeaderActions button.primary { min-height: 34px; padding: 0 14px; border: 1px solid var(--glacier-650); border-radius: var(--radius-sm); background: var(--glacier-650); color: white; font: inherit; font-size: var(--type-sm); font-weight: var(--weight-emphasis); cursor: pointer; }
.formulaLibraryDetailHeaderActions button.primary:disabled { opacity: .5; cursor: not-allowed; }
.formulaLibraryDetailHeaderActions button.dangerQuiet { min-height: 34px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--ice-300)); border-radius: var(--radius-sm); background: var(--surface); color: var(--danger-strong); font: inherit; font-size: var(--type-sm); font-weight: var(--weight-emphasis); cursor: pointer; white-space: nowrap; }
.formulaLibraryDetailHeaderActions button.dangerQuiet:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.formulaLibraryDetailHeaderActions button.dangerQuiet:focus-visible { outline: 2px solid color-mix(in srgb, var(--danger) 65%, white); outline-offset: 2px; }

.formulaLibraryDetailBody { display: grid; gap: 16px; padding: 18px 20px 24px; overflow: auto; }
.formulaLibraryDetailFacts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.formulaLibraryDetailFacts div { min-width: 0; padding: 9px 10px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--ice-50); }
.formulaLibraryDetailFacts dt { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.formulaLibraryDetailFacts dd { margin: 4px 0 0; color: var(--ink-950); font-size: var(--type-sm); font-weight: var(--weight-emphasis); overflow-wrap: anywhere; }

.formulaLibraryImmutabilityNotice { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 9px; padding: 11px 13px; border: 1px solid var(--ice-200); border-left: 3px solid var(--glacier-500); border-radius: var(--radius-sm); background: var(--ice-50); }
.formulaLibraryImmutabilityNotice > span { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--ice-300); border-radius: 50%; color: var(--glacier-650); font-size: var(--type-sm); font-weight: var(--weight-heading); }
.formulaLibraryImmutabilityNotice p { margin: 1px 0 0; color: var(--ink-650); font-size: var(--type-xs); line-height: 1.5; }
.formulaLibraryImmutabilityNotice strong { color: var(--ink-800); }

.formulaLibraryDetailHistory > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.formulaLibraryDetailHistory h3 { margin: 4px 0 0; font-size: var(--type-base); }
.formulaLibraryDetailHistory > header > span { color: var(--ink-500); font-size: var(--type-xs); }
.formulaLibraryDetailHistory ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.formulaLibraryDetailHistory li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--ice-200); border-left: 3px solid var(--glacier-500); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.formulaLibraryVersionMeta { display: grid; gap: 5px; padding: 12px; min-width: 0; }
.formulaLibraryVersionLine { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.formulaLibraryVersionMeta strong { color: var(--ink-950); font-size: var(--type-base); }
.formulaLibraryVersionMeta small { color: var(--ink-500); font-size: var(--type-xs); }
.formulaLibraryVersionMeta p { margin: 0; color: var(--ink-650); font-size: var(--type-xs); line-height: 1.4; }
.formulaLibraryVersionActions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 10px 12px; border-left: 1px solid var(--ice-200); background: var(--ice-50); }
.formulaLibraryVersionActions button { min-height: 32px; padding: 0 10px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--glacier-650); font: inherit; font-size: var(--type-sm); font-weight: var(--weight-heading); cursor: pointer; white-space: nowrap; }
.formulaLibraryVersionActions button:hover { border-color: var(--glacier-500); color: var(--ink-950); }
.formulaLibraryEmptyVersions { color: var(--ink-500); font-size: var(--type-sm); padding: 12px; }

@media (max-width: 720px) {
  .formulaLibraryGrid { grid-template-columns: 1fr; padding: 14px; }
  .formulaLibraryPanel > .panelHeader.libraryHeader { flex-direction: column; align-items: stretch; }
  .formulaLibraryPanel .librarySearch { min-width: 0; }
  .formulaLibraryDetail { width: 100vw; }
  .formulaLibraryDetailHistory li { grid-template-columns: 1fr; }
  .formulaLibraryVersionActions { border-top: 1px solid var(--ice-200); border-left: 0; }
}
.historyIndex, .historyDetailPanel, .historyDetail { min-width: 0; }
.historyIndex { overflow: hidden; }
.historyList { display: grid; max-height: calc(100vh - 285px); overflow-y: auto; }
.historyList > button { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; width: 100%; padding: 13px 15px; border: 0; border-top: 1px solid var(--ice-150); border-left: 3px solid transparent; background: var(--surface); color: var(--ink-650); text-align: left; }
.historyList > button:hover, .historyList > button.active { background: var(--ice-50); }
/* Selection channel — inset shadow on padding-box interior. Layers *inside*
 * the state border so a selected+stateful row shows two stripes: outer =
 * state (role or priority), inner = selection. */
.historyList > button.active { box-shadow: inset 3px 0 var(--glacier-500); }
/* State channel — Option C from 4g dig:
 * Version rows use role axis (attention = "does this version represent
 * the formula I care about?"). Peak is current+preferred simultaneously.
 * Batch rows use priority axis (attention = "does this need me?"), computed
 * in renderBatchList and reduced to 3 buckets:
 *   needs-attention → Active, Paused, Completed-pending-evaluation
 *   complete        → Evaluation Complete, Evaluated
 *   terminated      → Cancelled, Abandoned (base transparent)
 * Both lists share the same underlying grammar: monotonic glacier scale on
 * a single "attention" axis, parallel to 4f's confidence pattern. */
.historyList > button.is-current.is-preferred { border-left-color: var(--glacier-650); }
.historyList > button.is-current              { border-left-color: var(--glacier-500); }
.historyList > button.is-preferred            { border-left-color: var(--glacier-400); }
.historyList > button.needs-attention         { border-left-color: var(--glacier-500); }
.historyList > button.complete                { border-left-color: var(--ice-300); }
/* .terminated inherits the base transparent — no override. */
.historyList > button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: -2px; }
.historyList > button span { min-width: 0; }
.historyList strong, .historyList small, .historyList em { display: block; overflow-wrap: anywhere; }
.historyList strong { color: var(--ink-950); font-size: var(--type-base); }
.historyList small { margin-top: 3px; color: var(--ink-500); font-size: var(--type-xs); }
.historyListMeta { text-align: right; }
.historyListMeta b { color: var(--glacier-650); font-size: var(--type-xs); }
.historyList em { grid-column: 1 / -1; color: var(--ink-500); font-size: var(--type-xs); font-style: normal; line-height: 1.4; }
.historyDetailPanel { padding: 0; overflow: hidden; }
.historyDetail { padding: 18px; }
.historyDetail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.historyDetail > header h2 { margin: 5px 0; font-size: var(--type-2xl); }
.historyDetail > header p { margin: 0; color: var(--ink-650); font-size: var(--type-sm); }
.readOnlyBadge { display: inline-flex; padding: 4px 7px; border: 1px solid var(--ice-300); border-radius: 999px; color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.detailTabs { margin: 15px -18px 0; padding: 9px 18px; border-block: 1px solid var(--ice-150); background: var(--ice-50); }
.detailTabs span { color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.historyFacts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 16px 0; }
.historyFacts div { min-width: 0; padding: 9px; border-radius: var(--radius-sm); background: var(--ice-50); }
.historyFacts dt { color: var(--ink-500); font-size: var(--type-xs); }
.historyFacts dd { margin: 4px 0 0; color: var(--ink-950); font-size: var(--type-sm); overflow-wrap: anywhere; }
.historyActions { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.historyActions button, .historyDialogActions button, .historyDetail form > button, .newEvaluation form > button, .comparisonPair button, .comparisonSelectors button, .formulaEvolution li > div button, [data-calculate-overrun] { min-height: 34px; padding: 0 11px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-650); font: inherit; font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.historyActions button.primary, .historyDialogActions button.primary, .historyDetail form > button.primary, .newEvaluation form > button.primary, .comparisonSelectors button.primary { border-color: var(--glacier-650); background: var(--glacier-650); color: white; }
.historyActions button:focus-visible, .historyDialogActions button:focus-visible, .historyDetail input:focus-visible, .historyDetail select:focus-visible, .historyDetail textarea:focus-visible, .comparisonPair button:focus-visible, .comparisonSelectors button:focus-visible, .formulaEvolution li > div button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
.historyDetail section { margin-top: 18px; }
.historyDetail h3 { margin-bottom: 9px; }
.tableScroller { max-width: 100%; overflow-x: auto; }
.historyDetail table { width: 100%; min-width: 560px; border-collapse: collapse; }
.historyDetail th, .historyDetail td { padding: 8px; border-bottom: 1px solid var(--ice-150); color: var(--ink-650); font-size: var(--type-xs); text-align: left; vertical-align: middle; }
.historyDetail th { color: var(--ink-500); font-size: var(--type-xs); text-transform: uppercase; }
.historyDetail td input { width: 100%; min-width: 85px; }
.versionComparison { padding: 12px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--ice-50); }
.historyEmpty { padding: 28px 18px; color: var(--ink-650); text-align: center; }
.historyEmpty strong { color: var(--ink-950); font-size: var(--type-base); }
.historyEmpty p { margin: 6px auto 0; max-width: 380px; font-size: var(--type-xs); line-height: 1.5; }
.historyEmpty.compact { padding: 12px; }
.historyFormSection { padding-top: 14px; border-top: 1px solid var(--ice-150); }
.historyFormGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.historyFormGrid label, .historyTextGrid label, .historyModal label { display: grid; gap: 5px; min-width: 0; color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-emphasis); }
.historyFormGrid input, .historyFormGrid select, .historyTextGrid textarea, .historyModal input, .historyModal textarea { width: 100%; min-height: 35px; padding: 7px 9px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-950); font: inherit; font-size: var(--type-sm); }
.historyNumber { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; overflow: hidden; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); }
.historyNumber input { border: 0; border-radius: 0; }
.historyNumber small { padding: 0 9px; color: var(--ink-500); font-size: var(--type-xs); white-space: nowrap; }
.readOnlyValue { min-height: 35px; display: flex; align-items: center; padding: 7px 9px; border-radius: var(--radius-sm); background: var(--ice-100); color: var(--ink-800); }
.historyTextGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.evaluationList { display: grid; gap: 8px; }
.evaluationList article { padding: 11px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); }
.evaluationList header { display: flex; justify-content: space-between; gap: 10px; }
.evaluationList p { color: var(--ink-650); font-size: var(--type-xs); }
.newEvaluation { margin-top: 12px; }
.newEvaluation > summary { cursor: pointer; color: var(--glacier-650); font-size: var(--type-sm); font-weight: var(--weight-heading); }
.newEvaluation form { margin-top: 12px; }
.historyModalBackdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; background: rgba(23,38,47,.35); }
.historyModal { width: min(520px,100%); max-height: calc(100vh - 36px); overflow-y: auto; padding: 18px; border: 1px solid var(--ice-300); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 18px 60px rgba(23,38,47,.2); }
.historyModalHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.historyModalHeader h2 { margin: 4px 0 14px; }
.historyModalHeader > button { border: 0; background: transparent; color: var(--ink-500); font-size: var(--type-xl); }
.historyModal form { display: grid; gap: 11px; }
.historyModal .checkField { display: flex; align-items: center; grid-template-columns: auto 1fr; }
.historyModal .checkField input { width: auto; min-height: auto; }
.historyDialogNote { padding: 9px; border-radius: var(--radius-sm); background: var(--ice-100); color: var(--ink-650); font-size: var(--type-xs); }
.historyDialogActions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 5px; }
.historyDialogActionsStack { align-items: stretch; flex-direction: column; }
.firstRunExperience .historyModal{max-width:520px}
.firstRunExperience .historyDialogActionsStack button{min-height:44px}
.sampleModeNotice{position:fixed;z-index:60;right:18px;bottom:18px;display:flex;align-items:center;gap:14px;max-width:min(520px,calc(100vw - 36px));padding:10px 12px;border:1px solid var(--ice-300);border-radius:12px;background:var(--surface);box-shadow:0 10px 30px rgba(23,38,47,.14);color:var(--ink-650)}
.sampleModeNotice span{display:grid;line-height:1.25}.sampleModeNotice strong{color:var(--ink-950)}
.sampleModeNotice button{min-height:40px;border:1px solid var(--glacier-500);border-radius:9px;background:var(--ice-50);color:var(--ink-800);font:inherit;font-weight: var(--weight-heading);white-space:nowrap}
.sampleModeNotice button:focus-visible{outline:3px solid rgba(94,130,149,.24);outline-offset:2px}
.productionRunCanvas { max-width: 1080px; }
.productionRunEmpty { max-width: 620px; padding: 28px; text-align: center; }
.productionRunEmpty h2 { margin: 0; }
.productionRunEmpty p { color: var(--ink-650); }
.productionRunEmpty button, .productionRunActions button { min-height: 40px; padding: 0 14px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-800); font: inherit; font-size: var(--type-sm); font-weight: var(--weight-heading); }
.productionRunSummary { overflow: hidden; }
.productionRunBanner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--glacier-650); color: white; }
.productionRunBanner span { font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.productionRunBanner strong { font-size: var(--type-base); }
.productionActiveStatus { background: var(--glacier-650); color: white; }
.productionRunFacts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 0; padding: 18px; }
.productionRunFacts div { min-width: 0; padding: 10px; border-radius: var(--radius-sm); background: var(--ice-50); }
.productionRunFacts dt { color: var(--ink-500); font-size: var(--type-xs); }
.productionRunFacts dd { margin: 5px 0 0; color: var(--ink-950); font-size: var(--type-sm); font-weight: var(--weight-heading); overflow-wrap: anywhere; }
.productionTargets { padding: 0 18px 18px; }
.productionTargets h2 { font-size: var(--type-base); }
.productionTargets table { width: 100%; border-collapse: collapse; }
.productionTargets th, .productionTargets td { padding: 10px; border-bottom: 1px solid var(--ice-150); color: var(--ink-650); font-size: var(--type-sm); text-align: left; }
.productionTargets th:last-child, .productionTargets td:last-child { text-align: right; }
.productionRunActions { display: flex; justify-content: flex-end; padding: 0 18px 18px; }
.productionCompletionWorkflow { margin:28px 18px 20px; border-top:1px solid var(--ice-200); padding-top:24px; }
.productionCompletionWorkflow > header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.productionCompletionWorkflow h2,.productionCompletionWorkflow h3 { margin:0; }.productionCompletionWorkflow header p,.completionSectionBody > p { color:var(--ink-500); margin:6px 0 0; }
.productionCompletionWorkflow details { border:1px solid var(--ice-200); border-radius:14px; margin-top:12px; background:var(--surface); overflow:hidden; }
.productionCompletionWorkflow summary { cursor:pointer; min-height:48px; padding:14px 16px; font-weight: var(--weight-heading); }.completionSectionBody { border-top:1px solid var(--ice-200); padding:16px; display:grid; gap:16px; }
.completionReadiness { background:var(--ice-50); border-radius:14px; padding:16px; }.completionReadinessGrid,.completionMetrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.completionReadinessGrid > div,.completionMetrics > div { background:var(--surface); border:1px solid var(--ice-200); border-radius:10px; padding:12px; }.completionReadinessGrid p { margin:5px 0 0; color:var(--ink-500); }
.completionMetrics { grid-template-columns:repeat(5,minmax(0,1fr)); }.completionMetrics dt { color:var(--ink-500); font-size: var(--type-base); }.completionMetrics dd { margin:5px 0 0; font-weight: var(--weight-heading); }
.completionInputGrid,.completionTextGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.completionInputGrid label,.completionTextGrid label,.completionSectionBody > label { display:grid; gap:6px; }
.completionInputGrid[hidden] { display:none; }
.productionCompletionNumber { display:grid; grid-template-columns:1fr auto; align-items:center; border:1px solid var(--ice-300); border-radius:10px; overflow:hidden; background:var(--surface); }.productionCompletionNumber input { border:0; min-width:0; min-height:48px; font-size:16px; touch-action:manipulation; user-select:text; -webkit-user-select:text; }.productionCompletionNumber small { padding:0 12px; color:var(--ink-500); }
.massMethod { display:flex; flex-wrap:wrap; gap:10px 20px; border:0; padding:0; margin:0; }.massMethod legend { font-weight: var(--weight-heading); margin-bottom:8px; }.massMethod label { min-height:44px; display:flex; align-items:center; gap:8px; }
.ratingGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.ratingGrid fieldset { border:1px solid var(--ice-200); border-radius:10px; padding:10px; }.ratingGrid legend { font-weight: var(--weight-emphasis); }.ratingGrid label { display:inline-flex; margin:6px 4px 0 0; }.ratingGrid input { position:absolute; opacity:0; }.ratingGrid span { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--ice-300); border-radius:9px; }.ratingGrid input:checked + span { background:var(--glacier-600); color:white; border-color:var(--glacier-600); }.ratingGrid input:focus-visible + span { outline:3px solid var(--glacier-400); outline-offset:2px; }
.defectGrid { border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.defectGrid legend { font-weight: var(--weight-heading); margin-bottom:8px; }.defectGrid > label { display:grid; grid-template-columns:auto 1fr minmax(110px,auto); align-items:center; gap:8px; min-height:48px; border:1px solid var(--ice-200); border-radius:10px; padding:8px 10px; }
.completeBatchAction { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }.completeBatchAction + p { color:var(--ink-500); font-size: var(--type-base); }.productionCompletionError { min-height:1.2em; color:var(--danger-strong); }
.completeBatchAction button { min-height:38px; padding:0 16px; border:1px solid var(--ice-300); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink-650); font:inherit; font-size: var(--type-sm); font-weight: var(--weight-emphasis); cursor:pointer; transition:background-color .12s ease,border-color .12s ease,color .12s ease; }
.completeBatchAction button:hover { border-color:var(--glacier-500); color:var(--ink-950); }
.completeBatchAction button.primary { border-color:var(--glacier-650); background:var(--glacier-650); color:white; }
.completeBatchAction button.primary:hover { background:color-mix(in srgb, var(--glacier-650) 88%, black); border-color:color-mix(in srgb, var(--glacier-650) 88%, black); }
.completeBatchAction button:focus-visible { outline:2px solid var(--glacier-500); outline-offset:2px; }
.completeBatchAction button:disabled { opacity:.5; cursor:not-allowed; }

/* ── Raw-button remediation: unify off-brand default buttons to the house action pattern ── */
#batchRecordForm button,
form[data-correct-stage-timer] button,
form#experimentManagerForm button[type="submit"],
form#structuredExperimentConclusionForm button[type="submit"],
form#researchPlanForm button[type="submit"],
form#completedSensoryEvaluationForm button[type="submit"],
form[data-assign-batch] button[type="submit"],
[data-start-variant-batch],
.ingredientEditor footer button,
[data-reset-execution-timer],
[data-record-temperature],
[data-start-timer],
[data-acknowledge-variant],
[data-research-batch],
[data-research-action],
[data-remove-target-override],
[data-cancel-ingredient-edit] {
  min-height:36px; padding:0 14px; border:1px solid var(--ice-300); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink-650); font:inherit; font-size: var(--type-sm); font-weight: var(--weight-emphasis); cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
#batchRecordForm button:hover,
form[data-correct-stage-timer] button:hover,
form#experimentManagerForm button[type="submit"]:hover,
form#structuredExperimentConclusionForm button[type="submit"]:hover,
form#researchPlanForm button[type="submit"]:hover,
form#completedSensoryEvaluationForm button[type="submit"]:hover,
form[data-assign-batch] button[type="submit"]:hover,
[data-start-variant-batch]:hover,
.ingredientEditor footer button:hover,
[data-reset-execution-timer]:hover,
[data-record-temperature]:hover,
[data-start-timer]:hover,
[data-acknowledge-variant]:hover,
[data-research-batch]:hover,
[data-research-action]:hover,
[data-remove-target-override]:hover,
[data-cancel-ingredient-edit]:hover { border-color:var(--glacier-500); color:var(--ink-950); }
#batchRecordForm button.primary,
form[data-correct-stage-timer] button[type="submit"],
form#experimentManagerForm button[type="submit"],
form#structuredExperimentConclusionForm button[type="submit"],
form#researchPlanForm button[type="submit"],
form#completedSensoryEvaluationForm button.primary,
form[data-assign-batch] button[type="submit"],
.ingredientEditor footer button.primary {
  border-color:var(--glacier-650); background:var(--glacier-650); color:white;
}
#batchRecordForm button.primary:hover,
form#experimentManagerForm button[type="submit"]:hover,
form#structuredExperimentConclusionForm button[type="submit"]:hover,
form#researchPlanForm button[type="submit"]:hover,
form#completedSensoryEvaluationForm button.primary:hover,
form[data-assign-batch] button[type="submit"]:hover,
[data-start-variant-batch]:hover,
.ingredientEditor footer button.primary:hover {
  background:color-mix(in srgb, var(--glacier-650) 88%, black); border-color:color-mix(in srgb, var(--glacier-650) 88%, black);
}
#batchRecordForm button:focus-visible,
form[data-correct-stage-timer] button:focus-visible,
.ingredientEditor footer button:focus-visible,
[data-reset-execution-timer]:focus-visible,
[data-record-temperature]:focus-visible,
[data-start-timer]:focus-visible,
[data-acknowledge-variant]:focus-visible,
[data-research-batch]:focus-visible,
[data-research-action]:focus-visible,
[data-remove-target-override]:focus-visible,
[data-cancel-ingredient-edit]:focus-visible { outline:2px solid var(--glacier-500); outline-offset:2px; }
[data-cancel-ingredient-edit] { padding:0 12px; }
[data-research-batch] { display:grid; gap:2px; text-align:left; padding:10px 12px; min-height:auto; }
/* Completed batch detail — amendment banner (strip §2.3) and completed record lists */
.amendmentNotice {
  padding: 10px 12px;
  border-left: 4px solid var(--glacier-500);
  background: var(--ice-50);
}
.completedIngredientList,
.completedStageList { display: grid; gap: 8px; }
.completedIngredientList article,
.completedStageList article {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr) 2fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ice-200);
}
.completedIngredientList small,
.completedStageList small { color: var(--ink-500); }
.productionRunActions .dangerButton { border-color: color-mix(in srgb, var(--danger) 78%, white); color: var(--danger-strong); }
.productionRunActions button:focus-visible, .productionRunEmpty button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
.productionMeasurements { padding: 0 18px 18px; }
.productionMeasurements > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.productionMeasurements h2 { margin: 0; font-size: var(--type-base); }
.productionMeasurements header p { margin: 4px 0 0; color: var(--ink-500); font-size: var(--type-xs); }
.productionMeasurements progress { width: min(220px,35%); height: 8px; accent-color: var(--glacier-650); }
.productionMeasurementList { display: grid; gap: 10px; }
.productionMeasurement { padding: 14px; border: 1px solid transparent; border-left: 4px solid var(--ingredient-color); border-radius: var(--radius-md); background: var(--ingredient-gradient); }
.productionMeasurement.isComplete { background: var(--ice-50); }
.productionMeasurement > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.productionMeasurement > header > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.productionIngredientIndex { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: var(--ice-100); color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-heading); }
.productionMeasurement h3 { overflow: hidden; margin: 0; color: var(--ink-950); font-size: var(--type-base); text-overflow: ellipsis; white-space: nowrap; }
.productionMeasurement header span { color: var(--ink-500); font-size: var(--type-xs); }
.productionCompletion { min-height: 34px; padding: 0 11px; border: 1px solid var(--glacier-500); border-radius: var(--radius-sm); background: var(--surface); color: var(--glacier-750); font: inherit; font-size: var(--type-xs); font-weight: var(--weight-heading); touch-action: manipulation; }
.productionMeasurement.isComplete .productionCompletion { background: var(--glacier-650); color: white; }
.productionMeasurementGrid { display: grid; grid-template-columns: minmax(110px,.7fr) minmax(150px,1fr) minmax(160px,1fr); gap: 18px; margin-top: 12px; }
.productionTarget, .productionActual, .productionVariance { display: grid; align-content: center; min-height: 68px; padding: 7px 4px; border: 0; border-radius: 0; background: transparent; }
.productionTarget > span, .productionActual > span:first-child, .productionVariance > span, .productionNote > span { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.productionTarget strong, .productionVariance strong { margin-top: 5px; color: var(--ink-900); font-size: var(--type-base); }
.productionVariance small { margin-top: 3px; color: var(--ink-650); font-size: var(--type-xs); }
.productionVariance.under-target, .productionVariance.at-target, .productionVariance.over-target { border: 0; }
.productionMassInput { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; margin-top: 4px; border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: none; }
.productionMassInput:focus-within { background:var(--ingredient-tint); box-shadow:inset 0 0 0 1px var(--glacier-500); }
.productionMassInput input { width: 100%; min-width: 0; min-height: 40px; padding: 7px 5px 7px 9px; border: 0; outline: 0; background: transparent; color: var(--ink-950); font: inherit; font-size: 16px; font-weight: var(--weight-heading); text-align: right; appearance: textfield; -moz-appearance: textfield; pointer-events: auto; touch-action: manipulation; user-select: text; -webkit-user-select: text; }
.productionMassInput span { padding-right: 9px; color: var(--ink-500); font-size: var(--type-xs); }
.productionNote { display: grid; gap: 5px; margin-top: 10px; border:0; }
.productionNote small { font-weight: var(--weight-body); letter-spacing: var(--track-body); text-transform: none; }
.productionNote input { min-height: 38px; padding: 7px 9px; border: 1px solid var(--ice-250); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-900); font: inherit; font-size: var(--type-sm); touch-action: manipulation; }
.productionMeasurementError { min-height: 12px; margin: 5px 0 0; color: var(--danger-strong); font-size: var(--type-xs); }
.productionProcess { padding: 4px 18px 18px; border-top: 1px solid var(--ice-150); }
.productionExecution{display:grid;gap:14px;margin:0 18px 18px;padding:16px;border:1px solid var(--ice-250);border-radius:14px;background:var(--surface-soft)}
.productionExecution>header{display:flex;align-items:start;justify-content:space-between;gap:12px}.productionExecution h2,.productionExecution p{margin:0}.productionExecution>header p{color:var(--ink-500)}.productionExecution>progress{width:100%;height:8px}
.productionExecutionStatus{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}.productionExecutionStatus div{padding:10px;border:1px solid var(--ice-200);border-radius:10px;background:var(--surface)}.productionExecutionStatus dt{color:var(--ink-500);font-size: var(--type-base)}.productionExecutionStatus dd{margin:4px 0 0;font-weight: var(--weight-heading)}
.executionStepList{display:grid;gap:8px;margin:0;padding:0;list-style:none}.executionStep{border:1px solid var(--ice-200);border-radius:12px;background:var(--surface);overflow:hidden}.executionStep.isCurrent{border-color:var(--glacier-650);box-shadow:0 0 0 1px var(--glacier-650)}.executionStep.isComplete{background:var(--ice-50)}.executionStep summary{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;cursor:pointer}.executionStep summary>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ice-100);color:var(--glacier-750);font-weight: var(--weight-kicker)}.executionStep summary div{display:grid;gap:2px}.executionStep summary small,.executionStep summary em{color:var(--ink-500);font-size: var(--type-base)}.executionStepBody{display:grid;gap:12px;padding:0 12px 12px;border-top:1px solid var(--ice-200)}
.executionChecklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:12px}.executionChecklist label{display:flex;gap:8px;align-items:center;padding:9px;border:1px solid var(--ice-200);border-radius:9px}.executionTimer,.executionTemperature{display:grid;grid-template-columns:minmax(150px,1fr) minmax(140px,.7fr) auto;gap:10px;align-items:end;padding:12px;border-radius:10px;background:var(--ice-50)}.executionTimer>div:first-child,.executionTemperature>div{display:grid;gap:3px}.executionTimer strong,.executionTemperature strong{font-size: var(--type-lg)}.executionTimer label,.executionTemperature label,.executionNoteForm label{display:grid;gap:5px}.executionTimer input,.executionTemperature input,.executionNoteForm input{min-height:44px;font-size:16px}.executionTimer>div:last-child{display:flex;gap:7px}.executionNoteForm{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.executionNotes{display:grid;gap:6px;margin:0;padding:0;list-style:none}.executionNotes li{display:grid;grid-template-columns:minmax(135px,.35fr) 1fr;gap:10px;padding:8px;border-left:3px solid var(--ice-300);background:var(--ice-50)}.executionNotes time{color:var(--ink-500);font-size: var(--type-base)}
@media(max-width:760px){.productionExecution{margin-inline:12px;padding:12px}.productionExecutionStatus{grid-template-columns:1fr 1fr}.executionChecklist{grid-template-columns:1fr}.executionTimer,.executionTemperature{grid-template-columns:1fr}.executionStep summary{grid-template-columns:32px 1fr}.executionStep summary em{grid-column:2}.executionNoteForm{grid-template-columns:1fr}.executionNotes li{grid-template-columns:1fr}}
.productionProcess > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0 12px; }
.productionProcess h2 { margin: 0; font-size: var(--type-base); }
.productionProcess header p { margin: 4px 0 0; color: var(--ink-500); font-size: var(--type-xs); }
.productionProcess > header > strong { padding: 7px 10px; border-radius: 999px; background: var(--ice-100); color: var(--glacier-750); font-size: var(--type-xs); }
.productionStageList { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.productionStage { overflow: hidden; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--surface); }
.productionStage.isCurrent { border-color: var(--glacier-550); box-shadow: 0 0 0 1px color-mix(in srgb,var(--glacier-500) 18%,transparent); }
.productionStage.isComplete { background: var(--ice-50); }
.productionStage summary { display: grid; grid-template-columns: 26px minmax(140px,1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 9px 12px; cursor: pointer; touch-action: manipulation; }
.productionStage summary::marker { content: ""; }
.productionStage summary > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--ice-100); color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-heading); }
.productionStage.isComplete summary > span { background: var(--glacier-650); color: white; }
.productionStage summary div { display: grid; gap: 2px; }
.productionStage summary strong { color: var(--ink-900); font-size: var(--type-sm); }
.productionStage summary small, .productionStage summary em { color: var(--ink-500); font-size: var(--type-xs); font-style: normal; }
.productionStageBody { padding: 3px 12px 12px 48px; border-top: 1px solid var(--ice-100); }
.productionIngredientReadiness { padding: 9px; border-radius: var(--radius-sm); background: var(--ice-50); color: var(--ink-650); font-size: var(--type-xs); }
.productionStageFields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 10px; }
.productionStageFields label, .productionStageNote { display: grid; gap: 5px; color: var(--ink-600); font-size: var(--type-xs); font-weight: var(--weight-heading); }
.productionTemperatureInput { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; border: 1px solid var(--ice-250); border-radius: var(--radius-sm); background: var(--surface); }
.productionTemperatureInput:focus-within { border-color: var(--glacier-600); box-shadow: 0 0 0 2px color-mix(in srgb,var(--glacier-500) 20%,transparent); }
.productionTemperatureInput input { width: 100%; min-width: 0; min-height: 42px; padding: 7px 4px 7px 9px; border: 0; outline: 0; background: transparent; color: var(--ink-950); font: inherit; font-size: 16px; touch-action: manipulation; }
.productionTemperatureInput small { padding-right: 9px; color: var(--ink-500); }
.productionStageFields label > em { color: var(--ink-500); font-size: var(--type-xs); font-style: normal; font-weight: var(--weight-body); }
.productionStageNote { margin-top: 10px; }
.productionStageNote input, .productionStageNote textarea { min-height: 40px; padding: 8px 9px; border: 1px solid var(--ice-250); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-900); font: inherit; font-size: var(--type-sm); resize: vertical; touch-action: manipulation; }
.productionTimer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px; border-radius: var(--radius-sm); background: var(--ink-900); color: white; }
.productionTimer > div:first-child { display: grid; gap: 2px; }
.productionTimer span, .productionTimer small { color: var(--ice-200); font-size: var(--type-xs); }
.productionTimer strong { font-variant-numeric: tabular-nums; font-size: var(--type-lg); letter-spacing: var(--track-label); }
.productionTimer > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.productionTimer button, .productionStageActions button { min-height: 38px; padding: 0 11px; border: 1px solid var(--glacier-400); border-radius: var(--radius-sm); background: var(--surface); color: var(--glacier-800); font: inherit; font-size: var(--type-xs); font-weight: var(--weight-heading); touch-action: manipulation; }
.productionStageError { min-height: 12px; margin: 5px 0; color: var(--danger-strong); font-size: var(--type-xs); }
.productionStageActions { display: flex; justify-content: flex-end; }

/* Production form controls — extend canonical input+button chrome to
 * widgets in Process Timeline, Critical Log (Temperature/Churn/Overrun),
 * and Production Process stages (Checkpoints, Observation, Deviation).
 *
 * Root cause: these widgets had min-height:44px/font-size:16px sizing
 * rules but no border/background/radius/color, so Safari and Chromium
 * rendered them with native OS chrome (bevelled buttons, native
 * datetime picker, blue focus rings) — off-brand against the rest of
 * the History workspace which uses the ice-300 / surface / ink-950
 * token set on .historyDetail form inputs and .historyActions buttons.
 *
 * This rule matches those tokens exactly, so the visual language is
 * consistent across the entire history workspace. No !important —
 * the pending Phase 4 layer at line ~3200 can still override these
 * with more-specific selectors if it needs to.
 *
 * Text-like controls (input/select/textarea) — chrome only. Sizing
 * (min-height/font-size) already set by the minified rule at ~1354,
 * so we don't duplicate it. */
.productionTimeline > ol input,
.productionTimeline > ol button,
.processCheckpointList > div input,
.processCheckpointList > div select,
.stageObservationForm input,
.stageObservationForm select,
.stageObservationForm textarea,
.stageDeviationForm input,
.stageDeviationForm select,
.stageDeviationForm textarea {
  padding: 8px 10px;
  border: 1px solid var(--ice-300);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-950);
  font: inherit;
}
/* TODO post-ship: selects show a chosen state, not typed words. Trialled
   Sep 11 on stage + completion forms and reverted before release so it ships
   all-or-nothing. Promote as ONE global rule beside the `button, input, select`
   reset — `select { color: var(--ink-800); font-weight: var(--weight-emphasis) }`
   — then walk every workspace once. */
/* Buttons in these forms — secondary chrome matching .historyActions button. */
.productionTimeline > ol button,
.stageObservationForm button,
.stageDeviationForm button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ice-300);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-650);
  font: inherit;
  font-size: var(--type-sm);
  font-weight: var(--weight-emphasis);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.productionTimeline > ol button:hover,
.stageObservationForm button:hover,
.stageDeviationForm button:hover { border-color: var(--glacier-500); color: var(--glacier-750); }
/* Stage start/complete are the one primary action per stage. */
.productionTimeline > ol button.primary { border-color: var(--glacier-650); background: var(--glacier-650); color: white; }
.productionTimeline > ol button.primary:hover { border-color: var(--glacier-750); background: var(--glacier-750); color: white; }
.productionTimeline > ol button.dangerButton { border-color: color-mix(in srgb, var(--danger) 55%, var(--ice-300)); color: var(--danger-strong); }
/* Focus ring — glacier, matches .historyDetail input:focus-visible. */
.productionTimeline > ol input:focus-visible,
.productionTimeline > ol button:focus-visible,
.processCheckpointList > div input:focus-visible,
.processCheckpointList > div select:focus-visible,
.stageObservationForm input:focus-visible,
.stageObservationForm select:focus-visible,
.stageObservationForm textarea:focus-visible,
.stageObservationForm button:focus-visible,
.stageDeviationForm input:focus-visible,
.stageDeviationForm select:focus-visible,
.stageDeviationForm textarea:focus-visible,
.stageDeviationForm button:focus-visible {
  outline: 2px solid var(--glacier-500);
  outline-offset: 2px;
}
/* NOTE — intentionally NOT styled:
 *   .productionTemperatureLog input, .productionOverrunLog input:
 *     these live INSIDE a bordered .productionTemperatureLog label >
 *     span:last-child wrapper (see line ~1359) and are deliberately
 *     borderless so the wrapper draws the field frame. Styling them
 *     here would double-draw the border. */
/* Canonical primary workspace-header action button.
   Matches the Formula Library detail overlay treatment (34px / 11px / 670) —
   the newer, quieter spec that already ships in the version-history panel.
   Applies to: .workspaceAction (Equipment, Process Profiles, Experiment Manager)
   and .libraryHeaderActions button.primary (Formula Library, Ingredients),
   which previously fell through to native OS chrome because no rule matched. */
.workspaceAction,
.libraryHeaderActions button.primary { min-height: 34px; padding: 0 14px; border: 1px solid var(--glacier-650); border-radius: var(--radius-sm); background: var(--glacier-650); color: white; font: inherit; font-size: var(--type-sm); font-weight: var(--weight-emphasis); cursor: pointer; }
.workspaceAction:hover,
.libraryHeaderActions button.primary:hover { background: color-mix(in srgb, var(--glacier-650) 88%, black); border-color: color-mix(in srgb, var(--glacier-650) 88%, black); }
.workspaceAction:disabled,
.libraryHeaderActions button.primary:disabled { opacity: .5; cursor: not-allowed; }
.experimentFilters { display: grid; gap: 7px; padding: 10px; border-top: 1px solid var(--ice-150); }
.experimentFilters input, .experimentFilters select { width: 100%; min-width: 0; min-height: 34px; padding: 6px 8px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-800); font: inherit; font-size: var(--type-xs); }
.experimentList > button > small { grid-column: 1 / -1; color: var(--ink-500); font-size: var(--type-xs); }
.experimentQuestion { margin: 16px -18px 0; padding: 18px; border-block: 1px solid var(--ice-200); background: linear-gradient(120deg,var(--ice-50),var(--surface)); }
.experimentQuestion > span { color: var(--glacier-650); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.experimentQuestion h3 { max-width: 820px; margin: 7px 0 0; color: var(--ink-950); font-size: var(--type-lg); line-height: 1.35; letter-spacing: var(--track-display); text-transform: none; }
.experimentQuestion p { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 10px; margin: 13px 0 0; color: var(--ink-650); font-size: var(--type-xs); line-height: 1.5; }
.multiFactorNotice, .experimentLineage, .causalCaution { padding: 10px 12px; border-left: 3px solid var(--warning); border-radius: var(--radius-sm); background: var(--notice-warn-bg); color: var(--ink-650); font-size: var(--type-xs); line-height: 1.5; }
.experimentLineage { border-left-color: var(--glacier-500); background: var(--ice-50); }
.readiness { margin-top: 14px; padding: 11px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--ice-50); color: var(--ink-650); font-size: var(--type-xs); }
.readiness.isReady { border-left: 3px solid var(--success); }
.readiness strong { color: var(--ink-950); }
.readiness ul { margin: 6px 0 0; padding-left: 17px; line-height: 1.5; }
.variantGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.variantCard { min-width: 0; padding: 12px; border: 1px solid var(--ice-200); border-top: 3px solid var(--ice-300); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); }
.variantCard.role-control { border-top-color: var(--glacier-500); }
.variantCard.role-test-a, .variantCard.role-test-b { border-top-color: var(--glacier-650); }
.variantCard.role-candidate { border-top-color: var(--amber-500); }
.variantCard.role-reference, .variantCard.role-repeat { border-top-color: var(--ice-300); }
.variantCard > header { display: flex; justify-content: space-between; gap: 10px; }
.variantCard header span { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); text-transform: uppercase; }
.variantCard h4 { margin: 3px 0 0; color: var(--ink-950); font-size: var(--type-base); }
.variantCard header b { color: var(--glacier-650); font-size: var(--type-xs); }
.variantCard header .cardKicker { display: block; margin-top: 4px; color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-kicker); text-transform: uppercase; letter-spacing: var(--track-label); }
.variantCard header span.rolePill { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--surface); background: var(--ice-400); }
.variantCard header span.rolePill.role-control     { background: var(--glacier-500); }
.variantCard header span.rolePill.role-reference   { background: var(--ice-400); color: var(--ink-800); }
.variantCard header span.rolePill.role-test-a      { background: var(--glacier-650); }
.variantCard header span.rolePill.role-test-b      { background: var(--glacier-650); }
.variantCard header span.rolePill.role-candidate   { background: var(--amber-500); }
.variantCard header span.rolePill.role-repeat      { background: var(--ice-300); color: var(--ink-800); }
.variantCard dl { display: grid; gap: 7px; margin: 11px 0; }
.variantCard dl div { min-width: 0; }
.variantCard dt { color: var(--ink-500); font-size: var(--type-xs); }
.variantCard dd { margin: 3px 0 0; color: var(--ink-650); font-size: var(--type-xs); line-height: 1.4; overflow-wrap: anywhere; }
.replicateList { display: grid; gap: 3px; padding: 8px; border-radius: var(--radius-sm); background: var(--ice-50); }
.replicateList span { color: var(--ink-650); font-size: var(--type-xs); }
.replicateList > div { display:grid; gap:7px; padding: 8px; border: 1px solid var(--ice-200); border-left: 3px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); }
.replicateList > div.state--balanced { border-left-color: var(--glacier-500); }
.replicateList > div.state--needs-validation { border-left-color: var(--warning); }
.replicateList > div.state--blocking { border-left-color: var(--danger); }
.replicateList > div.state--insufficient-data { border-left-color: var(--ice-300); }
.replicateList form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 6px; margin: 0; }
.replicateList input, .replicateList select { width: 100%; min-width: 0; min-height: 36px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-800); font: inherit; font-size: var(--type-xs); }
.variantCard > button { width: 100%; min-height: 40px; margin-top: 9px; border: 1px solid var(--glacier-500); border-radius: var(--radius-sm); background: var(--surface); color: var(--glacier-650); font: inherit; font-size: var(--type-xs); font-weight: var(--weight-heading); }
.variantCard form { display: flex; align-items: end; gap: 6px; margin-top: 9px; }
.variantCard form label { display: grid; flex: 1; gap: 4px; color: var(--ink-500); font-size: var(--type-xs); }
.variantCard form select { min-width: 0; height: 31px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); }
/* Formula identity strip — read-only fact row above the version list */
.formulaIdentitySummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid var(--ice-200);
  border-radius: var(--radius-md);
  background: var(--ice-200);
}
.formulaIdentitySummary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface);
}
.formulaIdentitySummary span {
  color: var(--ink-550);
  font-size: var(--type-xs);
  font-weight: var(--weight-heading);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.formulaIdentitySummary strong { overflow-wrap: anywhere; }

/* Archived versions disclosure — §2.4 */
.archivedVersions { margin-top: 10px; border-top: 1px solid var(--ice-150); }
.archivedVersions > summary {
  min-height: 44px;
  display: flex; align-items: center;
  padding: 0 15px;
  color: var(--ink-650); font-weight: var(--weight-heading);
  cursor: pointer;
}
.archivedVersions > summary:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
@media (max-width:860px){.formulaIdentitySummary{grid-template-columns:repeat(2,minmax(0,1fr))}.versionDetail .historyActions button,.archivedVersions button{min-height:44px}.versionComparison .tableScroller{overflow:visible}.versionComparison table,.versionComparison tbody,.versionComparison tr,.versionComparison th,.versionComparison td{display:block;width:100%}.versionComparison thead{display:none}.versionComparison tr{margin-bottom:8px;border:1px solid var(--ice-200);border-radius:10px;padding:10px}.versionComparison th,.versionComparison td{padding:3px;border:0}}
.experimentComparisonSection { padding-top: 15px; border-top: 1px solid var(--ice-150); }
.experimentComparisonSection > p { color: var(--ink-500); font-size: var(--type-xs); }
.preRunVariant { margin-top: 10px; padding: 11px; border: 1px solid var(--ice-200); border-top: 3px solid var(--ice-300); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); }
.preRunVariant.role-control { border-top-color: var(--glacier-500); }
.preRunVariant.role-test-a, .preRunVariant.role-test-b { border-top-color: var(--glacier-650); }
.preRunVariant.role-candidate { border-top-color: var(--amber-500); }
.preRunVariant.role-reference, .preRunVariant.role-repeat { border-top-color: var(--ice-300); }
.preRunVariant > header { display: flex; justify-content: space-between; gap: 10px; }
.preRunVariant header span { color: var(--warning); font-size: var(--type-xs); font-weight: var(--weight-heading); }
.preRunVariant dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.preRunVariant dt { color: var(--ink-500); font-size: var(--type-xs); }
.preRunVariant dd { margin: 3px 0 0; color: var(--ink-650); font-size: var(--type-xs); line-height: 1.4; }
.unexpectedDifferences { margin: 9px 0; padding: 9px; border-left: 3px solid var(--warning); background: var(--notice-warn-bg); color: var(--ink-650); font-size: var(--type-xs); }
.unexpectedDifferences ul { margin: 5px 0; padding-left: 17px; }
.comparability { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: center; gap: 12px; margin: 10px 0; padding: 11px; border: 1px solid var(--ice-200); border-left: 3px solid var(--glacier-500); border-radius: var(--radius-sm); background: var(--ice-50); }
.comparability.state--needs-validation, .comparability.state--blocking,
.comparability--limited, .comparability--poor { border-left-color: var(--warning); }
.comparability span { display: block; color: var(--ink-500); font-size: var(--type-xs); }
.comparability strong { display: block; margin-top: 3px; color: var(--ink-950); font-size: var(--type-md); }
.comparability p { margin: 0; color: var(--ink-650); font-size: var(--type-xs); line-height: 1.45; }
.comparisonTable caption { padding: 8px; color: var(--ink-650); font-size: var(--type-xs); text-align: left; }
.comparisonTable th small, .comparisonTable td small { display: block; margin-top: 3px; color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-body); }
.comparisonContexts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.comparisonContexts article { padding: 9px; border-radius: var(--radius-sm); background: var(--ice-50); }
.comparisonContexts h4 { margin: 0 0 6px; font-size: var(--type-xs); }
.comparisonContexts p { margin: 3px 0; color: var(--ink-650); font-size: var(--type-xs); }
.confounderList { display: grid; gap: 6px; padding: 0; list-style: none; }
.confounderList li { display: grid; gap: 3px; padding: 8px; border-left: 3px solid var(--warning); background: var(--notice-warn-bg); }
.confounderList strong { color: var(--ink-800); font-size: var(--type-xs); }
.confounderList span { color: var(--ink-650); font-size: var(--type-xs); }
/* Experiment Conclusion — terminal card in the disclosure family (always visible).
 * Same card grammar as .structuredExperimentConclusion / .scientificDefinition below,
 * with a glacier top-accent per VISUAL-LANGUAGE-REFERENCE.md §2.3 marking the on-target endpoint.
 * The <h3> plays the role of a disclosure <summary> (no <details> wrapper — this is the terminal step). */
.experimentConclusion {
  margin-top: 16px;
  padding: 0;
  border: 1px solid var(--ice-200);
  border-top: 3px solid var(--glacier-500);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.experimentConclusion > h3 {
  display: flex; align-items: center; min-height: 44px;
  margin: 0; padding: 12px 16px;
  border-bottom: 1px solid var(--ice-200);
  background: var(--ice-50);
  color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-heading); letter-spacing: var(--track-display);
}
.experimentConclusion > h3::before {
  display: block; margin-right: 10px; content: "Conclusion record";
  color: var(--glacier-650); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase;
}
.experimentConclusion form { display: grid; gap: 14px; padding: 16px; margin: 0; }
.experimentConclusion form > label {
  display: grid; gap: 6px;
  color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase;
}
.experimentConclusion form textarea,
.experimentConclusion form input,
.experimentConclusion form select {
  width: 100%; min-height: 38px; padding: 8px 10px;
  border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink-950); font: inherit; font-size: var(--type-sm); font-weight: var(--weight-body); letter-spacing: var(--track-body); text-transform: none;
}
.experimentConclusion form textarea { resize: vertical; line-height: 1.5; }
.experimentConclusion form input:focus,
.experimentConclusion form select:focus,
.experimentConclusion form textarea:focus {
  outline: none; border-color: var(--glacier-500); box-shadow: 0 0 0 3px rgba(94,130,149,.12);
}
.experimentConclusion form > .historyFormGrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.experimentConclusion form > .historyFormGrid > label:has(textarea) { grid-column: 1 / -1; }
.experimentConclusion p.fieldError {
  margin: 0; min-height: 14px; color: var(--danger); font-size: var(--type-xs); text-transform: none; letter-spacing: var(--track-body);
}
.experimentConclusion form > .historyActions {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0;
}
.experimentConclusion form > .historyActions button {
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink-650); font: inherit; font-size: var(--type-sm); font-weight: var(--weight-emphasis); cursor: pointer;
}
.experimentConclusion form > .historyActions button.primary {
  border-color: var(--glacier-650); background: var(--glacier-650); color: white;
}
.experimentConclusion form > .historyActions button:hover { border-color: var(--glacier-500); color: var(--ink-950); }
.experimentConclusion form > .historyActions button.primary:hover {
  color: white; background: color-mix(in srgb, var(--glacier-650) 88%, black);
}

@media (max-width: 1180px) {
  .appHeader { grid-template-columns: 220px minmax(0,1fr) auto; }
  .appBody { grid-template-columns: 190px minmax(0,1fr); }
  .workbenchGrid { grid-template-columns: minmax(180px,.42fr) minmax(520px,1.65fr); }
  .summaryPanel { grid-column: 1 / -1; }
  .summaryGrid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .analysisSnapshotGrid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .analysisCompositionCards { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .historyWorkspace { grid-template-columns: minmax(220px,.55fr) minmax(0,1.5fr); }
  .historyFormGrid { grid-template-columns: 1fr 1fr; }
  .variantGrid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .appHeader { grid-template-columns: 1fr auto; padding: 0 14px; }
  .headerRecipe { display: none; }
  .connection { display: none; }
  .appBody { grid-template-columns: 1fr; }
  .sideNav { display: none; }
  .mainCanvas { padding: 14px; }
  .workspaceHeader { align-items: flex-start; flex-direction: column; }
  .contextStrip { width: 100%; overflow-x: auto; }
  .workbenchGrid { grid-template-columns: 1fr; }
  .summaryPanel { grid-column: auto; }
  .summaryGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analysisSnapshotGrid, .analysisCompositionCards { grid-template-columns: 1fr 1fr; }
  .formulaPanel { overflow-x: auto; }
  .formulaTable { min-width: 720px; }
  .formulaTable td:first-child .ingredientName { white-space: normal; overflow-wrap: anywhere; }
  .historyWorkspace { grid-template-columns: 1fr; }
  .historyList { max-height: 310px; }
  .historyFacts { grid-template-columns: 1fr 1fr; }
  .productionRunFacts { grid-template-columns: 1fr 1fr; }
  .productionMeasurementGrid { grid-template-columns: 1fr 1fr; }
  .productionVariance { grid-column: 1/-1; }
  .productionStageBody { padding-left: 12px; }
  .comparisonContexts { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .summaryGrid { grid-template-columns: 1fr; }
  .replicateList form { grid-template-columns:1fr; }.replicateList input,.replicateList select,.replicateList button,.variantCard > button { min-height:44px; }
  .intelligenceOverview { grid-template-columns:1fr 1fr; }.intelligenceFinding > header { align-items:flex-start; flex-direction:column; }.intelligenceFinding summary { min-height:44px; }
  .productionCompletionWorkflow > header { display:grid; }.completionReadinessGrid,.completionMetrics,.completionInputGrid,.completionTextGrid,.ratingGrid,.defectGrid { grid-template-columns:1fr; }.defectGrid > label { grid-template-columns:auto 1fr; }.defectGrid select { grid-column:2; }.completeBatchAction { display:grid; }.completeBatchAction button { min-height:50px; }.completedIngredientList article,.completedStageList article { grid-template-columns:1fr; gap:3px; }
  .analysisSnapshotGrid, .analysisCompositionCards { grid-template-columns: 1fr; }
  .analysisValidation > dl { grid-template-columns: 1fr; }
  .formulaValidationStatus { grid-template-columns: 28px minmax(0,1fr); }
  .formulaValidationStatus > dl { grid-column: 1 / -1; justify-content: space-around; padding-top: 7px; border-top: 1px solid var(--ice-200); }
  .validationIssue > header { align-items: flex-start; flex-direction: column; }
  .validationActions { display: grid; grid-template-columns: 1fr; }
  .historyFormGrid, .historyTextGrid, .historyFacts { grid-template-columns: 1fr; }
  .productionRunFacts { grid-template-columns: 1fr; }
  .productionRunBanner { align-items: flex-start; flex-direction: column; }
  .productionRunActions { display: grid; }
  .productionMeasurements { padding-inline: 12px; }
  .productionMeasurements > header { align-items: stretch; flex-direction: column; }
  .productionMeasurements progress { width: 100%; }
  .productionMeasurement { padding: 12px; }
  .productionMeasurement > header { align-items: flex-start; }
  .productionMeasurementGrid { grid-template-columns: 1fr; }
  .productionVariance { grid-column: auto; }
  .productionProcess { padding-inline: 12px; }
  .productionProcess > header { align-items: flex-start; flex-direction: column; }
  .productionStage summary { grid-template-columns: 26px minmax(0,1fr); }
  .productionStage summary > em { grid-column: 2; }
  .productionStageFields { grid-template-columns: 1fr; }
  .productionTimer { align-items: stretch; flex-direction: column; }
  .productionTimer > div:last-child, .productionStageActions { display: grid; grid-template-columns: 1fr; }
  .historyDetail { padding: 13px; }
  .detailTabs { margin-inline: -13px; padding-inline: 13px; }
  .historyList > button { grid-template-columns: 1fr; }
  .historyListMeta { text-align: left; }
  .historyDialogActions { align-items: stretch; flex-direction: column; }
  .experimentQuestion { margin-inline: -13px; padding: 13px; }
  .experimentQuestion p, .preRunVariant dl, .comparability { grid-template-columns: 1fr; }
  .workspaceAction { width: 100%; }
}

.storageCanvas{max-width:1180px}
.storageGrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;gap:16px;align-items:start}
.storageIdentityCard{grid-column:span 5;grid-row:span 2}
.storageBackupCard,.storageSampleCard{grid-column:span 3}
.storagePortabilityCard,.storageValidationCard{grid-column:span 4}
.storageCard,.storageUpgrade,.storageFailure,.restoreReview{border:1px solid var(--ice-200);border-radius:16px;background:var(--surface);padding:20px;min-width:0}
/* Database identity — which database is actually open (derived from the opened path, never a flag) */
.dbIdentity{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:var(--type-sm);font-weight:var(--weight-heading);letter-spacing:var(--track-label);text-transform:uppercase;border:1px solid var(--ice-200);background:var(--ice-100);color:var(--ink-800);white-space:nowrap}
.dbIdentity::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.dbIdentity-production{color:var(--success);border-color:var(--success)}
.dbIdentity-development{color:var(--warning);border-color:var(--warning)}
.dbIdentity-iphone{color:var(--ink-800)}
.dbIdentity-custom,.dbIdentity-repository{color:var(--danger-strong);border-color:var(--danger-strong)}
.dbIdentity-unknown{color:var(--ink-500);border-style:dashed}
.headerActions .dbIdentity{margin-right:10px}
.storageIdentityLine{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}
.storagePath{font-size:var(--type-sm);color:var(--ink-500);word-break:break-all;background:var(--ice-100);padding:2px 6px;border-radius:var(--radius-sm)}
/* Governed ingredient overrides — canonical changed a field you also edited */
.ingredientConflictNotice{margin:0 0 14px;padding:10px 14px;border:1px solid var(--warning);border-left-width:4px;border-radius:var(--radius-sm);background:var(--ice-100);color:var(--ink-800);font-size:var(--type-sm);line-height:1.5}
.linkButton{appearance:none;border:0;padding:0;background:none;color:var(--accent,var(--ink-800));font:inherit;font-weight:var(--weight-heading);text-decoration:underline;cursor:pointer}
.linkButton:hover,.linkButton:focus-visible{text-decoration-thickness:2px}
.ingredientConflict{margin:0 0 16px;padding:16px 18px;border:1px solid var(--warning);border-left-width:4px;border-radius:12px;background:var(--surface)}
.ingredientConflict h3{margin:4px 0 6px;font-size:var(--type-lg)}
.ingredientConflict p{margin:0 0 12px;color:var(--ink-650);line-height:1.5}
.ingredientConflictTable{width:100%;border-collapse:collapse;font-size:var(--type-sm);margin-bottom:14px}
.ingredientConflictTable th,.ingredientConflictTable td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--ice-200);vertical-align:top}
.ingredientConflictTable thead th{font-size:var(--type-sm);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-500);font-weight:var(--weight-heading)}
.ingredientConflictTable tbody th{font-weight:500;color:var(--ink-800)}
.ingredientConflictTable td strong{color:var(--warning)}
.ingredientConflict footer{display:flex;flex-wrap:wrap;gap:8px}
.ingredientOverrideSummary strong{color:var(--warning)}
.storageCard h2,.storageUpgrade h2,.storageFailure h2,.restoreReview h2{margin:5px 0 10px;font-size: var(--type-md)}
.storageCard p,.storageUpgrade p,.storageFailure p,.restoreReview p{color:var(--ink-650);line-height:1.5}
.storageCard button,.storageUpgrade button,.storageFailure button,.restoreReview button{width:100%;margin-top:8px;border:1px solid var(--ice-300);border-radius:9px;background:var(--surface);color:var(--ink-800);font:inherit;font-weight: var(--weight-heading);padding:10px 13px;cursor:pointer}
.storageCard button:hover,.storageUpgrade button:hover,.storageFailure button:hover,.restoreReview button:hover{border-color:var(--glacier-500);background:var(--ice-50)}
.storageCard button:focus-visible,.storageUpgrade button:focus-visible,.storageFailure button:focus-visible,.restoreReview button:focus-visible{outline:3px solid rgba(94,130,149,.24);outline-offset:2px}
.storageCard button.primary,.storageUpgrade button.primary{border-color:var(--glacier-650);background:var(--glacier-650);color:#fff}
.storageCard button:disabled,.storageUpgrade button:disabled{cursor:not-allowed;opacity:.58}
.storageCard dl{margin:16px 0}
.storageCard dl div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:7px 0;border-bottom:1px solid var(--ice-100)}
.storageCard dt{color:var(--ink-650)}
.storageCard dd{margin:0;font-weight: var(--weight-heading);text-align:right;overflow-wrap:anywhere}
.betaSupportCard{grid-column:1/-1}
.betaSupportCard .betaFeedbackKinds{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--ice-100)}
.betaSupportCard .betaFeedbackKinds strong{display:block;color:var(--ink-800)}
.betaSupportCard details{margin:14px 0;color:var(--ink-650)}
.betaSupportCard summary{cursor:pointer;font-weight: var(--weight-heading);color:var(--ink-800)}
.betaFeedbackForm{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--ice-100)}
.betaFeedbackForm label{display:grid;gap:6px;color:var(--ink-650);font-weight: var(--weight-heading)}.betaFeedbackForm label:not(:nth-child(-n+2)),.betaFeedbackForm button{grid-column:1/-1}
.betaFeedbackForm input:not([type="checkbox"]),.betaFeedbackForm select,.betaFeedbackForm textarea{width:100%;box-sizing:border-box;border:1px solid var(--ice-300);border-radius:9px;background:var(--ice-50);color:var(--ink-950);font:inherit;padding:10px 12px;resize:vertical}
.betaFeedbackForm input:focus-visible,.betaFeedbackForm select:focus-visible,.betaFeedbackForm textarea:focus-visible{outline:3px solid rgba(94,130,149,.24);outline-offset:2px;border-color:var(--glacier-500)}
.betaFeedbackForm .feedbackDiagnosticChoice{display:flex;align-items:center;grid-template-columns:none;gap:9px;font-weight: var(--weight-emphasis)}.feedbackDiagnosticChoice input{width:18px;height:18px}
.betaFeedbackForm .betaSessionHelp{grid-column:1/-1;margin-top:-7px;color:var(--ink-500);font-weight: var(--weight-body)}
.storageUpgrade{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.8fr) minmax(150px,.35fr);gap:20px;align-items:center;margin-bottom:16px;border-color:var(--ice-300);background:linear-gradient(135deg,var(--surface),var(--ice-50))}
.storageFailure{margin-bottom:16px;border-left:4px solid #9b5f5f}
.storageNotice{padding:10px 14px;border-radius:10px;background:var(--ice-100);color:var(--ink-950);margin:0 0 16px}
.storageCounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px}
.storageCounts div{display:flex;justify-content:space-between;gap:8px;min-width:0}
.storageCounts span{color:var(--ink-650);overflow-wrap:anywhere}
.storageCounts strong{font-variant-numeric:tabular-nums}
.restoreReview{margin-top:16px;max-width:720px;box-shadow:0 18px 45px rgba(39,67,82,.12)}
.dangerQuiet{border-color:#9b5f5f;color:#7f4545}
.visuallyHidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media (max-width:980px){.storageGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.storageIdentityCard,.betaSupportCard{grid-column:1/-1;grid-row:auto}.storageBackupCard,.storagePortabilityCard,.storageSampleCard,.storageValidationCard{grid-column:auto}.storageUpgrade{grid-template-columns:1fr}.storageUpgrade button{width:auto;justify-self:start}}
@media (max-width:680px){.storageGrid{grid-template-columns:1fr}.storageIdentityCard,.betaSupportCard{grid-column:auto}.storageCard,.storageUpgrade,.storageFailure,.restoreReview{padding:16px}.betaFeedbackForm{grid-template-columns:1fr}.betaFeedbackForm label{grid-column:1}}
@media (max-width:680px){.sampleModeNotice{left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));max-width:none;align-items:stretch;flex-direction:column;gap:8px}.sampleModeNotice button{width:100%}}

/* DS-015 responsive presentation. The application model and record stores remain shared. */
.mobileBottomNav { display: none; }
.productionDashboard { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.productionDashboard div,.timerList article,.temperatureList article { min-width:0; padding:10px; border:1px solid var(--ice-200); border-radius:9px; background:var(--ice-50); }
.productionDashboard span,.timerList span,.temperatureList span,.temperatureList small { display:block; color:var(--ink-500); font-size: var(--type-xs); }
.productionDashboard strong,.timerList strong,.temperatureList strong { display:block; margin-top:4px; color:var(--ink-950); font-size: var(--type-base); }
.timerList,.temperatureList { display:grid; gap:7px; margin-bottom:10px; }
.timerList article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; }
.timerList span { grid-column:1/-1; }
.timerList b { color:var(--glacier-650); font-size: var(--type-xs); }
:focus-visible { outline: 3px solid rgba(68,107,128,.42); outline-offset: 2px; }
@media (hover: none), (pointer: coarse) {
  button, summary, select, input { min-height: 44px; }
  .rowActions { opacity: 1; }
}

@media (max-width: 700px) {
  .libraryHeaderActions { width: 100%; align-items: stretch; flex-direction: column; }
  .ingredientEditor { inset: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); width: 100%; border-radius: 0; }
  .ingredientFormGrid, .roleChoices { grid-template-columns: 1fr; }
  .ingredientGovernanceSummary { grid-template-columns: 1fr; }
  .ingredientGovernanceSummary .wide { grid-column: auto; }
  .ingredientFormGrid .wide { grid-column: auto; }
}
@media (max-width: 860px) {
  html { scroll-padding-top: calc(52px + env(safe-area-inset-top)); }
  .appShell {
    width: 100%; max-width: 100%; min-height: 100dvh;
    grid-template-rows: calc(52px + env(safe-area-inset-top)) 1fr;
    padding-bottom: calc(51px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }
  .appHeader {
    min-width: 0; min-height: 0; height: auto;
    padding: env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
  }
  .brand { gap: 8px; }
  .brandMark { width: 29px; height: 29px; font-size: 14px; }
  .brandText strong { font-size: var(--type-base); }
  .brandText .alphaBadge, .headerActions .iconButton { display: none; }
  .mobileBottomNav {
    position: fixed; z-index: 70; right: 0; bottom: 0; left: 0;
    display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
    padding: 3px max(5px,env(safe-area-inset-right)) calc(3px + env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));
    border-top: 1px solid var(--ice-300); background: rgba(255,255,255,.97);
    box-shadow: 0 -8px 24px rgba(37,63,76,.09); backdrop-filter: blur(14px);
  }
  .mobileBottomNav button {
    min-width: 0; min-height: 44px; display: grid; place-items: center; gap: 1px;
    padding: 3px 2px; border: 0; border-radius: 8px; background: transparent;
    color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-emphasis);
  }
  .mobileBottomNav button span { font-size: 14px; line-height: 1; }
  .mobileBottomNav button.active { color: var(--glacier-650); background: var(--ice-100); }
  .appBody, .mainCanvas { width: 100%; max-width: 100%; min-width: 0; }
  .mainCanvas { overflow-x: clip; }
  .workspaceHeader { gap: 8px; margin-bottom: 10px; }
  .workspaceHeader h1 { margin-top: 2px; font-size: clamp(20px,5.8vw,24px); line-height: 1.12; }
  .workspaceHeader p { margin-top: 3px; font-size: var(--type-sm); }
  .formulaWorkspaceTabs { position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 8; margin-inline: -14px; border-radius: 0; }
  .formulaWorkspaceTabs button { min-height: 44px; }
  .workbenchGrid { display: flex; flex-direction: column; }
  .formulaPanel { order: 1; width: 100%; overflow: visible; }
  .controlPanel { order: 2; width: 100%; }
  .analysisPanel { order: 3; width: 100%; }
  .formulaTable { min-width: 0; display: block; }
  .formulaMobileCards { display: grid; gap: 6px; padding: 7px; background: var(--surface-soft); }
  .formulaMobileCards article {
    position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(98px,34%);
    gap: 4px 8px; min-width: 0; min-height: 92px; padding: 9px 48px 9px 27px;
    border-left: 4px solid var(--ingredient-color); border-radius: var(--radius-md);
    background: var(--ingredient-gradient); box-shadow: 0 1px 0 var(--ice-200); overflow: hidden; cursor: pointer; touch-action: manipulation;
  }
  .formulaMobileCards article:focus-within,
  .formulaMobileCards article.is-selected { outline: 0; background: var(--ingredient-gradient); box-shadow: inset 0 0 0 2px var(--glacier-500); }
  .formulaMobileCards .mobileCardIdentity { grid-column: 1; grid-row: 1; min-width: 0; }
  .formulaMobileCards .massEditor { position: relative; grid-column: 2; grid-row: 1; min-height: 44px; display: grid; background: transparent; }
  .formulaMobileCards .massEditor input {
    position: relative; inset: auto; z-index: 1; grid-area: 1 / 1; width: 100%; height: 44px; min-height: 44px;
    box-sizing: border-box; padding: 0 31px 0 4px; background: transparent;
  }
  .formulaMobileCards .massEditor span { position: relative; z-index: 2; grid-area: 1 / 1; justify-self: end; width: 27px; height: 44px; background: transparent; }
  .formulaMobileCards [data-percent-id] { grid-column: 2; grid-row: 2; text-align: right; color: var(--ink-500); }
  .formulaMobileCards .mobileCardCategory, .formulaMobileCards .notesCell { grid-column: 1; }
  .formulaMobileCards .mobileCardIdentity, .formulaMobileCards [data-percent-id],
  .formulaMobileCards .mobileCardCategory, .formulaMobileCards .notesCell { position: relative; z-index: 2; pointer-events: none; }
  .formulaMobileCards .rowActions { position: absolute; z-index: 3; right: 4px; bottom: 4px; pointer-events: auto; }
  .formulaTable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .formulaTable tbody { display: grid; gap: 6px; padding: 7px; }
  .formulaTable tr {
    position: relative;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(98px,34%);
    gap: 4px 8px; min-width: 0; padding: 9px; border: 1px solid var(--ice-200);
    border: 0; border-left: 4px solid var(--ingredient-color); border-radius: var(--radius-md);
    background: var(--ingredient-gradient); box-shadow: 0 1px 0 var(--ice-200);
  }
  .formulaTable td { display: block; width: auto; height: auto; padding: 0; border: 0; background: transparent!important; }
  .formulaTable td:first-child { min-width: 0; padding-left: 19px; }
  .formulaTable td:first-child .openIngredientProfile { display: block; min-width: 0; max-width: 100%; }
  .formulaTable td:first-child .ingredientName { white-space: normal; overflow-wrap: anywhere; }
  .formulaTable td:nth-child(2) { grid-column: 2; grid-row: 1; align-self: center; min-height: 44px; }
  .formulaTable td:nth-child(3) { grid-column: 2; text-align: right; color: var(--ink-500); }
  .formulaTable td:nth-child(4), .formulaTable td:nth-child(5) { grid-column: 1; }
  .formulaTable td:last-child { position: absolute; right: 4px; bottom: 4px; }
  .formulaTable tbody tr:not(.is-selected):not(:focus-within):hover { background: var(--ingredient-gradient); filter:brightness(.985); }
  .formulaTable tbody tr:focus-within,
  .formulaTable tbody tr.is-mass-active,
  .formulaTable tbody tr.is-linked,
  .formulaTable tbody tr.is-selected { outline: 0; background: var(--ingredient-gradient); box-shadow: inset 0 0 0 2px var(--glacier-500); }
  .formulaTable tbody tr:focus-within > td,
  .formulaTable tbody tr:focus-within > td:first-child,
  .formulaTable tbody tr:focus-within > td:last-child { box-shadow: none; }
  .ingredientName { font-size: var(--type-base); line-height: 1.25; }
  .ingredientCode { margin-top: 1px; font-size: var(--type-xs); }
  .categoryTag { padding: 2px 6px; font-size: var(--type-xs); }
  .notesCell { font-size: var(--type-xs); }
  .rowGrip { left: -10px; width: 28px; height: 44px; }
  .massEditor { position: relative; width: 100%; min-height: 44px; display: grid; overflow: hidden; border-color: transparent; background: transparent; box-shadow: none; }
  .massEditor input { position: relative; inset: auto; z-index: 2; grid-area: 1 / 1; display: block; width: 100%; height: 44px; min-height: 44px; padding-right: 31px; font-size: 16px; /* iOS zoom-on-focus floor — touch scope only */ font-weight: var(--weight-heading); }
  .massEditor span { position: relative; z-index: 3; grid-area: 1 / 1; justify-self: end; width: 27px; font-size: var(--type-xs); pointer-events: none; }
  .rowActions { justify-content: flex-end; gap: 4px; opacity: 1; }
  .removeButton { width: 40px; height: 40px; }
  .addIngredientBar {
    position: sticky; bottom: env(safe-area-inset-bottom); z-index: 7;
    padding: 7px; background: rgba(255,255,255,.95); backdrop-filter: blur(10px);
  }
  .openIngredientPicker { min-height: 44px; height: 44px; font-size: var(--type-base); }
  .controlPanelBody { max-height: none; overflow: visible; }
  .controlSection summary, .controlButton { min-height: 46px; }
  .analysisSnapshotGrid { grid-template-columns: 1fr 1fr; }
  .analysisMetric { min-height: 96px; }
  .analysisTabs { min-height: 68px; padding: 8px 12px 12px; scroll-padding-inline: 12px; }
  .analysisTabs button { min-height: 44px; }
  .ingredientPickerBackdrop { align-items: end; padding: 0; }
  .ingredientPickerModal {
    width: 100vw; max-width: none; height: min(92dvh,900px); max-height: 92dvh;
    border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom);
  }
  .pickerSearch input { min-height: 48px; font-size: 16px; /* iOS zoom-on-focus floor */ }
  .ingredientPickerResult { min-height: 62px; }
  .historyWorkspace { display: block; }
  .productionDashboard { grid-template-columns:1fr 1fr; }
  .historyIndex { margin-bottom: 12px; }
  .historyList { max-height: min(34dvh,310px); }
  .historyDetail table { min-width: 0; }
  .historyDetail .tableScroller { overflow: visible; }
  .versionComparison table, .versionDetail section table, .comparisonTable, .plannedActualTable { display: block; }
  .versionComparison thead, .versionDetail section table thead, .comparisonTable thead, .plannedActualTable thead { display: none; }
  .versionComparison tbody, .versionDetail section table tbody, .comparisonTable tbody, .plannedActualTable tbody { display: grid; gap: 8px; }
  .versionComparison tr, .versionDetail section table tr, .comparisonTable tr, .plannedActualTable tr {
    display: grid; gap: 5px; padding: 11px; border: 1px solid var(--ice-200);
    border-radius: 10px; background: var(--surface);
  }
  .historyDetail table td, .historyDetail table th {
    display: grid; grid-template-columns: minmax(92px,.7fr) minmax(0,1fr);
    min-width: 0; padding: 4px 0; border: 0; overflow-wrap: anywhere;
  }
  .versionComparison td:nth-child(1)::before { content: "Change"; }
  .versionComparison td:nth-child(2)::before { content: "Property"; }
  .versionComparison td:nth-child(3)::before { content: "Difference"; }
  .versionDetail section table td:nth-child(1)::before { content: "Ingredient"; }
  .versionDetail section table td:nth-child(2)::before { content: "Mass"; }
  .versionDetail section table td:nth-child(3)::before { content: "Library ID"; }
  .plannedActualTable td:nth-child(1)::before { content: "Ingredient"; }
  .plannedActualTable td:nth-child(2)::before { content: "Planned"; }
  .plannedActualTable td:nth-child(3)::before { content: "Actual"; }
  .plannedActualTable td:nth-child(4)::before { content: "Difference"; }
  .plannedActualTable td:nth-child(5)::before { content: "Deviation"; }
  .historyDetail table td::before, .historyDetail table th::before {
    color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); text-transform: uppercase;
  }
  .historyDetail td input { min-width: 0; min-height: 44px; font-size: 16px; }
  .historyActions button, .historyDialogActions button, .historyDetail form > button,
  .newEvaluation form > button, [data-calculate-overrun] { min-height: 44px; }
  .historyModalBackdrop { align-items: end; padding: 0; }
  .historyModal {
    width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .variantGrid, .comparisonContexts { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .mainCanvas { padding: 8px; }
  .workspaceHeader p, .contextStrip { display: none; }
  .workspaceHeader .eyebrow { font-size: var(--type-xs); }
  .workspaceHeader h1 { font-size: var(--type-xl); }
  .formulaWorkspaceTabs { top: calc(52px + env(safe-area-inset-top)); margin-inline: -8px; }
  .formulaPanel .panelHeader { padding: 11px 12px 9px; }
  .formulaPanel .panelHeader h2 { font-size: var(--type-base); }
  .formulaTable tbody { padding: 6px; }
  .formulaTable tr { grid-template-columns: minmax(0,1fr) minmax(94px,34%); padding: 8px 48px 8px 8px; }
  .formulaTable td:nth-child(5) { display: none; }
  .formulaMobileCards .notesCell { display: none; }
  .analysisSnapshotGrid, .analysisCompositionCards { grid-template-columns: 1fr; }
  .historyDetail { padding: 12px; }
  .historyActions { display: grid; }
}

@media (hover: none), (pointer: coarse) {
  .formulaTable tbody tr:hover:not(:focus-within):not(.is-selected) { background: var(--surface); }
  .formulaTable tbody tr:focus-within { background: var(--ingredient-tint); }
  .formulaTable tbody tr:hover > td { background: transparent; }
  .formulaTable tbody tr:hover .rowGrip { opacity: 0; }
  .rowGrip:hover { background: transparent; color: var(--ink-500); }
}
.canonCoverage{border:1px solid var(--ice-200);border-radius:12px;padding:12px;background:var(--surface)}
.canonCoverage summary{cursor:pointer;font-weight: var(--weight-heading)}.canonCoverage ul{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.canonCoverage li{display:grid;grid-template-columns:1fr auto;gap:2px 12px}.canonCoverage li small{grid-column:1/-1;color:var(--ink-500)}
.canonCoverage p{margin:8px 0 0;color:var(--ink-500);font-size: var(--type-base)}
.targetProfileField small,.targetProfileField details{color:var(--ink-500);line-height:1.45}
.targetProfileNotice,.targetProfileEvaluation{border:1px solid var(--ice-200);border-radius:12px;padding:14px;background:var(--surface)}
.targetProfileNotice ul{display:grid;gap:8px;padding:0;list-style:none}.targetProfileNotice li{display:grid;gap:2px}
.targetEvaluationBoundary{max-width:76ch;margin:10px 0 0;color:var(--ink-500);font-size: var(--type-base);line-height:1.45}
.targetEvaluationGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:12px;margin-top:12px}
.targetComparison{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:12px;min-width:0;margin-top:12px}
.targetEvaluation,.targetComparison article{min-width:0;border:1px solid var(--ice-200);border-left:4px solid var(--ice-400);border-radius:var(--radius-md);padding:14px 14px 14px 12px;background:linear-gradient(135deg,var(--ice-50),var(--surface))}
.targetEvaluation.severity--watch{border-left-color:#a5852d}.targetEvaluation.severity--caution{border-left-color:#b76832}.targetEvaluation.severity--critical{border-left-color:#a43d3d}
.targetEvaluation{display:flex;flex-direction:column;align-items:stretch;gap:10px;max-width:100%;overflow-wrap:anywhere}.targetEvaluation header{display:grid;gap:7px;min-width:0}.targetEvaluation h4{margin:0;color:var(--ink-950);font-size: var(--type-base);font-weight: var(--weight-heading);line-height:1.28}.targetEvaluationStatus{display:flex;align-items:flex-start;gap:5px;min-width:0;color:var(--ink-650);font-size: var(--type-xs);font-weight: var(--weight-emphasis);line-height:1.35}.targetEvaluationStatus i{display:grid;place-items:center;flex:0 0 14px;width:14px;height:14px;border:1px solid currentColor;border-radius:50%;font-style:normal;font-size: var(--type-xs);line-height:1}.targetEvaluationValue{display:grid;gap:1px}.targetEvaluationValue span,.targetEvaluation dt{color:var(--ink-500);font-size: var(--type-xs);text-transform:uppercase;letter-spacing: var(--track-label)}.targetEvaluationValue strong{color:var(--ink-950);font-size: var(--type-xl);font-weight: var(--weight-heading);font-variant-numeric:tabular-nums;line-height:1.1}.targetEvaluation dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding-top:9px;border-top:1px solid var(--ice-150)}.targetEvaluation dd{margin:3px 0 0;color:var(--ink-800);font-size: var(--type-sm);font-weight: var(--weight-emphasis);line-height:1.35}.targetEvaluationRange{min-width:0;padding-block:2px}.targetEvaluationTrack{position:relative;height:8px;border-radius:999px;background:var(--ice-150)}.targetEvaluationExtended,.targetEvaluationPreferred{position:absolute;inset-block:2px;left:var(--range-start);right:calc(100% - var(--range-end));border-radius:999px}.targetEvaluationExtended{background:var(--ice-300)}.targetEvaluationPreferred{inset-block:1px;background:var(--glacier-300)}.targetEvaluationTrack>i{position:absolute;top:50%;left:var(--range-position);width:8px;height:8px;border:2px solid var(--surface);border-radius:50%;background:var(--glacier-750);box-shadow:0 0 0 1px var(--glacier-750);transform:translate(-50%,-50%)}.targetEvaluationMeta{margin-top:auto;padding-top:8px;border-top:1px solid var(--ice-150)}.targetEvaluationMeta summary{cursor:pointer;color:var(--ink-500);font-size: var(--type-xs);font-weight: var(--weight-emphasis);line-height:1.4}.targetEvaluationMeta>div{display:grid;gap:6px;padding-top:8px}.targetEvaluationMeta p,.targetEvaluationMeta small{margin:0;color:var(--ink-500);font-size: var(--type-xs);line-height:1.45}
.targetComparisonSelect{display:grid;gap:6px;width:min(100%,520px);margin-top:14px;font-weight: var(--weight-heading)}.targetComparisonSelect select{width:100%;min-height:40px;padding:8px 36px 8px 12px;border:1px solid var(--ice-200);border-radius:var(--radius-md);outline:0;background-color:var(--ice-50);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235e8295' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 L6 6.5 L11 1.5'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;box-shadow:0 1px 2px rgba(31,53,63,.04);color:var(--ink-800);font:inherit;font-size:var(--type-sm);appearance:none;-webkit-appearance:none}.targetComparisonSelect select:focus-visible{border-color:var(--glacier-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--glacier-400) 18%,transparent)}
.targetComparison article{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;max-width:100%}.targetComparison h4{margin:0;color:var(--ink-950);font-size: var(--type-base);font-weight: var(--weight-heading);line-height:1.28;overflow-wrap:anywhere}.targetComparisonFormula{display:grid;gap:2px;margin:10px 0 12px}.targetComparisonFormula span{color:var(--ink-500);font-size: var(--type-xs);text-transform:uppercase}.targetComparisonFormula strong{color:var(--ink-950);font-size: var(--type-lg);font-variant-numeric:tabular-nums}.targetComparison article>div{display:grid;gap:3px;min-width:0;padding-top:9px;border-top:1px solid var(--ice-150)}.targetComparison article>div+div{margin-top:9px}.targetComparison b{color:var(--ink-650);font-size: var(--type-xs);line-height:1.35;overflow-wrap:anywhere}.targetComparison small{color:var(--ink-500);font-size: var(--type-xs);line-height:1.4;overflow-wrap:anywhere}
.targetOverrideEditor{margin-top:8px}.targetOverrideEditor label{display:grid;gap:4px;margin:8px 0}.targetOverrideEditor input,.targetOverrideEditor select,.targetOverrideEditor textarea,.targetOverrideEditor button{min-height:44px;font-size:16px}.targetOverrideEditor ul{display:grid;gap:7px;padding:0;list-style:none}.targetOverrideEditor li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center}.targetOverrideEditor li small{grid-column:1/2}.targetOverrideEditor li button{grid-column:2;grid-row:1/3}
@media (max-width:1180px){.targetEvaluationGrid,.targetComparison{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.targetEvaluationGrid,.targetComparison{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.targetEvaluationGrid,.targetComparison{grid-template-columns:1fr}.targetProfileEvaluation{padding:11px}.targetEvaluationMeta summary{min-height:44px;display:flex;align-items:center}}
/* Batch planner — form + review layout for creating a batch from a formula. */
.batchPlanner { display: grid; align-content: start; gap: 14px; }
.batchPlanner > .workspaceHeader { margin-bottom: 0; }
.batchPlanForm { width: min(100%, 1160px); }
.batchPlanForm .panelHeader { padding: 15px 20px 13px; }
.batchPlanForm .panelBody { display: grid; gap: 16px; padding: 18px 20px 20px; }
.batchPlanFields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.batchPlanFields label,
.batchPlanOperations label,
.batchPlanNotes { display: grid; align-content: start; gap: 6px; min-width: 0; color: var(--ink-800); font-weight: var(--weight-heading); }
.batchPlanFields input,
.batchPlanFields select,
.batchPlanOperations select,
.batchPlanForm textarea { width: 100%; min-width: 0; height: 44px; min-height: 44px; padding: 9px 11px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-950); font: inherit; font-size: var(--type-base); }
.batchPlanFields input:focus-visible,
.batchPlanFields select:focus-visible,
.batchPlanOperations select:focus-visible,
.batchPlanForm textarea:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 1px; }
.batchPlanOperations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; padding-top: 16px; border-top: 1px solid var(--ice-200); }
.batchPlanOperations select[multiple] { height: 112px; min-height: 112px; padding: 5px; }
.batchPlanOperationDetails { display: grid; gap: 12px; }
.batchPlanForm textarea { height: auto; resize: vertical; line-height: 1.4; }
.batchPlanOperationDetails textarea { min-height: 68px; }
.batchPlanNotes textarea { min-height: 80px; }
.batchPlanActions { display: flex; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--ice-200); }
.batchPlanActions .controlButton { flex: 0 0 170px; width: 170px; min-height: 42px; margin-top: 0; }
@media (max-width: 1100px) { .batchPlanFields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.batchPlanReview dl { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.batchPlanReview dl div { padding: 10px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); }
.batchPlanReview dt { color: var(--ink-500); font-size: var(--type-base); }
.batchPlanReview dd { margin: 4px 0; font-weight: var(--weight-heading); }
.batchPlanReview td small { display: block; color: var(--warning); }
.batchPlanRun { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ice-200); }
.batchPlanner :is([data-return-formula],[data-save-before-plan],[data-start-plan],[data-print-plan]) { min-height: 36px; padding: 0 14px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--glacier-750); font: inherit; font-size: var(--type-sm); font-weight: var(--weight-emphasis); cursor: pointer; }
.batchPlanner :is([data-save-before-plan],[data-start-plan]) { border-color: var(--glacier-650); background: var(--glacier-650); color: white; }
.batchPlanner :is([data-return-formula],[data-save-before-plan],[data-start-plan],[data-print-plan]):hover { border-color: var(--glacier-500); }
.batchPlanner :is([data-return-formula],[data-save-before-plan],[data-start-plan],[data-print-plan]):focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
@media (max-width: 620px) {
  .batchPlanFields,
  .batchPlanOperations,
  .batchPlanReview dl { grid-template-columns: 1fr; }
  .batchPlanForm .panelBody { padding: 14px; }
  .batchPlanActions .controlButton { flex: 1 1 auto; width: 100%; }
  .batchPlanReview .tableScroller { overflow: auto; }
  .batchPlanRun { grid-template-columns: 1fr auto; }
  .batchPlanRun button { grid-column: 1 / -1; min-height: 44px; }
}
@media print{.appHeader,.primaryNavigation,.workspaceHeader button,.batchPlanForm,.batchPlanRun button,[data-print-plan]{display:none!important}.batchPlanner{padding:0}.batchPlanReview{box-shadow:none;border:0}}
/* === Operations workspace — base + index panel (Phase 5 · typography pass) ===
   Type: --type-* / --weight-* / --track-* tokens only. Scoped base so the canvas
   stops inheriting the 16px browser default while the rest of the app migrates. */
.operationsCanvas {
  display: grid;
  gap: 16px;
  font-size: var(--type-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}

/* Workspace header, scoped — global .workspaceHeader migrates in the full sweep */
.operationsCanvas > .workspaceHeader .eyebrow {
  font-size: var(--type-xs);
  font-weight: var(--weight-kicker);
  letter-spacing: var(--track-label);
  color: var(--ink-500);
}
.operationsCanvas > .workspaceHeader h1 {
  margin: 4px 0 0;
  font-size: var(--type-2xl);
  font-weight: var(--weight-heading);
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
}
.operationsCanvas > .workspaceHeader p {
  margin: 5px 0 0;
  color: var(--ink-500);
  font-size: var(--type-base);
  line-height: var(--leading-body);
}
.operationsCanvas > .workspaceHeader .workspaceAction {
  font-size: var(--type-base);
  font-weight: var(--weight-emphasis);
}

/* Detail panel header (record title + kicker pill) */
.operationsDetail > .panelHeader h2,
.operationsDetail > form > .panelHeader h2 {
  font-size: var(--type-md);
  font-weight: var(--weight-heading);
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
}
.operationsDetail > .panelHeader p,
.operationsDetail > form > .panelHeader p {
  color: var(--ink-500);
  font-size: var(--type-base);
  line-height: var(--leading-body);
}

/* Tabs — pill switch between Equipment and Process Profiles */
.operationsTabs { display: flex; gap: 8px; }
.operationsTabs button {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--ice-300);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-650);
  font-size: var(--type-base);
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-body);
  line-height: 1;
}
.operationsTabs button:hover { border-color: var(--glacier-500); color: var(--ink-950); }
.operationsTabs button.active {
  background: var(--ice-100);
  border-color: var(--ice-400);
  color: var(--ink-950);
  font-weight: var(--weight-heading);
}
.operationsTabs button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }

.operationsGrid { display: grid; grid-template-columns: minmax(240px, 30%) minmax(0, 1fr); gap: 16px; }

/* Index panel — search, filters, list */
.operationsIndex { padding: 14px; align-self: start; }
.operationsIndex > label {
  display: grid;
  gap: 6px;
  color: var(--ink-650);
  font-size: var(--type-sm);
  font-weight: var(--weight-emphasis);
}
.operationsFilters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.operationsFilters > select { min-width: 0; width: 100%; }

.operationsIndex input,
.operationsIndex select,
.operationsFormGrid input,
.operationsFormGrid select,
.operationsFormGrid textarea,
.actualEquipmentChange input,
.actualEquipmentChange select {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--ice-300);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-950);
  font: inherit;
  font-size: var(--type-base);
  font-weight: var(--weight-body);
  outline: none;
}
.operationsIndex input::placeholder { color: var(--ink-400); }
.operationsIndex input:focus-visible,
.operationsIndex select:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 1px; border-color: var(--glacier-500); }
.operationsIndex select,
.operationsFormGrid select,
.actualEquipmentChange select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 30px 0 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235e8295' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
}

/* List rows: name / meta / detail on three type steps */
.operationsList { display: grid; gap: 6px; max-height: 62dvh; overflow: auto; }
.operationsList button {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-950);
  text-align: left;
  overflow: hidden;
}
.operationsList button > strong,
.operationsList button > span,
.operationsList button > small { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.operationsList button > strong { font-size: var(--type-base); font-weight: var(--weight-emphasis); line-height: var(--leading-tight); }
.operationsList button > span { color: var(--ink-650); font-size: var(--type-sm); }
.operationsList button > small { color: var(--ink-500); font-size: var(--type-xs); }
.operationsList button:hover { background: var(--ice-50); }
.operationsList button.active { border-color: var(--ice-400); background: var(--ice-100); }
.operationsList button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: -2px; }

/* Empty state — matches .historyEmpty rhythm */
.operationsList > p {
  margin: 0;
  padding: 22px 14px;
  border: 1px dashed var(--ice-300);
  border-radius: 10px;
  color: var(--ink-650);
  font-size: var(--type-sm);
  line-height: var(--leading-body);
  text-align: center;
}

.operationsDetail { min-width: 0; }

/* Legacy generic form grid (still used by actual-equipment-change) */
.operationsFormGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.operationsFormGrid > label,
.operationsFormGrid fieldset label { display: grid; gap: 5px; color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.operationsFormGrid fieldset,
.operationsFormGrid .spanAll { grid-column: 1 / -1; }
.operationsFormGrid fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ice-200);
  border-radius: 12px;
}

/* Detail sections */
.operationsSections { display: grid; gap: 14px; }
.operationsSections section,
.processStageEditor { padding: 13px; border: 1px solid var(--ice-200); border-radius: 12px; background: var(--surface-soft); }
.operationsSections dl,
.processComparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.operationsSections dt,
.processComparison dt { color: var(--ink-500); font-size: var(--type-xs); }
.operationsSections dd,
.processComparison dd { margin: 3px 0; }
.processStageList,
.processStageEditors { display: grid; gap: 10px; }
.processStageEditor { display: grid; gap: 10px; }
.plannedStageContext { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--ice-200); border-radius: 10px; background: var(--ice-50); }
.plannedStageContext dl,
.actualEquipmentChange { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.actualEquipmentChange label { display: grid; gap: 5px; }
.processCheckpointList { display: grid; gap: 7px; }

/* === Phase 1 visual-language migration (see docs/VISUAL-LANGUAGE-REFERENCE.md) ===
   Applies the state-accented card + micro-label pattern to Operations. */

/* Card container: white surface, accent stripe, soft shadow */
.operationsSections > section,
.operationsSections > .operationsCard,
.plannedStageCards > article {
  background: color-mix(in srgb, var(--surface) 80%, var(--ice-50));
  border: 1px solid var(--ice-200);
  border-left: 3px solid var(--glacier-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 14px;
}

/* State variants — apply via class="operationsCard state--needs-validation" etc. */
.operationsSections > .state--needs-validation,
.plannedStageCards > .state--needs-validation { border-left-color: var(--warning); }
.operationsSections > .state--insufficient-data,
.plannedStageCards > .state--insufficient-data { border-left-color: var(--ice-300); }
.operationsSections > .state--archived,
.plannedStageCards > .state--archived { border-left-color: var(--ink-500); opacity: .78; }

/* Section heading: retain size, tighten spacing.
 * Two shapes supported:
 *   1) bare  <section><h3>Title</h3>...          (Process Profiles workspace)
 *   2) eyebrow <section><header><div><span class="panelKicker">Eyebrow</span><h3>Title</h3></div></header>...
 *      (Equipment workspace — matches ingredient-profile section rhythm) */
.operationsSections > section > h3,
.operationsSections > section > header h3,
.operationsSections > .operationsCard > h3,
.operationsSections > .operationsCard > header h3 {
  margin: 0 0 12px;
  font-size: var(--type-md);
  font-weight: var(--weight-heading);
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
}

/* Eyebrow + title cluster inside section header */
.operationsSections > section > header,
.operationsSections > .operationsCard > header {
  margin-bottom: 12px;
}
.operationsSections > section > header h3,
.operationsSections > .operationsCard > header h3 {
  margin: 3px 0 0;
}

/* Micro-labels: uppercase letter-spaced (Formula Bench signature) */
.operationsSections dt,
.plannedStageCards dt {
  color: var(--ink-500);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: var(--weight-heading);
  line-height: 1.4;
}

/* Values on nested ice-50 tiles — the depth stack */
.operationsSections dl > div,
.plannedStageCards dl > div {
  padding: 9px 10px;
  border: 1px solid var(--ice-200);
  border-radius: var(--radius-sm);
  background: var(--ice-50);
}
.operationsSections dd,
.plannedStageCards dd {
  margin: 4px 0 0;
  font-size: var(--type-base);
  font-weight: var(--weight-emphasis);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--ink-950);
}

/* Body copy inside cards: quieter than dd */
.operationsSections > section > p,
.operationsSections > .operationsCard > p,
.plannedStageCards > article > p {
  margin: 10px 0 0;
  color: var(--ink-650);
  font-size: var(--type-base);
  line-height: var(--leading-body);
}

/* Planned stage card header: label + status on opposite ends */
.plannedStageCards > article > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.plannedStageCards > article > header strong {
  font-size: var(--type-base);
  font-weight: var(--weight-emphasis);
}
.plannedStageCards > article > header span {
  color: var(--ink-500);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: var(--weight-heading);
}

/* Kicker in Operations panel header becomes a status pill */
.operationsDetail > .panelHeader .panelKicker,
.operationsDetail > form > .panelHeader .panelKicker {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ice-150);
  color: var(--ink-650);
  font-size: var(--type-xs);
  letter-spacing: var(--track-label);
  font-weight: var(--weight-kicker);
}

/* History-style action row: give the buttons real weight */
.operationsDetail .historyActions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.operationsDetail .historyActions button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--ice-300);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-650);
  font-size: var(--type-base);
  font-weight: var(--weight-emphasis);
}
.operationsDetail .historyActions button:hover {
  border-color: var(--glacier-500);
  color: var(--ink-950);
}

/* Mobile: keep the cards but relax the dl grid — inherits from operations media rule */

/* === end Phase 1 === */

@media(max-width:760px){.operationsGrid{grid-template-columns:1fr}.operationsList{max-height:30dvh}.operationsFormGrid,.operationsFormGrid fieldset,.plannedStageContext dl,.actualEquipmentChange,.operationsSections dl,.processComparison{grid-template-columns:1fr}.operationsTabs button{flex:1;min-height:44px}}
.batchExecutionControls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid var(--ice-200);border-radius:12px;background:var(--surface-soft)}.batchExecutionControls>div{display:grid;gap:3px}.batchExecutionControls span{color:var(--ink-500)}.batchExecutionControls button,.stageObservationForm button,.stageDeviationForm button,.completionOffers button{min-height:36px}.isBatchPaused{border-color:#a5852d}.executionGuidance{display:grid;gap:12px;padding:14px;border:1px solid var(--ice-200);border-radius:12px;background:var(--ice-50)}.executionGuidance>header{display:flex;justify-content:space-between;align-items:start}.executionGuidance>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.executionGuidance article{display:grid;gap:5px;padding:11px;border:1px solid var(--ice-200);border-radius:10px;background:var(--surface)}.executionGuidance article>span{font-size: var(--type-sm);font-weight: var(--weight-heading);color:var(--ink-500)}.executionGuidance h3,.executionGuidance p{margin:0}.processCheckpointList>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.4fr) minmax(160px,.6fr);gap:8px;align-items:center}.processCheckpointList select,.processCheckpointList input,.stageObservationForm input,.stageObservationForm select,.stageDeviationForm input,.stageDeviationForm select,.stageDeviationForm textarea{min-height:40px;font-size:var(--type-base)}.stageObservationForm,.stageDeviationForm{display:grid;grid-template-columns:minmax(130px,.35fr) minmax(0,1fr) auto;gap:8px;align-items:end;padding:11px;border:1px solid var(--ice-200);border-radius:10px}.stageObservationForm label,.stageDeviationForm label{display:grid;gap:4px;color:var(--ink-650);font-size:var(--type-sm);font-weight:var(--weight-emphasis)}.stageDeviationForm{grid-template-columns:minmax(130px,.3fr) minmax(140px,.4fr) minmax(0,1fr) auto}.executionRecordLists{display:grid;grid-template-columns:1fr 1fr;gap:14px}.executionRecordLists>div{padding:14px;border:1px solid var(--ice-200);border-radius:12px}.executionRecordLists article{display:grid;gap:3px;padding:9px 0;border-top:1px solid var(--ice-200)}.executionRecordLists article span{color:var(--ink-500);font-size: var(--type-base)}.completionOffers{padding:14px;border:1px solid var(--ice-200);border-radius:12px}.completionOffers>div{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:700px){.executionGuidance>div,.executionRecordLists{grid-template-columns:1fr}.batchExecutionControls{align-items:stretch;flex-direction:column}.processCheckpointList>div,.stageObservationForm,.stageDeviationForm{grid-template-columns:1fr}.completionOffers>div{display:grid}.completionOffers button{width:100%}}
.productionTimer details{grid-column:1/-1}.productionTimer details form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;padding-top:8px}.productionTimer details label{display:grid;gap:4px}.productionTimer details input,.productionTimer details button{min-height:44px;font-size:16px}@media(max-width:700px){.productionTimer details form{grid-template-columns:1fr}}
.batchSessionProgress{display:grid;gap:14px;padding:16px;border:1px solid var(--ice-200);border-radius:12px;background:var(--surface-soft)}.batchSessionProgress>header{display:flex;justify-content:space-between;gap:12px;align-items:start}.batchSessionProgress h2,.batchSessionProgress p{margin:0}.batchSessionProgress p,.batchSessionNotes small{color:var(--ink-500)}.batchSessionChecklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.batchSessionChecklist label{display:flex;align-items:center;gap:9px;min-height:44px;padding:9px 11px;border:1px solid var(--ice-200);border-radius:10px;background:var(--surface)}.batchSessionChecklist input{width:20px;height:20px}.batchSessionChecklist small{display:block;color:var(--ink-500)}.batchSessionNotes{display:grid;gap:6px;font-weight: var(--weight-heading)}.batchSessionNotes textarea{min-height:96px;padding:11px;border:1px solid var(--ice-200);border-radius:10px;background:var(--surface);font:inherit;font-size:16px;resize:vertical}@media(max-width:700px){.batchSessionChecklist{grid-template-columns:1fr}}
.productionRecipeReference{display:grid;gap:12px;padding:14px;border:1px solid var(--ice-200);border-radius:12px;background:var(--surface-soft)}.productionRecipeReference>header{display:flex;justify-content:space-between;gap:12px;align-items:start}.productionRecipeReference h2,.productionRecipeReference dl,.productionRecipeReference ol{margin:0}.productionRecipeReference dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.productionRecipeReference dl div,.productionRecipeReference li{padding:9px 10px;border:1px solid var(--ice-200);border-radius:9px;background:var(--surface)}.productionRecipeReference dt{color:var(--ink-500);font-size: var(--type-base)}.productionRecipeReference dd{margin:3px 0 0;font-weight: var(--weight-heading)}.productionRecipeReference ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0;list-style:none}.productionRecipeReference li{display:flex;justify-content:space-between;gap:8px}.productionSessionNotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.productionSessionNotes>header{grid-column:1/-1}.productionSessionNotes h3{margin:0}.productionSessionNotes small{color:var(--ink-500)}.productionSessionNotes label{display:grid;gap:6px;font-weight: var(--weight-heading)}.productionSessionNotes textarea{min-height:96px;padding:10px;border:1px solid var(--ice-200);border-radius:9px;background:var(--surface);font:inherit;font-size:16px;resize:vertical}@media(max-width:700px){.productionRecipeReference dl,.productionRecipeReference ol,.productionSessionNotes{grid-template-columns:1fr}.productionRecipeReference>header{align-items:start}}
.productionStatistics,.productionTimeline,.productionCriticalLog{display:grid;gap:14px;margin:0 18px 18px;padding:16px;border:1px solid var(--ice-200);border-radius:12px;background:var(--surface-soft)}.productionStatistics>header,.productionTimeline>header,.productionCriticalLog>header{display:flex;justify-content:space-between;align-items:start;gap:12px}.productionStatistics h2,.productionTimeline h2,.productionCriticalLog h2,.productionTimeline p,.productionCriticalLog p{margin:0}.productionTimeline p,.productionCriticalLog header p{color:var(--ink-500)}.productionStatistics>dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}.productionStatistics dl div,.productionChurnLog dl div{padding:10px;border:1px solid var(--ice-200);border-radius:9px;background:var(--surface)}.productionStatistics dt,.productionChurnLog dt{color:var(--ink-500);font-size: var(--type-base)}.productionStatistics dd,.productionChurnLog dd{margin:4px 0 0;font-weight: var(--weight-heading)}.productionTimeline ol{display:grid;gap:7px;margin:0;padding:0;list-style:none}.productionTimeline li{display:grid;grid-template-columns:auto minmax(150px,1fr) minmax(190px,.7fr) auto;gap:10px;align-items:center;padding:9px;border:1px solid var(--ice-200);border-radius:10px;background:var(--surface)}.timelineIndicator{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ice-300);border-radius:50%;color:var(--ink-500);font-weight: var(--weight-kicker)}.productionTimeline li.isRecorded .timelineIndicator{background:var(--glacier-650);color:white}.productionTimeline li>div{display:grid;gap:3px}.productionTimeline small{color:var(--ink-500)}.productionTimeline input,.productionTimeline button,.productionTemperatureLog input,.productionChurnLog input,.productionChurnLog select,.productionOverrunLog input{min-height:44px;font-size:16px}.productionCriticalLog{gap:18px}.productionTemperatureLog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.productionTemperatureLog label,.productionOverrunLog label{display:grid;gap:5px;font-weight: var(--weight-heading)}.productionTemperatureLog label>span:last-child,.productionOverrunLog label>span:last-child{display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid var(--ice-200);border-radius:9px;background:var(--surface);overflow:hidden}.productionTemperatureLog input,.productionOverrunLog input{min-width:0;border:0;background:transparent;padding:8px}.productionTemperatureLog small,.productionChurnLog,.productionOverrunLog{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--ice-200)}.productionChurnLog h3,.productionOverrunLog h3{margin:0}.productionChurnLog dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}.productionChurnLog>div,.productionOverrunLog>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.productionChurnLog label{display:grid;gap:5px;font-weight: var(--weight-heading)}.productionOverrunLog>div{grid-template-columns:repeat(3,minmax(0,1fr))}.productionCriticalLogError{min-height:1em;color:var(--danger,#9c3f3f)}.isHidden{display:none!important}@media(max-width:760px){.productionStatistics,.productionTimeline,.productionCriticalLog{margin-inline:12px;padding:12px}.productionStatistics>dl,.productionTemperatureLog{grid-template-columns:1fr 1fr}.productionTimeline li{grid-template-columns:auto 1fr}.productionTimeline input,.productionTimeline button{grid-column:2}.productionChurnLog dl,.productionChurnLog>div,.productionOverrunLog>div{grid-template-columns:1fr}}@media(max-width:480px){.productionStatistics>dl,.productionTemperatureLog{grid-template-columns:1fr}}

/* Production reuses the Formula Bench surface and ingredient-card language. */
.ingredientCardShell{--ingredient-card-radius:var(--radius-md);--ingredient-card-surface:var(--surface);border-radius:var(--ingredient-card-radius);touch-action:manipulation}
.openIngredientProfile{appearance:none;border:0;padding:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.openIngredientProfile:hover .ingredientName,.openIngredientProfile:focus-visible .ingredientName{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.openIngredientProfile:focus-visible{outline:2px solid var(--glacier-500);outline-offset:3px;border-radius:var(--radius-xs)}
.ingredientCardShell.ingredientCard--production,.formulaMobileCards .ingredientCardShell{position:relative;overflow:hidden;border-left:4px solid var(--ingredient-color);background:var(--ingredient-gradient);box-shadow:0 1px 0 var(--ice-200);transition:filter .12s ease,box-shadow .12s ease,border-color .12s ease}
.ingredientCardShell.ingredientCard--production:hover,.formulaMobileCards .ingredientCardShell:not(.is-selected):not(:focus-within):hover{filter:brightness(.985)}
.ingredientCardShell.ingredientCard--production:focus-within,.ingredientCardShell.ingredientCard--production[aria-selected="true"],.formulaMobileCards .ingredientCardShell:focus-within,.formulaMobileCards .ingredientCardShell[aria-selected="true"]{--ingredient-card-surface:var(--ingredient-tint);outline:0;box-shadow:inset 0 0 0 2px var(--glacier-500)}
.productionRunCanvas{max-width:1180px}.productionRunSummary{display:grid;gap:20px;padding-bottom:22px;border-radius:var(--radius-lg);background:var(--ice-50)}
.productionRunBanner{padding:16px 22px;border-bottom:1px solid var(--ice-200);background:var(--surface);color:var(--ink-800)}.productionRunBanner span{color:var(--ink-500)}.productionRunBanner strong{color:var(--ink-950);font-size: var(--type-base)}
.productionActiveStatus{border:1px solid var(--ice-300);background:var(--ice-100);color:var(--glacier-750)}
.batchExecutionControls,.executionGuidance,.productionExecution,.productionRecipeReference,.productionStatistics,.productionTimeline,.productionCriticalLog,.batchSessionProgress{margin-inline:22px;padding:18px;border-color:var(--ice-200);border-radius:var(--radius-lg);background:var(--surface)}
.productionRunFacts{padding:0 22px}.productionRunFacts div,.productionExecutionStatus div,.productionStatistics dl div,.productionChurnLog dl div{border:1px solid var(--ice-150);border-radius:var(--radius-md);background:var(--ice-50)}
.productionExecution{gap:18px}.productionExecution>progress,.productionMeasurements progress{overflow:hidden;border:0;border-radius:999px;background:var(--ice-150);accent-color:var(--glacier-600)}.productionExecution>progress::-webkit-progress-bar,.productionMeasurements progress::-webkit-progress-bar{background:var(--ice-150)}.productionExecution>progress::-webkit-progress-value,.productionMeasurements progress::-webkit-progress-value{border-radius:999px;background:var(--glacier-600)}
.executionStepList{gap:10px}.executionStep,.productionStage,.productionCompletionWorkflow details{border-color:var(--ice-200);border-radius:var(--radius-md);box-shadow:var(--shadow-soft)}.executionStep.isCurrent,.productionStage.isCurrent{border-color:var(--glacier-500);box-shadow:inset 0 0 0 1px var(--glacier-500),var(--shadow-soft)}
.productionMeasurements{padding:4px 22px 2px}.productionMeasurements>header{margin-bottom:16px}.productionMeasurements h2{font-size: var(--type-md)}.productionMeasurementList{gap:14px}
.productionMeasurement{padding:16px 18px 14px;border:1px solid transparent;border-left:6px solid var(--ingredient-color);box-shadow:0 1px 2px color-mix(in srgb,var(--ink-950) 7%,transparent);cursor:text}
.productionMeasurement:hover{border-left-color:var(--ingredient-color)}
.productionMeasurement:focus-within,.productionMeasurement[aria-selected="true"]{border-color:transparent;border-left-color:var(--ingredient-color)}
.productionMeasurement.isComplete{--ingredient-card-surface:color-mix(in srgb,var(--ingredient-tint) 55%,var(--surface));border-left-color:var(--ingredient-color)}
.productionMeasurement>header{min-height:40px}.productionMeasurement>header>div{gap:0}.productionMeasurement .historicalIngredientIdentity{border-left:0;padding-left:0}.productionMeasurement .historicalIngredientIdentity strong{font-size: var(--type-base);font-weight: var(--weight-emphasis);letter-spacing: var(--track-display)}.productionCompletionState{display:block;margin-top:3px;color:var(--ingredient-text);font-size: var(--type-xs);font-weight: var(--weight-emphasis)}
.productionCompletion{min-height:36px;padding:0 13px;border-color:var(--ingredient-border);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--ingredient-tint) 70%,white);color:var(--ingredient-text)}.productionCompletion:hover,.productionCompletion:focus-visible{border-color:var(--ingredient-color);background:var(--ingredient-tint);outline:0}.productionCompletion:focus-visible{box-shadow:0 0 0 2px var(--glacier-400)}.productionMeasurement.isComplete .productionCompletion{border-color:var(--ingredient-border);background:var(--ingredient-tint);color:var(--ingredient-text)}
.productionMeasurementGrid{grid-template-columns:minmax(105px,.72fr) minmax(170px,1fr) minmax(145px,.85fr);gap:clamp(14px,3vw,34px);margin-top:14px}
.productionTarget,.productionActual,.productionVariance{min-height:70px;padding:10px 4px;border:0;border-radius:0;background:transparent}.productionVariance.under-target,.productionVariance.at-target,.productionVariance.over-target{border:0}
.productionMassInput{min-height:38px;margin-top:3px;border:0;border-radius:var(--radius-sm);background:transparent;box-shadow:none}.productionMassInput:focus-within{border:0;background:color-mix(in srgb,var(--ingredient-tint) 72%,transparent);box-shadow:inset 0 0 0 1px var(--glacier-500)}.productionMassInput input{height:38px;min-height:38px;padding:0 28px 0 4px;background:transparent;box-shadow:none;font-variant-numeric:tabular-nums}.productionMassInput span{padding-right:9px;background:transparent;pointer-events:none}
.productionNote{margin-top:4px;padding-top:8px;border:0}.productionNote input{border-color:transparent;background:transparent}.productionNote input:hover{border-color:var(--ingredient-border);background:rgba(255,255,255,.35)}.productionNote input:focus{border-color:var(--glacier-500);background:transparent;outline:0;box-shadow:0 0 0 1px var(--glacier-500)}
.batchSessionChecklist{gap:10px}.batchSessionChecklist label,.executionChecklist label{border-color:var(--ice-150);border-radius:var(--radius-md);background:var(--ice-50)}
.productionSessionNotes textarea,.productionTemperatureLog label>span:last-child,.productionOverrunLog label>span:last-child,.productionCompletionNumber{border-color:var(--ice-250);border-radius:var(--radius-sm);background:var(--ice-50)}
@media(max-width:760px){.productionRunSummary{gap:16px}.batchExecutionControls,.executionGuidance,.productionExecution,.productionRecipeReference,.productionStatistics,.productionTimeline,.productionCriticalLog,.batchSessionProgress{margin-inline:12px;padding:14px}.productionRunFacts,.productionMeasurements{padding-inline:12px}.productionMeasurement{padding:14px}.productionMeasurementGrid{grid-template-columns:1fr 1fr}.productionVariance{grid-column:1/-1} }
@media(max-width:520px){.productionMeasurementList{gap:12px}.productionMeasurement>header{align-items:flex-start}.productionCompletion{min-height:44px}.productionMeasurementGrid{grid-template-columns:1fr;gap:8px}.productionActual,.productionVariance{border:0}.productionVariance{grid-column:auto}.productionMassInput,.productionMassInput input{min-height:44px;height:44px}.productionTarget,.productionActual,.productionVariance{min-height:60px;padding-inline:4px}.productionRunBanner{padding-inline:16px}}

/* DS-030B: quiet production hierarchy and premium execution surfaces. */
.productionRunCanvas{padding-bottom:32px}
.productionRunSummary{gap:22px;border:0;background:transparent;box-shadow:none}
.productionRunBanner{border:1px solid var(--ice-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}
.productionRunFacts{gap:12px}.productionRunFacts div,.productionExecutionStatus div,.productionStatistics dl div,.productionChurnLog dl div{border:0;background:color-mix(in srgb,var(--ice-100) 72%,var(--surface));box-shadow:none}
.batchExecutionControls,.executionGuidance,.productionExecution,.productionRecipeReference,.productionStatistics,.productionTimeline,.productionCriticalLog,.batchSessionProgress{border:0;box-shadow:var(--shadow-soft)}
.productionMeasurements{padding-block:4px 6px}.productionMeasurements>header{align-items:end;margin-bottom:18px}.productionMeasurements>header p{font-size: var(--type-xs)}.productionMeasurements progress{height:6px}
.productionMeasurementColumns,.productionMeasurement{grid-template-columns:minmax(180px,1.4fr) minmax(88px,.55fr) minmax(150px,.9fr) minmax(130px,.78fr) auto;column-gap:clamp(12px,2vw,24px)}
.productionMeasurementColumns{display:grid;align-items:end;padding:0 12px 5px 14px;border-bottom:1px solid var(--ice-200);color:var(--ink-500);font-size:var(--type-xs);font-weight:var(--weight-heading);letter-spacing:var(--track-label);text-transform:uppercase}
.productionMeasurementColumns span:last-child{text-align:center}
.productionMeasurementList{gap:6px}
.productionMeasurement{display:grid;grid-template-areas:"identity target actual variance completion" "note note note note note" "error error error error error";align-items:center;gap:0 clamp(12px,2vw,24px);min-height:51px;padding:4px 12px 4px 10px;border:1px solid var(--ingredient-border);border-left:4px solid var(--ingredient-color);border-radius:var(--radius-md);cursor:pointer;box-shadow:none}
.productionMeasurement>header{display:contents}.productionMeasurement>header>div{grid-area:identity;min-width:0}.productionMeasurement>header .productionCompletion{grid-area:completion}.productionMeasurement .historicalIngredientIdentity strong{font-size: var(--type-base)}.productionCompletionState{display:none;letter-spacing: var(--track-label)}
.productionCompletion{min-height:32px;padding-inline:10px;border-color:transparent;background:color-mix(in srgb,var(--ingredient-tint) 68%,var(--surface));font-size:var(--type-sm);font-weight: var(--weight-emphasis)}.productionCompletion:hover{border-color:var(--ingredient-border)}
.productionMeasurementGrid{display:contents;margin:0}
.productionTarget{grid-area:target}.productionActual{grid-area:actual}.productionVariance{grid-area:variance}
.productionTarget,.productionActual,.productionVariance{min-height:0;padding:0}.productionActual>span:first-child,.productionTarget>span,.productionVariance>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);letter-spacing: var(--track-label)}
.productionTarget strong,.productionVariance strong{font-variant-numeric:tabular-nums}.productionTarget strong{font-weight: var(--weight-emphasis)}.productionVariance strong{font-size: var(--type-base);font-weight: var(--weight-emphasis)}.productionVariance small{line-height:1.4}
.productionMassInput{margin-top:0;border-radius:var(--radius-sm)}.productionMassInput input{height:32px;min-height:32px;padding-inline:8px 30px;font-size:var(--type-base);font-weight:var(--weight-emphasis)}.productionMassInput:focus-within{box-shadow:inset 0 0 0 1px var(--glacier-500)}
.productionNote{display:none;grid-area:note;margin-top:4px;padding-top:6px}.productionMeasurement:is([aria-selected="true"],:focus-within,.hasNote) .productionNote{display:grid}.productionNote input{min-height:34px;padding-inline:4px;color:var(--ink-800)}
.productionMeasurementError{grid-area:error;min-height:0;margin:0}
.productionMeasurement :is(button,input):focus-visible{outline:2px solid var(--glacier-500);outline-offset:2px}
.productionMassInput input:focus-visible{outline:0}
.productionTimeline ol{gap:8px}.productionTimeline li{border:0;border-radius:var(--radius-md);background:var(--ice-50)}.productionTimeline li.isRecorded{background:color-mix(in srgb,var(--glacier-100) 52%,var(--surface))}.timelineIndicator{border-color:var(--ice-250);background:var(--surface)}
.productionTemperatureLog label>span:last-child,.productionOverrunLog label>span:last-child,.productionCompletionNumber{background:var(--ice-50)}
.batchSessionChecklist label,.executionChecklist label{border:0}.batchSessionChecklist input,.executionChecklist input{accent-color:var(--glacier-650)}
@media(hover:hover) and (pointer:fine){.productionMeasurement:hover:not([aria-selected="true"]):not(:focus-within){border-color:var(--ingredient-color);background:var(--ingredient-gradient);box-shadow:none}}
@media(max-width:760px){.productionRunSummary{gap:18px}.productionMeasurementColumns{display:none}.productionMeasurementList{gap:12px}.productionMeasurement{display:block;min-height:0;padding:16px}.productionMeasurement>header{display:flex}.productionCompletionState{display:block}.productionMeasurementGrid{display:grid;grid-template-areas:"target actual" "variance variance";grid-template-columns:minmax(0,.75fr) minmax(150px,1.25fr);gap:8px 20px;margin-top:10px}.productionTarget,.productionActual,.productionVariance{min-height:52px;padding-block:4px}.productionActual>span:first-child,.productionTarget>span,.productionVariance>span{position:static;width:auto;height:auto;overflow:visible;clip:auto}.productionMassInput{margin-top:3px}.productionVariance{min-height:50px}.productionNote{margin-top:0}.productionMeasurementError{min-height:12px;margin-top:5px}.productionTimeline li{padding:10px}}
@media(max-width:520px){.productionRunCanvas{padding-bottom:20px}.productionMeasurementList{gap:13px}.productionMeasurement{padding:14px 14px 14px 12px;border-left-width:4px}.productionMeasurement>header{gap:8px}.productionCompletion{min-width:44px;min-height:44px;padding-inline:10px}.productionMeasurementGrid{grid-template-areas:"target actual" "variance variance";grid-template-columns:minmax(0,.72fr) minmax(145px,1.28fr);gap:4px 12px;margin-top:10px}.productionTarget,.productionActual{min-height:58px}.productionVariance{min-height:46px}.productionMassInput,.productionMassInput input{min-height:46px;height:46px}.productionNote input{min-height:44px}.productionRunBanner{border-radius:var(--radius-md)}}

/* DS-031: immutable completion review and ingredient-led batch intelligence. */
.batchCompletionReview{margin-block:18px;padding:18px;border-radius:var(--radius-lg);background:var(--ice-50)}
.batchCompletionReview>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.batchCompletionReview h3{margin:2px 0 0}
.completionIngredientPreview{display:grid;gap:10px;margin-top:14px}.completionIngredientPreview article{display:grid;grid-template-columns:minmax(180px,1.35fr) minmax(260px,1fr) auto;align-items:center;gap:18px;padding:12px 14px;border:1px solid var(--ingredient-border);border-left:6px solid var(--ingredient-color);border-radius:var(--radius-md);background:var(--ingredient-gradient)}.completionIngredientPreview dl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}.completionIngredientPreview dl div{min-width:0}.completionIngredientPreview dt{color:var(--ink-500);font-size: var(--type-xs);font-weight: var(--weight-heading);letter-spacing: var(--track-label);text-transform:uppercase}.completionIngredientPreview dd{margin:3px 0 0;font-variant-numeric:tabular-nums}.completionIngredientPreview article>span{color:var(--ink-600);font-size: var(--type-xs);font-weight: var(--weight-heading)}
.completionException{display:grid;gap:7px;margin-top:18px}.completionException textarea{width:100%;padding:11px;border:1px solid var(--ice-250);border-radius:var(--radius-sm);background:var(--ice-50);color:var(--ink-850);font:inherit;resize:vertical}
/* Completed batch detail — ingredient-driven strip accent (§2.3) inside completion */
.completedBatchDetail > section { border: 0; }
.completedBatchDetail .completedIngredientList article {
  border-left: 6px solid var(--ingredient-color);
  background: var(--ingredient-gradient);
}
@media(max-width:760px){.completionIngredientPreview article{grid-template-columns:1fr;gap:9px}.completionIngredientPreview dl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.batchCompletionReview{padding:14px}.completionIngredientPreview dl{grid-template-columns:1fr 1fr}.completionIngredientPreview dl div:last-child{grid-column:1/-1}.completionIngredientPreview article{padding:12px;border-left-width:6px}.completeBatchAction button{min-height:48px}}

/* DS-032: calm, permanent sensory evaluation for Completed Batches. */
.completedSensoryEvaluation{padding:20px;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--ice-100) 64%,var(--surface))}.completedSensoryEvaluation>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.completedSensoryEvaluation h3{margin:2px 0 0}.evaluationTimeline{display:flex;align-items:center;gap:0;margin:18px 0;padding:0;list-style:none}.evaluationTimeline li{display:flex;align-items:center;gap:9px;min-width:190px}.evaluationTimeline li+li:before{content:"";width:44px;height:1px;margin-right:12px;background:var(--ice-300)}.evaluationTimeline li>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ice-300);border-radius:50%;background:var(--surface);font-size: var(--type-xs);font-weight: var(--weight-heading)}.evaluationTimeline li.isComplete>span{border-color:var(--glacier-500);color:var(--glacier-700)}.evaluationTimeline li.isCurrent>span{box-shadow:0 0 0 3px color-mix(in srgb,var(--glacier-300) 45%,transparent)}.evaluationTimeline strong,.evaluationTimeline small{display:block}.evaluationTimeline small{margin-top:2px;color:var(--ink-500);font-size: var(--type-xs)}
.sensoryRatingGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;padding:0;border:0}.sensoryRatingGrid legend{grid-column:1/-1;margin-bottom:5px;font-weight: var(--weight-heading)}.sensoryRatingGrid legend small{color:var(--ink-500);font-weight: var(--weight-body)}.sensoryRatingGrid label{display:grid;gap:5px;padding:10px;border-radius:var(--radius-sm);background:var(--surface)}.sensoryRatingGrid label span{font-size: var(--type-xs);font-weight: var(--weight-emphasis)}.sensoryRatingGrid select{min-height:40px;border:1px solid var(--ice-250);border-radius:var(--radius-sm);background:var(--ice-50);font:inherit}
.sensoryFormSection,.sensoryExperiment{margin-top:18px}.sensoryFormSection h4{margin:0 0 10px}.sensoryTextGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sensoryTextGrid label{display:grid;gap:6px;color:var(--ink-650);font-size: var(--type-xs);font-weight: var(--weight-emphasis)}.sensoryTextGrid textarea,.completedSensoryEvaluation textarea{width:100%;padding:10px;border:1px solid var(--ice-250);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-850);font:inherit;resize:vertical}.sensoryExperiment{padding:12px 0;border-block:1px solid var(--ice-200)}.sensoryExperiment summary{cursor:pointer;font-weight: var(--weight-heading)}.sensoryExperiment[open] summary{margin-bottom:12px}#completedSensoryEvaluationForm>button{min-height:44px;margin-top:16px}#completedSensoryEvaluationForm>[role="alert"]{min-height:18px;color:var(--danger-strong)}.immutableNotice{color:var(--ink-500);font-size: var(--type-xs)}.sensoryRatingSummary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.sensoryRatingSummary>div{padding:11px;border-radius:var(--radius-sm);background:var(--surface)}.sensoryRatingSummary span,.sensoryRatingSummary strong{display:block}.sensoryRatingSummary span{color:var(--ink-500);font-size: var(--type-xs);font-weight: var(--weight-heading);text-transform:uppercase}.sensoryRatingSummary strong{margin-top:4px;font-size: var(--type-lg)}.sensoryRatingSummary small{font-size: var(--type-xs)}.sensoryReadOnlyNotes{display:grid;gap:16px;margin-top:18px}.sensoryReadOnlyNotes h4{margin-bottom:8px}
@media(max-width:760px){.sensoryRatingGrid,.sensoryRatingSummary{grid-template-columns:repeat(2,minmax(0,1fr))}.sensoryTextGrid{grid-template-columns:1fr}.evaluationTimeline{align-items:flex-start}.evaluationTimeline li{min-width:0;flex:1}.evaluationTimeline li+li:before{width:22px}}
@media(max-width:520px){.completedSensoryEvaluation{padding:14px}.completedSensoryEvaluation>header{display:grid}.sensoryRatingGrid,.sensoryRatingSummary{grid-template-columns:repeat(2,minmax(0,1fr))}.sensoryRatingGrid label{min-height:68px}.sensoryRatingGrid select{min-height:44px}.evaluationTimeline{display:grid;gap:10px}.evaluationTimeline li+li:before{display:none}#completedSensoryEvaluationForm>button{width:100%;min-height:50px}}

/* DS-033: disposable, read-only formula and Completed Batch comparison. */
/* ============================================================
   Comparison workspace (§2 tile+strip patterns, §2.4 disclosure)
   ------------------------------------------------------------
   Layout for the History → Compare tab. Contains three top-level
   panels: comparison controls (filter+select form), comparison
   result (rendered pair), and formula evolution timeline.
   ============================================================ */

.comparisonWorkspace { display: grid; gap: 16px; padding: 0 18px 28px; }

.comparisonControls,
.comparisonResult,
.formulaEvolution { padding: 20px; }

.comparisonControls > header,
.comparisonResult > header,
.formulaEvolution > header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.comparisonControls h2,
.comparisonResult h2,
.formulaEvolution h2 { margin: 3px 0; }
.comparisonControls p { margin: 4px 0; color: var(--ink-500); font-size: var(--type-xs); }

/* Comparison controls — filter grid + record selectors */
.comparisonControlGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.comparisonControlGrid label,
.comparisonSelectors label {
  display: grid; gap: 5px;
  color: var(--ink-600); font-size: var(--type-xs); font-weight: var(--weight-emphasis);
}
.comparisonControlGrid input,
.comparisonControlGrid select,
.comparisonSelectors select {
  width: 100%; min-height: 40px;
  padding: 7px 9px;
  border: 1px solid var(--ice-250); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-850);
  font: inherit;
}
.comparisonControlGrid .checkField {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px;
}
.comparisonControlGrid .checkField input { width: auto; min-height: auto; }
.comparisonSelectors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end; gap: 12px;
  margin-top: 14px;
}
.comparisonSelectors button { min-height: 40px; padding-inline: 20px; }

/* Comparison result — outer surface + close affordance */
.comparisonResult { border-radius: var(--radius-lg); background: var(--surface); }
.comparisonResult > header h2 small { color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-body); }
.comparisonResult > header > button { border: 0; background: transparent; color: var(--ink-500); }
.comparisonResult > section { margin-top: 22px; }

/* Comparison pair + notes — non-stateful side-by-side tiles (§2.2) */
.comparisonPair,
.comparisonNotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.comparisonPair article,
.comparisonNotes article {
  display: grid; gap: 5px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--ice-50);
}
.comparisonPair span { color: var(--ink-500); font-size: var(--type-xs); text-transform: uppercase; }
.comparisonPair strong { font-size: var(--type-md); }
.comparisonPair button { justify-self: start; margin-top: 5px; }

/* Ingredient change list — strip pattern (§2.3), ingredient-color left-accent */
.comparisonIngredientList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.comparisonIngredientList article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  padding: 14px;
  border: 1px solid var(--ingredient-border, var(--ice-250));
  border-left: 6px solid var(--ingredient-color, var(--glacier-500));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ingredient-tint, var(--ice-100)) 38%, var(--surface));
}
.comparisonIngredientList article > strong { align-self: center; }
.comparisonIngredientList article > div {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  color: var(--ink-650); font-size: var(--type-sm);
}
.comparisonIngredientList article > div span:last-child { text-align: right; }
.comparisonIngredientList article > small { grid-column: 1 / -1; color: var(--ink-500); }

/* Change pill — classification label (§2.3 state accents).
   Five semantic states across two comparison paths:
     • Presence change  — Added / Removed          (saturated tint)
     • Magnitude change — Increased / Decreased    (muted tint)
     • Absence of data  — Missing or unknown / Unknown  (base neutral)
   The two "unknown" class names are aliases: the formula-version
   comparator emits "Missing or unknown" and the completed-batch
   comparator emits "Unknown" for the same semantic. Both left
   uncolored (they inherit the neutral base). Tracked as a
   domain-layer normalization for a later phase. */
.changePill {
  justify-self: end;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--ice-150); color: var(--ink-650);
  font-size: var(--type-xs); font-weight: var(--weight-heading);
}
/* Presence change — saturated */
.changePill.added {
  background: color-mix(in srgb, var(--glacier-200) 78%, var(--surface));
  color: var(--glacier-750);
}
.changePill.removed {
  background: color-mix(in srgb, var(--clay-200) 78%, var(--surface));
  color: var(--clay-750);
}
/* Magnitude change — muted */
.changePill.increased {
  background: color-mix(in srgb, var(--glacier-200) 42%, var(--surface));
  color: var(--glacier-700);
}
.changePill.decreased {
  background: color-mix(in srgb, var(--clay-200) 42%, var(--surface));
  color: var(--clay-650);
}
/* Absence of data — inherits neutral base; aliases documented above.
   .missing-or-unknown and .unknown intentionally take no override. */

/* Composition metric list — non-stateful metric tiles */
.comparisonMetricList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.comparisonMetricList article {
  display: grid; gap: 4px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--ice-50);
}
.comparisonMetricList article > span {
  color: var(--glacier-650); font-size: var(--type-xs); font-weight: var(--weight-heading); text-transform: uppercase;
}
.comparisonMetricList small { color: var(--ink-500); }

/* Sensory comparison grid — row-per-dimension */
.sensoryComparisonGrid {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--ice-50);
}
.sensoryComparisonGrid > div {
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) repeat(3, minmax(70px, 1fr));
  gap: 8px;
  padding: 9px 12px;
}
.sensoryComparisonGrid > div + div { border-top: 1px solid var(--ice-150); }
.sensoryComparisonGrid .comparisonGridHeader {
  color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); text-transform: uppercase;
}

.comparisonDisclaimer { color: var(--ink-500); font-size: var(--type-xs); }

/* Comparison notes — production/experiment note pairs */
.comparisonNotes dl { margin: 0; }
.comparisonNotes dl div { padding-block: 7px; }
.comparisonNotes dt { color: var(--ink-500); font-size: var(--type-xs); text-transform: capitalize; }
.comparisonNotes dd { margin: 3px 0 0; white-space: pre-wrap; }

/* Change summary list — legacy flat list under the pair */
.changeSummaryList {
  display: grid; gap: 7px;
  margin: 0; padding: 0; list-style: none;
}
.changeSummaryList li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
  padding: 9px;
  border-radius: var(--radius-sm);
  background: var(--ice-50);
}
.changeSummaryList li span {
  color: var(--glacier-650); font-size: var(--type-xs); font-weight: var(--weight-heading); text-transform: uppercase;
}

/* Formula evolution — vertical timeline rail (non-tile, non-strip) */
.formulaEvolution { border-radius: var(--radius-lg); background: var(--surface); }
.formulaEvolution ol {
  display: grid;
  margin: 16px 0 0; padding: 0; list-style: none;
}
.formulaEvolution li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 0 0 18px 24px;
}
.formulaEvolution li:not(:last-child)::before {
  position: absolute; top: 12px; bottom: 0; left: 6px;
  width: 1px;
  background: var(--ice-300);
  content: "";
}
.formulaEvolution li::after {
  position: absolute; top: 7px; left: 1px;
  width: 9px; height: 9px;
  border: 2px solid var(--glacier-500); border-radius: 50%;
  background: var(--surface);
  content: "";
}
.formulaEvolution li > button:first-child {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  border: 0; background: transparent;
  text-align: left;
}
.formulaEvolution li > button span { color: var(--ink-950); font-weight: var(--weight-heading); }
.formulaEvolution li > button strong { justify-self: end; color: var(--ink-500); font-size: var(--type-xs); }
.formulaEvolution li > button small,
.formulaEvolution li > button em {
  grid-column: 1 / -1;
  color: var(--ink-600); font-size: var(--type-xs); font-style: normal;
}
.formulaEvolution li > div { display: flex; flex-wrap: wrap; gap: 6px; }
.formulaEvolution li > div button { min-height: 32px; }
@media(max-width:860px){.comparisonControlGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.comparisonMetricList{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.comparisonWorkspace{padding:0 10px 90px}.comparisonControls,.comparisonResult,.formulaEvolution{padding:14px}.comparisonControlGrid,.comparisonSelectors,.comparisonPair,.comparisonNotes,.comparisonIngredientList{grid-template-columns:1fr}.comparisonSelectors button{min-height:48px}.comparisonMetricList{grid-template-columns:1fr 1fr}.sensoryComparisonGrid>div{grid-template-columns:minmax(90px,1.4fr) repeat(3,minmax(52px,1fr));font-size: var(--type-xs)}.formulaEvolution li{grid-template-columns:1fr}.formulaEvolution li>div{grid-column:1}.comparisonResult>header{display:grid}.comparisonResult>header>button{justify-self:start;min-height:40px}.comparisonIngredientList article{min-width:0}.comparisonIngredientList article>div{font-size: var(--type-xs)}}

/* DS-034: evidence-traceable, deliberately non-causal recommendations. */
/* ============================================================
   Explainable Recommendations panel (§2.3 strip, §2.4 disclosure)
   ------------------------------------------------------------
   Read-only advice list. Each recommendation is a strip with a
   glacier left-accent. Confidence pill state accents are added
   in 4f — currently high and moderate share one style.
   ============================================================ */

.explainableRecommendations { padding: 20px; }
.explainableRecommendations > header,
.recommendationList article > header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.explainableRecommendations h2 { margin: 3px 0; }
.explainableRecommendations > header p {
  margin: 4px 0;
  color: var(--ink-500); font-size: var(--type-xs);
}

/* Recommendation strips — §2.3, glacier left-accent (state accent added in 4f) */
.recommendationList { display: grid; gap: 12px; margin-top: 18px; }
/* Recommendation card — §2.3 strip pattern. Left border encodes confidence
 * (monotonic single-hue scale on glacier). Informational drops off the axis
 * into neutral (ice-300) — parallel to the "unknown" treatment in 4d, since
 * historical patterns carry no confidence assessment. State class comes from
 * item.confidence.toLowerCase() at history-workspace.js:294. */
.recommendationList > article {
  padding: 16px;
  border-left: 5px solid var(--ice-300);  /* base = informational / fallback */
  border-radius: var(--radius-md);
  background: var(--ice-50);
}
.recommendationList > article.high     { border-left-color: var(--glacier-650); }
.recommendationList > article.moderate { border-left-color: var(--glacier-500); }
.recommendationList > article.low      { border-left-color: var(--glacier-300); }
/* .informational uses the base ice-300 — no override needed */
.recommendationList h3 { margin: 5px 0 0; }

/* Confidence + experiment classification pills */
.evidencePill,
.experimentClass {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ice-150); color: var(--ink-650);
  font-size: var(--type-xs); font-weight: var(--weight-heading);
}
/* Evidence pill state scale — 4-way vocabulary matches
 * RECOMMENDATION_CONFIDENCE enum (packages/engineering/recommendations.js:6).
 * Monotonic glacier progression for High/Moderate/Low; Informational drops
 * to the neutral base above. Card + pill scale together so both channels
 * tell the same story.
 *
 * Naming — this class is .evidencePill, not .confidencePill. The word
 * "confidence" is domain-scoped in this codebase: ingredient contexts use
 * .confidenceBadge with the --status-* token family (verified / high /
 * provisional / estimated / incomplete) to signal data-provenance quality;
 * advice contexts (this pill) signal inferential evidence strength on a
 * derived pattern. Two different measurements on two different domain
 * objects — separated at the class level to make the reference grammar
 * unambiguous. See recommendations.js RECOMMENDATION_CONFIDENCE for the
 * evidence-side enum. */
.evidencePill.high {
  background: color-mix(in srgb, var(--glacier-500) 80%, var(--surface));
  color: var(--surface);
}
.evidencePill.moderate {
  background: color-mix(in srgb, var(--glacier-300) 70%, var(--surface));
  color: var(--glacier-750);
}
.evidencePill.low {
  background: color-mix(in srgb, var(--glacier-200) 55%, var(--surface));
  color: var(--glacier-750);
}
/* .informational uses the base .evidencePill styling above (--ice-150 / --ink-650) */

/* Recommendation detail rows */
.recommendationList dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.recommendationList dl > div {
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.recommendationList dt {
  color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); text-transform: uppercase;
}
.recommendationList dd { margin: 5px 0 0; line-height: 1.5; }

/* Evidence trace — §2.4 disclosure */
.recommendationList details { color: var(--ink-600); font-size: var(--type-xs); }
.recommendationList summary { cursor: pointer; font-weight: var(--weight-emphasis); }
.recommendationList .recommendationTrace {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}
.recommendationTrace dd { overflow-wrap: anywhere; }
@media(max-width:620px){.explainableRecommendations{padding:14px}.explainableRecommendations>header,.recommendationList article>header{display:grid}.recommendationList dl,.recommendationList .recommendationTrace{grid-template-columns:1fr}.experimentClass{justify-self:start}}

/* DS-033A: Formula Version comparison as a five-second visual story. */
/* ============================================================
   Formula comparison story (DS-033A) — §2.2 tile + §2.4 disclosure
   ------------------------------------------------------------
   Five-second visual story for the version comparison view.
   Contains: executive summary tiles, changed ingredients grid,
   composition grid, narrative panel, and a details disclosure.
   ============================================================ */

/* Story header + section spacing */
.formulaComparisonStory > header p {
  margin: 5px 0 0;
  color: var(--ink-500); font-size: var(--type-xs);
}
.formulaComparisonStory > section { margin-top: 28px; }

/* Executive summary — five non-stateful metric tiles (§2.2) */
.comparisonExecutive > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, 1.35fr);
  gap: 10px;
}
.comparisonExecutive article {
  min-height: 104px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--ice-50);
}
.comparisonExecutive article > span,
.comparisonExecutive article > strong,
.comparisonExecutive article > small { display: block; }
.comparisonExecutive article > span {
  color: var(--ink-500);
  font-size: var(--type-xs); font-weight: var(--weight-heading);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.comparisonExecutive article > strong {
  margin-top: 10px;
  font-size: var(--type-2xl);
  font-variant-numeric: tabular-nums;
}
.comparisonExecutive article > small {
  margin-top: 5px;
  color: var(--ink-500); font-size: var(--type-xs);
}
.comparisonExecutive .massSummary strong { font-size: var(--type-md); line-height: 1.5; }
.comparisonExecutive .massSummary strong b {
  padding-inline: 5px;
  color: var(--ink-400); font-weight: var(--weight-body);
}
/* Section header row shared by changed-ingredients and composition sections */
.comparisonChangedIngredients > header,
.comparisonComposition > header {
  display: flex;
  align-items: end; justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.comparisonChangedIngredients > header h3,
.comparisonComposition > header h3 { margin: 3px 0 0; }
.comparisonChangedIngredients > header > span,
.comparisonComposition > header > span {
  color: var(--ink-500); font-size: var(--type-xs);
}

/* Version change cards — strip pattern (§2.3), ingredient-color left-accent.
   State accent for change classification (added/removed/changed) is applied
   in 4e via [data-comparison-change]. */
.formulaComparisonStory .comparisonIngredientList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.formulaComparisonStory .comparisonIngredientList .versionChangeCard {
  display: block;
  min-height: 200px;
  padding: 16px 18px;
  border: 0;
  border-left: 7px solid var(--ingredient-color, var(--glacier-500));
  background: color-mix(in srgb, var(--ingredient-tint, var(--ice-100)) 40%, var(--surface));
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink-950) 7%, transparent);
}
/* State accent — 2px top border, subordinate to the 7px left identity accent
   (§2.2 tile pattern; hierarchy: identity dominant, state secondary).
   Parallel to .changePill vocabulary from 4d — presence-change saturated,
   magnitude-change muted. Missing-or-unknown / unknown intentionally receive
   no top accent: absence of directional data → absence of state signal;
   the card falls back to identity-only. */
.versionChangeCard.added     { border-top: 2px solid var(--glacier-500); }
.versionChangeCard.removed   { border-top: 2px solid var(--clay-500); }
.versionChangeCard.increased { border-top: 2px solid var(--glacier-400); }
.versionChangeCard.decreased { border-top: 2px solid var(--clay-400); }
.versionChangeCard > header { display: flex; }
.versionChangeCard > header > div {
  display: flex;
  align-items: center; justify-content: space-between;
  width: 100%; gap: 10px;
}
.versionChangeCard > header strong { font-size: var(--type-md); }

/* Before/after value row. Scoped under .comparisonIngredientList article so it
   out-specifies the generic `.comparisonIngredientList article > div` (DS-033)
   without. */
.comparisonIngredientList article > .versionChangeValues {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  color: inherit;
  font-size: inherit;
}
.comparisonIngredientList article > .versionChangeValues > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.versionChangeValues > div:last-child { text-align: right; }
.versionChangeValues span {
  color: var(--ink-500);
  font-size: var(--type-xs); font-weight: var(--weight-heading);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.versionChangeValues strong {
  font-size: var(--type-lg);
  font-variant-numeric: tabular-nums;
}
.versionChangeValues small { color: var(--ink-500); font-size: var(--type-xs); }
.versionChangeValues > b { color: var(--ink-400); font-size: var(--type-md); }

/* Card footer — divider tinted with the ingredient border token */
.versionChangeCard > footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ingredient-border, var(--ice-250)) 55%, transparent);
}
.versionChangeCard > footer strong { font-size: var(--type-sm); }
.versionChangeCard > footer span {
  color: var(--ink-500); font-size: var(--type-xs); text-align: right;
}
/* Composition grid — three non-stateful metric tiles (§2.2) */
.comparisonCompositionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.comparisonCompositionGrid article {
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--ice-50);
}
.comparisonCompositionGrid article > span {
  color: var(--ink-500);
  font-size: var(--type-xs); font-weight: var(--weight-heading);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.comparisonCompositionGrid article > div {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.comparisonCompositionGrid article > div strong:last-child { text-align: right; }
.comparisonCompositionGrid article > div b { color: var(--ink-400); }
.comparisonCompositionGrid article > small {
  display: block;
  margin-top: 8px;
  color: var(--glacier-700);
  font-size: var(--type-xs); font-weight: var(--weight-emphasis);
}

/* Narrative panel — tinted read-only prose block */
.comparisonNarrative {
  padding: 18px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--ice-100) 62%, var(--surface));
}
.comparisonNarrative h3 { margin: 3px 0 12px; }
.comparisonNarrative ul {
  display: grid; gap: 8px;
  margin: 0; padding-left: 20px;
}
.comparisonNarrative li { line-height: 1.45; }
.comparisonNarrative p {
  margin: 14px 0 0;
  color: var(--ink-500); font-size: var(--type-xs);
}

/* Details disclosure — §2.4, raw comparison table */
.comparisonDetails {
  margin-top: 26px;
  border-radius: var(--radius-md);
  background: var(--ice-50);
}
.comparisonDetails > summary {
  min-height: 48px;
  padding: 15px;
  cursor: pointer;
  font-weight: var(--weight-heading);
}
.comparisonDetails .tableScroller { padding: 0 14px 14px; }
.comparisonDetails table { width: 100%; border-collapse: collapse; }
.comparisonDetails th,
.comparisonDetails td {
  padding: 9px;
  border-bottom: 1px solid var(--ice-150);
  text-align: left;
}
.comparisonDetails th {
  color: var(--ink-500);
  font-size: var(--type-xs); text-transform: uppercase;
}
@media(max-width:980px){.comparisonExecutive>div{grid-template-columns:repeat(3,minmax(0,1fr))}.comparisonExecutive .massSummary{grid-column:span 2}.comparisonCompositionGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.formulaComparisonStory>section{margin-top:22px}.comparisonExecutive>div,.formulaComparisonStory .comparisonIngredientList,.comparisonCompositionGrid{grid-template-columns:1fr}.comparisonExecutive .massSummary{grid-column:auto}.comparisonExecutive article{min-height:88px}.comparisonChangedIngredients>header,.comparisonComposition>header{align-items:start}.formulaComparisonStory .comparisonIngredientList .versionChangeCard{min-height:0;padding:15px;border-left-width:6px}.comparisonIngredientList article > .versionChangeValues{gap:8px}.versionChangeValues strong{font-size: var(--type-md)}.versionChangeCard>footer{display:grid}.versionChangeCard>footer span{text-align:left}.comparisonDetails .tableScroller{overflow:visible}.comparisonDetails table,.comparisonDetails tbody,.comparisonDetails tr,.comparisonDetails td{display:block;width:100%}.comparisonDetails thead{display:none}.comparisonDetails tbody{display:grid;gap:10px}.comparisonDetails tr{padding:10px;border-radius:var(--radius-sm);background:var(--surface)}.comparisonDetails td{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(0,1fr);gap:8px;padding:6px;border:0;overflow-wrap:anywhere}.comparisonDetails td:before{color:var(--ink-500);font-size: var(--type-xs);font-weight: var(--weight-heading);text-transform:uppercase;content:attr(data-label)}}
/* DS-035 Research Intelligence — migrated to visual-language reference v1.1.
 * See docs/VISUAL-LANGUAGE-REFERENCE.md. Structural shape unchanged from JS;
 * only tokens, type scale, and interaction states updated to match Formula
 * Bench / Formula Library / Ingredient Library dialect.
 *
 * Migrations applied:
 *   --muted             → --ink-500
 *   --line              → --ice-200
 *   --surface-subtle    → --ice-50
 *   --accent            → --glacier-500
 *   1.8rem / .7-.85rem  → pixel type scale (§1.8)
 *   border-radius 14-18 → --radius-md / --radius-lg
 *   disclosure default  → §2.4 treatment
 */
.researchWorkspace { display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: 48px; }

/* Summary strip — non-stateful tiles */
.researchSummaryGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.researchSummaryGrid article,
.researchTrendGrid article {
  padding: 14px;
  border: 1px solid var(--ice-200);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.researchSummaryGrid span,
.researchSummaryGrid small { display: block; color: var(--ink-500); font-size: var(--type-xs); }
.researchSummaryGrid span { font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.researchSummaryGrid strong { display: block; margin: 8px 0 4px; color: var(--ink-950); font-size: var(--type-lg); font-weight: var(--weight-emphasis); font-variant-numeric: tabular-nums; }

/* Two-column band under the summary */
.researchColumns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.researchQuietPanel { padding-bottom: 14px; }

.researchRatingColumns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); padding: 0 18px; }
.researchRatingColumns h3 { margin: 4px 0 6px; color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.researchRatingColumns ul,
.researchFrequency { margin: 0; padding: 0; list-style: none; }
.researchRatingColumns button,
.researchFrequency button {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 44px; padding: 10px 8px;
  border: 0; border-bottom: 1px solid var(--ice-150);
  background: transparent; color: inherit; text-align: left;
  font: inherit; font-size: var(--type-sm);
  cursor: pointer;
}
.researchRatingColumns button:hover,
.researchFrequency button:hover { background: var(--ice-50); }
.researchRatingColumns button:focus-visible,
.researchFrequency button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: -2px; }
.researchRatingColumns button strong,
.researchFrequency button strong { color: var(--ink-950); font-weight: var(--weight-emphasis); font-variant-numeric: tabular-nums; }
.researchRatingColumns button span { color: var(--ink-650); }
.researchFrequency { padding: 0 18px; }
.researchFrequency button span { color: var(--ink-800); font-weight: var(--weight-emphasis); }
.researchFrequency button strong { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }

/* Trend cards */
.researchTrendGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 18px 18px; }
.researchTrendGrid article header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.researchTrendGrid article header strong { color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.researchTrendGrid article header span { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.researchTrendGrid article small,
.researchTrendGrid article p { display: block; color: var(--ink-500); font-size: var(--type-xs); line-height: 1.45; }
.researchTrendGrid article small { margin-top: 3px; }
.researchTrendGrid article p { margin: 8px 0 0; }
.researchSpark { height: 60px; display: flex; align-items: end; gap: 4px; margin: 14px 0 8px; }
.researchSpark i { flex: 1; min-width: 3px; height: var(--trend-height); border-radius: 3px 3px 1px 1px; background: var(--glacier-500); opacity: .72; }

/* Ingredient history — filter form + record list */
.researchIngredientHistory form {
  display: grid; grid-template-columns: 2fr 1.3fr 1fr 1fr auto; gap: 10px;
  padding: 0 18px 14px; align-items: end;
}
.researchIngredientHistory label,
.researchPlanning label {
  display: grid; gap: 5px;
  color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase;
}
.researchIngredientHistory input,
.researchIngredientHistory select,
.researchPlanning input,
.researchPlanning textarea {
  width: 100%; min-height: 38px; padding: 8px 10px;
  border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink-950); font: inherit; font-size: var(--type-sm); font-weight: var(--weight-body);
  letter-spacing: var(--track-body); text-transform: none;
  outline: none;
}
.researchIngredientHistory input:focus,
.researchIngredientHistory select:focus,
.researchPlanning input:focus,
.researchPlanning textarea:focus {
  border-color: var(--glacier-500);
  box-shadow: 0 0 0 3px rgba(94, 130, 149, .12);
}
.researchIngredientHistory form > button[type="submit"] {
  min-height: 38px; padding: 0 14px;
  border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink-650); font: inherit; font-size: var(--type-sm); font-weight: var(--weight-emphasis);
  cursor: pointer;
}
.researchIngredientHistory form > button[type="submit"]:hover {
  border-color: var(--glacier-500); color: var(--ink-950);
}

.researchHistoryList { display: grid; gap: 10px; padding: 0 18px 18px; }
.researchHistoryList article {
  display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; align-items: center; gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--ice-50);
  box-shadow: var(--shadow-card);
}
.researchHistoryList article > div strong { color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.researchHistoryList article small { display: block; margin-top: 3px; color: var(--ink-500); font-size: var(--type-xs); }
.researchHistoryList dl { display: flex; gap: 18px; margin: 0; }
.researchHistoryList dt { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.researchHistoryList dd { margin: 3px 0 0; color: var(--ink-800); font-size: var(--type-sm); font-weight: var(--weight-emphasis); font-variant-numeric: tabular-nums; }
.researchHistoryList p { margin: 0; color: var(--ink-650); font-size: var(--type-sm); line-height: 1.45; }

/* Recommendation strips — horizontal band with glacier left-accent (§2.3 strip variant) */
.researchRecommendation {
  margin: 0 18px 12px;
  padding: 18px;
  border: 1px solid var(--ice-200);
  border-left: 3px solid var(--glacier-500);
  border-radius: var(--radius-md);
  background: var(--ice-50);
  box-shadow: var(--shadow-card);
}
.researchRecommendation header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.researchRecommendation header > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.researchRecommendation h3 { margin: 6px 0 0; flex-basis: 100%; color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-heading); letter-spacing: var(--track-display); }
.researchRecommendation header > small { max-width: 38%; color: var(--ink-500); font-size: var(--type-sm); line-height: 1.45; text-align: right; }
.researchRecommendation dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 0; }
.researchRecommendation dl div { min-width: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); }
.researchRecommendation dt { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.researchRecommendation dd { margin: 5px 0 0; color: var(--ink-800); font-size: var(--type-sm); font-weight: var(--weight-body); line-height: 1.5; overflow-wrap: anywhere; }
.researchRecommendation details { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--ice-200); color: var(--ink-650); font-size: var(--type-sm); }
.researchRecommendation details summary {
  min-height: 32px; display: flex; align-items: center;
  color: var(--glacier-650); font-size: var(--type-xs); font-weight: var(--weight-heading);
  cursor: pointer;
}
.researchRecommendation details summary:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
.researchRecommendation details p { margin: 6px 0; color: var(--ink-650); line-height: 1.5; }
.researchRecommendation footer,
.researchEvidenceLinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.researchRecommendation footer button,
.researchEvidenceLinks button {
  min-height: 32px; padding: 0 12px;
  border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink-650); font: inherit; font-size: var(--type-sm); font-weight: var(--weight-emphasis);
  cursor: pointer;
}
.researchRecommendation footer button:hover,
.researchEvidenceLinks button:hover { border-color: var(--glacier-500); color: var(--ink-950); }

/* Planning — form + list */
.researchPlanLayout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; padding: 0 18px 18px; }
.researchPlanning form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.researchPlanning form > label:first-child,
.researchPlanning form > button { grid-column: 1 / -1; }
.researchPlanning textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
.researchPlanning form > button.primary {
  justify-self: start; min-height: 38px; padding: 0 16px;
  border: 1px solid var(--glacier-650); border-radius: var(--radius-sm); background: var(--glacier-650);
  color: white; font: inherit; font-size: var(--type-sm); font-weight: var(--weight-emphasis);
  cursor: pointer;
}
.researchPlanning form > button.primary:hover { background: color-mix(in srgb, var(--glacier-650) 88%, black); }

.researchPlanList { display: grid; align-content: start; gap: 10px; }
.researchPlanList article {
  padding: 14px;
  border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--ice-50);
  box-shadow: var(--shadow-card);
}
.researchPlanList article > .statusPill { display: inline-block; margin-bottom: 6px; }
.researchPlanList h3 { margin: 2px 0 6px; color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-heading); }
.researchPlanList p { margin: 0; color: var(--ink-650); font-size: var(--type-sm); line-height: 1.5; }
.researchPlanList small { display: block; margin-top: 8px; color: var(--ink-500); font-size: var(--type-xs); }

/* Relationship index — disclosure per §2.4 */
.researchGraph { margin: 0 18px 18px; padding: 0; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.researchGraph > summary {
  min-height: 44px; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-heading); letter-spacing: var(--track-display);
  cursor: pointer; list-style: none;
}
.researchGraph > summary::-webkit-details-marker { display: none; }
.researchGraph > summary::before {
  content: "Relationship index";
  display: block; margin-right: 10px;
  color: var(--glacier-650); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase;
}
.researchGraph > summary > span { color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-body); letter-spacing: var(--track-body); text-transform: none; }
.researchGraph[open] > summary { border-bottom: 1px solid var(--ice-200); background: var(--ice-50); }
.researchGraph > summary:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: -2px; }
.researchGraph p { margin: 0; padding: 14px 16px; color: var(--ink-650); font-size: var(--type-sm); line-height: 1.5; }
.researchGraphExplorer { display: grid; grid-template-columns: minmax(220px,.72fr) minmax(0,1.28fr); gap: 14px; padding: 16px; }
.researchGraphExplorer > label { display: grid; align-content: start; gap: 6px; color: var(--ink-650); font-size: var(--type-xs); font-weight: var(--weight-heading); text-transform: uppercase; letter-spacing: var(--track-label); }
.researchGraphExplorer select { width: 100%; min-height: 40px; padding: 7px 34px 7px 10px; border: 1px solid var(--ice-300); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-800); font: inherit; font-size: var(--type-sm); text-transform: none; letter-spacing: normal; }
.researchGraphFocus { grid-column: 2; grid-row: 1; display: grid; align-content: center; gap: 3px; min-width: 0; padding: 12px 14px; border-left: 3px solid var(--glacier-500); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--ice-50); }
.researchGraphFocus span,.researchGraphLink span { color: var(--ink-500); font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--track-label); }
.researchGraphFocus strong,.researchGraphLink strong { min-width: 0; overflow-wrap: anywhere; color: var(--ink-950); }
.researchGraphFocus small,.researchGraphLink small { color: var(--ink-600); font-size: var(--type-xs); }
.researchGraphLinks { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.researchGraphLinks > p { grid-column: 1/-1; padding: 12px 0; }
.researchGraphLink { position: relative; display: grid; gap: 3px; min-width: 0; min-height: 76px; padding: 11px 36px 11px 12px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--surface); font: inherit; text-align: left; }
button.researchGraphLink { cursor: pointer; }
button.researchGraphLink:hover { border-color: var(--glacier-400); background: var(--ice-50); }
button.researchGraphLink:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
.researchGraphLink i { position: absolute; top: 50%; right: 13px; color: var(--glacier-650); font-style: normal; transform: translateY(-50%); }

@media (max-width: 900px) {
  .researchSummaryGrid { grid-template-columns: 1fr 1fr; }
  .researchColumns,
  .researchPlanLayout { grid-template-columns: 1fr; }
  .researchTrendGrid { grid-template-columns: 1fr 1fr; }
  .researchIngredientHistory form { grid-template-columns: 1fr 1fr; }
  .researchHistoryList article { grid-template-columns: 1fr; }
  .researchRecommendation dl { grid-template-columns: 1fr; }
  .researchGraphLinks { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .researchWorkspace { gap: 14px; }
  .researchSummaryGrid,
  .researchTrendGrid,
  .researchRatingColumns,
  .researchIngredientHistory form,
  .researchPlanning form { grid-template-columns: 1fr; }
  .researchSummaryGrid article { padding: 12px; }
  .researchGraphExplorer { grid-template-columns: 1fr; }
  .researchGraphFocus { grid-column: 1; grid-row: auto; }
  .researchGraphLinks { grid-template-columns: 1fr; }
  .researchRecommendation { margin: 0 12px 12px; padding: 14px; }
  .researchRecommendation header { display: block; }
  .researchRecommendation header > small { display: block; max-width: none; margin-top: 8px; text-align: left; }
  .researchRecommendation footer button,
  .researchEvidenceLinks button { min-height: 44px; }
  .researchIngredientHistory form > button[type="submit"] { min-height: 44px; }
  .researchHistoryList,
  .researchTrendGrid,
  .researchPlanLayout,
  .researchRatingColumns,
  .researchFrequency { padding-left: 12px; padding-right: 12px; }
  .researchGraph { margin: 0 12px 12px; }
}

/* DS-037 Experiment Manager */
.workspaceActionGroup { display: flex; align-items: center; gap: 10px; }

.experimentManagerOverview { display: grid; gap: 14px; }

.experimentMetricGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.experimentMetricGrid article { padding: 12px; border-radius: var(--radius-md); background: var(--ice-50); box-shadow: var(--shadow-card); }
.experimentMetricGrid span, .experimentMetricGrid strong { display: block; }
.experimentMetricGrid span { color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); text-transform: uppercase; }
.experimentMetricGrid strong { margin-top: 7px; font-size: var(--type-md); }

.experimentControlCard { padding: 15px; border: 1px solid var(--ice-200); border-top: 3px solid var(--ice-300); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 80%, var(--ice-50)); box-shadow: var(--shadow-card); }
.experimentControlCard.classification-controlled { border-top-color: var(--glacier-500); }
.experimentControlCard.classification-partially-controlled { border-top-color: var(--warning); }
.experimentControlCard.classification-exploratory { border-top-color: var(--ice-300); }
.experimentControlCard header { display: flex; justify-content: space-between; gap: 12px; }
.experimentControlCard h3 { margin: 4px 0; }
.experimentControlCard p { margin: 8px 0 0; color: var(--ink-650); line-height: 1.5; }

.experimentTimeline { display: flex; gap: 24px; overflow-x: auto; padding: 12px 4px 14px; scrollbar-width: thin; }
.experimentTimeline > div { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; min-width: 180px; padding-right: 8px; }
.experimentTimeline > div:not(:last-child):after { position: absolute; top: 10px; right: -20px; left: 30px; height: 1px; background: var(--ice-200); content: ""; }
.experimentTimeline > div.complete:not(:last-child):after { background: var(--glacier-500); }
.experimentTimeline i { position: relative; z-index: 1; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--ice-300); border-radius: 50%; background: var(--surface); color: var(--ink-500); font-style: normal; font-size: var(--type-sm); line-height: 1; }
.experimentTimeline .complete i { border-color: var(--glacier-650); background: var(--glacier-650); color: white; }
.experimentTimeline span { position: relative; z-index: 1; display: grid; gap: 3px; padding-right: 4px; background: var(--surface); min-width: 0; }
.experimentTimeline strong { display: block; color: var(--ink-950); font-size: var(--type-sm); font-weight: var(--weight-heading); line-height: 1.25; letter-spacing: var(--track-display); overflow-wrap: anywhere; }
.experimentTimeline small { display: block; color: var(--ink-500); font-size: var(--type-sm); line-height: 1.25; }
.experimentTimeline .pending strong { color: var(--ink-650); font-weight: var(--weight-emphasis); }

/* Unified disclosure card — scientific plan, evidence record, draft definition, variant creator, confounder log, cancellation, cross-experiment compare */
.scientificDefinition, .structuredExperimentConclusion, .crossExperimentComparison,
.experimentDefinition, .experimentCancellation, .variantCreator, .manualConfounder { margin-top: 16px; }
.scientificDefinition > details, .structuredExperimentConclusion > details, .crossExperimentComparison > details,
.experimentDefinition > details, .experimentCancellation > details, .variantCreator, .manualConfounder > details {
  padding: 0; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden;
}
.scientificDefinition > details > summary, .structuredExperimentConclusion > details > summary, .crossExperimentComparison > details > summary,
.experimentDefinition > details > summary, .experimentCancellation > details > summary, .variantCreator > summary, .manualConfounder > details > summary {
  display: flex; align-items: center; min-height: 44px; padding: 12px 16px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-heading); letter-spacing: var(--track-display);
  list-style: none;
}
.scientificDefinition > details > summary::-webkit-details-marker,
.structuredExperimentConclusion > details > summary::-webkit-details-marker,
.crossExperimentComparison > details > summary::-webkit-details-marker,
.experimentDefinition > details > summary::-webkit-details-marker,
.experimentCancellation > details > summary::-webkit-details-marker,
.variantCreator > summary::-webkit-details-marker,
.manualConfounder > details > summary::-webkit-details-marker { display: none; }
.scientificDefinition > details > summary::before, .structuredExperimentConclusion > details > summary::before, .crossExperimentComparison > details > summary::before,
.experimentDefinition > details > summary::before, .experimentCancellation > details > summary::before, .variantCreator > summary::before, .manualConfounder > details > summary::before {
  display: block; margin-right: 10px;
  color: var(--glacier-650); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase;
}
.scientificDefinition > details > summary::before { content: "Scientific plan"; }
.structuredExperimentConclusion > details > summary::before { content: "Evidence record"; }
.crossExperimentComparison > details > summary::before { content: "Cross-experiment"; }
.experimentDefinition > details > summary::before { content: "Draft definition"; }
.experimentCancellation > details > summary::before { content: "Cancellation"; }
.variantCreator > summary::before { content: "New variant"; }
.manualConfounder > details > summary::before { content: "Confounding factor"; }
.scientificDefinition > details[open] > summary, .structuredExperimentConclusion > details[open] > summary, .crossExperimentComparison > details[open] > summary,
.experimentDefinition > details[open] > summary, .experimentCancellation > details[open] > summary, .variantCreator[open] > summary, .manualConfounder > details[open] > summary {
  border-bottom-color: var(--ice-200); background: var(--ice-50);
}
.scientificDefinition > details > summary:focus-visible, .structuredExperimentConclusion > details > summary:focus-visible, .crossExperimentComparison > details > summary:focus-visible,
.experimentDefinition > details > summary:focus-visible, .experimentCancellation > details > summary:focus-visible, .variantCreator > summary:focus-visible, .manualConfounder > details > summary:focus-visible {
  outline: 2px solid var(--glacier-500); outline-offset: -2px;
}
.scientificDefinition form, .structuredExperimentConclusion form,
.experimentDefinition form, .experimentCancellation form, .variantCreator form, .manualConfounder form { display: grid; gap: 14px; padding: 16px; margin: 0; }
.scientificDefinition form label, .structuredExperimentConclusion form label,
.experimentDefinition form label, .experimentCancellation form label, .variantCreator form label, .manualConfounder form label {
  display: grid; gap: 6px;
  color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase;
}
.scientificDefinition form textarea, .scientificDefinition form input, .scientificDefinition form select,
.structuredExperimentConclusion form textarea, .structuredExperimentConclusion form input, .structuredExperimentConclusion form select,
.experimentDefinition form textarea, .experimentDefinition form input, .experimentDefinition form select,
.experimentCancellation form textarea, .experimentCancellation form input, .experimentCancellation form select,
.variantCreator form textarea, .variantCreator form input, .variantCreator form select,
.manualConfounder form textarea, .manualConfounder form input, .manualConfounder form select {
  width: 100%; min-height: 38px; padding: 8px 10px;
  border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink-950); font: inherit; font-size: var(--type-sm); font-weight: var(--weight-body); letter-spacing: var(--track-body); text-transform: none;
}
.scientificDefinition form textarea, .structuredExperimentConclusion form textarea,
.experimentDefinition form textarea, .experimentCancellation form textarea, .variantCreator form textarea, .manualConfounder form textarea { resize: vertical; line-height: 1.5; }
.scientificDefinition form input:focus, .scientificDefinition form select:focus, .scientificDefinition form textarea:focus,
.structuredExperimentConclusion form input:focus, .structuredExperimentConclusion form select:focus, .structuredExperimentConclusion form textarea:focus,
.experimentDefinition form input:focus, .experimentDefinition form select:focus, .experimentDefinition form textarea:focus,
.experimentCancellation form input:focus, .experimentCancellation form select:focus, .experimentCancellation form textarea:focus,
.variantCreator form input:focus, .variantCreator form select:focus, .variantCreator form textarea:focus,
.manualConfounder form input:focus, .manualConfounder form select:focus, .manualConfounder form textarea:focus {
  outline: none; border-color: var(--glacier-500); box-shadow: 0 0 0 3px rgba(94,130,149,.12);
}
.scientificDefinition form fieldset, .structuredExperimentConclusion form fieldset,
.experimentDefinition form fieldset, .variantCreator form fieldset {
  margin: 0; padding: 12px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--ice-50);
}
.scientificDefinition form fieldset > legend, .structuredExperimentConclusion form fieldset > legend,
.experimentDefinition form fieldset > legend, .variantCreator form fieldset > legend {
  padding: 0 6px; color: var(--ink-500); font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase;
}
.scientificDefinition form > button[type="submit"], .structuredExperimentConclusion form > button[type="submit"],
.experimentDefinition form > button[type="submit"], .experimentCancellation form > button[type="submit"], .manualConfounder form > button[type="submit"] {
  justify-self: start; min-height: 36px; padding: 0 16px;
  border: 1px solid var(--glacier-650); border-radius: var(--radius-sm); background: var(--glacier-650);
  color: white; font: inherit; font-size: var(--type-sm); font-weight: var(--weight-emphasis); cursor: pointer;
}
.scientificDefinition form > button[type="submit"]:hover, .structuredExperimentConclusion form > button[type="submit"]:hover,
.experimentDefinition form > button[type="submit"]:hover, .experimentCancellation form > button[type="submit"]:hover, .manualConfounder form > button[type="submit"]:hover {
  background: color-mix(in srgb, var(--glacier-650) 88%, black);
}
/* Variant creator has two side-by-side submits (Assign / Create). Style both, primary emphasis on class="primary" */
.variantCreator form .historyActions { display: flex; flex-wrap: wrap; gap: 8px; }
.variantCreator form .historyActions button {
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink-650); font: inherit; font-size: var(--type-sm); font-weight: var(--weight-emphasis); cursor: pointer;
}
.variantCreator form .historyActions button.primary {
  border-color: var(--glacier-650); background: var(--glacier-650); color: white;
}
.variantCreator form .historyActions button:hover { border-color: var(--glacier-500); color: var(--ink-950); }
.variantCreator form .historyActions button.primary:hover { color: white; background: color-mix(in srgb, var(--glacier-650) 88%, black); }
/* Cancellation submit is destructive — override to danger treatment */
.experimentCancellation form > button[type="submit"] {
  border-color: var(--danger); background: var(--surface); color: var(--danger);
}
.experimentCancellation form > button[type="submit"]:hover {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--danger);
}

.scientificDefinition form > .historyFormGrid, .structuredExperimentConclusion form > .historyFormGrid,
.experimentDefinition form > .historyFormGrid, .variantCreator form > .historyFormGrid, .manualConfounder form > .historyFormGrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.scientificDefinition form > .historyFormGrid > label:has(textarea),
.structuredExperimentConclusion form > .historyFormGrid > label:has(textarea),
.experimentDefinition form > .historyFormGrid > label:has(textarea),
.variantCreator form > .historyFormGrid > label:has(textarea),
.manualConfounder form > .historyFormGrid > label:has(textarea) { grid-column: 1 / -1; }
.scientificDefinition p.fieldError, .structuredExperimentConclusion p.fieldError,
.experimentDefinition p.fieldError, .experimentCancellation p.fieldError, .variantCreator p.fieldError, .manualConfounder p.fieldError { margin: 0; min-height: 14px; color: var(--danger); font-size: var(--type-xs); text-transform: none; letter-spacing: var(--track-body); }

.experimentVariableEditor { display: grid; gap: 10px; }
.experimentVariableEditor > div {
  display: grid; grid-template-columns: 1fr 150px 1fr; gap: 8px;
  padding: 10px; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--surface);
}
.experimentVariableEditor > div input, .experimentVariableEditor > div select {
  min-height: 34px; text-transform: none; letter-spacing: var(--track-body); font-size: var(--type-sm); font-weight: var(--weight-body);
}

.crossExperimentComparison details > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.crossExperimentComparison article { padding: 14px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); }
.crossExperimentComparison p { color: var(--ink-650); line-height: 1.45; }
.crossExperimentComparison p strong { display: block; color: var(--ink-800); }

@media (max-width: 860px) {
  .experimentMetricGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crossExperimentComparison details > div { grid-template-columns: 1fr; }
  .workspaceActionGroup { align-items: stretch; flex-direction: column; }
  .experimentVariableEditor > div { grid-template-columns: 1fr; }
}


/* === Equipment Library form (on-brand redesign) === */
.equipmentForm { display: grid; gap: 0; min-width: 0; }
.equipmentFormHeader { padding: 16px 18px 14px; border-bottom: 1px solid var(--ice-200); }
.equipmentFormHeader h2 { margin: 4px 0 2px; font-size: var(--type-lg); letter-spacing: var(--track-display); font-weight: var(--weight-heading); line-height: var(--leading-tight); }
.equipmentFormHeader p { margin: 4px 0 0; color: var(--ink-500); font-size: var(--type-base); line-height: var(--leading-body); }
.equipmentFormBody { display: grid; gap: 14px; padding: 18px; }
.equipmentFormBody fieldset { min-width: 0; margin: 0; padding: 14px 14px 12px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--surface); }
.equipmentFormBody legend { padding: 0 6px; color: var(--ink-650); font-weight: var(--weight-heading); font-size: var(--type-sm); text-transform: uppercase; letter-spacing: var(--track-label); }
.equipmentFormHint { margin: 0 0 10px; color: var(--ink-500); font-size: var(--type-sm); line-height: var(--leading-body); }
.equipmentFormGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.equipmentFormGrid label { display: grid; align-content: start; gap: 5px; min-width: 0; color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.equipmentFormGrid .wide { grid-column: 1 / -1; }
.equipmentFormGrid input,
.equipmentFormGrid select,
.equipmentFormGrid textarea { width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid var(--ice-300); border-radius: 7px; background: var(--surface); color: var(--ink-950); font: inherit; font-size: var(--type-base); font-weight: var(--weight-body); font: inherit; font-size: var(--type-base); font-weight: var(--weight-body); }
.equipmentFormGrid input:focus-visible,
.equipmentFormGrid select:focus-visible,
.equipmentFormGrid textarea:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 1px; border-color: var(--glacier-500); }
.equipmentFormGrid textarea { min-height: 76px; resize: vertical; line-height: 1.4; }
.equipmentFormGrid select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235e8295' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 L6 6.5 L11 1.5'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px; }
.inputWithUnit { display: flex; align-items: stretch; min-height: 44px; border: 1px solid var(--ice-300); border-radius: 7px; background: var(--surface); overflow: hidden; }
.inputWithUnit:focus-within { outline: 2px solid var(--glacier-500); outline-offset: 1px; border-color: var(--glacier-500); }
.inputWithUnit input { flex: 1; min-width: 0; min-height: 42px; border: 0; background: transparent; padding: 9px 10px; color: var(--ink-950); font: inherit; font-size: var(--type-base); font-weight: var(--weight-body); }
.inputWithUnit input:focus-visible { outline: 0; }
.inputWithUnit small { display: flex; align-items: center; padding: 0 12px; color: var(--ink-500); background: var(--ice-50); border-left: 1px solid var(--ice-200); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.equipmentFormFooter { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--ice-200); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: saturate(1.2) blur(6px); -webkit-backdrop-filter: saturate(1.2) blur(6px); }
.equipmentFormFooter button { min-height: 36px; padding: 0 16px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-650); font: inherit; font-size: var(--type-base); font-weight: var(--weight-emphasis); cursor: pointer;  font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.equipmentFormFooter button:hover { border-color: var(--glacier-500); color: var(--ink-950); }
.equipmentFormFooter button.primary { border-color: var(--glacier-650); background: var(--glacier-650); color: white; }
.equipmentFormFooter button.primary:hover { background: color-mix(in srgb, var(--glacier-650) 88%, black); border-color: color-mix(in srgb, var(--glacier-650) 88%, black); }
.equipmentFormFooter button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
/* Override the panelBody padding for the form since it manages its own */
.operationsDetail > .equipmentForm { padding: 0; }
@media (max-width: 900px) {
  .equipmentFormGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .equipmentFormGrid { grid-template-columns: 1fr; }
  .equipmentFormGrid .wide { grid-column: auto; }
  .equipmentFormHeader,
  .equipmentFormBody,
  .equipmentFormFooter { padding-left: 14px; padding-right: 14px; }
}


/* === Process Profile form (on-brand redesign) === */
.processProfileForm { display: grid; gap: 0; min-width: 0; }
.processProfileFormHeader { padding: 16px 18px 14px; border-bottom: 1px solid var(--ice-200); }
.processProfileFormHeader h2 { margin: 4px 0 2px; font-size: var(--type-lg); letter-spacing: var(--track-display); font-weight: var(--weight-heading); line-height: var(--leading-tight); }
.processProfileFormHeader p { margin: 4px 0 0; color: var(--ink-500); font-size: var(--type-base); line-height: var(--leading-body); }
.processProfileFormBody { display: grid; gap: 14px; padding: 18px; }
.processProfileFormBody fieldset { min-width: 0; margin: 0; padding: 14px 14px 12px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--surface); }
.processProfileFormBody legend { padding: 0 6px; color: var(--ink-650); font-weight: var(--weight-heading); font-size: var(--type-sm); text-transform: uppercase; letter-spacing: var(--track-label); }
.processProfileFormHint { margin: 0 0 10px; color: var(--ink-500); font-size: var(--type-sm); line-height: var(--leading-body); }
.processProfileFormHint em { font-style: normal; font-weight: var(--weight-heading); color: var(--ink-800); }
.processProfileFormGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.processProfileFormGrid label { display: grid; align-content: start; gap: 5px; min-width: 0; color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.processProfileFormGrid .wide { grid-column: 1 / -1; }
.processProfileFormGrid input,
.processProfileFormGrid select,
.processProfileFormGrid textarea { width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid var(--ice-300); border-radius: 7px; background: var(--surface); color: var(--ink-950); font: inherit; font-size: var(--type-base); font-weight: var(--weight-body); font: inherit; font-size: var(--type-base); font-weight: var(--weight-body); }
.processProfileFormGrid input:focus-visible,
.processProfileFormGrid select:focus-visible,
.processProfileFormGrid textarea:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 1px; border-color: var(--glacier-500); }
.processProfileFormGrid textarea { min-height: 76px; resize: vertical; line-height: 1.4; }
.processProfileFormGrid select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235e8295' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 L6 6.5 L11 1.5'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px; }
.processProfileFormBody .inputWithUnit { min-height: 44px; }

/* Per-stage cards inside the Process Profile form */
.processProfileFormBody .stagesFieldset { padding-bottom: 14px; }
.processProfileFormBody .processStageEditor { display: grid; gap: 10px; margin-top: 4px; padding: 0; background: transparent; border: 0; }
.stageCard { border: 1px solid var(--ice-200); border-radius: 10px; background: var(--ice-50); overflow: hidden; }
.stageCard[open] { background: var(--surface); border-color: var(--ice-300); }
.stageCard > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: var(--weight-emphasis); font-size: var(--type-base); color: var(--ink-800); }
.stageCard > summary::-webkit-details-marker { display: none; }
.stageCard > summary::after { content: "›"; margin-left: auto; color: var(--ink-500); font-size: var(--type-lg); font-weight: var(--weight-body); transition: transform .15s ease; }
.stageCard[open] > summary::after { transform: rotate(90deg); }
.stageCard > summary:hover { background: color-mix(in srgb, var(--ice-100) 60%, transparent); }
.stageCard > summary:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: -2px; }
.stageIndex { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ice-150); color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-heading); }
.stageCard[open] .stageIndex { background: var(--glacier-500); color: white; }
.stageName { font-size: var(--type-base); letter-spacing: var(--track-body); }
.stageBadge { padding: 3px 9px; border-radius: 999px; font-size: var(--type-xs); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.stageBadge--included { background: var(--ice-100); color: var(--glacier-750); }
.stageBadge--optional { background: color-mix(in srgb, #d9a83a 22%, var(--surface)); color: #7f5b0f; }
.stageBadge--skipped { background: var(--ice-100); color: var(--ink-500); }
.stageCardBody { display: grid; gap: 12px; padding: 4px 14px 14px; }
.stageToggles { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ice-100) 55%, transparent); }
.stageToggle { display: inline-flex; align-items: center; gap: 7px; font-size: var(--type-sm); font-weight: var(--weight-emphasis); color: var(--ink-800); cursor: pointer; }
.stageToggle input { width: 16px; height: 16px; accent-color: var(--glacier-600); }

/* Sticky footer + responsive */
.processProfileFormFooter { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--ice-200); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: saturate(1.2) blur(6px); -webkit-backdrop-filter: saturate(1.2) blur(6px); }
.processProfileFormFooter button { min-height: 36px; padding: 0 16px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-650); font: inherit; font-size: var(--type-base); font-weight: var(--weight-emphasis); cursor: pointer;  font-size: var(--type-base); font-weight: var(--weight-emphasis); }
.processProfileFormFooter button:hover { border-color: var(--glacier-500); color: var(--ink-950); }
.processProfileFormFooter button.primary { border-color: var(--glacier-650); background: var(--glacier-650); color: white; }
.processProfileFormFooter button.primary:hover { background: color-mix(in srgb, var(--glacier-650) 88%, black); border-color: color-mix(in srgb, var(--glacier-650) 88%, black); }
.processProfileFormFooter button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
.operationsDetail > .processProfileForm { padding: 0; }
@media (max-width: 900px) {
  .processProfileFormGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .processProfileFormGrid { grid-template-columns: 1fr; }
  .processProfileFormGrid .wide { grid-column: auto; }
  .processProfileFormHeader,
  .processProfileFormBody,
  .processProfileFormFooter { padding-left: 14px; padding-right: 14px; }
  .stageToggles { gap: 10px; }
}


/* === Create Experiment dialog (on-brand redesign) === */
.experimentDialog--v2 { width: min(720px, 100%); max-height: calc(100vh - 36px); overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.experimentDialog--v2 form { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 0; }
.experimentDialogHeader { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ice-200); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: saturate(1.2) blur(6px); -webkit-backdrop-filter: saturate(1.2) blur(6px); }
.experimentDialogHeader h2 { margin: 5px 0 4px; font-size: var(--type-xl); letter-spacing: var(--track-display); font-weight: var(--weight-heading); }
.experimentDialogHeader p { margin: 4px 0 0; color: var(--ink-500); font-size: var(--type-base); line-height: 1.45; }
.experimentDialogHeader p strong { color: var(--ink-800); font-weight: var(--weight-heading); }
.experimentDialogHeader > button { border: 0; background: transparent; color: var(--ink-500); font-size: var(--type-2xl); padding: 4px 8px; cursor: pointer; line-height: 1; border-radius: var(--radius-sm); }
.experimentDialogHeader > button:hover { background: var(--ice-100); color: var(--ink-800); }
.experimentDialogHeader > button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 1px; }
.experimentDialogBody { display: grid; gap: 14px; padding: 18px 20px; overflow-y: auto; flex: 1; min-height: 0; }
.experimentDialogBody fieldset { min-width: 0; margin: 0; padding: 14px 14px 12px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--surface); }
.experimentDialogBody legend { padding: 0 6px; color: var(--ink-650); font-weight: var(--weight-heading); font-size: var(--type-base); letter-spacing: var(--track-display); }
.experimentDialogHint { margin: 0 0 10px; color: var(--ink-500); font-size: var(--type-base); line-height: 1.4; }
.experimentDialogGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.experimentDialogGrid > label { display: grid; align-content: start; gap: 5px; min-width: 0; color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.experimentDialogGrid .wide { grid-column: 1 / -1; }
.experimentDialogGrid input,
.experimentDialogGrid select,
.experimentDialogGrid textarea { width: 100%; min-width: 0; min-height: 42px; padding: 9px 10px; border: 1px solid var(--ice-300); border-radius: 7px; background: var(--surface); color: var(--ink-950); font: inherit; font-size: var(--type-base); }
.experimentDialogGrid input:focus-visible,
.experimentDialogGrid select:focus-visible,
.experimentDialogGrid textarea:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 1px; border-color: var(--glacier-500); }
.experimentDialogGrid textarea { resize: vertical; line-height: 1.4; min-height: 60px; }
.experimentDialogGrid select[multiple] { min-height: 150px; padding: 6px; }
/* Listbox rows do not inherit from the <select>; the UA paints them in the
   system font with its own highlight. Bring them onto the type scale. */
.experimentDialogGrid select[multiple] option,
.batchPlanFields select[multiple] option { padding: 6px 8px; border-radius: var(--radius-sm); color: var(--ink-950); font: inherit; font-size: var(--type-base); line-height: 1.35; }
.experimentDialogGrid select[multiple] option:checked,
.batchPlanFields select[multiple] option:checked { background: var(--glacier-500) linear-gradient(0deg, var(--glacier-500), var(--glacier-500)); color: white; }
.experimentDialogGrid select[multiple]:focus option:checked,
.batchPlanFields select[multiple]:focus option:checked { background: var(--glacier-650) linear-gradient(0deg, var(--glacier-650), var(--glacier-650)); }
.experimentDialogGrid select:not([multiple]) { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235e8295' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 L6 6.5 L11 1.5'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px; }
.experimentDialogFooter { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--ice-200); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: saturate(1.2) blur(6px); -webkit-backdrop-filter: saturate(1.2) blur(6px); }
.experimentDialogFooter button { min-height: 36px; padding: 0 16px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-650); font: inherit; font-size: var(--type-base); font-weight: var(--weight-emphasis); cursor: pointer; }
.experimentDialogFooter button:hover { border-color: var(--glacier-500); color: var(--ink-950); }
.experimentDialogFooter button.primary { border-color: var(--glacier-650); background: var(--glacier-650); color: white; }
.experimentDialogFooter button.primary:hover { background: color-mix(in srgb, var(--glacier-650) 88%, black); border-color: color-mix(in srgb, var(--glacier-650) 88%, black); }
.experimentDialogFooter button:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 2px; }
.experimentDialog--v2 .historyDialogNote { margin: 0; padding: 11px 12px; border-radius: var(--radius-sm); background: var(--ice-100); color: var(--ink-650); font-size: var(--type-base); line-height: 1.4; }
@media (max-width: 620px) {
  .experimentDialog--v2 { width: 100%; max-height: 100vh; border-radius: 0; }
  .experimentDialogGrid { grid-template-columns: 1fr; }
  .experimentDialogGrid .wide { grid-column: auto; }
  .experimentDialogHeader,
  .experimentDialogBody,
  .experimentDialogFooter { padding-left: 14px; padding-right: 14px; }
}


/* === Experiment template select — pair with .workspaceAction primary === */
.workspaceActionGroup select,
#experimentTemplate {
  min-height: 34px;
  min-width: 180px;
  max-width: 260px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--ice-300);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--ink-800);
  font: inherit;
  font-size: var(--type-sm);
  font-weight: var(--weight-emphasis);
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235e8295' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
  transition: border-color .12s ease, background-color .12s ease;
}
.workspaceActionGroup select:hover,
#experimentTemplate:hover {
  border-color: var(--glacier-500);
  background-color: var(--ice-50);
}
.workspaceActionGroup select:focus-visible,
#experimentTemplate:focus-visible {
  outline: 2px solid var(--glacier-500);
  outline-offset: 1px;
  border-color: var(--glacier-500);
}
@media (max-width: 620px) {
  .workspaceActionGroup select,
  #experimentTemplate {
    max-width: none;
    width: 100%;
  }
}


/* === Production Run — on-brand hierarchy pass ===
   Layered after DS-030B so pinned rules (measurement cards, timeline li,
   .productionMassInput focus, etc.) stay intact.  This adds:
   – proper section rhythm and typography (headers, kickers, values)
   – differentiated active-batch chrome from status/reference/log sections
   – legible label sizes (no more 8–10px axis labels)
   – a clear primary action pattern in the workspace header. */

.productionRunCanvas { max-width: 1180px; padding-top: 6px; }
.productionRunCanvas > .workspaceHeader { padding: 20px 24px 18px; margin-bottom: 4px; border-bottom: 1px solid var(--ice-200); }
.productionRunCanvas > .workspaceHeader h1 { font-size: var(--type-2xl); letter-spacing: var(--track-display); font-weight: var(--weight-heading); }
.productionRunCanvas > .workspaceHeader .eyebrow { font-size: var(--type-sm); }
.productionRunCanvas > .workspaceHeader p { margin: 4px 0 0; color: var(--ink-500); font-size: var(--type-base); line-height: 1.45; }
.productionRunCanvas > .workspaceHeader small { display: block; margin-top: 4px; color: var(--ink-500); font-size: var(--type-sm); }
.productionRunCanvas > .workspaceHeader .productionActiveStatus { align-self: flex-start; margin-top: 4px; padding: 5px 12px; border-radius: 999px; font-size: var(--type-sm); font-weight: var(--weight-heading); letter-spacing: var(--track-label); }

/* Active-batch banner reads as a proper header strip, not a Soviet nameplate */
.productionRunBanner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border: 1px solid var(--ice-200); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--ice-100) 60%, var(--surface))); box-shadow: var(--shadow-soft); }
.productionRunBanner span { color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.productionRunBanner strong { color: var(--ink-950); font-size: var(--type-md); font-weight: var(--weight-emphasis); letter-spacing: var(--track-display); }


/* Section headers across all production panels — consistent scale, kicker on top */
.batchExecutionControls,
.executionGuidance,
.productionRecipeReference,
.productionStatistics,
.productionTimeline,
.productionCriticalLog,
.productionMeasurements,
.batchSessionProgress,
.productionProcess { padding: 18px 20px; border: 1px solid var(--ice-200); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-soft); }
.batchExecutionControls > div > strong,
.executionGuidance h2, .executionGuidance h3,
.productionRecipeReference h2,
.productionStatistics h2,
.productionTimeline h2,
.productionCriticalLog h2,
.productionMeasurements h2,
.batchSessionProgress h2,
.productionProcess h2 { color: var(--ink-950); font-size: var(--type-md); font-weight: var(--weight-heading); letter-spacing: var(--track-display); margin: 0; }
.productionRunSummary .panelKicker { display: inline-block; margin-bottom: 4px; color: var(--glacier-650); font-size: var(--type-sm); font-weight: var(--weight-kicker); letter-spacing: var(--track-label); text-transform: uppercase; }
.productionRunSummary section header,
.productionRunSummary section > header { align-items: flex-start; margin-bottom: 12px; }
.productionRunSummary section header p { margin-top: 3px; color: var(--ink-500); font-size: var(--type-base); line-height: 1.4; }

/* Facts grid: readable labels + values, not tiny 8/11 */
.productionRunFacts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 22px; margin: 0; }
.productionRunFacts div { padding: 12px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--ice-100) 60%, var(--surface)); border: 0; }
.productionRunFacts dt { color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-emphasis); letter-spacing: var(--track-body); text-transform: none; }
.productionRunFacts dd { margin-top: 4px; color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-heading); overflow-wrap: anywhere; }

/* Statistics + churn cards: same treatment */
.productionStatistics dl div,
.productionChurnLog dl div { padding: 12px 14px; border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--ice-100) 60%, var(--surface)); }
.productionStatistics dt,
.productionChurnLog dt { color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.productionStatistics dd,
.productionChurnLog dd { color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-heading); margin-top: 4px; }


/* Batch Assistant guidance findings: card articles get real hierarchy */
.executionGuidance article { padding: 12px 14px; gap: 6px; }
.executionGuidance article > span { padding: 2px 8px; border-radius: 999px; background: var(--ice-100); color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; align-self: flex-start; }
.executionGuidance article h3 { font-size: var(--type-base); font-weight: var(--weight-heading); letter-spacing: var(--track-display); }
.executionGuidance article p { color: var(--ink-800); font-size: var(--type-base); line-height: 1.45; }
.executionGuidance article details summary { color: var(--glacier-750); font-size: var(--type-sm); font-weight: var(--weight-emphasis); cursor: pointer; }

/* Batch execution controls (Pause/Resume strip) */
.batchExecutionControls > div > strong { font-size: var(--type-base); font-weight: var(--weight-heading); }
.batchExecutionControls > div > span { color: var(--ink-500); font-size: var(--type-base); margin-top: 3px; }
.batchExecutionControls button { min-height: 40px; padding: 0 16px; border: 1px solid var(--glacier-650); border-radius: var(--radius-sm); background: var(--glacier-650); color: white; font: inherit; font-size: var(--type-base); font-weight: var(--weight-emphasis); cursor: pointer; }
.batchExecutionControls button:hover { background: color-mix(in srgb, var(--glacier-650) 88%, black); border-color: color-mix(in srgb, var(--glacier-650) 88%, black); }
.batchExecutionControls.isBatchPaused button,
.isBatchPaused button { border-color: #a5852d; background: #a5852d; }

/* Read-only reference recipe */
.productionRecipeReference .readOnlyBadge { padding: 4px 10px; border-radius: 999px; background: var(--ice-100); color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-heading); letter-spacing: var(--track-label); text-transform: uppercase; }
.productionRecipeReference dl div { padding: 12px 14px; border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--ice-100) 60%, var(--surface)); }
.productionRecipeReference dt { color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-emphasis); }
.productionRecipeReference dd { color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-heading); margin-top: 4px; }
.productionRecipeReference ol li { padding: 10px 12px; border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--ice-100) 55%, var(--surface)); font-size: var(--type-base); }
.productionRecipeReference ol li span { color: var(--ink-800); }
.productionRecipeReference ol li strong { color: var(--ink-950); font-weight: var(--weight-heading); font-variant-numeric: tabular-nums; }
.productionRecipeReference > header p { max-width: 760px; margin: 5px 0 0; color: var(--ink-500); font-size: var(--type-sm); line-height: 1.45; }
.productionReferenceIngredients,.ingredientSnapshotGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.productionReferenceIngredient,.ingredientSnapshotCard { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--ingredient-border); border-left: 4px solid var(--ingredient-color); border-radius: var(--radius-md); background: var(--ingredient-gradient); }
.ingredientSnapshotCard { height: 51px; min-height: 51px; padding: 7px 12px; }
.productionReferenceIngredient .historicalIngredientIdentity,.ingredientSnapshotCard .historicalIngredientIdentity { border-left: 0; padding-left: 0; }
.productionReferenceIngredient > strong,.ingredientSnapshotCard > strong { color: var(--ink-950); font-size: var(--type-sm); font-weight: var(--weight-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media(max-width:700px) { .productionReferenceIngredients,.ingredientSnapshotGrid { grid-template-columns: 1fr; } }


/* Critical Log — sub-blocks (Churn, Overrun) get proper subheads */
.productionChurnLog h3,
.productionOverrunLog h3 { font-size: var(--type-base); font-weight: var(--weight-heading); letter-spacing: var(--track-display); color: var(--ink-800); margin: 0 0 4px; }
.productionTemperatureLog label,
.productionOverrunLog label,
.productionChurnLog label { font-size: var(--type-sm); font-weight: var(--weight-emphasis); color: var(--ink-650); }
.productionTemperatureLog label > span:first-child,
.productionOverrunLog label > span:first-child,
.productionChurnLog label > span:first-child { color: var(--ink-650); font-size: var(--type-sm); font-weight: var(--weight-emphasis); letter-spacing: var(--track-body); text-transform: none; }
.productionTemperatureLog input,
.productionOverrunLog input,
.productionChurnLog input,
.productionChurnLog select { min-height: 42px; font-size: var(--type-base); }
.productionChurnLog select {
  width: 100%;
  min-width: 0;
  padding: 0 34px 0 11px;
  border: 1px solid var(--ice-300);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235e8295' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px 8px;
  color: var(--ink-950);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  text-overflow: ellipsis;
}
.productionChurnLog select:hover { border-color: var(--ice-400); }
.productionChurnLog select:focus-visible { border-color: var(--glacier-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--glacier-500) 16%, transparent); }
.productionTemperatureLog small,
.productionOverrunLog small { padding: 0 12px; color: var(--ink-500); font-size: var(--type-base); }
.productionOverrunLog p { margin: 8px 0 4px; font-size: var(--type-base); color: var(--ink-800); }
.productionOverrunLog p strong { color: var(--ink-950); }
.productionOverrunLog > small { display: block; margin-top: 6px; color: var(--ink-500); font-size: var(--type-sm); }

/* Process stages — bigger, calmer, index number gets weight */
.productionStage summary { grid-template-columns: 30px minmax(140px,1fr) auto; min-height: 56px; padding: 12px 14px; }
.productionStage summary > span { width: 28px; height: 28px; font-size: var(--type-sm); background: var(--ice-150); }
.productionStage.isCurrent summary > span { background: var(--glacier-650); color: white; }
.productionStage summary strong { font-size: var(--type-base); font-weight: var(--weight-emphasis); letter-spacing: var(--track-display); }
.productionStage summary small { font-size: var(--type-sm); color: var(--ink-500); margin-top: 2px; }
.productionStage summary em { font-size: var(--type-sm); color: var(--ink-500); font-style: normal; }
.productionStageBody { padding: 8px 16px 16px 52px; }
.productionStageFields label,
.productionStageNote > span:first-child { font-size: var(--type-sm); font-weight: var(--weight-emphasis); color: var(--ink-650); text-transform: none; letter-spacing: var(--track-body); }
.productionStageNote textarea { min-height: 60px; padding: 8px 10px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-size: var(--type-base); line-height: 1.4; }

/* Measurement progress line — quiet header */
.productionMeasurements > header p { font-size: var(--type-base); color: var(--ink-500); }

/* Ingredient measurement labels ("TARGET", "ACTUAL MASS", "DELTA") — bump from 8px */
.productionTarget > span,
.productionActual > span:first-child,
.productionVariance > span,
.productionNote > span { font-size: var(--type-sm); letter-spacing: var(--track-label); color: var(--ink-500); }
.productionTarget strong,
.productionVariance strong { font-size: var(--type-base); }
.productionVariance small { font-size: var(--type-sm); }


/* === Production Run — inner surface typography and spacing pass ===
   Targets the interior boxes: process execution steps, checklists,
   timers, temperature blocks, note forms, ingredient weighing cards,
   completion sub-sections (yield, overrun, density, evaluation,
   defects, final notes), and the dashboards.  Layered after prior
   passes, preserves pinned rules:
     – .executionTimer input {font-size:16px} (iOS zoom guard)
     – .ratingGrid span {width:42px;height:42px}
     – .batchCompletionReview base + 520px media
     – .completionMetrics 520px media
*/

/* --- Process Execution: status header row --- */
.productionExecution > header { align-items: flex-start; gap: 16px; }
.productionExecution > header .panelKicker { color: var(--glacier-650); font-size: var(--type-sm); font-weight: var(--weight-kicker); letter-spacing: var(--track-label); text-transform: uppercase; }
.productionExecution > header h2 { font-size: var(--type-md); font-weight: var(--weight-heading); letter-spacing: var(--track-display); color: var(--ink-950); margin: 2px 0 0; }
.productionExecution > header p { margin: 4px 0 0; font-size: var(--type-base); color: var(--ink-500); }
.productionExecution > header > .statusPill { align-self: center; padding: 5px 12px; border-radius: 999px; font-size: var(--type-sm); font-weight: var(--weight-heading); background: var(--ice-100); color: var(--glacier-750); }


/* --- Process Execution: status tiles (Current step / Elapsed / Timer / Completion) --- */
.productionExecutionStatus { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.productionExecutionStatus div { padding: 12px 14px; border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--ice-100) 60%, var(--surface)); }
.productionExecutionStatus dt { color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-emphasis); letter-spacing: var(--track-body); }
.productionExecutionStatus dd { color: var(--ink-950); font-size: var(--type-md); font-weight: var(--weight-heading); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* --- Process Execution: individual step summary bars --- */
.executionStep summary { min-height: 56px; padding: 12px 14px; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; }
.executionStep summary > span { width: 30px; height: 30px; font-size: var(--type-base); background: var(--ice-150); color: var(--glacier-750); font-weight: var(--weight-heading); }
.executionStep.isCurrent summary > span { background: var(--glacier-650); color: white; }
.executionStep.isComplete summary > span { background: var(--glacier-650); color: white; }
.executionStep summary strong { font-size: var(--type-base); font-weight: var(--weight-emphasis); letter-spacing: var(--track-display); color: var(--ink-950); }
.executionStep summary small { font-size: var(--type-sm); color: var(--ink-500); margin-top: 2px; }
.executionStep summary em { font-size: var(--type-sm); color: var(--ink-500); font-style: normal; }
.executionStepBody { padding: 14px; gap: 14px; }

/* --- Ingredient Weighing checklist rows --- */
.executionChecklist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 4px; }
.executionChecklist label { min-height: 46px; padding: 10px 12px; border: 0; border-radius: var(--radius-md); background: var(--ice-50); font-size: var(--type-base); color: var(--ink-800); }
.executionChecklist input { width: 18px; height: 18px; accent-color: var(--glacier-650); }
@media (max-width: 700px) { .executionChecklist { grid-template-columns: 1fr; } }


/* --- Execution timer + temperature blocks (Heat, Chill, etc.) --- */
.executionTimer,
.executionTemperature { padding: 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--ice-100) 55%, var(--surface)); border: 0; align-items: end; gap: 14px; }
.executionTimer > div:first-child > span,
.executionTemperature > div > span:first-child { color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-emphasis); letter-spacing: var(--track-body); }
.executionTimer > div:first-child > strong,
.executionTemperature > div > strong { font-size: var(--type-xl); font-weight: var(--weight-heading); color: var(--ink-950); font-variant-numeric: tabular-nums; letter-spacing: var(--track-display); }
.executionTimer > div:first-child > small,
.executionTemperature > div > small { font-size: var(--type-sm); color: var(--ink-500); margin-top: 2px; }
.executionTimer label,
.executionTemperature label,
.executionNoteForm label { font-size: var(--type-sm); font-weight: var(--weight-emphasis); color: var(--ink-650); }
.executionTimer input,
.executionTemperature input { padding: 8px 10px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); }
.executionTimer > div:last-child { gap: 8px; }
.executionTimer button,
.executionTemperature button { min-height: 40px; padding: 0 14px; border: 1px solid var(--glacier-500); border-radius: var(--radius-sm); background: var(--surface); color: var(--glacier-750); font: inherit; font-size: var(--type-base); font-weight: var(--weight-emphasis); cursor: pointer; }
.executionTimer button:hover { border-color: var(--glacier-650); background: var(--ice-50); }

/* --- Step note form --- */
.executionNoteForm { padding: 12px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--ice-50); }
.executionNoteForm input { padding: 8px 10px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--type-base); }
.executionNoteForm button { min-height: 40px; padding: 0 16px; border: 1px solid var(--glacier-650); border-radius: var(--radius-sm); background: var(--glacier-650); color: white; font: inherit; font-size: var(--type-base); font-weight: var(--weight-emphasis); cursor: pointer; }
.executionNoteForm button:hover { background: color-mix(in srgb, var(--glacier-650) 88%, black); border-color: color-mix(in srgb, var(--glacier-650) 88%, black); }

/* --- Recorded step notes list --- */
.executionNotes li { padding: 10px 12px; border-left: 3px solid var(--glacier-500); border-radius: var(--radius-sm); background: var(--ice-50); }
.executionNotes time { font-size: var(--type-sm); color: var(--ink-500); }
.executionNotes span { font-size: var(--type-base); color: var(--ink-800); }


/* --- Step Start/Complete/Reopen action row --- */
.productionStageActions button { min-height: 40px; padding: 0 16px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-800); font: inherit; font-size: var(--type-base); font-weight: var(--weight-emphasis); cursor: pointer; }
.productionStageActions button.primary { border-color: var(--glacier-650); background: var(--glacier-650); color: white; }
.productionStageActions button.primary:hover { background: color-mix(in srgb, var(--glacier-650) 88%, black); border-color: color-mix(in srgb, var(--glacier-650) 88%, black); }

/* --- Batch Completion Review: table of contents card --- */
.batchCompletionReview { padding: 20px; border: 1px solid var(--ice-200); box-shadow: var(--shadow-soft); background: var(--surface); }
.batchCompletionReview > header .panelKicker { color: var(--glacier-650); font-size: var(--type-sm); font-weight: var(--weight-kicker); letter-spacing: var(--track-label); text-transform: uppercase; }
.batchCompletionReview h3 { font-size: var(--type-md); font-weight: var(--weight-heading); letter-spacing: var(--track-display); color: var(--ink-950); }
.batchCompletionReview > header .statusPill { padding: 5px 12px; border-radius: 999px; background: var(--ice-100); color: var(--glacier-750); font-size: var(--type-sm); font-weight: var(--weight-heading); }

/* Completion metrics tiles (Formula / Version / Run / Date / Operator / Target / Actual / Variance / Elapsed / Steps) */
.completionMetrics > div { padding: 12px 14px; border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--ice-100) 60%, var(--surface)); }
.completionMetrics dt { color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-emphasis); letter-spacing: var(--track-body); text-transform: none; }
.completionMetrics dd { color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-heading); margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.completionReviewNotes { padding: 12px 14px; margin: 14px 0 0; border-radius: var(--radius-md); background: var(--ice-50); font-size: var(--type-base); color: var(--ink-800); line-height: 1.5; }
.completionReviewNotes strong { color: var(--ink-950); font-weight: var(--weight-heading); }


/* Completion ingredient preview (target/actual/variance per ingredient) */
/* Ingredient boxes — same object as a bench row (.formulaTable tbody tr):
   radius-md, family gradient, 4px identity bar, 6px air between rows, on
   surface-soft. The identity component drops its own inner bar (as
   .productionMeasurement does) so the box carries the color once. */
.completionIngredientPreview { gap: 6px; padding: 6px 8px; border: 0; border-radius: var(--radius-md); overflow: visible; background: var(--surface-soft); }
.completionIngredientPreview article { min-height: 0; padding: 5px 12px; gap: 14px; border: 0; border-left: 4px solid var(--ingredient-color); border-radius: var(--radius-md); background: var(--ingredient-gradient); box-shadow: none; }
.completionIngredientPreview article + article { border-top: 0; }
.completionIngredientPreview .historicalIngredientIdentity { border-left: 0; padding-left: 0; }
/* Label + value on ONE line (bench rows are single-line). The stacked
   dt/dd was what made these taller than a bench row. */
.completionIngredientPreview dl { gap: 10px; }
.completionIngredientPreview dl > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.completionIngredientPreview dt { font-size: var(--type-xs); letter-spacing: var(--track-label); color: var(--ink-500); white-space: nowrap; }
.completionIngredientPreview dd { color: var(--ink-950); font-size: var(--type-sm); font-weight: var(--weight-heading); margin: 0; white-space: nowrap; }
.completionIngredientPreview .historicalIngredientIdentity strong { font-size: var(--type-sm); }
.completionIngredientPreview .historicalIngredientIdentity small { font-size: var(--type-xs); }
/* :last-child — the identity block is ALSO a direct-child span; a bare
   `article > span` was wrapping the ingredient name in badge styling. */
.completionIngredientPreview article > span:last-child { padding: 3px 9px; border-radius: 999px; background: var(--ice-100); color: var(--ink-800); font-size: var(--type-sm); font-weight: var(--weight-heading); align-self: center; justify-self: end; }

/* --- Completion Workflow: collapsible sub-sections (Yield, Overrun, Density, Evaluation, Defects, Notes) --- */
.productionCompletionWorkflow > header h2 { font-size: var(--type-lg); font-weight: var(--weight-heading); letter-spacing: var(--track-display); color: var(--ink-950); }
.productionCompletionWorkflow > header p { font-size: var(--type-base); color: var(--ink-500); }
.productionCompletionWorkflow details { border: 1px solid var(--ice-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); background: var(--surface); }
.productionCompletionWorkflow summary { min-height: 52px; padding: 14px 18px; font-size: var(--type-base); font-weight: var(--weight-emphasis); color: var(--ink-950); letter-spacing: var(--track-display); }
.productionCompletionWorkflow summary::marker { color: var(--ink-500); }
.completionSectionBody { padding: 18px; gap: 16px; background: color-mix(in srgb, var(--ice-50) 55%, var(--surface)); }
.completionSectionBody > p { color: var(--ink-500); font-size: var(--type-base); line-height: 1.5; margin: 0; }

/* Completion input grid (number fields for Mix mass, Finished mass, etc.) */
.completionInputGrid,
.completionTextGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.completionInputGrid label,
.completionTextGrid label { font-size: var(--type-base); font-weight: var(--weight-emphasis); color: var(--ink-650); gap: 6px; }
.completionInputGrid label > span:first-child,
.completionTextGrid label > span:first-child { font-size: var(--type-base); color: var(--ink-650); font-weight: var(--weight-emphasis); }

/* The numeric input group used across yield/overrun/density */
.productionCompletionNumber { border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); }
.productionCompletionNumber:focus-within { border-color: var(--glacier-500); box-shadow: 0 0 0 2px color-mix(in srgb, var(--glacier-500) 22%, transparent); }
.productionCompletionNumber input { padding: 0 12px; font-size: var(--type-md); font-weight: var(--weight-heading); color: var(--ink-950); font-variant-numeric: tabular-nums; }
.productionCompletionNumber small { padding: 0 12px; color: var(--ink-500); font-size: var(--type-base); }

/* Completion textarea (Melt-test notes, Final summary, etc.) */
.completionSectionBody textarea,
.completionTextGrid textarea { padding: 10px 12px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-size: var(--type-base); line-height: 1.5; min-height: 76px; resize: vertical; }
/* :not([type]) — several completion inputs are bare <input name=…> with no
   type attribute, which [type="text"] does not match. Descendant combinator
   because .completionInputGrid nests the labels one level down. */
.completionSectionBody label input:not([type]),
.completionSectionBody label input[type="text"],
.completionSectionBody label select { width: 100%; min-width: 0; padding: 8px 12px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-950); font: inherit; font-size: var(--type-base); min-height: 40px; }
.completionSectionBody label input:not([type]):focus-visible,
.completionSectionBody label input[type="text"]:focus-visible,
.completionSectionBody label select:focus-visible,
.completionSectionBody textarea:focus-visible { outline: 2px solid var(--glacier-500); outline-offset: 1px; border-color: var(--glacier-500); }

.completionCalculated { padding: 12px 14px; margin: 4px 0 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--glacier-100) 40%, var(--surface)); color: var(--ink-800); font-size: var(--type-base); }
.completionCalculated strong { color: var(--ink-950); font-weight: var(--weight-heading); }


/* --- Rating grid (1–5 scores for Overall/Flavor/Texture/etc.) --- */
.ratingGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ratingGrid fieldset { padding: 14px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--surface); }
.ratingGrid legend { padding: 0 6px; font-size: var(--type-base); font-weight: var(--weight-emphasis); color: var(--ink-900); letter-spacing: var(--track-display); }
.ratingGrid label { margin: 8px 6px 0 0; }
.ratingGrid span { border: 1px solid var(--ice-300); background: var(--surface); color: var(--ink-800); font-size: var(--type-base); font-weight: var(--weight-heading); font-variant-numeric: tabular-nums; }
.ratingGrid label:hover span { border-color: var(--glacier-500); background: var(--ice-50); }

/* --- Defect grid --- */
.defectGrid legend { font-size: var(--type-base); font-weight: var(--weight-emphasis); color: var(--ink-900); margin-bottom: 10px; }
.defectGrid legend small { font-size: var(--type-sm); font-weight: var(--weight-body); color: var(--ink-500); margin-left: 6px; }
.defectGrid > label { padding: 10px 12px; min-height: 50px; border: 1px solid var(--ice-200); border-radius: var(--radius-md); background: var(--surface); font-size: var(--type-base); color: var(--ink-800); }
.defectGrid > label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--glacier-650); }
.defectGrid > label select { min-height: 36px; padding: 6px 10px; border: 1px solid var(--ice-300); border-radius: var(--radius-sm); background: var(--ice-50); font: inherit; font-size: var(--type-base); }

/* --- Continue Learning offers (bottom of completion) --- */
.completionOffers { padding: 18px 20px; border: 1px solid var(--ice-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); background: var(--surface); }
.completionOffers h3 { font-size: var(--type-base); font-weight: var(--weight-heading); letter-spacing: var(--track-display); color: var(--ink-950); margin: 0 0 4px; }
.completionOffers > p { font-size: var(--type-base); color: var(--ink-500); margin: 0 0 12px; }
.completionOffers button { min-height: 40px; padding: 0 16px; border: 1px solid var(--glacier-500); border-radius: var(--radius-sm); background: var(--surface); color: var(--glacier-750); font: inherit; font-size: var(--type-base); font-weight: var(--weight-emphasis); cursor: pointer; }
.completionOffers button:hover { border-color: var(--glacier-650); background: var(--ice-50); }

/* --- Batch overview dashboard (Formula / Current Stage / Progress / Started) at top of Batch History detail --- */
.productionDashboard { gap: 12px; }
.productionDashboard div { padding: 12px 14px; border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--ice-100) 60%, var(--surface)); }
.productionDashboard span { color: var(--ink-500); font-size: var(--type-sm); font-weight: var(--weight-emphasis); letter-spacing: var(--track-body); }
.productionDashboard strong { color: var(--ink-950); font-size: var(--type-base); font-weight: var(--weight-heading); margin-top: 4px; }

/* --- Timer list / Temperature list on batch detail --- */
.timerList article,
.temperatureList article { padding: 12px 14px; border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--ice-100) 55%, var(--surface)); }
.timerList span,
.temperatureList span { font-size: var(--type-sm); color: var(--ink-500); }
.timerList strong,
.temperatureList strong { font-size: var(--type-base); color: var(--ink-950); margin-top: 4px; font-variant-numeric: tabular-nums; }
.temperatureList small { font-size: var(--type-sm); color: var(--ink-500); }


/* === Production checkboxes — round pill-toggle indicator ===
   Reads like the numbered step circles and Mark-Complete pills.
   The native checkbox stays for a11y + event wiring; we just repaint it.
   Applies to: Ingredient Weighing checklist, Batch Progress checklist,
   Defects grid, and any label>input[type=checkbox]+span in the
   production/completion surfaces. */

.executionChecklist label > input[type="checkbox"],
.batchSessionChecklist label > input[type="checkbox"],
.defectGrid > label > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--ice-300);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
  display: inline-grid;
  place-items: center;
  position: relative;
}

/* Hover: hint the target */
.executionChecklist label:hover > input[type="checkbox"]:not(:checked),
.batchSessionChecklist label:hover > input[type="checkbox"]:not(:checked),
.defectGrid > label:hover > input[type="checkbox"]:not(:checked) {
  border-color: var(--glacier-500);
  background: var(--ice-50);
}

/* Checked: fill glacier-blue and draw a check with a pseudo-element */
.executionChecklist label > input[type="checkbox"]:checked,
.batchSessionChecklist label > input[type="checkbox"]:checked,
.defectGrid > label > input[type="checkbox"]:checked {
  border-color: var(--glacier-650);
  background: var(--glacier-650);
}

.executionChecklist label > input[type="checkbox"]:checked::after,
.batchSessionChecklist label > input[type="checkbox"]:checked::after,
.defectGrid > label > input[type="checkbox"]:checked::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* Focus-visible ring — glacier halo */
.executionChecklist label > input[type="checkbox"]:focus-visible,
.batchSessionChecklist label > input[type="checkbox"]:focus-visible,
.defectGrid > label > input[type="checkbox"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--glacier-500) 30%, transparent);
}

/* The parent row lights up subtly when checked so the state is legible from a distance */
.executionChecklist label:has(> input[type="checkbox"]:checked),
.batchSessionChecklist label:has(> input[type="checkbox"]:checked) {
  background: color-mix(in srgb, var(--glacier-100) 42%, var(--surface));
}
.executionChecklist label:has(> input[type="checkbox"]:checked) > span,
.batchSessionChecklist label:has(> input[type="checkbox"]:checked) > span {
  color: var(--ink-950);
  font-weight: var(--weight-emphasis);
}
.defectGrid > label:has(> input[type="checkbox"]:checked) {
  border-color: var(--glacier-500);
  background: color-mix(in srgb, var(--glacier-100) 30%, var(--surface));
}


/* === Canonical round checkbox — app-wide pass ===
   Extends the production round-toggle to every remaining square
   checkbox surface: Process Profiles stage toggles, History filters,
   version dialog checkFields, ingredient functional roles, and the
   beta-feedback diagnostics choice.  One visual language everywhere. */

.stageToggle > input[type="checkbox"],
.checkField > input[type="checkbox"],
.roleChoices label > input[type="checkbox"],
.feedbackDiagnosticChoice > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--ice-300);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
  display: inline-grid;
  place-items: center;
  position: relative;
}

.stageToggle:hover > input[type="checkbox"]:not(:checked),
.checkField:hover > input[type="checkbox"]:not(:checked),
.roleChoices label:hover > input[type="checkbox"]:not(:checked),
.feedbackDiagnosticChoice:hover > input[type="checkbox"]:not(:checked) {
  border-color: var(--glacier-500);
  background: var(--ice-50);
}

.stageToggle > input[type="checkbox"]:checked,
.checkField > input[type="checkbox"]:checked,
.roleChoices label > input[type="checkbox"]:checked,
.feedbackDiagnosticChoice > input[type="checkbox"]:checked {
  border-color: var(--glacier-650);
  background: var(--glacier-650);
}

.stageToggle > input[type="checkbox"]:checked::after,
.checkField > input[type="checkbox"]:checked::after,
.roleChoices label > input[type="checkbox"]:checked::after,
.feedbackDiagnosticChoice > input[type="checkbox"]:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
}

.stageToggle > input[type="checkbox"]:focus-visible,
.checkField > input[type="checkbox"]:focus-visible,
.roleChoices label > input[type="checkbox"]:focus-visible,
.feedbackDiagnosticChoice > input[type="checkbox"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--glacier-500) 30%, transparent);
}

/* Checked-state feedback on the labels */
.stageToggle:has(> input[type="checkbox"]:checked) { color: var(--ink-950); }
.roleChoices label:has(> input[type="checkbox"]:checked) { color: var(--ink-950); font-weight: var(--weight-emphasis); }

/* DS-049A — review-only candidate validation surface */
.releaseValidation{margin-top:var(--space-6);border:1px solid var(--ice-200);border-radius:var(--radius-lg);background:var(--surface);padding:var(--space-6)}
.releaseValidation>header{display:flex;justify-content:space-between;gap:var(--space-6);align-items:start}.releaseValidation h2{margin:var(--space-1) 0;font-size:var(--type-xl)}.releaseValidation header p{margin:0;color:var(--ink-650)}.releaseValidation>progress{width:100%;height:6px;margin:var(--space-5) 0 var(--space-6);accent-color:var(--glacier-650)}
.validationProgress{text-align:right}.validationProgress strong{display:block;font-size:var(--type-2xl);font-weight:var(--weight-heading)}.validationProgress span,.validationIdentity span{color:var(--ink-600);font-size:var(--type-xs);letter-spacing:var(--track-wide);text-transform:uppercase}
.validationGroup{margin-top:var(--space-6)}.validationGroup h3{margin:0 0 var(--space-3);font-size:var(--type-md)}.validationItems{display:grid;gap:var(--space-3)}.validationItem{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(140px,.55fr) minmax(220px,1fr) minmax(180px,1fr) auto;gap:var(--space-3);align-items:end;padding:var(--space-4);border:1px solid var(--ice-200);border-left:3px solid var(--ice-300);border-radius:var(--radius-md);background:var(--ice-50)}.validationItem.state--passed{border-left-color:var(--status-verified-fg)}.validationItem.state--failed{border-left-color:var(--danger-strong)}.validationItem.state--blocked{border-left-color:var(--notice-warn-fg)}.validationIdentity strong{display:block;margin-top:var(--space-1);font-size:var(--type-sm);font-weight:var(--weight-heading)}.validationItem label{display:grid;gap:var(--space-1);color:var(--ink-600);font-size:var(--type-xs)}.validationItem input,.validationItem select,.validationItem textarea{width:100%;border:1px solid var(--ice-300);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-900);font:inherit;padding:var(--space-2)}.validationItem button,.validationImport{border:1px solid var(--ice-300);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-800);font:inherit;font-weight:var(--weight-heading);padding:var(--space-2) var(--space-3);cursor:pointer}.validationImport input{display:block;margin-top:var(--space-2);max-width:260px}.releaseValidation>footer{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--ice-200)}.releaseValidation>footer p{margin-left:auto;color:var(--ink-600);font-size:var(--type-xs)}
@media(max-width:1100px){.validationItem{grid-template-columns:1fr 1fr}.validationIdentity{grid-column:1/-1}.validationItem button{justify-self:start}}@media(max-width:680px){.releaseValidation{padding:var(--space-4)}.releaseValidation>header,.releaseValidation>footer{display:grid}.validationProgress{text-align:left}.validationItem{grid-template-columns:1fr}.validationIdentity{grid-column:auto}.releaseValidation>footer p{margin-left:0}}

/* DS-052 C3 — Captured / Current columns */
.currentDataColumns { margin: 16px 0; }
.currentDataColumns .currentDataLead { margin: 4px 0 10px; color: var(--ink-700); font-size: var(--type-sm); }
.currentDataColumns .currentDataLead small { color: var(--ink-500); }
.currentDataColumns td:nth-child(2), .currentDataColumns td:nth-child(3), .currentDataColumns td:nth-child(4) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.completenessShift { display: block; color: var(--ink-500); font-size: var(--type-xs); }
.currentDataIngredients { margin-top: 10px; }
.currentDataIngredients summary { cursor: pointer; color: var(--ink-700); font-size: var(--type-sm); }
.currentDataIngredients ul { margin: 8px 0 0; padding-left: 18px; font-size: var(--type-sm); }
.currentDataIngredients li { margin: 4px 0; }
.historyActions .actionReason { flex-basis: 100%; color: var(--ink-500); font-size: var(--type-xs); margin-top: -4px; }
.historyActions button[disabled] { opacity: 0.55; cursor: not-allowed; }