/* /brasil/ (26-10): stoptabs, het live-blok en de versheidsregel. Het live-blok groeit met zijn inhoud en is bij
   elke stop even hoog, zodat laden, offline en oud geen verspringing geven. Kleuren uit stijl.css; de vlaggekleuren zijn alleen accent. */
.br{--br-groen:#009C3B;--br-geel:#FFDF00;--br-blauw:#002776;
  max-width:1180px;margin:0 auto;padding:18px 16px 56px;display:flex;flex-direction:column;gap:12px}
@media(min-width:861px){ .br{padding-top:26px} }
.br-titel{font-size:30px;line-height:1.1;margin:0}
/* Vlag en groet (26-10): de vlag wappert zacht; wie minder beweging wil, krijgt hem stil. */
.br-groet{display:flex;align-items:center;gap:10px;min-height:40px;flex-wrap:wrap}
/* Het logo van KiteActive (26-10): de letters "kite" zijn wit, dus een donkere pil eronder. */
.br-ka{display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:var(--r-pil);background:#1F1E1A}
.br-ka img{height:16px;width:auto;display:block}
.br-vlag{width:34px;height:24px;flex:none;transform-origin:left center;animation:br-wapper 3.2s ease-in-out infinite;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
@keyframes br-wapper{0%,100%{transform:perspective(60px) rotateY(0) skewY(0)}50%{transform:perspective(60px) rotateY(-14deg) skewY(-3deg)}}
@media(prefers-reduced-motion:reduce){.br-vlag{animation:none}}
/* Een rij (28-10): titel en vlag links, KiteActive en Samba! rechts als een paar even hoge pillen (32 px, 8 px uit elkaar), alles op
   een middellijn. Drie maten naast elkaar oogde rommelig; de pillen eronder kostte 47 px voor de windkaart begon. */
.br-pillen{display:flex;align-items:center;gap:8px;margin-left:auto}
@media(max-width:599.98px){ .br-groet{gap:8px} .br-titel{font-size:27px;letter-spacing:-.01em} .br-vlag{width:30px;height:21px} }
/* Samba! is een aan/uit-knop (28-10): tik speelt Brazil (La La La La) in een lus, nog een tik pauzeert. De doorzichtige rand
   maakt het tikvlak 44 px; de zichtbare pil is 32 px, net als KiteActive ernaast. Onder 380 px alleen het icoon. */
.br-bom{margin:0 -6px;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;border:6px solid transparent;background-clip:padding-box;font-family:inherit;font-weight:800;font-size:14px;letter-spacing:.02em;padding:0 11px 0 9px;border-radius:var(--r-pil);background-color:var(--br-geel);color:var(--br-blauw);box-shadow:inset 0 -2px 0 var(--br-groen);cursor:pointer}
.br-bom[aria-pressed="true"]{background-color:var(--br-groen);color:#fff;box-shadow:inset 0 -2px 0 var(--br-blauw)}
/* Mislukt afspelen (29-10): de knop wordt stil grijs en doorgestreept, zonder melding. */
.br-bom[data-fout]{background-color:var(--lijn-2);color:var(--zacht);box-shadow:none}
.br-bom[data-fout] .br-bom-tekst{text-decoration:line-through}
.br-bom-ico{width:13px;height:13px;flex:none;fill:currentColor}
.br-bom .br-bom-pauze,.br-bom[aria-pressed="true"] .br-bom-speel{display:none}
.br-bom[aria-pressed="true"] .br-bom-pauze{display:inline}
.br-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(max-width:379.98px){ .br-bom{padding:0 9px} .br-bom-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} }

.br-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 1px 4px;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-snap-type:x proximity}
.br-tabs::-webkit-scrollbar{display:none}
.br-tab{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;gap:7px;padding:0 12px 0 8px;border:1px solid var(--lijn);border-radius:var(--r-pil);
  background:var(--kaart);color:var(--inkt);font:inherit;font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;scroll-snap-align:center;transition:border-color var(--t),background var(--t)}
.br-tab:hover{border-color:var(--inkt)}
.br-tab:focus-visible{outline:2px solid var(--inkt);outline-offset:2px}
.br-tab .nr{flex:none;width:24px;height:24px;border-radius:50%;background:var(--inkt);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.br-tab b{font-variant-numeric:tabular-nums;min-width:1.5em;text-align:right;font-weight:800}
.br-tab small{font-size:11px;font-weight:600;color:var(--zacht)}
.br-tab.onderweg{border-style:dashed;background:transparent;padding-left:12px;color:var(--zacht)}
.br-tab.geen b,.br-tab.vliegveld b,.br-tab.oud b{color:var(--zacht);font-weight:600}
.br-tab[aria-selected=true]{background:var(--inkt);border-color:var(--inkt);color:#fff}
.br-tab[aria-selected=true] .nr{background:var(--br-geel);color:var(--inkt)}
.br-tab[aria-selected=true] small,.br-tab[aria-selected=true] b{color:#fff}
.br-tab.leeg{width:96px;border-color:var(--lijn-2);background:var(--lijn-2);pointer-events:none}

.br-kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:14px;position:relative}
/* De kaart groeit met zijn inhoud (29-10): de vaste 264 px liet 63 px leeg onderin. Elke stop heeft dezelfde regels, dus de hoogte is overal gelijk. */
.br-live{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:30px auto auto;gap:4px;overflow:hidden}
.br-kop{display:flex;align-items:center;gap:8px}
.br-kop h2{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-kop h2::after{content:"";display:inline-block;width:34px;height:3px;margin-left:10px;vertical-align:middle;border-radius:2px;background:linear-gradient(90deg,var(--br-groen) 50%,var(--br-geel) 50%)}
.br-rij{display:flex;align-items:center;gap:12px;min-height:0}
.br-getal{flex:1;min-width:0}
.br-groot{font-family:var(--kop);font-weight:800;font-size:72px;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px;height:70px}
.br-groot small{font-family:inherit;font-size:18px;font-weight:600;color:var(--zacht);letter-spacing:0}
.br-meta{display:flex;flex-direction:column;gap:0;font-size:13px;line-height:1.35;color:var(--zacht);margin-top:2px;min-height:34px}
.br-meta>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-meta b{color:var(--inkt);font-variant-numeric:tabular-nums}
.br-richting{width:136px;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.br-richting svg{width:76px;height:76px;display:block}
.br-ring{fill:var(--papier);stroke:var(--lijn)}
.br-richting [data-pijl]{stroke:var(--inkt);transition:transform .4s}
.br-woord{display:inline-block;max-width:100%;font-weight:700;font-size:13px;padding:3px 9px;border-radius:var(--r-pil);background:var(--perfect-v);color:var(--perfect-t,var(--inkt));white-space:nowrap}
.br-graden{font-size:11px;color:var(--zacht);min-height:13px;line-height:1.2}
.br-voet{display:flex;flex-direction:column;gap:4px;font-size:12.5px;line-height:1.3;color:var(--zacht)}
.br-voet p{margin:0}
.br-voet [data-dichtbij]:not(:empty)::before{content:" · "}
.br-voet [data-leeftijd]{white-space:nowrap}
.br-voet [data-bron-tekst]{color:var(--inkt);font-weight:600}
.br-voet [data-bron-link]{color:var(--zacht);font-weight:600;white-space:nowrap;text-underline-offset:2px;display:inline-block;padding:14px 8px;margin:-14px -8px}   /* raakvlak 44 px hoog zonder de regel te vergroten (29-10) */
.br-voet [data-bron-link]::before{content:"· ";display:inline-block;text-decoration:none;color:var(--zacht);margin-right:.25em}

/* niveaus van het windwoord */
.br-live[data-niveau=mid] .br-woord{background:var(--matig-v)}
.br-live[data-niveau=off] .br-woord{background:var(--aflandig);color:#fff}
.br-live[data-niveau=off] [data-pijl]{stroke:var(--aflandig)}
/* geen strandmeter: voorspelling, effen gedempte pijl (behalve aflandig: dat blijft rood), getal gedempt */
.br-live[data-bron=geen]:not([data-niveau=off]) [data-pijl]{stroke:var(--zacht)}
.br-live[data-bron=geen] .br-groot,.br-live[data-bron=vliegveld] .br-groot{color:var(--zacht);font-weight:600}
.br-live[data-bron=vliegveld] .br-getal{border:1.5px dashed var(--weinig);border-radius:var(--r-s);padding:3px 8px;margin:-4px 0}
/* oude meting, laden, fout */
.br-live.oud .br-groot{color:var(--weinig)}
.br-live.oud [data-leeftijd]{color:var(--aflandig);font-weight:700}
.br-live[data-staat=laden] .br-groot,.br-live[data-staat=laden] .br-woord{color:var(--weinig)}
.br-live:not([data-staat=ok]) [data-pijl]{opacity:.25}
.br-live[data-staat=fout] .br-rij,.br-live[data-staat=fout] .br-kop{display:none}
.br-live[data-staat=fout]{grid-template-rows:auto}
/* Mislukt laden (29-10): alleen de foutkaart en de knop "Opnieuw"; geen lege tabs, kaart, grafiek of tocht. */
.br[data-fout]>.br-tabs,.br[data-fout]>#br-plek,.br[data-fout]>#br-grafiek,.br[data-fout]>#br-reis{display:none}
.br-live[data-staat=fout] .br-voet [data-bron-tekst]{color:var(--aflandig)}

/* de tikkende regel en de verversknop */
.br-vers{display:flex;align-items:center;gap:12px;min-height:44px}
.br-vers p{flex:1;min-width:0;margin:0;font-size:12.5px;line-height:1.3;color:var(--zacht)}
.br-vers[data-warn="1"] p{color:var(--aflandig);font-weight:600}
.br-vers button{flex:none;min-height:44px;width:96px;border:1px solid var(--lijn);border-radius:var(--r-pil);background:var(--kaart);color:var(--inkt);font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:border-color var(--t)}
.br-vers button:hover{border-color:var(--inkt)}
.br-vers button:focus-visible{outline:2px solid var(--inkt);outline-offset:2px}
.br-vers button[aria-busy=true]{color:var(--zacht);cursor:progress}
.br-vers button[aria-busy=true]::after{content:"";display:inline-block;width:11px;height:11px;margin-left:7px;vertical-align:-1px;border:2px solid var(--lijn);border-top-color:var(--inkt);border-radius:50%;animation:br-draai .7s linear infinite}
@keyframes br-draai{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){ .br-vers button[aria-busy=true]::after{animation:none} .br-richting [data-pijl]{transition:none} }

/* infoknop: 44 px raakvlak rond een kleine knop (padding-box 24 + 2 x 10); het paneel zelf staat in info.js en hangt open aan <body> */
.br-ib{position:relative;margin-left:auto;display:inline-flex}
.br-ib>button{width:26px;height:26px;border-radius:50%;border:1px solid var(--zacht);background:var(--kaart);color:var(--zacht);font:inherit;font-size:12px;font-weight:800;padding:0;cursor:pointer;position:relative;z-index:1}
.br-ib>button::after{content:"";position:absolute;inset:-10px}
.br-ia{position:fixed;inset:0;z-index:90;background:rgba(23,19,15,.3);touch-action:none}
.br-ia[hidden]{display:none}
.br-ip{position:fixed;z-index:91;box-sizing:border-box;background:var(--kaart);color:var(--inkt);border:1px solid var(--lijn);border-radius:12px;box-shadow:0 8px 28px rgba(23,19,15,.22);padding:14px 16px 14px;font-size:14px;line-height:1.45;font-weight:400;overflow:auto;max-height:calc(100vh - 16px)}
.br-ip[hidden]{display:none}
.br-ip h3{margin:0 40px 8px 0;font-size:16px;line-height:24px;font-weight:800}
.br-ip ul{margin:0;padding-left:18px}
.br-ip li{font-size:14px}
.br-ip li+li{margin-top:6px}
.br-ix{position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--inkt);font:inherit;font-size:28px;line-height:1;padding:0;cursor:pointer}
.br-ix:focus-visible,.br-ib>button:focus-visible{outline:2px solid var(--inkt);outline-offset:2px}
.br-ip.blad{left:0;right:0;bottom:0;top:auto;width:auto;max-height:80vh;border-width:1px 0 0;border-radius:16px 16px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
@media(max-width:599.98px){html.br-blad{overflow:hidden}}
@media(prefers-reduced-motion:no-preference){.br-ip.blad{animation:br-blad .22s ease-out}}
@keyframes br-blad{from{transform:translateY(100%)}to{transform:none}}
.br-melding{font-size:14px}

@media(max-width:380px){
  .br-groot{font-size:64px;height:62px}
  .br-richting{width:112px}
  .br-live[data-bron=vliegveld] .br-getal{padding:3px 4px}
  .br-woord{font-size:12px;padding:3px 7px}
  .br-richting svg{width:66px;height:66px}
}

/* Breed scherm (26-10): het live-blok en de strandkaart naast elkaar, even hoog; de rest over de hele breedte. */
@media(min-width:1000px){
  .br{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px}
  .br>*{grid-column:1/-1}
  .br>.br-tabs{margin:0;padding:2px 0 4px}
  .br>.br-groet{grid-row:1}.br>.br-tabs{grid-row:2}
  .br>#live{grid-column:1;grid-row:3}.br>#br-plek{grid-column:2;grid-row:3;height:auto;min-height:0}   /* even hoog als het live-blok: het rooster rekt hem */
  .br>.br-vers{grid-row:4}
  .br[data-fout]>#live{grid-column:1/-1}   /* foutstand: de kaart over de hele rij, geen lege rechterhelft */
}