:root {
  --navy: #002F65;
  --navy-dark: #001E44;
  --teal: #00A8CB;
  --teal-light: #E0F6FB;
  --ink: #0D1117;
  --ink-2: #1C2333;
  --ink-3: #3A4252;
  --ink-4: #6B7280;
  --rule: #D8D3CC;
  --rule-light: #EBEBEB;
  --paper: #FAFAF8;
  --white: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

.ot-shell__topbar {
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 28px;
  align-items: center;
  padding: 18px 28px;
  background: var(--navy);
  color: var(--white);
}

.ot-shell__brand-link {
  display: grid;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.ot-shell__brand-link:focus-visible {
  outline: 2px solid var(--teal-light);
  outline-offset: 4px;
}

.ot-shell-title,
.ot-panel__header h2,
.ot-context-band h2 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

.ot-shell-title {
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
}

.ot-eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
}

.ot-shell__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ot-shell__nav a,
.ot-link-row a,
.ot-link-list a {
  color: inherit;
  text-decoration: none;
}

.ot-shell__nav a {
  padding: 9px 12px;
  border: 1px solid var(--teal-light);
  font-size: 14px;
}

.ot-shell__nav a[aria-current="page"] {
  background: var(--teal);
  border-color: var(--teal);
}

.ot-user-chip {
  display: grid;
  justify-items: end;
  gap: 2px;
  font-size: 13px;
}

.ot-user-chip span:last-child {
  color: var(--teal-light);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}

.ot-workbench {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  min-height: calc(100vh - 128px);
  gap: 16px;
  padding: 16px;
}

.ot-tree-panel,
.ot-centre-panel,
.ot-evidence-panel {
  background: var(--white);
  border: 1px solid var(--rule-light);
  min-width: 0;
}

.ot-tree-panel {
  padding: 16px;
  overflow: auto;
  max-height: calc(100vh - 136px);
}

.ot-centre-panel {
  padding: 0;
  overflow: hidden;
}

.ot-evidence-panel {
  margin: 20px 18px 24px;
  padding: 16px;
}

.ot-panel__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-light);
}

.ot-panel__header h2,
.ot-context-band h2,
.ot-card h3 {
  margin: 0;
}

.ot-icon-button,
.ot-controls button {
  background: var(--navy);
  color: var(--white);
  border: 0;
  padding: 9px 12px;
  cursor: pointer;
  font: inherit;
}

.ot-icon-button {
  min-width: 76px;
}

.ot-search {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  font-size: 12px;
  color: var(--ink-4);
}

.ot-search input,
.ot-controls select,
.ot-controls input[type="datetime-local"] {
  width: 100%;
  border: 1px solid var(--rule);
  padding: 9px 10px;
  color: var(--ink);
  background: var(--white);
  min-height: 40px;
}

option[data-live="true"] {
  font-weight: 700;
}

option[data-live="false"] {
  color: var(--ink-4);
  font-style: italic;
}

.ot-tree {
  display: grid;
  gap: 2px;
  font-size: 13px;
}

.ot-tree-node {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 4px 6px;
  border-left: 3px solid transparent;
}

.ot-tree-node button {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink-3);
}

.ot-tree-node.is-selected {
  background: var(--teal-light);
  border-left-color: var(--teal);
}

.ot-tree-node__meta {
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ot-tree-menu {
  position: fixed;
  z-index: 50;
  display: grid;
  min-width: 190px;
  background: var(--navy-dark);
  border: 1px solid var(--teal);
  padding: 6px;
}

.ot-tree-menu button {
  border: 0;
  background: transparent;
  color: var(--white);
  text-align: left;
  padding: 9px 10px;
  cursor: pointer;
}

.ot-tree-menu button:hover {
  background: var(--navy);
}

.ot-context-band {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 420px);
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule-light);
}

.ot-context-band p {
  color: var(--ink-3);
  margin: 6px 0 0;
  font-size: 13px;
}

.ot-context-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ot-context-metrics div {
  border-left: 3px solid var(--teal);
  background: var(--paper);
  padding: 10px;
  min-width: 0;
}

.ot-context-metrics span {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--navy);
  font-size: 18px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ot-context-metrics small {
  color: var(--ink-4);
  font-size: 11px;
}

.ot-tabs {
  display: flex;
  overflow-x: auto;
  gap: 0;
  border-bottom: 1px solid var(--rule-light);
  background: var(--paper);
}

.ot-tabs button {
  border: 0;
  border-right: 1px solid var(--rule-light);
  background: transparent;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--ink-3);
  white-space: nowrap;
  font: inherit;
}

.ot-tabs button.is-active {
  color: var(--navy);
  background: var(--white);
  border-top: 3px solid var(--teal);
}

.ot-tabs button.is-disabled {
  color: var(--ink-4);
  font-style: italic;
  cursor: not-allowed;
  background: var(--paper);
}

.ot-tabs button.is-live {
  font-weight: 700;
}

.ot-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-light);
  align-items: end;
}

.ot-controls label,
.ot-channel-controls {
  display: grid;
  gap: 4px;
  color: var(--ink-4);
  font-size: 12px;
  min-width: 0;
}

.ot-channel-controls {
  grid-template-columns: 1fr;
  border: 1px solid var(--rule-light);
  margin: 0;
  padding: 8px 10px;
}

.ot-channel-controls legend {
  color: var(--navy);
  font-weight: 700;
}

.ot-channel-controls label {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--ink-3);
}

.ot-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: end;
}

.ot-control-actions button {
  white-space: nowrap;
  min-width: max-content;
  padding: 9px 16px;
  height: 40px;
}

.ot-tab-panel {
  display: none;
  padding: 14px 18px 0;
}

.ot-tab-panel.is-active {
  display: block;
}

.ot-chart-stack {
  display: grid;
  gap: 12px;
}

.ot-chart-with-picker {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.ot-capture-list {
  min-height: 320px;
  max-height: 720px;
  overflow: auto;
  border: 1px solid var(--rule-light);
  background: var(--paper);
}

.ot-capture-list button {
  display: grid;
  width: 100%;
  grid-template-columns: 26px 1fr auto;
  gap: 8px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--rule-light);
  padding: 9px;
  background: var(--white);
  color: var(--ink-3);
  text-align: left;
  cursor: pointer;
}

.ot-capture-list button.is-active {
  background: var(--teal-light);
  color: var(--navy);
  font-weight: 700;
}

.ot-chart {
  width: 100%;
  min-height: 420px;
  background: var(--navy-dark);
  border: 1px solid var(--teal);
  display: block;
}

.ot-chart--short,
.ot-chart-stack .ot-chart {
  min-height: 260px;
}

.ot-chart-runtime-error {
  min-height: 280px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--navy-dark);
  border: 1px solid var(--teal);
  padding: 18px;
}

.ot-empty {
  padding: 18px;
  border: 1px dashed var(--rule);
  background: var(--paper);
  color: var(--ink-4);
  margin-bottom: 12px;
}

.ot-evidence-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 16px;
  padding-top: 14px;
}

.ot-card {
  border-bottom: 1px solid var(--rule-light);
  padding: 0 0 15px;
}

.ot-card h3 {
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 10px;
}

.ot-facts {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.ot-fact {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--rule-light);
  padding-bottom: 6px;
}

.ot-fact span:first-child {
  color: var(--ink-4);
}

.ot-fact span:last-child {
  text-align: right;
  font-weight: 700;
}

.ot-link-row,
.ot-link-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.ot-link-row a,
.ot-link-list a {
  color: var(--navy);
  border-bottom: 1px solid var(--rule-light);
  padding-bottom: 6px;
}

.ot-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  color: var(--ink-4);
  border-top: 1px solid var(--rule-light);
  background: var(--white);
  font-size: 12px;
}

@media (max-width: 1280px) {
  .ot-workbench {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .ot-controls,
  .ot-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ot-chart-with-picker {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .ot-shell__topbar,
  .ot-workbench,
  .ot-context-band,
  .ot-controls,
  .ot-evidence-grid {
    grid-template-columns: 1fr;
  }
  .ot-context-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ot-shell-title {
    font-size: 26px;
  }
}

/* DP4.6.2-OVERLAY-BEGIN v=1 author=Claude date=2026-05-25 */
/*
 * dp4_6_2_workbench_overlay.css  (Rev 2, 2026-05-25)
 *
 * DP4.6.2 draft CSS overlay for the Mars-aligned diagnostic cockpit.
 * Scoped to .ot-workbench-root. No live portal modification.
 *
 * Rev 2 corrections per Codex draft-pack review:
 *   - Replaced the non-canonical spacing variable family with explicit px values
 *     (the optimal-design-system.css token set has no spacing-token primitives by that name).
 *   - Off-palette state colours moved into an explicit STATE BADGE EXCEPTION
 *     BLOCK below, documented as a tightly scoped exception. Every colour in
 *     that block is justified by accessibility contrast needs for status
 *     semantics that the Optimal palette does not yet express (e.g. amber for
 *     attention-pending, lavender for source-label-only, green for live).
 *
 * Three sections:
 *   §1 Left diagnostic panel
 *   §2 Compact chart strip
 *   §3 Chart frame
 *   §4 State badge exception block (off-palette colours, documented)
 *   §5 Route-state cards
 *   §6 Dark and light chart mode
 *   §7 Mobile rail collapse
 *
 * Sources: dp4_6_1_chart_screen_model.js, dp4_6_2_chart_screen_model.js,
 *          dp4_6_1_screen_model_acceleration_pack_2026-05-25.md
 */

/* ---- §1 Left diagnostic panel --------------------------------------------- */

.ot-workbench-root {
  --ot-wb-rail-width: 280px;
  --ot-wb-strip-height: 48px;
  --ot-wb-card-radius: 6px;
  /* Desktop layout: rail on the left, workbench main on the right. */
  display: grid;
  grid-template-columns: var(--ot-wb-rail-width) 1fr;
  grid-template-areas:
    "rail toggles"
    "rail main";
  align-items: stretch;
  min-height: calc(100vh - 64px);
}
.ot-workbench-root > .ot-wb-rail        { grid-area: rail; }
.ot-workbench-root > .ot-wb-theme-toggle { grid-area: toggles; justify-self: end; align-self: center; margin: 8px 16px; }
.ot-workbench-root > .ot-wb-rail-toggle  { grid-area: toggles; justify-self: start; align-self: center; margin: 8px 16px; }
.ot-workbench-root > .ot-workbench       { grid-area: main; }

.ot-wb-rail {
  width: var(--ot-wb-rail-width);
  flex: 0 0 var(--ot-wb-rail-width);
  background: var(--paper, #FAFAF8);
  border-right: 1px solid var(--rule-light, #EBEBEB);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.ot-wb-rail__group { display: flex; flex-direction: column; gap: 8px; }

.ot-wb-rail__eyebrow {
  font-family: var(--font-sans, "Helvetica Neue", Arial, sans-serif);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-4, #6B7280);
  font-weight: 600;
  margin: 0;
}

.ot-wb-rail__select,
.ot-wb-rail__option-list {
  font-family: var(--font-sans, "Helvetica Neue", Arial, sans-serif);
  font-size: 14px;
  color: var(--ink, #0D1117);
  background: #FFFFFF;
  border: 1px solid var(--rule, #D8D3CC);
  border-radius: 4px;
  padding: 8px 10px;
  width: 100%;
}

.ot-wb-rail__option-list { padding: 0; list-style: none; margin: 0; }
.ot-wb-rail__option-list li {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule-light, #EBEBEB);
  cursor: pointer;
}
.ot-wb-rail__option-list li:last-child { border-bottom: 0; }
.ot-wb-rail__option-list li[aria-selected="true"] {
  background: var(--teal-light, #E0F6FB);
  color: var(--navy, #002F65);
  font-weight: 600;
}

/* ---- §2 Compact chart strip ---------------------------------------------- */

.ot-wb-strip {
  display: flex;
  align-items: stretch;
  height: var(--ot-wb-strip-height);
  background: #FFFFFF;
  border-bottom: 1px solid var(--rule-light, #EBEBEB);
  padding-left: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ot-wb-strip__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-2, #1C2333);
  cursor: pointer;
  white-space: nowrap;
}
.ot-wb-strip__btn:hover { background: var(--paper, #FAFAF8); }
.ot-wb-strip__btn[aria-current="true"] {
  border-bottom-color: var(--teal, #00A8CB);
  color: var(--navy, #002F65);
  font-weight: 600;
}

/* Mars context separator chip in the strip */
.ot-wb-strip__context-chip {
  display: inline-flex; align-items: center;
  padding: 0 10px; height: 100%;
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4, #6B7280);
  background: var(--paper, #FAFAF8);
  border-right: 1px solid var(--rule-light, #EBEBEB);
}

/* Overflow menu (less-frequent screens) */
.ot-wb-strip__overflow {
  position: relative;
  margin-left: auto;
  padding: 0 12px;
}
.ot-wb-strip__overflow-btn {
  background: transparent;
  border: 1px solid var(--rule, #D8D3CC);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.ot-wb-strip__overflow-menu {
  display: none;
  position: absolute;
  right: 12px;
  top: 100%;
  background: #FFFFFF;
  border: 1px solid var(--rule, #D8D3CC);
  border-radius: 4px;
  padding: 4px 0;
  min-width: 220px;
  box-shadow: 0 4px 12px rgba(0,30,68,0.08);
  z-index: 5;
}
.ot-wb-strip__overflow-menu.is-open { display: block; }
.ot-wb-strip__overflow-menu button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink-2, #1C2333);
  cursor: pointer;
}
.ot-wb-strip__overflow-menu button:hover { background: var(--paper, #FAFAF8); }

/* ---- §3 Chart frame (compact) ------------------------------------------- */

.ot-wb-chart-frame {
  background: #FFFFFF;
  border: 1px solid var(--rule-light, #EBEBEB);
  border-radius: var(--ot-wb-card-radius);
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.ot-wb-chart-frame__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule-light, #EBEBEB);
}
.ot-wb-chart-frame__title { font-family: var(--font-serif); font-size: 16px; margin: 0; }
.ot-wb-chart-frame__toolbar { display: flex; gap: 4px; }
.ot-wb-chart-frame__tool {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 3px;
}
.ot-wb-chart-frame__tool:hover { border-color: var(--rule, #D8D3CC); background: var(--paper, #FAFAF8); }
.ot-wb-chart-frame__tool[aria-pressed="true"] {
  background: var(--navy, #002F65);
  color: #FFFFFF;
  border-color: var(--navy, #002F65);
}
.ot-wb-chart-frame__body { flex: 1; padding: 12px; }
.ot-wb-chart-frame__footer {
  font-size: 12px;
  color: var(--ink-4, #6B7280);
  border-top: 1px solid var(--rule-light, #EBEBEB);
  padding: 6px 12px;
}

/* Spectrum subpanel container (peak-spectrum-table is rendered here per Codex Rev 2 model) */
.ot-wb-chart-frame__subpanels {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-top: 1px dashed var(--rule-light, #EBEBEB);
}
.ot-wb-chart-frame__subpanel-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4, #6B7280);
  margin: 0;
}

/* ===========================================================================
   §4 STATE BADGE EXCEPTION BLOCK
   ---------------------------------------------------------------------------
   The Optimal palette declares navy / teal / paper / rule / ink for product
   surfaces. It does not declare attention-pending, source-label, success or
   not-configured semantics. The badge variants below are an explicit, tightly
   scoped exception so route-state semantics remain legible to operators.
   Each colour is paired (border + foreground + soft background) to satisfy
   WCAG AA contrast at 11 px badge sizes.
   ---------------------------------------------------------------------------
   Tokens used outside the Optimal palette (with rationale):
     #D97706 / #92400E / #FFF7ED  amber: route-pending and active-or-incomplete attention semantics
     #7E22CE / #5B21B6 / #F5F3FF  purple: not-configured external-runtime semantics
     #6366F1 / #3730A3 / #EEF2FF  indigo: source-label-only (Mars-label-only) semantics
     #047857 / #064E3B / #ECFDF5  green: live attribution where teal would be ambiguous with the active accent
   ---------------------------------------------------------------------------
   If the Optimal design system gains attention / success / source-label tokens,
   replace these values with the canonical tokens and remove this exception block.
   =========================================================================== */

.ot-wb-state-card__badge--route-pending        { border-color: #D97706; color: #92400E; background: #FFF7ED; }
.ot-wb-state-card__badge--active-or-incomplete { border-color: #D97706; color: #92400E; background: #FFF7ED; }
.ot-wb-state-card__badge--not-configured       { border-color: #7E22CE; color: #5B21B6; background: #F5F3FF; }
.ot-wb-state-card__badge--source-label-only    { border-color: #6366F1; color: #3730A3; background: #EEF2FF; }
.ot-wb-state-card__badge--live                 { border-color: #047857; color: #064E3B; background: #ECFDF5; }

/* On-palette badge variants */
.ot-wb-state-card__badge--simplified-active    { border-color: var(--teal, #00A8CB); color: var(--navy, #002F65); background: var(--teal-light, #E0F6FB); }
.ot-wb-state-card__badge--active-or-empty      { border-color: var(--rule, #D8D3CC); color: var(--ink-3, #3A4252); }
.ot-wb-state-card__badge--data-unavailable     { border-color: var(--ink-4, #6B7280); color: var(--ink-2, #1C2333); }

/* ---- §5 Route-state cards (shared structure across all badge variants) -- */

.ot-wb-state-card {
  background: #FFFFFF;
  border: 1px solid var(--rule, #D8D3CC);
  border-radius: var(--ot-wb-card-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
}

.ot-wb-state-card__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--rule, #D8D3CC);
  color: var(--ink-2, #1C2333);
  background: var(--paper, #FAFAF8);
}

.ot-wb-state-card__title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 18px;
  color: var(--ink, #0D1117);
  margin: 0;
}
.ot-wb-state-card__rule {
  font-size: 13px;
  color: var(--ink-3, #3A4252);
  line-height: 1.5;
  margin: 0;
}
.ot-wb-state-card__meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: var(--ink-4, #6B7280);
  border-top: 1px solid var(--rule-light, #EBEBEB);
  padding-top: 8px;
}
.ot-wb-state-card__meta dt { font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
.ot-wb-state-card__meta dd { margin: 0 12px 0 0; }

/* ---- §6 Dark and light chart mode (workbench root only) ----------------- */

.ot-workbench-root[data-chart-theme="light"] {
  --ot-chart-bg: #FFFFFF;
  --ot-chart-grid: var(--rule-light, #EBEBEB);
  --ot-chart-axis: var(--ink-3, #3A4252);
  --ot-chart-label: var(--ink-2, #1C2333);
  --ot-chart-active-line: var(--teal, #00A8CB);
  --ot-chart-auxiliary-line: var(--navy, #002F65);
}

.ot-workbench-root[data-chart-theme="dark"] {
  --ot-chart-bg: var(--navy-dark, #001E44);
  --ot-chart-grid: #1F3A66;
  --ot-chart-axis: #B8C6DC;
  --ot-chart-label: #E6ECF3;
  --ot-chart-active-line: var(--teal, #00A8CB);
  --ot-chart-auxiliary-line: #7FD9EC;
}
/*
 * Dark-mode chart-frame override colours (#1F3A66 / #B8C6DC / #E6ECF3 / #7FD9EC)
 * are tints of the canonical navy-dark + paper tokens scoped to the chart
 * surface only. They render only when the workbench root carries
 * data-chart-theme="dark". They do not leak to the rest of the portal.
 */
.ot-workbench-root[data-chart-theme="dark"] .ot-wb-chart-frame {
  background: var(--ot-chart-bg);
  color: var(--ot-chart-label);
  border-color: #1F3A66;
}
.ot-workbench-root[data-chart-theme="dark"] .ot-wb-chart-frame__header {
  border-bottom-color: #1F3A66;
}

/* Theme toggle */
.ot-wb-theme-toggle {
  display: inline-flex;
  border: 1px solid var(--rule, #D8D3CC);
  border-radius: 4px;
  overflow: hidden;
}
.ot-wb-theme-toggle__btn {
  background: transparent;
  border: 0;
  padding: 4px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3, #3A4252);
  cursor: pointer;
}
.ot-wb-theme-toggle__btn[aria-pressed="true"] {
  background: var(--navy, #002F65);
  color: #FFFFFF;
}

/* ---- §7 Mobile (collapses left rail behind an icon button) ------------- */
@media (max-width: 768px) {
  .ot-workbench-root {
    display: block;
    grid-template-columns: 1fr;
    grid-template-areas:
      "toggles"
      "rail"
      "main";
  }
  .ot-wb-rail {
    width: 100%;
    height: auto;
    max-height: 60vh;
    border-right: 0;
    border-bottom: 1px solid var(--rule-light, #EBEBEB);
    display: none;
  }
  .ot-wb-rail.is-open { display: flex; }
  .ot-wb-rail-toggle {
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--rule, #D8D3CC);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    margin: 8px;
    cursor: pointer;
  }
}
@media (min-width: 769px) {
  .ot-wb-rail-toggle { display: none; }
}
/* DP4.6.2-OVERLAY-END */

/* DP4.6.2-FEEDS-MERGE-HOTFIX-BEGIN v=1 author=Codex date=2026-05-25 */

.ot-workbench-root {
  --ot-wb-rail-width: 0px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "toggles"
    "main";
}

.ot-workbench-root > .ot-wb-rail,
.ot-workbench-root > .ot-wb-rail-toggle {
  display: none !important;
}

.ot-channel-controls[data-dp462-merged="1"] {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.2fr) minmax(320px, 2fr);
  gap: 8px 16px;
  align-items: start;
  min-width: min(100%, 760px);
}

.ot-channel-controls[data-dp462-merged="1"] legend {
  grid-column: 1 / -1;
}

.ot-channel-controls[data-dp462-merged="1"] .ot-wb-rail__group {
  gap: 6px;
}

.ot-channel-controls[data-dp462-merged="1"] .ot-wb-rail__group--feed label {
  display: block;
  margin: 2px 0;
  white-space: nowrap;
}




@media (max-width: 960px) {
  .ot-channel-controls[data-dp462-merged="1"] {
    grid-template-columns: 1fr;
  }
}

/* DP4.6.2-FEEDS-MERGE-HOTFIX-END */

/* DP4.6.2-FEEDS-CLICKSAFE-HOTFIX-BEGIN v=1 author=Codex date=2026-05-25 */

.ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) {
  grid-template-columns:
    minmax(210px, 1fr)
    minmax(210px, 1fr)
    minmax(240px, 1fr)
    minmax(160px, auto)
    minmax(240px, 1fr);
  align-items: stretch;
}

.ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > label {
  min-width: 0;
}

.ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > label:has(#code-select) {
  grid-column: 3 / span 2;
}

.ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > label:has(#capture-select) {
  grid-column: 5;
}

.ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > .ot-channel-controls[data-dp462-merged="1"] {
  grid-column: 1 / span 2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.ot-channel-controls[data-dp462-merged="1"] {
  grid-template-columns: minmax(170px, 220px) minmax(210px, 1fr);
  gap: 8px 14px;
}






.ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > label:has(#refresh-interval) {
  grid-column: 3;
  align-self: end;
}

.ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > .ot-control-actions {
  grid-column: 4;
  display: grid;
  grid-template-columns: minmax(120px, 1fr);
  gap: 8px;
  align-self: end;
  min-width: 0;
}

.ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > .ot-control-actions button {
  width: 100%;
  min-height: 40px;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

@media (max-width: 1280px) {
  .ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > label:has(#code-select),
  .ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > label:has(#capture-select),
  .ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > .ot-channel-controls[data-dp462-merged="1"],
  .ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > label:has(#refresh-interval),
  .ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > .ot-control-actions {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]),
  .ot-channel-controls[data-dp462-merged="1"] {
    grid-template-columns: 1fr;
  }
}

/* DP4.6.2-FEEDS-CLICKSAFE-HOTFIX-END */

/* Re-align the workbench shell with the canonical portal topbar. */
.ot-shell__topbar {
  min-height: var(--topbar-h);
  display: grid;
  grid-template-columns: minmax(360px, max-content) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 8px 24px;
}

.ot-shell__nav {
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}



/* HIERARCHY-UNIFY-20260528-BEGIN */
body.ot-v3-format.ot-v3-workbench .ot-tree-panel {
  max-height: none !important;
  overflow-y: auto !important;
  padding: 12px 10px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tree {
  align-content: start !important;
  gap: 2px !important;
  min-height: 0 !important;
}

body.ot-v3-format.ot-v3-workbench .ot-footer {
  margin-top: 14px !important;
  padding: 12px 16px !important;
}
/* HIERARCHY-UNIFY-20260528-END */

/* ASSET-DIAGNOSTICS-COMPACT-PRESENTATION-20260530-BEGIN */
body.ot-v3-format.ot-v3-workbench .ot-workbench-root {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "main" !important;
  min-height: calc(100vh - var(--topbar-h, 56px)) !important;
  padding: 10px 12px 14px !important;
  background: var(--paper, #FAFAF8) !important;
  color: var(--ink, #0D1117) !important;
}

html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-workbench-root {
  background: var(--navy-dark, #001E44) !important;
  color: var(--paper, #FAFAF8) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-wb-rail,
body.ot-v3-format.ot-v3-workbench .ot-wb-rail-toggle,
body.ot-v3-format.ot-v3-workbench .ot-wb-theme-toggle {
  display: none !important;
}

body.ot-v3-format.ot-v3-workbench .ot-workbench {
  display: grid !important;
  grid-template-columns: minmax(236px, 276px) minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 0 !important;
  min-height: calc(100vh - var(--topbar-h, 56px) - 24px) !important;
  background: transparent !important;
  border: 0 !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tree-panel {
  max-height: calc(100vh - var(--topbar-h, 56px) - 26px) !important;
  min-height: calc(100vh - var(--topbar-h, 56px) - 26px) !important;
  padding: 10px 10px 12px !important;
  border-radius: 0 !important;
  background: var(--white, #FFFFFF) !important;
  border: 1px solid var(--rule-light, #EBEBEB) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-tree-panel,
html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-centre-panel,
html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist,
html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-context-band {
  background: var(--navy, #002F65) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--paper, #FAFAF8) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tree-panel .ot-panel__header {
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tree-panel h2 {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

body.ot-v3-format.ot-v3-workbench .ot-search {
  margin: 8px 0 10px !important;
  gap: 4px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-search input {
  min-height: 32px !important;
  padding: 6px 8px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tree {
  font-size: 12px !important;
  gap: 1px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tree-node {
  min-height: 24px !important;
  padding: 2px 5px !important;
  gap: 5px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-centre-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - var(--topbar-h, 56px) - 26px) !important;
  overflow: hidden !important;
  background: var(--white, #FFFFFF) !important;
  border: 1px solid var(--rule-light, #EBEBEB) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-sticky-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 6 !important;
  background: var(--white, #FFFFFF) !important;
  border-bottom: 1px solid var(--rule-light, #EBEBEB) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-sticky-header {
  background: var(--navy, #002F65) !important;
  border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-context-band {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 8px 12px !important;
  min-height: 54px !important;
  background: var(--white, #FFFFFF) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-context-band h2 {
  font-size: 18px !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

body.ot-v3-format.ot-v3-workbench .ot-context-band p {
  margin: 2px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  color: var(--ink-3, #3A4252) !important;
}

html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-context-band p,
html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist p,
html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-context-metrics small {
  color: rgba(255, 255, 255, 0.72) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-context-metrics {
  display: flex !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.ot-v3-format.ot-v3-workbench .ot-context-metrics div {
  min-width: 76px !important;
  padding: 5px 8px !important;
  border-left-width: 2px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-context-metrics span {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

body.ot-v3-format.ot-v3-workbench .ot-context-metrics small {
  font-size: 9px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 7px 12px !important;
  min-height: 0 !important;
  border-bottom: 1px solid var(--rule-light, #EBEBEB) !important;
  background: var(--paper, #FAFAF8) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist h2 {
  font-size: 13px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist p {
  display: inline !important;
  margin: 0 0 0 8px !important;
  font-size: 11px !important;
  color: var(--ink-3, #3A4252) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist button,
body.ot-v3-format.ot-v3-workbench .ot-control-actions button,
body.ot-v3-format.ot-v3-workbench .ot-controls button {
  min-height: 30px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tabs-row {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 36px !important;
  padding: 0 !important;
  background: var(--navy, #002F65) !important;
  border-bottom: 1px solid var(--navy-dark, #001E44) !important;
  overflow: hidden !important;
}

body.ot-v3-format.ot-v3-workbench .ot-group-pill {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 0 !important;
  background: var(--teal, #00A8CB) !important;
  color: var(--navy-dark, #001E44) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tabs--source {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow-x: auto !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tabs--source__scroller {
  display: inline-flex !important;
  min-width: max-content !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tabs--source button,
body.ot-v3-format.ot-v3-workbench .ot-tabs-row button {
  min-height: 36px !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: transparent !important;
  color: var(--white, #FFFFFF) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tabs--source button.is-active,
body.ot-v3-format.ot-v3-workbench .ot-tabs-row button.is-active {
  background: var(--teal, #00A8CB) !important;
  color: var(--navy-dark, #001E44) !important;
  font-weight: 700 !important;
  border-top: 0 !important;
}

body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  min-height: 48px !important;
  border-bottom: 1px solid var(--rule-light, #EBEBEB) !important;
  overflow-x: auto !important;
  background: var(--paper, #FAFAF8) !important;
}

html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-live-control {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  min-height: 46px !important;
  border-bottom: 1px solid var(--rule-light, #EBEBEB) !important;
  background: var(--white, #FFFFFF) !important;
}

html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-live-control {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-live-control__status {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.ot-v3-format.ot-v3-workbench .ot-live-control__status span {
  color: var(--ink-4, #6B7280) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.ot-v3-format.ot-v3-workbench .ot-live-control__status strong {
  color: var(--navy, #002F65) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-live-control__status strong {
  color: var(--teal, #00A8CB) !important;
}

body.ot-v3-format.ot-v3-workbench #pause-feed-primary {
  min-width: 92px !important;
  height: 32px !important;
  padding: 0 16px !important;
  border: 1px solid var(--navy, #002F65) !important;
  border-radius: 3px !important;
  background: var(--navy, #002F65) !important;
  color: var(--white, #FFFFFF) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.ot-v3-format.ot-v3-workbench #pause-feed-primary:hover,
body.ot-v3-format.ot-v3-workbench #pause-feed-primary:focus-visible {
  background: var(--navy-dark, #001E44) !important;
  border-color: var(--navy-dark, #001E44) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact > label {
  flex: 0 0 154px !important;
  display: grid !important;
  gap: 3px !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ink-4, #6B7280) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact > label:has(#code-select) {
  flex-basis: 246px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact > label:has(#capture-select) {
  flex-basis: 290px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact input,
body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact select {
  min-height: 30px !important;
  height: 30px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  background: var(--white, #FFFFFF) !important;
  color: var(--ink, #0D1117) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact > .ot-filter-card,
body.ot-v3-format.ot-v3-workbench .ot-channel-controls[data-dp462-merged="1"] {
  flex: 1 0 440px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 360px !important;
  max-width: 620px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  min-height: 30px !important;
  border: 1px solid var(--rule-light, #EBEBEB) !important;
  background: var(--white, #FFFFFF) !important;
  overflow: visible !important;
}

body.ot-v3-format.ot-v3-workbench .ot-channel-controls legend {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  color: var(--navy, #002F65) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.ot-v3-format.ot-v3-workbench .ot-channel-controls label,
body.ot-v3-format.ot-v3-workbench .ot-channel-controls[data-dp462-merged="1"] label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  color: var(--ink-3, #3A4252) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-control-actions {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  gap: 6px !important;
  align-items: center !important;
  align-self: center !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tab-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 8px 10px 10px !important;
  overflow: auto !important;
}

body.ot-v3-format.ot-v3-workbench .ot-chart-stack {
  gap: 8px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-chart,
body.ot-v3-format.ot-v3-workbench .ot-wb-chart-frame {
  background: var(--ot-chart-bg, var(--white, #FFFFFF)) !important;
  border: 1px solid var(--rule, #D8D3CC) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.ot-v3-format.ot-v3-workbench .ot-chart {
  min-height: clamp(300px, 46vh, 440px) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-chart-stack .ot-chart {
  min-height: clamp(190px, 25vh, 260px) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-chart--short {
  min-height: clamp(150px, 18vh, 200px) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-wb-chart-frame {
  margin: 0 !important;
  overflow: hidden !important;
}

body.ot-v3-format.ot-v3-workbench .ot-wb-chart-frame__header {
  min-height: 28px !important;
  padding: 5px 9px !important;
  background: var(--paper, #FAFAF8) !important;
  border-bottom: 1px solid var(--rule-light, #EBEBEB) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-wb-chart-frame__title {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

body.ot-v3-format.ot-v3-workbench .ot-wb-chart-frame__body {
  padding: 6px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-wb-chart-frame__footer,
body.ot-v3-format.ot-v3-workbench .ot-wb-chart-frame__subpanels {
  padding: 4px 8px !important;
  font-size: 11px !important;
}

.ot-workbench-root[data-chart-theme="dark"] .ot-chart,
.ot-workbench-root[data-chart-theme="dark"] .ot-wb-chart-frame {
  background: var(--ot-chart-bg, var(--navy-dark, #001E44)) !important;
  border-color: #1F3A66 !important;
  color: var(--ot-chart-label, #E6ECF3) !important;
}

.ot-workbench-root[data-chart-theme="dark"] .ot-wb-chart-frame__header {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom-color: #1F3A66 !important;
}

@media (max-width: 1180px) {
  body.ot-v3-format.ot-v3-workbench .ot-workbench {
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) !important;
  }
  body.ot-v3-format.ot-v3-workbench .ot-context-metrics {
    display: none !important;
  }
}

@media (max-width: 860px) {
  body.ot-v3-format.ot-v3-workbench .ot-workbench {
    grid-template-columns: 1fr !important;
  }
  body.ot-v3-format.ot-v3-workbench .ot-tree-panel {
    min-height: 220px !important;
    max-height: 320px !important;
  }
  body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact {
    flex-wrap: wrap !important;
  }
}


/* ASSET-DIAGNOSTICS-COMPACT-CASCADE-20260530-BEGIN */
body.ot-v3-format.ot-v3-workbench .ot-tabs-row,
body.ot-v3-format.ot-v3-workbench .ot-tabs--source,
body.ot-v3-format.ot-v3-workbench .ot-tabs--source__scroller {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  align-items: stretch !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tabs--source .ot-group-pill {
  display: none !important;
}

body.ot-v3-format.ot-v3-workbench .ot-tabs--source {
  overflow-y: hidden !important;
}

body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact {
  height: 48px !important;
  max-height: 48px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact > .ot-control-actions {
  flex-wrap: nowrap !important;
  height: 30px !important;
  max-height: 30px !important;
  width: auto !important;
  min-width: max-content !important;
}

body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact > .ot-control-actions button,
body.ot-v3-format.ot-v3-workbench .ot-controls:has(.ot-channel-controls[data-dp462-merged="1"]) > .ot-control-actions button {
  width: auto !important;
  min-width: max-content !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
}
body.ot-v3-format.ot-v3-workbench .ot-channel-controls[data-dp462-merged="1"] .ot-wb-rail__group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.ot-v3-format.ot-v3-workbench .ot-channel-controls[data-dp462-merged="1"] .ot-wb-rail__eyebrow {
  margin: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  color: var(--navy, #002F65) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-channel-controls[data-dp462-merged="1"] .ot-wb-rail__select {
  height: 28px !important;
  min-height: 28px !important;
  max-width: 142px !important;
  padding: 3px 6px !important;
  font-size: 12px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-wb-chart-frame {
  min-height: 0 !important;
  height: auto !important;
}

body.ot-v3-format.ot-v3-workbench .ot-chart {
  height: clamp(300px, 42vh, 420px) !important;
  min-height: clamp(300px, 42vh, 420px) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-chart-stack .ot-chart {
  height: clamp(180px, 23vh, 238px) !important;
  min-height: clamp(180px, 23vh, 238px) !important;
}

body.ot-v3-format.ot-v3-workbench .ot-chart--short {
  height: clamp(140px, 17vh, 188px) !important;
  min-height: clamp(140px, 17vh, 188px) !important;
}
/* ASSET-DIAGNOSTICS-COMPACT-CASCADE-20260530-END */

/* ASSET-DIAGNOSTICS-COMPACT-PRESENTATION-20260530-END */




/* ASSET-DIAGNOSTICS-LABEL-QA-20260530-BEGIN */
body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact > label.is-label-hidden > span {
  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;
}

body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact > label:has(#code-select) {
  flex-basis: 320px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact > label:has(#capture-select) {
  flex-basis: 300px !important;
}

body.ot-v3-format.ot-v3-workbench .ot-controls.is-compact > .ot-filter-card,
body.ot-v3-format.ot-v3-workbench .ot-channel-controls[data-dp462-merged="1"] {
  flex: 1 0 700px !important;
  max-width: none !important;
  overflow: visible !important;
}

body.ot-v3-format.ot-v3-workbench .ot-channel-controls[data-dp462-merged="1"] .ot-wb-rail__group--feed {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: max-content !important;
  flex: 0 0 auto !important;
}

body.ot-v3-format.ot-v3-workbench .ot-channel-controls[data-dp462-merged="1"] .ot-wb-rail__group--feed label {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
/* ASSET-DIAGNOSTICS-LABEL-QA-20260530-END */