/* ============================================================
   Display + accessibility layer, shared by every page.
   Preferences live on <html>: data-theme (light|dark) and
   data-motion (reduce|full), set before paint by the head script.
   ============================================================ */

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- focus: one ring everywhere, visible in both themes ---------- */
html :focus-visible{outline:2px solid var(--focus,#2563EB);outline-offset:3px}
html a:focus-visible,html button:focus-visible,html [tabindex]:focus-visible{border-radius:8px}
html input:focus-visible,html textarea:focus-visible{outline-offset:2px}
@media (forced-colors:active){html :focus-visible{outline-color:Highlight}}
/* keep focused items clear of the sticky header */
html{scroll-padding-top:88px}

/* ---------- skip link: appears on the first Tab press ---------- */
.skip-link{position:fixed!important;top:12px!important;left:12px!important;z-index:10001;transform:translateY(-200%);padding:10px 16px!important;border-radius:999px!important;background:var(--fg)!important;color:var(--page-bg)!important;font-size:14px;font-weight:500;line-height:1;text-decoration:none;transition:transform .2s var(--ease,ease)}
.skip-link:focus,.skip-link:focus-visible{transform:none}

/* ---------- target size: at least 24px (WCAG 2.5.8) ---------- */
.f-socials a,.fc a{display:inline-flex;align-items:center;min-height:24px}
/* footer links wrap instead of overflowing on narrow screens and at 400% zoom (WCAG 1.4.10) */
.f-socials{flex-wrap:wrap;column-gap:20px;row-gap:4px}
.p-head button,.m-lightbox-close,.ask-head button{min-width:24px;min-height:24px}

/* ---------- Display trigger ---------- */
.ux-display-btn svg{width:16px;height:16px}
.ux-display-btn[aria-expanded="true"]{background:var(--nav-bg);color:var(--fg);border-color:transparent}

/* ---------- Display panel ---------- */
.ux-display{position:fixed;z-index:10000;width:min(320px,calc(100vw - 24px));padding:16px;border-radius:16px;background:var(--page-bg);color:var(--fg);border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.12);font-size:14px;line-height:1.4}
:root[data-theme="dark"] .ux-display{background:var(--surface,#1E1E20);box-shadow:0 12px 32px rgba(0,0,0,.45)}
.ux-display[hidden]{display:none}
.ux-d-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.ux-d-head h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.ux-d-status{margin:0;font-size:12.5px;color:var(--faint);text-align:end}
.ux-d-row{border:0;margin:0 0 12px;padding:0;min-inline-size:0}
.ux-d-row legend{padding:0;margin-bottom:6px;font-size:12.5px;font-weight:500;color:var(--faint)}
.ux-d-hint{margin:6px 0 0;font-size:12px;color:var(--faint)}
.ux-seg{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--nav-bg)}
.ux-seg label{position:relative;flex:1;display:block}
.ux-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ux-seg span{display:flex;align-items:center;justify-content:center;min-height:32px;padding:0 8px;border-radius:9px;font-size:13px;font-weight:500;color:var(--gray,#666);transition:background .15s,color .15s}
.ux-seg input:hover+span{color:var(--fg)}
.ux-seg input:checked+span{background:var(--page-bg);color:var(--fg);box-shadow:0 0 0 1px var(--line)}
:root[data-theme="dark"] .ux-seg input:checked+span{background:var(--fg);color:var(--page-bg);box-shadow:none}
.ux-seg input:focus-visible+span{outline:2px solid var(--focus,#2563EB);outline-offset:1px}
@media (forced-colors:active){.ux-seg input:checked+span{border:2px solid CanvasText}}
.ux-d-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.ux-d-foot button,.ux-d-foot a{display:inline-flex;align-items:center;min-height:28px;padding:0;border:0;background:none;color:var(--fg);font:inherit;font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);cursor:pointer}
.ux-d-foot button:hover,.ux-d-foot a:hover{text-decoration-color:currentColor}

/* ---------- tooltips: Esc hides them (WCAG 1.4.13) ---------- */
.meta-tip.ux-tip-off .meta-tip-bubble,.exp-pill.ux-tip-off .tip{opacity:0!important;visibility:hidden!important}
/* narrow screens: the floating bubble would hang off the edge, so it opens in place below the text on tap */
@media (max-width:600px){.meta-tip-bubble{display:none!important}.meta-tip:focus .meta-tip-bubble{display:block!important;position:static;width:auto;margin-top:6px;transform:none!important;opacity:1}}

/* ---------- life carousel: pause control, static when reduced ---------- */
.ux-carousel-bar{display:flex;justify-content:flex-end;margin-top:12px;padding-inline:24px}
.ux-carousel-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--faint);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.ux-carousel-btn:hover{color:var(--fg);background:var(--nav-bg);border-color:transparent}
.ux-carousel-btn svg{width:14px;height:14px}
.life-carousel:focus-within .life-track,.life-carousel.ux-paused .life-track{animation-play-state:paused}

/* ---------- reduced motion, set by the device or by Display ---------- */
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;scroll-behavior:auto!important;transition-property:opacity,color,background-color,border-color,outline-color!important}
html[data-motion="reduce"] .reveal,html[data-motion="reduce"] .blur-in{transform:none!important;filter:none!important;transition:opacity .35s linear!important}
html[data-motion="reduce"] .life-track{animation:none!important}
html[data-motion="reduce"] .life-carousel{overflow-x:auto;scrollbar-width:thin}
html[data-motion="reduce"] .life-track .ux-dup{display:none}
html[data-motion="reduce"] .ux-carousel-bar{display:none}
html[data-motion="reduce"] #oneko{display:none!important}

/* ---------- links that open a new tab ---------- */
.ux-newtab{white-space:nowrap}