/* Ardito "game screen" body skin (28 Oct 2026, phase 3).
   Every staff page of pt.af247.app and ba.af247.app that carries the Ardito
   band (body[data-ard-fam]) gets a game-screen body: a themed, slowly moving
   arena backdrop per page family, game-styled cards and panels, glowing
   buttons and tables, animated counters and progress bars, hover and entrance
   motion. Light surfaces on purpose: every form and table stays readable and
   keeps its own colours; this file adds frame, light and motion, never a
   colour behind text.
   Not here: PULSE pages (their own skin), the two night-sky homes
   (data-pulse-theme pt / trainer), member pages (no band, no data-ard-fam).
   Motion: transform / opacity / background-size only (no layout shift); all of
   it inside prefers-reduced-motion: no-preference, and off in calm mode
   (html.ard-calm: Save-Data, 2G / 3G). Page animations (spinners) untouched. */

/* ── family accents: --ar (rgb of the light accent) / --ai (ink, for lines on light) ── */
body[data-ard-fam]{--ar:79,214,255;--ai:14,165,233}
body[data-ard-fam=coach],body[data-ard-fam=team],body[data-ard-fam=access]{--ar:157,184,255;--ai:79,107,255}
body[data-ard-fam=clients]{--ar:122,224,195;--ai:15,159,122}
body[data-ard-fam=schedule],body[data-ard-fam=money],body[data-ard-fam=guides]{--ar:70,221,158;--ai:16,158,106}
body[data-ard-fam=shift],body[data-ard-fam=floor]{--ar:245,189,85;--ai:201,138,12}
body[data-ard-fam=reports],body[data-ard-fam=people]{--ar:178,141,255;--ai:124,77,255}
body[data-ard-fam=leads]{--ar:255,77,94;--ai:225,29,72}
body[data-ard-fam=growth]{--ar:255,143,155;--ai:229,72,106}
body[data-ard-fam=control]{--ar:255,200,97;--ai:199,138,0}

/* ── the arena: a night backdrop per family, the page's own blocks float on it as lit screens ──
   html carries the backdrop (the page's body background is cleared); every top-level block of
   the page that has no background of its own gets a light screen surface (zero specificity:
   any background the page sets wins), so text keeps the surface it was designed on. */
@supports selector(:has(a)){
  html:has(>body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer])){
    --hr:79,214,255;background:#060a1d}
  html:has(>body[data-ard-fam=leads]){--hr:255,77,94}
  html:has(>body[data-ard-fam=growth]){--hr:255,143,155}
  html:has(>body:is([data-ard-fam=money],[data-ard-fam=schedule],[data-ard-fam=guides])){--hr:70,221,158}
  html:has(>body:is([data-ard-fam=shift],[data-ard-fam=floor])){--hr:245,189,85}
  html:has(>body:is([data-ard-fam=reports],[data-ard-fam=people])){--hr:178,141,255}
  html:has(>body[data-ard-fam=control]){--hr:255,200,97}
  html:has(>body[data-ard-fam=clients]){--hr:122,224,195}
  html:has(>body:is([data-ard-fam=coach],[data-ard-fam=team],[data-ard-fam=access])){--hr:157,184,255}
  html:has(>body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]))>body{
    background:transparent!important}
  :where(html:has(>body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer])))>:where(body)>
  :where(:not(.ard-band,.ard-foot,.ard-hud,#pulse-hud,#pulse-strip-slot,script,style,link,template,noscript,svg,iframe,[hidden])){
    background-color:#f6f7fc;border-radius:14px;
    box-shadow:0 0 0 1px rgba(var(--hr),.30),0 26px 60px -30px rgba(0,0,0,.85),inset 0 2px 0 rgba(var(--hr),.65)}
  html:has(>body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]))::before,
  html:has(>body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]))::after{
    content:"";position:fixed;z-index:-1;pointer-events:none}
  /* the arena floor: a lit triangle lattice */
  html:has(>body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]))::before{
    inset:-120px;
    background:
      repeating-linear-gradient(60deg,rgba(150,180,255,.075) 0 1px,transparent 1px 36px),
      repeating-linear-gradient(-60deg,rgba(150,180,255,.075) 0 1px,transparent 1px 36px),
      repeating-linear-gradient(0deg,rgba(150,180,255,.05) 0 1px,transparent 1px 62px)}
  /* the family's light: two glows and a beam */
  html:has(>body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]))::after{
    inset:0;
    background:
      radial-gradient(60vmax 40vmax at 0% 0%,rgba(var(--hr),.30),transparent 70%),
      radial-gradient(55vmax 36vmax at 100% 100%,rgba(var(--hr),.24),transparent 70%),
      linear-gradient(115deg,transparent 30%,rgba(var(--hr),.12) 46%,transparent 62%)}
}
@supports not selector(:has(a)){
  body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]){
    background:radial-gradient(60vmax 38vmax at 0 0,rgba(var(--ar),.18),transparent 70%),#edf1fa!important}
}
/* the screen: on PT the page's own content is wrapped server-side (skin.SCREEN_OPEN) and gets the light
   surface above as ONE panel; flow-root keeps the children's margins inside it. */
body[data-ard-fam]>.ard-screen{display:flow-root;margin:12px clamp(0px,3vw - 16px,28px) 16px}
@media (max-width:600px){body[data-ard-fam]>.ard-screen{margin:8px 0 12px;border-radius:12px}}
/* where the screen paints its surface it is also a stacking context ABOVE the band and the footer
   (z-index 1): a dialog inside the page still covers them (Codex 28 Oct: trainer_client's booking
   dialog), and a block's own backdrop drawn at a negative z-index (the PT header's gradient) stays above
   the surface. As a flex item it takes z-index without position, so it never becomes the containing
   block of the page's absolutely positioned elements. */
@supports selector(:has(a)){
  body[data-ard-fam]:has(>.ard-screen){display:flex;flex-direction:column}
  body[data-ard-fam]>.ard-screen{z-index:2}
}
/* HUD: four lit corner brackets on the screen edge, like a game camera (thin, never clickable) */
.ard-hud{position:fixed;inset:6px;z-index:2147482000;pointer-events:none;
  background:
    linear-gradient(rgb(var(--ar)),rgb(var(--ar))) 0 0/22px 2px,linear-gradient(rgb(var(--ar)),rgb(var(--ar))) 0 0/2px 22px,
    linear-gradient(rgb(var(--ar)),rgb(var(--ar))) 100% 0/22px 2px,linear-gradient(rgb(var(--ar)),rgb(var(--ar))) 100% 0/2px 22px,
    linear-gradient(rgb(var(--ar)),rgb(var(--ar))) 0 100%/22px 2px,linear-gradient(rgb(var(--ar)),rgb(var(--ar))) 0 100%/2px 22px,
    linear-gradient(rgb(var(--ar)),rgb(var(--ar))) 100% 100%/22px 2px,linear-gradient(rgb(var(--ar)),rgb(var(--ar))) 100% 100%/2px 22px;
  background-repeat:no-repeat;opacity:.55;filter:drop-shadow(0 0 6px rgba(var(--ar),.9))}
@media print{.ard-hud{display:none}body[data-ard-fam]>.ard-screen{margin:0;box-shadow:none!important;border-radius:0;background:none!important}}

/* ── panels and cards: a lit frame in the family colour ─────────────────── */
body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]) :is(
  .card,.af-card,.form-card,.af-stat-card,.wis-box,.narr-box,.v2-platform-card,.tile,.tile2,.kpi,.box,.stat,.metric,
  main .rounded-xl.bg-white,main .rounded-2xl.bg-white,main .rounded-lg.border.bg-white,main .card){
  box-shadow:0 0 0 1px rgba(var(--ai),.16),0 14px 34px -22px rgba(14,22,64,.55),inset 0 2px 0 rgba(var(--ar),.75)!important}

/* ── titles ─────────────────────────────────────────────────────────────── */
body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]) :where(h1){
  background-image:linear-gradient(90deg,rgb(var(--ai)),rgba(var(--ar),.9) 60%,transparent);
  background-repeat:no-repeat;background-position:0 100%;background-size:72px 3px;padding-bottom:7px}
body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]) :is(.af-section-title,.section-title,.section-label){
  text-shadow:0 0 18px rgba(var(--ar),.35)}

/* ── buttons, fields, tables, pills ─────────────────────────────────────── */
body[data-ard-fam]:not([data-ard-fam=game]) :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus-visible{
  box-shadow:0 0 0 3px rgba(var(--ar),.45)!important;border-color:rgb(var(--ai))!important;outline:none}
body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]) table th{
  box-shadow:inset 0 -2px 0 rgba(var(--ai),.35)}
body[data-ard-fam]:not([data-ard-fam=game]) :is(.badge-pill,.af-pill-status){
  box-shadow:0 0 0 1px rgba(var(--ai),.12),0 0 14px -4px rgba(var(--ar),.8)}
body[data-ard-fam] :is(.num,.kpi-num,.tnum,.stat .v,.metric .v){font-variant-numeric:tabular-nums}
body[data-ard-fam] .ard-counted{text-shadow:0 0 16px rgba(var(--ar),.55)}
@media (hover:hover){
  body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]) tbody tr:hover>td{
    background-color:rgba(var(--ar),.10)}
  body[data-ard-fam]:not([data-ard-fam=game]) :is(.btn,.af-btn,.row-btn,.save-btn,.submit-btn,.ptp-btn,.clock-btn,.p-clock-btn,
    button[type=submit],input[type=submit],main button):not(:disabled):hover{
    filter:brightness(1.06) saturate(1.12);box-shadow:0 8px 22px -10px rgba(var(--ai),.75),0 0 0 2px rgba(var(--ar),.35)}
}

/* ── motion (never under reduced motion, never in calm mode) ────────────── */
@media (prefers-reduced-motion:no-preference){
  html:not(.ard-calm):has(>body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]))::before{
    animation:ard-drift 48s linear infinite;will-change:transform}
  html:not(.ard-calm):has(>body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]))::after{
    animation:ard-breathe 9s ease-in-out infinite;will-change:opacity}
  html:not(.ard-calm) body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]) :is(
    .card,.af-card,.form-card,.af-stat-card,.wis-box,.narr-box,.v2-platform-card,.tile,.tile2,.kpi,.box,.stat,.metric,
    main .rounded-xl.bg-white,main .rounded-2xl.bg-white,main .rounded-lg.border.bg-white,main .card){
    transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s;
    animation:ard-rise .55s cubic-bezier(.2,.8,.2,1) both}
  html:not(.ard-calm) body[data-ard-fam] :is(.card,.af-card,.tile,.kpi,.stat,main .rounded-xl.bg-white,main .card):nth-child(2){animation-delay:.05s}
  html:not(.ard-calm) body[data-ard-fam] :is(.card,.af-card,.tile,.kpi,.stat,main .rounded-xl.bg-white,main .card):nth-child(3){animation-delay:.1s}
  html:not(.ard-calm) body[data-ard-fam] :is(.card,.af-card,.tile,.kpi,.stat,main .rounded-xl.bg-white,main .card):nth-child(4){animation-delay:.15s}
  html:not(.ard-calm) body[data-ard-fam] :is(.card,.af-card,.tile,.kpi,.stat,main .rounded-xl.bg-white,main .card):nth-child(n+5){animation-delay:.2s}
  html:not(.ard-calm) body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]) :where(h1){
    animation:ard-charge .9s .15s cubic-bezier(.2,.8,.2,1) both}
  html:not(.ard-calm) body[data-ard-fam]:not([data-ard-fam=game]) :is([role=progressbar]>*,.bar>i,.progress>*,.progress-bar){
    transform-origin:0 50%;animation:ard-grow 1.1s .2s cubic-bezier(.2,.8,.2,1) both}
  html:not(.ard-calm) body[data-ard-fam]:not([data-ard-fam=game]) :is(.btn,.af-btn,.row-btn,.save-btn,.submit-btn,.btn-mini,.ptp-btn,
    .clock-btn,.p-clock-btn,button[type=submit],input[type=submit],main button){transition:transform .15s ease,box-shadow .25s ease,filter .25s ease}
  html:not(.ard-calm) body[data-ard-fam]:not([data-ard-fam=game]) :is(.btn,.af-btn,.row-btn,.save-btn,.submit-btn,.ptp-btn,.clock-btn,
    .p-clock-btn,button[type=submit],input[type=submit],main button):not(:disabled):active{transform:scale(.97)}
  body[data-ard-fam] .ard-counted{transition:text-shadow 1.2s ease}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  html:not(.ard-calm) body[data-ard-fam]:not([data-ard-fam=game],[data-pulse-theme=pt],[data-pulse-theme=trainer]) :is(
    .card,.af-card,.af-stat-card,.v2-platform-card,.tile,.tile2,.kpi,.stat,.metric,main .rounded-xl.bg-white,main .card):hover{
    transform:translateY(-2px);
    box-shadow:0 0 0 1px rgba(var(--ai),.32),0 22px 40px -22px rgba(var(--ai),.55),inset 0 2px 0 rgba(var(--ar),1)!important}
}
@keyframes ard-rise{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes ard-charge{from{background-size:0 3px}}
@keyframes ard-grow{from{transform:scaleX(0)}}
@keyframes ard-drift{to{transform:translate3d(62px,36px,0)}}
@keyframes ard-breathe{0%,100%{opacity:.7}50%{opacity:1}}
@media print{html:has(>body[data-ard-fam])::before,html:has(>body[data-ard-fam])::after{display:none!important}}