/* Preview.21 — scoped application clarity.
 * Presentation only. Reference outer geometry and graph coordinates stay owned
 * by the frozen fidelity layer. No global font, grid, hidden or overflow reset.
 * This sibling is also embedded by the Python OS carrier after fidelity CSS. */

/* 1. Readable investigation details: light lenses. */
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) :is(.os-ref-step-lens,.os-ref-systems-lens,.os-ref-field-lens-detail,.os-source-lens) {
  --clarity-ink:#17364f;
  --clarity-muted:#526b80;
}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) :is(.os-ref-step-lens,.os-ref-systems-lens,.os-ref-field-lens-detail,.os-source-lens) :is(dt,dd,p) {
  font-size:11px!important;
  line-height:1.55!important;
}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) :is(.os-ref-step-lens,.os-ref-systems-lens,.os-ref-field-lens-detail,.os-source-lens) dt {
  color:var(--clarity-muted)!important;
}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) :is(.os-ref-code-binding dd,.os-ref-code-raw,.os-ref-system-card) small {
  font-size:10px!important;
  line-height:1.5!important;
  color:#526b80!important;
}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-system-card>header button b {
  font-size:12px!important;
  line-height:1.4!important;
}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-system-card dl dd {
  font-size:11px!important;
  line-height:1.5!important;
}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-step-table :is(table,th,td,td code) {
  font-size:11px!important;
  line-height:1.45!important;
}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-step-table th {color:#526b80!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-step-table td small {font-size:10px!important;line-height:1.4!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-step-lens :is(.os-ref-schema-tools,.os-ref-code-actions,.os-ref-step-nav) button,
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-step-table .os-ref-where button {
  min-height:28px!important;
  height:auto!important;
  font-size:10px!important;
  line-height:1.35!important;
}

/* 2. Dark mapping/evidence workbenches retain their dark inspection palette. */
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) :is(.os-ref-mapping-lens,.os-ref-evidence-lens) :is(dt,dd,p),
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-evidence-lens dl dd code {
  font-size:11px!important;
  line-height:1.55!important;
}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) :is(.os-ref-mapping-lens,.os-ref-evidence-lens) dt {color:#aac3d6!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) :is(.os-ref-evidence-pack,.os-ref-rejected,.os-ref-fact-list) li b {
  font-size:11px!important;
  line-height:1.45!important;
}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) :is(.os-ref-evidence-pack,.os-ref-rejected,.os-ref-fact-list) li small {
  font-size:10px!important;
  line-height:1.4!important;
  color:#aac3d6!important;
}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-evidence-scroll td :is(b,code) {font-size:10px!important;line-height:1.45!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-evidence-scroll td small.os-ref-binding,
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-evidence-scroll td small.os-ref-binding code {
  font-size:10px!important;
  line-height:1.4!important;
  color:#aac3d6!important;
}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) :is(.os-ref-evidence-scroll,.os-ref-evidence-lens) [data-ref-copy] {
  height:auto!important;
  min-height:24px!important;
  font-size:10px!important;
  line-height:1.35!important;
}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-mapping-lens [data-ref-hidden-note] {font-size:11px!important;line-height:1.5!important}

/* Mapping rows carry the investigation's primary identities. Keep the existing
 * twelve columns, width limits, ellipsis and native table scroller; only text
 * grows, allowing the table's existing automatic row sizing to accommodate it. */
html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen="mapping-workbench"] #m-mapping .os-ref-table-scroll :is(th,td) {font-size:10px!important;line-height:1.4!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen="mapping-workbench"] #m-mapping .os-ref-table-scroll td b {font-size:11px!important;line-height:1.4!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen="mapping-workbench"] #m-mapping .os-ref-table-scroll td small {font-size:10px!important;line-height:1.4!important;color:#aac3d6!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen="mapping-workbench"] #m-mapping .os-ref-table-scroll td .os-ref-badge {font-size:10px!important;line-height:1.4!important}

/* The CI captures also exposed 6.5–7px evidence headers/metadata and loader
 * type/path columns. Their own table layouts, row rules and scroll containers
 * remain intact; semantic status colors and monospace file paths are retained. */
html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen="evidence-explorer"] #m-evidence .os-ref-evidence-scroll :is(th,td) {font-size:10px!important;line-height:1.4!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen="evidence-explorer"] #m-evidence .os-ref-evidence-scroll td b {font-size:11px!important;line-height:1.4!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen="evidence-explorer"] #m-evidence .os-ref-evidence-scroll td :is(small,code,.os-ref-badge) {font-size:10px!important;line-height:1.4!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen="evidence-explorer"] #m-evidence .os-ref-evidence-scroll td small {color:#aac3d6!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader #loaderBody :is(th,td) {font-size:10px!important;line-height:1.4!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader #loaderBody tbody td:first-child {font-size:11px!important}

/* 3. Story quality, source audit and field journey. No node dimensions change. */
html[data-ui-variant="os"] #detailPanel .os-ref-command-lens :is(dt,dd,p) {font-size:11px!important;line-height:1.55!important}
html[data-ui-variant="os"] #detailPanel .os-ref-command-lens dt {color:#526b80!important}
html[data-ui-variant="os"] #canvas .os-field-facts :is(dt,dd,p) {font-size:11px!important;line-height:1.5!important}
html[data-ui-variant="os"] #canvas .os-field-facts dt {color:#526b80!important}
html[data-ui-variant="os"] #m-systems .os-ref-systems-lens p.role {color:#526b80!important}
html[data-ui-variant="os"] :is(.os-command-legend,.os-ref-focus-legend) {font-size:11px!important;line-height:1.5!important}
html[data-ui-variant="os"] .os-command-legend footer {font-size:11px!important;line-height:1.5!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-story-quality,
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-story-quality :is(label,summary,output,select,button) {font-size:11px!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-story-quality details p {line-height:1.6!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-process-list li b {font-size:11px!important;line-height:1.4!important}
html[data-ui-variant="os"][data-os-fidelity="reference-v1"] :is(#canvas,#detailPanel,#m-mapping,#m-evidence,#m-systems,#m-loader) .os-ref-process-list li small {font-size:10px!important;color:#526b80!important}
html[data-ui-variant="os"] .os-ref-source-detail :is(p,dt,dd),
html[data-ui-variant="os"] .os-ref-source-detail .os-ref-source-facts dd code {font-size:12px!important;line-height:1.55!important}
html[data-ui-variant="os"] .os-ref-source-detail .os-ref-lens-tabs button {min-height:34px!important;font-size:12px!important;line-height:1.35!important}
html[data-ui-variant="os"] .os-ref-source-tiles small {font-size:11px!important;line-height:1.4!important}
html[data-ui-variant="os"] .os-ref-field-journey :is(p,li),
html[data-ui-variant="os"] .os-ref-lens-journey .os-ref-lens-chain li {font-size:12px!important;line-height:1.55!important}
html[data-ui-variant="os"] .os-ref-lens-journey .os-ref-lens-chain li small {font-size:10px!important;letter-spacing:.025em!important}
html[data-ui-variant="os"] .os-ref-field-journey>footer {font-size:11px!important;line-height:1.55!important}

/* 4. Reference-free investigation tools: improve content, not application frame. */
/* Long exact identities stay readable on small screens; the table owns its scroll. */
html[data-ui-variant="os"] #m-flow [data-fx-investigation] .table-wrap {max-width:100%;overflow-x:auto}
html[data-ui-variant="os"] #m-flow [data-fx-investigation] table {width:100%;min-width:1040px;table-layout:fixed}
html[data-ui-variant="os"] #m-flow [data-fx-investigation] th:nth-child(1) {width:180px}
html[data-ui-variant="os"] #m-flow [data-fx-investigation] th:nth-child(2) {width:180px}
html[data-ui-variant="os"] #m-flow [data-fx-investigation] th:nth-child(3) {width:240px}
html[data-ui-variant="os"] #m-flow [data-fx-investigation] th:nth-child(4) {width:100px}
html[data-ui-variant="os"] #m-flow [data-fx-investigation] :is(th,td) {vertical-align:top;font-size:12px;line-height:1.5}
html[data-ui-variant="os"] #m-flow [data-fx-investigation-open] {min-width:150px;max-width:100%;min-height:44px;text-align:left;white-space:normal;overflow-wrap:anywhere}
html[data-ui-variant="os"] #m-flow [data-fx-investigation] code {font-size:11px;line-height:1.5;word-break:normal;overflow-wrap:anywhere}
html[data-ui-variant="os"] :is(.fx-planner,.fx-flow,.fixture-lineage-technical) {font-size:13px;line-height:1.55}
html[data-ui-variant="os"] .fx-endpoint-card b {font-size:13px!important;line-height:1.4!important}
html[data-ui-variant="os"] .fx-endpoint-card :is(small,code) {font-size:11px!important;line-height:1.5!important}
html[data-ui-variant="os"] .fx-plan-path li>small {font-size:11px!important;line-height:1.5!important}
html[data-ui-variant="os"] .os-ref-overview-shell {font-size:13px;line-height:1.55}
html[data-ui-variant="os"] .os-ref-overview-category b,
html[data-ui-variant="os"] .os-ref-overview-actions button b {font-size:14px}
html[data-ui-variant="os"] .os-ref-overview-category small,
html[data-ui-variant="os"] .os-ref-overview-actions button small {font-size:12px;line-height:1.5;color:#526b80}
html[data-ui-variant="os"] .os-ref-overview-fact :is(span,small),
html[data-ui-variant="os"] .os-ref-overview-shell h4 {font-size:11px;line-height:1.5}
html[data-ui-variant="os"] .os-ref-overview-actions.tools button {min-height:40px;font-size:12px}
html[data-ui-variant="os"] .os-ref-overview-shell footer small {color:#526b80;font-size:11px;line-height:1.5}

/* Non-reference dialogs: account for the actual header in both placement and
 * available height. The four geometry-anchored reference workbenches are excluded.
 * Fixed technical workspaces previously kept a 58px top below a 104px mobile
 * header, hiding their own close button; padding cannot move a fixed child. */
html[data-ui-variant="os"] :is(#m-flow,#m-export,#m-manual,#m-repositories).modal .box {
  top:var(--os-classic-top,var(--os-p5-shell-height,58px))!important;
  min-height:0!important;
}
html[data-ui-variant="os"] :is(#m-overview,#m-workspaces,#m-generator).modal .box {
  min-height:0!important;
  max-height:calc(100vh - var(--os-classic-top,58px) - 24px)!important;
  max-height:calc(100dvh - var(--os-classic-top,58px) - 24px)!important;
}
@media(max-width:768px) {
  /* The bottom tool rail stays usable without covering dialog content. */
  html[data-ui-variant="os"] :is(#m-overview,#m-workspaces,#m-generator).modal {
    padding-bottom:64px!important;
  }
  html[data-ui-variant="os"] :is(#m-overview,#m-workspaces,#m-generator).modal .box {
    max-height:calc(100vh - var(--os-classic-top,58px) - 76px)!important;
    max-height:calc(100dvh - var(--os-classic-top,58px) - 76px)!important;
  }
}
@media(min-width:1281px) and (max-width:1440px) {
  /* The absolute utility cluster needs its own room at laptop widths too.
   * Keep the actual Finder control a complete pointer target; navigation uses
   * its existing local scroll instead of painting underneath that control. */
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen] #productHeader>.row:first-child {padding-right:174px!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen] #osGlobalNav {min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen] .os-global-search {flex:0 0 44px!important;min-width:44px!important;max-width:44px!important}
}

/* 5. Export: preserve the full dictionary, selected order and native details. */
html[data-ui-variant="os"] .os-xp {font-size:14px;line-height:1.55}
html[data-ui-variant="os"] .os-xp :is(h3,.os-xp-head b) {font-size:15px}
html[data-ui-variant="os"] .os-xp :is(.os-xp-head p,.os-xp-info p,.os-xp-facet-list label,.os-xp-cd,.os-xp-order li,.os-xp-format b) {font-size:13px;line-height:1.5}
html[data-ui-variant="os"] .os-xp :is(.os-xp-head small,.os-xp-format small,.os-xp-info span,.os-xp-order small) {font-size:12px;line-height:1.5}
html[data-ui-variant="os"] .os-xp-cd button,
html[data-ui-variant="os"] .os-xp-order li button {width:30px;height:30px;min-width:30px;font-size:12px}
html[data-ui-variant="os"] .os-xp-facet-actions button {min-height:32px;font-family:inherit;font-size:12px;font-weight:650}
html[data-ui-variant="os"] .os-xp-actions button {min-height:44px;font-family:inherit;font-size:14px;font-weight:700}
html[data-ui-variant="os"] .os-xp :is(input[type="search"],select) {min-height:38px}
html[data-ui-variant="os"] .os-xp :is(.os-xp-error,.os-xp-ok) {font-size:13px;line-height:1.55}

/* 6. Account/repository/manual documents use the same readable light language. */
html[data-ui-variant="os"] :is(.os-rcc,.os-cp-shell) {font-size:14px;line-height:1.55}
html[data-ui-variant="os"] :is(.os-rcc-hint,.os-rcc-note,.os-rcc-scope,.os-cp-help,.os-cp-boundary) {font-size:12px;line-height:1.6}
html[data-ui-variant="os"] :is(.os-rcc-run,.os-rcc-grid,.os-cp-card) label {font-size:12px;line-height:1.5}
html[data-ui-variant="os"] :is(.os-rcc-repos,.os-rcc-report table,.os-cp-table) {font-size:12px;line-height:1.5}
html[data-ui-variant="os"] .os-cp-shell .os-cp-table :is(th,td) {line-height:1.5}
html[data-ui-variant="os"] .os-rcc-tile span {font-size:11px;line-height:1.5}
html[data-ui-variant="os"] .manual-fixture-content {font-size:14px;line-height:1.7}
html[data-ui-variant="os"] .manual-fixture-content :is(p,li) {font-size:14px;line-height:1.7}
html[data-ui-variant="os"] .manual-fixture-toc :is(a,button) {font-size:12px;line-height:1.5}

/* 7. Application generator only: the shared landing generator is untouched. */
html[data-ui-variant="os"] #m-generator .generator {font-size:14px;line-height:1.55}
html[data-ui-variant="os"] #m-generator .generator h2 {font-size:22px;line-height:1.3;letter-spacing:-.02em}
html[data-ui-variant="os"] #m-generator .gen-lead {font-size:14px;line-height:1.65}
html[data-ui-variant="os"] #m-generator .gen-form label {font-size:12px;letter-spacing:.015em;line-height:1.5;text-transform:none}
html[data-ui-variant="os"] #m-generator .gen-form :is(select,input),
html[data-ui-variant="os"] #m-generator .gen-btn {min-height:44px;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4}
html[data-ui-variant="os"] #m-generator .gen-btn.primary {font-weight:750;box-shadow:0 3px 10px rgb(15 98 254 / 14%)}
html[data-ui-variant="os"] #m-generator :is(.gen-progress,.gen-note,.gen-fact small) {font-size:12px;line-height:1.6}
html[data-ui-variant="os"] #m-generator .gen-badge {font-size:11px;line-height:1.5;letter-spacing:.025em}
html[data-ui-variant="os"] #m-generator .gen-fact b {font-size:22px;line-height:1.3}

/* 8. Studio — the simulation remains a distinct dark workspace. */
html[data-ui-variant="os"] #fulfillmentStudio {--fs-dim:#b3c5d9;font-size:14px;line-height:1.55}
html[data-ui-variant="os"] #fulfillmentStudio .fs-hero p {font-size:14px;line-height:1.65;color:#b9cce0}
html[data-ui-variant="os"] #fulfillmentStudio :is(label,.fs-context,.fs-source-note,.fs-panelhead p,.fs-disclosure,.fs-inspector .fs-stepmeta) {font-size:12px;line-height:1.5}
html[data-ui-variant="os"] #fulfillmentStudio :is(.fs-eyebrow,.fs-disclosure b,.fs-status,.fs-legend) {font-size:11px;letter-spacing:.035em}
html[data-ui-variant="os"] #fulfillmentStudio :is(select,input) {min-height:40px}
html[data-ui-variant="os"] #fulfillmentStudio .fs-controls button {min-height:40px}
html[data-ui-variant="os"] #fulfillmentStudio button:disabled {opacity:1;color:#8097b0;background:#122237;border-color:#2c425c}
html[data-ui-variant="os"] #fulfillmentStudio .fs-run-summary {font-size:12px;line-height:1.4}
html[data-ui-variant="os"] #fulfillmentStudio .fs-run-summary strong {font-size:20px;line-height:1.25}
html[data-ui-variant="os"] #fulfillmentStudio .fs-panelhead h4 {font-size:16px;line-height:1.35}
html[data-ui-variant="os"] #fulfillmentStudio .fs-payload header {font-size:11px;letter-spacing:.05em}
html[data-ui-variant="os"] #fulfillmentStudio .fs-payload header button {min-height:32px;font-size:11px!important;padding-inline:10px}
html[data-ui-variant="os"] #fulfillmentStudio .fs-inspector pre {font-size:12px;line-height:1.75}
html[data-ui-variant="os"] #fulfillmentStudio .fs-inspector dl {font-size:12px;line-height:1.55}
html[data-ui-variant="os"] #fulfillmentStudio .fs-hop b {font-size:13px;line-height:1.4}
html[data-ui-variant="os"] #fulfillmentStudio .fs-hop :is(small,code,span) {font-size:11px;line-height:1.5}
html[data-ui-variant="os"] #fulfillmentStudio .fs-hop.pending {opacity:1;border-style:dashed;color:#9db1c9}
html[data-ui-variant="os"] #fulfillmentStudio :is(.fs-help,.fs-footer,.fs-snapshots) {font-size:12px;line-height:1.6}
html[data-ui-variant="os"] #fulfillmentStudio .fs-snapshot-table {font-size:12px;line-height:1.5}
html[data-ui-variant="os"] #fulfillmentStudio .fs-snapshots details summary {font-size:12px;line-height:1.5}
html[data-ui-variant="os"] #fulfillmentStudio .fs-planning :is(p,label) {font-size:13px;line-height:1.6}
html[data-ui-variant="os"] #fulfillmentStudio .fs-plan-form :is(input,select,button) {min-height:42px;font-size:14px}
html[data-ui-variant="os"] #fulfillmentStudio .fs-plan-stages article {border-color:#35506c}
html[data-ui-variant="os"] #fulfillmentStudio .fs-plan-stages article h4 {font-size:18px;line-height:1.4;letter-spacing:-.015em}
html[data-ui-variant="os"] #fulfillmentStudio .fs-plan-stages article :is(small,code),
html[data-ui-variant="os"] #fulfillmentStudio .fs-plan-candidates :is(li,code) {font-size:12px;line-height:1.6}
html[data-ui-variant="os"] #fulfillmentStudio .fs-plan-candidates header {font-size:13px;line-height:1.5}

/* Every existing control keeps its native behavior; focus is presentation only. */
html[data-ui-variant="os"] :is(.os-ref-step-lens,.os-ref-mapping-lens,.os-ref-evidence-lens,.os-ref-systems-lens,.os-ref-field-journey,.os-source-lens,.os-xp,.os-rcc,.os-cp-shell,.manual-fixture,.fx-planner,.fx-flow,#m-generator) :is(button,a,input,select,summary,[tabindex]):focus-visible {
  outline:2px solid #318bff!important;
  outline-offset:2px!important;
}

@media(max-width:700px) {
  html[data-ui-variant="os"] .os-xp :is(.os-xp-cd button,.os-xp-order li button) {width:34px;height:34px;min-width:34px}
  html[data-ui-variant="os"] #m-generator .generator {padding:16px}
  html[data-ui-variant="os"] #m-generator .gen-actions .gen-btn {flex:1 1 180px}
}
@media(max-width:540px) {
  /* Keep all actions and metrics while giving the result more of the viewport. */
  html[data-ui-variant="os"] #fulfillmentStudio .fs-runbar {gap:10px;padding:10px 12px}
  html[data-ui-variant="os"] #fulfillmentStudio .fs-run-summary {gap:8px 12px;justify-content:flex-start}
  html[data-ui-variant="os"] #fulfillmentStudio .fs-run-summary>span {display:flex;align-items:baseline;gap:5px}
  html[data-ui-variant="os"] #fulfillmentStudio .fs-run-summary strong {display:inline;font-size:17px}
  html[data-ui-variant="os"] #fulfillmentStudio .fs-controls {gap:6px}
  html[data-ui-variant="os"] #fulfillmentStudio .fs-controls button {padding:7px 9px;font-size:12px!important}
  html[data-ui-variant="os"] #fulfillmentStudio .fs-status {padding:4px 8px}
}
@media(prefers-reduced-motion:reduce) {
  html[data-ui-variant="os"] #m-generator .gen-bar i {transition:none}
}

/* 9. Compact Loader: the current journey contains a header and a stage track,
 * not direct stage articles. Keep these two levels separate at the breakpoint
 * where the old direct-article grid still applied. Canonical 1672px is untouched. */
@media(max-width:1280px) {
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-loader-journey {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    gap:10px!important;
    padding:10px!important;
    overflow:hidden!important;
  }
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-journey-head {
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex:0 0 auto!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
  }
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-journey-head :is(b,small) {display:block!important;font-size:11px!important;line-height:1.45!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-journey-head>span {flex:0 0 auto;font-size:10px!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-stage-track {
    display:grid!important;
    grid-template-columns:repeat(6,minmax(180px,1fr))!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    gap:10px!important;
    padding-bottom:8px!important;
    overflow:auto!important;
  }
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-stage-track>article {
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    grid-template-rows:none!important;
    align-content:start!important;
    gap:6px 8px!important;
    min-width:0!important;
    width:auto!important;
    min-height:0!important;
    height:auto!important;
    padding:10px!important;
  }
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-stage-track>article>.os-ref-stage-icon {grid-column:1!important;grid-row:1!important;margin:0!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-stage-track>article>span {grid-column:2!important;grid-row:1!important;justify-self:end!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-stage-track>article>:is(b,strong,small) {
    grid-column:1/-1!important;
    grid-row:auto!important;
    min-width:0!important;
    margin:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    overflow:visible!important;
    line-height:1.45!important;
  }
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-stage-track>article>b {font-size:11px!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-stage-track>article>strong {font-size:16px!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-stage-track>article>small {font-size:10px!important;color:#526b80!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-loader-audit {grid-template-rows:auto 1px minmax(0,1fr)!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .content>.os-loader-toolbar {
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px 12px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:60px!important;
    max-height:none!important;
    padding:8px 64px 8px 12px!important;
  }
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-loader-breadcrumb {display:flex!important;flex-wrap:wrap!important;min-width:0!important;gap:6px!important;font-size:11px!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-loader-toolbar>strong {flex:0 0 auto;font-size:10px!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-loader-actions {display:flex!important;flex-wrap:wrap!important;gap:6px!important;min-width:0!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-loader-actions button {min-height:36px!important;white-space:normal!important;font-size:11px!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-totals {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;flex:0 0 auto!important;gap:8px!important;padding:10px!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-totals>span {display:flex!important;flex-direction:column!important;gap:4px!important;min-width:0!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-totals small {font-size:10px!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-totals b {font-size:11px!important;overflow-wrap:anywhere!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-lens section strong {overflow-wrap:anywhere!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen] #m-loader.modal.open .box>header button.modal-close {
    top:calc(var(--os-classic-top,58px) + 8px)!important;
    right:8px!important;
  }
}
@media(max-width:768px) {
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-stage-track {grid-template-columns:minmax(0,1fr)!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-loader-actions {flex-basis:100%!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-loader-center {display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;overflow:visible!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-loader-center>#loaderBody {flex:0 0 auto!important;height:420px!important;min-height:280px!important;max-height:60vh!important;overflow:auto!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader :is(.os-loader-tabs,.os-loader-table-toolbar) {min-width:0!important;flex-wrap:wrap!important}
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"] #m-loader .os-ref-loader-totals {grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:1280px) {
  /* The mobile Step Lens owns an original close control. Reserve its visible
   * header and align the drawer with the measured application header; keep the
   * original bottom edge, scrolling and listener rather than clearing its state. */
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen] body.os-lens-drawer-open #layout>#detailPanel {
    top:var(--os-classic-top,104px)!important;
    padding-top:52px!important;
  }
  html[data-ui-variant="os"][data-os-fidelity="reference-v1"][data-os-screen] body.os-lens-drawer-open #layout>#detailPanel>.os-ref-drawer-close {
    top:8px!important;
    right:8px!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
  }
}