/* Theme 01, Health & Bio: clinical biotech glass. Mint and teal light on a deep blue-green base,
   a microscope field and a slow heartbeat in the corner, rounded frosted cards like lab glass. */
.theme-panel[data-theme="health"]{
  --tp-bg:radial-gradient(110% 80% at 100% 0%,#0F3E48 0%,rgba(15,62,72,0) 62%),radial-gradient(90% 70% at 0% 100%,#0A2935 0%,rgba(10,41,53,0) 65%),linear-gradient(165deg,#0C2630 0%,#091C25 50%,#071520 100%);
  /* photo: see the ::before rule at the end of this file */
  --tp-photo-pos:72% 45%;
  --tp-overlay:linear-gradient(90deg,rgba(5,19,26,.92) 0%,rgba(5,19,26,.82) 46%,rgba(5,19,26,.6) 100%),linear-gradient(180deg,rgba(5,19,26,0) 30%,rgba(4,15,21,.5) 100%);
  --tp-accent:#3FD8C0;
  --tp-accent-2:#A6F4E4;
  --tp-text:#E9F7F4;
  --tp-text-2:#A6C7C1;
  --tp-line:rgba(142,243,220,.2);
  --tp-card:linear-gradient(180deg,rgba(176,255,234,.085) 0%,rgba(176,255,234,.035) 100%);
  --tp-card-border:rgba(150,240,216,.2);
  --tp-font-display:"Manrope","Geist",system-ui,sans-serif;
  --tp-font-body:"Manrope","Geist",-apple-system,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --tp-font-label:"Geist Mono",ui-monospace,Menlo,monospace;
  --tp-h3-size:clamp(40px,4.5vw,62px);
  --tp-h3-weight:300;
  --tp-h3-stretch:100%;
  --tp-h3-style:normal;
  --tp-h3-transform:none;
  --tp-h3-tracking:-.012em;
  --tp-radius:20px;
  --tp-decor-opacity:1;
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 60px rgba(63,216,192,.05)
}

/* lab-glass front pane: corner light, a soft inner rim and two faint reflection bands */
.theme-panel[data-theme="health"]::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(55% 42% at 94% 4%,rgba(110,240,210,.15),rgba(110,240,210,0) 70%),
    radial-gradient(48% 40% at 100% 100%,rgba(60,200,205,.11),rgba(60,200,205,0) 70%),
    radial-gradient(70% 50% at 0% 0%,rgba(150,240,225,.05),rgba(150,240,225,0) 70%);
  box-shadow:inset 0 1px 0 rgba(205,255,242,.18),inset 0 0 0 1px rgba(142,243,220,.04),inset 0 -40px 80px rgba(2,10,12,.25)
}
.theme-panel[data-theme="health"] .tp-art::after{
  content:"";position:absolute;inset:-10% -40%;pointer-events:none;
  background:linear-gradient(116deg,rgba(205,255,240,0) 42%,rgba(205,255,240,.05) 47.5%,rgba(205,255,240,0) 50%,rgba(205,255,240,0) 52.5%,rgba(205,255,240,.03) 54%,rgba(205,255,240,0) 57.5%);
  animation:health-sheen 20s var(--ease-soft) infinite alternate
}
@keyframes health-sheen{from{transform:translate3d(-7%,0,0)}to{transform:translate3d(9%,0,0)}}

/* label: a monitor readout with a live dot */
.theme-panel[data-theme="health"] .panel-n{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:6px 13px 6px 10px;
  font-size:11px;letter-spacing:.18em;color:var(--tp-accent-2);
  border:1px solid rgba(142,243,220,.24);border-radius:999px;background:rgba(142,243,220,.06);
  box-shadow:inset 0 1px 0 rgba(205,255,242,.1)
}
.theme-panel[data-theme="health"] .panel-n::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#A8F7E6;
  box-shadow:0 0 0 3px rgba(142,243,220,.14),0 0 12px rgba(142,243,220,.85);
  animation:health-beat 4s ease-in-out infinite
}
@keyframes health-beat{0%,40%,100%{transform:scale(1);opacity:.85}8%{transform:scale(1.45);opacity:1}16%{transform:scale(1)}24%{transform:scale(1.25);opacity:1}}

/* airy, light display line with a cool mint-glass fill */
.theme-panel[data-theme="health"] h3{
  width:fit-content;max-width:100%;line-height:1.02;margin-bottom:34px;
  background:linear-gradient(100deg,#F6FFFD 0%,#DDFBF3 40%,#97EEDA 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}

.theme-panel[data-theme="health"] h4{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.18em;color:#A9D8CD}
.theme-panel[data-theme="health"] h4::before{content:"";flex:none;width:22px;height:1px;background:linear-gradient(90deg,#8EF3DC,rgba(142,243,220,.15))}

/* questions: hairlines that fade out like etched glass, Q numbers as specimen pills */
.theme-panel[data-theme="health"] .questions{margin-bottom:40px}
.theme-panel[data-theme="health"] .questions li{
  border-top:0;padding:20px 0 20px 56px;line-height:1.62;font-weight:400;letter-spacing:-.003em;
  background:linear-gradient(90deg,rgba(142,243,220,.34),rgba(142,243,220,.1) 60%,rgba(142,243,220,0)) left top/100% 1px no-repeat
}
.theme-panel[data-theme="health"] .questions li:last-child{
  border-bottom:0;
  background:linear-gradient(90deg,rgba(142,243,220,.34),rgba(142,243,220,.1) 60%,rgba(142,243,220,0)) left top/100% 1px no-repeat,linear-gradient(90deg,rgba(142,243,220,.34),rgba(142,243,220,.1) 60%,rgba(142,243,220,0)) left bottom/100% 1px no-repeat
}
.theme-panel[data-theme="health"] .questions li::before{
  top:22px;padding:1px 8px;font-size:11px;line-height:1.6;letter-spacing:.06em;
  border:1px solid rgba(142,243,220,.34);border-radius:999px;background:rgba(142,243,220,.07)
}

/* who's in the room: rounded frosted lab-glass tiles */
.theme-panel[data-theme="health"] .board{gap:12px}
.theme-panel[data-theme="health"] .board li{
  border-radius:18px;padding:16px 18px 18px;
  backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(215,255,245,.16),inset 0 -1px 0 rgba(142,243,220,.05),0 12px 30px rgba(1,10,12,.28);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s
}
.theme-panel[data-theme="health"] .board li:hover{border-color:rgba(142,243,220,.5);box-shadow:inset 0 1px 0 rgba(215,255,245,.22),0 0 0 4px rgba(142,243,220,.05),0 16px 36px rgba(1,10,12,.34)}
.theme-panel[data-theme="health"] .tag{display:flex;align-items:center;gap:8px;margin-bottom:8px;letter-spacing:.14em}
.theme-panel[data-theme="health"] .tag::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.theme-panel[data-theme="health"] .mentor-note{margin-top:20px}

/* phone and narrow tablet: show the decor's right side crisp at the top, and again behind the tiles */
@media (max-width:720px){
  .theme-panel[data-theme="health"]{--tp-h3-size:clamp(34px,10vw,44px);--tp-h3-tracking:-.02em;--tp-overlay:linear-gradient(90deg,rgba(5,19,26,.92) 0%,rgba(5,19,26,.84) 50%,rgba(5,19,26,.72) 100%),linear-gradient(180deg,rgba(5,19,26,0) 30%,rgba(4,15,21,.5) 100%)}
  .theme-panel[data-theme="health"] .panel-n{margin-bottom:46px}
  /* the 8:5 box lets the SVG's own phone rules switch on; the top shows the heartbeat lane, the rest fades out.
     The second mask layer keeps only the image's rightmost ~320px, so wider panels (430 to 720) never reveal the first beat behind the label and heading. */
  .theme-panel[data-theme="health"] .tp-decor{position:absolute;top:0;right:min(0px,calc(100% - 358px));width:1074px;height:auto;aspect-ratio:8/5;object-fit:fill;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 17%,rgba(0,0,0,.3) 23%,rgba(0,0,0,0) 28%),linear-gradient(270deg,#000 0,#000 296px,rgba(0,0,0,0) 344px);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(180deg,#000 0,#000 17%,rgba(0,0,0,.3) 23%,rgba(0,0,0,0) 28%),linear-gradient(270deg,#000 0,#000 296px,rgba(0,0,0,0) 344px);mask-composite:intersect}
  .theme-panel[data-theme="health"] .tp-art::before{content:"";position:absolute;right:-96px;bottom:84px;width:1074px;aspect-ratio:8/5;background:url("health-decor.svg") center/100% 100% no-repeat;-webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 12%,#000 20%,#000 34%,rgba(0,0,0,0) 56%);mask-image:linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 12%,#000 20%,#000 34%,rgba(0,0,0,0) 56%)}
  .theme-panel[data-theme="health"] .questions li{padding-left:50px}
  .theme-panel[data-theme="health"] .questions li::before{top:21px}
}

@media (prefers-reduced-motion:reduce){
  .theme-panel[data-theme="health"] .panel-n::before,.theme-panel[data-theme="health"] .tp-art::after{animation:none}
}

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