/* ==========================================================================
   API KEYS, WEBHOOKS AND SHEETS — presentation for frontend/pages_api.js
   --------------------------------------------------------------------------
   Package Y11 (items F11 / F12 / F13). Scoped to #page-root so nothing here
   can reach the terminal, which renders into #terminal-root and has its own
   layers.

   NO RAW HEX ANYWHERE IN THIS FILE, including as a var() fallback. Every
   colour resolves through a static/instrument.css token. A fallback hex is a
   colour that silently stops following the theme the moment the token is
   renamed, which is the failure this rule exists to prevent — so the fallback
   slot is left empty on purpose.

   The class prefix is `sapi` and no class name in the module contains a
   hyphen. obsidian_orchid.css matches [class*="-status"], -tooltip, -popup,
   -tag, -flag, -chip, -pane, -tile, -line, -path and uppercases
   [class$="-title"], -label, -header, -heading, -caption, -kicker. A
   hyphen-free prefix makes that whole family unmatchable by construction,
   which is also why this sheet has to state everything itself.

   Selectors are written as full class names rather than [class*="Panel"]
   substring matches. pages_wave3.css uses the substring form and it is the
   right call there — three modules, 263 names. Here there is one module, and
   an explicit selector cannot accidentally capture a class a later package
   adds under the same #page-root.
   ========================================================================== */

#page-root {
  --sapi-gap: 14px;
  --sapi-pad: clamp(14px, 2.2vw, 22px);
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 18px 96px;
}

/* --------------------------------------------------------------------------
   PAGE AND HEADINGS
   -------------------------------------------------------------------------- */

#page-root .sapiPage {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

#page-root .sapiHead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

#page-root .sapiTitle {
  font-family: var(--oo-font-ui);
  font-size: var(--i-t-xl);
  font-weight: 600;
  letter-spacing: var(--i-track-hero);
  line-height: var(--i-lh-tight);
  color: var(--i-ink-1);
  margin: 0;
}

#page-root .sapiLede {
  font-size: var(--i-t-md);
  line-height: var(--i-lh-body);
  color: var(--i-ink-2);
  max-width: var(--i-measure);
  margin: 0;
}

#page-root .sapiLede strong {
  color: var(--i-ink-1);
  font-weight: 600;
}

#page-root .sapiPanelHead {
  font-family: var(--oo-font-ui);
  font-size: var(--i-t-lg);
  font-weight: 600;
  letter-spacing: var(--i-track-tight);
  color: var(--i-ink-1);
  margin: 0 0 4px;
}

#page-root .sapiSubHead {
  font-family: var(--oo-font-ui);
  font-size: var(--i-t-md);
  font-weight: 600;
  letter-spacing: var(--i-track-tight);
  color: var(--i-ink-1);
  margin: 0 0 6px;
}

#page-root .sapiHint,
#page-root .sapiFieldHelp {
  font-size: var(--i-t-sm);
  line-height: var(--i-lh-body);
  color: var(--i-ink-3);
  max-width: var(--i-measure);
  margin: 0;
}

/* --------------------------------------------------------------------------
   SURFACES
   -------------------------------------------------------------------------- */

#page-root .sapiPanel {
  display: flex;
  flex-direction: column;
  gap: var(--sapi-gap);
  background: var(--i-surface-1);
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-panel);
  box-shadow: var(--i-elev-1);
  padding: var(--sapi-pad);
}

#page-root .sapiSectionBody {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* A nested surface must not restate the frame, or panels grow visible rings. */
#page-root .sapiPolicy {
  background: var(--i-surface-2);
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#page-root .sapiPolicy p,
#page-root .sapiPolicy li {
  font-size: var(--i-t-body);
  line-height: var(--i-lh-body);
  color: var(--i-ink-2);
  margin: 0;
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */

#page-root .sapiForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#page-root .sapiField {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#page-root .sapiFieldLabel {
  font-size: var(--i-t-xs);
  font-weight: 600;
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  color: var(--i-ink-3);
}

#page-root .sapiInput {
  font-family: var(--oo-font-ui);
  font-size: var(--i-t-body);
  color: var(--i-ink-1);
  background: var(--i-field-bg);
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-control);
  padding: 9px 11px;
  width: 100%;
  max-width: 560px;
  transition: border-color var(--i-dur-fast) var(--i-ease-out),
              box-shadow var(--i-dur-fast) var(--i-ease-out);
}

#page-root .sapiInput::placeholder { color: var(--i-ink-4); }

#page-root .sapiInput:focus-visible {
  outline: none;
  border-color: var(--i-accent-edge-bright);
  box-shadow: var(--i-accent-glow);
}

#page-root .sapiCheckRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

#page-root .sapiCheckLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--i-t-body);
  color: var(--i-ink-2);
  cursor: pointer;
}

#page-root .sapiCheck { accent-color: var(--i-orchid); }

#page-root .sapiFormActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

#page-root .sapiFormNotice:empty { display: none; }

/* --------------------------------------------------------------------------
   BUTTONS

   One loud action per section, everything else quiet. `.primary` is the mint /
   register action; `sapiBtnDanger` is revoke / delete, which is destructive
   and irreversible for a key.
   -------------------------------------------------------------------------- */

#page-root .sapiBtn {
  font-family: var(--oo-font-ui);
  font-size: var(--i-t-body);
  font-weight: 500;
  letter-spacing: var(--i-track-tight);
  color: var(--i-ink-1);
  background: var(--i-control-bg);
  border: 1px solid var(--i-hair-strong);
  border-radius: var(--i-r-control);
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--i-dur-fast) var(--i-ease-out),
              border-color var(--i-dur-fast) var(--i-ease-out),
              opacity var(--i-dur-fast) var(--i-ease-out);
}

#page-root .sapiBtn:hover:not(:disabled) {
  background: var(--i-control-bg-hover);
  border-color: var(--i-accent-edge-soft);
}

#page-root .sapiBtn:focus-visible {
  outline: 2px solid var(--i-accent-edge-bright);
  outline-offset: 2px;
}

#page-root .sapiBtn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

#page-root .sapiBtn.primary {
  background: var(--i-gradient-primary);
  border-color: var(--i-accent-edge);
  color: var(--i-ink-on-accent);
  box-shadow: var(--i-btn-primary-shadow);
}

#page-root .sapiBtn.primary:hover:not(:disabled) {
  box-shadow: var(--i-btn-primary-shadow-hover);
}

#page-root .sapiBtnDanger { color: var(--i-bear); }

#page-root .sapiBtnDanger:hover:not(:disabled) {
  background: var(--i-bear-wash);
  border-color: var(--i-bear);
}

#page-root .sapiBtnSmall {
  font-size: var(--i-t-sm);
  padding: 5px 10px;
}

/* --------------------------------------------------------------------------
   CODE AND COPY

   `sapiCode` / `sapiKeyText` set font-family DIRECTLY and contain no `mono`
   token in the class name. instrument.css repaints `.mono` and
   `[class*="-mono"]` with `color: var(--i-ink-1) !important`, which would
   override the deliberate accent colour on a revealed key.
   -------------------------------------------------------------------------- */

#page-root .sapiCode {
  font-family: var(--oo-font-data);
  font-size: var(--i-t-sm);
  line-height: var(--i-lh-snug);
  color: var(--i-ink-2);
  background: var(--i-wash-faint);
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-chip);
  padding: 6px 9px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

#page-root .sapiCopyRow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#page-root .sapiCopyRow .sapiCode { flex: 1 1 auto; min-width: 0; }

#page-root .sapiCopyBlock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

#page-root .sapiCopyBlock .sapiCode {
  width: 100%;
  white-space: pre;
  max-height: 340px;
  overflow: auto;
  word-break: normal;
}

/* --------------------------------------------------------------------------
   THE ONE-TIME REVEAL

   The most important block on the page. It is loud on purpose: this is the
   only moment the value exists, and an operator who scrolls past it has lost
   it permanently.
   -------------------------------------------------------------------------- */

#page-root .sapiReveal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--i-amber-wash);
  border: 1px solid var(--i-amber);
  border-radius: var(--i-r-panel);
  box-shadow: var(--i-elev-2);
  padding: var(--sapi-pad);
}

#page-root .sapiRevealHead {
  font-family: var(--oo-font-ui);
  font-size: var(--i-t-lg);
  font-weight: 600;
  color: var(--i-amber);
  margin: 0;
}

#page-root .sapiRevealWarn {
  font-size: var(--i-t-body);
  line-height: var(--i-lh-body);
  color: var(--i-ink-1);
  max-width: var(--i-measure);
  margin: 0;
}

#page-root .sapiKeyText {
  display: block;
  font-family: var(--oo-font-data);
  font-size: var(--i-t-md);
  line-height: var(--i-lh-snug);
  color: var(--i-amber);
  background: var(--i-void);
  border: 1px solid var(--i-amber);
  border-radius: var(--i-r-card);
  padding: 12px 14px;
  user-select: all;
  word-break: break-all;
}

#page-root .sapiKeyText:empty { display: none; }

#page-root .sapiRevealActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   NOTICES
   -------------------------------------------------------------------------- */

#page-root .sapiNotice {
  font-size: var(--i-t-body);
  line-height: var(--i-lh-body);
  border: 1px solid var(--i-hair);
  border-left-width: 3px;
  border-radius: var(--i-r-chip);
  padding: 9px 12px;
  color: var(--i-ink-2);
  max-width: var(--i-measure-wide);
}

#page-root .sapiInfo { border-left-color: var(--i-hair-strong); }

#page-root .sapiGood {
  border-left-color: var(--i-bull);
  background: var(--i-bull-wash);
  color: var(--i-ink-1);
}

#page-root .sapiBad {
  border-left-color: var(--i-bear);
  background: var(--i-bear-wash);
  color: var(--i-ink-1);
}

/* --------------------------------------------------------------------------
   THE KEY TABLE

   CSS grid rather than <table>: the row is five cells at desktop width and a
   stacked block on a phone, and a table cannot do the second without markup
   that lies about its structure.
   -------------------------------------------------------------------------- */

#page-root .sapiTable {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-card);
  overflow: hidden;
}

#page-root .sapiRow {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.3fr) auto;
  gap: 10px;
  align-items: start;
  padding: 11px 13px;
  border-bottom: 1px solid var(--i-hair);
}

#page-root .sapiRow:last-child { border-bottom: none; }

#page-root .sapiRow:not(.sapiRowHead):hover { background: var(--i-row-hover); }

#page-root .sapiRowHead {
  background: var(--i-surface-2);
  font-size: var(--i-t-xs);
  font-weight: 600;
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  color: var(--i-ink-3);
}

/* A revoked key stays visible — it is history — but must not read as live. */
#page-root .sapiRowRevoked { opacity: 0.55; }

#page-root .sapiCell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--i-t-body);
  color: var(--i-ink-2);
  min-width: 0;
}

/* The id cell is the only one carrying a code element, and `sgt_<16 hex>_…`
   has no break opportunity in it — without this it forces the grid wider than
   the panel and the whole table scrolls sideways. */
#page-root .sapiCellId .sapiCode {
  align-self: flex-start;
  max-width: 100%;
}

#page-root .sapiCellActions {
  flex-direction: row;
  gap: 6px;
  justify-content: flex-end;
}

#page-root .sapiRowLabel {
  font-size: var(--i-t-xs);
  color: var(--i-ink-3);
  word-break: break-word;
}

#page-root .sapiScopes {
  font-family: var(--oo-font-data);
  font-size: var(--i-t-sm);
  color: var(--i-ink-2);
}

/* --------------------------------------------------------------------------
   WEBHOOK ENDPOINTS
   -------------------------------------------------------------------------- */

#page-root .sapiEndpoints {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#page-root .sapiEndpoint {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--i-surface-2);
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-card);
  padding: 14px 16px;
}

#page-root .sapiEndpointOff { opacity: 0.62; }

#page-root .sapiEndpointHead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#page-root .sapiEndpointHead .sapiCode { flex: 1 1 320px; min-width: 0; }

#page-root .sapiState {
  font-size: var(--i-t-xs);
  font-weight: 600;
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  color: var(--i-ink-3);
  border: 1px solid var(--i-hair-strong);
  border-radius: var(--i-r-pill);
  padding: 3px 10px;
}

#page-root .sapiEndpoint:not(.sapiEndpointOff) .sapiState {
  color: var(--i-bull);
  border-color: var(--i-bull);
}

#page-root .sapiFacts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: var(--i-t-sm);
}

#page-root .sapiFacts dt {
  color: var(--i-ink-3);
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  font-size: var(--i-t-xs);
  align-self: center;
}

#page-root .sapiFacts dd {
  color: var(--i-ink-2);
  margin: 0;
}

#page-root .sapiEndpointActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   DELIVERY LOG

   Collapsed by default. A dead-lettered delivery is the one thing an operator
   must not miss, so its count is surfaced above the fold in a notice and the
   row itself is marked here.
   -------------------------------------------------------------------------- */

#page-root .sapiLog > summary {
  font-size: var(--i-t-sm);
  color: var(--i-ink-3);
  cursor: pointer;
  padding: 4px 0;
}

#page-root .sapiLog > summary:focus-visible {
  outline: 2px solid var(--i-accent-edge-bright);
  outline-offset: 2px;
}

#page-root .sapiLogBody {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  max-height: 320px;
  overflow-y: auto;
}

#page-root .sapiDelivery {
  display: grid;
  grid-template-columns: 92px minmax(0, 1.2fr) minmax(0, 1.2fr) 52px 92px;
  gap: 8px;
  align-items: baseline;
  font-family: var(--oo-font-data);
  font-size: var(--i-t-sm);
  color: var(--i-ink-3);
  padding: 5px 8px;
  border-radius: var(--i-r-chip);
}

#page-root .sapiDelivery:nth-child(odd) { background: var(--i-wash-faint); }

#page-root .sapiDeliveryState {
  color: var(--i-bull);
  letter-spacing: var(--i-track-tight);
}

#page-root .sapiDeliveryBad .sapiDeliveryState { color: var(--i-bear); }

#page-root .sapiDeliveryType { color: var(--i-ink-2); }

#page-root .sapiDeliveryErr {
  grid-column: 1 / -1;
  color: var(--i-bear);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   SHEETS
   -------------------------------------------------------------------------- */

#page-root .sapiSheets {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#page-root .sapiSheet {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--i-surface-2);
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-card);
  padding: 13px 15px;
}

#page-root .sapiSheet p {
  font-size: var(--i-t-body);
  line-height: var(--i-lh-body);
  color: var(--i-ink-2);
  margin: 0;
}

/* --------------------------------------------------------------------------
   NARROW VIEWPORTS

   The key row and the delivery row are the two grids that cannot survive a
   phone. Both collapse to a stack; the delivery row keeps its monospace so a
   status code still aligns with the one above it.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  #page-root .sapiRow {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  #page-root .sapiRowHead { display: none; }

  #page-root .sapiCellActions { justify-content: flex-start; }

  #page-root .sapiDelivery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  #page-root .sapiFacts { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  #page-root .sapiFacts dd { margin-bottom: 6px; }
}

/* --------------------------------------------------------------------------
   MOTION

   Every transition above is a colour or a shadow, so honouring this is a
   matter of turning them off rather than rewriting them.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #page-root .sapiBtn,
  #page-root .sapiInput {
    transition: none;
  }
}