/* ext.css: Raster extension for the controls Raster does not have (decision G2).
   Load after raster.css and before layout.css. Tokens only: no new colour, shadow, motion or font size.
   Status colours (--st-*) and the radius tokens (--radius-1, --radius-2) are allowed by decision G16.
   Type comes from the t-* classes on the markup. Class prefix: rsx-. */

/* Textarea and select: the box of .rs-input with a free height */
textarea.rs-input { display: block; height: auto; min-height: calc(var(--space-6) * 2); padding: var(--space-2); line-height: inherit; resize: vertical; }
select.rs-input { min-width: 0; padding-right: var(--space-2); cursor: pointer; }
textarea.rs-input[aria-invalid="true"] + .rs-field__hint,
select.rs-input[aria-invalid="true"] + .rs-field__hint { background: var(--signal); color: var(--on-signal); padding: 0 var(--space-1); margin-left: calc(-1 * var(--space-1)); }
textarea.rs-input[aria-invalid="true"], select.rs-input[aria-invalid="true"] { border-color: var(--signal); outline: var(--stroke-hair) solid var(--signal); outline-offset: -2px; }
textarea.rs-input:focus-visible, select.rs-input:focus-visible { outline: var(--stroke-rule) solid var(--ink); outline-offset: 0; border-color: var(--ink); }
textarea.rs-input:disabled, select.rs-input:disabled { background: transparent; border-color: var(--rule); color: var(--ink-2); cursor: not-allowed; }

/* Checkbox and radio: one label row, ink accent, box of 16 px */
.rsx-check { display: flex; align-items: flex-start; gap: var(--space-2); min-height: var(--space-4); cursor: pointer; }
.rsx-check > input { flex: none; width: var(--space-3); height: var(--space-3); margin: var(--space-1) 0 0; accent-color: var(--ink); }
.rsx-check > input:focus-visible { outline: var(--stroke-rule) solid var(--ink); outline-offset: 2px; }
.rsx-check > input:disabled { cursor: not-allowed; }
.rsx-check > input:disabled + span { color: var(--ink-2); }
.rsx-checks { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }

/* Disclosure: a details element. Glyph → when closed, ↓ when open. A hairline above. */
.rsx-disclosure { padding-top: var(--space-2); border-top: var(--stroke-hair) solid var(--rule); }
.rsx-disclosure > summary { display: flex; gap: var(--space-2); min-height: var(--space-4); list-style: none; cursor: pointer; }
.rsx-disclosure > summary::-webkit-details-marker { display: none; }
.rsx-disclosure > summary::before { content: "→"; flex: none; width: var(--space-3); }
.rsx-disclosure[open] > summary::before { content: "↓"; }
.rsx-disclosure > summary:focus-visible { outline: var(--stroke-rule) solid var(--ink); outline-offset: 2px; }
.rsx-disclosure > :not(summary) { margin-top: var(--space-2); }

/* Tabs. The current tab is ink with a hairline underline; the others are ink-2 and bare.
   Link tabs (main navigation): <a class="rsx-tab" aria-current="page">.
   Radio tabs (in-page, no script): see .rsx-tabset below. Weight comes from the container class, never from the tab. */
.rsx-tabs { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); border-bottom: var(--stroke-hair) solid var(--rule); }
.rsx-tab { display: inline-block; padding: var(--space-2) 0; border: 0; background: transparent; color: var(--ink-2); text-decoration: none; cursor: pointer; }
.rsx-tab:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: var(--stroke-hair); text-underline-offset: var(--space-1); }
.rsx-tab[aria-current], .rsx-tab[aria-selected="true"], .rsx-tabradio:checked + .rsx-tab { color: var(--ink); text-decoration: underline; text-decoration-thickness: var(--stroke-hair); text-underline-offset: var(--space-1); }
.rsx-tab:focus-visible, .rsx-tabradio:focus-visible + .rsx-tab { outline: var(--stroke-rule) solid var(--ink); outline-offset: 2px; }
.rsx-tab[aria-disabled="true"] { color: var(--ink-2); cursor: not-allowed; text-decoration: none; }

/* Radio tabs: a fieldset holds a .rsx-tabs row of radio + label pairs, then .rsx-panels.
   The radio is hidden but stays focusable, so the arrow keys move between tabs. The first radio is `checked`.
   Panel values: text, review, preview, versions, a, b, c, d. */
.rsx-tabset { min-width: 0; margin: 0; padding: 0; border: 0; }
.rsx-tabset > legend { padding: 0; color: var(--ink-2); }
.rsx-tabradio { position: absolute; width: var(--space-3); height: var(--space-3); margin: 0; opacity: 0; pointer-events: none; }
.rsx-panels { margin-top: var(--space-4); }
.rsx-panel { display: none; min-width: 0; }
.rsx-tabset:has(.rsx-tabradio[value="text"]:checked) > .rsx-panels > [data-panel="text"],
.rsx-tabset:has(.rsx-tabradio[value="review"]:checked) > .rsx-panels > [data-panel="review"],
.rsx-tabset:has(.rsx-tabradio[value="preview"]:checked) > .rsx-panels > [data-panel="preview"],
.rsx-tabset:has(.rsx-tabradio[value="versions"]:checked) > .rsx-panels > [data-panel="versions"],
.rsx-tabset:has(.rsx-tabradio[value="a"]:checked) > .rsx-panels > [data-panel="a"],
.rsx-tabset:has(.rsx-tabradio[value="b"]:checked) > .rsx-panels > [data-panel="b"],
.rsx-tabset:has(.rsx-tabradio[value="c"]:checked) > .rsx-panels > [data-panel="c"],
.rsx-tabset:has(.rsx-tabradio[value="d"]:checked) > .rsx-panels > [data-panel="d"] { display: block; }

/* Touch: 44 px targets at 640 px and below */
@media (max-width: 640px) {
  .rs-btn, input.rs-input, select.rs-input { height: 44px; }
  .rsx-check { align-items: center; min-height: 44px; }
  .rsx-check > input { width: var(--space-4); height: var(--space-4); margin: 0; }
  .rsx-disclosure > summary { align-items: center; min-height: 44px; }
  .rsx-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
}

/* Print: show every panel, hide the tab rows */
@media print {
  .rsx-tabs, .rsx-tabset > legend { display: none; }
  .rsx-panel { display: block; }
  .rsx-disclosure > summary::before { content: "↓"; }
}

/* Status system (decision G16): icon, chip and card. Colours come from the --st-* tokens. */
.rsx-icon { flex: none; display: inline-block; width: 16px; height: 16px; vertical-align: middle; }
.rsx-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-1); white-space: nowrap; }
.rsx-chip--neutral { color: var(--st-neutral); background: var(--st-neutral-bg); }
.rsx-chip--progress { color: var(--st-progress); background: var(--st-progress-bg); }
.rsx-chip--success { color: var(--st-success); background: var(--st-success-bg); }
.rsx-chip--warning { color: var(--st-warning); background: var(--st-warning-bg); }
.rsx-chip--danger { color: var(--st-danger); background: var(--st-danger-bg); }
.rsx-chip--suggest { color: var(--st-suggest); background: var(--st-suggest-bg); }

.rsx-card { box-sizing: border-box; padding: var(--space-3); border: var(--stroke-hair) solid var(--rule); border-radius: var(--radius-2); background: var(--paper); }
.rsx-card--neutral { border-left: var(--space-1) solid var(--st-neutral); }
.rsx-card--progress { border-left: var(--space-1) solid var(--st-progress); }
.rsx-card--success { border-left: var(--space-1) solid var(--st-success); }
.rsx-card--warning { border-left: var(--space-1) solid var(--st-warning); }
.rsx-card--danger { border-left: var(--space-1) solid var(--st-danger); }
.rsx-card--suggest { border-left: var(--space-1) solid var(--st-suggest); }