/* app/set-platform.css — page-local styles for API + Webhooks + Domains.
   Prefix every selector `.e8-set-platform-`. Shared grammar lives in app/set-core.css and must not
   be duplicated here; if a page needs a new shared primitive, that is a core change, not a
   local override. Tokens only — no hex, no raw font sizes.

   WHAT IS HERE AND WHY IT IS NOT IN CORE
   Nothing below re-declares a row, a card, a control or a banner. These are the things the three
   platform pages need that no other Settings page has asked for yet:

     1. a two-line INLINE empty state (core's `Empty inline` renders one line), indented to sit on
        the same left edge as the iconned rows it lives among;
     2. three small flex clusters that put two elements side by side inside a slot core hands over
        as a single child — the count chip beside a registry-row label, the `Admin only` chip beside
        the create button, and the "Viewing as" control inside the gate notice;
     3. MONOSPACE runs — keys, URLs, DNS hosts and values, where a proportional face makes an
        `l`/`1` ambiguity a support ticket;
     4. the DNS record grid on Domains.

   The create FORM used to be here too — a stacked block with its own title, labels and buttons. It
   is gone: the forms are ordinary `SetRow`s now, so there is nothing left to style. That deletion is
   the point. A bespoke block inside a card of rows is what made Domains stop looking like its
   neighbours, and it is also what put two Cancel buttons on screen at once.

   Every measurement reuses core's own custom properties (`--set-row-pad-y`, `--set-card-pad-x`,
   `--set-line`, `--set-tint`), which are declared on `.e8-set` and inherit down here. That is the
   whole anti-drift mechanism: this file cannot pick a different padding without spelling out a
   number, and a spelled-out number is visible in review. Two numbers ARE spelled out below (the
   36px glyph box and the 14px row gap that compose the empty state's indent) because core exposes
   neither as a variable — flagged in the report as a core gap rather than hidden here.

   CONDITIONAL AT-RULES LIVE AT THE BOTTOM, after every rule they override. A @media block adds no
   specificity, so one written above its own base rule is dead in every state — that has shipped in
   this repo three times. Breakpoints are 840px and 640px, matching set-core.css. */

/* ---------- inline empty state (two-line form) -------------------------------------------------
   The indent is not decoration. Every card on these three pages is all-iconned — head glyph, row
   glyphs — and an un-indented empty state put the only icon-less text in the card 48px to the left
   of everything above it, which reads as a ragged step. 50px = the 36px `.e8-set-glyph` box plus
   `.e8-set-row`'s 14px gap, i.e. exactly where a row's own label starts. */
.e8-set-platform-empty { display: block; padding-left: 50px; }
.e8-set-platform-emptyt {
  display: block; font-size: var(--ui-text-base); font-weight: 600; color: var(--ui-text);
}
.e8-set-platform-emptyd { display: block; margin-top: 3px; }

/* ---------- two-element clusters inside a single core slot --------------------------------------
   Each of these puts two elements into a slot core hands over as one child. None of them re-declares
   a primitive; they are the gap between two of them. */
/* registry-row label + live count chip */
.e8-set-platform-count { display: inline-flex; align-items: center; gap: 8px; }
/* `Admin only` chip + the disabled create button, or Cancel + submit while the form is open */
.e8-set-platform-regact { display: flex; align-items: center; gap: 8px; }
/* the one-line permission notice + the persona control that escapes it */
.e8-set-platform-gate { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.e8-set-platform-asrole { display: inline-flex; align-items: center; gap: 8px; }
.e8-set-platform-lbl {
  font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text-secondary);
}

/* ---------- monospace runs ---------------------------------------------------------------------- */
.e8-set-platform-mono {
  font-family: var(--ui-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--ui-text-sm);
}
/* A URL or domain sitting in a row LABEL: it is the row's identity, so it takes the label's ink and
   weight rather than the quieter tone the rest of the mono runs use. */
.e8-set-platform-url {
  color: var(--ui-text); font-weight: 500; overflow-wrap: anywhere;
}

/* ---------- a field-level error, rendered as a row child ----------------------------------------- */
.e8-set-platform-err {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 10px;
  font-size: var(--ui-text-base); line-height: 1.45; color: var(--ui-danger);
}
.e8-set-platform-err .material-symbols-outlined { font-size: var(--ui-icon-xs); flex: none; margin-top: 1px; }

/* ---------- the one-shot secret strip ------------------------------------------------------------
   Success-tinted rather than accent-tinted: this is a transient result, not a piece of chrome, and
   it has to read as "something just happened" from across the card. Full-bleed like a banner, which
   is why it starts at the card padding rather than at the row text edge. */
.e8-set-platform-reveal {
  padding: var(--set-row-pad-y) var(--set-card-pad-x);
  background: color-mix(in srgb, var(--ui-success) 10%, transparent);
}
.e8-set-platform-reveal-t {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--ui-text-md); font-weight: 500; color: var(--ui-text);
}
.e8-set-platform-reveal-t .material-symbols-outlined { font-size: var(--ui-icon-sm); color: var(--ui-success); }
.e8-set-platform-secret {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 7px 8px 7px 11px;
  border: 1px solid var(--set-line); border-radius: var(--ui-radius-md); background: var(--ui-surface);
}
.e8-set-platform-secret code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--ui-text);
}
.e8-set-platform-meta {
  margin-top: 8px; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); line-height: 1.45;
}

/* ---------- the meta line under a row label -------------------------------------------------------
   Pill + a few facts. Wraps rather than truncates; core keeps the control centred against however
   many lines this ends up being. */
.e8-set-platform-descline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; margin-top: 4px;
}
.e8-set-platform-descline code { color: var(--ui-text-secondary); }

/* ---------- the webhook event picker --------------------------------------------------------------
   Lives inside the Events row's text column, so it inherits that row's left edge and needs no
   padding of its own. The checkbox is the click target, not the block: core's `Check` is a real
   <button>, and wrapping a button in another clickable element is neither valid nor keyboard-honest.
   The text beside it is a description, so it is not styled to look pressable. */
.e8-set-platform-evts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px;
}
.e8-set-platform-evt {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0;
  padding: 9px 11px; border: 1px solid var(--set-line); border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}
.e8-set-platform-evt-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.e8-set-platform-evt-t { font-size: var(--ui-text-base); font-weight: 500; color: var(--ui-text); }
.e8-set-platform-evt-id { color: var(--ui-text-secondary); overflow-wrap: anywhere; }
.e8-set-platform-evt .e8-set-platform-meta { margin-top: 2px; }

/* The events an existing endpoint is subscribed to, listed under its URL. */
.e8-set-platform-evtlist {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px;
}
.e8-set-platform-evtlist code {
  padding: 2px 7px; border-radius: var(--ui-radius-pill);
  background: var(--ui-fill); color: var(--ui-text-secondary);
}

/* ---------- the bold inline link inside the Domains info banner -----------------------------------
   Bare `--ui-accent` on `--ui-wash` measured 4.42:1 in dark at 13.5px/600 — under the 4.5:1 AA
   floor for text this size. Mixing a quarter of `--ui-text` in fixes BOTH themes with one
   declaration and no theme selector: `--ui-text` is near-black in light (pushing the link darker
   against a pale wash, ~8.4:1) and near-white in dark (pushing it lighter against a deep one,
   ~6.3:1). A `:root[data-theme=dark]` override could not live in this file anyway — every selector
   here has to start with the feature prefix. */
.e8-set-platform-blink {
  font-weight: 600;
  color: color-mix(in srgb, var(--ui-accent) 75%, var(--ui-text));
  text-decoration: underline; text-underline-offset: 2px;
}
/* Hover thickens the rule rather than lightening the ink, which would undo the contrast fix. */
.e8-set-platform-blink:hover { text-decoration-thickness: 2px; }

/* ---------- the DNS record grid -------------------------------------------------------------------
   The panel is a direct child of the card, not of its domain row, so it gets the full card width.
   As a row child it shared the text column with three action buttons and rendered 483px wide inside
   a 912px card, wrapping monospace values that had 400px of empty card beside them. The wrapper
   supplies the card's own padding so the panel lines up with every other full-bleed strip. */
.e8-set-platform-dnswrap { padding: var(--set-row-pad-y) var(--set-card-pad-x); }
.e8-set-platform-dns {
  border: 1px solid var(--set-line); border-radius: var(--ui-radius-md);
  overflow: hidden;
}
/* 1 : 1.45 rather than 1 : 1.7. Measured against the widest record these pages generate — a
   `elev8._domainkey.<domain>` host at 291px and a DMARC value at 426px — the old split gave the
   host 269px and wrapped it while leaving 31px spare in the value column. */
.e8-set-platform-dnsr {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1.45fr) 28px;
  align-items: center; gap: 10px; padding: 8px 11px;
}
.e8-set-platform-dnsr + .e8-set-platform-dnsr { border-top: 1px solid var(--set-line); }
.e8-set-platform-dnsr code { overflow-wrap: anywhere; color: var(--ui-text-secondary); }
.e8-set-platform-dnsh {
  background: var(--set-tint);
  font-size: var(--ui-text-xs); font-weight: 500; color: var(--ui-text-tertiary);
}
.e8-set-platform-dnst {
  font-size: var(--ui-text-xs); font-weight: 600; color: var(--ui-text-secondary);
  letter-spacing: 0.02em;
}
.e8-set-platform-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ui-radius);
  background: transparent; color: var(--ui-text-tertiary); cursor: pointer;
}
.e8-set-platform-copy:hover { background: var(--ui-fill); color: var(--ui-text); }
.e8-set-platform-copy .material-symbols-outlined { font-size: var(--ui-icon-xs); }
.e8-set-platform-dnsnote {
  border-top: 1px solid var(--set-line); padding: 8px 11px;
  font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); line-height: 1.45;
}

/* ---------- narrow -------------------------------------------------------------------------------
   Below every rule above, deliberately. */
@media (max-width: 840px) {
  .e8-set-platform-evts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* Core drops the row's control slot onto its own full-width line here, so the chip and button
     start at the left with everything else rather than hugging a right edge that no longer exists. */
  .e8-set-platform-regact { flex-wrap: wrap; justify-content: flex-start; }
  /* The persona control takes the full line under the sentence it belongs to, and wraps internally
     because core stretches every select to 100% at this width — which would otherwise push the
     "Viewing as" label off the end of the line rather than above it. */
  .e8-set-platform-asrole { flex: 1 1 100%; flex-wrap: wrap; }
  /* One column. A 3-value DNS record squeezed into 350px is unreadable and un-copyable, and the
     `TXT` / `CNAME` cell carries the meaning the hidden column header used to. */
  .e8-set-platform-dnsr { grid-template-columns: minmax(0, 1fr); gap: 4px; align-items: start; }
  .e8-set-platform-dnsh { display: none; }
  .e8-set-platform-copy { justify-self: start; margin-top: 2px; }
  .e8-set-platform-secret { flex-wrap: wrap; }
  .e8-set-platform-secret code { flex: 1 1 100%; }
}