/* ============================================================
   NIST AI RMF Policy Builder — Design System
   ============================================================ */

:root {
  --color-navy-900: #0b223a;
  --color-navy-700: #15466d;
  --color-navy-500: #226ea5;
  --color-navy-400: #2b7bbd;
  --color-navy-300: #5ba7dd;
  --color-navy-200: #8dc5ed;
  --color-sky-500: #0ea5e9;
  --color-sky-200: #cfe4f7;
  --color-sky-100: #e7f3fc;
  --color-teal-500: #14b8a6;
  --color-text-strong: #102133;
  --color-text-muted: #54677a;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f8fb;
  --color-border-subtle: #d5e2ed;
  --color-border-strong: #b9c9d6;
  --color-success: #0f9d7a;
  --color-warning: #c37a1e;
  --color-danger: #d64545;
  --color-focus-ring: rgba(34, 110, 165, .22);

  --font-family-base: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.65;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3.5rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-card: 12px;
  --radius-pill: 999px;

  --shadow-soft: 0 20px 48px -28px rgba(11, 34, 58, .42);
  --shadow-focus: 0 0 0 4px var(--color-focus-ring);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-strong);
  background: linear-gradient(180deg, var(--color-surface-alt), #eef4f9);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--color-text-strong);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0;
}

h1 { font-size: clamp(1.6rem, 3vw, 2rem); }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.55rem); }
h3 { font-size: clamp(.98rem, 1.8vw, 1.1rem); }

p { margin: 0 0 var(--space-2); color: var(--color-text-muted); }

:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
  border-color: var(--color-navy-500);
}

/* ── Site Header ──────────────────────────────────────── */
.site-header {
  background: var(--color-surface);
  padding: var(--space-2) 0 0;
  box-shadow: 0 10px 26px -18px rgba(11, 34, 58, .8);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.brand-logo {
  height: 38px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.brand-text h1 { color: var(--color-navy-900); margin-bottom: 2px; }

.tagline {
  color: var(--color-navy-500);
  font-weight: 500;
  margin: 0;
  font-size: .88rem;
}

.progress-bar-wrapper {
  position: relative;
  width: 100%;
  height: .5rem;
  background: rgba(34, 110, 165, .14);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-navy-500), var(--color-navy-700));
  transition: width .4s ease;
  width: 0%;
}

/* ── Container & Card ─────────────────────────────────── */
.container {
  max-width: 1060px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-6);
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(11, 34, 58, .05);
  overflow: hidden;
}

.card-body { padding: var(--space-4); }

/* ── Section Navigation ───────────────────────────────── */
.section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: var(--space-3);
}

.section-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .85rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: all .2s ease;
  white-space: nowrap;
  font-family: inherit;
}

.section-nav-pill:hover {
  border-color: var(--color-navy-400);
  color: var(--color-navy-700);
  background: var(--color-sky-100);
}

.section-nav-pill.is-active {
  border-color: var(--color-navy-500);
  color: var(--color-navy-700);
  background: var(--color-sky-100);
  box-shadow: var(--shadow-focus);
}

.section-nav-pill.is-complete {
  border-color: var(--color-success);
  color: var(--color-success);
  background: rgba(15, 157, 122, .07);
}

.pill-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--color-border-strong);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background .2s ease;
}

.section-nav-pill.is-active .pill-num { background: var(--color-navy-500); }
.section-nav-pill.is-complete .pill-num { background: var(--color-success); }

/* ── Assessment Sections ──────────────────────────────── */
.assessment-section { display: none; }

.assessment-section.active {
  display: block;
  animation: fadeIn .3s ease;
}

.section-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.section-eyebrow {
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-navy-500);
  margin-bottom: .4rem;
}

.section-title { color: var(--color-navy-700); margin-bottom: .5rem; }

.section-description {
  color: var(--color-text-muted);
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
}

/* ── Subsection Accordions ────────────────────────────── */
.subsection {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  margin-bottom: var(--space-2);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.subsection[open] {
  border-color: var(--color-navy-400);
  box-shadow: 0 10px 24px -16px rgba(34, 110, 165, .2);
  background: var(--color-surface);
}

.subsection > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-weight: 700;
  color: var(--color-navy-700);
  font-size: .98rem;
  user-select: none;
}

.subsection > summary::-webkit-details-marker { display: none; }

.subsection > summary::after {
  content: "›";
  font-size: 1.4rem;
  transform: rotate(90deg);
  color: var(--color-navy-400);
  transition: transform .2s ease;
  flex-shrink: 0;
}

.subsection[open] > summary::after { transform: rotate(270deg); }

.subsection-ref {
  font-size: .74rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-sky-100);
  border-radius: var(--radius-pill);
  padding: .18rem .55rem;
  flex-shrink: 0;
}

.subsection-body {
  padding: 0 var(--space-3) var(--space-3);
}

/* ── Form Elements ────────────────────────────────────── */
.form-group { margin-bottom: var(--space-3); }
.form-group:last-child { margin-bottom: 0; }

.form-row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-row-3 {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

label {
  display: block;
  font-weight: 600;
  font-size: .93rem;
  color: var(--color-text-strong);
  margin-bottom: .4rem;
}

.help-text {
  font-size: .82rem;
  color: var(--color-text-muted);
  margin-top: .3rem;
  margin-bottom: 0;
}

.field-hint {
  margin: 0 0 var(--space-2);
  padding: .5rem var(--space-2);
  font-size: .82rem;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border-left: 3px solid var(--color-navy-400);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: calc(var(--space-2) - 4px) var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: .95rem;
  font-family: inherit;
  color: var(--color-text-strong);
  transition: border-color .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 1px 2px rgba(16, 33, 51, .05);
  accent-color: var(--color-navy-500);
}

input::placeholder, textarea::placeholder { color: rgba(84, 103, 122, .6); }

input:focus, select:focus, textarea:focus {
  border-color: var(--color-navy-500);
  background: #fdfefe;
  box-shadow: var(--shadow-focus);
  outline: none;
}

textarea { min-height: 7rem; resize: vertical; }

/* ── Checkbox / Radio Items ───────────────────────────── */
.checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.radio-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}

.radio-group-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.checkbox-item,
.radio-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: .7rem var(--space-2);
  background: var(--color-surface);
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.radio-item-inline {
  flex: 0 1 auto;
}

.checkbox-item input,
.radio-item input {
  margin-top: .1rem;
  flex-shrink: 0;
  accent-color: var(--color-navy-500);
  width: 15px;
  height: 15px;
}

.checkbox-item:hover,
.radio-item:hover {
  border-color: var(--color-navy-400);
  background: rgba(34, 110, 165, .04);
}

.checkbox-item:has(input:checked),
.radio-item:has(input:checked) {
  border-color: var(--color-navy-500);
  background: var(--color-sky-100);
}

.item-label {
  font-size: .9rem;
  font-weight: 500;
  color: var(--color-text-strong);
}

.item-sub {
  font-size: .78rem;
  color: var(--color-text-muted);
  margin-top: .12rem;
}

/* ── Maturity Scale ───────────────────────────────────── */
.maturity-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}

.maturity-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .45rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: .85rem .5rem;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.maturity-option input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-navy-500);
}

.maturity-option:hover {
  border-color: var(--color-navy-400);
  background: rgba(34, 110, 165, .04);
}

.maturity-option:has(input:checked) {
  border-color: var(--color-navy-500);
  background: var(--color-sky-100);
  box-shadow: var(--shadow-focus);
}

.maturity-label {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-strong);
}

.maturity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.maturity-dot-0 { background: var(--color-danger); }
.maturity-dot-1 { background: var(--color-warning); }
.maturity-dot-2 { background: var(--color-navy-400); }
.maturity-dot-3 { background: var(--color-success); }

.maturity-item {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.maturity-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.maturity-question {
  font-size: .92rem;
  font-weight: 600;
  color: var(--color-text-strong);
  margin-bottom: .65rem;
  line-height: 1.45;
}

/* ── Impact Table ─────────────────────────────────────── */
.impact-table {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.impact-table-header {
  display: grid;
  grid-template-columns: 1fr 150px 150px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border-subtle);
}

.impact-table-header > div {
  padding: .6rem var(--space-2);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
}

.impact-table-header > div + div { border-left: 1px solid var(--color-border-subtle); }

.impact-row {
  display: grid;
  grid-template-columns: 1fr 150px 150px;
  border-bottom: 1px solid var(--color-border-subtle);
  align-items: center;
  transition: background .15s ease;
}

.impact-row:last-child { border-bottom: none; }
.impact-row:hover { background: rgba(34, 110, 165, .03); }

.impact-harm {
  padding: .7rem var(--space-2);
  font-size: .88rem;
  font-weight: 500;
  color: var(--color-text-strong);
  line-height: 1.4;
}

.harm-tag {
  font-size: .72rem;
  color: var(--color-text-muted);
  display: block;
  margin-top: .12rem;
}

.impact-cell {
  padding: .45rem var(--space-1);
  border-left: 1px solid var(--color-border-subtle);
}

.impact-cell select {
  padding: .38rem .55rem;
  font-size: .83rem;
  border-radius: var(--radius-sm);
}

/* ── Chip Toggles ─────────────────────────────────────── */
.chip-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.chip-toggle {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-strong);
  padding: .38rem .9rem;
  font-size: .86rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  transition: all .2s ease;
  font-family: inherit;
}

.chip-toggle:hover {
  border-color: var(--color-navy-400);
  background: rgba(34, 110, 165, .06);
}

.chip-toggle.is-selected {
  background: var(--color-navy-500);
  color: #fff;
  border-color: var(--color-navy-500);
}

/* ── Conditional Fields ───────────────────────────────── */
.conditional-field {
  display: none;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-left: 3px solid var(--color-navy-400);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.conditional-field.visible { display: block; animation: fadeIn .22s ease; }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  appearance: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  padding: .7rem 1.4rem;
  font-weight: 600;
  font-size: .95rem;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 8px 16px -10px rgba(11, 34, 58, .22);
  min-width: 9rem;
  background: #fff;
  color: var(--color-text-strong);
  text-decoration: none;
}

.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { box-shadow: var(--shadow-focus); outline: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--color-navy-500), var(--color-navy-700));
  color: #fff;
  border-color: transparent;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-navy-500), var(--color-navy-900));
}

.btn-secondary {
  background: #fff;
  border-color: var(--color-border-subtle);
  color: var(--color-text-strong);
}

.btn-secondary:hover { background: var(--color-surface-alt); }

.btn-success {
  background: linear-gradient(135deg, var(--color-success), #0a7c60);
  color: #fff;
  border-color: transparent;
}

.button-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.button-group-right { display: flex; gap: var(--space-1); }

.pager { color: var(--color-text-muted); font-size: .88rem; font-weight: 500; }

/* ── Save Bar ─────────────────────────────────────────── */
.save-bar {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem var(--space-4);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border-subtle);
  font-size: .8rem;
  color: var(--color-text-muted);
}

.save-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border-strong);
  flex-shrink: 0;
  transition: background .3s ease;
}

.save-dot.saved { background: var(--color-success); }
.save-dot.saving { background: var(--color-warning); animation: pulse 1s infinite; }

/* ── Disclaimer Modal ─────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(11, 34, 58, .72);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}

.modal-overlay.hidden { display: none; }

.modal-container {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px -16px rgba(11, 34, 58, .5);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn .3s ease;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: center;
  flex-shrink: 0;
}

.modal-header h2 { color: var(--color-navy-700); margin-bottom: .3rem; }

.modal-subtitle { color: var(--color-text-muted); margin: 0; font-size: .92rem; }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.modal-body h3 {
  color: var(--color-navy-700);
  margin: var(--space-3) 0 var(--space-1);
  font-size: 1rem;
}

.modal-body h3:first-of-type { margin-top: 0; }

.modal-body p {
  margin: 0 0 var(--space-2);
  color: var(--color-text-strong);
  line-height: 1.65;
  font-size: .92rem;
}

.modal-highlight {
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  margin: var(--space-2) 0;
}

.modal-highlight-blue {
  background: rgba(34, 110, 165, .07);
  border: 1px solid rgba(34, 110, 165, .22);
}

.modal-highlight-blue p { color: var(--color-navy-700); margin: 0; }

.modal-highlight-warn {
  background: rgba(195, 122, 30, .07);
  border: 1px solid rgba(195, 122, 30, .28);
}

.modal-highlight-warn p { color: #7a4a10; margin: 0; }

.modal-ack {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.modal-ack h3 { margin-top: 0 !important; color: var(--color-text-strong); }

.modal-ack ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text-muted);
  font-size: .88rem;
}

.modal-ack li { margin-bottom: .4rem; line-height: 1.5; }

.modal-footer {
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-alt);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Footer ───────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: var(--space-4) var(--space-3);
  color: rgba(255, 255, 255, .8);
  background: linear-gradient(135deg, var(--color-navy-900), #132d4a);
  margin-top: var(--space-6);
}

.site-footer p { margin: 0; font-size: .86rem; }
.site-footer p + p { margin-top: .5rem; }

/* ── Utilities ────────────────────────────────────────── */
.hidden { display: none !important; }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); font-weight: 600; }
.text-danger { color: var(--color-danger); font-weight: 600; }

.field-error {
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--color-danger);
  font-weight: 500;
}

.has-error input,
.has-error select,
.has-error textarea { border-color: var(--color-danger) !important; }

.info-box {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: var(--space-2) var(--space-2);
  background: var(--color-sky-100);
  border: 1px solid var(--color-sky-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: .88rem;
  color: var(--color-navy-700);
}

.info-box-icon { flex-shrink: 0; margin-top: .1rem; }

/* ── Animations ───────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  .form-row { grid-template-columns: 1fr; }
  .form-row-3 { grid-template-columns: repeat(2, 1fr); }
  .checkbox-group { grid-template-columns: 1fr; }
  .maturity-scale { grid-template-columns: repeat(2, 1fr); }
  .impact-table-header, .impact-row { grid-template-columns: 1fr 130px 130px; }
}

@media (max-width: 768px) {
  .site-header { padding: var(--space-2) 0 0; }
  .card-body { padding: var(--space-3); }
  .button-group { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; min-width: auto; }
  .button-group-right { flex-direction: column; }
  .modal-header, .modal-body { padding: var(--space-2) var(--space-3); }
  .modal-footer { flex-direction: column; padding: var(--space-2) var(--space-3); }
  .modal-footer .btn { width: 100%; min-width: auto; }
  .save-bar { padding: .5rem var(--space-3); }
  .impact-table-header, .impact-row { grid-template-columns: 1fr 110px 110px; }
}

@media (max-width: 600px) {
  body { font-size: 15px; }
  .form-row-3 { grid-template-columns: 1fr; }
  .maturity-scale { grid-template-columns: 1fr; }
  .section-nav-pill .pill-label { display: none; }
  .impact-table-header, .impact-row { grid-template-columns: 1fr 95px 95px; }
  .impact-cell select { font-size: .78rem; padding: .3rem .35rem; }
}


/* ============================================================
   Results mode — hide form chrome
   ============================================================ */
body.results-mode .section-nav,
body.results-mode .save-bar { display: none !important; }

/* ============================================================
   Output — Tab navigation (pill style)
   ============================================================ */
.out-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: var(--space-3);
}
.out-tab-btn {
  display: inline-flex;
  align-items: center;
  padding: .38rem .9rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: all .2s ease;
  white-space: nowrap;
  font-family: inherit;
}
.out-tab-btn:hover {
  border-color: var(--color-navy-400);
  color: var(--color-navy-700);
  background: var(--color-sky-100);
}
.out-tab-btn.is-active {
  border-color: var(--color-navy-500);
  color: var(--color-navy-700);
  background: var(--color-sky-100);
  box-shadow: var(--shadow-focus);
}
.out-tab-btn.is-locked {
  opacity: .55;
  cursor: default;
}
.out-tab-btn.is-locked:hover {
  border-color: var(--color-border-subtle);
  color: var(--color-text-muted);
  background: var(--color-surface);
}

/* ============================================================
   Paywall
   ============================================================ */

.paywall-section {
  background: linear-gradient(135deg, #0b223a 0%, #1a3a58 60%, #226ea5 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: #fff;
  margin-top: var(--space-2);
  transition: box-shadow .3s ease;
}
.paywall-section.paywall-flash {
  box-shadow: 0 0 0 4px rgba(90, 180, 255, .5), var(--shadow-soft);
}
.paywall-lock-icon {
  font-size: 2.2rem;
  margin-bottom: .75rem;
  opacity: .85;
}
.paywall-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .6rem;
}
.paywall-subtitle {
  font-size: .95rem;
  color: rgba(255,255,255,.78);
  margin: 0 auto var(--space-3);
  max-width: 520px;
}
.paywall-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem;
  text-align: left;
  margin-bottom: var(--space-3);
}
.paywall-feature {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
}
.paywall-feature-name {
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  margin-bottom: .2rem;
}
.paywall-feature-desc {
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  line-height: 1.4;
}
.paywall-cta {
  font-size: 1rem;
  padding: .7rem 2.2rem;
  background: #fff;
  color: var(--color-navy-900);
  border: none;
  font-weight: 700;
}
.paywall-cta:hover:not(:disabled) {
  background: var(--color-sky-200);
  color: var(--color-navy-900);
}
.paywall-note {
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  margin: .75rem 0 0;
}

/* Locked tab placeholder */
.paywall-tab-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  gap: var(--space-2);
  text-align: center;
}
.paywall-tab-lock {
  font-size: 2.5rem;
  opacity: .4;
}
.paywall-tab-msg {
  color: var(--color-text-muted);
  font-size: .95rem;
  margin: 0;
}

/* ============================================================
   Output — Overview Tab
   ============================================================ */

.ov-wrapper { display: flex; flex-direction: column; gap: var(--space-3); }

/* Banner */
.ov-banner {
  background: linear-gradient(135deg, var(--color-navy-900) 0%, #1a3a58 60%, var(--color-navy-700) 100%);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ov-banner-system { font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: .2rem; letter-spacing: -.02em; }
.ov-banner-meta   { font-size: .8rem;  color: rgba(255,255,255,.55); margin-bottom: .2rem; }
.ov-banner-sub    { font-size: .68rem; color: rgba(255,255,255,.3); font-weight: 500; letter-spacing: .03em; }
.ov-banner-right  { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex-shrink: 0; }
.ov-rec-badge     { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .28rem .75rem; border-radius: var(--radius-pill); white-space: nowrap; }

/* Verdict */
.ov-verdict {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  padding: 1.25rem var(--space-4);
  border: 1px solid;
  border-left-width: 4px;
}
.ov-verdict-success { background: rgba(15,157,122,.07);  border-color: rgba(15,157,122,.3); border-left-color: var(--color-success); }
.ov-verdict-warning { background: rgba(195,122,30,.07);  border-color: rgba(195,122,30,.3); border-left-color: var(--color-warning); }
.ov-verdict-danger  { background: rgba(214,69,69,.07);   border-color: rgba(214,69,69,.28); border-left-color: var(--color-danger);  }
.ov-verdict-icon {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.ov-verdict-success .ov-verdict-icon { color: var(--color-success); background: rgba(15,157,122,.12); }
.ov-verdict-warning .ov-verdict-icon { color: var(--color-warning); background: rgba(195,122,30,.12); }
.ov-verdict-danger  .ov-verdict-icon { color: var(--color-danger);  background: rgba(214,69,69,.12);  }
.ov-verdict-kicker  { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-muted); margin-bottom: .25rem; }
.ov-verdict-rec     { font-size: 1.15rem; font-weight: 800; color: var(--color-text-strong); margin-bottom: .35rem; letter-spacing: -.01em; }
.ov-verdict-explain { font-size: .88rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }

/* Two-column score cards */
.ov-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ov-col-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.ov-col-kicker    { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-muted); margin-bottom: .5rem; }
.ov-col-score-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ov-col-num       { font-size: 2.4rem; font-weight: 800; color: var(--color-navy-900); line-height: 1; letter-spacing: -.03em; }
.ov-col-num span  { font-size: .9rem; font-weight: 400; opacity: .45; }
.ov-col-explain   { font-size: .84rem; color: var(--color-text-muted); line-height: 1.65; margin: 0; }
.ov-maturity-pill { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .28rem .7rem; border-radius: var(--radius-pill); white-space: nowrap; }

/* Visual analytics card (gauge + radar) */
.ov-visual-card {
  background: linear-gradient(135deg, #0b223a 0%, #1a3a58 55%, #226ea5 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: 0 8px 40px -12px rgba(11,34,58,.5);
}
.ov-visual-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.ov-visual-kicker {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.5);
  text-align: center;
}
.ov-visual-caption {
  font-size: .75rem;
  color: rgba(255,255,255,.55);
  text-align: center;
  line-height: 1.5;
  margin: 0;
  max-width: 260px;
}
.ov-visual-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
  margin: .5rem 0;
}
.ov-gauge-svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}
.ov-radar-svg {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}
@media (max-width: 600px) {
  .ov-visual-card { flex-direction: column; }
  .ov-visual-divider { width: 100%; height: 1px; margin: 0; }
}

/* Domain rows */
.ov-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.ov-section-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-muted); margin-bottom: var(--space-2); }

.ov-domain-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: .55rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.ov-domain-row:last-child { border-bottom: none; }
.ov-domain-left  { display: flex; flex-direction: column; gap: .15rem; width: 160px; flex-shrink: 0; }
.ov-domain-name  { font-size: .8rem; font-weight: 700; color: var(--color-text-strong); }
.ov-domain-desc  { font-size: .7rem; color: var(--color-text-muted); line-height: 1.4; }
.ov-domain-right { display: flex; align-items: center; gap: .65rem; flex: 1; }
.ov-domain-track { flex: 1; height: 6px; background: var(--color-border-subtle); border-radius: 99px; overflow: hidden; }
.ov-domain-fill  { height: 100%; border-radius: 99px; }
.ov-domain-val   { font-size: .8rem; font-weight: 700; color: var(--color-text-strong); white-space: nowrap; flex-shrink: 0; }
.ov-domain-denom { font-weight: 400; opacity: .45; }
.ov-domain-lbl   { font-size: .72rem; font-weight: 600; width: 80px; text-align: right; flex-shrink: 0; }

/* Flags */
.ov-flags-intro { font-size: .82rem; color: var(--color-text-muted); line-height: 1.6; margin: 0 0 var(--space-2); }
.ov-flags-wrap  { display: flex; flex-wrap: wrap; gap: .4rem; }
.ov-flag {
  font-size: .7rem; font-weight: 600; color: var(--color-warning);
  background: rgba(195,122,30,.1); border: 1px solid rgba(195,122,30,.22);
  border-radius: var(--radius-pill); padding: .2rem .65rem; white-space: nowrap;
}

.ov-nav-hint {
  font-size: .82rem; color: var(--color-text-muted);
  text-align: center; padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border-subtle);
}

/* Loading state header */
.ov-gen-header {
  text-align: center;
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-3);
}
.ov-gen-system { font-size: 1.1rem; font-weight: 700; color: var(--color-navy-900); margin-bottom: .25rem; }
.ov-gen-org    { font-size: .82rem; color: var(--color-text-muted); }

/* ============================================================
   Output — Scoring Panel (legacy, kept for reference)
   ============================================================ */

.out-wrapper { padding: var(--space-4); }

.sc-panel {
  background: linear-gradient(140deg, var(--color-navy-900) 0%, #1a3a58 55%, var(--color-navy-700) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: #fff;
  margin-bottom: var(--space-3);
  box-shadow: 0 4px 32px -8px rgba(11,34,58,.35);
}

.sc-identity {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.sc-system {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .2rem;
}
.sc-org {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
}
.sc-org span { color: rgba(255,255,255,.8); }

.sc-badges { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; flex-shrink: 0; }

.sc-tier-badge, .sc-rec-badge {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .28rem .75rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.sc-tier-1 { background: rgba(15,157,122,.25); color: #4dddb7; border: 1px solid rgba(15,157,122,.4); }
.sc-tier-2 { background: rgba(34,110,165,.3);  color: #7ec8f5; border: 1px solid rgba(34,110,165,.5); }

/* Tier badges on light backgrounds (overview cards) — brand palette, WCAG contrast */
.ov-col-card .sc-tier-1 { background: rgba(15,157,122,.1);  color: #0a7a5e; border-color: rgba(15,157,122,.35); }
.ov-col-card .sc-tier-2 { background: rgba(34,110,165,.1);  color: #1a5a8f; border-color: rgba(34,110,165,.35); }
.ov-col-card .sc-tier-3 { background: rgba(195,122,30,.1);  color: #a06010; border-color: rgba(195,122,30,.35); }
.ov-col-card .sc-tier-4 { background: rgba(214,69,69,.1);   color: #b53030; border-color: rgba(214,69,69,.35);  }
.sc-tier-3 { background: rgba(195,122,30,.3);  color: #f5c47e; border: 1px solid rgba(195,122,30,.5); }
.sc-tier-4 { background: rgba(214,69,69,.3);   color: #f58080; border: 1px solid rgba(214,69,69,.5); }

.sc-rec-success { background: rgba(15,157,122,.2);  color: #4dddb7; border: 1px solid rgba(15,157,122,.35); }
.sc-rec-warning { background: rgba(195,122,30,.2);  color: #f5c47e; border: 1px solid rgba(195,122,30,.35); }
.sc-rec-danger  { background: rgba(214,69,69,.2);   color: #f58080; border: 1px solid rgba(214,69,69,.35); }

.sc-scores-row {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.sc-score-block {
  text-align: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-width: 90px;
}
.sc-score-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.sc-score-num span { font-size: .9rem; font-weight: 400; opacity: .5; }
.sc-score-label { font-size: .68rem; color: rgba(255,255,255,.5); margin-top: .3rem; text-transform: uppercase; letter-spacing: .07em; }

.sc-domains { display: flex; flex-direction: column; gap: .35rem; }
.sc-domain { display: flex; align-items: center; gap: .6rem; }
.sc-domain-label { font-size: .72rem; color: rgba(255,255,255,.6); width: 82px; flex-shrink: 0; }
.sc-bar-wrap { flex: 1; height: 5px; background: rgba(255,255,255,.15); border-radius: 99px; overflow: hidden; }
.sc-bar { height: 100%; background: linear-gradient(90deg, #4dddb7, #7ec8f5); border-radius: 99px; transition: width .6s ease; }
.sc-domain-val { font-size: .72rem; color: rgba(255,255,255,.6); width: 18px; text-align: right; flex-shrink: 0; }

.sc-flags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255,255,255,.1);
}
.sc-flags-label {
  width: 100%;
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .15rem;
}
.sc-flag {
  font-size: .7rem;
  font-weight: 600;
  color: #f5c47e;
  background: rgba(195,122,30,.18);
  border: 1px solid rgba(195,122,30,.28);
  border-radius: var(--radius-pill);
  padding: .18rem .65rem;
  white-space: nowrap;
}

/* ── Loading state ── */
.out-generating { padding: var(--space-4); }
.out-gen-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}
.out-gen-title { font-weight: 700; color: var(--color-navy-700); margin-bottom: .2rem; }
.out-gen-sub { font-size: .85rem; color: var(--color-text-muted); }

/* ── NIST note ── */
.out-nist-note {
  font-size: .82rem;
  color: var(--color-text-muted);
  background: var(--color-sky-100);
  border: 1px solid var(--color-sky-200);
  border-radius: var(--radius-sm);
  padding: .65rem 1rem;
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}

/* ── Tab navigation (styles defined above in pill section) ── */

.out-tab-panel { display: none; }
.out-tab-panel.active { display: block; animation: fadeIn .25s ease; }
.out-empty { color: var(--color-text-muted); font-style: italic; font-size: .9rem; padding: var(--space-2) 0; }

/* ── Tab next / final nav ── */
.out-tab-next {
  display: flex; justify-content: flex-end;
  padding: 1.25rem 0 .5rem;
  border-top: 1px solid var(--color-border-subtle);
  margin-top: 2rem;
}
.out-tab-next-btn {
  font-weight: 700; font-size: .9rem;
  background: var(--color-navy-500); color: #fff;
  border: none; border-radius: var(--radius-md);
  padding: .6rem 1.4rem;
  cursor: pointer; transition: background .15s;
  box-shadow: 0 2px 8px rgba(34,110,165,.25);
}
.out-tab-next-btn:hover { background: var(--color-navy-700); }
.out-tab-final {
  border-top: 1px solid var(--color-border-subtle);
  margin-top: 2rem; padding-top: 1.25rem;
  display: flex; justify-content: flex-end;
}

/* ── Output footer ── */
.out-footer {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

/* ============================================================
   Output — Risk Profile tab
   ============================================================ */

.rp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.rp-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-top: 3px solid var(--color-navy-400);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: flex; flex-direction: column;
}
.rp-card-label {
  font-size: .8rem;
  font-weight: 800;
  color: var(--color-navy-700);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .15rem;
}
.rp-card-subtitle {
  font-size: .72rem;
  color: var(--color-text-muted);
  margin-bottom: .7rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--color-border-subtle);
}
.rp-card-body {
  font-size: .9rem;
  color: var(--color-text-strong);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

/* ============================================================
   Output — Gap Analysis tab (Executive Summary)
   ============================================================ */

/* Priority badge classes — also used in the priority table below */
.gap-priority { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: .15rem .55rem; border-radius: var(--radius-pill); flex-shrink: 0; }
.gap-high   { background: rgba(214,69,69,.1);  color: var(--color-danger);  border: 1px solid rgba(214,69,69,.25); }
.gap-medium { background: rgba(195,122,30,.1); color: var(--color-warning); border: 1px solid rgba(195,122,30,.25); }
.gap-low    { background: rgba(15,157,122,.1); color: var(--color-success); border: 1px solid rgba(15,157,122,.25); }

/* Wrapper */
.ga-wrapper { display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Posture banner ── */
.ga-posture-banner {
  display: flex;
  align-items: center;
  background: var(--color-navy-900);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  gap: 0;
}
.ga-posture-item { flex: 1; text-align: center; }
.ga-posture-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.5);
  margin-bottom: .2rem;
}
.ga-posture-val {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.ga-posture-divider {
  width: 1px;
  height: 2.5rem;
  background: rgba(255,255,255,.15);
  margin: 0 var(--space-2);
  flex-shrink: 0;
}

/* ── Overall executive summary ── */
.ga-overall-summary {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-left: 3px solid var(--color-navy-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-2) var(--space-3);
}
.ga-overall-text {
  font-size: .92rem;
  color: var(--color-text-strong);
  line-height: 1.7;
  margin: 0;
}

/* ── Section label ── */
.ga-section-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* ── Main layout: radar centred full-width, cards below ── */
.ga-radar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-3);
}
.ga-fn-section { margin-bottom: var(--space-3); }
.ga-radar-svg { width: 100%; max-width: 540px; display: block; margin: 0 auto; }

/* ── Function cards grid ── */
.ga-fn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.ga-fn-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-top: 3px solid;
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.ga-fn-govern  { border-top-color: var(--color-navy-900); }
.ga-fn-map     { border-top-color: var(--color-navy-500); }
.ga-fn-measure { border-top-color: var(--color-success); }
.ga-fn-manage  { border-top-color: var(--color-warning); }

.ga-fn-header { margin-bottom: .5rem; }
.ga-fn-label {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-strong);
}
.ga-fn-desc {
  display: block;
  font-size: .7rem;
  color: var(--color-text-muted);
  margin-top: .1rem;
}
.ga-fn-score-row {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  margin-bottom: .4rem;
  flex-wrap: wrap;
}
.ga-fn-score-num {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--color-text-strong);
  line-height: 1;
}
.ga-fn-score-denom {
  font-size: .78rem;
  color: var(--color-text-muted);
  margin-right: .3rem;
}

/* ── Maturity level badges ── */
.ga-level-badge {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .15rem .55rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  white-space: nowrap;
}
.ga-level-critical { background: rgba(214,69,69,.1);   color: var(--color-danger);   border: 1px solid rgba(214,69,69,.25); }
.ga-level-high     { background: rgba(195,122,30,.15);  color: var(--color-warning);  border: 1px solid rgba(195,122,30,.3); }
.ga-level-elevated { background: rgba(195,122,30,.1);   color: var(--color-warning);  border: 1px solid rgba(195,122,30,.2); }
.ga-level-moderate { background: rgba(34,110,165,.1);   color: var(--color-navy-500); border: 1px solid rgba(34,110,165,.2); }
.ga-level-managed  { background: rgba(15,157,122,.1);   color: var(--color-success);  border: 1px solid rgba(15,157,122,.2); }

/* ── Maturity progress bar ── */
.ga-fn-bar-track {
  height: 5px;
  background: var(--color-border-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: .4rem;
}
.ga-fn-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transform-origin: left center;
  animation: barScaleX 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-play-state: paused;
}
.ga-fn-gap-count {
  font-size: .75rem;
  color: var(--color-text-muted);
  margin-bottom: .4rem;
}
.ga-fn-summary {
  font-size: .82rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  padding-top: .45rem;
  border-top: 1px solid var(--color-border-subtle);
}

/* ── Priority gap table ── */
.ga-priority-section { }
.ga-priority-table {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ga-pt-header {
  display: grid;
  grid-template-columns: 1fr 90px 90px 90px;
  gap: var(--space-2);
  background: var(--color-surface-alt);
  padding: .5rem var(--space-2);
  font-size: .7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 1px solid var(--color-border-subtle);
}
.ga-pt-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px 90px;
  gap: var(--space-2);
  padding: .6rem var(--space-2);
  align-items: center;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  transition: background .12s;
}
.ga-pt-row:last-child { border-bottom: none; }
.ga-pt-row:hover { background: var(--color-surface-alt); }
.ga-pt-gap { font-size: .85rem; font-weight: 600; color: var(--color-text-strong); }
.ga-pt-ref { font-size: .74rem; font-family: monospace; color: var(--color-text-muted); word-break: break-word; }

/* ── Function chips (in table) ── */
.ga-fn-chip {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .15rem .5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.ga-fn-chip-govern  { background: rgba(11,34,58,.08);  color: var(--color-navy-900); border: 1px solid rgba(11,34,58,.15); }
.ga-fn-chip-map     { background: rgba(34,110,165,.1); color: var(--color-navy-500); border: 1px solid rgba(34,110,165,.2); }
.ga-fn-chip-measure { background: rgba(15,157,122,.1); color: var(--color-success);  border: 1px solid rgba(15,157,122,.2); }
.ga-fn-chip-manage  { background: rgba(195,122,30,.1); color: var(--color-warning);  border: 1px solid rgba(195,122,30,.2); }

/* ── Responsive ── */
@media (max-width: 860px) {
  .ga-radar-svg { max-width: 380px; }
}
@media (max-width: 560px) {
  .ga-fn-grid       { grid-template-columns: 1fr; }
  .ga-posture-banner { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2); }
  .ga-posture-divider { display: none; }
  .ga-posture-item  { flex: none; width: 48%; }
}

/* ============================================================
   Output — Findings tab
   ============================================================ */

.findings-list { display: flex; flex-direction: column; gap: var(--space-2); }

.finding-card {
  display: flex;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}
.finding-rank {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-border-strong);
  width: 24px;
  flex-shrink: 0;
  margin-top: .1rem;
}
.finding-body { flex: 1; min-width: 0; }
.finding-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); margin-bottom: .4rem; }
.finding-title { font-weight: 700; font-size: .92rem; color: var(--color-navy-700); }
.finding-badges { display: flex; gap: .35rem; flex-wrap: wrap; flex-shrink: 0; }

.finding-impact { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: .15rem .5rem; border-radius: var(--radius-pill); }
.finding-impact-critical { background: rgba(214,69,69,.15);  color: var(--color-danger);  border: 1px solid rgba(214,69,69,.3); }
.finding-impact-high     { background: rgba(195,122,30,.15); color: var(--color-warning); border: 1px solid rgba(195,122,30,.3); }
.finding-impact-medium   { background: rgba(34,110,165,.12); color: var(--color-navy-500); border: 1px solid rgba(34,110,165,.25); }
.finding-impact-low      { background: rgba(15,157,122,.1);  color: var(--color-success);  border: 1px solid rgba(15,157,122,.25); }

.finding-fn  { font-size: .68rem; font-weight: 700; color: var(--color-text-muted); background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-pill); padding: .15rem .5rem; }
.finding-due { font-size: .68rem; font-weight: 700; color: var(--color-navy-500); background: var(--color-sky-100); border: 1px solid var(--color-sky-200); border-radius: var(--radius-pill); padding: .15rem .5rem; }

.finding-evidence-grade { font-size: .65rem; font-weight: 700; border-radius: var(--radius-pill); padding: .15rem .5rem; letter-spacing: .02em; }
.eg-confirmed { color: #ef4444; background: rgba(239,68,68,.1);   border: 1px solid rgba(239,68,68,.28); }
.eg-asserted  { color: #f59e0b; background: rgba(245,158,11,.1);  border: 1px solid rgba(245,158,11,.28); }
.eg-inferred  { color: #94a3b8; background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.22); }

.finding-desc { font-size: .88rem; color: var(--color-text-muted); margin: 0 0 .35rem; }
.finding-rec  { font-size: .88rem; color: var(--color-text-strong); margin: 0 0 .35rem; }
.finding-meta { font-size: .78rem; color: var(--color-text-muted); }

/* ============================================================
   Output — 30/60/90 Roadmap tab
   ============================================================ */

.rm-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.rm-phase {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
}

.rm-phase-header {
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .6rem var(--space-2);
  text-align: center;
}
.rm-immediate .rm-phase-header { background: rgba(214,69,69,.08);  color: var(--color-danger);  border-bottom: 2px solid rgba(214,69,69,.2); }
.rm-near      .rm-phase-header { background: rgba(195,122,30,.08); color: var(--color-warning); border-bottom: 2px solid rgba(195,122,30,.2); }
.rm-medium    .rm-phase-header { background: rgba(15,157,122,.08); color: var(--color-success); border-bottom: 2px solid rgba(15,157,122,.2); }

.rm-item {
  padding: .85rem var(--space-2) .85rem calc(var(--space-2) + .1rem);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  position: relative;
}
.rm-item:last-child { border-bottom: none; }
.rm-item-action {
  font-size: .88rem; font-weight: 600; color: var(--color-text-strong);
  margin-bottom: .3rem; line-height: 1.5;
}
.rm-item-meta {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; color: var(--color-navy-500);
  background: rgba(34,110,165,.07); border: 1px solid rgba(34,110,165,.15);
  border-radius: 4px; padding: .1rem .45rem; margin-bottom: .15rem;
}
.rm-item-rationale {
  font-size: .78rem; color: var(--color-text-muted);
  border-left: 2px solid var(--color-border-subtle);
  padding-left: .6rem; margin-top: .4rem; line-height: 1.55;
}

/* ============================================================
   Output — Approval Memo tab
   ============================================================ */

.memo-wrapper {
  max-width: 780px;
  margin: 0 auto;
}
.memo-header {
  text-align: center;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border-strong);
}
/* memo-label / system / org defined below in enhanced section */

.memo-body { margin-bottom: var(--space-3); }
.memo-assessment-basis {
  margin-bottom: var(--space-2); padding: .55rem .85rem;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle);
  border-left: 3px solid var(--color-navy-400);
  border-radius: 7px; font-size: .8rem; line-height: 1.6; color: var(--color-text-strong);
}
.memo-basis-label { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-navy-700); margin-right: .5rem; font-size: .7rem; }
.memo-sig-verification { opacity: .85; font-style: italic; }
.memo-summary { font-size: .95rem; color: var(--color-text-strong); line-height: 1.7; margin-bottom: var(--space-3); }

.memo-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.memo-col {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.memo-col-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-navy-500);
  margin-bottom: .6rem;
}
.memo-col ul, .memo-conditions ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: .88rem;
  color: var(--color-text-strong);
  line-height: 1.6;
}

.memo-conditions {
  background: var(--color-sky-100);
  border: 1px solid var(--color-sky-200);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.memo-decision {
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-3);
  border: 1px solid;
}
.memo-decision-success { background: rgba(15,157,122,.06);  border-color: rgba(15,157,122,.2); }
.memo-decision-warning { background: rgba(195,122,30,.06);  border-color: rgba(195,122,30,.2); }
.memo-decision-danger  { background: rgba(214,69,69,.06);   border-color: rgba(214,69,69,.2); }

.memo-decision-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: .3rem; }
.memo-decision-rec {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: .5rem;
}
.memo-decision-success .memo-decision-rec { color: var(--color-success); }
.memo-decision-warning .memo-decision-rec { color: var(--color-warning); }
.memo-decision-danger  .memo-decision-rec { color: var(--color-danger); }
.memo-decision p { font-size: .9rem; color: var(--color-text-strong); margin: 0; line-height: 1.6; }

.memo-sig {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.memo-sig-line {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--color-text-muted);
}
.memo-sig-line span:first-child { font-weight: 700; color: var(--color-text-strong); }

/* ============================================================
   Spinner
   ============================================================ */

.rp-spinner {
  width: 36px; height: 36px;
  border: 4px solid var(--color-sky-200);
  border-top-color: var(--color-navy-500);
  border-radius: 50%;
  animation: rp-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes rp-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Form polish — RMF function labels on section headers
   ============================================================ */

.rmf-fn-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .65rem;
  border-radius: var(--radius-pill);
  margin-top: .5rem;
}
.rmf-fn-govern  { background: rgba(11,34,58,.07);  color: var(--color-navy-900); border: 1px solid rgba(11,34,58,.12); }
.rmf-fn-map     { background: rgba(34,110,165,.1); color: var(--color-navy-500); border: 1px solid rgba(34,110,165,.2); }
.rmf-fn-measure { background: rgba(15,157,122,.1); color: var(--color-success);  border: 1px solid rgba(15,157,122,.2); }
.rmf-fn-manage  { background: rgba(195,122,30,.1); color: var(--color-warning);  border: 1px solid rgba(195,122,30,.2); }
.rmf-fn-all     { background: rgba(34,110,165,.08); color: var(--color-navy-700); border: 1px solid rgba(34,110,165,.15); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 860px) {
  .sc-scores-row { grid-template-columns: repeat(3, auto); }
  .sc-domains { display: none; }
  .rm-wrapper { grid-template-columns: 1fr; }
  .rp-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .out-wrapper { padding: var(--space-3); }
  .sc-panel { padding: var(--space-3); }
  .out-footer { flex-direction: column; }
  .out-footer .btn { width: 100%; }
}

@media (max-width: 600px) {
  body { font-size: 15px; }
  .form-row-3 { grid-template-columns: 1fr; }
  .maturity-scale { grid-template-columns: 1fr; }
  .section-nav-pill .pill-label { display: none; }
  .impact-table-header, .impact-row { grid-template-columns: 1fr 95px 95px; }
  .impact-cell select { font-size: .78rem; padding: .3rem .35rem; }
  .sc-identity { flex-direction: column; }
  .sc-badges { align-self: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ADAPTIVE INTAKE — Clarification UI
   ════════════════════════════════════════════════════════════════════════════ */

.clarif-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(11,34,58,.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.clarif-panel {
  background: var(--color-surface); border-radius: var(--radius-card);
  box-shadow: 0 24px 64px rgba(11,34,58,.35); max-width: 600px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.clarif-header {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--color-border-subtle);
}
.clarif-icon { font-size: 1.5rem; color: var(--color-navy-500); flex-shrink: 0; margin-top: .1rem; }
.clarif-title { font-size: 1rem; font-weight: 800; color: var(--color-navy-900); margin-bottom: .2rem; }
.clarif-subtitle { font-size: .83rem; color: var(--color-text-muted); line-height: 1.5; }
.clarif-questions { padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: .85rem; }
.clarif-q {
  padding: .85rem 1rem; background: var(--color-surface-alt);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
}
.clarif-q-meta {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-navy-500); margin-bottom: .3rem;
}
.clarif-q-text {
  font-size: .88rem; font-weight: 700; color: var(--color-text-strong);
  margin-bottom: .25rem; line-height: 1.45;
}
.clarif-q-context {
  font-size: .78rem; color: var(--color-text-muted); margin-bottom: .5rem;
  line-height: 1.45; font-style: italic;
}
.clarif-input {
  width: 100%; box-sizing: border-box; padding: .5rem .65rem;
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .83rem; color: var(--color-text-strong);
  background: var(--color-surface); resize: vertical; min-height: 52px;
  transition: border-color .15s;
}
.clarif-input:focus { outline: none; border-color: var(--color-navy-500); }
.clarif-footer {
  display: flex; gap: .75rem; padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--color-border-subtle); flex-wrap: wrap;
}

/* Hard gate variant */
.hardgate-panel { border-top: 3px solid #dc2626; }
.hardgate-q { border-color: rgba(220,38,38,.25) !important; background: rgba(220,38,38,.04) !important; }
.hardgate-evidence-label {
  font-size: .75rem; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .05em; margin: .6rem 0 .25rem;
}
.hardgate-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-text-muted); opacity: .7; }
.hardgate-ack-label {
  display: flex; align-items: flex-start; gap: .5rem; cursor: pointer;
  font-size: .8rem; color: var(--color-text-muted); line-height: 1.5; margin-top: .5rem;
}
.hardgate-ack-label input[type="checkbox"] { flex-shrink: 0; margin-top: .15rem; accent-color: #dc2626; }
.btn-danger {
  background: #dc2626; color: #fff; border: none; border-radius: var(--radius-sm);
  padding: .55rem 1.25rem; font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.btn-danger:hover:not(:disabled) { background: #b91c1c; }
.btn-danger:disabled { opacity: .4; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════════════
   ADJUDICATION TRACE — field-level change log shown above overview
   ════════════════════════════════════════════════════════════════════════════ */

.adj-trace {
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  background: var(--color-surface-alt); padding: .85rem 1rem; margin-bottom: 1rem;
  font-size: .8rem;
}
.adj-trace-header {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem;
  flex-wrap: wrap;
}
.adj-trace-icon { font-size: 1rem; color: var(--color-navy-500); }
.adj-trace-title { font-weight: 800; color: var(--color-text-strong); }
.adj-trace-count {
  font-size: .72rem; color: var(--color-text-muted);
  background: var(--color-border-subtle); border-radius: 99px;
  padding: .1rem .5rem; margin-left: auto;
}
.adj-trace-items { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; }
.adj-trace-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap;
}
.adj-trace-field {
  font-weight: 600; color: var(--color-text-strong); font-size: .8rem; flex: 1;
}
.adj-trace-arrow {
  display: flex; align-items: center; gap: .35rem; flex-shrink: 0;
}
.adj-trace-from {
  font-size: .75rem; color: var(--color-text-muted);
  text-decoration: line-through; opacity: .7;
}
.adj-trace-chevron { color: var(--color-navy-500); font-size: .75rem; }
.adj-trace-to {
  font-size: .75rem; font-weight: 700; color: #16a34a;
  background: rgba(22,163,74,.08); border-radius: 4px; padding: .05rem .35rem;
}
.adj-trace-note {
  font-size: .72rem; color: var(--color-text-muted); font-style: italic;
  border-top: 1px solid var(--color-border-subtle); padding-top: .5rem;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════════
   GOVERNANCE RISK CERTIFICATE
   ════════════════════════════════════════════════════════════════════════════ */

.governance-certificate {
  border: 1px solid var(--color-border-subtle);
  border-top-width: 3px;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.governance-certificate.gc-rec-success { border-top-color: var(--color-success); }
.governance-certificate.gc-rec-warning { border-top-color: var(--color-warning); }
.governance-certificate.gc-rec-danger  { border-top-color: var(--color-danger);  }
.gc-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1rem 1.25rem 1rem; border-bottom: 1px solid var(--color-border-subtle);
  gap: 1rem; flex-wrap: wrap;
  background: var(--color-surface-alt);
}
.gc-label {
  font-size: .6rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-navy-500); margin-bottom: .3rem;
}
.gc-system { font-size: 1rem; font-weight: 800; color: var(--color-text-strong); }
.gc-org { font-size: .8rem; color: var(--color-text-muted); margin-top: .15rem; }
.gc-header-right { text-align: right; flex-shrink: 0; }
.gc-date { font-size: .75rem; color: var(--color-text-muted); margin-bottom: .3rem; }
.gc-tier-chip {
  font-size: .7rem; font-weight: 700; padding: .2rem .6rem;
  border-radius: 99px; background: var(--color-surface-alt);
  border: 1px solid var(--color-border-subtle); color: var(--color-text-muted);
}
.gc-axes {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; border-bottom: 1px solid var(--color-border-subtle);
}
.gc-axis {
  padding: .85rem 1rem; border-right: 1px solid var(--color-border-subtle);
  display: flex; flex-direction: column; gap: .2rem;
}
.gc-axis:last-child { border-right: none; }
.gc-axis-signal { }
.gc-axis-title {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--color-text-muted); margin-bottom: .1rem;
}
.gc-axis-icon { font-size: 1.1rem; line-height: 1; }
.gc-axis-value { font-size: .95rem; font-weight: 800; line-height: 1.2; }
.gc-axis-sub { font-size: .68rem; color: var(--color-text-muted); line-height: 1.4; margin-top: .1rem; }
.gc-footer {
  padding: .6rem 1.25rem; display: flex; align-items: baseline; gap: .6rem;
  background: var(--color-surface-alt); flex-wrap: wrap;
}
.gc-basis-badge {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(217,119,6,.1); color: #92400e; border: 1px solid rgba(217,119,6,.2);
  border-radius: 4px; padding: .1rem .45rem; flex-shrink: 0;
}
.gc-basis-text { font-size: .7rem; color: var(--color-text-muted); line-height: 1.5; }
@media (max-width: 640px) {
  .gc-axes { grid-template-columns: repeat(2, 1fr); }
  .gc-axis:nth-child(2) { border-right: none; }
  .gc-axis:nth-child(3) { border-top: 1px solid var(--color-border-subtle); }
}

/* ════════════════════════════════════════════════════════════════════════════
   GATE TIER STYLES
   ════════════════════════════════════════════════════════════════════════════ */

.hardgate-tier-a { border-left: 3px solid #dc2626 !important; }
.hardgate-tier-b { border-left: 3px solid #d97706 !important; }
.hardgate-tier-c { border-left: 3px solid #2563eb !important; }
.hardgate-consequence {
  background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.2);
  border-radius: var(--radius-sm); padding: .4rem .65rem;
  font-size: .78rem; color: #dc2626; font-weight: 600; margin: .4rem 0;
  line-height: 1.45;
}
.hardgate-options { display: flex; flex-direction: column; gap: .35rem; margin: .3rem 0; }
.hardgate-option-label {
  display: flex; align-items: flex-start; gap: .5rem; cursor: pointer;
  font-size: .82rem; color: var(--color-text-strong); line-height: 1.45;
  padding: .4rem .6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  transition: background .12s, border-color .12s;
}
.hardgate-option-label:has(input:checked) {
  background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.3);
}
.hardgate-option-label input[type="radio"] { flex-shrink: 0; margin-top: .2rem; accent-color: #2563eb; }
.hardgate-collection-input {
  width: 100%; box-sizing: border-box; padding: .45rem .65rem;
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .85rem; color: var(--color-text-strong);
  background: var(--color-surface); margin-bottom: .35rem;
}
.hardgate-collection-input:focus { outline: none; border-color: #2563eb; }

/* ════════════════════════════════════════════════════════════════════════════
   ADJUDICATION TRACE — CONFIDENCE + AMBIGUITIES
   ════════════════════════════════════════════════════════════════════════════ */

.adj-trace-confidence-high  { color: #16a34a; background: rgba(22,163,74,.08); }
.adj-trace-confidence-medium{ color: #d97706; background: rgba(217,119,6,.08); }
.adj-trace-confidence-low   { color: #ea580c; background: rgba(234,88,12,.08); }
.adj-trace-confidence-badge {
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 4px; padding: .05rem .3rem; margin-left: .3rem;
}
.adj-trace-ambiguities {
  border-top: 1px solid rgba(217,119,6,.2); padding-top: .5rem; margin-top: .3rem;
}
.adj-trace-ambig-title {
  font-size: .72rem; font-weight: 700; color: #d97706; margin-bottom: .35rem;
}
.adj-trace-ambig-item {
  display: flex; gap: .5rem; font-size: .75rem; margin-bottom: .2rem;
  align-items: flex-start;
}
.adj-trace-ambig-note { color: var(--color-text-muted); line-height: 1.4; }

/* ════════════════════════════════════════════════════════════════════════════
   ARTIFACT MODE BANNERS — verification-first mode for low/insufficient confidence
   ════════════════════════════════════════════════════════════════════════════ */

.artifact-mode-banner {
  display: flex; align-items: flex-start; gap: .75rem;
  border-radius: var(--radius-md); padding: .75rem 1rem; margin-bottom: 1rem;
  font-size: .8rem; line-height: 1.55; border: 1px solid;
}
.artifact-mode-verification {
  background: rgba(146,64,14,.06); border-color: rgba(146,64,14,.25);
}
.artifact-mode-icon {
  font-size: 1.1rem; color: #b45309; flex-shrink: 0; margin-top: .05rem;
}
.artifact-mode-title {
  font-weight: 800; color: #92400e; font-size: .82rem; margin-bottom: .2rem;
}
.artifact-mode-body { color: var(--color-text-muted); }

@media print {
  .save-bar, .section-nav, .site-header nav,
  .out-tabs, .out-footer { display: none !important; }
  .out-tab-panel { display: block !important; page-break-before: always; }
  .out-tab-panel:first-of-type { page-break-before: auto; }
  .rp-grid { grid-template-columns: 1fr 1fr; }
  .rm-wrapper { grid-template-columns: repeat(3, 1fr); }
  .card { box-shadow: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ENHANCED SCORE PANEL — maturity bands, threshold context
   ════════════════════════════════════════════════════════════════════════════ */

.sc-domain { flex-direction: column; align-items: stretch; gap: .25rem; }
.sc-domain-header { display: flex; align-items: center; justify-content: space-between; }
.sc-domain-label  { font-size: .72rem; color: rgba(255,255,255,.6); }
.sc-band-pill {
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .1rem .45rem; border-radius: 99px; flex-shrink: 0;
}
.sc-domain-footer { display: flex; align-items: flex-start; gap: .5rem; margin-top: .1rem; }
.sc-domain-val { font-size: .72rem; color: rgba(255,255,255,.6); flex-shrink: 0; width: 28px; }
.sc-band-desc {
  font-size: .68rem; color: rgba(255,255,255,.45); line-height: 1.4; flex: 1;
}

/* Threshold context strip */
.sc-threshold {
  margin-top: .6rem; padding: .45rem .75rem; border-radius: 8px;
  font-size: .78rem; line-height: 1.5;
}
.sc-threshold-met     { background: rgba(15,157,122,.18); color: #4dddb7; border: 1px solid rgba(15,157,122,.3); }
.sc-threshold-gap     { background: rgba(195,122,30,.15);  color: #f5c47e; border: 1px solid rgba(195,122,30,.3); }
.sc-threshold-blocked { background: rgba(214,69,69,.15);   color: #f58080; border: 1px solid rgba(214,69,69,.3); }
.sc-threshold-gap-num { font-weight: 800; margin-right: .3rem; }

/* Assessment confidence strip */
.sc-confidence {
  margin-top: .75rem; padding: .65rem .75rem;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; font-size: .75rem;
}
.sc-confidence-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; gap: .5rem; flex-wrap: wrap; }
.sc-confidence-label { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); font-size: .68rem; }
.sc-confidence-score { font-weight: 700; font-size: .78rem; }
.sc-confidence-bar-wrap { height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; margin-bottom: .5rem; overflow: hidden; }
.sc-confidence-bar { height: 100%; border-radius: 2px; transition: width .6s ease; }
.sc-confidence-caveats { margin: 0; padding: 0 0 0 1.1rem; color: var(--color-text-muted); line-height: 1.55; }
.sc-confidence-caveats li { margin-bottom: .2rem; }
.sc-floor-warning {
  margin-top: .5rem; padding: .4rem .6rem;
  background: rgba(214,69,69,.12); border: 1px solid rgba(214,69,69,.3); border-radius: 6px;
  color: #f58080; font-size: .73rem; font-weight: 600;
}

/* Three-dimensional assessment row */
.sc-3d-row {
  display: flex; gap: .6rem; margin-bottom: .75rem; flex-wrap: wrap;
}
.sc-3d-dim {
  flex: 1 1 0; min-width: 110px; display: flex; align-items: center; gap: .55rem;
  padding: .5rem .65rem; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08); border-radius: 8px; cursor: default;
}
.sc-3d-icon { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.sc-3d-label { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: .12rem; }
.sc-3d-value { font-size: .82rem; font-weight: 800; }

/* ════════════════════════════════════════════════════════════════════════════
   GENERATION PROGRESS BAR
   ════════════════════════════════════════════════════════════════════════════ */

.out-gen-status {
  display: flex; align-items: flex-start; gap: 1.2rem;
  margin-top: var(--space-3); padding: 1.25rem 1.5rem;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
}
.out-gen-progress-wrap {
  height: 4px; background: rgba(0,0,0,.08); border-radius: 99px;
  overflow: hidden; margin: .5rem 0 .4rem;
}
.out-gen-progress-bar {
  height: 100%; background: linear-gradient(90deg, var(--color-sky-500), var(--color-teal-500));
  border-radius: 99px; transition: width .4s ease;
}
.out-gen-step {
  font-size: .72rem; color: var(--color-text-muted); margin-top: .15rem;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════════
   GAP ANALYSIS — RMF reference badge
   ════════════════════════════════════════════════════════════════════════════ */

.gap-rmf-ref {
  font-size: .66rem; font-weight: 700; color: var(--color-navy-500);
  background: var(--color-sky-100); border: 1px solid var(--color-sky-200);
  border-radius: var(--radius-pill); padding: .1rem .45rem; flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   FINDINGS — NIST basis quote + subcategory badge
   ════════════════════════════════════════════════════════════════════════════ */

.finding-nist-basis {
  font-size: .8rem; color: var(--color-text-muted); line-height: 1.5;
  background: var(--color-sky-50, #f0f7ff); border-left: 3px solid var(--color-sky-300, #90cdf4);
  padding: .4rem .75rem; border-radius: 0 6px 6px 0; margin: .25rem 0 .35rem;
}
.finding-nist-label {
  font-weight: 700; color: var(--color-navy-500); margin-right: .35rem;
}

/* Compound risk interaction note on a finding */
.finding-interaction-note {
  font-size: .79rem; color: var(--color-text-muted); line-height: 1.5;
  background: rgba(245,158,11,.07); border-left: 3px solid rgba(217,119,6,.35);
  padding: .35rem .7rem; border-radius: 0 6px 6px 0; margin: .2rem 0 .3rem;
}
.finding-interaction-label {
  font-weight: 700; color: #b45309; margin-right: .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
}

/* Risk cluster grouping */
.finding-cluster {
  margin-bottom: 1.25rem; border: 1px solid rgba(217,119,6,.25); border-radius: 10px; overflow: hidden;
}
.finding-cluster-header {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: rgba(245,158,11,.09); padding: .6rem 1rem; border-bottom: 1px solid rgba(217,119,6,.18);
}
.finding-cluster-name {
  font-weight: 800; font-size: .85rem; color: #92400e; letter-spacing: .01em;
}
.finding-cluster-count {
  font-size: .72rem; color: var(--color-text-muted); font-weight: 600;
}
.finding-cluster-risk {
  font-size: .8rem; color: var(--color-text-muted); padding: .45rem 1rem .35rem;
  background: rgba(245,158,11,.05); border-bottom: 1px solid rgba(217,119,6,.12);
  line-height: 1.55; font-style: italic;
}
.finding-cluster .finding-card { border-radius: 0; border-left: none; border-right: none; border-top: none; border-bottom: 1px solid var(--color-border-subtle); }
.finding-cluster .finding-card:last-child { border-bottom: none; }

/* Hypothesis mode memo */
.memo-hypothesis-notice {
  margin-bottom: var(--space-3); padding: .75rem 1rem;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: 8px;
  font-size: .82rem; line-height: 1.6; color: rgba(255,255,255,.7);
}

/* ════════════════════════════════════════════════════════════════════════════
   APPROVAL MEMO — Enhanced formal document
   ════════════════════════════════════════════════════════════════════════════ */

.memo-formal-header {
  background: var(--color-surface);
  border-top: 4px solid var(--color-navy-700);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  margin: 0 0 var(--space-3);
  position: relative;
}
.memo-formal-header-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  margin-bottom: .75rem;
}
.memo-formal-meta {
  display: flex; gap: .75rem; flex-wrap: wrap; align-items: center;
  font-size: .7rem;
}
.memo-classification {
  font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-surface); background: var(--color-navy-700);
  padding: .15rem .55rem; border-radius: var(--radius-pill);
  font-size: .65rem;
}
.memo-date { color: var(--color-text-muted); font-size: .72rem; }
.memo-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-muted); margin-bottom: .35rem;
}
.memo-system { color: var(--color-navy-900); margin-bottom: .2rem; }
.memo-org    { color: var(--color-text-muted); font-size: .88rem; margin: 0; }

.memo-risk-class {
  background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card); padding: var(--space-3); margin-bottom: var(--space-3);
}
.memo-risk-class-grid {
  display: flex; gap: 1.5rem; flex-wrap: wrap; margin: .5rem 0;
}
.memo-risk-item { display: flex; flex-direction: column; gap: .15rem; }
.memo-risk-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.memo-risk-val   { font-size: .95rem; font-weight: 700; color: var(--color-navy-700); }
.memo-risk-dims  { margin: .5rem 0 0; padding-left: 1.25rem; }
.memo-risk-dims li { font-size: .85rem; color: var(--color-text-strong); margin-bottom: .25rem; }

/* Top Risks list */
.memo-risk-list { list-style: none; padding: 0; margin: 0; }
.memo-risk-row  { margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--color-border-subtle); }
.memo-risk-row:last-child { border-bottom: none; }
.memo-risk-title { font-weight: 600; font-size: .88rem; color: var(--color-navy-700); display: block; }
.memo-risk-sev   { font-size: .72rem; font-weight: 700; text-transform: uppercase; margin-right: .5rem; }
.memo-risk-status { font-size: .72rem; }
.memo-risk-brief { font-size: .82rem; color: var(--color-text-muted); margin: .2rem 0 0; }

/* Controls list */
.memo-ctrl-list  { list-style: none; padding: 0; margin: 0; }
.memo-ctrl-row   { margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--color-border-subtle); }
.memo-ctrl-row:last-child { border-bottom: none; }
.memo-ctrl-desc  { font-size: .88rem; font-weight: 500; color: var(--color-navy-700); display: block; }
.memo-ctrl-adequacy { font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.memo-ctrl-note  { font-size: .8rem; color: var(--color-text-muted); margin: .15rem 0 0; }

/* Deployment conditions */
.memo-cond-list { list-style: none; padding: 0; margin: 0; }
.memo-cond-row  { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.memo-cond-num  {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-navy-700); color: white;
  font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: .1rem;
}
.memo-cond-body { flex: 1; }
.memo-cond-text { font-size: .9rem; font-weight: 500; color: var(--color-navy-700); margin-bottom: .2rem; }
.memo-cond-meta { font-size: .78rem; color: var(--color-text-muted); display: flex; gap: 1rem; flex-wrap: wrap; }

/* Signature block — approver line */
.memo-sig-approver-block {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--color-border);
}
.memo-sig-approver-line {
  border-bottom: 1px solid var(--color-text-muted); padding-bottom: .5rem;
  min-width: 280px; display: inline-block;
}
.memo-sig-approver-role { font-weight: 600; color: var(--color-navy-700); font-size: .85rem; }
.memo-sig-approver-label { font-size: .7rem; color: var(--color-text-muted); margin-top: .25rem; }

/* ════════════════════════════════════════════════════════════════════════════
   OUTPUT FOOTER — tracker download button
   ════════════════════════════════════════════════════════════════════════════ */

.out-footer {
  display: flex; gap: .75rem; flex-wrap: wrap;
  padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); margin-top: var(--space-3);
}

/* ════════════════════════════════════════════════════════════════════════════
   CHART ANIMATIONS
   ════════════════════════════════════════════════════════════════════════════ */

@keyframes barScaleX {
  from { transform: scaleX(0); }
}
@keyframes radarExpand {
  from { transform: scale(0); opacity: 0; }
}
@keyframes radarDotPop {
  from { transform: scale(0); opacity: 0; }
}
@keyframes gaugeNeedle {
  from { transform: rotate(0deg); }
  to   { transform: rotate(var(--nr, 0deg)); }
}
@keyframes donutDraw {
  from { stroke-dasharray: 0 var(--dc, 340); }
}
@keyframes donutFadeIn {
  from { opacity: 0; }
}

/* Bar fill animation — horizontal (applied to SVG <rect> fill bars and .ga-fn-bar-fill divs) */
.bar-anim {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: barScaleX 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-play-state: paused;
}
/* Bar fill animation — vertical (for column charts growing from the bottom) */
@keyframes barScaleY {
  from { transform: scaleY(0); }
}
.bar-anim-y {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: barScaleY 1.0s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-play-state: paused;
}
/* Radar polygon scale-in from centre */
.radar-anim {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: radarExpand 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
  animation-play-state: paused;
}
/* Radar data-point dot pop */
.radar-dot-anim {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: radarDotPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-play-state: paused;
}
/* Gauge needle — transform and animation handled via JS _animateNeedle()
   using SVG rotate(angle,cx,cy) to avoid CSS px vs SVG-user-unit mismatch */
/* Donut arc draw-in */
.donut-arc-anim {
  animation: donutDraw 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-play-state: paused;
}
/* Force-reset helper — applied briefly in JS to restart completed animations */
.anim-reset { animation: none !important; }
/* Scroll-triggered: resume animations when container receives .scroll-in-view */
[data-anim-container].scroll-in-view .bar-anim,
[data-anim-container].scroll-in-view .bar-anim-y,
[data-anim-container].scroll-in-view .donut-arc-anim,
[data-anim-container].scroll-in-view .radar-anim,
[data-anim-container].scroll-in-view .radar-dot-anim,
[data-anim-container].scroll-in-view .ga-fn-bar-fill { animation-play-state: running; }

/* ════════════════════════════════════════════════════════════════════════════
   CHART TOOLTIP
   ════════════════════════════════════════════════════════════════════════════ */

.chart-tooltip {
  display: none; position: fixed; z-index: 9999; pointer-events: none;
  background: #0c1e33;
  border: 1px solid rgba(94,224,197,0.2);
  border-radius: 10px;
  max-width: 230px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  font-family: var(--font-family-base);
}
.chart-tip-title {
  font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: #5ee0c5;
  padding: .44rem .76rem .18rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.chart-tip-body {
  font-size: .8rem; line-height: 1.52; color: #b8cedd;
  padding: .22rem .76rem .44rem;
  word-wrap: break-word;
}
.chart-tip-body:only-child { padding-top: .44rem; }

/* ════════════════════════════════════════════════════════════════════════════
   OVERVIEW — Flag density bars SVG
   ════════════════════════════════════════════════════════════════════════════ */

.ov-flags-svg {
  width: 100%; display: block; margin-top: .5rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   OVERVIEW — LLM-enhanced narrative slot
   ════════════════════════════════════════════════════════════════════════════ */

.ov-llm-slot {
  margin-bottom: var(--space-3);
}
.ov-llm-loading {
  padding: 1rem 1.25rem;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.ov-llm-card {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, var(--color-sky-100), var(--color-surface));
  border: 1px solid var(--color-sky-200);
  border-left: 4px solid var(--color-navy-500);
  border-radius: var(--radius-md);
}
.ov-llm-badge {
  display: inline-block; margin-bottom: .6rem;
  font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: var(--color-navy-500); background: var(--color-sky-200);
  padding: .15rem .55rem; border-radius: var(--radius-pill);
}
.ov-llm-narrative {
  font-size: .95rem; line-height: 1.7; color: var(--color-text-strong);
  margin: 0 0 1rem;
}
.ov-llm-risks-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted); margin-bottom: .5rem;
}
.ov-llm-risks {
  display: flex; flex-direction: column; gap: .5rem; margin-bottom: .85rem;
}
.ov-llm-risk {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .5rem .75rem; background: rgba(255,255,255,0.7);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm);
}
.ov-llm-risk-num {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-navy-700); color: white;
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: .1rem;
}
.ov-llm-risk-title  { font-size: .88rem; font-weight: 600; color: var(--color-navy-700); margin-bottom: .15rem; }
.ov-llm-risk-detail { font-size: .82rem; color: var(--color-text-muted); line-height: 1.5; }
.ov-llm-first-step {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .65rem .85rem;
  background: rgba(15,157,122,0.07); border: 1px solid rgba(15,157,122,0.2);
  border-radius: var(--radius-sm);
}
.ov-llm-first-step-label {
  flex-shrink: 0; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-success); padding-top: .1rem;
}
.ov-llm-first-step-text { font-size: .85rem; color: var(--color-text-strong); line-height: 1.55; }

/* ════════════════════════════════════════════════════════════════════════════
   FINDINGS — Risk heat map + severity donut charts
   ════════════════════════════════════════════════════════════════════════════ */

.findings-charts-row {
  display: flex; gap: 4rem; align-items: flex-start; justify-content: center; flex-wrap: wrap;
  margin-bottom: var(--space-3);
  padding: 1.75rem 2rem;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.findings-chart-block {
  flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start;
}
.findings-chart-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted); margin-bottom: .5rem;
}
.findings-heatmap-svg {
  width: 100%; max-width: 480px; display: block;
}
.findings-donut-svg {
  width: 100%; max-width: 200px; display: block;
}

/* ════════════════════════════════════════════════════════════════════════════
   ROADMAP — Swim-lane Gantt chart
   ════════════════════════════════════════════════════════════════════════════ */

.rm-gantt-wrap {
  margin-bottom: var(--space-3);
  padding: 1.25rem 1rem;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md); overflow-x: auto;
}
.rm-gantt-svg {
  width: 100%; min-width: 400px; display: block;
}

/* ════════════════════════════════════════════════════════════════════════════
   GAP ANALYSIS — Current-vs-target horizontal bars
   ════════════════════════════════════════════════════════════════════════════ */

.ga-bars-wrap {
  margin-bottom: var(--space-3);
  padding: 1.25rem 1.5rem;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.ga-bars-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted); margin-bottom: .6rem;
}
.ga-bars-svg {
  width: 100%; max-width: 580px; display: block;
}

/* ════════════════════════════════════════════════════════════════════════════
   RISK PROFILE — AI lifecycle pipeline + control dimension bars
   ════════════════════════════════════════════════════════════════════════════ */

.rp-visual-row {
  display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start;
  margin-bottom: var(--space-3);
  padding: 1.25rem 1.5rem;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.rp-visual-block {
  flex: 1; min-width: 200px;
}
.rp-visual-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted); margin-bottom: .6rem;
}
.rp-pipeline-svg {
  width: 100%; max-width: 560px; display: block;
}
.rp-dim-bars-svg {
  width: 100%; max-width: 280px; display: block;
}

/* ════════════════════════════════════════════════════════════════════════════
   MEMO — Review status badge (replaces authorization stamp)
   ════════════════════════════════════════════════════════════════════════════ */

.memo-status-wrap { display: flex; align-items: flex-end; justify-content: flex-end; }
.memo-status-badge {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .7rem 1.25rem; border-radius: 8px; text-align: center; min-width: 160px;
}
.memo-status-label {
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .65;
}
.memo-status-rec { font-size: .82rem; font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════════
   PREREQUISITES MODE — Governance Prerequisites Report
   ════════════════════════════════════════════════════════════════════════════ */

.prereq-not-met-banner {
  display: flex; gap: 1rem; align-items: flex-start;
  background: rgba(127,29,29,0.22); border: 1px solid rgba(239,68,68,0.45);
  border-left: 4px solid #ef4444; border-radius: 8px;
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.prereq-banner-icon {
  font-size: 1.6rem; line-height: 1; flex-shrink: 0; color: #f87171; margin-top: .1rem;
}
.prereq-banner-title {
  font-size: .88rem; font-weight: 700; color: #f87171; margin-bottom: .4rem;
}
.prereq-banner-text {
  font-size: .82rem; color: rgba(255,255,255,.72); line-height: 1.55;
}

.prereq-section {
  padding: 1.25rem 0;
}
.prereq-section-title {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-muted); margin-bottom: .75rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--color-border-subtle);
}
.prereq-contradiction, .prereq-explanation {
  font-size: .87rem; color: rgba(255,255,255,.8); line-height: 1.65;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle);
  border-radius: 8px; padding: .85rem 1rem;
}

.prereq-gaps { display: flex; flex-direction: column; gap: .75rem; }
.prereq-gap-card {
  background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle);
  border-radius: 8px; overflow: hidden;
}
.prereq-gap-header {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem; background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--color-border-subtle);
}
.prereq-gap-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: rgba(239,68,68,.2); color: #f87171;
  font-size: .7rem; font-weight: 800; flex-shrink: 0;
}
.prereq-gap-req {
  font-size: .85rem; font-weight: 700; color: var(--color-text-primary); flex: 1;
}
.prereq-gap-ref {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; color: var(--color-text-muted);
  background: rgba(255,255,255,.07); padding: .2rem .5rem; border-radius: 4px;
}
.prereq-gap-body { padding: .75rem 1rem; display: flex; flex-direction: column; gap: .45rem; }
.prereq-gap-row { display: flex; gap: .6rem; font-size: .82rem; line-height: 1.5; }
.prereq-gap-label {
  font-weight: 700; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; min-width: 100px;
}

.prereq-phases { display: flex; flex-direction: column; gap: 1rem; }
.prereq-phase {
  border-radius: 8px; border: 1px solid var(--color-border-subtle); overflow: hidden;
}
.prereq-phase-urgent { border-left: 3px solid #ef4444; }
.prereq-phase-build  { border-left: 3px solid #f59e0b; }
.prereq-phase-ready  { border-left: 3px solid #10b981; }
.prereq-phase-label {
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: .55rem 1rem; background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--color-border-subtle);
}
.prereq-phase-urgent .prereq-phase-label { color: #f87171; }
.prereq-phase-build  .prereq-phase-label { color: #fcd34d; }
.prereq-phase-ready  .prereq-phase-label { color: #6ee7b7; }
.prereq-phase-objective {
  font-size: .82rem; color: rgba(255,255,255,.65); padding: .55rem 1rem;
  border-bottom: 1px solid var(--color-border-subtle);
  font-style: italic;
}
.prereq-phase-actions { display: flex; flex-direction: column; gap: 0; }
.prereq-action-card {
  padding: .75rem 1rem; border-bottom: 1px solid var(--color-border-subtle);
}
.prereq-action-card:last-child { border-bottom: none; }
.prereq-action-title { font-size: .85rem; font-weight: 600; color: var(--color-text-primary); margin-bottom: .3rem; }
.prereq-action-meta { display: flex; gap: 1rem; margin-bottom: .3rem; flex-wrap: wrap; }
.prereq-action-owner, .prereq-action-output {
  font-size: .75rem; color: var(--color-text-muted);
}
.prereq-action-owner::before { content: '👤 '; }
.prereq-action-output::before { content: '📄 '; }
.prereq-action-rationale { font-size: .78rem; color: rgba(255,255,255,.55); font-style: italic; line-height: 1.45; }

.prereq-criteria { display: flex; flex-direction: column; gap: .5rem; }
.prereq-criterion {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .83rem; color: rgba(255,255,255,.78); line-height: 1.5;
}
.prereq-criterion-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 50%; flex-shrink: 0; margin-top: .05rem;
  background: rgba(16,185,129,.15); color: #6ee7b7;
  font-size: .68rem; font-weight: 800;
}
.prereq-time-est {
  margin-top: 1rem; padding: .75rem 1rem;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle);
  border-radius: 8px; font-size: .83rem; color: rgba(255,255,255,.78); line-height: 1.55;
}
.prereq-time-label { font-weight: 700; color: var(--color-text-muted); margin-right: .35rem; }

/* ── Assessment time estimate ── */
.assessment-time-est {
  font-size: .78rem; color: var(--color-text-muted); margin-bottom: .6rem;
  display: flex; align-items: center; gap: .35rem;
}

/* ── Section field count ── */
.section-field-count {
  font-size: .72rem; color: var(--color-text-muted); margin-left: .75rem;
  font-style: italic;
}

/* ── Conditional specify label ── */
.conditional-specify-label {
  display: block; font-size: .78rem; font-weight: 600; color: var(--color-text-muted);
  margin-bottom: .35rem; margin-top: .1rem;
}

/* ── Self-reported notice in Overview ── */
.ov-self-reported-notice {
  display: flex; gap: .65rem; align-items: flex-start;
  background: #e7f3fc; border: 1px solid #b0d4ee;
  border-left: 3px solid var(--color-navy-500);
  border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1.25rem;
  font-size: .82rem; color: var(--color-text-strong); line-height: 1.55;
}
.ov-sn-icon { font-size: 1rem; flex-shrink: 0; color: var(--color-navy-500); margin-top: .05rem; }
.ov-sn-body strong { color: var(--color-navy-700); }

/* ── "New" badge on tabs ── */
.out-tab-btn.has-new { position: relative; }
.out-tab-btn.has-new::after {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981; border: 1.5px solid var(--color-bg);
}

/* ── LLM source note ── */
.llm-source-note {
  font-size: .72rem; color: var(--color-text-muted); padding: .4rem .75rem;
  border-bottom: 1px solid var(--color-border-subtle); margin-bottom: .5rem;
  display: flex; align-items: center; gap: .35rem;
}

/* ── Paywall feature star ── */
.paywall-feature-star .paywall-feature-name { color: #fcd34d; }

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .section-nav { flex-wrap: wrap; gap: .3rem; }
  .section-nav-pill { font-size: .72rem; padding: .35rem .5rem; }
  .pill-label { display: none; }
  .form-row { flex-direction: column; }
  .ov-visual-card { flex-direction: column; }
  .ov-visual-divider { display: none; }
  .out-tabs { flex-wrap: wrap; }
  .out-tab-btn { font-size: .75rem; padding: .4rem .6rem; }
  .gc-axes { grid-template-columns: 1fr 1fr; }
  .adj-trace-items { overflow-x: auto; }
}
@media (max-width: 480px) {
  .container { padding: 0 .5rem; }
  .card-body { padding: 1rem; }
  .gc-axes { grid-template-columns: 1fr; }
  .pill-label { display: none; }
  .section-nav-pill { min-width: 2rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CORROBORATION UI — Evidence collection screen
   ════════════════════════════════════════════════════════════════════════════ */

.corr-wrapper {
  display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem 1.75rem;
}

/* Screen header */
.corr-screen-header {
  display: flex; gap: 1rem; align-items: flex-start;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border-subtle);
}
.corr-screen-icon {
  font-size: 1.75rem; line-height: 1; flex-shrink: 0; color: var(--color-primary); margin-top: .1rem;
}
.corr-screen-title {
  font-size: 1.1rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: .35rem;
}
.corr-screen-sub {
  font-size: .83rem; color: var(--color-text-muted); line-height: 1.6;
}

/* Claim panels */
.corr-claims { display: flex; flex-direction: column; gap: .75rem; }

.corr-claim-card {
  border: 1px solid var(--color-border-subtle); border-radius: 10px; overflow: hidden;
  background: var(--color-surface);
}
.corr-claim-card.is-collapsed .corr-claim-body { display: none; }
.corr-claim-card.is-collapsed .corr-claim-chevron { transform: rotate(-90deg); }

.corr-claim-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; cursor: pointer; user-select: none;
  background: rgba(255,255,255,.03);
  transition: background .15s;
}
.corr-claim-header:hover { background: rgba(255,255,255,.06); }

.corr-claim-left { display: flex; align-items: flex-start; gap: .75rem; flex: 1; min-width: 0; }

.corr-claim-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; flex-shrink: 0;
  background: rgba(var(--color-primary-rgb, 99,102,241),.15);
  color: var(--color-primary); font-size: .72rem; font-weight: 800; margin-top: .1rem;
}

.corr-claim-info { min-width: 0; }
.corr-claim-label {
  font-size: .88rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: .15rem;
}
.corr-claim-summary {
  font-size: .78rem; color: var(--color-text-muted); line-height: 1.4;
}

.corr-claim-chevron {
  color: var(--color-text-muted); font-size: .7rem; flex-shrink: 0;
  transition: transform .2s; margin-left: .5rem;
}

/* Claim body / fields */
.corr-claim-body {
  padding: 1rem 1rem .75rem;
  border-top: 1px solid var(--color-border-subtle);
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.25rem;
}
@media (max-width: 640px) { .corr-claim-body { grid-template-columns: 1fr; } }

.corr-field { display: flex; flex-direction: column; gap: .3rem; }
/* Radio fields span both columns */
.corr-field:has(.corr-radio-group) { grid-column: 1 / -1; }

.corr-field-label {
  font-size: .75rem; font-weight: 600; color: var(--color-text-muted);
}

.corr-input, .corr-select {
  padding: .45rem .65rem; border-radius: 6px; font-size: .83rem;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary); width: 100%;
}
.corr-input:focus, .corr-select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 99,102,241),.15);
}

.corr-radio-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.corr-radio-item {
  display: flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .3rem .7rem; border-radius: 20px;
  border: 1px solid var(--color-border-subtle);
  font-size: .8rem; color: var(--color-text-muted);
  transition: border-color .15s, background .15s;
}
.corr-radio-item:hover { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb,99,102,241),.06); }
.corr-radio-item input[type="radio"] { display: none; }
.corr-radio-item:has(input:checked) {
  border-color: var(--color-primary); background: rgba(var(--color-primary-rgb,99,102,241),.12);
  color: var(--color-text-primary); font-weight: 600;
}

/* Upload area */
.corr-upload-area {
  display: flex; flex-direction: column; gap: .35rem;
  padding-top: .5rem; border-top: 1px dashed var(--color-border-subtle);
  margin-top: .25rem;
}
.corr-upload-label {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font-size: .78rem; color: var(--color-text-muted);
  padding: .3rem .6rem; border-radius: 6px; border: 1px dashed var(--color-border-subtle);
  width: fit-content; transition: border-color .15s, color .15s;
}
.corr-upload-label:hover { border-color: var(--color-primary); color: var(--color-text-primary); }
.corr-upload-icon { font-size: .9rem; }
.corr-upload-optional { color: var(--color-text-muted); font-style: italic; }
.corr-file-input { display: none; }
.corr-upload-status { font-size: .75rem; min-height: 1rem; }
.corr-upload-analyzing { color: var(--color-text-muted); }
.corr-upload-ok   { color: #10b981; font-weight: 600; }
.corr-upload-warn { color: #f59e0b; }
.corr-upload-err  { color: #ef4444; }

/* Footer */
.corr-footer {
  display: flex; gap: .75rem; align-items: center;
  padding-top: .75rem; border-top: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   AI ORB LOADING ANIMATION
   ════════════════════════════════════════════════════════════════════════════ */

.ai-orb-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 420px;
}
.ai-tier-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 300px; padding: 2.5rem 2rem; text-align: center;
  background: linear-gradient(135deg, var(--color-sky-100) 0%, var(--color-surface) 100%);
  border-radius: 16px; border: 1px solid rgba(34,110,165,.1);
  width: 100%; max-width: 480px; margin: 0 auto;
}
.ai-tier-loading.hidden { display: none; }
.ai-tier-loading-text {
  font-size: 1.05rem; font-weight: 700; color: var(--color-navy-700);
  margin: 1rem 0 .4rem; letter-spacing: -.01em;
}
.ai-tier-loading-sub { font-size: .88rem; color: var(--color-text-muted); margin: 0; }

.ai-orb { position: relative; width: 80px; height: 80px; margin: 0 auto 1.5rem; flex-shrink: 0; }
.ai-orb-sm { width: 44px; height: 44px; margin: 0; }

.ai-orb-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-navy-500), var(--color-navy-700));
  box-shadow: 0 0 20px rgba(34,110,165,.6), 0 0 40px rgba(34,110,165,.3);
  animation: orbPulse 2s ease-in-out infinite;
}
.ai-orb-sm .ai-orb-core { width: 14px; height: 14px; }

.ai-orb-ring {
  position: absolute; top: 50%; left: 50%;
  border: 2px solid transparent; border-top-color: var(--color-navy-400);
  border-radius: 50%; opacity: .6;
}
.ai-orb-ring-1 { width: 40px; height: 40px; margin: -20px 0 0 -20px; animation: orbSpin 2s linear infinite; }
.ai-orb-ring-2 { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-top-color: var(--color-navy-300); animation: orbSpin 3s linear infinite reverse; }
.ai-orb-ring-3 { width: 72px; height: 72px; margin: -36px 0 0 -36px; border-top-color: var(--color-navy-200); border-right-color: var(--color-navy-200); animation: orbSpin 4s linear infinite; }
.ai-orb-sm .ai-orb-ring-1 { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.ai-orb-sm .ai-orb-ring-2 { width: 31px; height: 31px; margin: -15.5px 0 0 -15.5px; }
.ai-orb-sm .ai-orb-ring-3 { display: none; }

.ai-particles { position: absolute; inset: 0; }
.ai-particles span {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-navy-400); opacity: 0; animation: particleFloat 3s ease-in-out infinite;
}
.ai-particles span:nth-child(1){top:10%;left:50%;animation-delay:0s;--tx:-5;--ty:10;}
.ai-particles span:nth-child(2){top:25%;left:85%;animation-delay:.4s;--tx:-10;--ty:5;}
.ai-particles span:nth-child(3){top:50%;left:95%;animation-delay:.8s;--tx:-10;--ty:0;}
.ai-particles span:nth-child(4){top:75%;left:85%;animation-delay:1.2s;--tx:-10;--ty:-5;}
.ai-particles span:nth-child(5){top:90%;left:50%;animation-delay:1.6s;--tx:-5;--ty:-10;}
.ai-particles span:nth-child(6){top:75%;left:15%;animation-delay:2s;--tx:10;--ty:-5;}
.ai-particles span:nth-child(7){top:50%;left:5%;animation-delay:2.4s;--tx:10;--ty:0;}
.ai-particles span:nth-child(8){top:25%;left:15%;animation-delay:2.8s;--tx:10;--ty:5;}

@keyframes orbPulse {
  0%,100% { transform:translate(-50%,-50%) scale(1); box-shadow:0 0 20px rgba(34,110,165,.6),0 0 40px rgba(34,110,165,.3); }
  50% { transform:translate(-50%,-50%) scale(1.15); box-shadow:0 0 30px rgba(34,110,165,.8),0 0 60px rgba(34,110,165,.4); }
}
@keyframes orbSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes particleFloat {
  0%,100% { opacity:0; transform:translate(0,0) scale(.5); }
  50% { opacity:.8; transform:translate(calc(var(--tx,0)*1px),calc(var(--ty,0)*1px)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-orb-core, .ai-orb-ring, .ai-particles span { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MEMO STAMP — Animated round authorization stamp
   ════════════════════════════════════════════════════════════════════════════ */

.memo-stamp {
  width: 110px; height: 110px; position: relative;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.memo-stamp-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid currentColor; opacity: .6;
  /* animation added by .memo-stamp-active */
}
.memo-stamp-ring::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 1.5px dashed currentColor; opacity: .45;
}
.memo-stamp-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 86px; height: 86px; border-radius: 50%;
  border: 2px solid currentColor;
  text-align: center; padding: .3rem;
  /* animation added by .memo-stamp-active */
}
/* Triggered by JS when memo tab activates */
.memo-stamp-active .memo-stamp-ring,
.memo-stamp-active .memo-stamp-body {
  animation: stampDrop .6s cubic-bezier(0.22,1,0.36,1) both;
}
.memo-stamp-active .memo-stamp-body { animation-delay: .05s; }
.memo-stamp-top {
  font-size: .52rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7;
}
.memo-stamp-icon { font-size: 1.1rem; line-height: 1; margin: .1rem 0; }
.memo-stamp-rec {
  font-size: .5rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.2; opacity: .9;
}
.memo-stamp-bot {
  font-size: .48rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .6;
  margin-top: .1rem;
}
.memo-stamp-success { color: #16a34a; }
.memo-stamp-warning { color: #d97706; }
.memo-stamp-danger  { color: #dc2626; }

@keyframes stampDrop {
  0%   { transform: translateY(-28px) scale(1.15); opacity: 0; }
  55%  { transform: translateY(3px) scale(0.97);   opacity: 1; }
  75%  { transform: translateY(-2px) scale(1.01);  opacity: 1; }
  100% { transform: translateY(0) scale(1);        opacity: 1; }
}