/* The Research Desk (src/sim/desk-ui.js). The instrument parts follow src/games/games.css and DESIGN.md: a warm metal
   instrument, a dark dot-matrix screen, keycaps, a lamp, LEDs and a thermal slip. What you read sits on flat sheets.
   Uses the study.css variables, so light and dark both work. Needs the Doto font for the screen (see the board). */

/* The desk lays itself out by its own width (container queries), so it works full width on a board and inside a
   narrow lesson column alike. */
.rdx { --dots: "Doto", ui-monospace, monospace; --scr: #131210; --scr-dim: rgba(255, 140, 90, .5);
  container-type: inline-size; max-width: 1120px; margin: 0 auto; color: var(--ink); font-family: var(--sans); }
.rdx-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "sheet" "desk" "notes" "foot"; gap: 18px; }
.rdx [hidden] { display: none !important; }
.rdx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@container (min-width: 940px) {
  .rdx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); grid-template-areas: "sheet desk" "notes desk" "foot desk"; grid-template-rows: auto auto 1fr; column-gap: 36px; row-gap: 20px; align-items: start; }
}

/* ---------------------------------------------------------------- the flat sheets: the brief and the notes */
.rdx-sheet, .rdx-notes { padding: 22px 22px 24px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
.rdx-sheet { grid-area: sheet; }
.rdx-notes { grid-area: notes; }
.rdx-h { margin: 0 0 12px; font: 380 30px/1.06 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; text-wrap: balance; }
@container (min-width: 600px) { .rdx-h { font-size: 38px; } }
.rdx-h i, .rdx-h3 i { font-style: italic; }
.rdx-sheet p { margin: 10px 0 0; max-width: 64ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.rdx-sheet .rdx-q { margin-top: 0; color: var(--ink); font-weight: 500; }
.rdx-h3 { margin: 22px 0 8px; padding-top: 18px; border-top: 1px solid var(--rule); font: 500 15.5px/1.3 var(--sans); color: var(--ink); }
.rdx-notes .rdx-h3 { margin-top: 0; padding-top: 0; border-top: 0; font: 380 24px/1.1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.015em; }
.rdx-how { margin: 0; padding: 0; list-style: none; counter-reset: how; }
.rdx-how li { position: relative; margin-top: 10px; padding-left: 30px; max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); counter-increment: how; }
.rdx-how li::before { content: counter(how); position: absolute; left: 0; top: -1px; font: 400 19px/1.3 var(--serif); font-style: italic; color: var(--ink-3); }
.rdx-how b { font-weight: 500; color: var(--ink); }
.rdx-how em { font-style: normal; font-weight: 500; color: var(--ink); }
.rdx-dl { margin: 0; }
.rdx-dl dt { margin-top: 14px; font: 500 15.5px/1.35 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.rdx-dl dt:first-child { margin-top: 4px; }
.rdx-dl dd { margin: 3px 0 0; max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.rdx-foot { grid-area: foot; margin: 0 4px; max-width: 70ch; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* ---------------------------------------------------------------- the instrument */
.rdx-desk { grid-area: desk; min-width: 0; }
.rdx-inst {
  padding: 12px 12px 14px; border-radius: 18px;
  background: linear-gradient(170deg, #E4E1DA 0%, #D6D2CA 55%, #CBC7BE 100%);
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .08), 0 0 0 1px rgba(60, 48, 30, .12);
}
@container (min-width: 600px) { .rdx-inst { padding: 14px 16px 16px; } }
.rdx-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rdx-grill { flex: none; width: 46px; height: 28px; border-radius: 6px; background-image: radial-gradient(circle, rgba(40, 34, 26, .55) 1.6px, transparent 2px); background-size: 7px 7px; opacity: .65; }
.rdx-id { min-width: 0; line-height: 1.1; }
.rdx-id b { display: block; font: 700 12px var(--sans); letter-spacing: .3em; color: #4A463F; white-space: nowrap; }
.rdx-id small { display: block; margin-top: 3px; font-size: 11.5px; color: #7A756C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdx-stars { display: flex; gap: 5px; margin-left: auto; }
.rdx-stars i { width: 9px; height: 9px; border-radius: 50%; background: #8F887C; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.rdx-stars i.on { background: #FF6A2B; box-shadow: 0 0 8px rgba(255, 90, 31, .8); }
.rdx-lamp { flex: none; width: 32px; height: 32px; border-radius: 50%; position: relative; background: radial-gradient(circle at 50% 40%, #CFCAC1, #B5B0A6); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .6); }
.rdx-lamp i { position: absolute; inset: 8px; border-radius: 50%; background: #6E665A; transition: background-color .9s var(--ease), box-shadow .9s var(--ease); }
.rdx-lamp.run i { background: #D0652C; box-shadow: 0 0 10px rgba(255, 90, 31, .45); animation: rdx-pulse .9s ease-in-out infinite; }
.rdx-lamp.pass i { background: #23885A; box-shadow: 0 0 14px rgba(35, 136, 90, .85), 0 0 30px rgba(35, 136, 90, .35); }
.rdx-lamp.half i { background: #FF6A2B; box-shadow: 0 0 12px rgba(255, 90, 31, .7); }
.rdx-lamp.fail i { background: #D23F2A; box-shadow: 0 0 10px rgba(210, 63, 42, .6); }

/* the dot-matrix screen */
.rdx-screen {
  position: relative; overflow: hidden; padding: 8px 10px 4px; border-radius: 10px; background-color: var(--scr);
  background-image: radial-gradient(rgba(255, 255, 255, .035) 0.8px, transparent 1.1px); background-size: 4px 4px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .55);
}
.rdx-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(255, 255, 255, .02) 2px 3px); }
.rdx-read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 40px; }
.rdx-read > span { min-width: 0; }
.rdx-read > span:nth-child(2) { text-align: center; }
.rdx-read > span:nth-child(3) { text-align: right; }
.rdx-read small { display: block; font: 10.5px/1.2 var(--mono); color: var(--scr-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdx-read b { display: block; margin-top: 1px; font: 800 21px/1.1 var(--dots); color: #FF5A1F; text-shadow: 0 0 6px rgba(255, 90, 31, .45); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rdx-read b.down { color: #FF6A5A; text-shadow: 0 0 6px rgba(255, 106, 90, .45); }
.rdx-read b .pt { display: inline-block; width: .15em; height: .15em; margin: 0 .07em 0 .05em; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; vertical-align: .02em; }
.rdx-plot { position: relative; height: 172px; margin: 2px -4px 0; }
@container (min-width: 500px) { .rdx-plot { height: 236px; } }
.rdx-plot canvas { display: block; width: 100%; height: 100%; transition: opacity .2s var(--ease); }
.rdx-screen.stale canvas { opacity: .4; }
.rdx-tag { position: absolute; top: 6px; left: 34px; font: 800 13px var(--dots); color: #FF7A45; text-shadow: 0 0 6px rgba(255, 90, 31, .5); }

/* versions tried: a strip of LEDs, never a number */
.rdx-tries { display: flex; align-items: center; gap: 10px; margin: 10px 2px 10px; }
.rdx-tries small { flex: none; font-size: 11.5px; color: #7A756C; }
.rdx-tries span { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.rdx-tries i { width: 8px; height: 8px; border-radius: 50%; background: #9C958A; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); transition: background-color .3s, box-shadow .3s; }
.rdx-tries i.on { background: #FF6A2B; box-shadow: 0 0 6px rgba(255, 90, 31, .75); }
.rdx-tries i.lit { animation: rdx-lit .7s var(--ease); }
.rdx-tries b { margin-left: 2px; font: 700 12px/1 var(--sans); color: #9C958A; }
.rdx-tries b.on { color: #FF5A1F; text-shadow: 0 0 6px rgba(255, 90, 31, .7); }

/* levers: a label, then keycaps */
.rdx-levers { display: grid; gap: 7px; }
.rdx-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 8px; }
.rdx-rl { font-size: 13px; font-weight: 500; line-height: 1.15; color: #4A463F; }
.rdx-rl small { display: block; font-size: 11.5px; font-weight: 400; color: #7A756C; }
.rdx-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rdx-toggles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.rdx-run { display: grid; grid-template-columns: 1fr 1fr 1.7fr; gap: 6px; margin-top: 12px; }
.rdx-run.done { display: none; }

/* keys (the workshop's keycaps) */
.rdx-key {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 5px 8px;
  border: 0; border-radius: 9px; font: 500 14px/1.2 var(--sans); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums; transition: transform .09s var(--ease), box-shadow .14s var(--ease), filter .16s var(--ease), color .16s var(--ease);
}
.rdx-key:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.rdx-key:active { transform: translateY(2px); }
.rdx-key span small { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; opacity: .68; }
.rdx-key span { text-align: left; }
.rdx-key.light {
  background: linear-gradient(#F7F5F0, #E9E6DF); color: var(--ink);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(60, 48, 30, .14);
}
.rdx-key.light:active, .rdx-key.light[aria-pressed="true"] { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), inset 0 1px 2px rgba(0, 0, 0, .08); transform: translateY(2px); background: linear-gradient(#ECE9E2, #E4E0D8); }
.rdx-key.light[aria-pressed="true"] { color: #C2410C; font-weight: 700; }
.rdx-tog { justify-content: flex-start; gap: 7px; min-height: 48px; padding: 6px 9px; font-size: 13px; line-height: 1.15; text-align: left; }
.rdx-tog .led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #A39C90; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); transition: background-color .2s, box-shadow .2s; }
.rdx-key.light.rdx-tog[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
.rdx-tog[aria-pressed="true"] .led { background: #FF5A1F; box-shadow: 0 0 6px rgba(255, 90, 31, .8); }
.rdx-key.dark {
  color: #F6F3EC; background: linear-gradient(#3A3936, #262523);
  box-shadow: inset 0 -3px 0 #171614, inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .18), 0 4px 10px rgba(0, 0, 0, .12);
}
.rdx-key.dark:hover { filter: brightness(1.08); }
.rdx-key.dark:active { box-shadow: inset 0 -1px 0 #171614, inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 1px rgba(0, 0, 0, .2); }
.rdx-key.dark .led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #FF5A1F; box-shadow: 0 0 6px rgba(255, 90, 31, .7); }
.rdx-key.dark.ready .led { animation: rdx-blink 1.1s ease-in-out infinite; }
.rdx-key.wide { min-height: 52px; font-size: 15px; }
.rdx-key:disabled { opacity: .45; cursor: default; transform: none; }
.rdx-run .rdx-key { min-height: 52px; }

.rdx-say { min-height: 3em; margin: 12px 4px 0; max-width: 62ch; font-size: 15px; line-height: 1.5; color: var(--ink); }

/* ---------------------------------------------------------------- the report the desk prints */
.rdx-out { margin: 4px -6px 0; padding: 0 18px 24px; overflow: hidden; }
.rdx-slip {
  position: relative; padding: 24px 18px 28px; background: #FFFEFA; color: #2A2723;
  font: 12px/1.55 var(--mono); letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(40, 30, 20, .10), 0 8px 18px rgba(40, 30, 20, .10);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 7px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 7px repeat-x;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .05), transparent 18px);
}
.rdx-slip.print { animation: rdx-print 1.8s steps(22, end) both; }
.rdx-slip .sl-top { text-align: center; font-size: 10.5px; letter-spacing: .14em; color: #6E685E; }
.rdx-slip .sl-k { margin-top: 8px; font-size: 10.5px; letter-spacing: .16em; color: #6E685E; }
.rdx-slip .sl-v { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }
.rdx-slip .sl-rule { height: 0; margin: 12px 0; border-top: 1.5px dashed rgba(42, 39, 35, .35); }
.rdx-slip .sl-row { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.rdx-slip .sl-row i { flex: 1; border-bottom: 1.5px dotted rgba(42, 39, 35, .4); transform: translateY(-3px); }
.rdx-slip .sl-two { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em 4.6em; gap: 6px; margin-top: 3px; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.rdx-slip .sl-two span:not(:first-child) { text-align: right; }
.rdx-slip .sl-two:first-of-type { font-size: 10.5px; letter-spacing: .12em; color: #6E685E; }
.rdx-slip .sl-chart { display: block; width: 100%; height: 96px; margin-top: 14px; }
.rdx-slip .c-you, .rdx-slip .c-best, .rdx-slip .c-cut { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rdx-slip .c-you { stroke: #2A2723; stroke-width: 1.7; }
.rdx-slip .c-best { stroke: #2A2723; stroke-width: 1.3; stroke-dasharray: 4 3; }
.rdx-slip .c-cut { stroke: rgba(42, 39, 35, .45); stroke-width: 1; stroke-dasharray: 1 3; }
.rdx-slip .sl-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 10.5px; color: #6E685E; }
.rdx-slip .sl-key i { display: inline-block; width: 16px; margin-right: 5px; vertical-align: 3px; border-top: 1.7px solid #2A2723; }
.rdx-slip .sl-key .k-best { border-top: 1.3px dashed #2A2723; }
.rdx-slip .sl-key .k-cut { width: 0; height: 11px; margin-right: 6px; vertical-align: -1px; border-top: 0; border-left: 1.5px dotted #2A2723; }
.rdx-slip .sl-checks div { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 11px; letter-spacing: .06em; line-height: 1.4; }
.rdx-slip b { flex: none; display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid #2A2723; transform: translateY(1px); }
.rdx-slip b.on { background: #2A2723; }
.rdx-slip .sl-lamps { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; letter-spacing: .14em; }
.rdx-slip .sl-lamps span { margin-left: 6px; }
.rdx-slip .sl-now { margin: 0; font: 13px/1.55 var(--sans); letter-spacing: 0; color: #3A3732; }
.rdx-after { display: grid; margin: 14px -12px 0; }
.rdx-after .rdx-key { justify-content: center; }

/* ---------------------------------------------------------------- dark mode */
[data-theme="dark"] .rdx-sheet, [data-theme="dark"] .rdx-notes { box-shadow: 0 0 0 1px var(--rule); }
[data-theme="dark"] .rdx-inst { background: linear-gradient(170deg, #3B3935 0%, #33312D 55%, #2C2A27 100%); box-shadow: var(--lift-2), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .4); }
[data-theme="dark"] .rdx-id b, [data-theme="dark"] .rdx-rl { color: #CFC9BE; }
[data-theme="dark"] .rdx-id small, [data-theme="dark"] .rdx-rl small, [data-theme="dark"] .rdx-tries small { color: #9A9387; }
[data-theme="dark"] .rdx-grill { background-image: radial-gradient(circle, rgba(0, 0, 0, .7) 1.6px, transparent 2px); }
[data-theme="dark"] .rdx-screen { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .08); }
[data-theme="dark"] .rdx-tries i, [data-theme="dark"] .rdx-stars i { background: #57524B; }
[data-theme="dark"] .rdx-tries i.on, [data-theme="dark"] .rdx-stars i.on { background: #FF6A2B; }
[data-theme="dark"] .rdx-key.light { background: linear-gradient(#4A4743, #3D3A36); color: #EDE8DF; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .3); }
[data-theme="dark"] .rdx-key.light[aria-pressed="true"] { background: linear-gradient(#3B3834, #34312E); color: #FF8A5B; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35), inset 0 1px 2px rgba(0, 0, 0, .3); }
[data-theme="dark"] .rdx-key.light.rdx-tog[aria-pressed="true"] { color: #EDE8DF; }
[data-theme="dark"] .rdx-tog .led { background: #6B655C; }
[data-theme="dark"] .rdx-tog[aria-pressed="true"] .led { background: #FF5A1F; box-shadow: 0 0 6px rgba(255, 90, 31, .8); }
[data-theme="dark"] .rdx-lamp { background: radial-gradient(circle at 50% 40%, #55524C, #3E3B37); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .08); }
[data-theme="dark"] .rdx-key.dark { background: linear-gradient(#5A5752, #46433F); box-shadow: inset 0 -3px 0 #2A2825, inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .3); }
[data-theme="dark"] .rdx-slip { background-color: #F4F1EA; }

@keyframes rdx-pulse { 50% { box-shadow: 0 0 16px rgba(255, 90, 31, .75), 0 0 30px rgba(255, 90, 31, .3); } }
@keyframes rdx-blink { 50% { opacity: .25; box-shadow: none; } }
@keyframes rdx-lit { 0% { transform: scale(1.8); box-shadow: 0 0 14px rgba(255, 90, 31, 1); } 100% { transform: none; } }
@keyframes rdx-print { from { transform: translateY(-101%); } }
@media (prefers-reduced-motion: reduce) {
  .rdx *, .rdx *::before, .rdx *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- v2 (user, 2026-11-04: "this is so bad, make it proper")
   The site's own language instead of an instrument: a card with a plain header, a light paper chart (light in both
   themes, like the folders), pill choices for the numbers, check chips for the switches, one dark key, and the report
   as a clean card. Same behaviour; only the look changed. */
.rdx-inst, [data-theme="dark"] .rdx-inst { padding: 22px; border-radius: 24px; background: var(--card); box-shadow: var(--lift-1), 0 0 0 1px var(--rule); }
.rdx-grill, .rdx-lamp { display: none; }
.rdx-top { margin-bottom: 14px; align-items: flex-end; }
.rdx-id b, [data-theme="dark"] .rdx-id b { font: 400 24px/1.1 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.rdx-id small, [data-theme="dark"] .rdx-id small { margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }
.rdx-stars { align-self: center; gap: 4px; }
.rdx-stars i, [data-theme="dark"] .rdx-stars i { width: 12px; height: 4px; border-radius: 3px; background: var(--rule-2, var(--rule)); box-shadow: none; }
.rdx-stars i.on, [data-theme="dark"] .rdx-stars i.on { background: var(--ink); box-shadow: none; }

/* the chart: light paper */
.rdx-screen, [data-theme="dark"] .rdx-screen { padding: 14px 16px 8px; border-radius: 16px; background: #FCFBF8; background-image: none; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .1); }
.rdx-screen::after { content: none; }
.rdx-read { min-height: 50px; }
.rdx-read small { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(29, 28, 26, .5); }
.rdx-read b { margin-top: 3px; font: 400 26px/1.1 var(--serif); letter-spacing: -.01em; color: #1D1C1A; text-shadow: none; }
.rdx-read b.down { color: #C2410C; text-shadow: none; }
.rdx-tag { top: 8px; left: 36px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 90, 31, .1); font: 600 12px var(--sans); color: #C2410C; text-shadow: none; }
.rdx-screen.stale canvas { opacity: .35; }

/* versions tried: small dots */
.rdx-tries { margin: 14px 2px 16px; }
.rdx-tries small, [data-theme="dark"] .rdx-tries small { font-size: 13px; color: var(--ink-3); }
.rdx-tries i, [data-theme="dark"] .rdx-tries i { width: 7px; height: 7px; background: var(--rule-2, var(--rule)); box-shadow: none; }
.rdx-tries i.on, [data-theme="dark"] .rdx-tries i.on { background: var(--ink); box-shadow: none; }
.rdx-tries b { color: var(--ink-3); } .rdx-tries b.on { color: var(--ink); text-shadow: none; }

/* the choices: a label, then a pill group */
.rdx-levers { gap: 12px; }
.rdx-row { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
.rdx-rl, [data-theme="dark"] .rdx-rl { font-size: 14.5px; color: var(--ink); }
.rdx-rl small, [data-theme="dark"] .rdx-rl small { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.rdx-keys { gap: 2px; padding: 4px; border-radius: 999px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rule); }
.rdx-keys .rdx-key.light, [data-theme="dark"] .rdx-keys .rdx-key.light { min-height: 38px; border-radius: 999px; background: transparent; box-shadow: none; color: var(--ink-2); font-weight: 500; transform: none; }
.rdx-keys .rdx-key.light:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.rdx-keys .rdx-key.light[aria-pressed="true"], [data-theme="dark"] .rdx-keys .rdx-key.light[aria-pressed="true"] { background: var(--ink); color: var(--card); font-weight: 600; box-shadow: none; transform: none; }

/* the switches: check chips */
.rdx-toggles { gap: 8px; margin-top: 4px; }
.rdx-key.light.rdx-tog, [data-theme="dark"] .rdx-key.light.rdx-tog { gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 13px; background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2, var(--rule)); color: var(--ink); font-size: 14px; font-weight: 500; transform: none; }
.rdx-key.light.rdx-tog:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.rdx-key.light.rdx-tog[aria-pressed="true"], [data-theme="dark"] .rdx-key.light.rdx-tog[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-weight: 500; }
.rdx-tog .led, [data-theme="dark"] .rdx-tog .led { position: relative; width: 16px; height: 16px; border-radius: 5px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.rdx-tog[aria-pressed="true"] .led, [data-theme="dark"] .rdx-tog[aria-pressed="true"] .led { background: var(--ink); box-shadow: none; }
.rdx-tog[aria-pressed="true"] .led::after { content: ""; position: absolute; left: 5.5px; top: 2.5px; width: 4px; height: 8px; border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* the keys at the bottom: a quiet link, an outlined Submit, one dark Test it */
.rdx-run { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 20px; }
.rdx-run .rdx-key.light, [data-theme="dark"] .rdx-run .rdx-key.light { min-height: 52px; padding: 0 20px; border-radius: 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2, var(--rule)); color: var(--ink); font-weight: 500; transform: none; }
.rdx-run .rdx-key.light:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.rdx-run [data-data].rdx-key.light, [data-theme="dark"] .rdx-run [data-data].rdx-key.light { padding: 0 6px; box-shadow: none; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-2, var(--rule)); text-underline-offset: 5px; }
.rdx-run [data-data][aria-pressed="true"] { color: var(--ink); text-decoration-color: var(--ink); }
.rdx-key.dark, [data-theme="dark"] .rdx-key.dark { background: var(--ink); color: var(--card); box-shadow: none; border-radius: 14px; }
.rdx-key.dark:hover { filter: none; opacity: .92; }
.rdx-key.dark .led { display: none; }
.rdx-key.dark span small { opacity: .65; }
.rdx-key:active { transform: translateY(1px); }
.rdx-key:focus-visible { outline: 2px solid var(--ink); }
.rdx-say { margin-top: 14px; font-size: 15px; color: var(--ink-2); }

/* the report: a clean card */
.rdx-out { margin: 16px 0 0; padding: 0; overflow: visible; }
.rdx-slip, [data-theme="dark"] .rdx-slip { padding: 26px 26px 28px; border-radius: 22px; background: var(--card); background-image: none; color: var(--ink); font: 14.5px/1.55 var(--sans); letter-spacing: 0; box-shadow: var(--lift-1), 0 0 0 1px var(--rule); -webkit-mask: none; mask: none; }
.rdx-slip.print { animation: rdx-rise .45s var(--ease) both; }
@keyframes rdx-rise { from { opacity: 0; transform: translateY(8px); } }
.rdx-slip .sl-top { text-align: left; font: 400 28px/1.1 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.rdx-slip .sl-top i { font-style: italic; }
.rdx-slip .sl-k { margin-top: 4px; font: 13.5px var(--sans); letter-spacing: 0; color: var(--ink-3); }
.rdx-slip .sl-v { font-size: 14px; color: var(--ink-2); }
.rdx-slip .sl-rule { margin: 18px 0; border-top: 1px solid var(--rule); }
.rdx-slip .sl-row, .rdx-slip .sl-two { margin-top: 6px; text-transform: none; font-size: 14.5px; }
.rdx-slip .sl-row i { border-bottom: 1px dotted var(--rule-2, var(--rule)); }
.rdx-slip .sl-two:first-of-type { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rdx-slip .c-you { stroke: var(--ink); stroke-width: 2; }
.rdx-slip .c-best { stroke: var(--ink-3); }
.rdx-slip .c-cut { stroke: var(--rule-2, var(--rule)); }
.rdx-slip .sl-key { font-size: 12.5px; color: var(--ink-3); }
.rdx-slip .sl-key i { border-top-color: var(--ink); } .rdx-slip .sl-key .k-best { border-top-color: var(--ink-3); } .rdx-slip .sl-key .k-cut { border-left-color: var(--ink-3); }
.rdx-slip .sl-checks div { margin-top: 8px; font-size: 14.5px; letter-spacing: 0; }
.rdx-slip b { width: 14px; height: 14px; border: 1.6px solid var(--ink-3); transform: translateY(2px); }
.rdx-slip b.on { background: var(--green); border-color: var(--green); }
.rdx-slip .sl-lamps { margin-top: 16px; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.rdx-slip .sl-now { font-size: 15px; color: var(--ink); }
.rdx-after { margin: 14px 0 0; }
@media (max-width: 560px) {
  .rdx-inst { padding: 16px; border-radius: 20px; }
  .rdx-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rdx-toggles { grid-template-columns: minmax(0, 1fr); }
  .rdx-run { grid-template-columns: auto auto; }
  .rdx-run .rdx-key.dark { grid-column: 1 / -1; grid-row: 1; }
  .rdx-read b { font-size: 21px; }
}

/* ---------------------------------------------------------------- v3 (user, 2026-11-04: "not liking the side by side,
   make it more uniform and mobile friendly"): one centred column at every width. The brief (its three rules side by
   side when there's room), then the desk with a taller chart, then what the numbers mean and the report. */
.rdx { max-width: 920px; }
@container (min-width: 940px) { .rdx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sheet" "desk" "notes" "foot"; column-gap: 0; row-gap: 18px; } }
.rdx-sheet, .rdx-notes { padding: 32px 36px 34px; border-radius: 24px; box-shadow: var(--lift-1), 0 0 0 1px var(--rule); }
.rdx-h { font-size: clamp(30px, 4vw, 42px); }
.rdx-sheet p { max-width: 70ch; }
@container (min-width: 700px) {
  .rdx-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .rdx-how li { margin-top: 0; padding: 0; max-width: none; }
  .rdx-how li::before { position: static; display: block; margin-bottom: 6px; font-size: 26px; line-height: 1; }
  .rdx-plot { height: 300px; }
  .rdx-inst, [data-theme="dark"] .rdx-inst { padding: 28px 30px 30px; }
  .rdx-toggles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rdx-say { margin: 16px 4px 0; max-width: 70ch; }
.rdx-notes .rdx-dl dd { max-width: 70ch; }
.rdx-foot { max-width: 70ch; }
@container (max-width: 560px) {
  .rdx-sheet, .rdx-notes { padding: 24px 20px 26px; border-radius: 20px; }
  .rdx-plot { height: 220px; }
}
/* v4 (2026-11-04: "make it look professional"): calmer type in the brief. The heading is a section heading, not a second
   page title; the question under it is plain body text; the three rules are small numbered steps. */
.rdx-h { font-size: clamp(26px, 3vw, 32px); line-height: 1.12; margin-bottom: 10px; }
.rdx-sheet .rdx-q { font-weight: 400; color: var(--ink); font-size: 16px; }
.rdx-h3 { margin-top: 24px; padding-top: 22px; font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.rdx-how { counter-reset: how; }
.rdx-how li { font-size: 14.5px; }
.rdx-how li::before { content: counter(how); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rule-2, var(--rule)); font: 600 12px var(--mono); font-style: normal; color: var(--ink-2); }
@container (min-width: 700px) { .rdx-how li::before { margin-bottom: 10px; font-size: 12px; line-height: 26px; } }
@container (max-width: 699px) { .rdx-how li { padding-left: 40px; } .rdx-how li::before { position: absolute; left: 0; top: 0; } }
.rdx-id b, [data-theme="dark"] .rdx-id b { font-size: 26px; }
.rdx-stars { display: none !important; } /* the result lives on the case card, in words (2026-11-04) */
/* The lines under the desk run the full width of the column, like the cards (user, 2026-11-04). */
.rdx-say, .rdx-foot, .rdx-sheet p, .rdx-notes .rdx-dl dd { max-width: none; }
.rdx-say { margin-left: 2px; margin-right: 2px; }
.rdx-foot { margin-left: 2px; margin-right: 2px; }