/* ondaí web: mobile primeiro. Verde musgo como marca, areia como assinatura, folha viva so no topo da escala de notas.
 * Segue o canvas "Ondaí: estudo de marca" (telas claras e escuras, estados, regiao). */
:root{
  color-scheme:light dark;
  --bg:#F3F5EA; --card:#FAFBF3; --ink:#1F2A14; --muted:#566545; --line:#D5DBC2; --soft:#E3E9D0; --soft-ink:#3D4A2E;
  --accent:#4E6A2C; --seg-on:#4E6A2C; --sand:#9C7627;
  --logo-wave:#4E6A2C; --logo-spray:#9C7627;
  --blk:#1F2A14; --blk-line:#1F2A14; --blk-ink:#F3F5EA; --blk-mute:#C9D9A6; --blk-body:#E4EBCF; --blk-rule:#3D4F2A; --win:#D7B060;
  --warn-bg:#F6EBD0; --warn-line:#D7B060; --warn-ink:#5A4310; --warn-strong:#8A5A12;
  --w-glassy:#6E8A45; --w-terral:#4E6A2C; --w-cross-terral:#94812C; --w-lateral:#AE6E28; --w-maral:#AE4930;
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fd:"Bricolage Grotesque",var(--f);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141B0E; --card:#1A2413; --ink:#F3F5EA; --muted:#A9B890; --line:#2C3A20; --soft:#1F2A16; --soft-ink:#C4D1AD;
  --accent:#A3C46E; --seg-on:#5A7A33; --sand:#D7B060;
  --logo-wave:#A3C46E; --logo-spray:#D7B060;
  --blk:#223019; --blk-line:#34452A;
  --warn-bg:rgba(215,176,96,.14); --warn-line:rgba(215,176,96,.55); --warn-ink:#E9D3A0; --warn-strong:#D7B060;
  --w-glassy:#8FAE63; --w-terral:#A9C977; --w-cross-terral:#CDB65A; --w-lateral:#D99A55; --w-maral:#E07A5E;
}}

/* escala de notas: terracota, ambar, oliva e folha viva so no topo. --qc pinta celulas e faixas, --qt o numero sobre fundo escuro */
.q0{--qc:#BD5E3C;--qt:#D9765A;--qx:#A24B2B}
.q1{--qc:#D08F30;--qt:#D08F30;--qx:#9A6618}
.q2{--qc:#A8A93A;--qt:#B5B646;--qx:#7C7E1E}
.q3{--qc:#8DBF4A;--qt:#8DBF4A;--qx:#5E8F2A}
.q4{--qc:#6FC94A;--qt:#6FC94A;--qx:#4C9A2C}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--f);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap{max-width:560px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right)) 56px max(20px,env(safe-area-inset-left))}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main{display:flex;flex-direction:column;gap:16px}

/* topo */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;view-transition-name:topbar;
  margin:0 calc(-1*max(20px,env(safe-area-inset-left)));padding:calc(14px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-left)) 12px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px)}
.brand{display:flex;align-items:center;gap:8px}
.brand svg{width:32px;height:32px}
.brand .bw{stroke:var(--logo-wave)}
.brand .bs{stroke:var(--logo-spray)}
.wordmark{font-family:var(--fd);font-weight:800;letter-spacing:-.04em;font-size:30px;line-height:1;text-transform:lowercase;color:#33461F}
.wordmark i{font-style:normal;color:var(--sand)}
@media (prefers-color-scheme:dark){.wordmark{color:var(--ink)}}
.pill{font-size:12px;color:var(--muted);white-space:nowrap}
.stale .pill{color:var(--warn-strong);font-weight:700}
.back{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--accent);padding:6px 4px 6px 0}
.back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* nivel: controle segmentado */
.levels{display:flex;gap:4px;margin:6px 0 16px;padding:4px;border-radius:14px;background:var(--soft)}
.levels button{flex:1;border:0;border-radius:11px;padding:10px 0;font-size:14px;font-weight:600;background:transparent;color:var(--soft-ink);transition:background-color .18s,color .18s}
.levels button[aria-checked="true"]{background:var(--seg-on);color:#fff;font-weight:700}

/* dias: abas de texto com sublinhado */
.days{display:flex;gap:22px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:none;border:0;background:transparent;padding:6px 0 10px;margin-bottom:-1px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.day[aria-pressed="true"]{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}

/* aviso de previsao atrasada */
.banner{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:14px 16px;border-radius:18px;background:var(--warn-bg);border:1.5px solid var(--warn-line);color:var(--warn-ink)}
.banner[hidden]{display:none}
.banner svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--warn-strong);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.banner b{display:block;font-size:15px;font-weight:800}
.banner p{margin:2px 0 0;font-size:14px;line-height:1.35}
.banner button{margin-top:10px;border:0;background:var(--warn-ink);color:var(--warn-bg);border-radius:99px;padding:8px 16px;font-size:13px;font-weight:700}
@media (prefers-color-scheme:dark){.banner button{color:#2A2008;background:var(--warn-strong)}}

/* bloco de resposta */
.block{background:var(--blk);border:1px solid var(--blk-line);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:14px;color:var(--blk-ink)}
.block .k{font-size:13px;color:var(--blk-mute)}
.block .top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.block .nm{font-size:34px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.block .win{margin-top:4px;font-size:20px;font-weight:600;color:var(--win)}
.block .verdict{margin-top:6px;font-size:22px;font-weight:700;line-height:1.2}
.block .rt{text-align:right;flex:none}
.big{display:block;font-size:72px;font-weight:800;line-height:.9;letter-spacing:-.03em;color:var(--qt);text-shadow:0 0 28px color-mix(in srgb,var(--qt) 45%,transparent);font-feature-settings:"tnum" 1,"lnum" 1}
.qw{margin-top:6px;font-size:14px;font-weight:700;color:var(--qt)}
.block .line{font-size:16px;line-height:1.35;color:var(--blk-body)}
.facts4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding-top:14px;border-top:1px solid var(--blk-rule)}
.facts4 span{display:block;font-size:12px;color:var(--blk-mute)}
.facts4 b{display:block;margin-top:2px;font-size:18px;font-weight:700}
.stale .block{background:#3A4631;border-color:#3A4631}
.stale .big,.stale .qw{color:#B9C4A4;text-shadow:none}
@media (prefers-color-scheme:dark){.stale .block{background:#2A3324;border-color:#33402B}}
.stale .rows{opacity:.6}

/* proxima boa janela */
.nextwin{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;border:1.5px solid var(--accent);background:var(--card);border-radius:18px;padding:16px}
.nextwin span{display:block;font-size:12px;font-weight:700;color:var(--muted)}
.nextwin b{display:block;margin-top:2px;font-size:18px;font-weight:800}
.nextwin .n{font-size:32px;font-weight:800;letter-spacing:-.02em;color:var(--qx)}
@media (prefers-color-scheme:dark){.nextwin .n{color:var(--qt)}}
.tip{padding:2px 0 2px 12px;border-left:3px solid var(--sand);font-size:14.5px}

/* ranking */
.rows{display:flex;flex-direction:column;gap:8px}
.rows h2{margin:6px 0 0}
h2{font-size:14px;font-weight:700;margin:0}
.axis{display:flex;gap:12px;padding:0 16px}
.axis .sp{flex:1}
.axis .sc{width:36px}
.axis .cols{display:flex;gap:3px}
.axis .cols span{width:26px;text-align:center;font-size:11px;color:var(--muted)}
.rk{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 16px;transition:transform .12s,border-color .18s}
.rk:active{transform:scale(.985)}
.rk .nm{font-size:15px;font-weight:700;line-height:1.2}
.rk .mt{font-size:12px;color:var(--muted)}
.rk .nmw{flex:1;min-width:0}
.rk .score{width:36px;text-align:right;font-size:20px;font-weight:800;letter-spacing:-.02em}
.rib{display:flex;gap:3px}
.rib i{width:26px;height:38px;border-radius:7px;background:var(--qc)}
.rib i.nt{opacity:.3}
.rk:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}

/* cartoes e blocos recolhiveis */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.card h3{margin:0 0 6px;font-size:15px;font-weight:700}
.card p{margin:0;font-size:15px;line-height:1.4;color:var(--soft-ink)}
@media (prefers-color-scheme:dark){.card p{color:var(--soft-ink)}}
.cta{display:inline-block;margin-top:12px;border:0;background:var(--seg-on);color:#fff;border-radius:99px;padding:10px 20px;font-weight:700;font-size:14.5px}
.row{display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;list-style:none;cursor:pointer;font-size:15px;font-weight:700;padding:16px}
.row::-webkit-details-marker{display:none}
.row .r{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.row svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
details[open]>.row svg{transform:rotate(180deg)}
details.card{padding:0}
.dbody{padding:0 16px 16px}
.facts{margin:0}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.facts dt{font-weight:600;font-size:14px}
.facts dd{margin:0;font-size:14.5px;color:var(--soft-ink)}
.facts .hl{padding-left:12px;border-left:3px solid var(--sand)}
.seal{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--muted)}
.seal i{width:8px;height:8px;border-radius:99px;background:var(--sand)}
.seal.calibrado i{background:var(--accent)}

/* apoie */
.apoie-body{padding:2px 16px 22px;display:flex;flex-direction:column;align-items:center;text-align:center}
.apoie-body p{margin:0 0 18px;font-size:15px;line-height:1.45;max-width:30ch;text-wrap:balance}
.apoie-body .fine{font-size:12.5px;color:var(--muted);margin:14px 0 0}
.qr{width:216px;padding:14px;background:#fff;border-radius:18px;margin:0 0 18px}
.qr img{display:block;width:188px;height:188px}
.copy{border:0;background:var(--ink);color:var(--bg);border-radius:99px;padding:11px 22px;font-weight:700;font-size:14.5px}
.copied{display:block;min-height:1.4em;margin-top:10px;font-size:13px;color:var(--accent)}
.foot{margin-top:24px;font-size:12px;color:var(--muted);display:grid;gap:6px}
.foot a{color:var(--accent);font-weight:600}

/* pico */
.spothead h1{font-family:var(--fd);font-size:clamp(34px,10vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0}
.spothead .ty{margin-top:4px;font-size:14px;color:var(--muted)}
.strip{display:flex;gap:6px}
.strip .hr{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:0}
.strip .h{font-size:12px;font-weight:600;color:var(--muted)}
.strip .cell{width:100%;height:64px;border-radius:14px;background:var(--qc);color:#1F2A14;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;transition:outline-offset .12s}
.strip .m{font-size:12px;color:var(--muted)}
.strip .hr.night .cell{opacity:.55}
.strip [aria-pressed="true"] .h{font-weight:700;color:var(--ink)}
.strip [aria-pressed="true"] .cell{outline:3px solid var(--accent);outline-offset:2px}
.sect{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:10px 0 0}

/* graficos */
.tabs{display:flex;gap:6px;margin:0 0 10px;flex-wrap:wrap}
.tabs button{border:0;background:transparent;border-radius:99px;padding:7px 14px;font-size:14px;font-weight:600;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--soft);color:var(--ink)}
.chart.one .ch-head h3{display:none}
.ch-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px}
.cap{font-size:12px;color:var(--muted)}
.chartbox{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;background:var(--card);border:1px solid var(--line);padding:0 6px}
.chsvg{display:block;min-width:760px}
.ch-night{fill:var(--ink);opacity:.07}
.ch-day{fill:var(--accent);opacity:.08}
.ch-sel{fill:var(--accent);opacity:.2}
.ch-hit{fill:transparent;cursor:pointer}
.ch-tag rect{fill:var(--ink)}
.ch-tag text{fill:var(--bg);font:700 11.5px var(--f)}
.ch-grid{stroke:var(--line);stroke-width:1}
.ch-sep{stroke:var(--muted);stroke-width:1;opacity:.5}
.ch-lbl,.ch-ax,.ch-ax2{fill:var(--muted);font:11px var(--f)}
.ch-lbl{font-weight:600}
.ch-bar{fill:var(--qc,var(--muted))}
.ch-bar.w-glassy{fill:var(--w-glassy)}.ch-bar.w-terral{fill:var(--w-terral)}.ch-bar.w-cross-terral{fill:var(--w-cross-terral)}.ch-bar.w-lateral{fill:var(--w-lateral)}.ch-bar.w-maral{fill:var(--w-maral)}
.ch-gust{stroke:var(--ink);stroke-width:1.5;opacity:.55}
.ch-band{fill:var(--accent);opacity:.25}
.ch-line{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.ch-line2{fill:none;stroke:var(--sand);stroke-width:1.8;stroke-dasharray:4 4}
.ch-ax2{fill:var(--sand)}

/* regiao */
.region h1{font-family:var(--fd);font-size:40px;font-weight:800;line-height:1;letter-spacing:-.04em;margin:14px 0 0;color:#33461F}
@media (prefers-color-scheme:dark){.region h1{color:var(--ink)}}
.region h1 i{font-style:normal;color:var(--sand)}
.region .lead{margin:10px 0 18px;font-size:15px;line-height:1.35;color:var(--muted)}
.uf{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:20px;padding:18px 20px;border:1px solid var(--line);background:var(--card)}
.uf b{display:block;font-size:20px;font-weight:800}
.uf span{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.uf.on{background:var(--seg-on);border-color:var(--seg-on);color:#fff}
.uf.on span{color:#DDE7C6}
.uf.off{opacity:.8}
.uf svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.uf .ghost{border:1.5px solid var(--accent);background:transparent;color:var(--accent);border-radius:99px;padding:7px 14px;font-size:13px;font-weight:700;margin:0}
.ufs{display:flex;flex-direction:column;gap:10px}
.soft{background:var(--soft);border-radius:18px;padding:16px;font-size:14px;line-height:1.4;color:var(--soft-ink);margin-top:16px}
.soft a{font-weight:700;color:var(--accent);text-decoration:underline}

/* carregando e erro */
@keyframes ondaiShimmer{0%{opacity:.55}50%{opacity:1}100%{opacity:.55}}
.sk{animation:ondaiShimmer 1.6s ease-in-out infinite}
.skb{background:var(--soft);border-radius:18px}
.skhero{background:#33461F;border-radius:24px;padding:22px;height:168px;display:flex;flex-direction:column;justify-content:center;gap:16px;color:#C9D9A6;font-size:15px;font-weight:600}
.skhero .l{display:flex;align-items:center;gap:10px}
.skhero svg{width:28px;height:28px}
.skhero i{display:block;height:14px;border-radius:99px;background:#4A5E33}
.err{padding:32px 0;color:var(--muted)}
.err button{margin-top:12px;border:1px solid var(--line);background:transparent;border-radius:99px;padding:10px 18px;font-weight:600}
.loading{color:var(--muted);padding:32px 0}

/* transicoes entre telas (View Transitions: quem nao suporta troca direto) */
::view-transition-old(root){animation:ondaiOut .14s ease-in both}
::view-transition-new(root){animation:ondaiIn .22s ease-out both}
@keyframes ondaiOut{to{opacity:0}}
@keyframes ondaiIn{from{opacity:0;transform:translateY(8px)}}
@media (max-width:420px){
  .facts div{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .sk{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

.strip .hr.inwin::after{content:'';display:block;width:100%;height:4px;border-radius:2px;background:var(--accent);margin-top:-2px}
.winkey{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--muted)}
.winkey i{display:block;width:18px;height:4px;border-radius:2px;background:var(--accent)}
.pesa{margin:0 0 6px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--sand) 12%,transparent);border-left:3px solid var(--sand)}
.pesa-k{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.pesa p{margin:4px 0;font-size:14px;color:var(--soft-ink)}
.pesa b{color:var(--ink)}

.states{display:flex;gap:8px;overflow-x:auto;margin:2px -20px 14px;padding:2px 20px;scrollbar-width:none}
.states::-webkit-scrollbar{display:none}
.st{flex:none;display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:8px 14px;font-size:13.5px;font-weight:700;border:1.5px solid var(--line);background:var(--card);color:var(--ink);white-space:nowrap}
.st.on{background:var(--seg-on);border-color:var(--seg-on);color:#fff}
.st.off{color:var(--muted)}
.st em{font-style:normal;font-size:11px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:99px;padding:2px 8px}