/* Design Lab: porte do artefato "Lab de design", renomeado para Minha Saúde.
   Classes que colidiam com site.css foram renomeadas (card→lcard, nav→lnav, wm→lwm, mono→lmono,
   note→lnote, sw→psw). Cores e fontes do painel vêm de tokens.css. */
:root{
  /* Variáveis do preview, reescritas pelo lab.js */
  --p-bg:#FBFBF9; --p-ink:#151816; --p-stone:#5C625E; --p-brand:#1E3A32; --p-dot:#5F8F7C; --p-surface:#F2F2EE;
  --p-on-brand:#F4F4F0; --p-on-dot:#8FB8A6; --p-muted:#AFC0B8; --p-line:#E6E6E1;
  --p-display:"Newsreader",Georgia,serif; --p-text:"Geist",system-ui,sans-serif;
  --p-dw:300; --p-ds:64px; --p-dt:-0.02em; --p-bs:16px;
  /* Altura do cabeçalho do site; o painel gruda logo abaixo dele. */
  --head-h:50px;
}
.lab{font:15px/1.5 var(--sans)}
.lab button,.lab input,.lab select,.lab textarea{font:inherit;color:inherit}
.lab .shell{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:calc(100vh - var(--head-h))}

/* ---------- Painel ---------- */
.lab .panel{position:sticky;top:var(--head-h);height:calc(100vh - var(--head-h));overflow-y:auto;border-right:1px solid var(--line);background:var(--card);padding:24px 20px 40px}
.lab .brandline{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.lab .brandline h1{font:300 26px/1.1 var(--serif);letter-spacing:-.02em;margin:0;max-width:none}
.lab .sub{color:var(--stone);font-size:13px;margin:0 0 20px}
.lab .grp{border-top:1px solid var(--line);padding:18px 0 4px}
.lab .lbl{font:500 11px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--stone);margin:0 0 12px;display:block}
.lab .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.lab .row label{font-size:13px;color:var(--stone)}
.lab select{width:100%;appearance:none;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235C625E' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--line);border-radius:12px;padding:9px 32px 9px 12px;font-size:14px;cursor:pointer}
.lab .field{margin-bottom:12px}
.lab .field>label{display:block;font-size:13px;color:var(--stone);margin-bottom:6px}
.lab input[type=range]{width:100%;accent-color:var(--brand)}
.lab .val{font:400 12px var(--mono);color:var(--stone);font-variant-numeric:tabular-nums}

.lab .pals{display:grid;grid-template-columns:1fr;gap:6px}
.lab .pal{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:1px solid var(--line);border-radius:14px;padding:8px 10px;cursor:pointer}
.lab .pal:hover{background:var(--bg)}
.lab .pal[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.lab .pal .psw{display:flex;gap:3px}
.lab .pal .psw i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(21,24,22,.12)}
.lab .pal b{font-weight:500;font-size:14px}
.lab .pal small{margin-left:auto;font:400 10px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--stone)}
.lab .lnote{font-size:12.5px;color:var(--stone);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0 0}
.lab .lnote strong{color:var(--ink);font-weight:500}

.lab .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.lab .chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer}
.lab .chip:hover{border-color:var(--stone)}

.lab .colors{display:grid;gap:8px}
.lab .crow{display:grid;grid-template-columns:30px 1fr 24px 86px;align-items:center;gap:8px}
/* Reset por cor, à esquerda do hex. Só aparece quando a cor sai da paleta de origem;
   visibility (não display) para a coluna do hex não pular. */
.lab .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--stone);cursor:pointer}
.lab .icon-btn:hover{color:var(--ink);border-color:var(--stone)}
.lab .icon-btn.off{visibility:hidden}
.lab .crow input[type=color]{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;padding:0;background:none;cursor:pointer}
.lab .crow input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.lab .crow input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}
.lab .crow label{font-size:13px}
.lab .crow input[type=text]{width:100%;border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:400 12px var(--mono);text-transform:uppercase;background:var(--bg)}
.lab .crow input[aria-invalid=true]{border-color:var(--bad)}

.lab .ctr{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lab .ctr li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;font-size:12.5px;color:var(--stone)}
.lab .ctr .n{font:400 12px var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.lab .ctr .t{font:500 10px/1 var(--mono);letter-spacing:1px;padding:4px 7px;border-radius:999px}
.lab .t.pass{background:var(--ok-bg);color:var(--ok)}
.lab .t.fail{background:var(--bad-bg);color:var(--bad)}

.lab .actions{display:flex;gap:8px;margin-top:18px}
.lab .btn{flex:1;border-radius:999px;padding:10px 14px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid var(--ink)}
.lab .btn.pri{background:var(--ink);color:var(--bg)}
.lab .btn.sec{background:none}
.lab .copied{font-size:12.5px;color:var(--ok);min-height:18px;margin:8px 0 0}
.lab details.tok summary{cursor:pointer;font-size:13px;color:var(--stone);margin-top:10px}
.lab details.tok textarea{width:100%;height:220px;margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:10px;font:400 11.5px/1.5 var(--mono);background:var(--bg);resize:vertical}

/* ---------- Preview ---------- */
.lab .stage{padding:32px clamp(16px,4vw,48px) 64px;display:grid;gap:20px;align-content:start}
.lab .p{font-family:var(--p-text);font-size:var(--p-bs);color:var(--p-ink)}
.lab .lcard{background:#FFFFFF;border:1px solid var(--p-line);border-radius:var(--r);box-shadow:var(--shadow)}
.lab .lmono{font:500 11px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--p-stone)}
.lab .d{font-family:var(--p-display);font-weight:var(--p-dw);letter-spacing:var(--p-dt);line-height:1.04;margin:0;max-width:none}

.lab .hero{background:var(--p-bg);padding:28px clamp(20px,4vw,48px) clamp(32px,5vw,56px)}
.lab .lnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(40px,7vw,88px)}
.lab .lnav a{color:var(--p-ink);font-size:.9em;text-decoration:none;border-bottom:1px solid var(--p-line)}
.lab .lwm{font-family:var(--p-display);font-weight:var(--p-dw);font-size:30px;letter-spacing:var(--p-dt);line-height:1}
.lab .lwm .i{position:relative;display:inline-block}
.lab .lwm .i::after{content:"";position:absolute;left:50%;top:.06em;width:.17em;height:.17em;border-radius:50%;background:var(--p-dot);transform:translateX(-50%)}
.lab .hero .d{font-size:clamp(34px,6vw,var(--p-ds));max-width:14ch}
.lab .hero p.lead{color:var(--p-stone);font-size:1.15em;max-width:36ch;margin:20px 0 28px}
.lab .ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lab .cta{border-radius:999px;padding:12px 22px;font:500 .95em var(--p-text);border:1px solid var(--p-ink);cursor:default}
.lab .cta.pri{background:var(--p-ink);color:var(--p-bg)}
.lab .cta.sec{background:transparent;color:var(--p-ink)}
.lab .hero .lmono{margin-top:28px;display:flex;align-items:center;gap:8px}
.lab .hero .lmono i{width:6px;height:6px;border-radius:50%;background:var(--p-dot)}

.lab .grid2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px}
.lab .app{padding:24px}
.lab .app h3{font-size:28px;margin:10px 0 18px}
.lab .rows{list-style:none;margin:0;padding:0}
.lab .rows li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--p-line)}
.lab .rows .nm{font-weight:500}
.lab .rows .dt{grid-column:1;font-size:.85em;color:var(--p-stone);font-variant-numeric:tabular-nums}
.lab .rows .pill{grid-row:1/3;grid-column:2}
.lab .num{font-variant-numeric:tabular-nums}
/* Status são fixos: não mudam com a paleta. As cores vêm de tokens.css (s-*). */
.lab .pill{font-family:var(--p-text)}

.lab .moment{background:var(--p-brand);color:var(--p-on-brand);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:320px}
.lab .moment .d{font-size:clamp(28px,3.2vw,40px);color:var(--p-on-brand)}
.lab .moment p{color:var(--p-muted);margin:12px 0 0}

.lab .spec{padding:8px 24px}
.lab .spec .r{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:baseline;padding:18px 0;border-top:1px solid var(--p-line)}
.lab .spec .r:first-child{border-top:none}
.lab .spec .r .lmono{line-height:1.4}
.lab .spec p{margin:0}
.lab .body-s{max-width:60ch}
.lab .surf{background:var(--p-surface);border-radius:16px;padding:14px 16px;color:var(--p-stone)}

.lab .swrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.lab .sw5{border-radius:16px;border:1px solid var(--p-line);height:88px;padding:10px;display:flex;flex-direction:column;justify-content:flex-end;font:400 10.5px/1.35 var(--mono)}
.lab .sw5 span{opacity:.85}

@media (max-width:900px){
  .lab .shell{grid-template-columns:1fr}
  .lab .panel{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line);padding:20px 16px 24px}
  .lab .stage{padding:20px 16px 48px}
  .lab .grid2{grid-template-columns:1fr}
  .lab .spec .r{grid-template-columns:1fr;gap:8px}
  .lab .swrow{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:no-preference){
  .lab .pal,.lab .chip,.lab .btn{transition:background-color .15s,border-color .15s}
}