/* ============================================================ */
/* Tessera Sigma — checkout UI styles                            */
/* ------------------------------------------------------------ */
/* Editorial / research-journal aesthetic. The auto-renewal     */
/* acknowledgement (.ack-box--prominent) is deliberately given  */
/* a distinct treatment from the other two boxes to satisfy     */
/* counsel's "visually prominent" requirement (Build Spec §2).  */
/* ============================================================ */

:root {
  /* Tessera Sigma REPORT palette, adopted site-wide (source of truth:
     Specimen Report v5 / report_template_v5.html). Dark ground, purple
     accent, serif type. Token NAMES are kept for minimal churn but now
     hold the report values. */
  --bg-paper:       #0f1320;   /* page background */
  --bg-paper-deep:  #171c2e;   /* panel / card / inset background */
  --ink:            #ffffff;   /* headings */
  --ink-soft:       #e8eaf0;   /* body text (15:1 on the dark ground) */
  --rule:           #2a3047;   /* borders / dividers */
  /* Secondary/muted text: LIGHTENED from the report's #9aa0b4 to #b3b9cc
     so labels + secondary copy clear WCAG AA (>=4.5:1) on BOTH the page
     (#0f1320, 9.5:1) and panels (#171c2e, 8.6:1). The accent + dark theme
     are unchanged — AA is met by lightening text, per spec. */
  --slate:          #b3b9cc;
  --ochre:          #5B3FA8;   /* brand purple accent (borders/buttons; never text) */
  --ochre-deep:     #7c5cd6;   /* lighter accent — borders / hover / focus rings */
  --ochre-tint:     rgba(124,92,214,0.16);  /* faint accent wash */
  --link:           #9d8cee;   /* link/anchor TEXT — lighter purple, AA at body size (6.5:1) */
  --crimson:        #f46b6b;   /* error / danger, lightened for the dark ground */

  /* Legal-prominence highlight — bright treatment RESERVED for
     consumer-law / compliance elements (the checkout consent boxes, and
     any not-advice / risk-warning callouts). Neon-green border + faint
     light-green wash so these are conspicuous, not blended into the dark
     theme. Everything else uses the dark+purple palette above. */
  --legal-border:   #3FE08A;                 /* bright/neon green border */
  --legal-bg:       rgba(63,224,138,0.10);   /* light-green tint */
  --legal-bg-2:     rgba(63,224,138,0.17);   /* checked / active tint */
  --legal-accent:   #9dffce;                 /* bright label inside legal boxes (14:1) */
  /* Success (review released) reuses the same green family. */
  --ok-bg:          rgba(63,207,142,0.12);
  --ok-border:      #3FCF8E;

  /* Type — serif (Georgia) for headings + body, monospace for data lines,
     matching the report. (No generic sans defaults — brand guard.) */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body:    Georgia, "Times New Roman", serif;
  --font-mono:    Consolas, "SF Mono", "Courier New", monospace;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--bg-paper);
  /* subtle dark-purple ambient wash — purely decorative, very light */
  background-image:
    radial-gradient(circle at 12% 6%, rgba(124,92,214,0.10) 0, transparent 42%),
    radial-gradient(circle at 90% 0%, rgba(91,63,168,0.10) 0, transparent 40%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ochre); color: #ffffff; }

/* ---------------------------------------------------------------- */
/* Page scaffolding                                                  */
/* ---------------------------------------------------------------- */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
  animation: page-fade-in 480ms cubic-bezier(.22,.61,.36,1) both;
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-header {
  text-align: left;
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-7);
}

.sigma-mark {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ochre-deep);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.page-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.1rem;
  letter-spacing: -0.018em;
  margin: 0 0 var(--space-2) 0;
  color: var(--ink);
}

.page-subtitle {
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--slate);
  margin: 0;
  letter-spacing: 0.005em;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 var(--space-4) 0;
}

/* ---------------------------------------------------------------- */
/* Order summary                                                     */
/* ---------------------------------------------------------------- */

.order-summary {
  margin-bottom: var(--space-7);
  padding: var(--space-5) var(--space-5);
  background: var(--bg-paper-deep);
  border: 1px solid var(--rule);
  border-radius: 2px;
  animation: page-fade-in 600ms 80ms cubic-bezier(.22,.61,.36,1) both;
}

.summary-list { margin: 0; padding: 0; }

.summary-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--rule);
  margin: 0;
}
.summary-row:last-child { border-bottom: 0; }

.summary-row dt {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  align-self: start;
  padding-top: 0.18rem;
}
.summary-row dd {
  margin: 0;
  color: var(--ink);
  font-weight: 400;
}

/* ---------------------------------------------------------------- */
/* Acknowledgements section                                          */
/* ---------------------------------------------------------------- */

.acknowledgements {
  margin-bottom: var(--space-7);
  animation: page-fade-in 600ms 140ms cubic-bezier(.22,.61,.36,1) both;
}

.ack-intro {
  color: var(--slate);
  font-size: 0.92rem;
  margin: -0.25rem 0 var(--space-5) 0;
  padding-left: 0.6rem;
  border-left: 2px solid var(--rule);
}

/* ─── Consent boxes — LEGAL-PROMINENCE highlight ─────────────── */
/* These are consumer-law / compliance controls (Terms+Privacy,
   immediate-performance, and — for subscriptions — auto-renewal).
   Counsel requires them to be visually conspicuous, NOT blended into
   the dark theme. So ALL consent boxes get the bright highlight: a
   neon-green border + a light-green background tint, distinct from the
   ordinary dark+purple panels around them. The auto-renewal box keeps
   the EXTRA prominence (banner + thicker border + larger control).   */

.ack-box {
  border: 1.5px solid var(--legal-border);
  border-radius: 3px;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--legal-bg);
  transition: border-color 200ms, background 200ms, box-shadow 200ms;
}

.ack-box:hover { box-shadow: 0 0 0 1px var(--legal-border); }
.ack-box:has(input:checked) { background: var(--legal-bg-2); }

.ack-box[data-box-id="immediate_performance"] {
  /* Thicker left edge so it reads as its own separate control, not a
     continuation of the Terms+Privacy box above it. */
  border-left-width: 4px;
}

.ack-legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.005em;
  color: var(--legal-accent);   /* bright label so the box's PURPOSE is unmissable */
  padding: 0 0.5rem;
  margin-left: -0.25rem;
}

.ack-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.ack-checkbox {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.3rem;
  accent-color: var(--legal-border);
  flex-shrink: 0;
}

.ack-bullets {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.ack-bullets li { margin-bottom: var(--space-2); }
.ack-bullets li:last-child { margin-bottom: 0; }

/* ─── PROMINENT BOX (Box 3 — subscription auto-renewal) ──────── */
/* THE COUNSEL-REQUIRED EXTRA DISTINGUISHER. On top of the shared
   bright highlight, this box adds: a labelled top banner naming the
   acknowledgement type, a thicker top border, a larger checkbox, a
   larger heading, and extra top margin so it sits visibly apart. The
   banner TEXT carries "AUTO-RENEWAL ACKNOWLEDGEMENT" as a substring so
   the prominence assertion in test_checkout_ui survives.            */

.ack-prominent__banner {
  margin-top: var(--space-7);
  margin-bottom: -1px;
  background: var(--legal-bg-2);
  color: var(--legal-accent);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 0.55rem var(--space-5);
  border: 1.5px solid var(--legal-border);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}

.ack-box--prominent {
  border: 1.5px solid var(--legal-border);
  border-top-width: 4px;
  border-radius: 0 0 3px 3px;
  background: var(--legal-bg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  position: relative;
}

.ack-legend--prominent {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.16rem;
  color: var(--legal-accent);
  padding: 0 0.5rem;
}

.ack-checkbox--prominent {
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0.22rem;
  accent-color: var(--legal-border);
  cursor: pointer;
}

.ack-box--prominent .ack-bullets {
  font-size: 1.0rem;
  color: var(--ink-soft);
  font-weight: 400;
  padding-left: var(--space-5);
}

.ack-box--prominent .ack-bullets li {
  margin-bottom: var(--space-3);
}

/* When checked, the highlight intensifies (it stays conspicuous —
   it does NOT quiet down, since the obligation persists). */
.ack-box--prominent:has(input:checked) {
  background: var(--legal-bg-2);
}
.ack-box--prominent:has(input:checked) .ack-prominent__banner {
  background: var(--legal-border);
  color: #0c1a12;   /* dark ink on the bright-green band — high contrast */
}

/* ─── Reusable legal-prominence callout ──────────────────────── */
/* Same bright highlight, for any "What this is / isn't", "not advice /
   not a recommendation", or risk-warning / disclaimer panel in the
   customer journey. Apply class="legal-callout" to such a panel so it
   gets the conspicuous treatment instead of blending into the theme. */
.legal-callout {
  border: 1.5px solid var(--legal-border);
  border-left-width: 4px;
  border-radius: 3px;
  background: var(--legal-bg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  color: var(--ink-soft);
}
.legal-callout__label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--legal-accent);
  margin: 0 0 var(--space-2) 0;
}

/* ---------------------------------------------------------------- */
/* Card / Stripe Elements                                             */
/* ---------------------------------------------------------------- */

.card-block {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  background: var(--bg-paper-deep);
  animation: page-fade-in 600ms 200ms cubic-bezier(.22,.61,.36,1) both;
}

.card-block__legend {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  padding: 0 0.5rem;
}

.card-block__note {
  font-size: 0.88rem;
  color: var(--slate);
  margin: 0 0 var(--space-4) 0;
  font-style: italic;
}

.card-element {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--space-3) var(--space-4);
  min-height: 2.6rem;
  font-family: var(--font-mono);
}

.card-element--mock {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
  background: repeating-linear-gradient(
    45deg,
    var(--bg-paper) 0 8px,
    rgba(255,255,255,0.03) 8px 16px
  );
  padding: var(--space-4);
}
.card-element--mock label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card-element--mock select {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  padding: var(--space-2);
  border: 1px solid var(--rule);
  background: var(--bg-paper);
  margin-top: var(--space-1);
}
.card-element--mock__banner {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  color: var(--crimson);
  background: rgba(244,107,107,0.10);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--crimson);
  margin-bottom: var(--space-2);
}

.card-errors {
  color: var(--crimson);
  font-size: 0.88rem;
  margin-top: var(--space-2);
  min-height: 1.2rem;
}

/* ---------------------------------------------------------------- */
/* Submit button                                                     */
/* ---------------------------------------------------------------- */

.submit-btn {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: -0.005em;
  background: var(--ochre);
  color: #ffffff;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background 200ms, transform 100ms;
  margin-bottom: var(--space-3);
}

.submit-btn:hover:not([disabled]) { background: var(--ochre-deep); }
.submit-btn:active:not([disabled]) { transform: translateY(1px); }

.submit-btn[disabled] {
  background: #2a3047;
  color: #6b7185;
  cursor: not-allowed;
}

.submit-note {
  font-size: 0.86rem;
  color: var(--slate);
  text-align: center;
  margin: 0;
}

/* ---------------------------------------------------------------- */
/* Confirmation page                                                 */
/* ---------------------------------------------------------------- */

.confirmation-card,
.cancellation-card,
.manage-card {
  padding: var(--space-6);
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg-paper-deep);
  animation: page-fade-in 480ms cubic-bezier(.22,.61,.36,1) both;
}

.confirmation-title,
.cancellation-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0 0 var(--space-4) 0;
  color: var(--ink);
}

.confirmation-status,
.cancellation-body {
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin: 0 0 var(--space-5) 0;
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--space-5) 0; }

.email-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0 0 var(--space-3) 0;
}
.email-subject {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  margin: 0 0 var(--space-3) 0;
}
.email-body {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  background: var(--bg-paper-deep);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--space-4);
  margin: 0;
  white-space: pre-wrap;
  color: var(--ink-soft);
  overflow-x: auto;
}
.mono { font-family: var(--font-mono); color: var(--slate); }

/* ---------------------------------------------------------------- */
/* Cancellation                                                       */
/* ---------------------------------------------------------------- */

.cancellation-followup {
  font-size: 0.92rem;
  color: var(--slate);
  margin: var(--space-4) 0 0 0;
  font-style: italic;
}

.cancel-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.12rem;
  margin: 0 0 var(--space-3) 0;
}
.cancel-explainer {
  font-size: 0.94rem;
  color: var(--ink-soft);
  margin: 0 0 var(--space-4) 0;
}
.cancel-btn {
  background: var(--crimson);
  color: var(--bg-paper);
  border: 0;
  border-radius: 2px;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  cursor: pointer;
  transition: background 200ms;
}
.cancel-btn:hover { background: #d65550; }

/* ---------------------------------------------------------------- */
/* Responsive                                                         */
/* ---------------------------------------------------------------- */

/* ============================================================ */
/* Phase 5 — auth + dashboard surfaces                           */
/* ============================================================ */

.page--auth { max-width: 460px; }

.login-card {
  padding: var(--space-6);
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg-paper-deep);
}

.login-intro {
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin: 0 0 var(--space-4) 0;
}

.login-error {
  background: rgba(244,107,107,0.10);
  border-left: 3px solid var(--crimson);
  padding: var(--space-3) var(--space-4);
  color: var(--crimson);
  font-size: 0.92rem;
  margin: 0 0 var(--space-4) 0;
}

.login-form { display: block; }

.login-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin-bottom: var(--space-2);
}

.login-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg-paper);
  color: var(--ink);
  margin-bottom: var(--space-4);
  box-sizing: border-box;
}
.login-input:focus { outline: 2px solid var(--ochre); outline-offset: -1px; }

.login-fine-print {
  margin-top: var(--space-5);
  font-size: 0.84rem;
  color: var(--slate);
}
.login-fine-print a { color: var(--link); }

.dev-link__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--crimson);
  margin: var(--space-3) 0 var(--space-2) 0;
}
.dev-link a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  word-break: break-all;
  color: var(--link);
}

/* ── Dashboard ─────────────────────────────────────────────── */

.page--dashboard { max-width: 960px; }

.dashboard-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
}
.dashboard-header .sigma-mark { margin-bottom: 0; }
.dashboard-header__text h1 { margin: 0; }
.dashboard-header__text .page-subtitle { margin-top: var(--space-1); }

.dashboard-logout { margin: 0; }
.dashboard-logout__btn {
  background: transparent;
  color: var(--slate);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.92rem;
  cursor: pointer;
}
.dashboard-logout__btn:hover {
  border-color: var(--slate);
  color: var(--ink);
}

.dashboard-section { margin-bottom: var(--space-7); }
.dashboard-section--quiet { color: var(--slate); font-size: 0.94rem; }

.dashboard-empty {
  color: var(--slate);
  font-style: italic;
  padding: var(--space-5) 0;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.dashboard-table th,
.dashboard-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.dashboard-table th {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  font-weight: 500;
  background: var(--bg-paper-deep);
}
.dashboard-table .status { color: var(--ink); }
.dashboard-table td.mono { font-family: var(--font-mono); font-size: 0.84rem; color: var(--slate); }

.dashboard-download {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  background: var(--ochre);
  color: #ffffff;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  text-decoration: none;
}
.dashboard-download:hover { background: var(--ochre-deep); }

.dashboard-pending {
  font-size: 0.86rem;
  color: var(--slate);
  font-style: italic;
}

/* ============================================================ */
/* Phase 6 — supervised-review reviewer interface                */
/* ============================================================ */

.page--review { max-width: 880px; }

.review-state {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-4) 0;
}
.review-released {
  background: var(--ok-bg);
  border-left: 3px solid var(--ok-border);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4) 0;
  font-size: 0.94rem;
}

.review-section {
  padding: var(--space-5) var(--space-5);
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg-paper-deep);
  margin-bottom: var(--space-5);
}
.review-section__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.12rem;
  margin: 0 0 var(--space-3) 0;
  color: var(--ink);
}
.review-quote {
  color: var(--ink-soft);
  font-size: 0.96rem;
  margin: 0 0 var(--space-3) 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--rule);
}
.review-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.review-guard--ok       { color: var(--ink); margin-bottom: var(--space-2); }
.review-guard--tripped  {
  color: var(--crimson);
  background: rgba(244,107,107,0.10);
  border-left: 3px solid var(--crimson);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.review-detail {
  font-size: 0.88rem;
  color: var(--slate);
}

.review-evidence {
  margin: var(--space-3) 0;
  border: 1px dashed var(--rule);
  padding: var(--space-3);
  background: var(--bg-paper-deep);
}
.review-evidence summary {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  cursor: pointer;
}
.review-evidence__detail {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin: var(--space-3) 0 0 0;
  white-space: pre-wrap;
  color: var(--ink-soft);
}

.review-confirm {
  display: block;
  margin: var(--space-3) 0;
  font-size: 0.96rem;
  color: var(--ink);
}
.review-confirm input[type=checkbox] {
  margin-right: var(--space-2);
  transform: scale(1.15);
}
.review-notes {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.92rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg-paper);
  box-sizing: border-box;
}
.review-prior {
  font-size: 0.84rem;
  color: var(--slate);
  font-style: italic;
  margin: var(--space-2) 0;
}

.review-judgement {
  margin-bottom: var(--space-4);
}

.review-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-4) 0;
}
.review-action--release { flex: 1; }
.review-action--hold,
.review-action--decline {
  background: transparent;
  color: var(--slate);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.96rem;
  cursor: pointer;
}
.review-action--hold:hover    { color: var(--ink); border-color: var(--slate); }
.review-action--decline:hover { color: var(--crimson); border-color: var(--crimson); }
.review-action--release:disabled,
.review-action--release[disabled] {
  background: #2a3047;
  color: #6b7185;
  cursor: not-allowed;
}

.review-refusal {
  background: rgba(244,107,107,0.10);
  border: 1px solid var(--crimson);
  border-left-width: 4px;
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.review-refusal h3 { margin: 0 0 var(--space-3) 0; color: var(--crimson); }
.review-refusal pre {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  white-space: pre-wrap;
  color: var(--ink);
  margin: 0;
}
.review-success {
  background: var(--ok-bg);
  border-left: 3px solid var(--ok-border);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.review-fineprint {
  font-size: 0.86rem;
  color: var(--slate);
  margin: var(--space-3) 0 0 0;
}

@media (max-width: 560px) {
  .page { padding: var(--space-5) var(--space-4); }
  .summary-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .summary-row dt { font-size: 0.72rem; }
  .ack-box--prominent { padding: var(--space-5) var(--space-4); }
}