/* THE POLISH PASS for the tactical skin (2026-11-05), for the tactical skin. Pure CSS on top of hm5.css + hm5-cod.css:
   nothing here changes a number, a layout or a flow. Loaded on every page by hm5-shell.js after hm5-cod.css.
   Every motion is cut off by prefers-reduced-motion. Light keeps the plain look: all of it sits under html.hm5-cod. */

/* ---- the door bar: glass over the scene, a sharper hairline, the live dot breathes ---- */
html.hm5-cod .hm5-topnav{-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);box-shadow:inset 0 2px 0 var(--acc),0 1px 0 rgba(255,255,255,.05),0 14px 30px -18px rgba(0,0,0,.9)}
html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door .hm5-live{animation:pzBreathe 2.4s ease-in-out infinite!important}
@keyframes pzBreathe{0%,100%{box-shadow:0 0 6px var(--acc);transform:scale(1)}50%{box-shadow:0 0 14px var(--acc),0 0 2px #fff;transform:scale(1.15)}}
html.hm5-cod :is(.pill,.badge,.chip,.hm5-bpill){box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.35);transition:border-color .25s,box-shadow .25s}

/* ---- cards: a soft edge light at rest, a lift on hover (the corner cut hides an outer glow, so the glow is inside) ---- */
html.hm5-cod :is(.card,.listcard,.board-card,.gm-card,.pv-w,.pv-path,.bk-tile,.ls-course){background-image:linear-gradient(180deg,rgba(255,255,255,.035),transparent 18%);transition:transform .28s var(--ease-o),box-shadow .28s var(--ease-o),border-color .28s}
@media(hover:hover){
  html.hm5-cod :is(.card,.listcard,.board-card,.gm-card,.pv-w,.pv-path,.bk-tile,.ls-course):hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04),0 0 28px -10px var(--acc-glow),inset 0 1px 0 rgba(255,255,255,.05)}
}

/* ---- buttons and tabs: a crisper press ---- */
html.hm5-cod :is(.btn,.go,.tf,.seg button,.tb-tab,.nav-tab,.ptab){transition:transform .12s,filter .18s,box-shadow .18s,background-color .18s,border-color .18s,color .18s}
html.hm5-cod :is(.tf,.seg button,.tb-tab,.nav-tab,.ptab):active{transform:translateY(1px) scale(.985)}
html.hm5-cod :is(.go,.hm5-nav-cta){box-shadow:0 6px 18px -8px var(--acc)}

/* ---- numbers: tabular figures everywhere, and a flash when a value changes (hm5-polish.js adds pz-up / pz-dn) ---- */
html.hm5-cod :is(td,th,.num,.px,.pnl,.tp-i,.hm5-tape,.stat b,.big){font-variant-numeric:tabular-nums}
.pz-up{animation:pzUp 1.4s ease-out}.pz-dn{animation:pzDn 1.4s ease-out}
@keyframes pzUp{0%{background:rgba(31,209,138,.32);text-shadow:0 0 14px rgba(31,209,138,.9)}100%{background:transparent;text-shadow:none}}
@keyframes pzDn{0%{background:rgba(255,77,94,.3);text-shadow:0 0 14px rgba(255,77,94,.9)}100%{background:transparent;text-shadow:none}}

/* ---- skeleton rows while a table waits for its data (hm5-polish.js) ---- */
.pz-skel td{padding:14px 10px}
.pz-skel span{display:block;height:12px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.05) 75%);background-size:200% 100%;animation:pzShimmer 1.3s linear infinite}
@keyframes pzShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---- page entry: the content fades up once, nothing jumps ---- */
html.hm5-cod.pz-in main,html.hm5-cod.pz-in .wrap,html.hm5-cod.pz-in .page{animation:pzFade .45s ease-out both}
@keyframes pzFade{from{opacity:0}to{opacity:1}}

/* ---- keyboard focus you can see ---- */
html.hm5-cod :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--acc);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  html.hm5-cod .hm5-topnav .hm5-tabs>.hm5-door .hm5-live,.pz-skel span,html.hm5-cod.pz-in main,html.hm5-cod.pz-in .wrap,html.hm5-cod.pz-in .page{animation:none!important}
  html.hm5-cod :is(.card,.listcard,.board-card,.gm-card,.pv-w,.pv-path,.bk-tile,.ls-course,.btn){transition:none!important;transform:none!important}
  .pz-up,.pz-dn{animation:none!important}
}

/* THE FOLD ARROW (owner, 2026-11-05 night: "make the side bar arrow 3d and green or animated so they know to push it"):
   a raised green key with a hard shadow below it, a chevron that nudges in the direction it will open, flat when pressed. */
.hm5-side-tog{--nd:-3px;width:34px!important;height:34px!important;border-radius:8px!important;border:1px solid #1f9e4e!important;background:linear-gradient(180deg,#4ae27f 0%,#1fd18a 45%,#1fa554 100%)!important;box-shadow:0 3px 0 #146c37,0 6px 14px rgba(31,209,138,.38),inset 0 1px 0 rgba(255,255,255,.45)!important;animation:hm5togNudge 2.8s ease-in-out infinite;transition:box-shadow .12s,filter .12s!important}
html.hm5-side-min .hm5-side-tog,html.hm5-rail .hm5-side-tog{--nd:3px}
.hm5-side-tog i{border-color:#04110b!important;border-width:3px!important;width:10px!important;height:10px!important}
.hm5-side-tog:hover{filter:brightness(1.1);animation:none}
.hm5-side-tog:active{transform:translateY(3px)!important;box-shadow:0 0 0 #146c37,0 2px 6px rgba(31,209,138,.3),inset 0 1px 0 rgba(255,255,255,.3)!important;animation:none}
@keyframes hm5togNudge{0%,64%,100%{transform:translateX(0)}72%{transform:translateX(var(--nd))}80%{transform:translateX(0)}88%{transform:translateX(var(--nd))}}
@media (prefers-reduced-motion:reduce){.hm5-side-tog{animation:none}}