.release-content { max-width: 1680px; }
.control-mode { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 253, 248, 0.72); color: var(--muted); display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 680; }
.control-mode i { width: 7px; height: 7px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 4px var(--moss-soft); }

.release-summary { margin-top: 16px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.release-summary-card { min-height: 104px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); display: flex; flex-direction: column; justify-content: space-between; }
.release-summary-card.is-warn { background: var(--rust-soft); border-color: rgba(157, 79, 45, 0.22); }
.release-summary-card.is-good { background: var(--moss-soft); border-color: rgba(82, 109, 72, 0.22); }
.release-summary-label { color: var(--muted); font-size: 11px; font-weight: 680; line-height: 1.3; }
.release-summary-value { margin-top: 14px; color: var(--ink); font-size: 28px; font-weight: 590; line-height: 1; letter-spacing: -0.04em; }
.release-summary-detail { margin-top: 5px; color: var(--muted); font-size: 10px; }

.release-callout { margin-top: 12px; padding: 11px 13px; border: 1px solid rgba(72, 87, 66, 0.24); border-radius: 10px; background: rgba(231, 238, 227, 0.48); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.release-callout > div { display: flex; align-items: center; gap: 11px; }
.callout-mark { width: 25px; height: 25px; border: 1px solid rgba(72, 87, 66, 0.35); border-radius: 50%; color: var(--moss); display: grid; place-items: center; font-family: Georgia, serif; font-size: 14px; font-weight: 700; }
.release-callout strong { display: block; font-size: 12px; }
.release-callout p { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.config-source { color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; white-space: nowrap; }

.release-panel { scroll-margin-top: 78px; }
.release-panel-header { align-items: flex-end; }
.release-panel-header h2 { margin-bottom: 3px; }
.release-panel-header p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; }
.matrix-legend { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.matrix-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.release-published { background: var(--moss); }
.release-empty { background: var(--line-strong); }
.matrix-wrap { max-height: 640px; }
.matrix-table { min-width: 980px; }
.matrix-table th { position: sticky; top: 0; z-index: 3; }
.matrix-table .matrix-component-head, .matrix-table .matrix-component { position: sticky; left: 0; z-index: 2; min-width: 210px; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.matrix-table .matrix-component-head { z-index: 4; }
.matrix-table tbody tr:hover .matrix-component { background: var(--surface-soft); }
.matrix-project-row td { padding: 7px 13px; background: rgba(243, 237, 225, 0.72); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.matrix-project-row:hover td:first-child { box-shadow: none; }
.version-cell { min-width: 190px; padding-top: 9px; padding-bottom: 9px; }
.version-cell-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.version-number { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; font-weight: 700; }
.version-meta { margin-top: 4px; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; line-height: 1.45; }
.version-empty { color: var(--muted); font-size: 11px; }
.signature-badge { padding: 2px 6px; border-radius: 99px; background: var(--surface-soft); color: var(--muted); font-size: 9px; font-weight: 750; white-space: nowrap; }
.signature-badge.is-unsigned { color: var(--rust); background: var(--rust-soft); }
.environment-cell { min-width: 220px; }
.environment-state + .environment-state { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.environment-state-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.environment-target { max-width: 130px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 10px; white-space: nowrap; }
.environment-version { margin-top: 3px; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; font-weight: 700; }
.environment-meta { margin-top: 3px; color: var(--muted); font-size: 9px; }
.desired-version { margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 9px; }

.mini-pill { min-height: 20px; padding: 0 7px; border-radius: 99px; display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.mini-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mini-pill.is-good { color: var(--moss); background: var(--moss-soft); }
.mini-pill.is-warn { color: var(--rust); background: var(--rust-soft); }
.mini-pill.is-neutral { color: var(--muted); background: var(--surface-soft); }
.mini-pill.is-info { color: #4d6480; background: #e7edf3; }

.release-two-column { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr); gap: 10px; align-items: start; }
.release-two-column > .panel { min-width: 0; }
.approval-list { min-height: 120px; }
.approval-item { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.approval-item:last-child { border-bottom: 0; }
.approval-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.approval-title { font-size: 12px; font-weight: 700; }
.approval-target { margin-top: 3px; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; }
.approval-meta { margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.approval-actions { margin-top: 10px; display: flex; gap: 7px; }
.approval-button { min-height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: 10px; font-weight: 750; }
.approval-button:hover { border-color: var(--ink); }
.approval-button.is-approve { color: var(--moss); border-color: rgba(82, 109, 72, 0.38); background: var(--moss-soft); }
.approval-button.is-reject { color: var(--rust); border-color: rgba(157, 79, 45, 0.32); background: var(--rust-soft); }
.approval-button:disabled { opacity: 0.48; cursor: not-allowed; }

.target-grid { padding: 11px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.target-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 253, 248, 0.66); }
.target-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.target-card h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; white-space: nowrap; }
.target-kind { color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.target-environment { margin-top: 8px; color: var(--muted); font-size: 10px; }
.target-ref { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; white-space: nowrap; }
.target-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.target-tag { padding: 2px 6px; border-radius: 5px; background: var(--surface-soft); color: var(--muted); font-size: 8px; font-weight: 750; }
.target-seen { margin-top: 9px; color: var(--muted); font-size: 9px; }

.process-layout { padding: 12px; display: grid; grid-template-columns: minmax(280px, 0.65fr) minmax(0, 1.35fr); gap: 12px; }
.process-group-title { margin: 0 0 8px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.lifecycle-card, .process-card { margin-bottom: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 253, 248, 0.6); }
.lifecycle-card:last-child, .process-card:last-child { margin-bottom: 0; }
.lifecycle-card h3, .process-card h3 { margin: 0; font-size: 12px; }
.lifecycle-card > p, .process-card > p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.phase-flow, .step-flow { margin-top: 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.phase-node, .step-node { min-height: 25px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 680; }
.phase-node::after, .step-node::after { content: "→"; margin-left: 7px; color: var(--line-strong); }
.phase-node:last-child::after, .step-node:last-child::after { display: none; }
.step-kind { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }

.governance-tabs { padding: 9px 12px 0; display: flex; gap: 5px; border-bottom: 1px solid var(--line); }
.governance-tabs button { min-height: 32px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 750; }
.governance-tabs button.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.secret-reference { display: inline-flex; align-items: center; gap: 5px; }
.secret-reference::before { content: "↗"; color: var(--muted); }
.audit-actor { font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; }

@media (max-width: 1360px) {
  .release-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release-two-column { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .release-callout { align-items: flex-start; flex-direction: column; }
  .process-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .release-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .target-grid { grid-template-columns: minmax(0, 1fr); }
  .release-callout > div { align-items: flex-start; }
  .matrix-legend { align-items: flex-start; flex-direction: column; }
}