/* ==========================================================================
   checkout.css — checkout.html and payment-status.html

   Two pages, one stylesheet, because they tell one story: the payment gateway
   is out of service, checkout says so honestly and offers preview access, and
   the status board explains it in public.

   Page-scoped only. Every value comes from css/tokens.css. The `.co-*` and
   `.st-*` classes below either wrap a shared component or stand entirely on
   their own. The two exceptions, both marked in place, are contrast repairs on
   shared classes and the card-collapse fixes for the two tables — nothing else
   from css/components.css or css/layout.css is restyled here.
   ========================================================================== */

/* ==========================================================================
   PART ONE — checkout.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.co-stepper { margin-top: var(--space-6); }

.co-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.co-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

/* While the attempt is in flight the whole form is inert and dimmed. */
.co-form.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Numbered panels
   -------------------------------------------------------------------------- */
.co-panel { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }

.co-panel-head { align-items: center; }

.co-panel-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  color: var(--primary-soft-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.co-panel-head .stack { flex: 1; min-width: 0; }

.co-panel-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.co-panel-sub {
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

.co-panel-badge {
  flex: 0 0 auto;
  gap: var(--space-2);
}

.co-panel-badge > svg {
  width: 0.95rem;
  height: 0.95rem;
}

@media (max-width: 640px) {
  .co-panel-badge { display: none; }
}

.co-panel-body { gap: var(--space-5); }

/* The payment panel hosts the processing overlay, so it is the containing
   block for it. */
.co-panel-pay { position: relative; }

/* --------------------------------------------------------------------------
   Legibility
   --text-subtle measures 3.7:1 on white and 4.4:1 on --surface-2, so shared
   components that use it fall short of 4.5:1 in both themes. Nothing on a
   billing form is optional reading: hold every hint at --text-muted until the
   token itself is retuned in css/tokens.css.
   -------------------------------------------------------------------------- */
.co-panel .field-hint,
.co-panel .field-optional,
.co-panel .checkbox-hint,
.co-invoice thead th,
.co-invoice .invoice-item-meta,
.co-stepper .step-hint {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Field labels
   The shared .field-label spaces its children apart so an "Optional" tag can
   sit flush right. A required marker is part of the label, so on this page the
   row packs left and only .field-optional is pushed to the far edge.
   -------------------------------------------------------------------------- */
.co-panel .field-label,
.co-panel legend.field-label {
  justify-content: flex-start;
  gap: var(--space-1);
}

.co-panel .field-label .field-optional { margin-left: auto; }

/* --------------------------------------------------------------------------
   Method tabs
   -------------------------------------------------------------------------- */
.co-methods { padding: var(--card-pad); }

/* The tab strip runs edge to edge inside the panel padding. */
.co-tabs { margin-inline: calc(var(--card-pad) * -1); padding-inline: var(--card-pad); }

.co-tab-panel { min-width: 0; }

.co-sub-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.co-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Card — number field, detected network mark, expiry row
   -------------------------------------------------------------------------- */
.co-card-control .input {
  padding-right: 8.5rem;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
}

.co-card-control .input::placeholder {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
}

.co-brand {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.co-brand-slot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  animation: co-brand-in var(--dur-base) var(--ease-out);
}

.co-brand-slot:empty {
  padding: 0;
  border: 0;
  background: none;
}

@keyframes co-brand-in {
  from { opacity: 0; transform: translateX(0.35rem); }
  to   { opacity: 1; transform: none; }
}

.co-brand-art {
  width: 2.1rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.co-brand-name {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  color: var(--text-muted);
}

.co-brand-slot[data-network="visa"],
.co-brand-slot[data-network="mastercard"],
.co-brand-slot[data-network="rupay"],
.co-brand-slot[data-network="amex"],
.co-brand-slot[data-network="diners"] {
  color: var(--primary);
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.co-brand-slot[data-network] .co-brand-name { color: var(--primary-soft-text); }

@media (max-width: 480px) {
  .co-card-control .input,
  .co-card-control .input::placeholder { letter-spacing: var(--tracking-normal); }
  .co-card-control .input { padding-right: 4rem; }
  .co-brand-name { display: none; }
}

.co-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.co-card-row .input {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
}

@media (max-width: 560px) {
  .co-card-row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   UPI — id field with a verify affordance
   -------------------------------------------------------------------------- */
.co-verify-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.co-verify-row .field-control { flex: 1; min-width: 0; }

.co-verify-row .btn { flex: 0 0 auto; }

.co-verify-msg {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

.co-verify-msg:empty { display: none; }

.co-verify-msg.is-error { color: var(--danger); }

.co-upi-apps { min-width: 0; }

@media (max-width: 480px) {
  .co-verify-row { flex-direction: column; }
  .co-verify-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Net banking — bank picker grid with hand-drawn neutral marks
   -------------------------------------------------------------------------- */
.co-bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--space-3);
}

.co-bank {
  display: block;
  min-width: 0;
  cursor: pointer;
}

.co-bank input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.co-bank-face {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h-lg);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.co-bank:hover .co-bank-face {
  border-color: var(--primary-border);
  background: var(--surface-2);
}

.co-bank input:checked + .co-bank-face {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: var(--shadow-xs);
}

.co-bank input:focus-visible + .co-bank-face { box-shadow: var(--ring); }

.co-bank-mark {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--text-subtle);
}

.co-bank input:checked + .co-bank-face .co-bank-mark { color: var(--primary); }

.co-bank-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  min-width: 0;
}

.co-bank input:checked + .co-bank-face .co-bank-name { color: var(--primary-soft-text); }

/* --------------------------------------------------------------------------
   EMI — tenure table
   -------------------------------------------------------------------------- */
.co-emi-table { margin: 0; }

.co-emi-table caption {
  caption-side: bottom;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: left;
  line-height: var(--lh-base);
}

.co-emi-radio { padding: 0; }

.co-emi-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
  cursor: pointer;
}

.co-emi-rate {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

.co-emi-table tbody tr:has(input:checked) { background: var(--primary-soft); }

.co-emi-table tbody tr:has(input:checked) .co-emi-label { color: var(--primary-soft-text); }

/* Under 720px .table-collapse turns the table into a block, which strands the
   caption in a shrink-wrapped column about ten characters wide. Give it the
   full width back and let it lead the cards. */
@media (max-width: 720px) {
  .co-emi-table caption {
    display: block;
    width: 100%;
    caption-side: top;
    padding: 0 0 var(--space-3);
  }

  /* .table td.shrink is width:1%, which collapses to a couple of pixels once
     the row becomes a block. Card mode needs the full row back, with the radio
     sitting where every other value in the card sits. */
  .co-emi-table td.shrink {
    width: auto;
    padding-bottom: 0;
  }
  .co-emi-table td.shrink .co-emi-radio { margin-left: auto; }
  .co-emi-table td.shrink + td { border-top: 0; padding-top: var(--space-2); }
}

/* --------------------------------------------------------------------------
   Pay bar
   -------------------------------------------------------------------------- */
.co-pay-bar {
  justify-content: space-between;
  gap: var(--space-4);
}

.co-pay-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.co-pay-total {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}

.co-pay-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

.co-pay-btn { flex: 0 0 auto; }

@media (max-width: 560px) {
  .co-pay-bar { flex-direction: column; align-items: stretch; }
  .co-pay-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Processing overlay — covers the payment panel for ~2.5s
   -------------------------------------------------------------------------- */
/* The processing overlay blocks the whole page while the gateway is being
   contacted, so it is anchored to the VIEWPORT, not to the payment card.
   It used to be position:absolute with a position:sticky inner panel, which
   left the "Processing your payment / do not close this tab" message parked
   above the fold whenever the learner had scrolled down to reach the Pay
   button — they saw a dimmed, frozen page and no explanation at all. */
.co-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-5);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(var(--glass-blur));
  animation: co-fade-in var(--dur-base) var(--ease-out);
}

.co-overlay[hidden] { display: none; }

@keyframes co-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.co-overlay-inner {
  /* Centred by the fixed parent — no sticky offset needed any more. */
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: min(26rem, 100%);
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.co-overlay-spinner { color: var(--primary); }

.co-overlay-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.co-overlay-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.co-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.co-stage {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease-standard);
}

.co-stage-mark {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-strong);
  background: transparent;
  transition: border-color var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
}

.co-stage.is-active {
  color: var(--text);
  font-weight: var(--fw-semibold);
}

.co-stage.is-active .co-stage-mark {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  animation: co-stage-pulse 1.1s var(--ease-standard) infinite;
}

.co-stage.is-done { color: var(--text-muted); }

.co-stage.is-done .co-stage-mark {
  border-color: var(--success);
  background: var(--success);
}

@keyframes co-stage-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); }
  70%  { box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
}

.co-overlay-amount {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Failure state
   -------------------------------------------------------------------------- */
.co-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--card-pad);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-xl);
  background: var(--danger-soft);
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
  animation: co-rise var(--dur-slow) var(--ease-out);
}

.co-error[hidden] { display: none; }

@keyframes co-rise {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

.co-error-art {
  flex: 0 0 auto;
  width: 8.25rem;
  color: var(--danger);
}

.co-error-art svg { width: 100%; height: auto; }

.co-err-rack,
.co-err-cloud,
.co-err-dash,
.co-err-vent {
  stroke: currentColor;
  fill: none;
  opacity: 0.75;
}

.co-err-rack { opacity: 0.45; }

.co-err-led { fill: currentColor; }

.co-err-slash { stroke: currentColor; fill: none; }

.co-error-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.co-error-pill { align-self: flex-start; }

.co-error-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  line-height: var(--lh-tight);
}

.co-error-body {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  max-width: 58ch;
}

/* The monospace detail block — what an engineer would paste into a ticket. */
.co-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3) var(--space-6);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.co-detail > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.co-detail dt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}

.co-detail dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text);
  word-break: break-word;
}

.co-error-foot {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.co-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-1);
}

@media (max-width: 640px) {
  .co-error { grid-template-columns: minmax(0, 1fr); }
  .co-error-art { width: 6rem; }
  .co-error-actions .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   Preview mode — a deliberate product decision, flagged as such
   -------------------------------------------------------------------------- */
.co-preview {
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.co-preview[hidden] { display: none; }

.co-preview-flag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--card-pad);
  background: var(--primary-soft);
  border-bottom: 1px dashed var(--primary-border);
}

.co-preview-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--primary-contrast);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.co-preview-flag-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--primary-soft-text);
}

.co-preview-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--card-pad);
}

.co-preview-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.co-preview-icon { flex: 0 0 auto; }

.co-preview-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.co-preview-sub {
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  max-width: 62ch;
}

.co-preview-list { font-size: var(--fs-md); }

.co-preview-list li > svg { color: var(--primary); }

.co-preview-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.co-preview-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

@media (max-width: 560px) {
  .co-preview-actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Right rail — order summary
   -------------------------------------------------------------------------- */
.co-rail { min-width: 0; }

.co-summary-body { gap: var(--space-5); }

/* The rail is narrow, so the line-item table trades its inline padding for
   room to set the course title on as few lines as possible. */
.co-invoice { margin: 0; }

.co-invoice th:first-child,
.co-invoice td:first-child { padding-inline: 0; }

.co-invoice th:nth-child(2),
.co-invoice td:nth-child(2) { padding-inline: var(--space-2); white-space: nowrap; }

.co-invoice th:last-child,
.co-invoice td:last-child {
  padding-left: var(--space-3);
  padding-right: 0;
  white-space: nowrap;
}

.co-invoice .invoice-item-meta { font-size: var(--fs-2xs); }

.co-assurance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.co-assurance li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

.co-assurance li > svg {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  /* Optical nudge, not spacing: drops the icon onto the first line's baseline. */
  margin-top: 0.12rem;
  color: var(--text-subtle);
}

.co-help-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin-bottom: var(--space-2);
}

.co-help-text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

.co-legal {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

/* ==========================================================================
   PART TWO — payment-status.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   Headline
   -------------------------------------------------------------------------- */
.st-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
  padding: var(--card-pad);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-xl);
  background: var(--danger-soft);
}

.st-headline-main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
  flex: 1 1 22rem;
}

.st-headline-dot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--danger-border);
}

.st-headline-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  line-height: var(--lh-snug);
}

.st-headline-sub {
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  max-width: 62ch;
}

.st-headline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0;
}

.st-headline-meta > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.st-headline-meta dt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}

.st-headline-meta dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.st-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--section-y-tight);
  min-width: 0;
}

.st-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.st-section-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.st-section-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.st-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.st-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.st-legend-swatch {
  width: 0.5rem;
  height: 1rem;
  border-radius: var(--radius-xs);
  background: var(--border-strong);
}

.st-legend-swatch.is-up { background: var(--success); }
.st-legend-swatch.is-degraded { background: var(--warn); }
.st-legend-swatch.is-down { background: var(--danger); }
.st-legend-swatch.is-none {
  background: var(--surface-3);
  border: 1px dashed var(--border-strong);
}

/* --------------------------------------------------------------------------
   Systems board
   -------------------------------------------------------------------------- */
.st-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.st-system {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}

.st-system.is-down { border-color: var(--danger-border); }
.st-system.is-none { background: var(--surface-2); }

.st-system-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.st-system-dot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  /* Optical nudge, not spacing: centres the dot on the system name. */
  margin-top: 0.1rem;
}

.st-system-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 12rem;
  min-width: 0;
}

.st-system-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.st-system-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

/* Optical nudge, not spacing: lifts the pill onto the cap height of the system
   name beside it. No 4px step expresses a 3px baseline correction. */
.st-system-pill { flex: 0 0 auto; margin-top: 0.2rem; }

.st-uptime {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.st-bars {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  height: 1.75rem;
  min-width: 0;
}

.st-tick {
  flex: 1 1 0;
  min-width: var(--space-1);
  border-radius: var(--radius-xs);
  background: var(--success);
  transition: transform var(--dur-fast) var(--ease-out);
}

.st-tick.is-degraded { background: var(--warn); }
.st-tick.is-down { background: var(--danger); }
.st-tick.is-none {
  background: repeating-linear-gradient(
    135deg,
    var(--surface-3),
    var(--surface-3) 3px,
    var(--surface-2) 3px,
    var(--surface-2) 6px
  );
  border: 1px solid var(--border-subtle);
}

.st-bars:hover .st-tick:hover { transform: scaleY(1.12); }

.st-uptime-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.st-uptime-pct {
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.st-system-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* --------------------------------------------------------------------------
   Incidents + side column
   -------------------------------------------------------------------------- */
.st-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 960px) {
  .st-columns { grid-template-columns: minmax(0, 1fr); }
}

.st-timeline { padding-top: var(--space-2); }

.st-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--section-y-tight);
  min-width: 0;
}

/* Same --text-subtle shortfall as the checkout form. A timestamp on a status
   board is the whole point of the entry, so it is held at --text-muted. */
.st-side .field-hint,
.st-timeline .timeline-time {
  color: var(--text-muted);
}

.st-sub-msg {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

.st-sub-msg:empty { display: none; }

.st-sub-msg.is-error { color: var(--danger); }

.st-contact-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin-bottom: var(--space-1);
}

.st-contact-text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-3);
}

.st-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.st-contact-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  min-width: 0;
}

.st-contact-list li > svg {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--text-subtle);
}

.st-history caption {
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Under 720px .table-collapse makes the table a block and the caption shrinks
   to a narrow column. Same fix as the EMI table. */
@media (max-width: 720px) {
  .st-history caption { display: block; width: 100%; padding-inline: 0; }

  /* Zebra striping tints the cells. Once the row becomes a card the tint stops
     at the cell box, leaving a square block inside the rounded border — so the
     card itself carries it instead. */
  .st-history.table-zebra tbody tr:nth-child(even) { background: var(--surface-2); }
  .st-history.table-zebra tbody tr:nth-child(even) td,
  .st-history.table-zebra tbody tr:nth-child(even):hover td { background: none; }
}

/* --------------------------------------------------------------------------
   Reserved boxes
   The board, the timeline and the history table are written by the page module
   the moment it runs. Holding their height keeps the page from jumping between
   the first paint and that first write.
   -------------------------------------------------------------------------- */
.st-board:empty { min-height: 26rem; }
.st-timeline:empty { min-height: 18rem; }
.st-history tbody:empty { display: block; min-height: 9rem; }