/* Soltrac — hidden "grid" theme
   Activated by the thin key at the bottom edge or the eclipse prompt in the footer (see tron.js).
   Everything below is scoped to html[data-theme="tron"]; the default design is untouched.
   Palette: near-black blue, neon cyan for lines/structure, orange as the counter-colour. */

/* ---------- tokens ---------- */
html[data-theme="tron"]{
  --black:#02050B;          /* page surface  (default: #fff)  */
  --white:#EAF8FF;          /* ink           (default: #111)  */
  --text:#AFC6DA;
  --muted:#6FA8C4;
  --dim:#2F6B8A;
  --line:rgba(25,215,255,.42);
  --line-soft:rgba(25,215,255,.16);
  --orange:#FF7A2A;         /* accent → neon orange */
  --t-cyan:#19D7FF;
  --t-cyan-hi:#9DF4FF;
  --t-surface:rgba(4,12,24,.78);
  --t-glow:rgba(255,122,42,.45);
  --t-glow-soft:rgba(255,122,42,.16);
  --t-cglow:rgba(25,215,255,.35);
  --t-cglow-soft:rgba(25,215,255,.12);
  color-scheme:dark;
}

/* ---------- page: deep surface, perspective floor to the horizon, scanlines ---------- */
html[data-theme="tron"]{background:var(--black)}
html[data-theme="tron"] body{background:transparent;position:relative;z-index:0}
html[data-theme="tron"] body::before{                      /* the grid floor */
  content:"";position:fixed;left:-30vw;right:-30vw;bottom:-12vh;height:58vh;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(25,215,255,.5) 1.5px,transparent 1.5px),
    linear-gradient(90deg,rgba(25,215,255,.5) 1.5px,transparent 1.5px);
  background-size:90px 90px;background-position:0 0,0 0;
  transform-origin:50% 0;transform:perspective(560px) rotateX(63deg);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.9) 32%,#000 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.9) 32%,#000 100%);
  box-shadow:0 -1px 0 rgba(157,244,255,.9),0 -4px 14px rgba(25,215,255,.55),0 -14px 48px rgba(25,215,255,.25);
  opacity:.5;
  animation:tron-floor 3.2s linear infinite;
}
@keyframes tron-floor{to{background-position:0 90px,0 0}}
html[data-theme="tron"] body::after{                       /* scanlines */
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  opacity:.55;
}
html[data-theme="tron"] ::selection{background:var(--t-cyan);color:var(--black)}
html[data-theme="tron"] nav{background:rgba(2,5,11,.84);border-bottom-color:var(--line-soft);box-shadow:0 1px 0 rgba(25,215,255,.08),0 0 24px rgba(25,215,255,.06)}
html[data-theme="tron"] nav ul a:hover{color:var(--t-cyan-hi);text-shadow:0 0 12px var(--t-cglow)}
html[data-theme="tron"] .band,
html[data-theme="tron"] .after{background:var(--t-surface);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
html[data-theme="tron"] .card,
html[data-theme="tron"] .photo,
html[data-theme="tron"] .phero{background:var(--t-surface)}
html[data-theme="tron"] .viewer,
html[data-theme="tron"] .pstage,
html[data-theme="tron"] .card canvas{background:radial-gradient(120% 90% at 50% 40%,#071A30 0%,#02050B 70%)}
html[data-theme="tron"] .photo span{background:rgba(2,5,11,.82);color:var(--text)}
html[data-theme="tron"] .photo img,
html[data-theme="tron"] .phero img{filter:brightness(.8) saturate(.75) sepia(.3) hue-rotate(165deg)}
html[data-theme="tron"] .phero::after{background:linear-gradient(180deg,rgba(2,5,11,0) 22%,rgba(2,5,11,.6) 55%,rgba(2,5,11,.97) 100%),linear-gradient(90deg,rgba(2,5,11,.6) 0%,rgba(2,5,11,.3) 45%,rgba(2,5,11,0) 70%)}
html[data-theme="tron"] .copy::before{background:linear-gradient(90deg,rgba(2,5,11,.96) 0%,rgba(2,5,11,.9) 70%,rgba(2,5,11,0) 100%)}
@media (max-width:700px){
  html[data-theme="tron"] .copy::before{background:rgba(2,5,11,.86)}
  html[data-theme="tron"] body::before{background-size:56px 56px;height:50vh}
}

/* ---------- logo, type ---------- */
html[data-theme="tron"] .wordmark .logo{filter:invert(1) brightness(1.1) drop-shadow(0 0 6px rgba(25,215,255,.5))}
html[data-theme="tron"] h1,
html[data-theme="tron"] h2{text-shadow:0 0 28px rgba(157,244,255,.2)}
html[data-theme="tron"] .acc,
html[data-theme="tron"] .o{text-shadow:0 0 18px var(--t-glow),0 0 2px rgba(255,201,166,.6)}
html[data-theme="tron"] .mono.m{color:#4FC3E8;text-shadow:0 0 10px rgba(25,215,255,.3)}
html[data-theme="tron"] .mono.o{text-shadow:0 0 12px var(--t-glow)}
html[data-theme="tron"] .proof b,
html[data-theme="tron"] .facts3 b,
html[data-theme="tron"] .kpis .proof b{color:var(--t-cyan-hi);text-shadow:0 0 24px rgba(25,215,255,.45)}
html[data-theme="tron"] .rule{background:linear-gradient(90deg,rgba(25,215,255,.1),var(--t-cyan) 50%,rgba(25,215,255,.1));box-shadow:0 0 8px rgba(25,215,255,.5);opacity:.8}
html[data-theme="tron"] a{text-decoration-color:rgba(25,215,255,.5)}

/* ---------- neon outlines + corner marks ---------- */
html[data-theme="tron"] .card,
html[data-theme="tron"] .box,
html[data-theme="tron"] .feat,
html[data-theme="tron"] .pitem,
html[data-theme="tron"] .step,
html[data-theme="tron"] .grp,
html[data-theme="tron"] .photo,
html[data-theme="tron"] .msg,
html[data-theme="tron"] .tbd{box-shadow:0 0 14px var(--t-cglow-soft),inset 0 0 18px rgba(25,215,255,.04)}
html[data-theme="tron"] .card{position:relative}
html[data-theme="tron"] .card::before,
html[data-theme="tron"] .card::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--t-cyan-hi);pointer-events:none;filter:drop-shadow(0 0 3px rgba(25,215,255,.8))}
html[data-theme="tron"] .card::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
html[data-theme="tron"] .card::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
html[data-theme="tron"] .card:hover{border-color:var(--t-cyan);box-shadow:0 0 0 1px rgba(25,215,255,.25),0 0 28px var(--t-cglow)}
html[data-theme="tron"] table th,
html[data-theme="tron"] table td{border-color:var(--line-soft)}

/* ---------- controls ---------- */
html[data-theme="tron"] .btn{border-color:var(--line);box-shadow:0 0 10px var(--t-cglow-soft)}
html[data-theme="tron"] .btn:hover{border-color:var(--t-cyan);color:var(--t-cyan-hi);box-shadow:0 0 0 1px rgba(25,215,255,.3),0 0 18px var(--t-cglow)}
html[data-theme="tron"] .btn.p{position:relative;border-color:var(--orange);box-shadow:0 0 16px var(--t-glow-soft)}
html[data-theme="tron"] .btn.p:hover{background:var(--orange);color:var(--black);box-shadow:0 0 28px var(--t-glow)}
html[data-theme="tron"] .btn.p::before,
html[data-theme="tron"] .btn.p::after{content:"";position:absolute;width:7px;height:7px;border:1px solid #FFC9A6;pointer-events:none}
html[data-theme="tron"] .btn.p::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
html[data-theme="tron"] .btn.p::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
html[data-theme="tron"] .viewer .ctrl button.on,
html[data-theme="tron"] .opt button.on,
html[data-theme="tron"] .cfg .modes button.on,
html[data-theme="tron"] .legal .lang button.on{background:var(--t-cyan);color:var(--black);box-shadow:0 0 14px var(--t-cglow)}
html[data-theme="tron"] .f input,
html[data-theme="tron"] .f select,
html[data-theme="tron"] .f textarea{background:var(--t-surface);border-color:var(--line);color:var(--white)}
html[data-theme="tron"] .f input:focus,
html[data-theme="tron"] .f select:focus,
html[data-theme="tron"] .f textarea:focus{border-color:var(--t-cyan);box-shadow:0 0 0 1px rgba(25,215,255,.25),0 0 16px var(--t-cglow)}
html[data-theme="tron"] .f select{background-image:none}
html[data-theme="tron"] .msg{background:var(--t-surface)}
html[data-theme="tron"] .legal mark.miss{background:rgba(255,122,42,.12)}
html[data-theme="tron"] .mnav span,
html[data-theme="tron"] .mnav span::before,
html[data-theme="tron"] .mnav span::after{background:var(--t-cyan-hi);box-shadow:0 0 6px rgba(25,215,255,.7)}
html[data-theme="tron"] nav.open ul a{color:var(--text)}

/* ---------- the hidden key (thin line at the bottom edge) ---------- */
.tron-key{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:84px;height:26px;margin:0;padding:0;border:0;background:transparent;
  cursor:pointer;z-index:60;-webkit-tap-highlight-color:transparent;
}
.tron-key::after{
  content:"";position:absolute;left:50%;bottom:7px;width:28px;height:2px;
  transform:translateX(-50%);border-radius:1px;background:#19D7FF;
  opacity:.22;transition:opacity .25s,box-shadow .25s,width .25s;
}
.tron-key:hover::after,
.tron-key:focus-visible::after{opacity:.95;width:40px;box-shadow:0 0 8px rgba(25,215,255,.9),0 0 18px rgba(25,215,255,.45)}
.tron-key:focus{outline:none}
.tron-key:focus-visible{outline:1px solid rgba(25,215,255,.6);outline-offset:-1px}
html[data-theme="tron"] .tron-key::after{opacity:.6;background:#FF7A2A}
html[data-theme="tron"] .tron-key:hover::after,html[data-theme="tron"] .tron-key:focus-visible::after{box-shadow:0 0 8px rgba(255,122,42,.9),0 0 18px rgba(255,122,42,.45)}
@media (hover:none){.tron-key::after{opacity:.3}}

/* ---------- the eclipse prompt (footer) ----------
   light page: a small sun; on hover the shadow disc slides over it and the command types out.
   dark page: the eclipsed disc with a thin corona; the command reads --exit. */
.tron-eclipse{
  display:inline-flex;align-items:center;gap:10px;margin:0;padding:6px 0;border:0;background:transparent;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  -webkit-tap-highlight-color:transparent;white-space:nowrap;
}
.tron-eclipse .orb{position:relative;width:14px;height:14px;border-radius:50%;background:#DA5028;box-shadow:0 0 0 1px rgba(218,80,40,.25),0 0 10px rgba(218,80,40,.55);overflow:hidden;flex:none}
.tron-eclipse .orb i{position:absolute;inset:0;border-radius:50%;background:#111;transform:translateX(-16px);transition:transform .45s cubic-bezier(.4,0,.2,1)}
.tron-eclipse .pr{color:var(--dim)}
.tron-eclipse .tx{display:inline-block;max-width:0;overflow:hidden;vertical-align:bottom;color:var(--white);transition:max-width .55s steps(16,end)}
.tron-eclipse .cur{display:inline-block;width:7px;height:12px;margin-left:2px;background:currentColor;opacity:.7;animation:tron-cursor 1s steps(2,end) infinite;vertical-align:-1px}
.tron-eclipse .st{display:none;color:var(--dim);margin-left:8px}
.tron-eclipse:hover,.tron-eclipse:focus-visible{color:var(--white)}
.tron-eclipse:hover .orb i,.tron-eclipse:focus-visible .orb i{transform:translateX(0)}
.tron-eclipse:hover .tx,.tron-eclipse:focus-visible .tx{max-width:220px}
.tron-eclipse:focus{outline:none}
.tron-eclipse:focus-visible{outline:1px solid var(--line);outline-offset:4px}
@keyframes tron-cursor{to{opacity:0}}
@media (hover:none){.tron-eclipse .tx{max-width:220px}.tron-eclipse .orb i{transform:translateX(-10px)}}
@media (max-width:520px){.tron-eclipse .pr{display:none}}
html[data-theme="tron"] .tron-eclipse{color:var(--muted)}
html[data-theme="tron"] .tron-eclipse .orb{background:#02050B;box-shadow:0 0 0 1px rgba(255,122,42,.9),0 0 10px rgba(255,122,42,.7),0 0 22px rgba(255,122,42,.35)}
html[data-theme="tron"] .tron-eclipse .orb i{background:#02050B;transform:translateX(0)}
html[data-theme="tron"] .tron-eclipse .pr{color:#4FC3E8}
html[data-theme="tron"] .tron-eclipse .tx{color:var(--t-cyan-hi);text-shadow:0 0 10px rgba(25,215,255,.5)}
html[data-theme="tron"] .tron-eclipse .cur{color:var(--t-cyan-hi)}
html[data-theme="tron"] .tron-eclipse .st{display:inline;color:var(--orange);text-shadow:0 0 10px var(--t-glow)}
html[data-theme="tron"] .tron-eclipse:hover .orb{box-shadow:0 0 0 1px rgba(255,201,166,1),0 0 14px rgba(255,122,42,.9),0 0 30px rgba(255,122,42,.45)}

/* ---------- transition effect ---------- */
.tron-fx{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden;contain:strict}
.tron-fx .veil{position:absolute;inset:0;background:#02050B;opacity:0;transition:opacity .24s ease-out}
.tron-fx.in .veil{opacity:.94}
.tron-fx.out .veil{opacity:0;transition-duration:.6s;transition-timing-function:ease-in-out}
.tron-fx .derezz{position:absolute;left:0;top:0;display:block}

.tron-fx .grid{
  position:absolute;inset:0;opacity:0;
  background-image:
    linear-gradient(rgba(25,215,255,.42) 1px,transparent 1px),
    linear-gradient(90deg,rgba(25,215,255,.42) 1px,transparent 1px),
    radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(25,215,255,.22) 0%,rgba(25,215,255,0) 48%);
  background-size:56px 56px,56px 56px,100% 100%;
  background-position:center,center,0 0;
  clip-path:circle(0 at var(--x,50%) var(--y,50%));
  will-change:clip-path,opacity;
}
.tron-fx.in .grid{opacity:.85;transition:opacity .2s}
.tron-fx.spread .grid{clip-path:circle(160vmax at var(--x,50%) var(--y,50%));transition:clip-path 1s cubic-bezier(.2,.7,.2,1),opacity .2s}
.tron-fx.fade .grid{opacity:0;transition:opacity .5s ease-out,clip-path 1s cubic-bezier(.2,.7,.2,1)}

.tron-fx .horizon{
  position:absolute;left:0;right:0;top:var(--y,50%);height:1px;margin-top:-.5px;
  background:#9DF4FF;box-shadow:0 0 6px #19D7FF,0 0 18px rgba(25,215,255,.8),0 0 40px rgba(25,215,255,.4);
  transform:scaleX(0);transform-origin:var(--x,50%) 50%;opacity:0;will-change:transform,opacity;
}
.tron-fx.spread .horizon{transform:scaleX(1);opacity:1;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .15s}
.tron-fx.fade .horizon{opacity:0;transition:opacity .4s ease-out}

.tron-fx .scan{
  position:absolute;left:0;right:0;top:0;height:18vh;opacity:0;
  background:linear-gradient(180deg,rgba(255,122,42,0) 0%,rgba(255,122,42,.08) 40%,rgba(255,200,160,.55) 50%,rgba(255,122,42,.08) 60%,rgba(255,122,42,0) 100%);
  transform:translateY(-20vh);will-change:transform,opacity;
}
.tron-fx.scan .scan{opacity:1;transform:translateY(110vh);transition:transform .85s cubic-bezier(.4,0,.6,1),opacity .1s}
.tron-fx.fade .scan{opacity:0;transition:opacity .3s}

/* ---------- digitizer scene (3D canvas inside the overlay) ---------- */
.tron-fx .stage{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .45s ease-out;filter:drop-shadow(0 0 3px rgba(25,215,255,.4))}
.tron-fx.stage-on .stage{opacity:1}
.tron-fx.stage-on .grid{opacity:0;transition:opacity .7s ease-out,clip-path 1s cubic-bezier(.2,.7,.2,1)}
.tron-fx.stage-on .horizon{opacity:0;transition:opacity .5s}
.tron-fx.stage-out .stage,
.tron-fx.out .stage{opacity:0;transform:scale(1.035);transition:opacity .6s ease-in,transform .6s ease-in}

/* ---------- ambient vignette ---------- */
.tron-vignette{position:fixed;right:18px;bottom:34px;width:300px;height:200px;z-index:55;pointer-events:none;display:block;opacity:0;transition:opacity .5s;filter:drop-shadow(0 0 3px rgba(25,215,255,.35))}
.tron-vignette.on{opacity:1}
@media (max-width:700px){
  .tron-vignette{width:200px;height:140px;right:10px;bottom:30px}
  .tron-fx .stage,.tron-vignette{filter:none}
}

@media (prefers-reduced-motion:reduce){
  .tron-fx .grid,.tron-fx .horizon,.tron-fx .scan,.tron-fx .stage,.tron-fx .derezz,.tron-vignette{display:none}
  .tron-fx .veil{transition-duration:.15s}
  .tron-key::after,.tron-eclipse .tx,.tron-eclipse .orb i{transition:none}
  .tron-eclipse .cur{animation:none}
  html[data-theme="tron"] body::before{animation:none}
}