/* =========================================================================
   Page — the developer landing page ({en,de}/developer.html)
   -------------------------------------------------------------------------
   The grammar is DESIGN_TOKENS.md §9. Two things about this page in
   particular:

   THE TERMINAL PANEL IS NOT PINNED DARK. `code-panel.css` already themes it
   through `--doc-code-bg`, which is the token §5 defines for exactly this. A
   panel hard-coded to a dark palette would be §5a's mistake in reverse: those
   four constants exist for surfaces that are dark in BOTH themes — the brand
   gradient and the portal sidebar — and a code sample is neither.

   Except here it sits INSIDE the gradient hero, which IS always dark. So the
   panel gets one override in that one place, and it uses `--brand-on-dark`,
   which is the constant §5a defines for text on the gradient.

   THE TABS ARE CSS. Three radios, three panels, `:checked ~`. No JavaScript,
   keyboard-operable by the browser, correct with scripting off — which a click
   handler toggling `hidden` would not be. The radio is visually hidden and the
   label is the tab, so the focus ring has to be moved onto the label by hand:
   `:focus-visible` on an element nobody can see is a keyboard user with no
   indication of where they are.
   ========================================================================= */

/* ---- The hero ------------------------------------------------------------- */

.dev-hero {
  align-items: center;
}

/* The one place a code panel sits on the brand gradient. Everything outside
   this block keeps the themed panel. */
.page-hero .dev-terminal {
  border-color: var(--brand-on-dark);
  /* The gradient has 0.19 of contrast headroom and nothing painted on it may
     lighten it (L-FE-17), so the panel keeps its own opaque ground rather than
     tinting the hero. */
  background: var(--doc-code-bg);
}

@media (max-width: 900px) {
  .dev-terminal {
    /* Below the split's breakpoint the panel is a full-width block under the
       prose, and a code sample that forced the hero wider would take the whole
       page with it. */
    max-width: 100%;
  }
}

/* ---- The group grid ------------------------------------------------------- */

.dev-surface-count {
  margin: 0 0 20px;
  color: var(--doc-ink-soft);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.dev-groups {
  gap: 16px;
}

.dev-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dev-group h3 {
  margin: 0;
  font-size: 17px;
  /* A tag is an identifier the contract spells a particular way, so it is set
     in the face that says so — §9.5's rule about `--mono` where characters are
     compared one by one. */
  font-family: var(--mono);
  color: var(--doc-ink);
}

/* §9.5 — a column of counts a reader compares down a grid.
 *
 * **(0,2,0), and the extra class is not decoration.** This is a direct `<p>`
 * child of a `.card`, so `card.css`'s `.card > p { color: … }` at (0,1,1) beats
 * a bare `.dev-group-count` — the colour written here did NOTHING, and the page
 * looked right because what won was `--doc-ink-soft`, one step along the same
 * ladder. That is audit rule **D-10 (a)**, which this unit wrote three rules
 * further down this very file and then missed here. The code gate measured the
 * computed value; reading would not have found it. */
.dev-group .dev-group-count {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--sd-secondary);
  font-variant-numeric: tabular-nums;
}

/* No `color` here: `.card > p` is (0,1,1) and this is (0,1,0), so one would do
   nothing while looking as though it did (L-FE-49). The token it resolves to is
   the weight a description wants. */
.dev-group-detail {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.dev-group-link {
  margin: 4px 0 0;
  font-size: 14px;
}

/* ---- The CSS tabs --------------------------------------------------------- *
 * Visually hidden rather than `display: none`: a radio that is not displayed is
 * removed from the tab order, which would leave the tab strip unreachable by
 * keyboard. This keeps it focusable and invisible, and the label shows the ring.
 * ------------------------------------------------------------------------- */

.dev-tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dev-tab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--doc-line);
  margin-bottom: 24px;
}

.dev-tab {
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--doc-ink-soft);
  border-bottom: 2px solid transparent;
  /* Sits on the strip's own hairline rather than beside it, so the selected
     tab's underline replaces that hairline instead of doubling it (§9.2). */
  margin-bottom: -1px;
}

.dev-tab:hover {
  color: var(--sd-text);
}

/* The focus ring, moved from the invisible radio onto its label. Without this a
   keyboard user tabbing into the strip sees nothing at all. */
.dev-tab-radio:focus-visible + .dev-tab-radio + .dev-tab-radio + .dev-tab-strip .dev-tab:first-child,
.dev-tab-radio:focus-visible + .dev-tab-radio + .dev-tab-strip .dev-tab:nth-child(2),
.dev-tab-radio:focus-visible + .dev-tab-strip .dev-tab:nth-child(3) {
  outline: 2px solid var(--sd-secondary);
  outline-offset: -2px;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* The selected tab. Same sibling arithmetic as the focus ring: radio 1 is two
   radios before the strip, radio 2 is one before it, radio 3 is adjacent. */
#authTabClient:checked ~ .dev-tab-strip .dev-tab:nth-child(1),
#authTabUser:checked ~ .dev-tab-strip .dev-tab:nth-child(2),
#authTabCall:checked ~ .dev-tab-strip .dev-tab:nth-child(3) {
  color: var(--sd-secondary);
  border-bottom-color: var(--sd-secondary);
}

.dev-tab-panel {
  display: none;
}

#authTabClient:checked ~ #authPanelClient,
#authTabUser:checked ~ #authPanelUser,
#authTabCall:checked ~ #authPanelCall {
  display: block;
}

.dev-tab-panel > p {
  margin: 0 0 16px;
  max-width: 68ch;
  line-height: 1.65;
  color: var(--sd-text-soft);
}

/* (0,2,1), which beats `.dev-tab-panel > p` at (0,1,1) on specificity. The
   first cut reached for `!important` here and the frontend guard refused it,
   correctly: a style that needs `!important` is a specificity bug, and this one
   had a one-word fix. Same lesson as L-FE-49, from the other end — there a page
   rule lost to a component rule and the answer was to delete it. */
.dev-tab-panel > p.dev-tab-note {
  margin-top: 16px;
  font-size: 14px;
}

/* ---- Resources ------------------------------------------------------------ */

.dev-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.dev-more[hidden] {
  display: none;
}

/* ---- The no-JavaScript fallbacks ------------------------------------------ */

.dev-fallback {
  padding: 24px;
  background: var(--sd-sunk);
  border: 1px solid var(--doc-line);
  border-radius: var(--radius-lg);
}

.dev-fallback p {
  margin: 0 0 12px;
  color: var(--sd-text-soft);
  line-height: 1.65;
  max-width: 68ch;
}

.dev-fallback .cta-actions {
  margin-top: 20px;
}

/* ---- Narrow ---------------------------------------------------------------- */

@media (max-width: 640px) {
  .dev-tab {
    padding: 10px 12px;
    font-size: 14px;
  }
}