/* ============================================================
   BOLTZ — shared app polish layer
   Loaded after each page's inline <style>. Adds the product-grade
   interaction states, focus accessibility, brand selection, and
   reduced-motion support that the role views share.
   Tokens mirror the per-page :root (identical values) so this file
   can also be used standalone.
   ============================================================ */
:root{
  --ink:#0B0B0C; --panel:#17171A; --line:#26262b;
  --volt:#CCFF00; --volt-deep:#B4E600; --muted:#9a9b95;
  /* semantic z-scale — no more arbitrary 999s */
  --z-sticky:20; --z-overlay:100; --z-modal:110; --z-toast:200;
}

/* remove the blue mobile tap flash; keep text crisp on zoom */
*{ -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }

/* brand selection */
::selection{ background:var(--volt); color:#0B0B0C; }

/* ---- keyboard focus: one consistent, brand-tinted ring, keyboard-only ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, label:focus-visible, [tabindex]:focus-visible,
[role="button"]:focus-visible, [onclick]:focus-visible,
.role:focus-visible, .who:focus-visible, .link:focus-visible{
  outline:2px solid var(--volt);
  outline-offset:2px;
}
:focus:not(:focus-visible){ outline:none; }

/* ---- tactile press: everything clickable dips 1px, snappy ---- */
.btn:active, .btn-sm:active, .savebtn:active, .kbtn:active, .add-child:active,
.tabs button:active, .seg button:active, .term:active, .term-opt:active,
.disc-opt:active, .chip:active, .rchip:active, .rep-chip:active, .loc-btn--lg:active,
.pe-upload:active, .filebtn:active, .signout:active, .nav a:active, .role:active{
  transform:translateY(1px);
}

/* ---- dark, unobtrusive scrollbars ---- */
*{ scrollbar-width:thin; scrollbar-color:#34343c transparent; }
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:#2f2f37; border-radius:8px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#45454f; background-clip:content-box; }

/* ---- modal / overlay entrance (state-conveying, not decorative) ---- */
@keyframes bz-fade{ from{opacity:0} to{opacity:1} }
@keyframes bz-rise{ from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none} }
#pm-bg.open, #pe-bg.open, .pm-bg.open, .pe-bg.open{ animation:bz-fade .18s ease both; }
#pm-bg.open .pm, #pe-bg.open .pe, .pm-bg.open .pm, .pe-bg.open .pe{ animation:bz-rise .26s cubic-bezier(.22,1,.36,1) both; }

/* ---- subtle scroll-reveal: applied by boltz-app.js to BELOW-fold blocks only ---- */
.bz-reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.bz-reveal.bz-in{ opacity:1; transform:none; }

/* ---- reduced motion: neutralize all motion, keep a plain crossfade ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  #pm-bg.open, #pe-bg.open, .pm-bg.open, .pe-bg.open{ animation:bz-fade .12s ease both; }
  #pm-bg.open .pm, #pe-bg.open .pe, .pm-bg.open .pm, .pe-bg.open .pe{ animation:none; }
  .bz-reveal{ opacity:1 !important; transform:none !important; }
}

/* clickable capture screenshots — zoom to review in detail */
img.zoomable{cursor:zoom-in;transition:filter .12s,transform .12s}
img.zoomable:hover{filter:brightness(1.08)}
.rec-strip img.zoomable:hover{transform:scale(1.03)}