/* The gen codes page's styles (release v2026.09.30.3, stream S4): linked by
   /cs2-gen-codes.html alone, from its body, in the public sheet's components
   layer. Tokens come from public.css. */
/* --- gen codes (W21): the static page around the island ---------------------
   The page's own head in the desk's ramp (title-xl, the faint status line
   under it, the 14px lede), the tool on .g-work with the format and the
   desk's note in a 340px aside. Until the island mounts (and for a reader
   without scripts) the fallback form keeps the same box. */
@layer components {
  .s-doc .gc-title { margin: 0; color: var(--pt-ink); text-wrap: balance; }
  .s-doc .gc-status { margin: 8px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--pt-faint); }
  .s-doc .gc-lede { margin: 8px 0 20px; max-width: 72ch; font-size: 14px; line-height: 1.6; color: var(--pt-soft); }
  .gc-work { margin-bottom: 28px; }
  .gc-tool [hidden] { display: none !important; }
  .gc-tool:not([data-mounted]) .card { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-surface); box-shadow: var(--shadow-1); }
  .gc-tool:not([data-mounted]) input,
  .gc-tool:not([data-mounted]) select { min-height: 44px; padding: 8px 14px; border: 1px solid var(--pt-hairline-strong); border-radius: 999px; background: color-mix(in srgb, var(--pt-steel) 7%, transparent); color: var(--pt-ink); font-size: 14px; }
  .gc-tool:not([data-mounted]) #gc-q { width: 100%; }
  .gc-tool:not([data-mounted]) .controls { display: flex; flex-wrap: wrap; gap: 12px; }
  .gc-tool:not([data-mounted]) .ctl { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--pt-soft); }
  .gc-tool:not([data-mounted]) .out { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-wash); }
  .gc-tool:not([data-mounted]) .out code { flex: 1; font-family: var(--font-mono); color: var(--pt-ink); }
  .gc-tool:not([data-mounted]) .wears { display: flex; flex-wrap: wrap; gap: 6px; }
  .gc-tool:not([data-mounted]) .wears button,
  .gc-tool:not([data-mounted]) #gc-copy { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--pt-hairline-strong); background: transparent; color: var(--pt-soft); font-family: var(--font-pill); cursor: pointer; }
  .gc-tool:not([data-mounted]) .suggest { display: flex; flex-direction: column; }
  .gc-tool:not([data-mounted]) .err { margin: 0; color: var(--pt-crit-bright); font-size: 13px; }
  /* A reserved box while the island loads, so the aside and the prose do
     not move when it mounts (CLS). */
  @media (scripting: enabled) {
    .gc-tool:not([data-mounted], [data-island-error]) { min-height: 190px; }
  }
  .gc-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  @media (min-width: 1280px) { .gc-aside { position: sticky; top: calc(var(--header-h) + 20px); } }
  .gc-plate { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
  .gc-hint { margin: 0; font-size: 13px; line-height: 1.6; color: var(--pt-soft); }
  .gc-cta > span { font-size: 14px; line-height: 1.6; color: var(--pt-soft); }
  .gc-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--pt-hairline-strong); font-family: var(--font-pill); font-size: 14px; color: var(--pt-soft); text-decoration: none; }
  .gc-link:hover { color: var(--pt-ink); border-color: color-mix(in srgb, var(--pt-steel) 40%, transparent); }
  @media (hover: none) and (pointer: coarse) { .gc-link { min-height: 44px; } .gc-link.desk-only { display: none; } }
  @media not ((hover: none) and (pointer: coarse)) { .gc-link.touch-only { display: none; } }
}