: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);
}

.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-run-link { display: grid; justify-items: start; gap: 2px; text-align: left; }
.history-run-link small { color: var(--muted); font-weight: 400; }
#orchestration > .table-shell table { min-width: 980px; }

.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); }
.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; }
.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-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-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; }
.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; }
  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); }

/* Modernisation Control Room */
.programme-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

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

.pipeline-bar {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.pipeline-arrow {
  align-self: center;
  color: var(--muted);
  font-size: 20px;
}

.stage-card {
  flex: 1 1 150px;
  min-width: 150px;
  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);
}

.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: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.stage-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}

.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-note { margin: 0; color: var(--muted); font-size: 13px; }

.control-live-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.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; }