/* Ardito staff skin, 28 Oct 2026: the brand band on top and the brand footer at
   the bottom of every staff page of pt.af247.app and ba.af247.app.
   Markup: staff_game/skin.py. Everything is namespaced .ard-*; nothing here
   styles the page underneath, so every form, table and button keeps its look.
   Fixed heights (no layout shift); motion stops under prefers-reduced-motion. */

.ard-band,.ard-foot{
  --ard-ground:#040612; --ard-ink:#eef2ff; --ard-ink-2:#bfc8e6; --ard-ink-3:#9aa6cc;
  --ard-line:rgba(160,185,255,.16); --ard-line-2:rgba(160,185,255,.3); --ard-cyan:#4fd6ff; --ard-blue-2:#9db8ff;
  --ard-font:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-sizing:border-box; font-family:var(--ard-font); -webkit-font-smoothing:antialiased;
}
.ard-band *,.ard-band *::before,.ard-band *::after,
.ard-foot *,.ard-foot *::before,.ard-foot *::after{box-sizing:border-box}

/* ── the band ─────────────────────────────────────────────────────────── */
.ard-band{position:relative;z-index:1;isolation:isolate;overflow:hidden;display:block;width:auto;height:84px;margin:0;padding:0;
  background:var(--ard-ground);color:var(--ard-ink);contain:layout paint;text-align:left;line-height:1.2}
.ard-band-motion{position:absolute;inset:0;z-index:-3;margin:0}
.ard-band-motion video{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:62% 46%;
  opacity:.9;background:var(--ard-ground)}
/* legibility: night on the left where the words are, the loop shows on the right */
.ard-band::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,6,18,.95) 0%,rgba(4,6,18,.86) 34%,rgba(4,6,18,.42) 66%,rgba(4,6,18,.18) 100%);
  background:
    linear-gradient(90deg,rgba(4,6,18,.95) 0%,rgba(4,6,18,.86) 34%,rgba(4,6,18,.42) 66%,rgba(4,6,18,.18) 100%),
    radial-gradient(ellipse 40% 120% at 0% 50%,color-mix(in srgb,var(--ard-acc,#4fd6ff) 18%,transparent),transparent 70%)}
/* the lit edge: a thread of the family's colour caught in cyan */
.ard-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--ard-acc,#4fd6ff) 22%,var(--ard-cyan) 58%,transparent 100%) 0 0/200% 100%;
  box-shadow:0 0 14px rgba(79,214,255,.5);animation:ard-sweep 7s linear infinite}
.ard-thread{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;overflow:visible}
.ard-thread path{fill:none;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:160 1500;stroke-dashoffset:1660;animation:ard-run 9s linear infinite}
.ard-thread .t1{stroke:var(--ard-acc,#ff4d5e);opacity:.95;filter:drop-shadow(0 0 4px var(--ard-acc,#ff4d5e))}
.ard-thread .t2{stroke:var(--ard-cyan);opacity:.6;animation-duration:13s;animation-delay:-5s}
@keyframes ard-run{to{stroke-dashoffset:0}}
@keyframes ard-sweep{to{background-position:-200% 0}}

.ard-band-in{position:relative;display:flex;align-items:center;gap:16px;height:100%;max-width:1180px;margin:0 auto;
  padding:0 max(56px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
.ard-logo,.ard-logo:link,.ard-logo:visited,.ard-logo:hover{display:inline-flex;align-items:center;gap:10px;flex:none;
  color:var(--ard-ink)!important;text-decoration:none!important;font:700 23px/1 var(--ard-font);letter-spacing:-.01em;
  border:0;background:none;padding:4px 0;min-height:44px}
.ard-logo:focus-visible{outline:2px solid var(--ard-cyan);outline-offset:4px;border-radius:8px}
.ard-mark{display:block;flex:none;width:34px;height:34px;max-width:none;margin:0;border-radius:50%;
  box-shadow:0 0 0 1px var(--ard-line-2),0 0 22px rgba(61,123,255,.45)}
.ard-name{color:var(--ard-ink);white-space:nowrap}
.ard-name b{color:var(--ard-blue-2);font-weight:700}
.ard-rule{flex:none;width:1px;height:36px;background:linear-gradient(transparent,var(--ard-line-2),transparent)}
.ard-fam{display:flex;flex-direction:column;gap:5px;min-width:0}
.ard-fam b{font:700 12px/1 var(--ard-font);letter-spacing:.2em;text-transform:uppercase;color:var(--ard-acc,#4fd6ff);
  text-shadow:0 0 18px color-mix(in srgb,var(--ard-acc,#4fd6ff) 45%,transparent)}
.ard-fam small{font:500 14px/1.25 var(--ard-font);color:var(--ard-ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* the way back: a labelled "← Portal" pill at the right of the band on every staff page that has a portal
   to go back to (skin.py pt_back / ba_back). 44 x 44 px minimum for a thumb; adds a flex item after the
   family label, so nothing already in the band moves. */
.ard-back,.ard-back:link,.ard-back:visited{flex:none;margin-left:auto;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--ard-line-2);background:rgba(4,6,18,.6);color:var(--ard-ink)!important;
  text-decoration:none!important;font:600 14px/1 var(--ard-font);letter-spacing:.01em;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s}
.ard-back:hover{border-color:var(--ard-blue-2);background:rgba(47,99,240,.3)}
.ard-back:active{background:rgba(47,99,240,.45)}
.ard-back:focus-visible{outline:2px solid var(--ard-cyan);outline-offset:2px}
.ard-back-ar{font-size:15px;line-height:1;color:var(--ard-blue-2)}

/* pause/play for the loop (WCAG 2.2.2), added by ardito-skin.js once it plays */
.ard-mtoggle{position:absolute;right:max(12px,env(safe-area-inset-right));top:50%;z-index:2;width:32px;height:32px;
  min-width:0!important;min-height:0!important;max-height:32px;line-height:0;box-sizing:border-box;  /* page button rules */
  margin:-16px 0 0;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--ard-line-2);background:rgba(4,6,18,.62);color:var(--ard-ink)}
.ard-mtoggle:focus-visible{outline:2px solid var(--ard-cyan);outline-offset:2px}
.ard-mtoggle svg{width:11px;height:11px;fill:currentColor}
.ard-band.ard-held .ard-thread path,.ard-band.ard-held::after{animation-play-state:paused}

/* the family accents a second time, in the motion itself */
.ard-band[data-ard-fam="leads"] .ard-thread .t1{animation-duration:6s}
.ard-band[data-ard-fam="leads"] .ard-band-motion video{object-position:70% 50%}
.ard-band[data-ard-fam="shift"] .ard-thread .t1,.ard-band[data-ard-fam="schedule"] .ard-thread .t1{animation-duration:12s}
.ard-band[data-ard-fam="reports"] .ard-thread .t2,.ard-band[data-ard-fam="money"] .ard-thread .t2{animation-direction:reverse}
.ard-band[data-ard-fam="access"] .ard-band-motion video,.ard-band[data-ard-fam="people"] .ard-band-motion video{object-position:50% 50%}
.ard-band[data-ard-fam="game"]::before{background:
    linear-gradient(90deg,rgba(4,6,18,.95) 0%,rgba(4,6,18,.8) 34%,rgba(4,6,18,.3) 70%,rgba(4,6,18,.1) 100%),
    radial-gradient(ellipse 50% 140% at 0% 50%,rgba(255,200,97,.22),transparent 70%)}

@media (max-width:640px){
  .ard-band{height:58px}
  .ard-band-in{gap:12px;padding:0 max(52px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
  .ard-logo,.ard-logo:link,.ard-logo:visited{font-size:19px;gap:8px}
  .ard-mark{width:28px;height:28px}
  .ard-rule{height:26px}
  .ard-fam small{display:none}
  .ard-fam b{font-size:11px;letter-spacing:.16em}
  .ard-band-motion video{object-position:75% 50%}
  .ard-mtoggle{width:30px;height:30px;margin-top:-15px}
}
@media (max-width:640px){
  .ard-back,.ard-back:link,.ard-back:visited{gap:5px;padding:0 12px;font-size:13px}
  /* on a phone a long family label ("Club floor", "Lantai klub") gives way to the link with an ellipsis
     instead of running under it; the tagline that shrinks on wider screens is hidden here */
  .ard-band-in[data-back] .ard-fam b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ── the footer ───────────────────────────────────────────────────────── */
.ard-foot{position:relative;z-index:1;display:block;clear:both;margin:28px 0 0;
  padding:18px max(20px,env(safe-area-inset-right)) calc(84px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  background:var(--ard-ground);color:var(--ard-ink-3);font-size:13px;line-height:1.45;text-align:left;
  border-top:1px solid var(--ard-line)}
.ard-foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ard-acc,#4fd6ff) 30%,var(--ard-cyan) 70%,transparent) 0 0/200% 100%;
  animation:ard-sweep 9s linear infinite}
.ard-foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;max-width:1180px;margin:0 auto}
.ard-foot-brand{display:inline-flex;align-items:center;gap:8px;color:var(--ard-ink);font:700 17px/1 var(--ard-font)}
.ard-foot .ard-mark{width:22px;height:22px}
.ard-foot-txt{color:var(--ard-ink-3)}
.ard-lang{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 0 auto}
.ard-lang span{color:var(--ard-ink-3);margin-right:2px}
.ard-lang button{min-height:34px;padding:5px 12px;border-radius:999px;cursor:pointer;font:500 12.5px/1 var(--ard-font);
  border:1px solid var(--ard-line-2);background:transparent;color:var(--ard-ink-2)}
.ard-lang button:hover{color:var(--ard-ink);border-color:var(--ard-blue-2)}
.ard-lang button[aria-pressed="true"]{background:rgba(47,99,240,.3);color:var(--ard-ink);border-color:var(--ard-blue-2)}
.ard-lang button:focus-visible{outline:2px solid var(--ard-cyan);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .ard-thread path,.ard-band::after,.ard-foot::before{animation:none}
  .ard-thread path{stroke-dashoffset:0;stroke-dasharray:none;opacity:.35}
}
@media print{.ard-band,.ard-foot{display:none!important}}

/* ── PULSE character strip slot (portal.html / trainer_landing.html) ─────
   Reserved before the strip exists, so it lands with no layout shift: the
   slot is exactly the strip's box (94 px) plus its 28 px bottom margin. */
body[data-pulse-theme] .pg-strip-slot{display:flow-root;min-height:122px}
.pg-strip-slot .pg-strip{height:94px;box-sizing:border-box;margin:0 0 28px!important}
.pg-strip-slot .pg-strip-txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}