:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --ink: #142033;
  --muted: #667085;
  --panel: #ffffff;
  --soft-panel: #f8fafc;
  --line: #e4e7ec;
  --green: #16885b;
  --amber: #b86a12;
  --red: #c0342b;
  --blue: #2563eb;
  --nav: #0f172a;
  --radius: 18px;
  --shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  --font-sans: "Manrope", "Segoe UI", sans-serif;
  --font-display: "Source Serif 4", Georgia, serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111418;
  --ink: #edf1f5;
  --muted: #a7b0bc;
  --panel: #1b2026;
  --soft-panel: #222830;
  --line: #353d47;
  --green: #59c997;
  --amber: #f2b45f;
  --red: #ff8178;
  --blue: #7eb6ff;
  --nav: #0b0e12;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

:root[data-theme="harten"] {
  color-scheme: dark;
  --bg: #101614;
  --ink: #f3f7f4;
  --muted: #bac8c2;
  --panel: #151d1a;
  --soft-panel: #1a2723;
  --line: #34453f;
  --green: #6fbc9f;
  --amber: #f0b44d;
  --red: #ee7d72;
  --blue: #f0b44d;
  --nav: #0c1312;
  --radius: 6px;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-sans);
  background: var(--bg);
  transition: background-color 160ms ease, color 160ms ease;
}

button, input, textarea { font: inherit; }

.async-activity {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(20, 32, 51, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.async-activity.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.async-loader {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #dbeafe;
  border-top-color: var(--blue);
  border-right-color: var(--green);
  animation: async-loader-spin 720ms linear infinite;
}

@keyframes async-loader-spin {
  to { transform: rotate(360deg); }
}

.shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

body.is-authenticated .shell {
  grid-template-columns: 284px minmax(0, 1fr);
}

body.is-authenticated.is-nav-collapsed .shell {
  grid-template-columns: 0 minmax(0, 1fr);
}

.side-nav {
  display: none;
  padding: 22px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--nav);
  color: #e2e8f0;
  overflow: hidden auto;
  transition: transform 220ms ease-out, opacity 180ms ease-out, padding 220ms ease-out;
}

body.is-authenticated .side-nav {
  display: block;
}

body.is-authenticated.is-nav-collapsed .side-nav {
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  transform: translateX(-100%);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 26px;
  padding: 6px 6px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.maas-mark { width: 46px; height: 46px; flex: 0 0 auto; overflow: visible; }
.maas-mark-flow { fill: none; stroke: #74817c; stroke-width: 1.4; stroke-linecap: round; opacity: 0.58; }
.maas-mark-decision { fill: var(--amber); stroke: var(--amber); }
.maas-mark-node { fill: var(--nav); stroke: #74817c; stroke-width: 1.4; }
.maas-mark-outcome { fill: #397e70; stroke: #6fbc9f; stroke-width: 1; }

.brand strong { color: #ffffff; font-family: var(--font-display); font-size: 19px; font-weight: 600; }

.brand span:last-child {
  display: block;
  color: #94a3b8;
  font-size: 14px;
}

.phase-nav {
  display: grid;
  gap: 8px;
}

.nav-section {
  border: 1px solid transparent;
}

.nav-section.is-open {
  border-color: rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.phase-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
}

.phase-toggle span {
  color: #94a3b8;
  font-size: 12px;
  letter-spacing: 0;
}

.phase-toggle strong {
  font-size: 15px;
}

.phase-toggle::after {
  content: "+";
  color: #93c5fd;
  font-weight: 700;
}

.nav-section.is-open .phase-toggle::after {
  content: "-";
}

.phase-toggle:hover {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.phase-items {
  padding: 0 8px 8px;
}

.phase-items[hidden] {
  display: none;
}

.nav-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin: 4px 0;
  border: 1px solid transparent;
  background: transparent;
  color: #cbd5e1;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
}

.nav-item.is-active,
.nav-item:hover {
  border-color: rgba(147, 197, 253, 0.38);
  background: rgba(37, 99, 235, 0.18);
  color: #ffffff;
}

.nav-item:disabled,
.nav-item-pending {
  cursor: not-allowed;
  color: rgba(203, 213, 225, 0.52);
}

.nav-item:disabled:hover {
  border-color: transparent;
  background: transparent;
}

.workspace {
  min-width: 0;
  padding: clamp(18px, 2.4vw, 34px);
}

.topbar {
  display: none;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.topbar-main {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}

.nav-toggle {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft-panel);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle:hover {
  border-color: var(--blue);
  background: #e7f0ef;
}

body.is-authenticated .topbar {
  display: flex;
}

h1, h2 { margin: 0; letter-spacing: 0; }
h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.05; }
h2 { font-size: clamp(22px, 2vw, 30px); }
p { color: var(--muted); }

.session-box {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.topbar-main { flex: 1 1 420px; }
.session-box { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.confidence-report-panel { margin-top: 16px; }
.confidence-total { display: grid; text-align: right; }
.confidence-total strong { font-size: 28px; }
.confidence-total span { color: var(--muted); text-transform: capitalize; }
.confidence-report-list { display: grid; gap: 10px; margin-top: 18px; }
.confidence-application { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px 20px; width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft-panel); color: var(--ink); text-align: left; cursor: pointer; }
.confidence-application > span:first-child { display: grid; gap: 3px; }
.confidence-application small { color: var(--muted); }
.confidence-score { font-size: 22px; font-weight: 700; }
.confidence-bar { grid-column: 1 / -1; height: 6px; border-radius: 8px; overflow: hidden; background: var(--line); }
.confidence-bar i { display: block; height: 100%; background: var(--success); }
.confidence-dimensions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.confidence-dimensions em { display: grid; gap: 2px; padding: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; font-style: normal; }
.confidence-dimensions b { color: var(--ink); font-size: 14px; }
.confidence-history { display: flex; align-items: end; gap: 4px; height: 54px; margin-top: 16px; color: var(--muted); font-size: 11px; }
.confidence-history i { width: 10px; max-height: 40px; background: var(--blue); border-radius: 2px 2px 0 0; }

.theme-switch {
  display: grid;
  grid-template-columns: repeat(3, 32px);
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-panel);
}

.theme-switch .theme-option {
  width: 32px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
}
.theme-switch .theme-option:hover { border-color: var(--line); background: var(--panel); color: var(--ink); box-shadow: none; }
.theme-switch .theme-option[aria-pressed="true"] { border-color: var(--amber); background: var(--panel); color: var(--amber); box-shadow: none; }
.theme-diamond { font-size: 13px; }

.icon-button, .secondary, .panel-form button, .login-form button {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--panel);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

.icon-button { width: 38px; height: 38px; border-radius: 10px; }
.secondary { padding: 9px 12px; background: transparent; color: var(--ink); }
.panel-form button, .login-form button { padding: 11px 16px; }
.icon-button:hover, .secondary:hover, .panel-form button:hover, .login-form button:hover {
  border-color: var(--blue);
  background: #225c7a;
  color: var(--panel);
  box-shadow: 0 0 0 3px rgba(34, 92, 122, 0.16);
}
.icon-button:active, .secondary:active, .panel-form button:active, .login-form button:active,
.icon-button.is-busy, .secondary.is-busy {
  transform: translateY(1px);
  border-color: var(--green);
  background: #1f7a4d;
  color: var(--panel);
  box-shadow: inset 0 0 0 2px rgba(255, 250, 241, 0.42), 0 0 0 3px rgba(31, 122, 77, 0.18);
}
.icon-button:disabled, .secondary:disabled, .panel-form button:disabled, .login-form button:disabled {
  cursor: wait;
}

.login-panel {
  max-width: 1120px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.view {
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.login-form { max-width: 420px; }
.login-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.login-brand strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.login-brand span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.login-form label, .panel-form label { display: grid; gap: 7px; color: var(--muted); }
.login-form input, .panel-form input, .panel-form textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
}

.login-form { display: grid; gap: 14px; }
.error-text { color: var(--red); min-height: 20px; }
.views .view { display: none; }
.views .view.is-active { display: block; }

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  /* The orchestration header carries four filters, a status and a button. Without
     wrapping they only fit at full width and overflowed the panel at every size
     between the 780px stack breakpoint and a maximised window - which is any
     window with devtools open. */
  flex-wrap: wrap;
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.health-card, .summary-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.health-card {
  min-width: 0;
}

.summary-card {
  min-width: 0;
}

.health-url {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.summary-filter {
  min-width: 108px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.summary-filter:hover, .summary-filter.is-active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34, 92, 122, 0.14);
}

.summary-filter.is-active { background: #eef7f1; }

.health-card strong { display: block; margin-bottom: 8px; }
.status-ok { color: var(--green); }
.status-bad { color: var(--red); }
.status-pending { color: var(--muted); }
.status-blocked { color: var(--red); }
.status-warn { color: var(--amber); }

.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.run-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 16px;
}

.run-filter-group { min-width: 0; }
.run-filter-group h3 { margin: 0 0 8px; font-size: 14px; }
.run-filter-group .summary-strip { margin-bottom: 0; }
.run-filter-group .summary-card { padding: 14px; }
.active-run-group { grid-column: 1 / -1; }
.active-work-queue { min-width: 0; }
.active-work-queue .table-shell { margin: 0; }
.active-work-queue table { min-width: 880px; }
.history-heading { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; }
.history-heading h3 { margin: 0 0 4px; }
.history-heading p { margin: 0; }
.history-scope { display: grid; gap: 3px; min-width: 0; }
.history-scope strong { overflow: hidden; max-width: 32ch; text-overflow: ellipsis; white-space: nowrap; }
.history-scope small { color: var(--muted); }
.history-outcome { display: inline-flex; padding: 5px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; line-height: 1; text-transform: capitalize; }
.history-action { width: 1%; text-align: right; white-space: nowrap; }
.compact-button { min-height: 32px; padding: 5px 12px; }
#orchestration > .table-shell table { min-width: 720px; }
#orchestration > .table-shell tbody tr:hover { background: color-mix(in srgb, var(--panel) 88%, var(--blue)); }

.runtime-investigation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 10px;
}

.runtime-investigation-card {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.runtime-investigation-card.has-failures { border-left-color: var(--red); }
.runtime-investigation-card:hover { border-color: var(--blue); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); }
.runtime-investigation-card > div:first-child { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.runtime-investigation-card > div:first-child span, .runtime-investigation-card small { color: var(--muted); }
.runtime-investigation-card p { margin: 0; }

.runtime-outcome-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.runtime-outcome-badges span { padding: 3px 7px; border: 1px solid currentColor; border-radius: 6px; font-size: 12px; }

.runtime-attempt-list { display: grid; gap: 10px; }
.runtime-attempt-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 8px; background: var(--panel); }
.runtime-attempt-card.is-complete { border-left-color: var(--green); }
.runtime-attempt-card.is-failed { border-left-color: var(--red); }
.runtime-attempt-card.is-warning { border-left-color: var(--amber); }
.runtime-attempt-card > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.runtime-attempt-card p { margin: 0; }
.runtime-attempt-card dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.runtime-attempt-card dl div { min-width: 0; }
.runtime-attempt-card dt { color: var(--muted); font-size: 12px; }
.runtime-attempt-card dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.runtime-attempt-card button { justify-self: start; }

.run-failure-actions { display: grid; gap: 12px; margin: 0 0 18px; padding: 14px; border: 1px solid var(--amber); border-radius: 8px; background: color-mix(in srgb, var(--amber) 8%, var(--panel)); }
.run-failure-actions > div:first-child { display: grid; gap: 4px; }
.run-failure-actions > div:first-child span { color: var(--muted); }
.failure-analysis-result { padding-top: 12px; border-top: 1px solid var(--line); }
.failure-analysis-provenance { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.failure-analysis-provenance strong { color: var(--ink); }
.runtime-attempt-link { display: flex; width: 100%; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; }

.danger-button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--red);
  border-radius: 6px;
  background: transparent;
  color: var(--red);
  font-weight: 700;
  cursor: pointer;
}

.danger-button:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 12%, var(--panel)); }
.danger-button:disabled { cursor: not-allowed; opacity: 0.45; }
.compact-danger { min-height: 32px; padding: 5px 9px; }

.admin-lookup-panel { margin-bottom: 16px; padding: 12px 0; border-block: 1px solid var(--line); }
.admin-run-lookup { display: flex; align-items: end; gap: 10px; }
.admin-run-lookup label { display: grid; flex: 1 1 420px; max-width: 680px; gap: 5px; color: var(--muted); font-size: 12px; }
.admin-lookup-result { margin-top: 12px; }
.admin-lookup-card { display: grid; max-width: 820px; gap: 8px; padding: 12px; border-left: 4px solid var(--amber); background: var(--panel); }
.admin-lookup-card > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.admin-lookup-card p { margin: 0; }
.admin-lookup-card small { color: var(--muted); }

.admin-kill-dialog {
  width: min(620px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.admin-kill-dialog::backdrop { background: rgba(4, 12, 10, 0.72); }

.ux-modal, .ux-drawer { border: 1px solid var(--line); background: var(--panel); color: var(--text); box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38); }
.ux-modal { width: min(560px, calc(100vw - 32px)); border-radius: 18px; padding: 0; }
.ux-modal::backdrop, .ux-drawer::backdrop { background: rgba(4, 12, 10, 0.62); }
.ux-modal form { display: grid; gap: 18px; padding: 24px; }
.ux-surface-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ux-surface-heading h2 { margin: 4px 0 0; }
.ux-surface-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.ux-decision-context { padding: 14px 16px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.ux-decision-context dl { margin: 0; display: grid; gap: 10px; }
.ux-decision-context dt { color: var(--muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ux-decision-context dd { margin: 2px 0 0; }
.ux-drawer { width: min(620px, calc(100vw - 24px)); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border-radius: 0; border-width: 0 0 0 1px; }
.ux-drawer[open] { animation: ux-drawer-enter 180ms ease-out; }
.ux-drawer-shell { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 20px; padding: 24px; }
.ux-drawer-body { overflow: auto; min-height: 0; }
.ux-drawer-body > :first-child { margin-top: 0; }
@keyframes ux-drawer-enter { from { transform: translateX(36px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } }
@media (max-width: 680px) { .ux-drawer { width: 100vw; max-width: 100vw; } .ux-surface-actions > button { flex: 1 1 auto; } }
.admin-kill-dialog form { display: grid; gap: 16px; padding: 18px; }
.admin-kill-dialog .view-header { margin-bottom: 0; }
.admin-kill-dialog label:not(.checkbox) { display: grid; gap: 6px; color: var(--muted); }
.admin-kill-dialog textarea { width: 100%; resize: vertical; }
.admin-kill-confirmation { padding: 10px; border: 1px solid var(--line); border-radius: 6px; }

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--muted);
}

.control-records-disclosure {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.control-records-summary {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.control-records-summary span { font-weight: 700; }
.control-records-summary small { margin-left: auto; color: var(--muted); }
.control-records-summary::after { content: "+"; color: var(--blue); font-weight: 700; }
.control-records-disclosure.is-open .control-records-summary::after { content: "-"; }
.control-records-disclosure .table-shell { margin: 0 12px 12px; }

.table-shell {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}
.compact-table { margin-bottom: 18px; }
table { width: 100%; border-collapse: collapse; background: var(--panel); }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 700; }

.panel-form { display: grid; gap: 16px; max-width: 1120px; }
.compact-form { margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.form-actions { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.checkbox { display: flex !important; grid-template-columns: auto 1fr; align-items: center; color: var(--ink) !important; }
.checkbox input { width: auto; }
.partition-capability-choice { margin: 12px 0; }
.partition-capability-choice .checkbox span { display: grid; gap: 4px; }
.partition-capability-choice small { color: var(--muted); }
.result-box {
  min-height: 120px;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #1d2520;
  color: #f4f0e8;
}
.result-box.is-loading {
  display: grid;
  place-items: center;
  min-height: 220px;
  color: #dbeafe;
  font-weight: 700;
}
.compact-result { min-height: 52px; }

.proof-list { max-width: 820px; line-height: 1.55; }

.link-button {
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.back-link {
  display: block;
  margin-bottom: 8px;
}
.run-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* Filters share the row and shrink together; a select's default min-width is its
   content, which is what forced the row wider than its container. */
.run-actions label { flex: 1 1 160px; min-width: 0; }
.run-actions label select { width: 100%; min-width: 0; }
/* The action and its status keep their size and move to the next line instead. */
.run-actions > .secondary { flex: 0 0 auto; }
.run-actions > .stream-status { flex: 0 1 auto; min-width: 0; }
.stream-status { color: var(--muted); font-size: 14px; }
.stream-status.is-live { color: var(--green); }
.stream-status.is-error { color: var(--red); }
.run-channel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.channel-tab {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.channel-tab.is-active {
  border-color: var(--blue);
  background: #e7f0ef;
}
.run-channel-panel { display: none; }
.run-channel-panel.is-active { display: block; }
.channel-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.detail-grid { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr); gap: 16px; }
.event-list { display: grid; gap: 8px; max-height: 420px; overflow: auto; }

.submission-state {
  display: block;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.submission-hero {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--amber);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.submission-hero.is-success { border-left-color: var(--green); }
.submission-hero.is-blocked { border-left-color: var(--red); }
.submission-hero .summary-strip { margin-bottom: 0; }

.submission-run-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.submission-run-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.submission-run-card > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.submission-run-card strong,
.submission-run-card small {
  overflow-wrap: anywhere;
}

.submission-run-card p { margin: 0; }
.submission-run-card button { justify-self: start; }
.submission-json {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.submission-json[hidden] { display: none; }
.submission-json summary {
  padding: 12px 14px;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.submission-json .result-box {
  margin: 0 12px 12px;
  max-height: 480px;
}
.event-card { padding: 10px 12px; border: 1px solid var(--line); background: #fffdf8; }
.event-card span { display: block; color: var(--muted); font-size: 13px; }
.event-card p { margin: 6px 0 0; }

.artifact-shell, .loom-shell, .generated-shell, .application-spec-shell {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 22px;
}

.partition-catalog-view, .partition-detail-view { width: 100%; min-width: 0; }

.artifact-nav, .artifact-viewer, .partition-nav, .partition-viewer, .loom-nav, .loom-viewer, .application-spec-nav, .application-spec-workspace {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.artifact-nav, .partition-nav, .loom-nav, .application-spec-nav { padding: 18px; }
.artifact-nav h3, .partition-nav h3, .loom-nav h3, .application-spec-nav h3 { margin: 10px 0 8px; font-size: 16px; }
.artifact-nav h3:first-child, .partition-nav h3:first-child, .loom-nav h3:first-child, .application-spec-nav h3:first-child { margin-top: 0; }
.artifact-filters {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.artifact-filters label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
}
.artifact-filters select {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
}
.artifact-date-picker { display: grid; gap: 3px; }
.artifact-filter-label { color: var(--muted); font-size: 12px; }
.artifact-date-trigger {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.artifact-date-trigger:hover, .artifact-date-trigger:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(34, 92, 122, 0.14); }
.artifact-date-trigger-icon { font-size: 19px; line-height: 1; }
.artifact-date-trigger-copy { display: grid; min-width: 0; }
.artifact-date-trigger-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.artifact-date-trigger-copy small { color: var(--muted); font-size: 10px; }
.artifact-calendar-dialog {
  width: min(380px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(8, 18, 28, 0.34);
}
.artifact-calendar-dialog::backdrop { background: rgba(8, 18, 28, 0.58); }
.artifact-calendar-surface { display: grid; gap: 12px; padding: 14px; }
.artifact-calendar-header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px 34px;
  align-items: center;
  gap: 5px;
}
.artifact-calendar-header strong { text-align: center; }
.artifact-calendar-control {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.artifact-calendar-control:hover:not(:disabled), .artifact-calendar-control:focus-visible { border-color: var(--blue); color: var(--blue); }
.artifact-calendar-control:disabled { cursor: default; opacity: 0.32; }
.artifact-calendar-weekdays, .artifact-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.artifact-calendar-weekdays span { color: var(--muted); font-size: 10px; text-align: center; }
.artifact-calendar-spacer { aspect-ratio: 1; }
.artifact-calendar-day {
  display: grid;
  place-content: center;
  gap: 1px;
  aspect-ratio: 1;
  min-width: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  text-align: center;
}
.artifact-calendar-day:disabled { border-color: transparent; color: var(--muted); opacity: 0.38; }
.artifact-calendar-day.has-runs { border-color: var(--green); background: rgba(50, 138, 96, 0.12); cursor: pointer; }
.artifact-calendar-day span { font-size: 12px; }
.artifact-calendar-day small { color: var(--green); font-size: 9px; font-weight: 700; }
.artifact-calendar-day.has-runs:hover, .artifact-calendar-day.is-active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(34, 92, 122, 0.14);
}
.artifact-calendar-day.is-active { background: rgba(34, 92, 122, 0.16); }
.artifact-calendar-legend { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.artifact-calendar-legend span { width: 10px; height: 10px; border: 1px solid var(--green); border-radius: 3px; background: rgba(50, 138, 96, 0.12); }
.artifact-list { display: grid; gap: 8px; margin-bottom: 14px; }
.loom-nav .artifact-list + h3 { margin-top: 18px; }
.runs-calendar { margin-bottom: 14px; }
.runs-calendar .artifact-calendar-surface {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 12px;
  gap: 10px;
}
.runs-work-units { overflow-x: auto; }
.runs-work-units small { color: var(--muted); }
.artifact-nav .artifact-list + h3 { margin-top: 18px; }
.loom-exports {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.loom-exports[hidden] { display: none; }
.loom-export-link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
}
.loom-export-link:hover { border-color: var(--accent); }
.loom-export-link strong { font-size: 13px; overflow-wrap: anywhere; }
.loom-export-link span { color: var(--muted); font-size: 11px; }
.loom-export-link { cursor: pointer; font: inherit; text-align: left; }
.loom-export-link:disabled { cursor: wait; opacity: 0.7; }
.loom-header-actions, .generated-header-actions { display: flex; align-items: flex-end; gap: 10px; }
.loom-date-filter, .generated-date-filter { min-width: min(260px, 36vw); }
.generated-file-actions { display: flex; align-items: center; gap: 12px; margin: 12px 0 18px; }
.application-spec-nav { overflow: auto; }
.application-spec-nav .artifact-list + h3 { margin-top: 20px; }
.application-spec-workspace { padding: clamp(18px, 2vw, 26px); overflow: auto; }
.spec-brief {
  display: grid;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec-brief label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
.spec-brief label small { margin-left: 6px; font-weight: 500; }
.spec-brief textarea {
  width: 100%;
  min-height: 108px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
}
.spec-brief textarea:focus { border-color: var(--blue); outline: 2px solid color-mix(in srgb, var(--blue) 22%, transparent); }
.spec-generation-actions, .spec-package-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spec-prompt-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.spec-prompt-guide span {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft-panel);
  color: var(--muted);
  font-size: 12px;
}
.spec-prompt-guide strong { display: block; margin-bottom: 2px; color: var(--ink); }
.spec-primary-action {
  padding: 11px 16px;
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  background: var(--amber);
  color: #17130b;
  font-weight: 750;
  cursor: pointer;
}
.spec-primary-action:hover:not(:disabled) { filter: brightness(1.08); }
.spec-primary-action:disabled { opacity: 0.42; cursor: not-allowed; }
.spec-primary-action.is-busy { cursor: wait; }
.spec-package { min-width: 0; }
.spec-package[hidden] { display: none; }
.spec-package-header {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.spec-package-header > div { display: grid; gap: 3px; min-width: 0; }
.spec-package-header > .spec-package-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.spec-package-header strong, .spec-package-header span { overflow-wrap: anywhere; }
.spec-package-header span { color: var(--muted); font-size: 12px; }
.spec-output-shell {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  min-height: 520px;
}
.spec-file-nav {
  min-width: 0;
  padding: 18px 18px 18px 0;
  border-right: 1px solid var(--line);
  overflow: auto;
}
.spec-document { min-width: 0; padding: 18px 0 18px 22px; overflow: auto; }
.spec-document .artifact-markdown { margin: 0; }
.work-order-table { margin-bottom: 20px; }
.work-order-table table { min-width: 880px; table-layout: fixed; }
.work-order-table th:first-child { width: 170px; }
.work-order-table th:nth-child(2), .work-order-table th:nth-child(3), .work-order-table th:nth-child(6), .work-order-table th:nth-child(7) { width: 100px; }
.work-order-table tr.is-selected td { background: color-mix(in srgb, var(--blue) 9%, var(--panel)); }
.work-order-table td strong, .work-order-table td small { display: block; }
.work-order-table td small { margin-top: 3px; color: var(--muted); }
.work-order-table code, .work-order-detail code { overflow-wrap: anywhere; word-break: break-word; }
.work-order-select {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: baseline;
  gap: 7px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.work-order-select strong { color: var(--blue); }
.work-order-select span { overflow-wrap: anywhere; }
.work-order-detail { min-width: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.work-order-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.work-order-detail-header span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.work-order-detail-header h3 { margin: 4px 0 0; font-size: 20px; }
.work-order-statement { max-width: 90ch; margin: 14px 0 20px; font-size: 16px; line-height: 1.6; }
.work-order-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
}
.work-order-facts > div { min-width: 0; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.work-order-facts > div:nth-child(odd) { padding-right: 20px; }
.work-order-facts dt { margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.work-order-facts dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.work-order-lists { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 20px; }
.work-order-lists > section { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.work-order-lists h4 { margin: 0 0 8px; font-size: 14px; }
.work-order-lists ul { margin: 0; padding-left: 20px; }
.work-order-lists li + li { margin-top: 6px; }

@media (max-width: 780px) {
  .loom-header-actions, .generated-header-actions { align-items: stretch; flex-direction: column; }
  .loom-date-filter, .generated-date-filter { min-width: 0; }
}
.loom-run-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.loom-run-item input { width: 16px; height: 16px; margin: 2px 0 0; }
.loom-run-item span { display: grid; min-width: 0; }
.loom-run-item strong, .loom-run-item small { overflow-wrap: anywhere; }
.loom-run-item small { color: var(--muted); }
.loom-batch-item {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 8px;
}
.loom-batch-item.is-complete { border-left-color: var(--ok, #3fb950); }
.loom-batch-item.is-partial { border-left-color: var(--warn, #d29922); }
.loom-batch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.loom-batch-item small { color: var(--muted); overflow-wrap: anywhere; }
.loom-batch-coverage { font-size: 12px; white-space: nowrap; }
.loom-batch-coverage.is-full { color: var(--ok, #3fb950); }
.loom-batch-coverage.is-partial { color: var(--warn, #d29922); }
.loom-batch-gap { color: var(--warn, #d29922); }
.loom-gap-panel {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.loom-gap-panel h3 { margin: 0 0 4px; }
.loom-gap-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.loom-gap-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.loom-gap-list div { display: grid; min-width: 0; }
.loom-gap-list small { color: var(--muted); overflow-wrap: anywhere; }
.loom-gap-ready { color: var(--ok, #3fb950); font-size: 12px; }
.loom-gap-action { white-space: nowrap; }
.partition-plan-toolbar {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.partition-catalog-view .partition-plan-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  padding-bottom: 10px;
  background: var(--panel);
}
.partition-catalog-view .partition-plan-toolbar > span { grid-column: 1 / -1; }
.partition-plan-toolbar span { color: var(--muted); font-size: 13px; }
.partition-plan-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.partition-dashboard, .partition-batch-groups { display: grid; gap: 10px; }
.partition-plan-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.partition-plan-filters label:first-child { grid-column: 1 / -1; }
.partition-plan-filters label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
}
.partition-plan-filters input, .partition-plan-filters select {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
}
.partition-language-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  overflow-x: visible;
  padding-bottom: 4px;
}
.partition-filter-chip {
  display: grid;
  place-content: center;
  justify-items: center;
  flex: 1 1 max-content;
  gap: 2px;
  width: auto;
  min-width: min(140px, 100%);
  max-width: 260px;
  min-height: 64px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
}
.partition-filter-chip.is-active {
  border-color: var(--blue);
  background: #e7f0ef;
}
.partition-filter-chip span { color: var(--muted); font-size: 12px; }
.partition-plan-index {
  display: grid;
  gap: 8px;
}
.partition-catalog-view .partition-plan-index,
.partition-catalog-view .artifact-list {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.partition-plan-index-card {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.partition-plan-index-card:hover, .partition-plan-index-card.is-active {
  border-color: var(--blue);
  background: #e7f0ef;
}
.partition-plan-index-card strong { overflow-wrap: anywhere; }
.partition-plan-index-card span, .partition-plan-index-card small { color: var(--muted); }
.partition-language-group { background: #fffdf8; }
.partition-scale-group, .partition-batch-group { background: var(--soft-panel); }
.partition-repository-selector { background: var(--panel); }
.partition-repository-selector > .partition-accordion-body {
  display: block;
  max-height: min(68vh, 900px);
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 1;
}
.partition-catalog-view .partition-repository-selector > .partition-accordion-body {
  max-height: clamp(420px, calc(100dvh - 380px), 1080px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.partition-catalog-view .partition-plan-filters {
  grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr);
}
.partition-catalog-view .partition-plan-filters label:first-child { grid-column: auto; }
.partition-batch-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.partition-application-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.partition-application-grid {
  display: grid;
  gap: 12px;
}
.partition-application-card {
  display: grid;
  gap: 14px;
}
.partition-application-card header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.partition-application-card header div {
  display: grid;
  gap: 4px;
}
.partition-application-card header small { color: var(--muted); }
.partition-panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.partition-panel-heading h3 { margin: 0; font-size: 16px; }
.partition-panel-heading span { color: var(--muted); font-size: 13px; }
.partition-plan-card strong { overflow-wrap: anywhere; }
.artifact-item {
  display: grid;
  gap: 3px;
  width: 100%;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft-panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.artifact-item:hover, .artifact-item.is-active {
  border-color: var(--blue);
  background: #e7f0ef;
}
.partition-batch-state-completed {
  border-color: var(--green) !important;
  background: color-mix(in srgb, var(--green) 13%, var(--panel)) !important;
}
.partition-batch-state-failed {
  border-color: var(--red) !important;
  background: color-mix(in srgb, var(--red) 12%, var(--panel)) !important;
}
.partition-batch-state-active {
  border-color: var(--amber) !important;
  background: color-mix(in srgb, var(--amber) 10%, var(--panel)) !important;
}
/* Execution state (amber/green/red) and selection are different facts about a
   batch, and a batch that has already run is amber whether or not it is
   selected. The state classes above are !important, so selection cannot be a
   border or background or it would be invisible on any batch that has runs -
   which made an unselected "Has runs" batch look selected. Selection is an
   outline instead: it composes with every state and no batch shows it until
   the operator actually picks one. */
.partition-batch-item.is-active {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.partition-batch-item.is-active::after {
  content: "Selected";
  align-self: start;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--blue);
  color: #fff;
}
.artifact-item strong, .artifact-item span, .artifact-item small { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.artifact-item span, .artifact-item small, .empty-note { color: var(--muted); }
.artifact-file { margin-left: calc(var(--depth, 0) * 14px); width: calc(100% - (var(--depth, 0) * 14px)); }

.artifact-viewer, .partition-viewer, .loom-viewer { padding: clamp(18px, 2vw, 26px); overflow: auto; }
.artifact-viewer-header {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.artifact-viewer-header h3 { margin: 0 0 12px; }
.artifact-recovery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--green) 65%, var(--line));
  border-left: 4px solid var(--green);
  border-radius: 12px;
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
}
.artifact-recovery[hidden] { display: none; }
.artifact-recovery strong { display: block; margin: 3px 0 5px; font-size: 18px; }
.artifact-recovery p { margin: 0; color: var(--muted); }
.artifact-recovery-audit { display: grid; gap: 3px; font-size: 12px; color: var(--muted); text-align: right; }
.artifact-recovered-file { border-color: color-mix(in srgb, var(--green) 70%, var(--line)); }
@media (max-width: 760px) {
  .spec-prompt-guide { grid-template-columns: 1fr; }
  .artifact-recovery { grid-template-columns: 1fr; }
  .artifact-recovery-audit { text-align: left; }
}
.partition-heading-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.partition-derivation-help { position: relative; }
.partition-derivation-trigger {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--soft-panel);
  color: var(--ink);
  font-weight: 700;
  cursor: help;
}
.partition-derivation-trigger:hover,
.partition-derivation-trigger:focus-visible {
  border-color: var(--blue);
  outline: 2px solid color-mix(in srgb, var(--blue) 28%, transparent);
}
.partition-derivation-tooltip {
  position: absolute;
  z-index: 8;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  width: min(360px, calc(100vw - 48px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  text-align: left;
}
.partition-derivation-tooltip strong,
.partition-derivation-tooltip span { display: block; }
.partition-derivation-tooltip span { margin-top: 6px; color: var(--muted); }
.partition-derivation-help:hover .partition-derivation-tooltip,
.partition-derivation-help:focus-within .partition-derivation-tooltip,
.partition-derivation-help.is-open .partition-derivation-tooltip { display: block; }
.artifact-markdown {
  display: block;
  width: 100%;
  max-width: 94ch;
  margin: 0 auto;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  white-space: normal;
}
.artifact-markdown[hidden] { display: none; }
.artifact-document-header {
  position: relative;
  margin-bottom: 28px;
  padding: 6px 0 26px 22px;
  border-left: 3px solid var(--amber);
  border-bottom: 1px solid var(--line);
}
.artifact-document-title { max-width: 24ch; text-wrap: balance; }
.artifact-title-context {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.artifact-document-kind {
  margin: 0 0 10px !important;
  color: var(--amber) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}
.artifact-document-source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 0 !important;
  color: var(--muted);
  font-size: 14px;
}
.artifact-document-toc {
  display: grid;
  grid-template-columns: minmax(130px, 0.3fr) minmax(0, 1fr);
  gap: 18px;
  margin: 0 0 34px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.artifact-document-toc > strong { color: var(--muted); font-size: 13px; }
.artifact-document-toc > div { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.artifact-document-toc a { color: var(--ink); font-size: 14px; text-decoration-color: var(--line); }
.artifact-document-section {
  scroll-margin-top: 24px;
  padding: 4px 0 24px;
}
.artifact-document-section + .artifact-document-section { border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.artifact-evidence-list { display: grid; gap: 0; margin: 1em 0 !important; padding: 0 !important; list-style: none; }
.artifact-evidence-item {
  display: grid;
  grid-template-columns: minmax(190px, 0.65fr) minmax(0, 1fr);
  gap: 16px;
  margin: 0 !important;
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.artifact-evidence-ref {
  align-self: start;
  color: var(--green);
  font-size: 12px !important;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.artifact-document-end {
  display: inline-flex;
  margin-top: 24px !important;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
}
.artifact-markdown > :first-child { margin-top: 0; }
.artifact-markdown > :last-child { margin-bottom: 0; }
.artifact-markdown h1,
.artifact-markdown h2,
.artifact-markdown h3,
.artifact-markdown h4 {
  color: var(--ink);
  line-height: 1.2;
  text-wrap: balance;
}
.artifact-markdown h1 {
  margin: 0 0 0.8em;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 500;
}
.artifact-markdown h2 {
  margin: 2em 0 0.7em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 500;
}
.artifact-markdown h3 { margin: 1.6em 0 0.6em; font-size: 20px; }
.artifact-markdown h4 { margin: 1.4em 0 0.5em; font-size: 17px; }
.artifact-markdown p { margin: 0.8em 0; }
.artifact-markdown ul,
.artifact-markdown ol { margin: 0.8em 0; padding-left: 1.6em; }
.artifact-markdown li + li { margin-top: 0.35em; }
.artifact-markdown a { color: var(--green); text-underline-offset: 3px; }
.artifact-markdown a:hover { color: var(--amber); }
.artifact-markdown code {
  padding: 0.12em 0.38em;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 4px;
  background: #efe5d5;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
.artifact-markdown pre {
  max-width: 100%;
  margin: 1.2em 0;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #1d2520;
  color: #f4f0e8;
  line-height: 1.55;
}
.artifact-markdown pre code { padding: 0; border: 0; background: transparent; color: inherit; overflow-wrap: normal; }
.artifact-markdown blockquote {
  margin: 1.2em 0;
  padding: 0.2em 1em;
  border-left: 3px solid var(--amber);
  background: var(--soft-panel);
  color: var(--muted);
}
.artifact-markdown table {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 1.2em 0;
  overflow-x: auto;
  border-collapse: collapse;
  scrollbar-gutter: stable;
}
.artifact-markdown th,
.artifact-markdown td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.artifact-markdown th { background: var(--soft-panel); color: var(--ink); }
.artifact-markdown tr:nth-child(even) td { background: color-mix(in srgb, var(--soft-panel) 55%, transparent); }
.artifact-markdown hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
.artifact-markdown img { display: block; max-width: 100%; height: auto; margin: 1.2em auto; }
.artifact-markdown input[type="checkbox"] { margin-right: 0.5em; }
.artifact-markdown .markdown-fallback { white-space: pre-wrap; }
.mermaid-rendered {
  max-width: 100%;
  margin: 16px 0;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
}
.mermaid-rendered svg {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100% !important;
  height: auto;
}
.mermaid-error { border-color: var(--red); }
.loom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0 0 16px;
}
.partition-work-units { display: grid; gap: 10px; }
.partition-unit p { white-space: pre-wrap; }
.partition-unit-submit { margin-top: 10px; padding: 4px 10px; font-size: 13px; }
.partition-unit-submit small { font-weight: 600; opacity: 0.85; }
.partition-selected-batch { margin-bottom: 14px; }
.partition-batch-actions {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 0.5fr) minmax(280px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(69, 54, 34, 0.08);
}
.partition-batch-selection {
  display: grid;
  gap: 2px;
  min-width: 130px;
}
.partition-batch-selection strong { color: var(--ink); }
.partition-batch-actions span { color: var(--muted); }
.partition-batch-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
}
.partition-batch-control input {
  width: 74px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
}
.partition-batch-control.a100-override[hidden] { display: none !important; }
.partition-batch-control.a100-override input { width: auto; }
.partition-batch-control select {
  width: 100%;
  min-width: 158px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
}
.partition-batch-profile small { width: 100%; color: var(--muted); }
.partition-batch-actions > .secondary { justify-self: end; white-space: nowrap; }
.partition-accordion {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft-panel);
}
.partition-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  text-align: left;
}
.partition-accordion-summary small { color: var(--muted); font-size: 13px; }
.partition-accordion-summary::after {
  content: "+";
  color: var(--blue);
  font-weight: 700;
}
.partition-accordion.is-open .partition-accordion-summary::after { content: "-"; }
.partition-accordion-body {
  display: grid;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 10px 10px;
  transition: max-height 240ms ease-out, opacity 180ms ease-out;
}
.partition-accordion.is-open .partition-accordion-body { opacity: 1; }
.partition-accordion-body[hidden] { display: none; }
.related-runs .artifact-item { background: #fffdf8; }

:root[data-theme="dark"] .async-activity {
  border-color: var(--line);
  background: rgba(27, 32, 38, 0.97);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .async-loader { border-color: #344355; border-top-color: var(--blue); border-right-color: var(--green); }
:root[data-theme="dark"] .topbar { background: rgba(27, 32, 38, 0.94); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24); }
:root[data-theme="dark"] .login-panel { background: rgba(27, 32, 38, 0.96); }
:root[data-theme="dark"] .nav-toggle:hover,
:root[data-theme="dark"] .summary-filter.is-active,
:root[data-theme="dark"] .channel-tab.is-active,
:root[data-theme="dark"] .partition-filter-chip.is-active,
:root[data-theme="dark"] .partition-plan-index-card:hover,
:root[data-theme="dark"] .partition-plan-index-card.is-active,
:root[data-theme="dark"] .artifact-item:hover,
:root[data-theme="dark"] .artifact-item.is-active,
:root[data-theme="dark"] .artifact-calendar-day.is-active { background: #293746; }

:root[data-theme="dark"] .login-form input,
:root[data-theme="dark"] .panel-form input,
:root[data-theme="dark"] .panel-form textarea,
:root[data-theme="dark"] .artifact-filters select,
:root[data-theme="dark"] .artifact-date-trigger,
:root[data-theme="dark"] .artifact-calendar-dialog,
:root[data-theme="dark"] .artifact-calendar-control,
:root[data-theme="dark"] .partition-plan-filters input,
:root[data-theme="dark"] .partition-plan-filters select,
:root[data-theme="dark"] .partition-batch-control input,
:root[data-theme="dark"] .partition-batch-control select {
  background: #151a20;
  color: var(--ink);
}

:root[data-theme="dark"] .event-card,
:root[data-theme="dark"] .partition-language-group,
:root[data-theme="dark"] .related-runs .artifact-item { background: #20262d; }
:root[data-theme="dark"] .artifact-markdown code { background: #313a44; }
:root[data-theme="dark"] .artifact-markdown pre,
:root[data-theme="dark"] .result-box { background: #0d1014; color: #e8edf2; }
:root[data-theme="dark"] .partition-batch-actions { background: rgba(27, 32, 38, 0.97); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); }
:root[data-theme="dark"] .mermaid-rendered { background: #f7f9fc; }
:root[data-theme="dark"] .health-card,
:root[data-theme="dark"] .summary-card,
:root[data-theme="dark"] .table-shell,
:root[data-theme="dark"] .artifact-nav,
:root[data-theme="dark"] .artifact-viewer,
:root[data-theme="dark"] .partition-nav,
:root[data-theme="dark"] .partition-viewer,
:root[data-theme="dark"] .loom-nav,
:root[data-theme="dark"] .loom-viewer { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24); }

:root[data-theme="dark"] ::selection { background: #355b82; color: #ffffff; }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #7f8995; }

:root[data-theme="harten"] body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(57, 126, 112, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 126, 112, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
}
:root[data-theme="harten"] h1,
:root[data-theme="harten"] h2,
:root[data-theme="harten"] .artifact-viewer-header > h3,
:root[data-theme="harten"] .login-form > h2 {
  font-family: var(--font-display);
  font-weight: 500;
}
:root[data-theme="harten"] .side-nav { border-right-color: var(--line); }
:root[data-theme="harten"] .brand { border-bottom-color: var(--line); }
:root[data-theme="harten"] .brand span:last-child,
:root[data-theme="harten"] .phase-toggle span { color: var(--muted); }
:root[data-theme="harten"] .phase-toggle,
:root[data-theme="harten"] .nav-item { color: #d7e0dc; }
:root[data-theme="harten"] .phase-toggle::after,
:root[data-theme="harten"] .control-records-summary::after,
:root[data-theme="harten"] .partition-accordion-summary::after { color: var(--amber); }
:root[data-theme="harten"] .nav-section.is-open { border-color: var(--line); background: rgba(57, 126, 112, 0.08); border-radius: 6px; }
:root[data-theme="harten"] .nav-item.is-active,
:root[data-theme="harten"] .nav-item:hover { border-color: var(--amber); background: rgba(240, 180, 77, 0.1); color: var(--ink); }
:root[data-theme="harten"] .topbar,
:root[data-theme="harten"] .login-panel,
:root[data-theme="harten"] .async-activity { background: rgba(21, 29, 26, 0.97); box-shadow: var(--shadow); }
:root[data-theme="harten"] .login-panel { max-width: 620px; }
:root[data-theme="harten"] .login-form { max-width: none; }
:root[data-theme="harten"] .topbar,
:root[data-theme="harten"] .login-panel,
:root[data-theme="harten"] .health-card,
:root[data-theme="harten"] .summary-card,
:root[data-theme="harten"] .table-shell,
:root[data-theme="harten"] .artifact-nav,
:root[data-theme="harten"] .artifact-viewer,
:root[data-theme="harten"] .partition-nav,
:root[data-theme="harten"] .partition-viewer,
:root[data-theme="harten"] .loom-nav,
:root[data-theme="harten"] .loom-viewer,
:root[data-theme="harten"] .submission-hero,
:root[data-theme="harten"] .submission-run-card,
:root[data-theme="harten"] .channel-card,
:root[data-theme="harten"] .partition-plan-index-card,
:root[data-theme="harten"] .artifact-item,
:root[data-theme="harten"] .partition-accordion,
:root[data-theme="harten"] .partition-batch-panel,
:root[data-theme="harten"] .partition-batch-actions,
:root[data-theme="harten"] .control-records-disclosure { border-radius: 6px; box-shadow: none; }
:root[data-theme="harten"] .nav-toggle { border-radius: 5px; }
:root[data-theme="harten"] .session-box { border-radius: 6px; background: rgba(21, 29, 26, 0.96); }
:root[data-theme="harten"] .icon-button,
:root[data-theme="harten"] .secondary { border-color: var(--line); background: transparent; color: var(--ink); }
:root[data-theme="harten"] .panel-form button,
:root[data-theme="harten"] .login-form button { border-color: var(--amber); border-radius: 5px; background: var(--amber); color: #17130b; font-weight: 700; }
:root[data-theme="harten"] .icon-button:hover,
:root[data-theme="harten"] .secondary:hover { border-color: var(--amber); background: rgba(240, 180, 77, 0.1); color: var(--amber); box-shadow: none; }
:root[data-theme="harten"] .panel-form button:hover,
:root[data-theme="harten"] .login-form button:hover { border-color: #ffd98a; background: #ffd98a; color: #17130b; box-shadow: none; }
:root[data-theme="harten"] .nav-toggle:hover,
:root[data-theme="harten"] .summary-filter.is-active,
:root[data-theme="harten"] .channel-tab.is-active,
:root[data-theme="harten"] .partition-filter-chip.is-active,
:root[data-theme="harten"] .partition-plan-index-card:hover,
:root[data-theme="harten"] .partition-plan-index-card.is-active,
:root[data-theme="harten"] .artifact-item:hover,
:root[data-theme="harten"] .artifact-item.is-active,
:root[data-theme="harten"] .artifact-calendar-day.is-active { border-color: var(--amber); background: rgba(240, 180, 77, 0.1); }
/* Amber already means "this batch has runs" in the Harten theme, so a selected
   batch must not also be amber. Keep the state colour and mark selection with
   the outline only. */
:root[data-theme="harten"] .partition-batch-item.is-active {
  border-color: var(--line);
  background: var(--soft-panel);
}
:root[data-theme="harten"] .partition-batch-item.is-active::after { color: #0f1620; }
:root[data-theme="harten"] .login-form input,
:root[data-theme="harten"] .panel-form input,
:root[data-theme="harten"] .panel-form textarea,
:root[data-theme="harten"] .artifact-filters select,
:root[data-theme="harten"] .artifact-date-trigger,
:root[data-theme="harten"] .artifact-calendar-dialog,
:root[data-theme="harten"] .artifact-calendar-control,
:root[data-theme="harten"] .partition-plan-filters input,
:root[data-theme="harten"] .partition-plan-filters select,
:root[data-theme="harten"] .partition-batch-control input,
:root[data-theme="harten"] .partition-batch-control select { border-radius: 5px; background: #101614; color: var(--ink); }
:root[data-theme="harten"] .event-card,
:root[data-theme="harten"] .partition-language-group,
:root[data-theme="harten"] .related-runs .artifact-item { background: #18221f; }
:root[data-theme="harten"] .artifact-markdown code { background: #26342f; }
:root[data-theme="harten"] .artifact-markdown pre,
:root[data-theme="harten"] .result-box { background: #0a0f0d; color: var(--ink); }
:root[data-theme="harten"] .partition-batch-actions { background: rgba(21, 29, 26, 0.98); }
:root[data-theme="harten"] .mermaid-rendered { background: var(--paper, #f4f6f2); }
:root[data-theme="harten"] .status-ok { color: #82cbae; }
:root[data-theme="harten"] .status-warn { color: var(--amber); }
:root[data-theme="harten"] .status-bad { color: #ff958a; }
:root[data-theme="harten"] .partition-batch-state-completed { background: rgba(111, 188, 159, 0.13) !important; }
:root[data-theme="harten"] .partition-batch-state-failed { background: rgba(238, 125, 114, 0.12) !important; }
:root[data-theme="harten"] .partition-batch-state-active { background: rgba(240, 180, 77, 0.1) !important; }
:root[data-theme="harten"] ::selection { background: var(--amber); color: #17130b; }
:root[data-theme="harten"] input::placeholder,
:root[data-theme="harten"] textarea::placeholder { color: #74817c; }

@media (prefers-reduced-motion: reduce) {
  body, .partition-accordion-body, .side-nav, body.is-authenticated .shell { transition: none; }
}

@media (min-width: 961px) {
  body.is-authenticated .shell { transition: grid-template-columns 220ms ease-out; }
}

@media (max-width: 1400px) {
  .partition-catalog-view .partition-plan-toolbar { grid-template-columns: 1fr; }
  .partition-catalog-view .partition-plan-toolbar > span { grid-column: auto; }
  .partition-plan-modes { max-width: 360px; }
  .partition-batch-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partition-batch-actions > .secondary { justify-self: stretch; }
}

@media (max-width: 960px) {
  .run-filter-grid { grid-template-columns: 1fr; }
  body.is-authenticated .shell,
  body.is-authenticated.is-nav-collapsed .shell { grid-template-columns: 1fr; }
  body.is-authenticated .side-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 10;
    width: min(82vw, 320px);
    box-shadow: var(--shadow);
    transform: translateX(0);
    opacity: 1;
  }
  body.is-authenticated.is-nav-collapsed .side-nav {
    padding: 24px 18px;
    transform: translateX(-105%);
  }
  .detail-grid { grid-template-columns: 1fr; }
  .artifact-shell,
  .loom-shell,
  .generated-shell,
  .application-spec-shell { grid-template-columns: 1fr; }
  .spec-output-shell { grid-template-columns: 1fr; }
  .spec-file-nav { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .spec-document { padding-left: 0; }
  .work-order-facts, .work-order-lists { grid-template-columns: 1fr; }
  .partition-catalog-view .partition-plan-toolbar { grid-template-columns: 1fr; }
  .partition-catalog-view .partition-plan-toolbar > span { grid-column: auto; }
  .partition-plan-filters { grid-template-columns: 1fr; }
  .partition-plan-filters label:first-child { grid-column: auto; }
  .workspace { padding: 18px; }
}

@media (max-width: 720px) {
  .runtime-attempt-card dl { grid-template-columns: 1fr 1fr; }
  .runtime-investigation-card > div:first-child, .runtime-attempt-link { align-items: flex-start; flex-direction: column; }
  .admin-run-lookup { align-items: stretch; flex-direction: column; }
  .admin-run-lookup label { flex-basis: auto; }
  .admin-kill-dialog .form-actions { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .shell { grid-template-columns: 1fr; }
  .side-nav { border-right: 0; border-bottom: 1px solid var(--line); }
  .topbar, .view-header, .form-actions, .run-actions { flex-direction: column; align-items: stretch; }
  .spec-generation-actions, .spec-package-header { align-items: stretch; flex-direction: column; }
  .topbar-main { align-items: flex-start; }
  .session-box { width: 100%; justify-content: flex-start; }
  .mode-toggle { width: 100%; }
  .mode-toggle button { flex: 1 1 0; }
  .confidence-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 26px; }
  .view { padding: 16px; }
  .partition-batch-actions { position: static; grid-template-columns: 1fr; align-items: stretch; }
  .partition-batch-control { margin-left: 0; justify-content: space-between; }
  .partition-batch-actions > .secondary { justify-self: stretch; }
  .partition-derivation-tooltip { width: min(300px, calc(100vw - 72px)); }
  .artifact-document-header { padding-left: 16px; }
  .artifact-document-toc { grid-template-columns: 1fr; gap: 8px; }
  .artifact-evidence-item { grid-template-columns: 1fr; gap: 6px; }
}

/* Completion notifications. Batch and Loom work finishes long after the request that
   started it, so the operator needs somewhere to be told rather than a page to re-check. */
.notification-centre { position: relative; }
.notification-toggle { position: relative; }
.notification-badge {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff;
  font-size: 11px; line-height: 17px; font-weight: 700; text-align: center;
}
.notification-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  width: min(380px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px;
}
.notification-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.notification-head strong { font-family: var(--font-display); font-size: 15px; }
.notification-link { flex: 1; color: var(--muted); font-size: 12px; }
.notification-list { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.notification-item {
  display: grid; gap: 3px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--soft-panel); color: var(--ink);
}
.notification-item:hover { border-color: var(--blue); }
.notification-item.is-error { border-left: 3px solid var(--red); }
.notification-item.is-info { border-left: 3px solid var(--green); }
.notification-item strong { font-size: 13px; }
.notification-item small { color: var(--muted); font-size: 11px; word-break: break-word; }
/* JSON artifact tree. Artifact payloads are single-line JSON with JSON nested inside string
   fields, which is unreadable raw; this renders a collapsible tree with no external dependency. */
.json-tree { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; }
.json-node, .json-row { padding-left: calc(var(--json-depth, 0) * 14px); }
.json-row { white-space: pre-wrap; word-break: break-word; }
.json-children { border-left: 1px solid rgba(255,255,255,0.08); margin-left: calc(var(--json-depth, 0) * 14px + 4px); padding-left: 6px; }
.json-children > .json-node, .json-children > .json-row { padding-left: 8px; }
.json-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 1px 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.json-toggle::before { content: "\25be"; display: inline-block; width: 10px; color: rgba(255,255,255,0.45); transition: transform 0.12s ease; }
.json-toggle[aria-expanded="false"]::before { transform: rotate(-90deg); }
.json-toggle:hover { color: #fff; }
.json-key { color: #7cc7ff; }
.json-string { color: #b7e08a; }
.json-number { color: #f0b072; }
.json-bool { color: #d59cff; }
.json-null { color: rgba(255,255,255,0.4); font-style: italic; }
.json-punct { color: rgba(255,255,255,0.45); }
.json-count { color: rgba(255,255,255,0.35); font-size: 11px; }
.json-badge { background: rgba(124,199,255,0.14); color: #7cc7ff; border-radius: 3px; padding: 0 6px; font-size: 10.5px; letter-spacing: 0.02em; }
.json-close { color: rgba(255,255,255,0.45); }

/* Harten Method context */
.method-rail {
  display: grid;
  grid-template-columns: minmax(180px, .75fr) minmax(540px, 2fr);
  gap: .85rem 1.25rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem .85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, var(--amber) 6%);
}
.method-rail-heading { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.method-rail-heading span { color: var(--amber); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.method-rail-heading strong { margin-top: .22rem; color: var(--ink); font-size: .88rem; line-height: 1.25; }
.method-stages { display: grid; grid-template-columns: repeat(6, minmax(74px, 1fr)); gap: .35rem; }
.method-stages button {
  display: flex; align-items: center; gap: .35rem; min-width: 0; padding: .58rem .48rem;
  border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted);
  font-size: .72rem; font-weight: 600; cursor: pointer;
}
.method-stages button:hover { border-color: var(--line); color: var(--ink); }
.method-stages button.is-active { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--ink); }
.method-stages span { color: var(--amber); font-size: .62rem; }
.method-rail > p { grid-column: 1 / -1; margin: 0; padding-top: .65rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; }
.method-rail > p span { margin: 0 .45rem; color: var(--amber); }

@media (max-width: 1180px) {
  .method-rail { grid-template-columns: 1fr; }
  .method-stages { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .method-rail { padding: .85rem; }
  .method-stages { display: flex; overflow-x: auto; padding-bottom: .25rem; }
  .method-stages button { flex: 0 0 auto; }
  .method-rail > p { line-height: 1.5; }
}

/* Modernisation Control Room */
.application-insights-header { margin-bottom: 20px; }
.application-insights-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.application-insights-summary article { min-width: 0; padding: 20px; border-right: 1px solid var(--line); }
.application-insights-summary article:last-child { border-right: 0; }
.application-insights-summary span,
.application-profile-metrics span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.application-insights-summary strong { display: block; margin: 8px 0 5px; font-family: var(--heading-font); font-size: 28px; }
.application-insights-summary small,
.application-profile-metrics small { color: var(--muted); }
.application-insights-layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.7fr); gap: 18px; align-items: start; }
.application-insights-catalog,
.application-insights-detail { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.application-insights-catalog { padding: 18px; }
.application-insights-catalog-head,
.application-insight-title,
.application-batch-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.application-insights-catalog-head { margin-bottom: 14px; }
.application-insights-catalog-head h3,
.application-insight-title h3,
.application-batch-heading h3 { margin: 0; }
.application-insights-catalog-head > span { color: var(--muted); font-size: 12px; }
.application-insights-list { display: grid; gap: 8px; }
.application-insight-item { width: 100%; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft-panel); color: var(--ink); text-align: left; }
.application-insight-item:hover,
.application-insight-item.is-active { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 6%, var(--panel)); }
.application-insight-item-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.application-insight-item > span:not(.application-insight-item-head),
.application-insight-item small { display: block; color: var(--muted); font-size: 11px; }
.application-insight-item > i,
.application-analysis-bar,
.application-batch-row > i { display: block; height: 6px; margin: 11px 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--green) 15%, var(--soft-panel)); overflow: hidden; }
.application-insight-item > i em,
.application-analysis-bar i,
.application-batch-row > i em { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.application-insights-detail { min-height: 520px; padding: 22px; }
.application-insight-title { margin-bottom: 20px; }
.application-insight-title p,
.application-batch-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.application-profile-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.application-profile-metrics article { min-width: 0; padding: 18px 16px; border-right: 1px solid var(--line); }
.application-profile-metrics article:first-child { padding-left: 0; }
.application-profile-metrics article:last-child { padding-right: 0; border-right: 0; }
.application-profile-metrics strong { display: block; margin: 8px 0 4px; font-size: 20px; overflow-wrap: anywhere; }
.application-analysis-progress { display: grid; grid-template-columns: minmax(220px, .6fr) minmax(0, 1.4fr); gap: 24px; align-items: center; margin-bottom: 26px; padding: 18px; border-left: 3px solid var(--green); background: color-mix(in srgb, var(--green) 5%, var(--soft-panel)); }
.application-analysis-copy strong { display: block; font-size: 22px; }
.application-analysis-copy p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.application-analysis-bar { height: 12px; margin: 0; }
.application-batch-heading { margin-bottom: 10px; }
.application-batch-timeline { display: grid; gap: 8px; }
.application-batch-row { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(160px, 1.4fr) 110px 18px; gap: 14px; align-items: center; width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft-panel); color: var(--ink); text-align: left; }
.application-batch-row:hover { border-color: var(--amber); transform: translateX(2px); }
.application-batch-row > span strong,
.application-batch-row > span small { display: block; }
.application-batch-row > span small { color: var(--muted); }
.application-batch-row > i { height: 7px; margin: 0; }
.application-batch-row > b { color: var(--muted); font-size: 11px; text-align: right; text-transform: uppercase; }
.application-batch-row.is-completed > b { color: var(--green); }
.application-batch-row.is-failed > b { color: var(--red); }
.application-batch-row.is-failed > i em { background: var(--red); }
.application-batch-row.is-active > b { color: var(--amber); }
.application-batch-row.is-active > i em { background: var(--amber); }
.application-batch-audit { border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft-panel); overflow: hidden; }
.application-batch-audit .application-batch-row { border: 0; border-radius: 0; cursor: pointer; list-style: none; }
.application-batch-audit .application-batch-row::-webkit-details-marker { display: none; }
.application-batch-audit[open] .application-batch-row { border-bottom: 1px solid var(--line); }
.application-batch-audit[open] .application-batch-chevron { transform: rotate(180deg); }
.application-batch-chevron { transition: transform .16s ease; }
.application-batch-audit-body { padding: 14px; }
.application-batch-audit-body > p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.application-batch-audit-body ul { display: grid; gap: 0; margin: 0 0 14px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.application-batch-audit-body li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.application-batch-audit-body li:last-child { border-bottom: 0; }
.application-batch-audit-body li div { display: grid; gap: 3px; min-width: 0; }
.application-batch-audit-body li small { color: var(--muted); overflow-wrap: anywhere; }
.application-batch-audit-body li > span { align-self: center; font-size: 12px; text-align: right; }
@media (max-width: 1100px) {
  .application-insights-layout { grid-template-columns: 1fr; }
  .application-insights-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .application-insights-summary,
  .application-profile-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .application-insights-summary article:nth-child(2),
  .application-profile-metrics article:nth-child(2) { border-right: 0; }
  .application-insights-summary article { border-bottom: 1px solid var(--line); }
  .application-insights-list { grid-template-columns: 1fr; }
  .application-analysis-progress { grid-template-columns: 1fr; }
  .application-batch-row { grid-template-columns: 1fr auto; }
  .application-batch-row > i { grid-column: 1 / -1; grid-row: 2; }
}

.executive-header { margin-bottom: 22px; }
.executive-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.executive-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.executive-kpi { min-width: 0; padding: 24px; border-right: 1px solid var(--line); }
.executive-kpi:last-child { border-right: 0; }
.executive-kpi > span,
.velocity-grid article > span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.executive-kpi > strong { display: block; margin: 10px 0 8px; font-family: var(--heading-font); font-size: clamp(28px, 3vw, 42px); line-height: 1; }
.executive-kpi p { min-height: 34px; margin: 0; color: var(--muted); font-size: 12px; }
.kpi-breakdown { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; }
.kpi-breakdown span { color: var(--muted); }
.kpi-breakdown b { text-align: right; }
.executive-progress { height: 8px; margin: 12px 0; background: var(--soft-panel); border-radius: 999px; overflow: hidden; }
.executive-progress i { display: block; height: 100%; background: var(--amber); border-radius: inherit; }
.executive-attention { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 22px; padding: 18px 20px; border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber) 7%, var(--panel)); }
.executive-attention strong { display: block; font-size: 17px; }
.executive-attention p { margin: 0; color: var(--muted); font-size: 13px; }
.executive-insight-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 18px; margin-bottom: 18px; }
.executive-panel { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.executive-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.executive-panel-heading h3 { margin: 0; font-size: 17px; }
.portfolio-map { display: grid; grid-template-columns: 20px 1fr; grid-template-rows: 1fr 24px; gap: 8px; min-height: 270px; }
.portfolio-quadrants { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.portfolio-quadrants > div { position: relative; display: flex; flex-direction: column; min-height: 105px; padding: 16px; border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent); border-right: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.portfolio-quadrants b { font-size: 13px; }
.portfolio-quadrants span { color: var(--muted); font-size: 11px; }
.portfolio-quadrants strong { margin: auto; color: var(--muted); font-size: 28px; }
.portfolio-axis { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-axis-y { align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); }
.portfolio-axis-x { grid-column: 2; display: flex; justify-content: space-between; }
.portfolio-axis-x span { letter-spacing: 0; text-transform: none; }
.portfolio-applications { grid-column: 2; display: grid; gap: 8px; margin-top: 8px; }
.portfolio-application-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--panel) 92%, transparent); }
.portfolio-application-row span { display: grid; gap: 2px; min-width: 0; }
.portfolio-application-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.portfolio-application-row small { color: var(--muted); font-size: 10px; }
.portfolio-business-value { min-width: 170px; }
.executive-risk-list { display: grid; gap: 0; }
.executive-risk-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.executive-risk-item:last-child { border-bottom: 0; }
.executive-risk-item p, .executive-empty p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.risk-severity { align-self: start; min-width: 52px; padding: 3px 7px; border: 1px solid var(--amber); border-radius: 999px; color: var(--amber); font-size: 9px; text-align: center; text-transform: uppercase; }
.executive-empty { padding: 28px 0; }
.executive-velocity { margin-bottom: 18px; }
.velocity-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.velocity-grid article { min-width: 0; padding: 2px 18px; border-right: 1px solid var(--line); }
.velocity-grid article:first-child { padding-left: 0; }
.velocity-grid article:last-child { padding-right: 0; border-right: 0; }
.velocity-grid strong, .velocity-grid small { display: block; }
.velocity-grid strong { margin: 8px 0 5px; font-size: 18px; }
.velocity-grid small { color: var(--muted); }
.pipeline-bar.executive-journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 14px;
  margin-top: 18px;
  opacity: .9;
}
.pipeline-bar.executive-journey .pipeline-arrow { display: none; }
.pipeline-bar.executive-journey .stage-card { min-height: 0; padding-bottom: 34px; }
.pipeline-bar.executive-journey .stage-card header > strong { overflow: visible; text-overflow: clip; white-space: normal; }
@media (max-width: 1100px) {
  .executive-insight-grid { grid-template-columns: 1fr; }
  .velocity-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 0; }
  .pipeline-bar.executive-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .executive-kpis { grid-template-columns: 1fr; }
  .executive-kpi { border-right: 0; border-bottom: 1px solid var(--line); }
  .executive-kpi:last-child { border-bottom: 0; }
  .executive-attention { grid-template-columns: 1fr; }
  .velocity-grid { grid-template-columns: 1fr; }
  .velocity-grid article { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .pipeline-bar.executive-journey { grid-template-columns: minmax(0, 1fr); }
}

.programme-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.programme-strip.is-bootstrap {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.control-state-banner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(226, 178, 62, 0.28);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(226, 178, 62, 0.08), rgba(10, 20, 18, 0.95));
}

.control-state-copy,
.control-state-action {
  display: grid;
  gap: 6px;
}

.control-state-copy strong,
.control-state-action strong {
  font-size: 20px;
}

.control-state-copy p,
.control-state-action small {
  margin: 0;
  color: var(--muted);
}

.programme-note {
  align-self: center;
  color: var(--muted);
}

.pipeline-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.pipeline-bar.is-bootstrap {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.pipeline-bar.is-bootstrap .pipeline-arrow {
  display: none;
}

.pipeline-arrow {
  flex: 0 0 14px;
  color: color-mix(in srgb, var(--accent) 65%, var(--muted));
  font-size: 18px;
  text-align: center;
}

.stage-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 132px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.stage-card[data-stage-drill] { cursor: pointer; }

.stage-card[data-stage-drill]:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34, 92, 122, 0.14);
}

.stage-card.is-uninstrumented { opacity: 0.72; }

.stage-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.stage-card header > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }

.stage-badge {
  max-width: 82px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 7px;
  text-align: center;
  white-space: normal;
}

.stage-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.stage-metric strong { display: block; font-size: 18px; }
.stage-metric span { color: var(--muted); font-size: 12px; }
.stage-card::after { content: ""; position: absolute; right: 16px; bottom: 16px; left: 16px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) 0 var(--stage-completion, 0%), color-mix(in srgb, var(--line) 55%, transparent) var(--stage-completion, 0%) 100%); }
.stage-card:first-of-type { border-color: color-mix(in srgb, #67d58a 48%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, #67d58a 9%, var(--panel)), var(--panel)); }
.stage-card:first-of-type::after { background: #67d58a; }

.stage-transition { display: grid; gap: 7px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.stage-transition div { min-width: 0; }
.stage-transition dt { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.stage-transition dd { margin: 2px 0 0; color: var(--text); font-size: 12px; line-height: 1.35; }
.plan-document-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.plan-document-section:first-child { padding-top: 0; }
.plan-document-section h3 { margin: 0 0 12px; }
.plan-card-list { display: grid; gap: 10px; }
.plan-structure-card { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 82%, transparent); }
.plan-field-grid { display: grid; gap: 10px; margin: 0; }
.plan-field-grid > div { display: grid; grid-template-columns: minmax(130px, .35fr) 1fr; gap: 12px; align-items: start; }
.plan-field-grid dt { color: var(--muted); text-transform: capitalize; }
.plan-field-grid dd, .plan-field-grid p { margin: 0; min-width: 0; }
.transition-blocked { max-width: 900px; padding: 20px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--panel); }
.transition-blocked > strong { font-size: 22px; }
.stage-note { margin: 0; color: var(--muted); font-size: 13px; }

.control-live-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
body[data-view-mode="programme"] .operator-mode-only { display: none !important; }
body[data-view-mode="operator"] .programme-mode-only { display: none !important; }
.delivery-control { margin: 18px 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.delivery-control-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 18px; }
.delivery-control-heading h3, .delivery-control-heading p { margin: 0; }
.delivery-control-heading p { margin-top: 5px; }
.delivery-live-indicator { padding: 6px 10px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); font-size: 11px; text-transform: uppercase; }
.delivery-control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.delivery-control-grid button { display: grid; gap: 7px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft-panel); color: var(--ink); text-align: left; cursor: pointer; }
.delivery-control-grid button:hover { border-color: var(--amber); }
.delivery-control-grid span { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.delivery-control-grid strong { font-size: 24px; }
.delivery-control-grid small { color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 1000px) { .delivery-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .delivery-control-grid { grid-template-columns: 1fr; } .delivery-control-heading { flex-direction: column; } }

.bootstrap-next-step {
  min-height: 100%;
}

.control-health h3 { margin: 0 0 12px; }

/* Live Work */
.live-work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.live-work-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.live-work-card.is-stalled { border-color: var(--amber); }

.live-work-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.live-work-status { font-weight: 600; }
.live-work-message { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.stage-badge.is-stalled { color: var(--amber); border-color: var(--amber); }
.live-work-card .link-button { align-self: flex-start; margin-top: 6px; }

/* Work-item workspace */
.work-item-objective { margin-bottom: 18px; }

.work-item-objective-body {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.work-item-objective-body p { margin: 0 0 10px; }

.work-item-scope { display: flex; flex-wrap: wrap; gap: 6px; }

.scope-chip {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  overflow-wrap: anywhere;
}

.work-item-panels {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 18px;
  margin-bottom: 20px;
}

@media (max-width: 1100px) {
  .work-item-panels { grid-template-columns: minmax(0, 1fr); }
}

.work-item-panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  min-width: 0;
}

.work-item-panel h3 { margin: 0 0 12px; }

.work-item-provenance { margin: 0 0 12px; color: var(--muted); font-size: 13px; }

.work-item-document {
  max-height: 520px;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.evidence-count { margin: 0 0 10px; color: var(--muted); font-size: 13px; }

.evidence-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.evidence-row:last-of-type { border-bottom: none; }
.evidence-row small { color: var(--muted); }

.evidence-marker {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  align-self: center;
}

.evidence-marker.is-confirmed { background: var(--green); }
.evidence-marker.is-inferred { background: transparent; border: 2px solid var(--amber); }

.work-item-attempts-heading { margin: 0 0 12px; }

/* V6 Modernisation views */
.mode-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft-panel);
}

.mode-toggle button {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 8px 14px;
  cursor: pointer;
}

.mode-toggle button.is-active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--panel));
  color: var(--ink);
}

.control-two-column,
.plan-layout,
.investigation-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1.35fr);
  gap: 18px;
}

.decision-list,
.plan-panel,
.work-order-board,
.work-order-column,
.investigation-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.decision-list,
.investigation-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.list-button {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft-panel);
  color: var(--ink);
  padding: 10px 12px;
  cursor: pointer;
}

.list-button:hover {
  border-color: var(--blue);
}

.list-button small {
  color: var(--muted);
}

.plan-input-grid {
  display: grid;
  gap: 16px;
  align-content: start;
}

.plan-input-grid label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.plan-input-grid label > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan-input-grid label small { color: var(--muted); font-size: 11px; font-weight: 500; text-align: right; }

.plan-input-grid textarea,
.plan-input-grid input,
.plan-input-grid select {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft-panel);
  color: var(--ink);
}
.plan-input-grid textarea { resize: vertical; line-height: 1.5; }
.plan-section-heading h3 { margin: 3px 0 5px; font-size: 21px; }
.plan-section-heading p { margin: 0; color: var(--muted); line-height: 1.45; }
.plan-inputs .summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.plan-actions,
.plan-secondary-actions,
.work-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.plan-document-header,
.work-order-header,
.investigation-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.plan-document {
  min-height: 620px;
  max-height: none;
  overflow: auto;
  padding: clamp(18px, 2vw, 26px);
}
.plan-document .compact-header { align-items: flex-start; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.plan-document .compact-header h3 { margin: 0 0 4px; font-size: 23px; }
.plan-document .compact-header p { margin: 0; color: var(--muted); }
.plan-document > .artifact-markdown { margin-top: 18px; }

.work-order-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.work-order-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.work-order-column {
  padding: 14px;
  display: grid;
  gap: 8px;
}

.work-order-column header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.work-order-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 10px;
  display: grid;
  gap: 4px;
}

.work-order-card small {
  color: var(--muted);
}

.investigation-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 10px;
  margin-bottom: 10px;
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-event {
  border-left: 3px solid var(--blue);
  padding: 8px 10px;
  background: var(--soft-panel);
}

.timeline-event p {
  margin: 4px 0;
}

.timeline-event small {
  color: var(--muted);
}

@media (max-width: 1100px) {
  .control-state-banner,
  .control-two-column,
  .plan-layout,
  .investigation-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .programme-strip,
  .programme-strip.is-bootstrap,
  .pipeline-bar,
  .pipeline-bar.is-bootstrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .pipeline-arrow { display: none; }
  .control-state-banner {
    padding: 14px;
  }
  .investigation-filters {
    grid-template-columns: 1fr;
  }
}
.verification-selector { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.verification-selector label { min-width: min(420px, 100%); }
.verification-verdict { display: flex; align-items: center; gap: 12px; }
.verification-badge { border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; }
.verification-badge.is-passed { color: var(--success); border-color: var(--success); }
.verification-badge.is-failed { color: var(--danger); border-color: var(--danger); }
.verification-badge.is-blocked { color: var(--warning); border-color: var(--warning); }
.verification-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.transition-banner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.transition-banner[hidden] { display: none; }
.transition-banner > div { display: grid; gap: 6px; padding: 16px; background: var(--panel); }
.transition-banner span { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.transition-banner strong { line-height: 1.45; }
.application-report-hero { display: grid; grid-template-columns: minmax(220px, .45fr) minmax(0, 1.55fr); gap: 16px; margin-bottom: 16px; }
.application-report-hero > div { display: grid; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.application-report-hero span { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.application-report-hero strong { font-size: 28px; }
.application-report-hero small { color: var(--muted); }
.application-report-dimensions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.application-report-dimensions article { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.application-report-dimensions header { display: flex; justify-content: space-between; gap: 12px; }
.application-report-dimensions p { min-height: 52px; }
.application-report-dimensions small { color: var(--muted); }
.application-report-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 900px) { .application-report-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .transition-banner, .application-report-hero, .application-report-dimensions { grid-template-columns: 1fr; } }
.verification-panel { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--panel); }
.verification-panel h3 { margin: 6px 0 18px; }
.verification-panel > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.verification-metric { border-top: 1px solid var(--line); padding: 14px 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.verification-metric span, .verification-metric small { color: var(--muted); }
.verification-metric strong { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .verification-grid { grid-template-columns: 1fr; }
  .verification-selector { align-items: stretch; flex-direction: column; }
}

.guide-header { align-items: flex-end; }
.guide-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0 1.2rem; position: sticky; top: .5rem; z-index: 4; padding: .65rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(12px); }
.guide-index button { display: flex; align-items: center; gap: .55rem; min-width: 0; justify-content: flex-start; }
.guide-index span, .guide-phase > header > span { color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.guide-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.guide-principles > div, .guide-phase { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.guide-principles > div { padding: 1rem; }
.guide-principles p, .guide-phase p { color: var(--muted); }
.guide-phase { scroll-margin-top: 6.5rem; padding: 1.25rem; margin: 0 0 1rem; }
.guide-phase > header { border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.guide-phase > header h3 { margin: .35rem 0; font-size: 1.45rem; }
.guide-phase-layout { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(360px, 1.1fr); gap: 1.2rem; align-items: stretch; }
.guide-phase dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; }
.guide-phase dl > div { border: 1px solid var(--line); border-radius: 12px; padding: .8rem; }
.guide-phase dt { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.guide-phase dd { margin: .35rem 0 0; line-height: 1.45; }
.guide-phase > button { margin-top: 1rem; }
.guide-screen-map { min-height: 250px; margin: 0; padding: .8rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 90%, var(--accent) 10%), var(--background)); box-shadow: inset 0 0 55px color-mix(in srgb, var(--accent) 5%, transparent); }
.guide-screen-map figcaption { margin-bottom: .7rem; color: var(--muted); font-size: .75rem; }
.guide-screen-map i, .guide-screen-map b, .guide-screen-map span { display: block; border-radius: 6px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.guide-screen-toolbar { height: 32px; border-bottom: 1px solid var(--line); margin-bottom: .7rem; }
.guide-screen-columns, .guide-screen-filters, .guide-screen-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.guide-screen-columns > *, .guide-screen-filters > *, .guide-screen-summary > * { height: 54px; border: 1px solid var(--line); }
.guide-screen-rows, .guide-screen-table, .guide-screen-work { display: grid; gap: .45rem; margin-top: .7rem; }
.guide-screen-rows span, .guide-screen-table span, .guide-screen-work span { height: 30px; }
.guide-screen-sidebar { float: left; width: 32%; display: grid; gap: .55rem; margin-right: .8rem; }
.guide-screen-sidebar i { height: 48px; }
.guide-screen-document { overflow: hidden; display: grid; gap: .55rem; }
.guide-screen-document b { height: 42px; background: color-mix(in srgb, var(--accent) 25%, transparent); }
.guide-screen-document span { height: 25px; }
.guide-screen-plan { display: grid; gap: .65rem; margin-top: .8rem; }
.guide-screen-plan b { height: 52px; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.guide-screen-plan span { height: 35px; }
.guide-screen-gate { display: grid; grid-template-columns: 90px 1fr; gap: .55rem; align-items: center; }
.guide-screen-gate strong { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.guide-screen-gate i { height: 34px; }
@media (max-width: 980px) { .guide-index { grid-template-columns: repeat(3, minmax(0, 1fr)); position: static; } .guide-phase-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .guide-index, .guide-principles, .guide-phase dl { grid-template-columns: 1fr; } .guide-screen-map { min-height: 210px; } }