/* ============================================================
   Elixrbio theme for the interactive Hair Follicle Atlas
   Loaded after the atlas's own stylesheet so these win.
   ============================================================ */

@font-face{font-family:'PS Times';src:url('/fonts/ps-times.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('/fonts/graphik.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik Compact';src:url('/fonts/graphik-compact.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#171612;
  --muted:rgba(23,22,18,.66);
  --faint:rgba(23,22,18,.46);
  --line:rgba(23,22,18,.15);
  --paper:#F3F2E9;
  --teal:#B900C3;
  --deep:#471A5A;
  --night:#0C0B08;
  --lav:#E2D9FF;
  font-family:'Graphik','Graphik Compact',system-ui,-apple-system,sans-serif;
  color:#171612;
  background:#F3F2E9;
}

html,body{background:#F3F2E9;color:#171612}
body{font-family:'Graphik','Graphik Compact',system-ui,sans-serif}
h1,h2,.wordmark,.detail-title h2,.modal-header h2,.reviews-title,.panel-intro h2{
  font-family:'PS Times',Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.01em;
}
a{color:#B900C3}
button:hover{background:rgba(185,0,195,.08)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#B900C3}
::selection{background:rgba(185,0,195,.28);color:#fff}

/* ---- top bar ---- */
header{background:#F3F2E9;border-bottom-color:rgba(23,22,18,.15)}
.brandmark{background:#B900C3;color:#fff;border-radius:50%}
.wordmark{color:#171612}
.subtitle{color:rgba(23,22,18,.55)}
.divider{background:rgba(23,22,18,.2)}
.local-badge{color:#471A5A;border-color:rgba(71,26,90,.3);background:rgba(71,26,90,.05)}
.quiet:hover{color:#B900C3}

/* ---- 3D viewer ---- */
#viewport{background:#0C0B08;color:#F3F2E9}
#loading{background:#0C0B08;color:rgba(243,242,233,.7)}
.workspace:fullscreen{background:#0C0B08}
.specimen-tag{color:rgba(243,242,233,.7)}
.specimen-tag span{background:#B900C3;box-shadow:0 0 10px rgba(185,0,195,.8)}
.scene-heading p{color:rgba(243,242,233,.6)}
.view-pills{background:rgba(12,11,8,.74);border-color:rgba(243,242,233,.2)}
.view-pills button{color:rgba(243,242,233,.72)}
.view-pills button:hover{background:rgba(243,242,233,.12)}
.view-pills button.active{background:#B900C3;color:#fff}
.stage-tools{background:rgba(12,11,8,.72);border-color:rgba(243,242,233,.2)}
.stage-tools button{color:rgba(243,242,233,.78)}
.stage-tools button:hover,.stage-tools button[aria-pressed=true]{background:#B900C3;color:#fff}
.stage-tools>span{background:rgba(243,242,233,.2)}
.orientation span{color:rgba(243,242,233,.6)}
.orientation button{border-color:rgba(243,242,233,.28);color:rgba(243,242,233,.78)}
.orientation button:hover{background:rgba(243,242,233,.14)}
.scene-foot{color:rgba(243,242,233,.55)}
.gesture span{color:rgba(243,242,233,.35)}
.teaching-tag{border-left-color:rgba(243,242,233,.22)}
#part-label{background:rgba(12,11,8,.86);border-color:rgba(243,242,233,.24)}
#hover-card{background:rgba(243,242,233,.96);border-color:rgba(23,22,18,.16);color:#171612;box-shadow:0 14px 46px rgba(0,0,0,.28)}
#hover-card p{color:rgba(23,22,18,.66)}
#hover-card small{color:rgba(23,22,18,.46)}
#toast{background:#F3F2E9;border-color:rgba(23,22,18,.16);color:#171612}

/* ---- cycle timeline ---- */
.timeline{background:#F3F2E9;border-top-color:rgba(23,22,18,.15)}
.timeline-top strong{color:#171612}
#phase-duration{color:rgba(23,22,18,.5)}
.play-button{background:#B900C3;color:#fff;border-radius:999px}
.play-button:hover{background:#d61ee0}
.playback select{color:rgba(23,22,18,.66)}
input[type=range]{accent-color:#B900C3}
#timeline::-webkit-slider-thumb{background:#171612;border-color:#F3F2E9;box-shadow:0 0 0 1px #171612}
.phase-labels button{color:rgba(23,22,18,.5)}
.phase-labels button.active{color:#171612}
.phase-labels button:hover{background:none;color:#B900C3}
.cycle-caption{color:rgba(23,22,18,.55);border-top-color:rgba(23,22,18,.12)}
.time-note{color:rgba(23,22,18,.4)}

/* ---- side panel ---- */
.sidebar{background:#F6F3E8;border-left-color:rgba(23,22,18,.15)}
.sidebar-tabs button{color:rgba(23,22,18,.5)}
.sidebar-tabs button[aria-selected=true]{color:#B900C3;border-bottom-color:#B900C3}
.sidebar-tabs button:hover{background:none;color:#171612}
[role=tabpanel]{scrollbar-color:rgba(23,22,18,.3) transparent}
.panel-intro h2{color:#171612}
.panel-intro p{color:rgba(23,22,18,.55)}
.legend-group h3{color:rgba(23,22,18,.42)}
.legend-item{color:rgba(23,22,18,.75)}
.legend-item>svg{color:rgba(23,22,18,.35)}
.legend-item:hover{background:rgba(185,0,195,.07);color:#171612}
.legend-item[aria-pressed=true]{background:rgba(185,0,195,.11);color:#471A5A}
.sidebar-bottom{border-top-color:rgba(23,22,18,.12);color:rgba(23,22,18,.4)}
.story-body{color:rgba(23,22,18,.7)}
.story-body h3{color:#171612}
.human-note{border-left-color:#B900C3;background:rgba(185,0,195,.06)}
.human-note b{color:#471A5A}
.human-note p{color:rgba(23,22,18,.66)}
.shedding-box{border-top-color:rgba(23,22,18,.12)}
.shedding-box button,.secondary{border-color:rgba(23,22,18,.3);background:none;color:#171612}
.shedding-box button:hover,.secondary:hover{background:rgba(185,0,195,.08);border-color:#B900C3;color:#B900C3}
.small{color:rgba(23,22,18,.45)}
.toggle-row{border-bottom-color:rgba(23,22,18,.1)}
.toggle-row b{color:#171612}
.toggle-row small{color:rgba(23,22,18,.45)}
.toggle-row input{background:rgba(23,22,18,.22)}
.toggle-row input:checked{background:#B900C3}
.range-control label{color:#171612}
.range-control output{color:#B900C3}
.range-control p{color:rgba(23,22,18,.5)}
.primary{background:#B900C3;color:#fff;border-radius:999px}
.primary:hover{background:#d61ee0}

/* ---- detail card + modals ---- */
dialog{background:#F3F2E9;border-color:rgba(23,22,18,.16);color:#171612;box-shadow:0 24px 90px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(12,11,8,.62)}
.detail-top{color:rgba(23,22,18,.5)}
.detail-title+p{color:rgba(23,22,18,.7)}
.detail-source{color:rgba(23,22,18,.5)}
.detail-source a{color:#B900C3}
.modal-header .specimen-tag{color:rgba(23,22,18,.5)}
.source-intro{color:rgba(23,22,18,.7)}
.source-notes{color:rgba(23,22,18,.7)}
.source-notes h3{color:#171612}
.source-list li{border-top-color:rgba(23,22,18,.12)}
.source-number{border-color:rgba(185,0,195,.4);color:#B900C3}
.source-list p{color:rgba(23,22,18,.66)}
.journal{color:rgba(23,22,18,.5)}
.source-list .source-note{color:rgba(23,22,18,.45)}
.source-links a{color:#B900C3}

/* ---- top bar removed; sources link relocated to the panel footer ---- */
header{display:none}
.workspace{height:100dvh}
.sidebar-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  font-family:'Graphik','Graphik Compact',system-ui,sans-serif;font-size:11px;letter-spacing:0;
  text-transform:none;color:rgba(23,22,18,.45);padding:13px 20px 14px;line-height:1.45}
.sidebar-bottom #sources-open{flex:none;padding:0;font-size:11px;letter-spacing:0;text-transform:none;
  font-family:inherit;color:#B900C3;background:none;border-radius:0;text-decoration:underline;
  text-underline-offset:3px;gap:6px}
.sidebar-bottom #sources-open svg{width:13px;height:13px}
.sidebar-bottom #sources-open:hover{background:none;color:#471A5A}
@media(max-width:760px){
  .workspace{height:100dvh}
  .sidebar-bottom{padding:11px 16px}
  .sidebar-bottom #sources-open span{display:inline}
}


/* ---- corner view buttons: full words instead of F / S / B ---- */
.orientation{gap:6px}
.orientation button{width:auto;min-width:0;height:28px;padding:0 12px;font-size:0;line-height:1;letter-spacing:0}
.orientation button::after{font-size:10.5px;letter-spacing:.01em}
.orientation button[data-view=front]::after{content:"Front"}
.orientation button[data-view=side]::after{content:"Side"}
.orientation button[data-view=back]::after{content:"Back"}
@media(max-width:760px){
  .orientation{flex-direction:column;align-items:stretch;gap:5px;top:12px;right:10px}
  .orientation button{padding:0 10px;height:26px}
  .scene-heading{max-width:calc(100% - 110px)}
  .scene-heading h1{text-wrap:balance}
}

/* tablet widths: keep the spelled-out buttons clear of the headline tail */
@media(max-width:1000px)and (min-width:761px){
  .orientation{top:112px}
}