/* Page shell for the caradar. site: which layout shows, global theme,
   the scaled video player, and small UI bits added by site.js.
   Loaded after the board styles so it wins ties. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#F3F5F9;color:#0B1E3F}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body{background:#061229;color:#EEF2F8}

/* mobile layout below 980px (centred column on tablets), desktop layout above */
.v-m,.v-d{display:none}
@media (max-width:979.98px){.v-m{display:block;max-width:720px;margin:0 auto}}
@media (min-width:980px){.v-d{display:block}}
.v-m [id],.v-d [id]{scroll-margin-top:84px}

/* theme button: one icon per theme */
.t-sun,.t-moon{display:flex}
html[data-theme="dark"] .t-moon,html:not([data-theme="dark"]) .t-sun{display:none}
html.theme-anim,html.theme-anim *{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease !important}

/* video player: the 960x540 stage is scaled with --vs (set by site.js) */
.vplayer>.vid{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--vs,1))}
/* on phones the caption and controls sit under the picture at full size */
.v-m .vplayer{aspect-ratio:auto;height:calc(540px * var(--vs,.37) + 136px)}
.v-m .vplayer>.vid{height:calc(540px + 136px / var(--vs,.37))}
.v-m .vplayer .scn{bottom:auto;height:430px}
.v-m .vplayer .cap{left:0;top:540px;bottom:auto;width:calc(960px * var(--vs,.37));max-width:none;box-sizing:border-box;transform:scale(calc(1 / var(--vs,.37)));transform-origin:0 0;padding:12px 16px;border:0;border-radius:0;background:none;font-size:15px;line-height:1.45;text-align:left;animation:cr-fade .35s ease both}
.v-m .vplayer .ctrl{left:0;right:auto;bottom:0;box-sizing:border-box;width:calc(960px * var(--vs,.37));height:52px;transform:scale(calc(1 / var(--vs,.37)));transform-origin:0 100%;background:none}

/* toast and notice */
.cr-toast{position:fixed;left:50%;bottom:24px;z-index:100;max-width:calc(100vw - 32px);box-sizing:border-box;padding:12px 18px;border-radius:12px;background:#0B1E3F;color:#FFFFFF;font:600 14.5px/1.4 'Plus Jakarta Sans',system-ui,sans-serif;box-shadow:0 12px 32px rgba(0,0,0,.3);transform:translateX(-50%);animation:cr-toast .3s ease both}
.cr-note{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;max-width:560px;margin:0 auto;display:flex;align-items:flex-start;gap:14px;padding:16px 14px 16px 18px;border-radius:16px;background:#0B1E3F;color:#F3F6FB;font:500 14.5px/1.5 'Plus Jakarta Sans',system-ui,sans-serif;box-shadow:0 18px 44px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);animation:cr-rise .45s cubic-bezier(.2,.8,.2,1) both}
.cr-note b{display:block;margin-bottom:2px;font-size:15.5px;font-weight:800;color:#FFFFFF}
.cr-note b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#FF6A1A;vertical-align:1px}
.cr-note button{flex:none;width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.1);color:inherit;font:inherit;font-size:22px;line-height:1;cursor:pointer}
.cr-note button:hover{background:rgba(255,255,255,.2)}
@keyframes cr-fade{from{opacity:0}to{opacity:1}}
@keyframes cr-toast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes cr-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media print{
  .v-m{display:none !important}
  .v-d{display:block !important}
  .hdr,.v-d footer,.secnav,.cr-note,.cr-toast,[data-act]{display:none !important}
  *,*::before,*::after{animation:none !important;transition:none !important}
}