/* Shared control states: filled selection, quiet edges, and one keyboard cue.
   Loaded after each tool's styles; no changes to chart data or semantic colours. */
:root {
  --xq-state-border:#43565e;
  --xq-state-surface:#1b2c32;
  --xq-state-selected:#283e42;
  --xq-state-text:#e1f2ed;
  --xq-state-accent:#9accc0;
  --xq-state-focus:rgba(154,204,192,.48);
  --xq-state-shadow:0 4px 14px #0002;
}
html[data-theme="light"],
body:is(.library-page,.xunq-header-page-renti-app) {
  --xq-state-border:#8ca7a2;
  --xq-state-surface:#f1f7f4;
  --xq-state-selected:#dcece6;
  --xq-state-text:#20574d;
  --xq-state-accent:#397f70;
  --xq-state-focus:rgba(57,127,112,.5);
  --xq-state-shadow:0 3px 12px #173f320c;
}
/* Header and account sheets keep their own dark surfaces on light tools. */
html body :is(.xunq-site-header,.xunq-account-dialog,#birthWheelDialog) {
  --xq-state-border:#43565e;
  --xq-state-surface:#1b2c32;
  --xq-state-selected:#283e42;
  --xq-state-text:#e1f2ed;
  --xq-state-accent:#9accc0;
  --xq-state-focus:rgba(154,204,192,.48);
  --xq-state-shadow:0 4px 14px #0002;
}
html[data-theme="light"] body.xunq-header-page-portal .xunq-site-header {
  --xq-state-selected:#dcece6; --xq-state-text:#20574d;
  --xq-state-accent:#397f70; --xq-state-focus:rgba(57,127,112,.5);
}
html body :where(button,a[href],input,select,textarea,summary,[role="button"],[role="tab"],[role="listbox"],[tabindex]):focus {
  outline:none!important;
}
/* A soft single halo is reserved for keyboard navigation; pointer clicks do
   not leave an extra frame around buttons. This also covers injected dialogs. */
html body :where(button,a[href],input,select,textarea,summary,[role="button"],[role="tab"],[role="listbox"],[tabindex]):focus-visible,
html body .xunq-site-header :is(a,button,input,select):focus-visible {
  outline:none!important;
  box-shadow:0 0 0 3px var(--xq-state-focus)!important;
}
html body :is(input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="file"],[type="button"],[type="submit"])),select,textarea) {
  transition:background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease;
}
/* Editing changes the surface, with an inset caret-colour cue instead of the
   old border + outline + glow combination. Background images stay intact. */
html body :is(input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="file"],[type="button"],[type="submit"])),select,textarea):focus {
  border-color:var(--xq-state-border)!important;
  background-color:var(--xq-state-surface)!important;
  color:var(--xq-state-text)!important;
  caret-color:var(--xq-state-accent);
  box-shadow:inset 0 -2px 0 var(--xq-state-accent),var(--xq-state-shadow)!important;
}
html body :is(input,textarea,select)[aria-invalid="true"]:focus {
  border-color:#de9f9d!important;
  box-shadow:inset 0 -2px 0 #de9f9d,var(--xq-state-shadow)!important;
}
html body :is(input[type="checkbox"],input[type="radio"]) { accent-color:var(--xq-state-accent); }
/* Native pickers retain their platform keyboard, touch and screen-reader UI. */
html body select option:checked { background-color:var(--xq-state-selected); color:var(--xq-state-text); }

/* Control selection never depends on a gold perimeter. State classes and ARIA
   attributes are unchanged, so all existing interactions keep working. */
html body :where(
  .xunq-header-page-bushi :is(.seg,.tabs,.gtab) button.on,
  .xunq-header-page-mingshu :is(.tab,.dy-card,.ln-cell,.lm-cell,.ln-century-cell,.dyc-chip,.dayun-year-card,.hp-rel-btn,.ms-chapter-tab,.ms-film-chapter,.ms-launch-chapter).active,
  .xunq-header-page-mingshu :is(.ms-graph-node,.ms-journey-time,.ms-journey-source,.ms-journey-network-node,.pan-relation-node,.ms-atlas-timeline-year,.ms-atlas-node,.ms-case-source).is-selected,
  .xunq-header-page-mingshu :is(.ms-theme-time,.ms-theme-library-grid) button.is-selected,
  .xunq-header-page-mingshu .ms-theme-source.is-selected,
  .xunq-header-page-mingshu .ms-theme-nav button.is-active,
  .xunq-header-page-mingshu :is(.seg,.quick-seg) button[aria-pressed="true"],
  .xunq-header-page-ziwei .segmented button[aria-pressed="true"],
  .xunq-header-page-ziwei #birthForm .birth-toggle button[aria-pressed="true"],
  .xunq-header-page-kanyu :is(#ctrlBox,#lpSwitch) button.on,
  .xunq-header-page-kanyu #gjTypes button.sel,
  .xunq-header-page-kanyu #lpTop .lpMode button.on,
  .xunq-header-page-kanyu :is(#lpQiBtn,#lpHideBtn,#lpFollowBtn).on,
  .xunq-header-page-kanyu :is(#mobileLayerChoices,#mobileBearingModes) button[aria-pressed="true"],
  .xunq-header-page-kanyu #mobileCompassSegments button[aria-selected="true"],
  .xunq-header-page-xunqi button.active:not(.brush-btn):not(.feat-tools button),
  .xunq-header-page-xunqi #lpSwitch button.on
) {
  border-color:transparent!important;
  background:var(--xq-state-selected)!important;
  color:var(--xq-state-text)!important;
  box-shadow:inset 0 1px 0 #ffffff0a,0 3px 8px #0002!important;
}
/* Grid selections retain star / stem / relationship colours inside the cell. */
html body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(.palace.selected,.palace.is-selected,.palace-row.is-selected) {
  border-color:var(--xq-state-border)!important;
  background:var(--xq-state-selected)!important;
  box-shadow:none!important;
}
html body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(.palace.selected,.palace.is-selected,.palace-row.is-selected):focus-visible {
  box-shadow:0 0 0 3px var(--xq-state-focus)!important;
}
@media(hover:hover) {
  html body.xunq-header-page-ziwei button:hover:not(:disabled),
  html body.xunq-header-page-qimen .palace:hover {
    border-color:var(--xq-state-border)!important;
  }
}
html body :is(#birthForm,#inputCard) .birth-wheel-trigger:focus {
  background-color:var(--xq-state-surface)!important;
  border-color:var(--xq-state-border)!important;
  box-shadow:inset 0 -2px 0 var(--xq-state-accent),var(--xq-state-shadow)!important;
}
#birthWheelDialog .birth-wheel-band { border-color:transparent; background:var(--xq-state-selected); }
#birthWheelDialog .birth-wheel-item[aria-selected="true"] { color:var(--xq-state-text); }
html body .xunq-site-header :is(.xunq-tool-link,.xunq-tool-library)[aria-current="page"] {
  background:var(--xq-state-selected)!important;
  border-color:transparent!important;
  color:var(--xq-state-text)!important;
}
/* Segmented controls clip their children; keep the keyboard cue inside. */
html body :is(.seg,.birth-toggle,.segmented,.xunq-language-toggle) button:focus-visible {
  box-shadow:inset 0 0 0 2px var(--xq-state-accent)!important;
}
/* Small canvas tools use the same selection surface, without lighting up the
   whole toolbar or adding a second highlight around a selected button. */
html body.kanyu-mobile #mobileFacingActions.is-guided {
  border-color:var(--xq-state-border); background:var(--xq-state-surface); box-shadow:none;
}
html body.kanyu-mobile #mobileFenjinShortcut[aria-expanded="true"] {
  border-color:transparent!important; background:var(--xq-state-selected)!important; color:var(--xq-state-text)!important;
}
html body.kanyu-mobile #mobileBearingModes button[aria-pressed="true"]::before,
html body.xunq-header-page-xunqi #mobileQuick .mqTabs button.active::after { background:transparent!important; box-shadow:none!important; }
@media(prefers-reduced-motion:reduce) {
  html body :is(input,select,textarea) { transition:none; }
}
/* System high-contrast modes suppress shadows. Keep a real focus indicator. */
@media(forced-colors:active) {
  html body :is(button,a[href],input,select,textarea,summary,[role="button"],[role="tab"],[role="listbox"],[tabindex]):focus-visible,
  html body .xunq-site-header :is(a,button,input,select):focus-visible {
    outline:2px solid Highlight!important; outline-offset:2px!important; box-shadow:none!important;
  }
  html body :is(button,[role="button"]):is(.active,.on,.sel,.selected,.is-selected,[aria-pressed="true"],[aria-selected="true"]) { border-color:Highlight!important; }
  html body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(.palace.selected,.palace.is-selected,.palace-row.is-selected) { border-color:Highlight!important; }
}