/* ==========================================================================
   Placas de laboratório (pages/lab.js e a mão da home).
   1. Cartão base .lab-card (usado também pela mão da home: .lab-hand).
   2. Placa de atlas .lab-placa: explorador do sangue (Fig. 1) e player de
      etapas (Fig. 2), desenhados como gravura (traço fino, hachura, pontilhado).
   3. Keyframes lab-* (alguns usados pela home).
   Carregado pela home e pela página /prp/.
   ========================================================================== */

/* ---------- 1. Cartão base (mão da home) ---------- */
.lab-card{--lab-gold:#d8bd7d;--lab-muted:#aaa9a3;position:relative;width:100%;border:1px solid #d8bd7d30;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 55% 37%,#75613624,transparent 65%),linear-gradient(145deg,#151719,#0a0d10 70%);box-shadow:0 30px 100px #0006,inset 0 1px #ffffff08;text-align:left}
.lab-card::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#cfbd9106 1px,transparent 1px),linear-gradient(90deg,#cfbd9106 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(#000,transparent 90%)}
.lab-topline{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:19px 24px;border-bottom:1px solid #ffffff0c;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:#c9c4b5}
.lab-status{display:flex;align-items:center;gap:7px;color:#cbb780;font-size:9px;white-space:nowrap}
.lab-status::before{content:"";width:5px;height:5px;background:#d8bd7d;border-radius:50%;box-shadow:0 0 9px #dfbd78}
.lab-tabs{display:flex;gap:6px;flex-wrap:wrap}
.lab-tabs button,.lab-button{border:1px solid #e1c99126;border-radius:7px;padding:9px 13px;font-size:12px;color:#bcbcb6;min-height:42px;transition:background .2s,border-color .2s,color .2s}
.lab-tabs button:hover,.lab-button:hover{background:#d5bb8012;border-color:#d5bb8080;color:#fff0cb}
.lab-tabs button[aria-pressed="true"],.lab-tabs button[aria-selected="true"]{background:#d3b97c1c;color:#f2dfaa;border-color:#c7ac6770}
.lab-art{display:block;width:100%;height:auto;overflow:visible}

/* ---------- 2. Placa de atlas (PRP) ---------- */
.lab-card.lab-placa{
  --lab-linha:rgba(216,192,138,.72);--lab-linha-suave:rgba(216,192,138,.3);--lab-marfim:rgba(244,241,234,.58);
  --lab-sangue:#6A1A20;--lab-plasma:#D8C08A;--lab-corpo:#0B0B0E;
  border:1px solid var(--filete-escuro);border-radius:var(--raio);background:var(--lab-corpo);box-shadow:none;color:var(--texto-escuro);
}
.lab-card.lab-placa::before{display:none}

/* Desenho */
.lab-placa .lab-art text{font-family:var(--sans);letter-spacing:0}
.lab-placa .lab-art .rot{font-family:var(--serif);font-style:italic;font-size:20px;fill:var(--marfim)}
.lab-placa .lab-art .sub{font-size:15px;fill:var(--texto-escuro)}
.lab-placa .lab-art :is(.ln,.ln-s,.ln-m,.ln-reflexo,.guia,.foco,.alvo){fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.lab-placa .lab-art .ln{stroke:var(--lab-linha);stroke-width:1.25}
.lab-placa .lab-art .ln-s{stroke:var(--lab-linha-suave);stroke-width:1}
.lab-placa .lab-art .ln-m{stroke:var(--lab-marfim);stroke-width:1.25}
.lab-placa .lab-art .ln-reflexo{stroke:rgba(244,241,234,.22);stroke-width:2}
.lab-placa .lab-art .guia{stroke:rgba(216,192,138,.55);stroke-width:1}
.lab-placa .lab-art .ponto-guia{fill:var(--champanhe)}
.lab-placa .lab-art .corpo{fill:var(--lab-corpo)}
.lab-placa .lab-art .corpo:is(.ln,.ln-s,.ln-m){fill:var(--lab-corpo)}
.lab-placa .lab-art .fundo{fill:#060608}
.lab-placa .lab-art .hach{stroke:rgba(216,192,138,.26);stroke-width:1}
.lab-placa .lab-art .hach-escura{stroke:rgba(8,8,10,.34);stroke-width:1.2}
.lab-placa .lab-art .plasma{fill:var(--lab-plasma)}
.lab-placa .lab-art .interface{fill:var(--marfim)}
.lab-placa .lab-art .sangue{fill:var(--lab-sangue)}
.lab-placa .lab-art .ponto{fill:var(--ouro-profundo)}
.lab-placa .lab-art .disco{fill:none;stroke:var(--champanhe);stroke-width:1;vector-effect:non-scaling-stroke}
.lab-placa .lab-art .foco{stroke:var(--champanhe);stroke-width:1;stroke-dasharray:4 4;transition:y var(--t-rapido) var(--ease),height var(--t-rapido) var(--ease)}
.lab-placa .lab-art .veia{fill:none;stroke:rgba(216,192,138,.16);stroke-width:5}
.lab-placa .lab-art .tubo-ext{fill:none;stroke:rgba(244,241,234,.28);stroke-width:6;stroke-linecap:round}
.lab-placa .lab-art .tubo-sangue{fill:none;stroke:var(--lab-sangue);stroke-width:3.5;stroke-linecap:round}
.lab-placa .lab-art .fluxo{fill:none;stroke:rgba(244,241,234,.4);stroke-width:1.2}
.lab-placa .lab-art .gira{fill:none;stroke:rgba(216,192,138,.45);stroke-width:1;vector-effect:non-scaling-stroke}
.lab-placa .lab-art .tendao{fill:none;stroke:rgba(216,192,138,.28);stroke-width:7;stroke-linecap:round}
.lab-placa .lab-art .feixe{fill:rgba(216,192,138,.05);stroke:rgba(216,192,138,.4);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.lab-placa .lab-art .alvo{stroke:var(--champanhe);stroke-width:1}
/* Rótulos do tubo: o da parte escolhida fica em destaque. */
.lab-placa .rotulo{transition:opacity var(--t-rapido)}
.lab-placa .lab-art:has(.rotulo.is-on) .rotulo:not(.is-on){opacity:.72}

/* Movimento das cenas (pausado fora da tela e pelo controle global) */
.lab-placa .draw-flow{stroke-dasharray:9 15;animation:lab-flow 4s linear infinite}
.lab-placa .rotor{transform-origin:320px 214px;animation:lab-orbit 7s linear infinite}
.lab-placa .fluid-fill{transform-box:fill-box;transform-origin:bottom;animation:lab-fill 6.5s ease-in-out infinite}
.lab-placa .plunger{animation:lab-plunger 6.5s ease-in-out infinite}
.lab-placa .beam{animation:lab-beam 6.5s ease-in-out infinite}

/* Cabeçalho da placa (Fig. 2) */
.lab-placa .lab-topline{padding:16px 20px;border-bottom:1px solid var(--filete-escuro);font-size:inherit;letter-spacing:0;text-transform:none;color:var(--texto-escuro)}
.lab-placa .lab-fig{font-family:var(--serif);font-style:italic;font-size:1.0625rem;line-height:1.3;color:var(--texto-escuro)}
.lab-placa .lab-status{font-size:.8125rem;letter-spacing:.04em;color:var(--champanhe);font-variant-numeric:tabular-nums}
.lab-placa .lab-status::before{display:none}

/* Controles: texto, filete, 44 px de área de toque */
.lab-placa .lab-bottom{position:relative;padding:4px 20px 20px}
.lab-placa .lab-tabs{gap:0 22px;border-bottom:1px solid var(--filete-escuro)}
.lab-placa .lab-tabs button{position:relative;min-height:44px;padding:0;border:0;border-radius:0;background:none;font-size:.9375rem;color:var(--texto-escuro)}
.lab-placa .lab-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:transparent;transition:background-color var(--t-rapido)}
.lab-placa .lab-tabs button:hover{background:none;color:var(--marfim)}
.lab-placa .lab-tabs button[aria-pressed="true"]{background:none;color:var(--marfim)}
.lab-placa .lab-tabs button[aria-pressed="true"]::after{background:var(--champanhe)}
.lab-placa .lab-description{margin-top:14px;min-height:3.2em;font-size:.9375rem;line-height:1.55;color:var(--texto-escuro);max-width:52ch}
.lab-placa .lab-range{display:block;margin-top:18px}
.lab-placa .lab-range>span{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;color:var(--marfim)}
.lab-placa .lab-range output{color:var(--champanhe);font-variant-numeric:tabular-nums}
.lab-placa .lab-range small{display:flex;justify-content:space-between;gap:12px;font-size:.8125rem;color:#8F8B82}
.lab-placa input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:ew-resize}
.lab-placa input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--lab-linha-suave)}
.lab-placa input[type=range]::-moz-range-track{height:1px;background:var(--lab-linha-suave)}
.lab-placa input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--lab-corpo);border:1px solid var(--champanhe);box-shadow:inset 0 0 0 4px var(--lab-corpo),inset 0 0 0 9px var(--champanhe)}
.lab-placa input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--champanhe);border:1px solid var(--champanhe);box-shadow:inset 0 0 0 3px var(--lab-corpo)}
.lab-placa input[type=range]:focus-visible{outline:2px solid var(--champanhe);outline-offset:2px}
.lab-placa .lab-note{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.35;color:#8F8B82}

/* Player de etapas */
.process-illus-inner.lab-card{padding:0;display:block}
.lab-placa #processScene{padding:8px 12px 0}
.lab-placa .lab-caption{padding:4px 20px 0;min-height:4.6em}
.lab-placa .lab-caption__titulo{font-family:var(--serif);font-size:1.5rem;line-height:1.2;color:var(--marfim)}
@media (min-width:900px){.processo .lab-placa .lab-caption{min-height:0}.processo .lab-placa #processDescription{display:none}}
.lab-placa .lab-caption p+p{margin-top:4px;font-size:.9375rem;line-height:1.5;color:var(--texto-escuro)}
.lab-placa .lab-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--filete-escuro)}
.lab-placa .lab-button{min-height:44px;padding:0 16px;border:1px solid var(--cor-filete-forte,rgba(216,192,138,.34));border-radius:var(--raio);background:none;font-size:.875rem;font-weight:500;color:var(--marfim)}
.lab-placa .lab-button:hover{background:none;border-color:var(--champanhe);color:var(--marfim)}
.lab-placa #processPlay[aria-pressed="true"]{border-color:var(--champanhe)}
.lab-placa .lab-progress{display:flex;align-items:center;gap:0}
.lab-placa .lab-progress button{width:44px;height:44px;display:grid;place-items:center}
.lab-placa .lab-progress button::before{content:"";display:block;width:28px;height:1px;background:var(--lab-linha-suave);transition:background-color var(--t-rapido),height var(--t-rapido)}
.lab-placa .lab-progress button:hover::before{background:var(--lab-linha)}
.lab-placa .lab-progress button[aria-current="step"]::before{height:2px;background:var(--champanhe)}
.lab-placa .lab-progress button:focus-visible{outline-offset:-2px}

.prp-tube-outer{display:block;width:100%}

/* No celular os rótulos do desenho ficariam pequenos demais: o tubo guarda só os
   nomes (a descrição vem embaixo) e as cenas ficam sem rótulos (a legenda da placa
   traz título e texto da etapa). */
@media (max-width:600px){
  .lab-placa .lab-art .rot{font-size:27px}
  .lab-placa #tubeView .lab-art .sub{display:none}
  .lab-placa #processScene .lab-art :is(.rot,.sub,.guia,.ponto-guia){display:none}
  .lab-placa .lab-bottom{padding:4px 16px 16px}
  .lab-placa .lab-topline{padding:14px 16px}
  .lab-placa .lab-caption{padding:4px 16px 0}
  .lab-placa .lab-tabs{gap:0 18px}
  .lab-placa .lab-controls{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
  .lab-placa .lab-progress{grid-column:1/-1;grid-row:1;justify-content:center}
  .lab-placa .lab-controls .lab-button{grid-row:2;width:100%;padding:0 10px}
}
@media (max-width:360px){.lab-placa .lab-button span{display:none}}

/* ---------- 3. Keyframes (lab-pain e lab-scan são usados pela home) ---------- */
@keyframes lab-flow{to{stroke-dashoffset:-96}}
@keyframes lab-orbit{to{transform:rotate(360deg)}}
@keyframes lab-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes lab-fill{0%,12%{transform:scaleY(.15)}65%,100%{transform:scaleY(1)}}
@keyframes lab-plunger{0%,12%{transform:translateY(0)}65%,100%{transform:translateY(-22px)}}
@keyframes lab-beam{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes lab-pain{0%,100%{opacity:.5}50%{opacity:.9}}
@keyframes lab-scan{0%,100%{transform:translateY(0);opacity:0}15%,85%{opacity:1}50%{transform:translateY(260px)}}