/* Shared P3R control language. Load after page and transition styles.
 * Deliberately scoped: .menu-command geometry, typography and selector remain
 * owned by the main menu. Page rotations and transition transforms are retained.
 */
:root {
  --control-ink: #03071d;
  --control-blue: #061452;
  --control-cyan: #77fefc;
  --control-pink: #ff4293;
  --control-white: #fff;
  --control-muted: #a7c6ea;
  --control-edge: #77fefc70;
}

/* One focus signal across native controls, custom rows and source links. */
.scene :is(
  .global-controls button, .reader-heading > button, .reader-footer > button,
  .reader-nav button, .reader-strip button, .screen-stage button,
  .screen-stage input, .screen-stage summary, .screen-stage a,
  .arc-screen button, .arc-screen a, .music-drawer button,
  .music-drawer a, .diagram-dialog button, .control-hints button
) {
  -webkit-tap-highlight-color: transparent;
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 130ms;
  transition-timing-function: ease-out;
}

.scene :is(
  .global-controls button, .reader-heading > button, .reader-footer > button,
  .reader-nav button, .reader-strip button, .screen-stage button,
  .screen-stage input, .screen-stage summary, .screen-stage a,
  .arc-screen button, .arc-screen a, .music-drawer button,
  .music-drawer a, .diagram-dialog button, .control-hints button
):focus-visible {
  outline: 3px solid var(--control-pink);
  outline-offset: 3px;
}

/* Shell navigation stays compact; its state matches the chapter selectors. */
body .scene .global-controls button,
.reader-heading > button,
.reader-footer > button,
.config-back,
.music-drawer-heading button,
.dialog-close {
  min-height: 34px;
  border: 1px solid var(--control-edge);
  border-radius: 0;
  background: var(--control-blue);
  color: var(--control-cyan);
  text-shadow: none;
  box-shadow: inset 0 -2px 0 #01082b;
}
body .scene .global-controls button { padding: 7px 10px; }
.reader-heading > button { padding: 7px 11px; }
.reader-footer > button { padding: 8px 12px; }
.reader-strip button { -webkit-text-stroke: 0; color: var(--control-blue); }
.reader-footer > button > span { color: inherit; }
.music-drawer-heading button,
.dialog-close { width: 36px; display: grid; place-items: center; padding: 0; }
.dialog-close { z-index: 2; }

body .scene .global-controls button[aria-pressed="true"],
body .scene .global-controls button[aria-expanded="true"],
.reader-footer > button[aria-expanded="true"] {
  color: var(--control-ink);
  background: var(--control-white);
  border-color: var(--control-white);
  box-shadow: inset 0 3px 0 var(--control-pink);
}

/* An action and a selectable row have the same edge, without a universal box. */
.screen-action,
.arc-open {
  color: var(--control-ink);
  background: var(--control-white);
  border: 0;
  border-radius: 0;
  border-top: 3px solid var(--control-pink);
  box-shadow: 4px 4px 0 var(--control-blue);
  min-height: 44px;
  text-shadow: none;
}
.arc-open { border-bottom: 0; }
#confirm-command { min-height: 34px; padding: 4px 7px; }

:is(.party-list, .results-party, .request-list, .reader-nav, .config-tabs, .head-orbits, .music-track-list) button,
.skill-list > button {
  text-shadow: none;
}
.reader-nav button,
.config-tabs button,
.music-track-list button { color: var(--control-cyan); }
.reader-nav button { border-radius: 0; }
.config-tabs { border-radius: 0; overflow: visible; border-bottom: 1px solid var(--control-edge); }
.config-tabs button { border-radius: 0; background: var(--control-blue); }
.config-tabs button:first-child { border-radius: 0; }
.skill-list > button { border-top: 0; }

:is(.party-list, .results-party, .request-list, .reader-nav, .config-tabs, .music-track-list) button:is(.active, [aria-selected="true"], [aria-current="page"], [aria-pressed="true"]),
.skill-list > button:is(.active, [aria-pressed="true"]) {
  color: var(--control-ink);
  background: var(--control-white);
  box-shadow: inset 0 4px 0 var(--control-pink);
  border-radius: 0;
}
:is(.party-list, .results-party) button:is(.active, [aria-pressed="true"]) {
  box-shadow: inset 0 4px 0 var(--control-pink), inset -5px 0 0 var(--control-pink);
}
.reader-nav button.active,
.reader-nav button.active span { color: var(--control-ink); }
.config-tabs button.active { border-radius: 0; }
.skill-list > button.active .skill-symbol { background: var(--control-blue); color: var(--control-cyan); }
.request-list button.active > span { color: #153878; }
.request-list button.active small { background: var(--control-ink); color: var(--control-white); }
.music-track-list button.active small { color: #25406d; }
.music-track-list button.active .track-play { color: #0b2c75; }
.music-track-list button { min-height: 58px; border-bottom: 1px solid #77fefc26; }
.track-play { flex-shrink: 0; }

/* Retain the Dictionary's edge-to-edge highlight and Persona's affinity rings. */
.arc-entry.arc-selected { color: var(--control-ink); }
.arc-entry.arc-selected::before { background: var(--control-white); box-shadow: 0 -4px 0 var(--control-pink); }
.arc-entry.arc-selected .arc-entry-zh { color: #25406d; }
.head-orbits button { flex-shrink: 0; }
.head-orbits button:is(.active, [aria-pressed="true"]) {
  background: var(--control-white);
  color: var(--control-ink);
  box-shadow: inset 0 0 0 3px var(--control-pink);
  outline: 1px solid var(--control-white);
  outline-offset: 3px;
}
.head-orbits button:hover { transform: skewX(-12deg); }
.scene .head-orbits button:focus-visible { outline: 3px solid var(--control-cyan); outline-offset: 4px; }
.scene :is(.party-list, .results-party) button:focus-visible { outline-offset: -6px; }

/* The System selector keeps its original wedge rather than becoming a card. */
.system-options button.selected { color: var(--control-ink); }
.system-options button::before { background: var(--control-pink); }
.system-options button::after { background: var(--control-white); }
.system-scene .system-options button.selected small {
  color: var(--control-cyan);
  background: var(--control-blue);
  width: max-content;
  max-width: 100%;
  padding: 1px 5px;
  transform: none;
}
.scene .system-options button:focus-visible {
  outline: 0;
  text-decoration: underline;
  text-decoration-color: var(--control-pink);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* Config rows highlight the control actually in use, not a permanent first row. */
.config-row:first-child {
  margin: 0;
  padding: 18px 0;
  background: transparent;
  color: inherit;
  border-top: 0;
  border-radius: 0;
}
.config-row:focus-within { box-shadow: -3px 0 0 var(--control-pink); background: #07174455; }
.config-row button {
  color: var(--control-cyan);
  background: var(--control-blue);
  border: 1px solid var(--control-edge);
  border-radius: 0;
  min-height: 40px;
  box-shadow: inset 0 -2px 0 #01082b;
}
.config-row button[aria-pressed="true"] {
  color: var(--control-ink);
  background: var(--control-white);
  border-color: var(--control-white);
  box-shadow: inset 0 3px 0 var(--control-pink);
}
.config-row #setting-track { text-align: left; line-height: 1.7; }

/* Native semantics retained; only the checkbox's painting is replaced. */
.mask-choice { cursor: pointer; }
.mask-choice input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--control-cyan);
  border-radius: 0;
  background: var(--control-blue);
  color: var(--control-ink);
  cursor: pointer;
}
.mask-choice input[type="checkbox"]::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 13px;
  left: 6px;
  top: 1px;
  border: solid currentColor;
  border-width: 0 3px 3px 0;
  transform: rotate(42deg);
  opacity: 0;
}
.mask-choice input[type="checkbox"]:checked {
  background: var(--control-white);
  border-color: var(--control-white);
  box-shadow: -3px 3px 0 var(--control-pink);
}
.mask-choice input[type="checkbox"]:checked::after { opacity: 1; }
.mask-choice:has(input:checked) { color: var(--control-white); }
.mask-choice:focus-within { color: var(--control-white); }

/* The thumb represents the actual native value; no decorative progress fill. */
:is(.position-controls, .config-row) input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  height: 34px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--control-cyan);
  cursor: ew-resize;
  accent-color: var(--control-cyan);
}
:is(.position-controls, .config-row) input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border: 1px solid var(--control-cyan);
  border-radius: 0;
  background: var(--control-blue);
}
:is(.position-controls, .config-row) input[type="range"]::-moz-range-track {
  height: 6px;
  border: 1px solid var(--control-cyan);
  border-radius: 0;
  background: var(--control-blue);
}
:is(.position-controls, .config-row) input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 28px;
  margin-top: -11px;
  border: 2px solid var(--control-blue);
  border-radius: 0;
  background: var(--control-white);
  box-shadow: 3px 3px 0 var(--control-pink);
  transform: skewX(-8deg);
}
:is(.position-controls, .config-row) input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 24px;
  border: 2px solid var(--control-blue);
  border-radius: 0;
  background: var(--control-white);
  box-shadow: 3px 3px 0 var(--control-pink);
  transform: skewX(-8deg);
}
.position-controls input[type="range"]::-webkit-slider-runnable-track { border-color: var(--control-blue); }
.position-controls input[type="range"]::-moz-range-track { border-color: var(--control-blue); }

/* Disclosure is a real native details/summary control, with an explicit state. */
.screen-stage details > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--control-edge);
  border-radius: 0;
  background: var(--control-blue);
  color: var(--control-cyan);
  list-style: none;
  line-height: 1.6;
  touch-action: manipulation;
}
.screen-stage details > summary::-webkit-details-marker { display: none; }
.screen-stage details > summary::marker { content: ''; }
.screen-stage details > summary::before { content: '+'; flex: 0 0 16px; font: 800 19px/1 var(--display); }
.screen-stage details[open] > summary {
  color: var(--control-ink);
  background: var(--control-white);
  border-color: var(--control-white);
  box-shadow: inset 0 3px 0 var(--control-pink);
}
.screen-stage details[open] > summary::before { content: '−'; }
.screen-stage details > :not(summary) { margin-top: 14px; }

/* Sources stay links; matching underlines and focus separate them from prose. */
:is(.screen-sources, .arc-sources, .music-track-list, .config-body) a,
.arc-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: currentColor;
}

@media (hover: hover) {
  body .scene .global-controls button:hover,
  .reader-heading > button:hover,
  .reader-footer > button:hover,
  .config-back:hover,
  .music-drawer-heading button:hover,
  .dialog-close:hover,
  .config-row button:hover {
    color: var(--control-ink);
    background: var(--control-white);
    border-color: var(--control-white);
    box-shadow: inset 0 3px 0 var(--control-pink);
  }
  .screen-action:hover,
  .arc-open:hover { color: var(--control-ink); background: var(--control-cyan); }
  #confirm-command:hover { background: var(--control-blue); color: var(--control-cyan); }
  :is(.party-list, .results-party, .request-list, .reader-nav, .config-tabs, .music-track-list) button:hover,
  .skill-list > button:hover {
    color: var(--control-ink);
    background: var(--control-white);
    box-shadow: inset 0 4px 0 var(--control-pink);
  }
  :is(.party-list, .results-party) button:hover { box-shadow: inset 0 4px 0 var(--control-pink), inset -5px 0 0 var(--control-pink); }
  .request-list button:hover > span,
  .results-party button:hover .party-role,
  .results-party button:hover small strong,
  .music-track-list button:hover small { color: #153878; }
  .request-list button:hover small { background: var(--control-ink); color: var(--control-white); }
  .skill-list > button:hover .skill-symbol { background: var(--control-blue); color: var(--control-cyan); }
  .arc-screen .arc-entry:hover { color: var(--control-ink); }
  .arc-entry:hover::before { opacity: 1; background: var(--control-white); box-shadow: 0 -4px 0 var(--control-pink); }
  .arc-entry:hover .arc-entry-zh { color: #25406d; }
  .head-orbits button:hover { background: var(--control-white); color: var(--control-ink); box-shadow: inset 0 0 0 3px var(--control-pink); }
  .screen-stage details > summary:hover { color: var(--control-ink); background: var(--control-white); box-shadow: inset 0 3px 0 var(--control-pink); }
  :is(.screen-sources, .arc-sources, .music-track-list, .config-body) a:hover,
  .arc-link:hover { color: var(--control-white); background: var(--control-blue); text-decoration-color: var(--control-pink); }
}

.scene :is(
  .global-controls button, .reader-heading > button, .reader-footer > button,
  .config-back, .screen-action, .arc-open, .config-row button,
  .music-drawer-heading button, .dialog-close, .control-hints button
):active { box-shadow: inset 0 0 0 3px var(--control-pink); }
:is(.party-list, .results-party, .request-list, .reader-nav, .config-tabs, .music-track-list) button:active,
.skill-list > button:active,
.head-orbits button:active { background: var(--control-cyan); color: var(--control-ink); }
.arc-entry:active::before,
.system-options button:active::after { background: var(--control-cyan); }
.scene :is(.screen-stage button, .global-controls button, .reader-nav button, .arc-screen button, .music-drawer button):disabled {
  cursor: not-allowed;
  opacity: .45;
  color: var(--control-muted);
  background: var(--control-blue);
  box-shadow: none;
}

/* Coarse pointer controls are at least 44px. The eight Persona controls scroll
 * within their existing horizontal band instead of covering the skills below. */
@media (pointer: coarse), (max-width: 640px) {
  body .scene .global-controls button,
  .reader-heading > button,
  .reader-footer > button,
  .reader-nav button,
  .reader-strip button,
  .config-back,
  .config-tabs button,
  .config-row button,
  .music-drawer-heading button,
  .dialog-close,
  #confirm-command { min-height: 44px; }
  .music-drawer-heading button,
  .dialog-close { width: 44px; }
  :is(.position-controls, .config-row) input[type="range"] { height: 44px; }
  .mask-choice { min-height: 44px; }
  .screen-sources a,
  .arc-link,
  .music-track-list a { min-height: 44px; display: flex; align-items: center; }
  .music-track-list a { justify-content: flex-end; }
  .head-orbits { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--control-cyan) var(--control-blue); padding: 7px 6px 10px; }
  .head-orbits button { min-width: 44px; min-height: 44px; flex: 0 0 44px; }
  .head-orbits::-webkit-scrollbar { height: 4px; }
  .head-orbits::-webkit-scrollbar-thumb { background: var(--control-cyan); }
}
@media (max-width: 640px) and (orientation: portrait) {
  body .scene .global-controls button { font-size: 9px; padding: 7px; }
  body.reading .scene .global-controls { gap: 4px; }
  .reader-heading { height: 44px; }
  .reader-heading > div { display: none; }
  .reader-heading > button { padding: 6px 9px; }
  .reader-footer > button { padding: 7px 10px; }
  .head-orbits { justify-content: flex-start; gap: 8px; }
  .config-tabs button { font-size: 15px; }
  .config-row { gap: 18px; }
  .config-row:first-child { padding: 18px 0; }
  .config-row #setting-track { min-width: 106px; }
  .diagram-dialog { padding-top: 52px; }
}

/* Controls remain immediate when movement is disabled, including the shell. */
body.paused .scene :is(button, a, input, summary),
body.paused .scene :is(button, a, input, summary)::before,
body.paused .scene :is(button, a, input, summary)::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .scene :is(button, a, input, summary),
  .scene :is(button, a, input, summary)::before,
  .scene :is(button, a, input, summary)::after { transition: none !important; }
}
@media (forced-colors: active) {
  .scene :is(button, a, input, summary):focus-visible { outline-color: Highlight; }
  .mask-choice input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; }
  .mask-choice input[type="checkbox"]::after { display: none; }
  :is(.position-controls, .config-row) input[type="range"] { appearance: auto; -webkit-appearance: auto; }
  :is(.party-list, .results-party, .request-list, .reader-nav, .config-tabs, .music-track-list) button.active,
  .skill-list > button.active,
  .arc-entry.arc-selected { outline: 2px solid Highlight; outline-offset: -2px; }
}