/* Shared controls for Evidence in view. Keep the existing public classes. */
/* Textarea and select: the box of .rs-input with a free height */
textarea.rs-input { display: block; height: auto; min-height: calc(var(--dz-space-48) * 2); padding: var(--dz-space-8) var(--dz-space-12); line-height: inherit; resize: vertical; }
select.rs-input { min-width: 0; padding-right: var(--dz-space-8); cursor: pointer; }
textarea.rs-input[aria-invalid="true"] + .rs-field__hint,
select.rs-input[aria-invalid="true"] + .rs-field__hint { color: var(--dz-st-danger); }
textarea.rs-input:focus-visible, select.rs-input:focus-visible { outline: var(--dz-focus-width) solid var(--dz-focus); outline-offset: var(--dz-focus-offset); border-color: var(--dz-focus); }
textarea.rs-input:disabled, select.rs-input:disabled { background: var(--dz-soft); border-color: var(--dz-line); color: var(--dz-muted); cursor: not-allowed; }

/* Checkbox and radio: one label row of 44 px, action accent, box of 20 px */
.rsx-check { display: flex; align-items: center; gap: var(--dz-space-8); min-height: var(--dz-control-height); cursor: pointer; }
.rsx-check > input { flex: none; width: calc(var(--dz-space-16) + var(--dz-space-4)); height: calc(var(--dz-space-16) + var(--dz-space-4)); margin: 0; accent-color: var(--dz-accent); }
.rsx-check > input:focus-visible { outline: var(--dz-focus-width) solid var(--dz-focus); outline-offset: var(--dz-focus-offset); }
.rsx-check > input:disabled { cursor: not-allowed; }
.rsx-check > input:disabled + span { color: var(--dz-muted); }
.rsx-checks { display: flex; flex-wrap: wrap; gap: 0 var(--dz-space-24); }

/* Switch: a labelled checkbox with role="switch", for a repeated binary choice. The label says what the switch does.
   Off: a recessed track with an ink-2 knob. On: an action track with the knob at the end. */
.rsx-switch { display: inline-flex; align-items: center; gap: var(--dz-space-12); min-height: var(--dz-control-height); cursor: pointer; }
.rsx-switch > input[role="switch"] { appearance: none; position: relative; flex: none; box-sizing: border-box; width: var(--dz-gutter-wide); height: var(--dz-space-24); margin: 0; border: var(--dz-stroke-hair) solid var(--dz-control); border-radius: var(--dz-radius-panel); background: var(--dz-soft); cursor: pointer; }
.rsx-switch > input[role="switch"]::before { content: ""; position: absolute; top: calc(var(--dz-space-4) / 2); left: calc(var(--dz-space-4) / 2); width: calc(var(--dz-space-16) + var(--dz-space-4) / 2); height: calc(var(--dz-space-16) + var(--dz-space-4) / 2); border-radius: var(--dz-radius-panel); background: var(--dz-muted); }
.rsx-switch > input[role="switch"]:checked { border-color: var(--dz-accent); background: var(--dz-accent); }
.rsx-switch > input[role="switch"]:checked::before { left: auto; right: calc(var(--dz-space-4) / 2); background: var(--dz-on-accent); }
.rsx-switch > input[role="switch"]:focus-visible { outline: var(--dz-focus-width) solid var(--dz-focus); outline-offset: var(--dz-focus-offset); }
.rsx-switch:has(> input:disabled) { color: var(--dz-muted); cursor: not-allowed; }
.rsx-switch > input[role="switch"]:disabled { border-color: var(--dz-line); background: var(--dz-soft); cursor: not-allowed; }
.rsx-switch > input[role="switch"]:disabled::before { background: var(--dz-line); }

/* Use the native disclosure marker. */
.rsx-disclosure { padding-top: var(--dz-space-8); border-top: var(--dz-stroke-hair) solid var(--dz-line); }
.rsx-disclosure > summary { min-height: var(--dz-control-height); padding: var(--dz-space-8) 0; box-sizing: border-box; list-style: disclosure-closed inside; cursor: pointer; }
.rsx-disclosure > summary::marker { color: var(--dz-muted); }
.rsx-disclosure[open] > summary { list-style-type: disclosure-open; }
.rsx-disclosure > summary:focus-visible { outline: var(--dz-focus-width) solid var(--dz-focus); outline-offset: var(--dz-focus-offset); }
.rsx-disclosure > :not(summary) { margin-top: var(--dz-space-8); }

/* 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: 0 var(--dz-space-24); border-bottom: var(--dz-stroke-hair) solid var(--dz-line); }
.rsx-tab { display: inline-block; box-sizing: border-box; min-height: var(--dz-control-height); padding-block: calc((var(--dz-control-height) - var(--dz-type-body-leading)) / 2); padding-inline: 0; border: 0; background: transparent; color: var(--dz-muted); text-decoration: none; cursor: pointer; }
.rsx-tab > span { display: inline-block; text-decoration: none; }
.rsx-tab:hover { color: var(--dz-ink); text-decoration: underline; text-decoration-thickness: var(--dz-stroke-hair); text-underline-offset: var(--dz-space-4); }
.rsx-tab[aria-current], .rsx-tab[aria-selected="true"], .rsx-tabradio:checked + .rsx-tab { color: var(--dz-ink); text-decoration: underline; text-decoration-thickness: var(--dz-stroke-hair); text-underline-offset: var(--dz-space-4); }
.rsx-tab:focus-visible, .rsx-tabradio:focus-visible + .rsx-tab { outline: var(--dz-focus-width) solid var(--dz-focus); outline-offset: var(--dz-focus-offset); }
.rsx-tab[aria-disabled="true"] { color: var(--dz-muted); 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(--dz-muted); }
.rsx-tabradio { position: absolute; width: var(--dz-space-16); height: var(--dz-space-16); margin: 0; opacity: 0; pointer-events: none; }
.rsx-panels { margin-top: var(--dz-space-24); }
.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; }

/* Print: show every panel, hide the tab rows, the switches keep their native box */
@media print {
  .rsx-tabs, .rsx-tabset > legend { display: none; }
  .rsx-panel { display: block; }
  .rsx-notice__close, .rsx-toasts { display: none; }
}

/* Status system (decision G16): icon, chip and card. Colours come from the --st-* tokens.
   A chip keeps its colour, its icon and its word in one box that does not break. */
.rsx-icon { flex: none; display: inline-block; width: 16px; height: 16px; vertical-align: middle; }
.rsx-chip { display: inline-flex; align-items: center; gap: var(--dz-space-4); box-sizing: border-box; max-width: 100%; padding: var(--dz-space-4) var(--dz-space-8); border-radius: var(--dz-radius-chip); vertical-align: middle; white-space: nowrap; }
.rsx-chip--neutral { color: var(--dz-st-neutral); background: var(--dz-st-neutral-bg); }
.rsx-chip--progress { color: var(--dz-st-progress); background: var(--dz-st-progress-bg); }
.rsx-chip--success { color: var(--dz-st-success); background: var(--dz-st-success-bg); }
.rsx-chip--warning { color: var(--dz-st-warning); background: var(--dz-st-warning-bg); }
.rsx-chip--danger { color: var(--dz-st-danger); background: var(--dz-st-danger-bg); }
.rsx-chip--suggest { color: var(--dz-st-suggest); background: var(--dz-st-suggest-bg); }

/* A separate neutral surface. Do not nest cards. Use panel for a plain section. */
.rsx-card { box-sizing: border-box; padding: var(--dz-space-24); border: 0; border-radius: var(--dz-radius-panel); background: var(--dz-surface); box-shadow: var(--dz-shadow-flat); }
.rsx-card--neutral > .rsx-card__head { color: var(--dz-st-neutral); }
.rsx-card--progress > .rsx-card__head { color: var(--dz-st-progress); }
.rsx-card--success > .rsx-card__head { color: var(--dz-st-success); }
.rsx-card--warning > .rsx-card__head { color: var(--dz-st-warning); }
.rsx-card--danger > .rsx-card__head { color: var(--dz-st-danger); }
.rsx-card--suggest > .rsx-card__head { color: var(--dz-st-suggest); }
.rsx-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--dz-space-8) var(--dz-space-16); }
.rsx-card__title { margin: 0; min-width: 0; }
.rsx-card__meta { color: var(--dz-muted); }
.rsx-card__body { margin-top: var(--dz-space-8); }
.rsx-card__body > * + * { margin-top: var(--dz-space-8); }
.rsx-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dz-space-8); margin-top: var(--dz-space-16); padding-top: var(--dz-space-16); border-top: var(--dz-stroke-hair) solid var(--dz-line); }

/* Empty state: what is absent, one sentence, one action. The filtered form clears the filters. */
.rsx-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--dz-space-8); box-sizing: border-box; padding: var(--dz-space-32) 0; border-top: var(--dz-stroke-hair) solid var(--dz-line); background: transparent; }
.rsx-empty--filtered { padding-block: var(--dz-space-24); }
.rsx-empty__title { margin: 0; }
.rsx-empty__text { max-width: 66ch; color: var(--dz-muted); }
.rsx-empty__action { margin-top: var(--dz-space-8); }
.rsx-empty__action > .rs-btn--quiet { margin-left: calc(-1 * var(--dz-space-8)); }

/* Notice: an icon, a title, a sentence, then optional actions. Success and information are polite; an error is assertive and stays until closed.
   Inline beside the affected control, or in the .rsx-toasts stack when it floats (then with the overlay elevation). */
.rsx-notice { display: flex; align-items: flex-start; gap: var(--dz-space-12); box-sizing: border-box; max-width: 72ch; padding: var(--dz-space-12) var(--dz-space-16); border: 0; border-radius: var(--dz-radius-panel); background: var(--dz-soft); color: var(--dz-ink); }
.rsx-notice > .rsx-icon { margin-top: calc(var(--dz-space-4) / 2); }
.rsx-notice__body { flex: 1; min-width: 0; }
.rsx-notice__body > * + * { margin-top: var(--dz-space-4); }
.rsx-notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dz-space-8); padding-top: var(--dz-space-4); }
.rsx-notice__close { flex: none; min-width: var(--dz-control-height); margin: 0; padding: 0; color: var(--dz-ink); }
.rsx-notice__close:hover { color: var(--dz-ink); }
.rsx-notice--success { border-color: var(--dz-st-success); background: var(--dz-st-success-bg); }
.rsx-notice--success > .rsx-icon, .rsx-notice--success .rsx-notice__title { color: var(--dz-st-success); }
.rsx-notice--progress { border-color: var(--dz-st-progress); background: var(--dz-st-progress-bg); }
.rsx-notice--progress > .rsx-icon, .rsx-notice--progress .rsx-notice__title { color: var(--dz-st-progress); }
.rsx-notice--warning { border-color: var(--dz-st-warning); background: var(--dz-st-warning-bg); }
.rsx-notice--warning > .rsx-icon, .rsx-notice--warning .rsx-notice__title { color: var(--dz-st-warning); }
.rsx-notice--danger { border-color: var(--dz-st-danger); background: var(--dz-st-danger-bg); }
.rsx-notice--danger > .rsx-icon, .rsx-notice--danger .rsx-notice__title { color: var(--dz-st-danger); }
.rsx-toasts { position: fixed; z-index: 20; right: var(--dz-space-24); bottom: var(--dz-space-24); display: flex; flex-direction: column; align-items: stretch; gap: var(--dz-space-8); width: min(420px, calc(100vw - var(--dz-space-16) * 2)); pointer-events: none; }
.rsx-toasts > .rsx-notice { pointer-events: auto; box-shadow: var(--dz-shadow-overlay); }
.rsx-toasts:empty { display: none; }

/* Native overlays use one soft shadow and no border. */
.rsx-dialog, .rsx-popover { box-sizing: border-box; max-height: calc(100dvh - var(--dz-space-16) * 2); padding: var(--dz-space-24); border: 0; border-radius: var(--dz-radius-panel); background: var(--dz-surface); color: var(--dz-ink); box-shadow: var(--dz-shadow-overlay); overflow: auto; }
.rsx-dialog { width: min(560px, calc(100vw - var(--dz-space-16) * 2)); }
.rsx-popover { width: min(400px, calc(100vw - var(--dz-space-16) * 2)); }
.rsx-dialog:modal, .rsx-popover:popover-open { margin: auto; }
.rsx-dialog::backdrop { background: color-mix(in srgb, var(--dz-ink) 35%, transparent); }
.rsx-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dz-space-16); }
.rsx-dialog__title { margin: 0; min-width: 0; }
.rsx-dialog__head > form { flex: none; margin: 0; }
.rsx-dialog__body { margin-top: var(--dz-space-8); }
.rsx-dialog__body > * + * { margin-top: var(--dz-space-8); }
.rsx-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--dz-space-8); margin-top: var(--dz-space-24); }
.rsx-dialog__actions > form { display: contents; }

@media (max-width: 640px) {
  .rsx-card, .rsx-dialog, .rsx-popover { padding: var(--dz-space-16); }
  .rsx-toasts { right: var(--dz-space-16); bottom: var(--dz-space-16); }
  .rsx-dialog__actions { justify-content: flex-start; }
}

/* Forced colours: the switch draws its track and knob with system colours */
@media (forced-colors: active) {
  .rsx-switch > input[role="switch"] { forced-color-adjust: none; border-color: ButtonText; background: Canvas; }
  .rsx-switch > input[role="switch"]::before { background: ButtonText; }
  .rsx-switch > input[role="switch"]:checked { border-color: Highlight; background: Highlight; }
  .rsx-switch > input[role="switch"]:checked::before { background: HighlightText; }
  .rsx-switch > input[role="switch"]:disabled { border-color: GrayText; background: Canvas; }
  .rsx-switch > input[role="switch"]:disabled::before { background: GrayText; }
}


/* Common controls keep native disabled and busy semantics. */
.rs-btn { min-width: var(--dz-control-height); white-space: normal; text-align: center; }
.rs-btn[aria-busy="true"], .rs-btn[aria-busy="true"]:disabled { cursor: progress; }
.rs-btn--quiet { color: var(--dz-ink); }
.rs-btn--quiet:hover { color: var(--dz-ink); text-decoration: none; }
.rs-field__label { font-size: var(--dz-type-label-size); line-height: var(--dz-type-label-leading); }
.rs-field__help { max-width: 75ch; }
.rs-field__recovery { color: var(--dz-muted); }
.rs-field__error { align-items: baseline; }
.rs-field__error > .rsx-icon { align-self: flex-start; margin-top: var(--dz-space-4); }
.rs-input { max-width: 100%; }

/* A page has at most one next-action callout. */
.next-action { display: flex; align-items: flex-start; gap: var(--dz-space-16); padding: var(--dz-space-24); border-radius: var(--dz-radius-panel); background: var(--dz-soft); color: var(--dz-ink); }
.next-action__icon { flex: none; padding-top: var(--dz-space-4); color: var(--dz-muted); }
.next-action__icon .rsx-icon { width: 20px; height: 20px; }
.next-action__body { display: grid; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; justify-items: start; min-width: 0; gap: var(--dz-space-12); }
.next-action__body > h3, .next-action__body > h2 { max-width: 38ch; }
.next-action__body > p { max-width: 65ch; }
.next-action__action { margin-top: var(--dz-space-4); max-width: 100%; }
.next-action__action > .rs-btn { max-width: 100%; }
@media (max-width: 760px) {
  .next-action { padding: var(--dz-space-24) var(--dz-space-16); gap: var(--dz-space-12); }
  .next-action__action, .next-action__action > .rs-btn { width: 100%; }
}

.rsx-linkedin-test { display: flex; align-items: center; gap: var(--dz-space-8); color: var(--dz-muted); }