/* PATCHBAY v0.2.0 — Cyber-Physical Security Workbench */

:root {
  --security-green: #9bd178;
  --security-green-deep: #527f46;
  --security-amber: #e5a24d;
  --security-red: #d46d62;
  --security-blue: #7eb5c8;
  --security-violet: #b19aca;
  --security-panel: #1c211e;
  --security-panel-2: #242a26;
  --security-rule: #4f5a52;
  --security-cream: #f2ead9;
  --security-muted: #b9b2a5;
}

.security-product .page-content {
  max-width: 1500px;
}

.security-product .brand-by b {
  color: var(--security-green);
}

.security-product .site-rail {
  border-right-color: #3f493f;
}

.security-product .rail-nav a.active {
  box-shadow: inset 3px 0 0 var(--security-green);
}

.security-product .topbar {
  border-bottom-color: #3f493f;
}

.security-hero .hero-copy {
  max-width: 780px;
}

.security-hero .hero-copy h1 {
  max-width: 15ch;
}

.security-hero .hero-copy h1 em {
  color: var(--security-green);
}

.security-principles .jack-grid > div {
  min-height: 116px;
}

.lifecycle-band {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1px;
  margin: 1.5rem 0 3rem;
  padding: 1px;
  border: 1px solid var(--security-rule);
  background: var(--security-rule);
}

.lifecycle-band span {
  display: grid;
  gap: .35rem;
  min-width: 0;
  padding: .8rem .45rem;
  background: #171a18;
  color: var(--security-cream);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .68rem;
  letter-spacing: .05em;
  text-align: center;
}

.lifecycle-band b {
  color: var(--security-green);
  font-size: .6rem;
}

.security-feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.security-heading .eyebrow {
  max-width: 100%;
  white-space: normal;
}

.security-alert,
.migration-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--security-green);
}

.security-alert.warning {
  border-left-color: var(--security-amber);
}

.security-alert h2,
.migration-callout h2 {
  margin: .25rem 0 .35rem;
}

.security-alert p:last-child,
.migration-callout p:last-child {
  margin-bottom: 0;
}

.metric-grid.security-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0 2rem;
}

.security-metrics .metric {
  display: grid;
  gap: .35rem;
  min-width: 0;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
}

.security-metrics .metric:hover,
.security-metrics .metric:focus-visible {
  border-color: var(--security-green);
  transform: translateY(-2px);
}

.security-metrics .metric span,
.security-metrics .metric small {
  overflow-wrap: anywhere;
}

.security-metrics .metric span {
  color: var(--security-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .65rem;
  letter-spacing: .08em;
}

.security-metrics .metric strong {
  color: var(--security-green);
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  line-height: 1;
}

.workbench-columns {
  align-items: start;
}

.record-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: .8rem;
  row-gap: .2rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.record-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.record-row small {
  grid-column: 2;
  color: var(--security-muted);
}

.record-row:hover,
.record-row:focus-visible {
  border-color: var(--security-green);
}

.sensitivity,
.severity {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.65rem;
  padding: .2rem .5rem;
  border: 1px solid currentColor;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.sensitivity-public { color: var(--security-green); }
.sensitivity-community { color: #b7d48d; }
.sensitivity-restricted { color: var(--security-blue); }
.sensitivity-confidential { color: var(--security-amber); }
.sensitivity-client_confidential { color: #e08b65; }
.sensitivity-embargoed { color: var(--security-violet); }
.sensitivity-highly_sensitive { color: var(--security-red); }

.severity-informational { color: var(--security-blue); }
.severity-low { color: var(--security-green); }
.severity-moderate { color: var(--security-amber); }
.severity-high,
.severity-critical { color: var(--security-red); }

.security-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.security-create-grid .create-card {
  min-height: 230px;
}

.security-create-grid .create-card > span {
  color: var(--security-green);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .75rem;
}

.security-create-grid .create-card strong {
  color: var(--security-green);
}

.boundary-note {
  margin-top: 1.25rem;
  border-left: 4px solid var(--security-blue);
}

.security-bench-header,
.record-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1rem;
}

.security-bench-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.security-bench-identity .avatar,
.security-bench-identity .avatar-fallback {
  width: 86px;
  height: 86px;
}

.security-bench-grid {
  align-items: stretch;
}

.record-facts {
  display: grid;
  gap: 0;
  margin: 1rem 0 0;
  border-top: 1px solid var(--security-rule);
}

.record-facts > div {
  display: grid;
  grid-template-columns: minmax(110px, .45fr) 1fr;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--security-rule);
}

.record-facts dt {
  color: var(--security-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.record-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.prose-panel p {
  white-space: pre-wrap;
}

.owner-private {
  margin-top: 1rem;
  border: 1px dashed var(--security-amber);
}

.security-domain-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.authorization-check {
  padding: 1rem;
  border: 1px solid var(--security-amber);
  background: #211e18;
}

.form-note.warning {
  border-left: 3px solid var(--security-amber);
  background: #211e18;
  color: var(--security-cream);
}

.field-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.security-record-card {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  color: inherit;
  text-decoration: none;
}

.security-record-card h2 {
  margin: .35rem 0 .65rem;
  overflow-wrap: anywhere;
}

.security-record-card p {
  flex: 1;
}

.security-record-card > small {
  color: var(--security-muted);
}

.security-record-card[href]:hover,
.security-record-card[href]:focus-visible {
  border-color: var(--security-green);
  transform: translateY(-2px);
}

.record-card-top,
.record-stamps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.record-stamps {
  justify-content: flex-end;
  max-width: 340px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.tag-list span {
  padding: .35rem .55rem;
  border: 1px solid var(--security-rule);
  background: #171a18;
  color: var(--security-cream);
  font-size: .78rem;
}

.authorization-banner {
  display: grid;
  grid-template-columns: minmax(180px, .35fr) 1fr;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--security-rule);
  background: var(--security-panel);
}

.authorization-banner strong {
  color: var(--security-green);
}

.authorization-banner.unverified {
  border-color: var(--security-amber);
}

.authorization-banner.unverified strong {
  color: var(--security-amber);
}

.member-table {
  display: grid;
}

.member-table > div {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, .7fr) minmax(90px, .45fr) max-content;
  gap: .75rem;
  align-items: center;
  padding: .7rem 0;
  border-top: 1px solid var(--security-rule);
}

.migration-rules {
  margin-bottom: 1rem;
}

.rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}

.rule-grid span {
  padding: .65rem;
  border: 1px solid var(--security-rule);
  color: var(--security-green);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .72rem;
}

.migration-list {
  gap: 1rem;
}

.migration-project {
  display: grid;
  gap: 1rem;
}

.migration-project-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.migration-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) max-content;
  gap: .75rem;
  align-items: end;
  padding-top: 1rem;
  border-top: 1px solid var(--security-rule);
}

.migration-form label {
  min-width: 0;
}

.migration-preview-grid {
  align-items: stretch;
}

.target-preview {
  border-color: var(--security-green);
}

.destructive-confirm {
  display: grid;
  grid-template-columns: 1fr minmax(180px, .35fr) max-content;
  gap: 1rem;
  align-items: end;
  margin-top: 1rem;
  border-color: var(--security-amber);
}

code {
  overflow-wrap: anywhere;
}

.compact-empty {
  min-height: 0;
}

.status-tag.success {
  color: var(--security-green);
  border-color: var(--security-green);
}

@media (max-width: 1180px) {
  .metric-grid.security-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .security-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lifecycle-band {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .lifecycle-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .security-domain-grid,
  .field-grid.three,
  .rule-grid {
    grid-template-columns: 1fr;
  }

  .security-alert,
  .migration-callout,
  .security-bench-header,
  .record-hero,
  .migration-project-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .record-stamps {
    justify-content: flex-start;
    max-width: none;
  }

  .migration-form,
  .destructive-confirm {
    grid-template-columns: 1fr;
  }

  .member-table > div {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .metric-grid.security-metrics,
  .record-grid,
  .security-create-grid,
  .security-feature-grid {
    grid-template-columns: 1fr;
  }

  .lifecycle-band {
    grid-template-columns: 1fr 1fr;
  }

  .security-bench-identity {
    align-items: flex-start;
  }

  .record-facts > div {
    grid-template-columns: 1fr;
    gap: .2rem;
  }

  .member-table > div {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .security-metrics .metric,
  .security-record-card {
    transition: none;
  }

  .security-metrics .metric:hover,
  .security-metrics .metric:focus-visible,
  .security-record-card[href]:hover,
  .security-record-card[href]:focus-visible {
    transform: none;
  }
}