/* Kaplira console. Near-black surfaces, hairline panels with header rows, mono field labels, amber for interaction. */
:root {
  color-scheme: dark;
  --surface-root: #0b0b0c;
  --surface-sidebar: #0f0f10;
  --surface-panel: #121214;
  --surface-raised: #17171a;
  --surface-hover: #1c1c20;
  --border-subtle: #212125;
  --border-strong: #2c2c31;
  --text-primary: #ededef;
  --text-secondary: #b4b4bb;
  --text-muted: #7d7d86;
  --accent: #f0a03c;
  --accent-hover: #f4b45f;
  --accent-soft: rgba(240, 160, 60, 0.1);
  --accent-line: rgba(240, 160, 60, 0.35);
  --good: #6fd39b;
  --good-soft: rgba(52, 168, 113, 0.12);
  --good-line: rgba(52, 168, 113, 0.32);
  --warn: #f5c76f;
  --warn-soft: rgba(214, 154, 62, 0.12);
  --warn-line: rgba(214, 154, 62, 0.32);
  --bad: #ff9a94;
  --bad-soft: rgba(218, 82, 76, 0.12);
  --bad-line: rgba(218, 82, 76, 0.32);
  --radius: 12px;
  --radius-control: 8px;
  --font: Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sidebar-width: 248px;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  background: var(--surface-root);
  color: var(--text-primary);
  font: 14px/1.5 var(--font);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
button,
a {
  font: inherit;
}

/* Controls */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: #1a1206;
  text-decoration: none;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 120ms var(--ease-out);
}
button:hover,
.button:hover {
  background: var(--accent-hover);
}
button:active:not(:disabled),
.button:active {
  transform: scale(0.97);
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.quiet {
  background: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--border-strong);
  font-weight: 500;
}
.quiet:hover,
nav button:hover,
#account button:hover,
.project-tabs button:hover,
.project-sections button:hover,
.block-row:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
button > .icon {
  order: -1;
  width: 15px;
  height: 15px;
}
.icon-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Card surface shared by every panel-like container */
.privacy,
.project,
.panel,
.facts,
.table-wrap,
.context-split,
.flow-snapshot,
.flow-step-context,
.indicators,
.run-list {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-panel);
}
/* Sidebar */
aside {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  padding: 18px 12px 12px;
  background: var(--surface-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
}
.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  color: inherit;
  text-decoration: none;
  font-size: 21px;
  letter-spacing: -0.04em;
  font-weight: 650;
}
.brand svg {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.brand small {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.24em;
  margin-top: 2px;
}
small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}
nav {
  display: grid;
  gap: 2px;
}
#workspace-nav {
  margin-top: 28px;
}
.nav-label {
  margin: 0 0 8px;
  padding: 0 10px;
}
nav button {
  justify-content: flex-start;
  min-height: 36px;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 450;
}
nav button > .icon {
  width: 17px;
  height: 17px;
}
nav button[aria-current='page'] {
  color: var(--accent);
  background: var(--accent-soft);
}
.sidebar-bottom {
  margin-top: auto;
  display: grid;
  gap: 10px;
}
.privacy {
  padding: 14px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.privacy .icon {
  display: block;
  width: 16px;
  height: 16px;
  margin-bottom: 10px;
  color: var(--accent);
}
.privacy strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 550;
}
.privacy p {
  margin: 4px 0 0;
}
#account {
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
}
#account:empty {
  display: none;
}
#account button {
  justify-content: flex-start;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
}

/* Shell */
.shell {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 56px;
  padding: 10px 32px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(11, 11, 12, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.crumbs {
  display: flex;
  align-items: center;
  min-width: 0;
}
.workspace-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--text-primary);
  font-weight: 500;
}
.workspace-mark {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--accent);
  color: #1a1206;
  font-size: 11px;
  font-weight: 700;
}
.plan-pill {
  padding: 1px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 450;
}
header strong {
  font-weight: 500;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slash {
  padding: 0 12px;
  color: var(--border-strong);
}
main {
  width: 100%;
  max-width: 1120px;
  padding: 36px 40px 64px;
  margin: 0 auto;
  flex: 1;
}
.intro {
  margin-bottom: 28px;
}
h1 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.intro p {
  color: var(--text-muted);
  margin: 0;
  max-width: 65ch;
}
h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
h3 {
  font-size: 15px;
  font-weight: 550;
  line-height: 1.4;
  margin: 0;
}
.message:empty {
  display: none;
}
.message {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: var(--warn);
  padding: 12px 16px;
  margin: 0 0 24px;
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.crumb-link {
  all: unset;
  cursor: pointer;
}
#content[aria-busy='true']::before {
  content: 'A carregar…';
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  padding-bottom: 12px;
}

/* Field labels: mono caps, like a spec sheet */
.nav-label,
.label,
.eyebrow,
th,
.context-field h3 {
  display: block;
  color: var(--text-muted);
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.small,
.meta,
.loading {
  color: var(--text-muted);
  font-size: 13px;
}
.hash {
  font: 11px/1.5 var(--font-mono);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Project catalog */
.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}
.catalog > .meta {
  grid-column: 1 / -1;
}
.project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  width: 100%;
  padding: 0;
  color: var(--text-primary);
  text-align: left;
  font-weight: 400;
  overflow: hidden;
}
.project:hover {
  background: var(--surface-raised);
  border-color: var(--border-strong);
}
.project > .icon {
  position: absolute;
  top: 16px;
  left: 18px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}
.project h3 {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 14px 46px;
  border-bottom: 1px solid var(--border-subtle);
  overflow-wrap: anywhere;
}
.project h3::after {
  content: '→';
  color: var(--text-muted);
  transition:
    color 150ms ease,
    transform 150ms var(--ease-out);
}
.project:hover h3::after {
  color: var(--accent);
  transform: translateX(2px);
}
.project .label {
  grid-row: 2;
  padding: 14px 18px 0;
}
.project p {
  margin: 0;
}
.project .receipt-count {
  grid-row: 3;
  padding: 4px 18px 16px;
  color: var(--text-primary);
  font-size: 14px;
}
.project .hash {
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle);
}

/* Panels: header row, then body */
.panel {
  padding: 20px;
}
.panel > .badge:first-child + h2 {
  margin-top: 12px;
}
.panel h2 {
  font-size: 16px;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.panel p {
  color: var(--text-secondary);
  max-width: 65ch;
  margin: 8px 0;
}
.panel p.meta {
  color: var(--text-muted);
  font-size: 13px;
}
.panel > .button,
.panel > button {
  margin-top: 12px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.actions:empty {
  display: none;
}
.confirmation {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.confirmation button {
  margin: 8px 8px 0 0;
}

/* Fact rows */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 20px 0 12px;
}
.fact {
  min-width: 0;
  padding: 16px 20px;
}
.fact + .fact {
  border-left: 1px solid var(--border-subtle);
}
.fact strong {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  margin: 6px 0 4px;
}
.fact p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  overflow-wrap: anywhere;
}
.evidence-limits {
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: 13px;
}
.evidence-limits summary {
  color: var(--text-secondary);
}
.evidence-limits p {
  max-width: 80ch;
  margin: 12px 0 0;
}

/* Tables */
.table-wrap {
  overflow: hidden;
}
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}
th,
td {
  display: table-cell;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  overflow-wrap: anywhere;
}
th:first-child {
  width: 17%;
}
th:nth-child(2),
th:nth-child(3) {
  width: 23%;
}
th:last-child {
  width: 37%;
}
tbody tr:last-child td {
  border-bottom: 0;
}
td p {
  margin: 8px 0 0;
}
td .hash {
  margin-top: 8px;
}

/* Status */
.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-secondary);
  background: var(--surface-raised);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.badge.good,
.diff-added {
  color: var(--good);
  background: var(--good-soft);
  border-color: var(--good-line);
}
.badge.warn,
.diff-modified {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: var(--warn-line);
}
.badge.failed,
.diff-removed {
  color: var(--bad);
  background: var(--bad-soft);
  border-color: var(--bad-line);
}
.proof-label {
  color: var(--text-secondary);
}
.detail {
  margin-top: 14px;
}
summary {
  cursor: pointer;
  padding: 4px 0;
  color: var(--accent);
  font-size: 13px;
}
.detail pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--surface-root);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  padding: 12px;
  font: 11px/1.7 var(--font-mono);
}
.detail button {
  margin-top: 8px;
}
.empty {
  grid-column: 1/-1;
  padding: 40px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.empty h2,
.empty h3 {
  margin-bottom: 8px;
}
.empty p {
  max-width: 60ch;
  margin: 0;
  color: var(--text-secondary);
}
.empty button {
  margin-top: 16px;
}
.scope-list {
  padding-left: 22px;
  color: var(--text-secondary);
}
.scope-list li {
  margin: 10px 0;
}
@media (max-width: 1000px) {
  :root {
    --sidebar-width: 208px;
  }
  main {
    padding: 28px 24px 48px;
  }
  header {
    padding-left: 24px;
    padding-right: 24px;
  }
  th,
  td {
    padding: 14px 12px;
  }
}
@media (max-width: 760px) {
  table,
  tbody {
    display: block;
  }
  thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }
  tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px;
    gap: 18px 16px;
    border-bottom: 1px solid var(--border-subtle);
  }
  tbody tr:last-child {
    border: 0;
  }
  td {
    display: block;
    border: 0;
    padding: 0;
    min-width: 0;
  }
  td::before {
    content: attr(data-label);
    display: block;
    font: 500 11px/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  td:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px;
  }
  .facts {
    grid-template-columns: 1fr;
  }
  .fact + .fact {
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
  }
}
@media (max-width: 540px) {
  aside {
    position: relative;
    width: 100%;
    padding: 14px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .brand {
    font-size: 19px;
    padding: 0;
  }
  .privacy,
  .nav-label {
    display: none;
  }
  #workspace-nav {
    display: flex;
    gap: 6px;
    margin-top: 14px;
  }
  nav button {
    min-height: 44px;
  }
  .sidebar-bottom {
    margin: 0;
  }
  #account {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0;
    border: 0;
  }
  #account button {
    min-height: 44px;
    width: auto;
  }
  .shell {
    margin-left: 0;
  }
  header {
    position: static;
    min-height: 48px;
    padding: 10px 16px;
  }
  .plan-pill {
    display: none;
  }
  .slash {
    padding: 0 8px;
  }
  main {
    padding: 24px 16px 40px;
  }
  h1 {
    font-size: 22px;
  }
  .intro {
    margin-bottom: 24px;
  }
  .catalog {
    grid-template-columns: 1fr;
  }
  .toolbar {
    flex-wrap: wrap;
  }
  .toolbar button,
  .detail button {
    min-height: 44px;
  }
  .panel {
    padding: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* Lucide icons: Copyright Lucide Contributors, ISC license. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the copyright notice and this permission notice appear in all copies. THE SOFTWARE IS PROVIDED AS IS AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. */

/* Published project context */
.publication-stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 4px 0 20px;
  font-size: 13px;
}
.source-revision,
.project-sections .tab-action {
  margin-left: auto;
  max-width: 100%;
  color: var(--text-muted);
}
.source-revision code {
  display: block;
  padding-top: 8px;
  font: 11px/1.5 var(--font-mono);
  overflow-wrap: anywhere;
}
.project-tabs,
.project-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 24px;
}
.project-sections {
  border-bottom: 1px solid var(--border-subtle);
}
.project-tabs button,
.project-sections button {
  min-height: 32px;
  padding: 5px 12px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 450;
}
.project-tabs button[aria-current],
.project-sections button[aria-current] {
  color: var(--accent);
  background: var(--accent-soft);
}
.project-sections button {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 0;
}
.project-sections button:hover,
.project-sections button[aria-current] {
  background: transparent;
}
.project-sections button[aria-current] {
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.tab-count {
  padding: 0 5px;
  color: var(--text-muted);
  font: 11px/1 var(--font-mono);
}
.knowledge-document {
  max-width: 760px;
  padding: 8px 0 24px;
}
.knowledge-document > .icon {
  color: var(--accent);
}
.published-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 70ch;
}
.project-content h2 {
  font-size: 17px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.context-split {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  min-height: 400px;
  overflow: hidden;
}
.block-rail {
  background: var(--surface-sidebar);
  padding: 12px;
  border-right: 1px solid var(--border-subtle);
}
.block-rail input {
  width: 100%;
  min-height: 36px;
  padding: 7px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  background: var(--surface-raised);
  font: inherit;
}
.block-rail input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.block-row {
  width: 100%;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  text-align: left;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-control);
  padding: 10px 8px;
  font-weight: 400;
}
.block-row strong {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.block-row > .meta {
  grid-column: 2;
  font-size: 12px;
  margin: 0;
}
.block-row[aria-current] {
  background: var(--accent-soft);
  color: var(--accent);
}
.block-detail {
  padding: 24px 28px;
  min-width: 0;
}
.context-field {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.context-field:last-child {
  border-bottom: 0;
}
.context-field h3 {
  margin: 0 0 8px;
}
.context-field button {
  max-width: 100%;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  margin: 4px 6px 4px 0;
}
.relation-row,
.rule-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.relation-row:first-child,
.rule-row:first-child {
  padding-top: 0;
}
.relation-endpoints,
.rule-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.relation-endpoints button {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
.relation-endpoints > .icon,
.rule-heading > .icon {
  color: var(--accent);
}
.relation-direction {
  color: var(--text-muted);
}
.rule-row .actions {
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .context-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .block-rail {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .block-detail {
    padding: 20px;
  }
  .project-tabs button {
    padding: 8px;
    font-size: 12px;
  }
  .source-revision {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* Flow impact */
.flow-impact {
  display: grid;
  gap: 24px;
}
.flow-snapshots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.flow-snapshot {
  padding: 18px;
  min-width: 0;
}
.flow-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  margin: 10px 0;
  padding: 14px 16px;
  gap: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: inherit;
  font-weight: 400;
}
.flow-step:hover,
.flow-step:focus-visible {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--accent-line);
}
.flow-step-context {
  padding: 24px;
  border-left: 3px solid var(--accent);
}
.flow-step-context article {
  margin-top: 20px;
}
.flow-step-context pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.6 var(--font-mono);
}
.flow-connections {
  padding-left: 20px;
  font-size: 13px;
}
@media (max-width: 700px) {
  .flow-snapshots {
    grid-template-columns: 1fr;
  }
  .flow-step-context {
    padding: 16px;
  }
}

/* Governance and Changes */
.governance,
.run-group {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.indicators {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  overflow: hidden;
}
.indicator {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  box-shadow:
    -1px 0 0 var(--border-subtle),
    0 -1px 0 var(--border-subtle);
  overflow-wrap: anywhere;
}
.indicator strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.run-list {
  display: grid;
  overflow: hidden;
}
.run-list:empty {
  display: none;
}
.run-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-width: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  overflow-wrap: anywhere;
}
.run-row:last-child {
  border-bottom: 0;
}
.run-row .badge {
  white-space: normal;
}
.run-group > h3 {
  margin: 8px 0 0;
}
.flow-diff-summary {
  margin: 0;
  color: var(--text-secondary);
}
.flow-step.unchanged {
  opacity: 0.6;
}
.flow-step.unchanged:hover,
.flow-step.unchanged:focus-visible {
  opacity: 1;
}
@media (max-width: 640px) {
  .indicators {
    grid-template-columns: 1fr;
  }
  .run-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .run-row button {
    width: 100%;
  }
  .project-sections {
    gap: 2px;
  }
  .project-sections button {
    flex: 1 1 auto;
    padding: 8px;
    font-size: 12px;
  }
}