/* Shared reading and form controls. Chart glyphs, semantic colours and canvases
   retain their own styles; compact information stays available on every screen. */
:root {
  --xq-ui-font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --xq-ui-radius:16px;
  --xq-ui-control-radius:12px;
  --xq-ui-reading-size:15px;
  --xq-ui-secondary-size:13px;
  --xq-ui-target-size:44px;
  --xq-ui-gap:8px;
  --xq-ui-focus:var(--gold,var(--ky-accent,#d8c28e));
  --xq-motion-fast:120ms;
  --xq-motion-menu:180ms;
  --xq-motion-panel:220ms;
  --xq-ease-out:cubic-bezier(.2,.8,.2,1);
}
/* Qimen and Ziwei share dark reading surfaces, without changing palace layouts. */
body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(.input-panel form,.input-panel,.detail-card,.reading-card,.archive-item,.detail-panel,.mutation-card,.record-row) {
  border-color:rgba(188,198,213,.14);
  border-radius:var(--xq-ui-radius);
  box-shadow:none;
}
body.xunq-header-page-qimen .input-panel { border:0; }
body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(.detail-card p,.reading-card p,.detail-panel p,.overview p) {
  font-size:var(--xq-ui-reading-size);
  line-height:1.85;
  overflow-wrap:anywhere;
}
body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(.footnote,.method-note,.method-details,.birth-hint,.convention p,.chart-note,.privacy-hint,.archive-item p) {
  font-size:var(--xq-ui-secondary-size);
  line-height:1.8;
}
body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(.section-title h2,.detail-card h3,.reading-card h3,.dialog-head h2) {
  font-family:var(--xq-ui-font);
  font-size:19px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:0;
}
body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(form label,.convention label) { font-size:13px; }
body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) label small { font-size:12px; line-height:1.5; }
body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(form input,form select,form textarea,.fortune-toolbar input,.fortune-toolbar select) {
  min-height:44px;
  border-color:rgba(188,198,213,.22);
  border-radius:var(--xq-ui-control-radius);
  font-size:16px;
}
body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(.primary,.secondary,.icon-button,.result-actions button,.record-actions button,.archive-actions button) {
  min-height:44px;
  border-radius:var(--xq-ui-control-radius);
  font-size:14px;
  transition:background-color var(--xq-motion-fast) ease,border-color var(--xq-motion-fast) ease,color var(--xq-motion-fast) ease;
}
body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(.secondary,.icon-button,.result-actions button,.record-actions button,.archive-actions button) {
  border-color:rgba(188,198,213,.12);
  background:rgba(188,198,213,.04);
}
body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(form input,form select,form textarea,.fortune-toolbar input,.fortune-toolbar select):focus-visible {
  border-color:var(--gold);
  outline:2px solid var(--gold);
  outline-offset:2px;
}
@media(hover:hover) {
  body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) :is(.secondary,.icon-button,.result-actions button,.record-actions button,.archive-actions button):hover:not(:disabled) { background:rgba(188,198,213,.1);border-color:rgba(188,198,213,.3); }
}
body.xunq-header-page-qimen .section-title { flex-wrap:wrap; }
body.xunq-header-page-qimen .chart-actions { flex-wrap:wrap; }
body.xunq-header-page-qimen .chart-actions>* { flex:1 1 140px; }
body.xunq-header-page-ziwei .segmented { padding:4px; gap:4px; border-radius:14px; }
body.xunq-header-page-ziwei .segmented button { min-height:44px; border-radius:10px; }
body.xunq-header-page-qimen .bottom-nav button { font-size:12px; }
body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) dialog {
  border-color:rgba(188,198,213,.16);
  border-radius:24px;
  box-shadow:0 20px 70px #0005;
}
body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei) dialog[open] {
  animation:xq-surface-in var(--xq-motion-panel) var(--xq-ease-out);
}
/* The six-line tool and anatomy retain their existing palettes. */
body.xunq-header-page-bushi :is(.hero .sub,.field-note,.case-body p) { font-size:13px; line-height:1.8; }
body.xunq-header-page-bushi :is(.field>span,.case-details .summary-note,.sec-hd .s) { font-size:12px; letter-spacing:0; }
body.xunq-header-page-bushi :is(.field select,.field textarea,.time-inp) { font-size:16px; border-radius:12px; }
body.xunq-header-page-bushi .seg button { min-height:44px; }
body.xunq-header-page-bushi :is(.seg,.tabs) button { transition:background-color var(--xq-motion-fast) ease,color var(--xq-motion-fast) ease; }
body.xunq-header-page-bushi .card { border-radius:var(--xq-ui-radius); }
body.xunq-header-page-renti-app :is(.panel-section,.detail-scroll) { line-height:1.7; }
body.xunq-header-page-renti-app :is(.detail-scroll p,.relation-card p) { font-size:15px; line-height:1.85; }
body.xunq-header-page-renti-app :is(.muted,.detail-note,.micro) { font-size:12px!important; line-height:1.7; }
body.xunq-header-page-renti-app :is(.meridian,.layer-row,.detail-tabs button,.model-switch button,.stage-toolbar button) { min-height:44px; }
body.xunq-header-page-renti-app :is(form input,form select,.search input) { font-size:16px; }
body.xunq-header-page-renti-app :is(.relation-card,.model-switch,.stage-toolbar) { border-radius:12px; }
body.xunq-header-page-renti-app .detail-tabs { gap:16px; }
/* Library reading remains distinct from graph labels and canvas text. */
body.xunq-header-page-zhenling :is(.dialog-body p,.character-summary,.detail-description) { font-size:15px; line-height:1.85; }
body.xunq-header-page-zhenling :is(.button,.filter-button) { min-height:44px; border-radius:12px; }
body.xunq-header-page-zhenling :is(.character-card,.filter-sidebar) { border-radius:16px; box-shadow:none; }
body.xunq-header-page-zhenling dialog { border-radius:24px; }
@media(max-width:720px) {
  body.xunq-header-page-zhenling dialog:not(#filter-dialog) { border-radius:0; }
}
@keyframes xq-surface-in { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:none; } }
@media(max-width:640px) {
  body.xunq-header-page-ziwei .result-actions { gap:6px; flex-wrap:wrap; }
  body.xunq-header-page-ziwei .result-actions button { padding-inline:10px; font-size:13px; }
  body.xunq-header-page-qimen :is(.reading-card,.detail-card,.archive-item) { padding:18px; }
  body.xunq-header-page-renti-app .search input { width:100%; min-width:0; }
}
@media(prefers-reduced-motion:reduce) {
  body:is(.xunq-header-page-qimen,.xunq-header-page-ziwei,.xunq-header-page-bushi,.xunq-header-page-renti-app,.xunq-header-page-zhenling) :is(dialog,button,a,input,select,textarea) { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
}

/* Shared interaction rules use the page's existing accent, with no palette reset.
   Keep header/account controls and graphical chart targets under their own CSS. */
body:is(.xunq-header-page-portal,.xunq-header-page-mingshu,.xunq-header-page-kanyu,.xunq-header-page-qimen,.xunq-header-page-ziwei,.xunq-header-page-bushi,.xunq-header-page-renti-app,.xunq-header-page-zhenling)
  :where(button,a[href],input,select,textarea,summary,[role="button"]):not(:where(.xunq-site-header *,[data-auth-account-host] *)):focus-visible {
  outline:2px solid var(--xq-ui-focus);
  outline-offset:3px;
}
:where(.xq-ui-control) {
  min-height:var(--xq-ui-target-size);
  border-radius:var(--xq-ui-control-radius);
  touch-action:manipulation;
  transition:background-color var(--xq-motion-fast) var(--xq-ease-out),border-color var(--xq-motion-fast) var(--xq-ease-out),color var(--xq-motion-fast) var(--xq-ease-out);
}
:where(.xq-ui-control[aria-selected="true"],.xq-ui-control[aria-pressed="true"]) { font-weight:600; }
:where(.xq-ui-control:disabled,.xq-ui-control[aria-disabled="true"]) { cursor:default; }
@media(prefers-reduced-motion:reduce) {
  :root { --xq-motion-fast:0ms; --xq-motion-menu:0ms; --xq-motion-panel:0ms; }
  body:is(.xunq-header-page-portal,.xunq-header-page-mingshu,.xunq-header-page-kanyu)
    :where(dialog,[role="dialog"],button,a,input,select,textarea,details,summary) {
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}

/* The canvas shortcut shares the existing layer controls and keeps analysis on screen. */
body.kanyu-mobile #mobileLayerQuick { position:relative; min-width:0; }
body.kanyu-mobile #mobileLayerMenu {
  position:absolute; z-index:3; left:0; bottom:calc(100% + 10px);
  width:256px; max-width:calc(100vw - 32px);
  max-height:min(320px,calc(var(--mobile-vvh,100dvh) - 180px));
  box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain;
  padding:10px; border:1px solid #d8c28e30; border-radius:16px;
  background:#141e2af7; color:#cbd5df; box-shadow:0 10px 30px #0004;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transform-origin:left bottom;
  animation:ky-layer-reveal var(--xq-motion-menu,180ms) var(--xq-ease-out,ease-out);
}
body.kanyu-mobile #mobileLayerMenu[hidden] { display:none!important; }
body.kanyu-mobile #mobileLayerMenu p { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:1px 4px 8px; color:#d7dddf; font-size:12px; line-height:1.5; }
body.kanyu-mobile #mobileLayerMenu p span { color:#8f9cab; font-size:12px; }
body.kanyu-mobile #mobileLayerChoices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
body.kanyu-mobile #mobileCanvasActions #mobileLayerChoices button {
  display:flex; align-items:center; justify-content:space-between; gap:5px;
  width:100%; min-width:0; min-height:44px; height:44px; margin:0; padding:0 10px;
  border:1px solid transparent; border-radius:10px; background:#ffffff05;
  color:#bfcbd8; box-shadow:none; font:500 12px/1.3 var(--xq-ui-font); white-space:nowrap;
  touch-action:manipulation;
}
body.kanyu-mobile #mobileLayerChoices .mobile-layer-check { opacity:0; color:#e4d2a4; font-size:13px; }
body.kanyu-mobile #mobileCanvasActions #mobileLayerChoices button[aria-pressed="true"] { border-color:#d8c28e30; background:#d8c28e12; color:#e4d2a4; }
body.kanyu-mobile #mobileLayerChoices button[aria-pressed="true"] .mobile-layer-check { opacity:1; }
body.kanyu-mobile #mobileCanvasActions #mobileFenjinShortcut[aria-expanded="true"] { border-color:#d8c28e70; color:#e4d2a4; }
body.kanyu-mobile #mobileLayerMenu button:focus-visible { outline:2px solid #d8c28e; outline-offset:1px; }
@keyframes ky-layer-reveal { from { opacity:0; transform:translateY(5px) scale(.98); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { body.kanyu-mobile #mobileLayerMenu { animation:none; } }

/* Reserve the complete bearing slot so changing direction/digit count cannot move the toolbar. */
body.kanyu-mobile #mobileFacingReadout { flex:0 0 104px; width:104px; min-width:104px; max-width:104px; box-sizing:border-box; justify-content:center; }
body.kanyu-mobile #mobileFacingReadout output { display:block; min-width:0; font-variant-numeric:tabular-nums; text-align:center; }
body.kanyu-mobile #mobileFacingSlider { touch-action:none; }

/* Two independent adjustments share one compact slider; the image never follows house facing. */
body.kanyu-mobile #mobileFacingActions { padding:0 6px; }
body.kanyu-mobile #mobileFacingActions .mobile-facing-caption { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px; align-items:center; }
body.kanyu-mobile #mobileBearingModes { display:flex; min-width:0; gap:1px; }
body.kanyu-mobile #mobileCanvasActions #mobileBearingModes button {
  position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; flex:1; min-width:44px; height:44px; min-height:44px;
  padding:0 2px; border:0; border-radius:8px; background:transparent; box-shadow:none;
  color:#91a1b3; font:500 12px/1.3 var(--xq-ui-font); white-space:nowrap;
}
body.kanyu-mobile #mobileCanvasActions #mobileBearingModes button[aria-pressed="true"] { color:#e4d2a4; }
body.kanyu-mobile #mobileFacingActions.is-guided { border-color:#d8c28e; box-shadow:0 0 0 2px #d8c28e40; }
body.kanyu-mobile #mobileFacingActions { transition:border-color var(--xq-motion-fast,120ms) ease,box-shadow var(--xq-motion-fast,120ms) ease; }
@media(prefers-reduced-motion:reduce) { body.kanyu-mobile #mobileFacingActions { transition:none; } }

body.kanyu-mobile #mobileCanvasActions #mobileBearingModes button[aria-pressed="true"]::before { content:""; position:absolute; inset:3px 0; z-index:-1; border-radius:7px; background:#d8c28e14; }
body.kanyu-mobile #mobileCanvasActions #mobileBearingReset { display:flex; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:8px; background:transparent; box-shadow:none; color:#b5c0cb; }
body.kanyu-mobile #mobileBearingReset svg { width:17px; height:17px; }
body.kanyu-mobile #mobileBearingReset:disabled { opacity:.35; cursor:default; }
body.kanyu-mobile #mobileFacingActions #mobileFacingSlider { height:44px; min-height:44px; }
body.kanyu-mobile #mobileFacingActions button:focus-visible { outline:2px solid #d8c28e; outline-offset:1px; }

/* Keep the larger touch targets local to the canvas toolbar.  The bottom gap
   remains reserved for the gesture hint, and the south marker clears both rows. */
body.kanyu-mobile { --ky-action-bottom:33px; --ky-action-height:90px; --ky-action-safe-bottom:0px; }
body.kanyu-mobile #mobileCanvasActions { bottom:var(--ky-action-bottom); grid-template-columns:60px minmax(0,1fr) 76px; }
body.kanyu-mobile #mobileFullscreenSlot { width:76px; }
body.kanyu-mobile #mobileCanvasActions #fsBtn { width:76px; padding-inline:1px; font-size:12px; }
body.kanyu-mobile #mobileFacingActions label,
body.kanyu-mobile #mobileGestureHint { font-size:12px; line-height:1.5; }
body.kanyu-mobile #mobileGestureHint { bottom:10px; padding-inline:10px; }
body.kanyu-mobile #main #kyExampleLabel { font-size:12px; line-height:1.5; }
body.kanyu-mobile #main #mobileCardinals span.mc-s,
body.kanyu-mobile #main:is(:fullscreen,:-webkit-full-screen) #mobileCardinals span.mc-s,
body.kanyu-mobile.fsPseudo #main #mobileCardinals span.mc-s {
  bottom:calc(var(--ky-action-bottom) + var(--ky-action-height) + 8px + var(--ky-action-safe-bottom));
}
body.kanyu-mobile.fsPseudo,
body.kanyu-mobile #main:is(:fullscreen,:-webkit-full-screen) { --ky-action-safe-bottom:var(--safe-bottom,0px); }
body.kanyu-mobile.fsPseudo #main #mobileCanvasActions,
body.kanyu-mobile #main:is(:fullscreen,:-webkit-full-screen) #mobileCanvasActions {
  bottom:calc(var(--ky-action-bottom) + var(--ky-action-safe-bottom));
}
body.kanyu-mobile.fsPseudo #mobileGestureHint,
body.kanyu-mobile #main:is(:fullscreen,:-webkit-full-screen) #mobileGestureHint {
  bottom:calc(10px + var(--ky-action-safe-bottom));
}
@media(max-width:380px) {
  body.kanyu-mobile #mobileCanvasActions { column-gap:6px; }
}
/* A wide, short screen has room for a single row; keep the drawing available
   instead of shrinking controls or letting the hint sit over the slider. */
@media(min-width:480px) and (max-width:1100px) and (max-height:480px) and (orientation:landscape) {
  body.kanyu-mobile { --ky-action-bottom:14px; --ky-action-height:46px; }
  body.kanyu-mobile #mobileFacingActions {
    display:grid; grid-template-columns:minmax(136px,1fr) minmax(80px,1fr); align-items:center; gap:8px; max-width:none;
  }
  body.kanyu-mobile #mobileGestureHint,
  body.kanyu-mobile.fsPseudo #mobileGestureHint,
  body.kanyu-mobile #main:is(:fullscreen,:-webkit-full-screen) #mobileGestureHint {
    left:auto; right:max(14px,var(--safe-right)); width:max-content; max-width:calc(50% - 42px); padding:0;
    bottom:calc(var(--ky-action-bottom) + var(--ky-action-height) + 8px + var(--ky-action-safe-bottom));
    text-align:right; line-height:1.5;
  }
}