/* ==========================================================================
   BAXTRA — PUBLIC SITE ENHANCEMENT LAYER
   Adds motion, chrome and tooling to the public pages without touching the
   existing stylesheet. Everything is namespaced sp- and every animation is
   disabled under prefers-reduced-motion.
   ========================================================================== */

:root{
  --sp-accent:#1d4ed8;
  --sp-accent-2:#0f9b6c;
  --sp-warn:#b9541b;
  --sp-ink:#12203a;
  --sp-mut:#5b6b88;
  --sp-rule:#dfe5ee;
  --sp-panel:#fff;
  --sp-shadow:0 18px 48px rgba(18,32,58,.16);
  --sp-radius:10px;
}

::selection{background:rgba(29,78,216,.18);color:#0b1730}

/* 1 — scroll progress ---------------------------------------------------- */
.sp-progress{
  position:fixed;left:0;top:0;height:3px;width:0;z-index:9000;pointer-events:none;
  background:linear-gradient(90deg,var(--sp-accent),#4f86ff 60%,var(--sp-accent-2));
  box-shadow:0 0 10px rgba(29,78,216,.5);transition:width .08s linear;
}

/* 2 — condensing header -------------------------------------------------- */
header.site{transition:box-shadow .25s ease,padding .25s ease,background-color .25s ease}
body.sp-scrolled header.site{
  position:sticky;top:0;z-index:800;
  box-shadow:0 6px 24px rgba(18,32,58,.13);
  backdrop-filter:saturate(140%) blur(8px);
  background-color:rgba(255,255,255,.93);
}
body.sp-scrolled header.site .navbar{padding-top:8px;padding-bottom:8px}
body.sp-scrolled header.site .brand img{transform:scale(.92);transition:transform .25s}

/* 3 — reveal on scroll, directional and staggered ------------------------ */
.sp-rv{opacity:0;transform:translateY(22px);will-change:opacity,transform}
.sp-rv.sp-l{transform:translateX(-26px)}
.sp-rv.sp-r{transform:translateX(26px)}
.sp-rv.sp-in{
  opacity:1;transform:none;
  transition:opacity .74s cubic-bezier(.22,1,.36,1),transform .74s cubic-bezier(.22,1,.36,1);
}

/* 4 — heading rule that draws itself ------------------------------------ */
.sp-ruled{position:relative;padding-bottom:12px}
.sp-ruled::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--sp-accent);
  transition:width .8s cubic-bezier(.22,1,.36,1);
}
.sp-ruled.sp-in::after{width:64px}

/* 5 — card hover lift --------------------------------------------------- */
.sp-lift{transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease}
.sp-lift:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(18,32,58,.14)}

/* 6 — animated counters ------------------------------------------------- */
.sp-count{font-variant-numeric:tabular-nums}

/* 7 — back to top with progress ring ------------------------------------ */
.sp-top{
  position:fixed;right:22px;bottom:22px;z-index:850;width:46px;height:46px;border:0;padding:0;
  border-radius:50%;background:#fff;box-shadow:var(--sp-shadow);cursor:pointer;
  display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.9);
  transition:opacity .25s,transform .25s;
}
.sp-top.on{opacity:1;transform:none}
.sp-top svg{position:absolute;inset:0;width:46px;height:46px;transform:rotate(-90deg)}
.sp-top circle{fill:none;stroke-width:2.4}
.sp-top .bg{stroke:var(--sp-rule)}
.sp-top .fg{stroke:var(--sp-accent);stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.sp-top i{
  position:relative;display:block;width:9px;height:9px;
  border-left:2px solid var(--sp-ink);border-top:2px solid var(--sp-ink);
  transform:rotate(45deg);margin-bottom:3px;
}

/* 8 — link underline sweep --------------------------------------------- */
main a:not(.btn):not(.card):not(.sp-noline){
  background-image:linear-gradient(var(--sp-accent),var(--sp-accent));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .28s cubic-bezier(.22,1,.36,1);
  text-decoration:none;
}
main a:not(.btn):not(.card):not(.sp-noline):hover{background-size:100% 1px}

/* 9 — page transition -------------------------------------------------- */
body.sp-leaving{opacity:0;transition:opacity .18s ease}

/* 10 — hero spotlight -------------------------------------------------- */
.sp-spot{position:relative;overflow:hidden}
.sp-spot::after{
  content:"";position:absolute;width:520px;height:520px;left:var(--sp-mx,50%);top:var(--sp-my,50%);
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle,rgba(120,170,255,.16),transparent 62%);
}
.sp-spot:hover::after{opacity:1}

/* 11 — film grain ------------------------------------------------------ */
.sp-grain{
  position:fixed;inset:0;z-index:7000;pointer-events:none;opacity:.028;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 12 — image clip reveal ----------------------------------------------- */
.sp-clip{clip-path:inset(0 100% 0 0)}
.sp-clip.sp-in{clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.22,1,.36,1)}

/* 13 — on-this-page rail ---------------------------------------------- */
.sp-toc{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:700;
  max-width:216px;padding:12px 14px;border-radius:var(--sp-radius);
  background:rgba(255,255,255,.94);box-shadow:var(--sp-shadow);
  backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s;
}
.sp-toc.on{opacity:1;pointer-events:auto}
.sp-toc-k{
  font:600 9px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.17em;
  text-transform:uppercase;color:var(--sp-mut);margin-bottom:8px;
}
.sp-toc a{
  display:block;padding:3.5px 0 3.5px 11px;font-size:12.5px;line-height:1.4;color:var(--sp-mut);
  border-left:2px solid var(--sp-rule);text-decoration:none;background:none !important;
}
.sp-toc a:hover{color:var(--sp-ink)}
.sp-toc a.cur{color:var(--sp-accent);border-left-color:var(--sp-accent);font-weight:600}
@media (max-width:1440px){.sp-toc{display:none}}

/* 14 — anchor copy button --------------------------------------------- */
.sp-anchor{
  margin-left:9px;padding:1px 6px;border:1px solid var(--sp-rule);border-radius:4px;
  background:#fff;cursor:pointer;opacity:0;transition:opacity .18s;
  font:600 9px/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sp-mut);vertical-align:middle;
}
h2:hover>.sp-anchor,h3:hover>.sp-anchor{opacity:1}
.sp-anchor:hover{border-color:var(--sp-accent);color:var(--sp-accent)}

/* 15 — command palette ------------------------------------------------ */
.sp-scrim{
  position:fixed;inset:0;z-index:9500;background:rgba(8,14,28,.5);
  backdrop-filter:blur(3px);display:none;
}
.sp-scrim.on{display:block}
.sp-pal{
  position:fixed;left:50%;top:11vh;transform:translateX(-50%);z-index:9600;width:min(660px,92vw);
  background:#fff;border-radius:12px;box-shadow:0 30px 80px rgba(8,14,28,.4);overflow:hidden;display:none;
}
.sp-pal.on{display:block;animation:sp-pop .2s cubic-bezier(.22,1,.36,1)}
@keyframes sp-pop{from{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.98)}}
.sp-pal input{
  width:100%;padding:17px 20px;border:0;border-bottom:1px solid var(--sp-rule);
  font:400 17px/1.4 inherit;color:var(--sp-ink);outline:none;box-sizing:border-box;
}
.sp-pal-list{max-height:56vh;overflow:auto;padding:6px}
.sp-pal-row{
  display:flex;gap:12px;align-items:center;padding:10px 13px;border-radius:7px;cursor:pointer;
  text-decoration:none;color:inherit;background:none !important;
}
.sp-pal-row.cur,.sp-pal-row:hover{background:#f1f5fd !important}
.sp-pal-row b{flex:1;font-weight:500;font-size:14.5px}
.sp-pal-row b small{display:block;font-weight:400;font-size:12px;color:var(--sp-mut);margin-top:1px}
.sp-pal-row .kind{
  font:600 9px/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sp-mut);padding:3px 7px;border:1px solid var(--sp-rule);border-radius:4px;
}
.sp-pal-foot{
  display:flex;gap:16px;padding:9px 18px;border-top:1px solid var(--sp-rule);background:#fafbfd;
  font:11.5px/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--sp-mut);
}
.sp-pal-empty{padding:26px 20px;text-align:center;color:var(--sp-mut);font-size:14px}
kbd{
  padding:1px 5px;border:1px solid var(--sp-rule);border-bottom-width:2px;border-radius:4px;
  background:#fff;font:600 10.5px/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--sp-ink);
}

/* 16 — utility tools bar ---------------------------------------------- */
.sp-tools{
  position:fixed;left:22px;bottom:22px;z-index:850;display:flex;flex-direction:column;gap:8px;
}
.sp-tool{
  width:42px;height:42px;border:0;border-radius:11px;background:#fff;box-shadow:var(--sp-shadow);
  cursor:pointer;display:grid;place-items:center;color:var(--sp-ink);
  font:600 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em;
  transition:transform .18s,color .18s;
}
.sp-tool:hover{transform:translateY(-2px);color:var(--sp-accent)}
.sp-tool.on{color:#fff;background:var(--sp-accent)}
.sp-tool span{font-size:9px;letter-spacing:.1em}
@media (max-width:760px){.sp-tools{display:none}}

/* 17 — reading comfort mode ------------------------------------------- */
body.sp-comfort main{font-size:1.075em;line-height:1.82}
body.sp-comfort main p{max-width:68ch}
body.sp-comfort main{--sp-ink:#0a1428}
body.sp-contrast{filter:contrast(1.13) saturate(1.06)}
body.sp-contrast main a:not(.btn){text-decoration:underline}

/* 18 — glossary tooltip ---------------------------------------------- */
.sp-gl{
  border-bottom:1px dotted var(--sp-accent);cursor:help;background:none !important;
}
.sp-tip{
  position:fixed;z-index:9700;max-width:320px;padding:10px 13px;border-radius:8px;
  background:#0d1a2f;color:#eaf0fb;font:13px/1.55 inherit;box-shadow:0 14px 36px rgba(8,14,28,.4);
  opacity:0;transform:translateY(5px);transition:opacity .16s,transform .16s;pointer-events:none;
}
.sp-tip.on{opacity:1;transform:none}
.sp-tip b{display:block;margin-bottom:3px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8fb0ff}

/* 19 — toast ---------------------------------------------------------- */
.sp-toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9800;display:grid;gap:8px}
.sp-toast{
  padding:11px 17px;border-radius:8px;background:#0d1a2f;color:#eaf0fb;box-shadow:var(--sp-shadow);
  font-size:13.5px;animation:sp-up .26s cubic-bezier(.22,1,.36,1);
}
.sp-toast.ok{box-shadow:0 0 0 1px rgba(15,155,108,.6),var(--sp-shadow)}
@keyframes sp-up{from{opacity:0;transform:translateY(12px)}}

/* 20 — panels used by the tools -------------------------------------- */
.sp-sheet{
  position:fixed;right:0;top:0;bottom:0;z-index:9600;width:min(520px,94vw);background:#fff;
  box-shadow:-24px 0 70px rgba(8,14,28,.32);overflow:auto;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.sp-sheet.on{transform:none}
.sp-sheet-hd{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;
  padding:17px 22px;background:#fff;border-bottom:1px solid var(--sp-rule);
}
.sp-sheet-hd h3{margin:0;font:400 20px/1.25 Georgia,serif}
.sp-sheet-hd .x{
  margin-left:auto;width:30px;height:30px;border:1px solid var(--sp-rule);border-radius:7px;
  background:#fff;cursor:pointer;color:var(--sp-mut);font-size:15px;line-height:1;
}
.sp-sheet-bd{padding:20px 22px 40px}
.sp-sheet-bd h4{margin:20px 0 8px;font:600 13px/1.4 inherit;letter-spacing:.02em}
.sp-sheet-bd h4:first-child{margin-top:0}
.sp-sheet-bd p{font-size:14px;line-height:1.65;color:var(--sp-mut)}
.sp-field{margin-bottom:13px}
.sp-field label{
  display:block;margin-bottom:5px;font:600 9.5px/1.4 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sp-mut);
}
.sp-field input,.sp-field select,.sp-field textarea{
  width:100%;padding:9px 11px;border:1px solid var(--sp-rule);border-radius:7px;
  font:400 14px/1.4 inherit;color:var(--sp-ink);box-sizing:border-box;background:#fff;
}
.sp-field input:focus,.sp-field select:focus{outline:2px solid rgba(29,78,216,.35);outline-offset:1px;border-color:var(--sp-accent)}
.sp-btn{
  appearance:none;padding:9px 15px;border:1px solid var(--sp-accent);border-radius:7px;
  background:var(--sp-accent);color:#fff;cursor:pointer;font:600 12.5px/1.3 inherit;
}
.sp-btn.ghost{background:#fff;color:var(--sp-accent)}
.sp-btn:hover{filter:brightness(1.07)}
.sp-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.sp-out{
  margin-top:14px;padding:14px 16px;border-radius:8px;background:#f5f8fd;border:1px solid var(--sp-rule);
  font-size:13.5px;line-height:1.6;
}
.sp-out table{width:100%;border-collapse:collapse;font-size:12.5px}
.sp-out th{
  text-align:left;padding:5px 7px;border-bottom:1px solid var(--sp-rule);
  font:600 9.5px/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sp-mut);
}
.sp-out td{padding:5px 7px;border-bottom:1px solid #e8edf5;vertical-align:top}
.sp-out .r{text-align:right;font-variant-numeric:tabular-nums}
.sp-pill{
  display:inline-block;padding:2px 8px;border-radius:20px;background:#eaf0fd;color:#1c3c86;
  font:600 10.5px/1.6 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.05em;
}
.sp-pill.gn{background:#e6f6ef;color:#0b6647}
.sp-pill.wr{background:#fdf1e3;color:#8a3d12}
.sp-empty{padding:20px;text-align:center;color:var(--sp-mut);font-size:13.5px}
.sp-item{
  display:flex;gap:11px;align-items:baseline;padding:9px 0;border-bottom:1px solid #eef2f8;
}
.sp-item b{flex:1;font-weight:500;font-size:14px}
.sp-item b small{display:block;color:var(--sp-mut);font-weight:400;font-size:12px;margin-top:1px}
.sp-item .x{
  border:0;background:none;cursor:pointer;color:var(--sp-mut);font-size:15px;line-height:1;padding:2px 5px;
}
.sp-item .x:hover{color:var(--sp-warn)}

/* 21 — status ticker in the footer ---------------------------------- */
.sp-ticker{
  margin-top:20px;padding:11px 0;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font:11.5px/1.6 ui-monospace,Menlo,Consolas,monospace;
}
.sp-ticker .k{letter-spacing:.14em;text-transform:uppercase;opacity:.6;font-size:9.5px;font-weight:600}
.sp-ticker .v{display:flex;gap:7px;align-items:center}
.sp-ticker .dot{width:6px;height:6px;border-radius:50%;background:#19d295;box-shadow:0 0 7px rgba(25,210,149,.8)}
.sp-ticker .dot.wr{background:#f0b429;box-shadow:0 0 7px rgba(240,180,41,.8)}

/* 22 — skip link ---------------------------------------------------- */
.sp-skip{
  position:fixed;left:-999px;top:8px;z-index:9900;padding:10px 16px;border-radius:7px;
  background:#0d1a2f;color:#fff;text-decoration:none;font-size:13.5px;
}
.sp-skip:focus{left:8px}
:focus-visible{outline:2.5px solid var(--sp-accent);outline-offset:2px;border-radius:3px}

/* 23 — reduced motion and print ------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sp-rv,.sp-clip{opacity:1 !important;transform:none !important;clip-path:none !important}
  .sp-progress,.sp-grain{display:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
@media print{
  .sp-progress,.sp-grain,.sp-top,.sp-tools,.sp-toc,.sp-scrim,.sp-pal,.sp-sheet,.sp-toasts,
  .utility,.navtoggle,header.site nav.main,.sp-skip,.sp-ticker{display:none !important}
  .sp-rv,.sp-clip{opacity:1 !important;transform:none !important;clip-path:none !important}
  body{background:#fff}
  main a:not(.btn)::after{content:" (" attr(href) ")";font-size:.78em;color:#5b6b88;word-break:break-all}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  table,figure{break-inside:avoid;page-break-inside:avoid}
  @page{margin:16mm 14mm}
}

/* --- revolving atom mark (header logo) --- */
.brand{position:relative;padding-right:44px}
.brand .atom-mark{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;pointer-events:none}
.brand .atom-mark svg{width:100%;height:100%;display:block;overflow:visible;
  animation:atom-rotate 7s linear infinite;transform-origin:50% 50%}
.brand .atom-mark ellipse{fill:none;stroke:#0F3CC4;stroke-width:5;opacity:.9}
@keyframes atom-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.brand .atom-mark svg{animation:none}}

/* --- minimal statement line (fixed) --- */
.notice-line{position:fixed;top:0;left:0;right:0;z-index:1000;
  background:#F4F6FA;border-bottom:1px solid #E3E8F0}
.notice-line .wrap{padding-top:7px;padding-bottom:7px;font-size:.78rem;
  line-height:1.4;color:#41506B;letter-spacing:.005em}
.notice-line b{font-weight:600;color:#0F1E3C;margin-right:8px;font-size:.72rem;
  letter-spacing:.09em;text-transform:uppercase}
.notice-line a{color:#0F3CC4;font-weight:600;text-decoration:none;margin-left:10px;
  white-space:nowrap;border-bottom:1px solid rgba(15,60,196,.35)}
.notice-line a:hover,.notice-line a:focus{border-bottom-color:#0F3CC4}
body.has-notice{padding-top:var(--notice-h,33px)}
body.has-notice header.site{top:var(--notice-h,33px)}