/* tech theme: styles scoped to .theme-panel[data-theme="tech"]
   Tech, Environment & Future Industries: electric and engineered. Near-black with electric cyan and
   blue and one ultraviolet spark, a cropped chip with circuit traces carrying pulses of light, a fine
   dot grid, a slow scan line and a rare glitch on a terminal-style monospaced heading. Questions sit
   on traces with via nodes and filled PCB-pad numbers; cards are crisp neon hairline modules. */

.theme-panel[data-theme="tech"]{
  --tp-bg:
    radial-gradient(70% 60% at 100% 0%, rgba(24,170,255,.22) 0%, rgba(24,170,255,0) 70%),
    radial-gradient(55% 50% at 100% 100%, rgba(45,95,255,.16) 0%, rgba(45,95,255,0) 72%),
    linear-gradient(165deg, #08121C 0%, #050A11 55%, #03070C 100%);
  /* photo: see the ::before rule at the end of this file */
  --tp-photo-pos: 70% 50%;
  /* deep blue-black wash: heaviest behind the text column, thinner on the right where the facility glows */
  --tp-overlay:
    linear-gradient(90deg, rgba(3,7,12,.94) 0%, rgba(3,7,12,.88) 42%, rgba(3,7,12,.66) 70%, rgba(3,7,12,.44) 100%),
    linear-gradient(180deg, rgba(3,7,12,.12) 0%, rgba(3,7,12,0) 35%, rgba(3,7,12,.6) 100%);
  --tp-accent: #22E1FF;
  --tp-accent-2: #7DF0FF;
  --tp-text: #EAF6FF;
  --tp-text-2: #9FB8CB;
  --tp-line: rgba(64,220,255,.16);
  --tp-card: linear-gradient(180deg, rgba(10,24,36,.80) 0%, rgba(5,12,20,.82) 100%);
  --tp-card-border: rgba(46,214,255,.24);
  /* terminal voice: monospaced uppercase heading, unlike any other theme's display face */
  --tp-font-display: "Geist Mono", ui-monospace, Menlo, monospace;
  --tp-font-body: "Geist", -apple-system, system-ui, sans-serif;
  --tp-font-label: "Geist Mono", ui-monospace, Menlo, monospace;
  --tp-h3-size: clamp(30px, 3.2vw, 46px);
  --tp-h3-weight: 500;
  --tp-h3-stretch: 100%;
  --tp-h3-style: normal;
  --tp-h3-transform: uppercase;
  --tp-h3-tracking: -.02em;
  --tp-radius:20px;
  --tp-decor-opacity: 1;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 70px rgba(20,140,255,.07);
}

/* slow scan line sweeping down behind the text */
.theme-panel[data-theme="tech"]::after{
  content:"";position:absolute;left:0;right:0;top:-100%;height:200%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(34,225,255,0) 0%, rgba(34,225,255,0) 46.5%, rgba(34,225,255,.04) 49.7%, rgba(160,246,255,.15) 50%, rgba(34,225,255,0) 50.12%, rgba(34,225,255,0) 100%);
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 55%, #000 100%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 55%, #000 100%);
  animation:tech-scan 10s linear infinite;
}
@keyframes tech-scan{
  0%{transform:translateY(0);opacity:0}
  5%{opacity:1}
  56%{opacity:1}
  62%{transform:translateY(50%);opacity:0}
  100%{transform:translateY(50%);opacity:0}
}

/* status chip with a slow ultraviolet status LED */
.theme-panel[data-theme="tech"] .panel-n{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:7px 9px 7px 10px;
  font-size:11px;font-weight:500;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:var(--tp-accent-2);
  border:1px solid rgba(34,225,255,.34);border-radius:2px;background:rgba(34,225,255,.06);
  box-shadow:0 0 18px rgba(34,225,255,.08);
}
.theme-panel[data-theme="tech"] .panel-n::before{
  content:"";flex:none;width:6px;height:6px;background:#A98CFF;box-shadow:0 0 10px rgba(169,140,255,.95);
  animation:tech-blink 4.4s ease-in-out infinite;
}
@keyframes tech-blink{0%,100%{opacity:1}50%{opacity:.5}}

/* heading: monospaced terminal uppercase, faint electric glow, a rare chromatic glitch */
.theme-panel[data-theme="tech"] h3{
  /* two balanced lines on desktop, kept clear of the chip in the top-right corner */
  max-width:min(570px, calc(100% - 130px));line-height:1.14;color:#F3FBFF;text-wrap:balance;
  text-shadow:0 0 30px rgba(34,200,255,.28);
  animation:tech-glitch 8s steps(1,end) 1.5s infinite;
}
.theme-panel[data-theme="tech"] h3::after{
  content:"";display:block;width:136px;height:2px;margin-top:22px;
  background:linear-gradient(90deg, #A98CFF 0 10px, rgba(0,0,0,0) 10px 16px, #22E1FF 16px, rgba(34,225,255,0) 100%);
}
@keyframes tech-glitch{
  0%{text-shadow:0 0 30px rgba(34,200,255,.28);transform:none}
  92%{text-shadow:-2px 0 rgba(34,225,255,.85), 2px 0 rgba(169,140,255,.6), 0 0 30px rgba(34,200,255,.28);transform:translateX(1px)}
  93%{text-shadow:2px 0 rgba(34,225,255,.85), -2px 0 rgba(110,150,255,.7), 0 0 30px rgba(34,200,255,.28);transform:translateX(-1px) skewX(-3deg)}
  94.5%{text-shadow:0 0 30px rgba(34,200,255,.28);transform:none}
}

/* section labels with a diamond node */
.theme-panel[data-theme="tech"] h4{display:flex;align-items:center;gap:11px;letter-spacing:.2em;color:#93B1C6}
.theme-panel[data-theme="tech"] h4::before{content:"";flex:none;width:6px;height:6px;border:1px solid var(--tp-accent);transform:rotate(45deg);box-shadow:0 0 6px rgba(34,225,255,.5)}

/* questions: a measure that stops short of the circuit column; each rule is a trace that starts at a
   via node, and the numbers are filled, chamfered PCB pads */
.theme-panel[data-theme="tech"] .questions{max-width:min(600px, calc(100% - 130px))}
.theme-panel[data-theme="tech"] .questions li{padding-left:58px;line-height:1.55;color:var(--tp-text)}
.theme-panel[data-theme="tech"] .questions li::before{
  top:20px;padding:4px 7px 3px 6px;font-size:10.5px;font-weight:500;line-height:1;letter-spacing:.08em;
  color:#03121A;background:var(--tp-accent);border:0;border-radius:0;
  clip-path:polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.theme-panel[data-theme="tech"] .questions li::after{
  content:"";position:absolute;left:-3px;top:-4px;width:7px;height:7px;box-sizing:border-box;
  border:1px solid var(--tp-accent);border-radius:50%;background:#050A11;
  box-shadow:0 0 6px rgba(34,225,255,.6);
}

/* board: neon hairline modules with corner brackets */
.theme-panel[data-theme="tech"] .board{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.theme-panel[data-theme="tech"] .board li{
  position:relative;border-radius:3px;padding:15px 18px 17px;
  box-shadow:inset 0 1px 0 rgba(150,240,255,.07), 0 10px 30px rgba(0,0,0,.35);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.theme-panel[data-theme="tech"] .board li::before,
.theme-panel[data-theme="tech"] .board li::after{content:"";position:absolute;width:10px;height:10px;pointer-events:none;transition:width .3s var(--ease), height .3s var(--ease)}
.theme-panel[data-theme="tech"] .board li::before{top:-1px;left:-1px;border-top:1px solid var(--tp-accent-2);border-left:1px solid var(--tp-accent-2)}
.theme-panel[data-theme="tech"] .board li::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--tp-accent-2);border-right:1px solid var(--tp-accent-2)}
.theme-panel[data-theme="tech"] .board li:hover{box-shadow:inset 0 1px 0 rgba(150,240,255,.12), 0 0 0 1px rgba(34,225,255,.16), 0 0 28px rgba(34,200,255,.18)}
.theme-panel[data-theme="tech"] .board li:hover::before,
.theme-panel[data-theme="tech"] .board li:hover::after{width:18px;height:18px}
.theme-panel[data-theme="tech"] .tag{display:flex;align-items:center;gap:8px;letter-spacing:.18em}
.theme-panel[data-theme="tech"] .tag::before{content:"";flex:none;width:5px;height:5px;background:var(--tp-accent);box-shadow:0 0 6px rgba(34,225,255,.9)}

.theme-panel[data-theme="tech"] .tp-decor{object-position:100% 50%}

@media (max-width:720px){
  .theme-panel[data-theme="tech"]{
    --tp-overlay: linear-gradient(180deg, rgba(3,7,12,.80) 0%, rgba(3,7,12,.88) 50%, rgba(3,7,12,.92) 100%);
    --tp-decor-opacity: .55;
    --tp-h3-size: clamp(24px, 7vw, 30px);
  }
  /* text fills the phone width: lift the art so only the chip's pin row and traces peek in at the top,
     fade the chip body out behind the label row, and keep the circuit column quiet until the very edge */
  .theme-panel[data-theme="tech"] .tp-art{
    top:-240px;
    -webkit-mask-image:
      linear-gradient(90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 92%, #000 100%),
      linear-gradient(180deg, transparent 0, transparent 240px, #000 330px);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 92%, #000 100%),
      linear-gradient(180deg, transparent 0, transparent 240px, #000 330px);
    mask-composite:intersect;
  }
  .theme-panel[data-theme="tech"] h3{max-width:none}
  .theme-panel[data-theme="tech"] .questions{max-width:none}
  .theme-panel[data-theme="tech"] .questions li{padding-left:46px}
  .theme-panel[data-theme="tech"] .board{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .theme-panel[data-theme="tech"]::after{animation:none;opacity:0}
  .theme-panel[data-theme="tech"] h3,
  .theme-panel[data-theme="tech"] .panel-n::before{animation:none}
}

/* photo slot: uncomment once assets/themes/tech.jpg exists (url resolves relative to this file in every browser) */
/* .theme-panel[data-theme="tech"]::before{background-image:var(--tp-overlay),url("tech.jpg")} */