/* WIA Mockup shared chrome: theme switch + studio light (inc/ui.php, assets/wm-ui.js) */
@property --mx{syntax:'<length>';inherits:true;initial-value:-999px}
@property --my{syntax:'<length>';inherits:true;initial-value:-999px}
:root{--dot:rgba(23,24,28,.55);--dot-base:.09;--dot-lit:rgba(23,24,28,.42);--halo:rgba(255,190,110,.20);--halo2:rgba(31,94,255,.06)}
:root[data-theme="dark"]{--dot:rgba(255,255,255,.7);--dot-base:.07;--dot-lit:rgba(255,236,204,.78);--halo:rgba(255,206,140,.13);--halo2:rgba(91,140,255,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--dot:rgba(255,255,255,.7);--dot-base:.07;--dot-lit:rgba(255,236,204,.78);--halo:rgba(255,206,140,.13);--halo2:rgba(91,140,255,.08)}}

/* ---- studio light: a photo-studio dot floor; the pointer is the softbox ---- */
body>header,body>main,body>footer{position:relative;z-index:1}
body>header{z-index:5}
.studio{position:fixed;inset:0;pointer-events:none;z-index:0;--mx:50vw;--my:-120px;transition:--mx .45s cubic-bezier(.2,.7,.2,1),--my .45s cubic-bezier(.2,.7,.2,1)}
.studio::before,.studio::after{content:"";position:absolute;inset:0;background-size:24px 24px;background-position:12px 12px}
.studio::before{background-image:radial-gradient(circle,var(--dot) 1px,transparent 1.6px);opacity:var(--dot-base)}
.studio::after{background-image:radial-gradient(circle,var(--dot-lit) 1.3px,transparent 1.9px);
  -webkit-mask-image:radial-gradient(240px circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.45) 45%,transparent 78%);
  mask-image:radial-gradient(240px circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.45) 45%,transparent 78%);transition:opacity .6s}
.studio .halo{position:absolute;inset:0;background:radial-gradient(560px circle at var(--mx) var(--my),var(--halo),var(--halo2) 45%,transparent 72%);transition:opacity .6s}
.studio.off::after,.studio.off .halo{opacity:0}
/* first visit: the light sweeps across the hero once */
@keyframes wm-sweep{0%{--mx:-260px;--my:140px}55%{--mx:62vw;--my:300px}100%{--mx:108vw;--my:180px}}
.studio.sweep{animation:wm-sweep 2.4s cubic-bezier(.45,.05,.3,1) both;transition:none}
/* touch screens / reduced motion: a still key light from the top, no tracking */
.studio.still{--mx:50vw;--my:-60px;transition:none}

/* ---- theme switch (auto / light / dark) ---- */
.theme-sw{position:relative;display:inline-flex}
.theme-sw .theme-btn{width:40px;height:40px;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:10px}
.theme-btn svg{width:19px;height:19px}
.theme-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:50;min-width:200px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);box-shadow:0 18px 40px -16px rgba(0,0,0,.35)}
.theme-menu[hidden]{display:none}
.theme-menu b{display:block;font-size:12px;font-weight:600;color:var(--mute);padding:6px 10px 4px}
.theme-menu button{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:14px;text-align:start;cursor:pointer}
.theme-menu button svg{width:17px;height:17px;flex:none}
.theme-menu button:hover,.theme-menu button:focus-visible{background:var(--chip);outline:none}
.theme-menu button[aria-checked="true"]{color:var(--accent);font-weight:600}
.theme-menu button[aria-checked="true"]::after{content:"";margin-inline-start:auto;width:7px;height:7px;border-radius:50%;background:currentColor}
/* theme change: a circle opens from the button (View Transitions); otherwise colours glide */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-anim,html.theme-anim *{transition:background-color .8s,color .8s,border-color .8s!important}
@media (prefers-reduced-motion:reduce){.studio{transition:none}.studio.sweep{animation:none}}
@media print{.studio,.theme-sw{display:none}}

/* ---- publisher imprint ---- */
.by-pub{font-size:11px;font-weight:500;color:var(--mute);text-decoration:none;letter-spacing:.02em;padding:3px 8px;border:1px solid var(--line);border-radius:999px;margin-inline-start:2px;white-space:nowrap}
.by-pub:hover{color:var(--ink);border-color:var(--mute)}
.brand-wrap{display:flex;align-items:center;gap:8px;min-width:0}
footer .pub-line{margin:0 0 6px;color:var(--ink);font-size:13.5px}
footer .pub-link{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
footer p{margin:0}
.pubcard{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:22px 0 6px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.pubcard p{margin:0;font-size:14px;line-height:1.55}
.pubcard p b{display:block;font-size:15px;margin-bottom:2px}
.pubcard .btn{flex:none}
@media (max-width:420px){.by-pub{display:none}}

/* ---- right rail: only where there is real room (viewport >= 1900px). Sticky, quiet, same tokens as the page. ---- */
.rail{display:none}
@media (min-width:1900px){
  .rail{display:block;position:fixed;top:92px;inset-inline-end:max(20px,calc((100vw - 1280px)/2 - 300px));width:260px;z-index:2;max-height:calc(100vh - 112px);overflow-y:auto;scrollbar-width:none;padding:2px 0 8px}.rail::-webkit-scrollbar{display:none}
  .rail-card{display:block;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none;overflow:hidden;transition:border-color .2s,transform .2s}
  .rail-card:hover{border-color:var(--mute);transform:translateY(-2px)}
  .rail-pub img{display:block;width:100%;height:auto;aspect-ratio:560/327;object-fit:cover}
  @media (max-height:1080px){.rail-pub img{aspect-ratio:560/230}.rail-body{padding:12px 16px 14px}}
  .rail-body{display:block;padding:14px 16px 16px}
  .rail-body small{display:block;font-size:11px;letter-spacing:.06em;color:var(--mute);margin-bottom:4px}
  .rail-body b{display:block;font-size:15px;line-height:1.35;margin-bottom:8px}
  .rail-body ul{margin:0 0 12px;padding:0;list-style:none;font-size:12.5px;line-height:1.5;color:var(--mute)}
  .rail-body li{padding-inline-start:14px;position:relative;margin-bottom:3px}
  .rail-body li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
  .rail-btn{display:inline-block;font-size:13px;font-weight:600;color:var(--accent)}
  .rail-kicker{margin:16px 2px 8px;font-size:11px;letter-spacing:.06em;color:var(--mute)}
  .rail-tool{display:flex;gap:12px;align-items:center;padding:12px 14px;margin-bottom:8px}
  .rail-tool b{display:block;font-size:13.5px;line-height:1.3;margin-bottom:2px}
  .rail-tool small{display:block;font-size:11.5px;line-height:1.4;color:var(--mute)}
  .rail-ico{flex:none;width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--chip);color:var(--ink);font-size:12px;font-weight:700}
  .rail-ico-sm{font-size:10.5px;letter-spacing:-.02em}
  .rail-ico-code::before{content:"";width:20px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5 1.9 11.6A6 6 0 0 1 12 3.3a6 6 0 0 1 10.1 8.3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5 1.9 11.6A6 6 0 0 1 12 3.3a6 6 0 0 1 10.1 8.3z'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media print{.rail{display:none!important}}