.rsdt { padding: clamp(1rem, 3vw, 2rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; margin-block: 1.5rem; color: var(--color-text); }
.rsdt__intro { max-width: 48rem; margin-bottom: 1.8rem; }
.rsdt__eyebrow { color: var(--color-primary); text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; font-weight: 650; }
.rsdt__intro h2 { margin-block: .5rem .8rem; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.25; }
.rsdt__intro p { line-height: 1.65; }
.rsdt__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; border-block: 1px solid var(--color-border); padding-block: 1.4rem; }
.rsdt__field { display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; font-weight: 550; }
.rsdt select { width: 100%; min-height: 46px; padding: .65rem 2rem .65rem .75rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); font: inherit; color: var(--color-text); }
.rsdt__types, .rsdt__origins { grid-column: 1 / -1; }
.rsdt__types summary { cursor: pointer; padding-block: .65rem; font-weight: 550; }
.rsdt__typeOptions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; margin-block: .7rem; }
.rsdt__check { display: flex; align-items: center; gap: .65rem; min-height: 40px; font-size: .9rem; cursor: pointer; }
.rsdt input[type=checkbox] { flex: 0 0 auto; width: 19px; height: 19px; accent-color: var(--color-primary); }
.rsdt__count { font-size: .88rem; color: var(--color-text-soft); margin-block: 1rem; }
.rsdt .rsdt__button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; box-sizing: border-box; padding: .7rem 1.15rem; border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-heading)); border-radius: 7px; background: var(--color-heading); color: var(--color-surface); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.rsdt .rsdt__button:hover { background: color-mix(in srgb, var(--color-heading) 88%, var(--color-accent)); color: var(--color-surface); }
.rsdt .rsdt__button--secondary { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); }
.rsdt .rsdt__button--secondary:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); color: var(--color-text); }
.rsdt button:disabled, .rsdt__button[aria-disabled="true"] { cursor: default; opacity: .55; }
.rsdt button:focus-visible, .rsdt a:focus-visible, .rsdt select:focus-visible, .rsdt summary:focus-visible, .rsdt input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.rsdt__status { min-height: 1.6em; font-size: .9rem; line-height: 1.55; margin-block: 1rem; }

.rsdt__dictionary { display: block; width: fit-content; margin: 1.25rem auto 0; }

.rsdt__app { scroll-margin-top: 6rem; }
.rsdt--game { padding: clamp(1rem, 2.5vw, 1.5rem); }
.rsdt--game .rsdt__intro { max-width: none; margin-bottom: .45rem; }
.rsdt--game .rsdt__intro h1 { margin: 0; font-size: clamp(1.35rem, 2.7vw, 1.8rem); line-height: 1.3; }
.rsdt__context { margin-bottom: 1rem; }
.rsdt__selectionSummary { margin-block: .3rem .5rem; color: var(--color-text-soft); font-size: .88rem; line-height: 1.5; }
.rsdt__navigation { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .88rem; }
.rsdt__navigation a { color: var(--color-primary); padding-block: .3rem; text-underline-offset: .2em; }
/* The locked article wrapper disables pointer events; its safe recovery link stays usable. */
.rsdt--unavailable .rsdt__recovery { pointer-events: auto; }
@media (max-width: 540px) { .rsdt__controls { grid-template-columns: 1fr; } }