:root {
  color-scheme: dark;
  --bg: #0d1210;
  --panel: #151d1a;
  --panel-soft: #101816;
  --panel-raised: #1b2521;
  --ink: #edf7f2;
  --muted: #9eb0a8;
  --line: #2d3a35;
  --brand: #25b887;
  --brand-strong: #7af2c8;
  --cyan: #67c7df;
  --amber: #e5b562;
  --rose: #ef7f8d;
  --green: #62d28d;
  --focus: #8ef4d2;
  --shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100%;
}

body {
  margin: 0;
  background: radial-gradient(circle at 20% 0%, rgba(37, 184, 135, 0.08), transparent 28rem), var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  outline-offset: 3px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus);
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.login-panel {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 28px;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  font-size: 18px;
}

.brand-glyph {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--brand);
  color: #07120f;
  font-weight: 800;
}

.login-panel h1 {
  margin: 28px 0 8px;
  font-size: 24px;
  letter-spacing: 0;
}

.subtle {
  color: var(--muted);
}

.field {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  color: var(--ink);
  font-weight: 650;
}

.field input,
.field textarea,
.field select,
.toolbar select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: #0f1714;
  color: var(--ink);
}

.field textarea {
  min-height: 88px;
  resize: vertical;
}

.primary,
.secondary,
.ghost,
.danger {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  font-weight: 700;
}

.primary {
  background: var(--brand);
  color: #07120f;
}

.primary:hover {
  background: var(--brand-strong);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.secondary {
  background: #101815;
  color: var(--brand-strong);
  border-color: var(--line);
}

.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.danger {
  background: #2a1519;
  color: var(--rose);
  border-color: #e8bdc4;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.error {
  border: 1px solid #7d3541;
  background: #2a1519;
  color: #ffc1c9;
  padding: 10px 12px;
  border-radius: 6px;
  margin-top: 16px;
}

.success {
  border: 1px solid #2f765e;
  background: #10271f;
  color: #b9f3d9;
  padding: 10px 12px;
  border-radius: 6px;
  margin-top: 16px;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  max-width: 100%;
}

.sidebar {
  background: #101714;
  color: #f7fbf9;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar .brand-glyph {
  background: #d8fff3;
  color: #12342d;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  transform: translateY(-150%);
  background: var(--brand-strong);
  color: #07120f;
  border-radius: 6px;
  padding: 8px 10px;
  font-weight: 800;
}

.skip-link:focus {
  transform: translateY(0);
}

.nav-toggle {
  display: none;
}

.nav {
  display: grid;
  gap: 12px;
}

.nav-group {
  display: grid;
  gap: 4px;
}

.nav-heading {
  color: #789088;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 8px 10px 4px;
}

.nav a {
  color: #dce8e4;
  text-decoration: none;
  padding: 9px 10px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.nav a:hover,
.nav a.active {
  background: #1f302a;
  color: white;
}

.nav small {
  color: #a9bab4;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 86px;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 18, 16, 0.96);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 22px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-primary,
.topbar-actions,
.status-strip,
.context-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.status-strip {
  grid-column: 1 / -1;
}

.temporary-access-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid #725f2a;
  border-radius: 6px;
  background: #211d12;
  color: #f2e5b3;
}

.temporary-access-banner span {
  color: #d8c98d;
}

/* UC-001: the operator assurance banner states the real protection of the
   session. Amber is the default (attention); green confirms a verified second
   factor. */
.temporary-access-banner.ok {
  border-color: #2f6b46;
  background: #10201a;
  color: #cfeadb;
}

.temporary-access-banner.ok span {
  color: #a8d6bf;
}

@media (max-width: 768px) {
  .temporary-access-banner {
    align-items: flex-start;
    flex-direction: column;
  }
}

.context-select {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.context-select select,
.command-input {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0f1714;
  color: var(--ink);
  padding: 8px 10px;
  min-width: 170px;
}

.command-trigger {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0f1714;
  color: var(--ink);
  min-height: 38px;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
}

.kbd {
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: 6px;
  font-size: 11px;
}

.badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #111916;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.badge.alpha {
  border-color: #add8cf;
  color: var(--brand-strong);
  background: #0c251e;
}

.badge.warn {
  border-color: #f1d5a8;
  color: var(--amber);
  background: #2a2112;
}

.badge.ok {
  border-color: #abdabb;
  color: var(--green);
  background: #102419;
}

.badge.bad {
  border-color: #e8bdc4;
  color: var(--rose);
  background: #2a1519;
}

.content {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 22px;
  min-width: 0;
}

.view-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.breadcrumbs a {
  color: var(--brand-strong);
  text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  text-decoration: underline;
}

.breadcrumbs .crumb-sep {
  opacity: 0.6;
}

/* A long project name must not push the trail out of the content column. */
.breadcrumbs > span[aria-current="page"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.view-header h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: 0;
}

.view-header p {
  margin: 5px 0 0;
  color: var(--muted);
  max-width: 760px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  padding: 14px;
  min-width: 0;
}

.hero-card {
  background: linear-gradient(135deg, rgba(37, 184, 135, 0.12), rgba(21, 29, 26, 0.96));
  padding: 18px;
}

.hero-card .eyebrow {
  margin: 0 0 6px;
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.hero-card p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
}

.next-step-panel {
  border-color: rgba(229, 181, 98, 0.56);
  background: linear-gradient(135deg, rgba(229, 181, 98, 0.12), rgba(21, 29, 26, 0.98));
}

.next-step-panel .eyebrow {
  margin: 0 0 6px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.next-step-panel h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.next-step-panel p {
  margin: 0;
  max-width: 820px;
  color: var(--ink);
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.metric {
  display: grid;
  gap: 6px;
}

.metric-label {
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
}

.metric-value {
  font-size: 28px;
  font-weight: 800;
  min-width: 0;
  overflow-wrap: anywhere;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  max-width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

th,
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}

th {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  background: #111916;
}

tr:last-child td {
  border-bottom: 0;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.workspace-shell pre,
.workspace-shell pre code {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.workspace-shell pre code {
  display: block;
  min-width: 0;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.toolbar input,
.toolbar select {
  min-width: 180px;
}

.detail-list {
  display: grid;
  gap: 8px;
}

.detail-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.detail-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-row:last-child {
  border-bottom: 0;
}

.detail-row strong {
  color: var(--muted);
}

.empty,
.loading {
  padding: 26px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
}

.empty-state {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  display: grid;
  gap: 10px;
}

.empty-state strong {
  color: var(--ink);
  font-size: 16px;
}

.empty-state p {
  margin: 0;
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
}

.stack-top {
  margin-top: 14px;
}

.module-list {
  display: grid;
  gap: 10px;
}

.module-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.module-item:last-child {
  border-bottom: 0;
}

/* Capability rows carry a one-line consequence under the maturity badge, so a
   customer never has to infer what a label means for them. */
.capability-item {
  display: block;
}

.capability-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.capability-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* Governance explained as behaviour (allowed / needs approval / refused)
   rather than as a bare version identifier. */
.governance-explainer .governance-summary {
  margin: 0 0 10px;
}

.governance-rules {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 7px;
}

.governance-rules li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.45;
}

.rule-mark {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.rule-mark.ok { background: var(--green); }
.rule-mark.warn { background: var(--amber); }
.rule-mark.bad { background: var(--rose); }

/* Repository facts kept visually separate so "registered" is never mistaken
   for "connected". */
.state-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.state-row:last-of-type {
  border-bottom: 0;
}

/* Separates steps WorQ still has to open from steps the customer can act on,
   so a blocked item never reads as customer failure. */
/* Provider connection card and its confirm step. */
.provider-card .capability-head {
  margin-bottom: 8px;
}

.provider-card h2 {
  margin: 0;
}

.confirm-panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.bind-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 10px;
}

.bind-row .field {
  margin-top: 0;
  min-width: 220px;
  flex: 1 1 220px;
}

/* Repository lists stack rather than becoming a horizontal table on mobile. */
@media (max-width: 560px) {
  .bind-row {
    flex-direction: column;
    align-items: stretch;
  }
  .bind-row .field { min-width: 0; }
  .repository-detail .state-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

.confirm-panel p {
  margin: 0 0 6px;
}

.waiting-heading {
  margin: 20px 0 2px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.operations-org-list {
  display: grid;
  gap: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.operations-org-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(125px, 1fr) minmax(110px, .8fr) minmax(90px, .7fr) minmax(170px, 1.2fr) minmax(120px, .9fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.operations-org-row:last-child {
  border-bottom: 0;
}

.operations-org-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.operations-org-row > div {
  display: grid;
  gap: 4px;
}

.operations-org-head {
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 12px;
  font-weight: 800;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

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

.integration-card p {
  margin: 4px 0 0;
  color: var(--muted);
}

.integration-card dl {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 5px 8px;
  margin: 0;
}

.integration-card dt {
  color: var(--muted);
  font-weight: 700;
}

.integration-card dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 28, 24, 0.38);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 40;
}

.modal {
  width: min(560px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.command-modal {
  width: min(720px, calc(100vw - 28px));
}

.command-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.command-input {
  width: 100%;
  margin: 12px 0;
  min-width: 0;
}

.command-results {
  display: grid;
  gap: 6px;
  max-height: 52vh;
  overflow: auto;
}

/* Surface follows the theme token rather than a hardcoded operations-console
   colour. The literal #101815 here rendered near-black text on a near-black
   surface (~1.09:1) once the Workspace switched to a light palette. */
.command-results button,
.command-results a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--panel-soft);
}

.command-results button:hover,
.command-results a:hover,
.command-results button:focus-visible,
.command-results a:focus-visible,
.command-results [aria-selected="true"] {
  background: var(--panel-raised);
  border-color: var(--brand);
  color: var(--ink);
}

.command-results button:focus-visible,
.command-results a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The filter sets the `hidden` attribute, but the author `display: flex` above
   beats the UA `[hidden] { display: none }` rule — so typing filtered nothing.
   This restores it. */
.command-results [hidden] {
  display: none !important;
}

.command-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 14px;
}

.command-results button {
  width: 100%;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.command-results small {
  color: var(--muted);
}

.notification-trigger {
  white-space: nowrap;
}

.count-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--amber);
  color: #171006;
  font-size: 12px;
  font-weight: 800;
}

.notification-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
}

.notification-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.notification-item.unread {
  border-left: 4px solid var(--amber);
}

.notification-item p {
  margin: 5px 0 0;
  color: var(--muted);
}

.notification-meta,
.notification-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.notification-meta {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.operations-shell .toolbar label {
  display: grid;
  gap: 5px;
  min-width: min(260px, 100%);
  color: var(--muted);
  font-weight: 700;
}

.operations-shell .toolbar input,
.operations-shell .toolbar select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 11px;
  background: var(--panel-soft);
  color: var(--ink);
}

.risk-band {
  border-color: rgba(239, 127, 141, 0.35);
}

.modal h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

@media (max-width: 1180px) {
  .operations-org-head {
    display: none;
  }

  .operations-org-list {
    border: 0;
    gap: 10px;
    overflow: visible;
  }

  .operations-org-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-raised);
  }

  .operations-org-row > div::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 12px;
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .nav {
    display: none;
  }

  .nav.open {
    display: grid;
  }

  .topbar {
    position: static;
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    width: 100%;
  }

  .content {
    padding: 16px;
  }

  table {
    min-width: 560px;
  }

  .span-3,
  .span-4,
  .span-5,
  .span-6,
  .span-7,
  .span-8,
  .span-12 {
    grid-column: span 12;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .integration-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 560px) {
  .notification-item {
    grid-template-columns: 1fr;
  }

  .notification-actions > * {
    flex: 1 1 auto;
  }
  .view-header {
    flex-direction: column;
  }

  .detail-row {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 12px 16px;
  }

  .context-select,
  .context-select select,
  .command-trigger {
    width: 100%;
  }

  .topbar .context-line {
    width: 100%;
  }

  .topbar .context-line > * {
    min-width: 0;
  }

  .badge {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .login-panel {
    padding: 20px;
  }

  .hero-card {
    padding: 14px;
  }

  .hero-card h2,
  .next-step-panel h2 {
    font-size: 20px;
  }

  .metric-value {
    font-size: 23px;
  }

  .button-row > * {
    width: 100%;
  }

  .module-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .operations-org-row {
    grid-template-columns: 1fr;
  }
}

/* Workspace customer experience. Platform Operations retains its operational theme. */
.workspace-shell {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-soft: #f7f9fa;
  --panel-raised: #ffffff;
  --ink: #17211d;
  --muted: #5f6d67;
  --line: #d9e0dc;
  --brand: #087f5b;
  --brand-strong: #056245;
  --amber: #8a5a00;
  --rose: #a52a3a;
  --green: #176b45;
  --focus: #0b6fd3;
  background: var(--bg);
  color: var(--ink);
}

.workspace-shell .sidebar {
  background: #17231f;
  color: #ffffff;
  border-right: 1px solid #273730;
}

.workspace-shell .sidebar .brand-glyph {
  background: #d7f8eb;
  color: #0c3b2c;
}

.workspace-shell .sidebar small,
.workspace-shell .nav-heading {
  color: #aebdb7;
}

.workspace-shell .nav a {
  color: #e6eeeb;
  min-height: 44px;
  align-items: center;
}

.workspace-shell .nav a:hover,
.workspace-shell .nav a.active {
  background: #293a33;
  color: #ffffff;
}

.workspace-shell .main {
  background: #f4f6f8;
}

.workspace-shell .topbar {
  min-height: 72px;
  background: rgba(255, 255, 255, 0.97);
  border-color: var(--line);
  box-shadow: 0 1px 8px rgba(23, 33, 29, 0.05);
}

.workspace-shell .context-select select,
.workspace-shell .command-trigger,
/* The search input was omitted from this list, so it kept the dark operations
   surface while inheriting the light Workspace ink: typed text rendered at
   about 1.06:1 and was effectively invisible. */
.workspace-shell .command-input,
.workspace-shell .secondary,
.workspace-shell .ghost,
.workspace-shell .field input,
.workspace-shell .field textarea,
.workspace-shell .field select,
.workspace-shell .toolbar select,
.workspace-shell .toolbar input {
  background: #ffffff;
  color: var(--ink);
  border-color: #c9d2cd;
}

.workspace-shell .primary {
  background: #087f5b;
  color: #ffffff;
}

.workspace-shell .primary:hover {
  background: #056245;
}

.workspace-shell .secondary:hover,
.workspace-shell .ghost:hover {
  background: #eef3f0;
  color: #064f39;
}

.workspace-shell .primary,
.workspace-shell .secondary,
.workspace-shell .ghost,
.workspace-shell .danger,
.workspace-shell .command-trigger {
  min-height: 44px;
}

.workspace-shell .content {
  padding: 28px;
}

.workspace-shell .breadcrumbs a {
  color: #087153;
}

.workspace-shell .view-header {
  margin-bottom: 22px;
}

.workspace-shell .view-header h1 {
  font-size: 28px;
  line-height: 1.2;
}

.workspace-shell .card {
  border-color: #dde4e0;
  box-shadow: 0 1px 3px rgba(23, 33, 29, 0.06);
  padding: 18px;
}

.workspace-shell .hero-card,
.workspace-shell .welcome-panel {
  background: #ffffff;
  border-left: 4px solid #087f5b;
}

.workspace-shell .welcome-panel h2,
.workspace-shell .product-panel h2 {
  margin: 4px 0 8px;
  font-size: 22px;
}

.workspace-shell .welcome-panel p,
.workspace-shell .product-panel p,
.workspace-shell .section-heading p {
  margin: 0;
  color: var(--muted);
}

.workspace-shell .product-panel {
  background: #eef8f4;
  border-color: #cbe9dd;
}

.workspace-shell .next-step-panel {
  background: #fff8e8;
  border-color: #e8cf91;
}

.workspace-shell .next-step-panel p {
  color: #39433f;
}

.workspace-shell .review-disclosure {
  background: #edf6ff;
  border-color: #b8d8f3;
}

.workspace-shell .review-disclosure p {
  margin: 6px 0;
  color: #3e5261;
}

.workspace-shell .eyebrow,
.workspace-shell .hero-card .eyebrow {
  color: #087153;
  letter-spacing: 0;
}

.workspace-shell .badge {
  background: #f3f5f4;
  color: #46534d;
  border-color: #ccd4d0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.workspace-shell .badge.alpha {
  background: #edf6ff;
  color: #245f8e;
  border-color: #b8d8f3;
}

.workspace-shell .badge.ok {
  background: #edf8f2;
  color: #176b45;
  border-color: #b9dfca;
}

.workspace-shell .badge.warn {
  background: #fff7e3;
  color: #7a5100;
  border-color: #e7cd8e;
}

.workspace-shell .badge.bad {
  background: #fff0f2;
  color: #982a39;
  border-color: #edbac2;
}

.workspace-shell .table-wrap,
.workspace-shell table {
  background: #ffffff;
}

.workspace-shell .table-wrap {
  width: 100%;
  min-width: 0;
  contain: inline-size;
}

.workspace-shell .table-wrap:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.workspace-shell th {
  background: #f5f7f6;
  color: #53615b;
}

.workspace-shell .empty,
.workspace-shell .loading,
.workspace-shell .empty-state {
  background: #f7f9f8;
}

.workspace-shell .lifecycle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.workspace-shell .setup-list {
  display: grid;
  gap: 2px;
}

.workspace-shell .setup-step {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 4px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.workspace-shell .setup-step:last-child {
  border-bottom: 0;
}

.workspace-shell .setup-step:hover strong {
  color: #087153;
}

.workspace-shell .setup-step small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.workspace-shell .setup-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c1902d;
}

.workspace-shell .setup-marker.ok { background: #268a60; }
.workspace-shell .setup-marker.alpha { background: #3f83b8; }

.workspace-shell .section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.workspace-shell .section-heading h2 {
  margin: 0 0 3px;
}

.workspace-shell .section-heading a {
  color: #087153;
  font-weight: 700;
  white-space: nowrap;
}

.workspace-shell .technical-detail {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  margin-top: 3px;
}

.workspace-shell .module-item > * {
  min-width: 0;
  max-width: 100%;
}

.workspace-shell .link-button {
  text-align: center;
  white-space: normal;
}

.workspace-shell .support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.workspace-shell .support-option {
  display: grid;
  gap: 4px;
  min-height: 84px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  background: #ffffff;
}

.workspace-shell .support-option:hover {
  border-color: #72bca2;
  background: #f3faf7;
}

.workspace-shell .support-option span {
  color: var(--muted);
}

@media (max-width: 980px) {
  .workspace-shell .sidebar {
    box-shadow: 0 2px 12px rgba(15, 25, 21, 0.22);
  }

  .workspace-shell .topbar {
    padding: 14px 18px;
  }
}

@media (max-width: 560px) {
  .workspace-shell .content {
    padding: 16px 12px 28px;
  }

  .workspace-shell .card {
    padding: 15px;
  }

  .workspace-shell .support-grid {
    grid-template-columns: 1fr;
  }

  .workspace-shell .setup-step {
    grid-template-columns: 14px minmax(0, 1fr);
  }

  .workspace-shell .setup-step .badge {
    grid-column: 2;
    justify-self: start;
  }

  .workspace-shell .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-shell table,
  .operations-shell table {
    min-width: 0;
  }

  .workspace-shell table thead,
  .operations-shell table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .workspace-shell table,
  .workspace-shell table tbody,
  .workspace-shell table tr,
  .workspace-shell table td,
  .operations-shell table,
  .operations-shell table tbody,
  .operations-shell table tr,
  .operations-shell table td {
    display: block;
    width: 100%;
  }

  .workspace-shell table tr,
  .operations-shell table tr {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
  }

  .workspace-shell table tr:last-child,
  .operations-shell table tr:last-child {
    border-bottom: 0;
  }

  .workspace-shell table td,
  .operations-shell table td {
    display: grid;
    grid-template-columns: minmax(92px, 36%) minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #e8ecea;
    font-size: 14px;
  }

  .workspace-shell table td:last-child,
  .operations-shell table td:last-child {
    border-bottom: 0;
  }

  .workspace-shell table td::before,
  .operations-shell table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* WORQ-WORKSPACE-PRODUCTISATION-001 */
/* Navigation reachability.
   Previously `.nav` was itself the scroll container (flex: 1 1 auto + overflow),
   which produced ~901px of navigation inside a ~449px box with no scrollbar,
   fade or any other cue. Everything from Developer Access downwards was
   invisible and undiscoverable.

   The sidebar as a whole is now the scroll container, spacing is tightened so
   the full navigation fits on a normal desktop, and when it does overflow the
   scrollbar is visible and a fade marks that there is more below. */
.workspace-shell .sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 12px;
  scrollbar-width: thin;
  scrollbar-color: #6b8579 transparent;
}

.workspace-shell .sidebar::-webkit-scrollbar {
  width: 10px;
}

.workspace-shell .sidebar::-webkit-scrollbar-thumb {
  background: #6b8579;
  border-radius: 999px;
  border: 3px solid #17231f;
}

.workspace-shell .sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* The nav no longer scrolls independently — it grows and the sidebar scrolls. */
.workspace-shell .nav {
  flex: 0 0 auto;
  overflow: visible;
  gap: 8px;
}

.workspace-shell .nav-group {
  gap: 2px;
}

.workspace-shell .nav-heading {
  padding: 10px 10px 2px;
  line-height: 1.2;
}

.workspace-shell .nav a {
  min-height: 40px;
  padding: 7px 10px;
}

/* Marks that the sidebar continues below the fold. Sticky so it sits at the
   bottom edge of the scroll port rather than the end of the content. */
.workspace-shell .sidebar-footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  background: #17231f;
  padding-top: 10px;
  box-shadow: 0 -12px 14px -8px rgba(23, 35, 31, 0.95);
}

/* The footer above was pinned to the bottom of a SCROLLING sidebar, so once the
   navigation list grew taller than the viewport the footer painted on top of the
   final item. At 1440x900 that left Organisation Settings with 18px of its 40px
   height reachable and 5px of clear space — a WCAG 2.2 target-size failure, and
   in practice a nav item the customer could barely click.
   Scroll the navigation list itself instead of the whole sidebar. The footer then
   stays permanently visible, as intended, but sits outside the scrolling region
   and can never overlap a link. */
.workspace-shell .sidebar {
  overflow-y: hidden;
}

.workspace-shell .nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.workspace-shell .sidebar-footer {
  position: static;
}

@media (max-height: 780px) {
  .workspace-shell .nav a { min-height: 36px; padding: 5px 10px; }
  .workspace-shell .nav-heading { padding: 7px 10px 2px; }
  .workspace-shell .nav { gap: 6px; }
}
.workspace-shell .nav-group + .nav-group { margin-top: 0.65rem; }
.workspace-shell .sidebar-footer {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.workspace-shell .sidebar-footer a { color: #eef8f4; font-weight: 650; }
.workspace-shell .sidebar-footer span,
.workspace-shell .sidebar-footer small { color: #b9cbc3; }
.workspace-shell .create-panel { background: linear-gradient(145deg, rgba(37,184,135,.12), var(--panel)); }
.workspace-shell .project-list { display: grid; gap: 0.55rem; }
.workspace-shell .project-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem; border: 1px solid var(--line); border-radius: 0.7rem; color: var(--ink);
}
.workspace-shell .project-row:hover { border-color: var(--brand); }
.workspace-shell .project-row span:first-child { display: grid; gap: 0.2rem; }
.workspace-shell .project-row small { color: var(--muted); }
.workspace-shell .project-hero { background: linear-gradient(120deg, var(--panel-raised), rgba(37,184,135,.1)); }
.workspace-shell .boundary-note { border-left: 3px solid var(--brand); }
.workspace-shell textarea { width: 100%; resize: vertical; }
@media (min-width: 1280px) {
  .workspace-shell .content { max-width: 1540px; width: 100%; }
}

/* ── WORQ-WORKSPACE-UX-CLARITY-027 ──────────────────────────────────────────
   One status-badge system, an attention list, project status cards, grouped
   setup progression and calmer density. Colour is never the only signal: every
   badge carries its label text and a shape mark that differs by tone. */

.workspace-shell .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  font-weight: 650;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.workspace-shell .badge::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.85;
}

/* Neutral (not configured / not applicable / no activity): hollow ring. */
.workspace-shell .badge.neutral,
.workspace-shell .badge:not(.ok):not(.warn):not(.bad):not(.alpha) {
  background: #f3f5f4;
  color: #4b5853;
  border-color: #cfd7d3;
}

.workspace-shell .badge.neutral::before,
.workspace-shell .badge:not(.ok):not(.warn):not(.bad):not(.alpha)::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Amber (action required / pending / private alpha): square mark. */
.workspace-shell .badge.warn::before {
  border-radius: 2px;
}

/* Red (failed / revoked / blocked): diamond mark. */
.workspace-shell .badge.bad::before {
  border-radius: 1px;
  transform: rotate(45deg) scale(0.9);
}

/* Blue (informational maturity / read-only): ring with dot. */
.workspace-shell .badge.alpha::before {
  background: transparent;
  box-shadow: inset 0 0 0 2.5px currentColor;
}

/* Organisation summary strip */
.workspace-shell .org-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding: 16px 20px;
  background: #ffffff;
  border-left: 4px solid #087f5b;
}

.workspace-shell .org-summary h2 {
  margin: 2px 0 0;
  font-size: 20px;
}

.workspace-shell .org-summary-facts,
.workspace-shell .status-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
}

.workspace-shell .org-summary-facts div,
.workspace-shell .status-facts div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.workspace-shell .org-summary-facts dt,
.workspace-shell .status-facts dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.workspace-shell .org-summary-facts dd,
.workspace-shell .status-facts dd {
  margin: 0;
  font-size: 13px;
}

/* What needs your attention */
.workspace-shell .attention-panel {
  border-left: 4px solid #b7791f;
}

.workspace-shell .attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.workspace-shell .attention-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #e6e2d6;
  border-radius: 8px;
  background: #fffdf7;
}

.workspace-shell .attention-item.bad {
  background: #fff5f6;
  border-color: #efc7cd;
}

.workspace-shell .attention-item p {
  margin: 2px 0 0;
  color: #4b5853;
  font-size: 13px;
}

.workspace-shell .attention-marker {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #b7791f;
}

.workspace-shell .attention-marker.bad {
  background: #a52a3a;
  transform: rotate(45deg);
}

.workspace-shell .attention-empty {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 6px 2px;
}

.workspace-shell .attention-empty p {
  margin: 4px 0 0;
}

/* Project status cards */
.workspace-shell .project-status-list {
  display: grid;
  gap: 10px;
}

.workspace-shell .project-status-card {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #dde4e0;
  border-radius: 8px;
  background: #ffffff;
}

.workspace-shell .project-status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.workspace-shell .project-status-head a {
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
}

.workspace-shell .project-status-head a:hover {
  color: #087f5b;
  text-decoration: underline;
}

.workspace-shell .project-status-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-top: 10px;
  border-top: 1px dashed #e0e6e2;
}

.workspace-shell .project-status-next .link-button {
  margin-left: auto;
}

/* Grouped setup progression */
.workspace-shell .progression-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 1180px) {
  .workspace-shell .progression-groups {
    grid-template-columns: 1fr;
  }
}

.workspace-shell .project-status-list {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.workspace-shell .progression-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e3e8e5;
  margin-bottom: 4px;
}

.workspace-shell .setup-list.compact .setup-step {
  padding: 8px 0;
}

.workspace-shell .setup-list.compact .setup-step small {
  font-size: 12px;
}

.workspace-shell .setup-marker.neutral {
  background: transparent;
  box-shadow: inset 0 0 0 2px #8a9791;
}

.workspace-shell .setup-marker.warn {
  border-radius: 2px;
}

.workspace-shell .setup-marker.bad {
  border-radius: 1px;
  transform: rotate(45deg);
}

/* Definitions (what each action / page means) */
.workspace-shell .definition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.workspace-shell .definition-grid > div {
  padding: 12px 14px;
  border: 1px solid #e3e8e5;
  border-radius: 8px;
  background: #f9fbfa;
}

.workspace-shell .definition-grid p {
  margin: 6px 0;
  color: #39433f;
  font-size: 13px;
}

.workspace-shell .definition-grid small {
  color: var(--muted);
}

/* Secondary (collapsed) panels: manual metadata registration, create project */
.workspace-shell .secondary-panel {
  background: #f9fbfa;
  padding: 0;
}

.workspace-shell .secondary-panel details {
  padding: 4px 18px;
}

.workspace-shell .secondary-panel summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  min-height: 44px;
}

.workspace-shell .secondary-panel summary::-webkit-details-marker { display: none; }

.workspace-shell .secondary-panel summary::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid #087f5b;
  border-bottom: 2px solid #087f5b;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.workspace-shell .secondary-panel details[open] summary::before {
  transform: rotate(45deg);
}

.workspace-shell .secondary-panel summary span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-shell .secondary-panel summary small {
  color: var(--muted);
}

.workspace-shell .secondary-panel .manual-register {
  padding: 4px 0 18px;
  max-width: 560px;
}

/* State lists reused across Connections, Repositories and Project detail */
.workspace-shell .state-list {
  margin: 8px 0 12px;
}

.workspace-shell .repository-detail + .repository-detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e3e8e5;
}

/* Calmer density */
.workspace-shell .card h2 {
  font-size: 17px;
  margin-top: 0;
}

.workspace-shell .section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.workspace-shell .section-heading h2 {
  margin-bottom: 2px;
}

.workspace-shell td small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.workspace-shell td .badge {
  white-space: nowrap;
}

.workspace-shell .danger {
  background: #a52a3a;
  color: #ffffff;
  border: 1px solid #a52a3a;
}

.workspace-shell .danger:hover {
  background: #8b1f2e;
}

@media (max-width: 980px) {
  .workspace-shell .org-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .workspace-shell .attention-item {
    grid-template-columns: 12px minmax(0, 1fr);
  }
  .workspace-shell .attention-item .link-button {
    grid-column: 2;
    justify-self: start;
  }
  .workspace-shell .project-status-next .link-button {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .workspace-shell .status-facts {
    gap: 8px 16px;
  }
}

/* Repository table: stacked "fact rows" below 1180px, where eight columns
   cannot breathe; buttons and links never break mid-word. */
.workspace-shell td .link-button,
.workspace-shell td button,
.workspace-shell td a {
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .workspace-shell .repository-table table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .workspace-shell .repository-table table,
  .workspace-shell .repository-table table tbody,
  .workspace-shell .repository-table table tr,
  .workspace-shell .repository-table table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .workspace-shell .repository-table table tr {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
  }

  .workspace-shell .repository-table table tr:last-child {
    border-bottom: 0;
  }

  .workspace-shell .repository-table table td {
    display: grid;
    grid-template-columns: minmax(110px, 30%) minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #e8ecea;
    font-size: 14px;
  }

  .workspace-shell .repository-table table td:last-child {
    border-bottom: 0;
  }

  .workspace-shell .repository-table table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }
}

.workspace-shell table td > .badge {
  justify-self: start;
  width: auto;
}

/* Unstyled in-content links inherited the user-agent dark-scheme link colour
   (#9e9eff on white ≈ 2.9:1). One explicit, accessible link colour for the
   light Workspace; components with their own link styling keep it. */
.workspace-shell a {
  color: #087153;
}

.workspace-shell a:hover {
  color: #05513a;
}

/* ── 027 sidebar: organised, compact, and legible while it scrolls ─────────
   The whole menu should be visible on a normal desktop; when the viewport is
   short, the navigation list scrolls inside the sidebar with a visible thin
   scrollbar AND scroll shadows at the top/bottom edges (so "there is more"
   is obvious), while the brand and the footer stay put. Groups are separated
   by hairlines so the five sections read as sections. */
.workspace-shell .sidebar {
  gap: 8px;
  padding: 12px 10px 10px;
}

.workspace-shell .sidebar .brand-mark {
  padding: 2px 6px 8px;
  border-bottom: 1px solid #273730;
}

.workspace-shell .nav {
  gap: 0;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
  scrollbar-color: #7f9a8e #17231f;
  /* Scroll shadows: the covers scroll with the content, the shadows do not. */
  background:
    linear-gradient(#17231f 30%, rgba(23, 35, 31, 0)) center top,
    linear-gradient(rgba(23, 35, 31, 0), #17231f 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) center bottom;
  background-repeat: no-repeat;
  background-size: 100% 28px, 100% 28px, 100% 12px, 100% 12px;
  background-attachment: local, local, scroll, scroll;
}

.workspace-shell .nav::-webkit-scrollbar { width: 8px; }
.workspace-shell .nav::-webkit-scrollbar-thumb { background: #7f9a8e; border-radius: 999px; border: 2px solid #17231f; }
.workspace-shell .nav::-webkit-scrollbar-track { background: transparent; }

.workspace-shell .nav-group + .nav-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #22302a;
}

.workspace-shell .nav-heading {
  padding: 8px 10px 3px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #9fb2aa;
}

.workspace-shell .nav a {
  min-height: 34px;
  padding: 5px 10px 5px 12px;
  font-size: 13.5px;
  border-radius: 6px;
}

.workspace-shell .nav a.active {
  box-shadow: inset 3px 0 0 #7af2c8;
}

.workspace-shell .sidebar-footer {
  gap: 2px;
  padding: 10px 12px 4px;
  border-top: 1px solid #273730;
}

.workspace-shell .sidebar-footer a { font-size: 13px; }
.workspace-shell .sidebar-footer span { font-size: 12.5px; }
.workspace-shell .sidebar-footer small { font-size: 11.5px; }

@media (max-height: 780px) {
  .workspace-shell .nav a { min-height: 32px; padding: 4px 10px 4px 12px; font-size: 13px; }
  .workspace-shell .nav-heading { padding: 6px 10px 2px; }
  .workspace-shell .sidebar .brand-mark small { display: none; }
}

/* ── 028: repository lifecycle actions (unbind / remove) ─────────────────── */
.workspace-shell .repo-lifecycle-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.workspace-shell .repo-lifecycle-actions .ghost {
  min-height: 34px;
  padding: 4px 10px;
  font-size: 12.5px;
  color: #4b5853;
  border: 1px solid #d3dbd7;
  background: #ffffff;
  border-radius: 6px;
}

.workspace-shell .repo-lifecycle-actions .ghost:hover {
  color: #064f39;
  background: #eef3f0;
}

.workspace-shell .repository-table + .confirm-panel,
.workspace-shell .repository-detail .confirm-panel {
  margin-top: 12px;
}

/* ══ WORQ-WORKSPACE-DASHBOARD-REDESIGN-029 ══════════════════════════════════
   Tokens (documented in WORQ_WORKSPACE_DASHBOARD_REDESIGN_029_SPEC.md):
   space 4/8/12/16/20/24 · radius 6/8/10 · type 11/12/13/14/17/22 · row 38 ·
   surfaces: page #f4f6f8, card #fff, inset #f9fbfa · line #dde4e0/#e3e8e5 */
.workspace-shell {
  --ws-space-1: 4px; --ws-space-2: 8px; --ws-space-3: 12px; --ws-space-4: 16px; --ws-space-5: 20px; --ws-space-6: 24px;
  --ws-radius-sm: 6px; --ws-radius-md: 8px; --ws-radius-lg: 10px;
  --ws-line: #dde4e0; --ws-line-soft: #e3e8e5; --ws-inset: #f9fbfa; --ws-accent: #087f5b; --ws-accent-ink: #087153;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Sidebar: icons, collapsible groups, 38px rows ───────────────────────── */
.workspace-shell .nav a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 38px;
  padding: 4px 10px 4px 10px;
  font-size: 13.5px;
  color: #dbe6e1;
}

.workspace-shell .nav a .nav-icon { flex: 0 0 auto; opacity: 0.8; }
.workspace-shell .nav a.active .nav-icon,
.workspace-shell .nav a:hover .nav-icon { opacity: 1; }

.workspace-shell .nav-heading {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 4px;
  min-height: 30px;
  background: transparent;
  border: 0;
  color: #9fb2aa;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 6px;
}

.workspace-shell .nav-heading:hover { color: #d7e3de; background: #1e2b26; }
.workspace-shell .nav-heading:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

.workspace-shell .nav-chevron {
  width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 120ms ease; margin-right: 4px;
}

.workspace-shell .nav-group.collapsed .nav-chevron { transform: rotate(-45deg); }
.workspace-shell .nav-list { display: grid; gap: 1px; }
.workspace-shell .nav-list[hidden] { display: none; }

@media (max-height: 780px) {
  .workspace-shell .nav a { min-height: 36px; }
}

/* ── Header: single context bar + utilities ──────────────────────────────── */
.workspace-shell .topbar {
  min-height: 60px;
  padding: 8px 22px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
}

.workspace-shell .context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}

.workspace-shell .context-select {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 12px;
  color: var(--muted);
}

.workspace-shell .context-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
  margin-bottom: 2px;
}

.workspace-shell .context-select select {
  min-height: 34px;
  padding: 4px 28px 4px 8px;
  border-radius: var(--ws-radius-sm);
  font-weight: 650;
  font-size: 13.5px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #c9d2cd;
  max-width: 260px;
}

.workspace-shell .context-select select[data-single] { pointer-events: none; background: #f6f8f7; }

.workspace-shell .context-sep {
  color: #b7c2bd;
  font-size: 18px;
  font-weight: 300;
  padding: 0 2px;
  align-self: flex-end;
  line-height: 34px;
}

.workspace-shell .context-access { display: inline-flex; gap: 6px; align-self: flex-end; padding-bottom: 5px; }

.workspace-shell .topbar-actions { gap: 6px; }

.workspace-shell .command-trigger,
.workspace-shell .topbar-util,
.workspace-shell .profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid #d3dbd7;
  border-radius: var(--ws-radius-sm);
  background: #ffffff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.workspace-shell .command-trigger:hover,
.workspace-shell .topbar-util:hover,
.workspace-shell .profile-trigger:hover { background: #eef3f0; color: #064f39; }

.workspace-shell .command-trigger .kbd { font-size: 11px; color: var(--muted); border: 1px solid #d3dbd7; border-radius: 4px; padding: 1px 5px; }
.workspace-shell .command-trigger-icon,
.workspace-shell .topbar-util .nav-icon { color: #4b5853; }

.workspace-shell .profile-menu { position: relative; }
.workspace-shell .profile-trigger { padding: 3px; border-radius: 999px; min-width: 38px; justify-content: center; }
.workspace-shell .avatar {
  width: 30px; height: 30px; border-radius: 999px; background: #0c3b2c; color: #d7f8eb;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
}

.workspace-shell .profile-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; z-index: 30;
  background: #ffffff; border: 1px solid var(--ws-line); border-radius: var(--ws-radius-md);
  box-shadow: 0 12px 30px rgba(23, 33, 29, 0.14); padding: 6px; display: grid; gap: 2px;
}

.workspace-shell .profile-identity { display: grid; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--ws-line-soft); margin-bottom: 4px; }
.workspace-shell .profile-identity small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.workspace-shell .profile-dropdown a,
.workspace-shell .profile-dropdown button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; min-height: 38px;
  border: 0; border-radius: var(--ws-radius-sm); background: transparent; color: var(--ink); font-size: 13.5px; text-decoration: none; cursor: pointer;
}
.workspace-shell .profile-dropdown a:hover,
.workspace-shell .profile-dropdown button:hover { background: #eef3f0; color: #064f39; }
.workspace-shell .profile-dropdown .danger-text { color: #a52a3a; }

/* ── Home: attention strip ───────────────────────────────────────────────── */
.workspace-shell .attention-strip {
  border: 1px solid #e6dcc0; border-left: 4px solid #b7791f; border-radius: var(--ws-radius-md);
  background: #fffdf7; padding: 10px 14px; margin-bottom: 14px;
}
.workspace-shell .attention-strip.bad { border-left-color: #a52a3a; background: #fff5f6; border-color: #efc7cd; }
.workspace-shell .attention-strip-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.workspace-shell .attention-strip-head strong { font-size: 13.5px; }
.workspace-shell .attention-list.compact { gap: 6px; }
.workspace-shell .attention-list.compact .attention-item { padding: 8px 10px; background: transparent; border-color: #ece7d8; }
.workspace-shell .attention-list.compact .attention-item p { font-size: 12.5px; }
.workspace-shell .attention-list.compact .link-button { min-height: 34px; padding: 4px 12px; font-size: 13px; }

/* ── Home: summary cards ─────────────────────────────────────────────────── */
.workspace-shell .summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.workspace-shell .summary-card {
  background: #ffffff; border: 1px solid var(--ws-line); border-radius: var(--ws-radius-md);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.workspace-shell .summary-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.workspace-shell .summary-head h2 { margin: 0; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; color: #4b5853; font-weight: 750; }
.workspace-shell .summary-facts { margin: 0; display: grid; gap: 6px; }
.workspace-shell .summary-facts div { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.workspace-shell .summary-facts dt { color: var(--muted); }
.workspace-shell .summary-facts dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.workspace-shell .summary-foot { margin-top: auto; display: flex; gap: 8px; align-items: center; }
.workspace-shell .summary-foot .link-button { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.workspace-shell .summary-empty { margin: 0; color: #4b5853; font-size: 13px; line-height: 1.45; }

.workspace-shell .severity-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.workspace-shell .sev { display: grid; gap: 2px; padding: 8px; border-radius: var(--ws-radius-sm); background: var(--ws-inset); border: 1px solid var(--ws-line-soft); text-align: center; }
.workspace-shell .sev strong { font-size: 18px; line-height: 1.1; }
.workspace-shell .sev-label { font-size: 11px; color: var(--muted); }
.workspace-shell .sev-mark { width: 8px; height: 8px; margin: 0 auto; border-radius: 1px; }
.workspace-shell .sev.critical .sev-mark { background: #a52a3a; transform: rotate(45deg); }
.workspace-shell .sev.high .sev-mark { background: #c2410c; }
.workspace-shell .sev.medium .sev-mark { background: #b7791f; }
.workspace-shell .sev.low .sev-mark { background: #4b5853; border-radius: 999px; }

.workspace-shell .capability-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.workspace-shell .capability-row li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }

.workspace-shell .flyout summary { cursor: pointer; color: var(--ws-accent-ink); font-size: 13px; font-weight: 600; list-style: none; min-height: 34px; display: inline-flex; align-items: center; }
.workspace-shell .flyout summary::-webkit-details-marker { display: none; }
.workspace-shell .flyout summary::after { content: " ▾"; font-size: 11px; margin-left: 4px; }
.workspace-shell .flyout[open] summary::after { content: " ▴"; }
.workspace-shell .flyout-body { position: absolute; z-index: 20; margin-top: 6px; width: min(360px, 90vw); background: #fff; border: 1px solid var(--ws-line); border-radius: var(--ws-radius-md); box-shadow: 0 12px 30px rgba(23, 33, 29, 0.14); padding: 12px 14px; }
.workspace-shell .flyout-body p { margin: 0 0 8px; font-size: 13px; }
.workspace-shell .flyout { position: relative; }

/* ── Home: Project Operations Overview ───────────────────────────────────── */
.workspace-shell .operations-card { padding: 14px 16px; margin-bottom: 14px; }
.workspace-shell .ops-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.workspace-shell .ops-head h2 { margin: 0 0 2px; font-size: 17px; }
.workspace-shell .ops-head p { margin: 0; }
.workspace-shell .ops-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.workspace-shell .ops-search input { min-width: 260px; min-height: 36px; padding: 6px 10px; border-radius: var(--ws-radius-sm); border: 1px solid #c9d2cd; background: #fff; color: var(--ink); font-size: 13px; }
.workspace-shell .ops-sort { display: inline-flex; border: 1px solid #c9d2cd; border-radius: var(--ws-radius-sm); overflow: hidden; }
.workspace-shell .sort-btn { border: 0; background: #fff; color: #4b5853; min-height: 36px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.workspace-shell .sort-btn + .sort-btn { border-left: 1px solid #e3e8e5; }
.workspace-shell .sort-btn.active { background: #eef3f0; color: #064f39; }
.workspace-shell .sort-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

.workspace-shell .ops-table { max-height: 520px; overflow: auto; }
.workspace-shell .ops-table table { width: 100%; border-collapse: separate; border-spacing: 0; }
.workspace-shell .ops-table thead th { position: sticky; top: 0; z-index: 2; background: #f5f7f6; box-shadow: inset 0 -1px 0 var(--ws-line); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #53615b; padding: 8px 10px; white-space: nowrap; }
.workspace-shell .ops-table td { padding: 8px 10px; vertical-align: middle; font-size: 12.5px; border-bottom: 1px solid var(--ws-line-soft); }
.workspace-shell .ops-table td:last-child { white-space: nowrap; }
.workspace-shell .ops-table thead th:last-child { text-align: right; }
.workspace-shell .ops-table tr.active-row td { background: #f2faf6; }
.workspace-shell .row-title { text-decoration: none; color: var(--ink); display: grid; gap: 2px; }
.workspace-shell .row-title:hover strong { color: var(--ws-accent-ink); text-decoration: underline; }
.workspace-shell .row-flag { font-size: 11px; color: var(--ws-accent-ink); font-weight: 700; }
.workspace-shell .cell-stack { display: grid; gap: 4px; }
.workspace-shell .nowrap { white-space: nowrap; }
.workspace-shell .row-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.workspace-shell .row-actions .link-button,
.workspace-shell .row-actions button.primary { min-height: 34px; padding: 4px 12px; font-size: 13px; white-space: nowrap; }
.workspace-shell .overflow { position: relative; }
.workspace-shell .overflow summary { list-style: none; cursor: pointer; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d3dbd7; border-radius: var(--ws-radius-sm); background: #fff; font-size: 16px; line-height: 1; color: #4b5853; }
.workspace-shell .overflow summary::-webkit-details-marker { display: none; }
.workspace-shell .overflow-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 170px; background: #fff; border: 1px solid var(--ws-line); border-radius: var(--ws-radius-md); box-shadow: 0 12px 30px rgba(23, 33, 29, 0.14); padding: 6px; display: grid; gap: 2px; }
.workspace-shell .overflow-menu a { display: block; padding: 7px 10px; min-height: 34px; border-radius: var(--ws-radius-sm); text-decoration: none; color: var(--ink); font-size: 13px; }
.workspace-shell .overflow-menu a:hover { background: #eef3f0; color: #064f39; }

.workspace-shell .activity-card { padding: 14px 16px; }
.workspace-shell .activity-card .section-heading { margin-bottom: 8px; }

/* Home has no page subtitle now; tighten the header block. */
.workspace-shell .view-header p:empty { display: none; }
.workspace-shell .view-header { margin-bottom: 14px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .workspace-shell .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .workspace-shell .ops-table { max-height: none; overflow: visible; }
  .workspace-shell .ops-table table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
  .workspace-shell .ops-table table, .workspace-shell .ops-table table tbody, .workspace-shell .ops-table table tr, .workspace-shell .ops-table table td { display: block; width: 100%; min-width: 0; }
  .workspace-shell .ops-table table tr { padding: 8px 10px 10px; border: 1px solid var(--ws-line); border-radius: var(--ws-radius-md); margin-bottom: 8px; background: #fff; }
  .workspace-shell .ops-table table td { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid #edf1ef; }
  .workspace-shell .ops-table table td:last-child { border-bottom: 0; }
  .workspace-shell .ops-table table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
  .workspace-shell .row-actions { justify-content: flex-start; }
}

@media (max-width: 980px) {
  .workspace-shell .topbar { grid-template-columns: 1fr; }
  .workspace-shell .topbar-actions { justify-content: flex-start; }
  .workspace-shell .context-select select { max-width: 200px; }
}

@media (max-width: 768px) {
  .workspace-shell .summary-grid { grid-template-columns: 1fr; }
  .workspace-shell .ops-search input { min-width: 0; width: 100%; }
  .workspace-shell .ops-controls { width: 100%; }
  .workspace-shell .context-sep { display: none; }
  .workspace-shell .context-bar { gap: 8px; }
  .workspace-shell .command-trigger span:not(.kbd):not(.command-trigger-icon) { display: none; }
}

@media (max-width: 560px) {
  .workspace-shell .severity-row { grid-template-columns: repeat(2, 1fr); }
  .workspace-shell .context-select select { max-width: 160px; }
}

@media (max-width: 1180px) {
  .workspace-shell .context-select select { max-width: 170px; }
  .workspace-shell .topbar { padding: 8px 14px; }
}

@media (max-width: 768px) {
  .workspace-shell .context-bar { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .workspace-shell .context-access { grid-column: 1 / -1; padding-bottom: 0; flex-wrap: wrap; }
  .workspace-shell .context-select select { max-width: none; width: 100%; }
  .workspace-shell .topbar-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
  .workspace-shell .command-trigger { justify-content: center; }
}

.workspace-shell .nav-heading { padding: 6px 10px 3px; min-height: 26px; }
.workspace-shell .nav-group + .nav-group { margin-top: 2px; padding-top: 2px; }

/* ── 029: Project detail stepper — compact horizontal progression on wide screens ── */
.workspace-shell .setup-list.stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}
.workspace-shell .setup-list.stepper .setup-step {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px 8px;
  align-items: start;
  padding: 10px 10px 8px;
  border: 1px solid var(--ws-line-soft);
  border-radius: var(--ws-radius-md);
  background: var(--ws-inset);
  min-height: 0;
}
.workspace-shell .setup-list.stepper .setup-step .setup-marker { margin-top: 4px; }
.workspace-shell .setup-list.stepper .setup-step > span:nth-child(2) { grid-column: 2; }
.workspace-shell .setup-list.stepper .setup-step .badge { grid-column: 2; justify-self: start; }
.workspace-shell .setup-list.stepper .setup-step small { font-size: 11.5px; line-height: 1.35; }
.workspace-shell .setup-list.stepper .setup-step:hover { border-color: #b9dfca; }

.workspace-shell .repository-table td:first-child { min-width: 220px; }

/* ── 031: DevGuard — run progress, findings, evidence ─────────────────────── */
.workspace-shell .devguard-panel .devguard-latest { display: grid; gap: 14px; }
.workspace-shell .confirm-facts,
.workspace-shell .run-facts,
.workspace-shell .coverage-facts { margin: 8px 0 10px; }
.workspace-shell .devguard-confirm { border-color: #b9dfca; background: #f4faf6; }
.workspace-shell .stage-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.workspace-shell .stage-list .stage {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #4d5b55;
}
.workspace-shell .stage-list .stage-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #b8c3be;
  flex: 0 0 12px;
}
.workspace-shell .stage-list .stage.done { color: #1f2a26; }
.workspace-shell .stage-list .stage.done .stage-mark { background: #268a60; box-shadow: none; }
.workspace-shell .stage-list .stage.current { color: #1f2a26; font-weight: 600; }
.workspace-shell .stage-list .stage.current .stage-mark { background: #c1902d; box-shadow: 0 0 0 3px rgba(193, 144, 45, 0.25); animation: devguard-pulse 1.4s ease-in-out infinite; }
.workspace-shell .stage-list .stage.failed .stage-mark { background: #b23b3b; box-shadow: none; border-radius: 2px; }
.workspace-shell .stage-list .stage.stopped .stage-mark { background: #8a9791; box-shadow: none; border-radius: 2px; }
@keyframes devguard-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .workspace-shell .stage-list .stage.current .stage-mark { animation: none; } }
.workspace-shell .stage-outcome { display: grid; gap: 6px; }
.workspace-shell .spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  vertical-align: -1px;
  animation: devguard-spin 0.9s linear infinite;
}
@keyframes devguard-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .workspace-shell .spinner { animation: none; border-right-color: currentColor; opacity: 0.6; } }
.workspace-shell .devguard-result .result-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.workspace-shell .result-reasons { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; color: #4d5b55; }
.workspace-shell .finding-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.workspace-shell .finding-item { border: 1px solid #dfe7e2; border-radius: 10px; background: #fff; }
.workspace-shell .finding-item.open { border-color: #b9dfca; }
.workspace-shell .finding-toggle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 10px;
}
.workspace-shell .finding-toggle:focus-visible { outline: 2px solid #0b6b60; outline-offset: 2px; }
.workspace-shell .finding-title { display: grid; gap: 2px; min-width: 0; }
.workspace-shell .finding-title small { color: #5f6d67; font-size: 12px; }
.workspace-shell .finding-location code { font-size: 12px; word-break: break-all; }
.workspace-shell .finding-detail { padding: 0 12px 12px 12px; border-top: 1px solid #edf2ef; display: grid; gap: 6px; font-size: 13.5px; }
.workspace-shell .finding-detail p { margin: 6px 0 0; }
.workspace-shell .evidence-view { margin-top: 12px; }
.workspace-shell .evidence-json {
  max-height: 420px;
  overflow: auto;
  padding: 12px;
  border-radius: 10px;
  background: #0f1a16;
  color: #dbe7e1;
  font-size: 12px;
  line-height: 1.45;
}
.workspace-shell .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.workspace-shell .timeline li { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid #dfe7e2; font-size: 13px; }
.workspace-shell .timeline li small { color: #5f6d67; word-break: break-word; }
@media (max-width: 720px) {
  .workspace-shell .finding-toggle { grid-template-columns: auto 1fr; }
  .workspace-shell .finding-location { grid-column: 1 / -1; }
}
.workspace-shell .repository-detail .module-item small { overflow-wrap: anywhere; }

/* ── 032: AgentGuard — agents, immutable versions, evaluations ─────────── */
.agentguard-panel .ops-table td small,
.agentguard-panel td small { display: block; margin-top: 0.15rem; }
.version-facts dd code,
.run-facts dd code { overflow-wrap: anywhere; }
.agentguard-form .field small { display: block; margin-top: 0.25rem; }
.agentguard-form .field select { max-width: 100%; }
.agentguard-confirm .confirm-facts dd code { overflow-wrap: anywhere; }
.agentguard-result .severity-facts { margin-top: 0.75rem; }
@media (max-width: 720px) {
  .agentguard-panel .button-row { flex-wrap: wrap; }
  .version-facts div { grid-template-columns: 1fr; }
}
.alternative-action { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }

/* ── 033: ToolGuard governed actions ─────────────────────────────────────── */
.approval-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.approval-item { border: 1px solid var(--line); border-radius: var(--ws-radius-md, 10px); padding: 0.9rem 1rem; }
.approval-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.approval-facts dd code, .actions-confirm dd code { overflow-wrap: anywhere; }
.actions-decision .result-head { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
@media (max-width: 720px) { .approval-item .button-row { flex-wrap: wrap; } }
.workspace-shell .card code { overflow-wrap: anywhere; }
.workspace-shell .grid > .card { min-width: 0; }

/* ── Review remediation: project-centric repositories, project settings ─────── */
.repo-row { border: 1px solid var(--line); border-radius: var(--ws-radius-md, 10px); padding: 0.85rem 1rem; margin-bottom: 0.75rem; }
.repo-row-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.75rem; align-items: center; }
.repo-row-name { display: grid; gap: 0.2rem; min-width: 0; }
.repo-row-name strong { overflow-wrap: anywhere; }
.repo-row-cell .cell-label { display: none; }
.repo-row-explain { margin: 0.5rem 0 0; }
.technical-details { margin-top: 0.5rem; }
.technical-details summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.technical-details .status-facts { margin-top: 0.5rem; }
.authorise-panel { margin-top: 0.75rem; padding: 0.85rem 1rem; border: 1px dashed var(--line); border-radius: var(--ws-radius-md, 10px); }
.steps-inline { margin: 0.5rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.6rem; }
.steps-inline li small { display: block; margin-top: 0.25rem; }
.danger-zone { margin-top: 0.75rem; padding: 0.85rem 1rem; border: 1px solid #e5b7b7; border-radius: var(--ws-radius-md, 10px); }
.danger-zone h3 { margin: 0 0 0.5rem; font-size: 1rem; }
@media (max-width: 720px) {
  .repo-row-main { grid-template-columns: 1fr; }
  .repo-row-cell .cell-label { display: inline-block; min-width: 6.5rem; color: var(--muted); font-size: 0.85rem; }
}
.agent-state-list { display: grid; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.agent-state-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 0.75rem; align-items: center; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--ws-radius-md, 10px); }
@media (max-width: 720px) { .agent-state-row { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .workspace-shell .row-actions { flex-wrap: wrap; }
  .workspace-shell .row-actions .link-button, .workspace-shell .row-actions button.primary { white-space: normal; text-align: left; max-width: 100%; }
}
/* 034: continuous monitoring panel */
.monitoring-panel .table-wrap, .monitoring-panel table { max-width: 100%; }
.monitoring-prompt { margin-top: 0.75rem; }
.monitoring-prompt .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; margin: 0.5rem 0 0.75rem; }
.monitoring-prompt .field select { width: 100%; }
.monitoring-triggers { margin-top: 0.75rem; }
.monitoring-triggers summary { cursor: pointer; }
.monitoring-triggers summary span { display: inline-grid; gap: 0.15rem; }
.monitoring-triggers summary small { color: var(--muted); }
.monitoring-triggers table { margin-top: 0.5rem; }
.monitoring-panel .section-heading .badge { white-space: nowrap; }
/* 035: account security + step-up */
.modal.step-up { width: min(520px, 100%); }
.modal.step-up h2 { margin: 0.25rem 0 0.5rem; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem; margin: 0.75rem 0; padding: 0; list-style: none; }
.recovery-codes li { padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--ws-radius-md, 10px); }
.recovery-codes code { font-size: 1rem; letter-spacing: 0.04em; }
.totp-secret code { font-size: 1.05rem; letter-spacing: 0.12em; overflow-wrap: anywhere; }
.totp-enrol { margin-top: 0.5rem; }
.account-security-card .section-heading { align-items: center; }
/* 036: unified assurance + receipts */
.code-block { background: var(--field, #0d130f); border: 1px solid var(--line); border-radius: var(--ws-radius-md, 10px); padding: 0.75rem 1rem; font-size: 0.85rem; max-height: 28rem; overflow: auto; }
.workspace-shell .code-block { background: color-mix(in srgb, var(--panel) 60%, transparent); }
.monitoring-subject { padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--ws-radius-md, 10px); margin: 0.5rem 0 0.75rem; }
.monitoring-subject strong { font-size: 1.05rem; }