/* Accountmenu → Mia's brein (brein-paneel.js). Bouwt op Mia Design (vel, groep, rij, knop, segment) en op het
   massieve instellingenvel van Mijn server (.sv-vel). Rustig en dicht: lijst met keuzerondjes, cijfers rechts, één primaire knop. */
.br-vel .md-vel-inhoud { padding-top: 2px; }
.br-vel, .br-vel *, .br-vel *::before, .br-vel *::after { box-sizing: border-box; }   /* niet leunen op de reset van de schil */
.br-blok { margin-top: 18px; }
.br-blok:first-child { margin-top: 4px; }
.br-w { font-variant-numeric: tabular-nums; }
.br-zacht { color: var(--md-label-3); }
.br-wrap .md-rij-titel, .br-wrap .md-rij-sub { white-space: normal; }
.br-voet { margin-top: 2px; }
.br-fout { padding: 0 16px; margin-top: 10px; font-size: var(--md-t-sub); color: var(--md-rood-tekst); }
.br-leeg { padding: 28px 4px; color: var(--md-label-2); font-size: var(--md-t-tekst); }

/* status: stip vóór de tekst */
.md-rij.br-st { align-items: flex-start; --md-rij-in: 36px; }
.br-stip { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--md-label-3); vertical-align: 1px; }
.br-st > .br-stip { margin-top: 6px; }
.md-rij.br-st.br-midden { align-items: center; }
.br-st.br-midden > .br-stip { margin-top: 0; }
.br-s-ok { background: var(--md-groen); }
.br-s-let { background: var(--md-oranje); }
.br-s-fout { background: var(--md-rood); }
.br-s-bezig { background: var(--md-tint); animation: br-puls 1.4s ease-in-out infinite; }
@keyframes br-puls { 50% { opacity: .35; } }
.br-model { margin-left: 6px; font-family: var(--md-letter-mono); font-size: var(--md-t-sub); font-weight: 400; color: var(--md-label-2); }

/* keuzelijst: rondje links, score/“In gebruik” rechts */
.br-optie { --md-rij-in: 48px; }
.br-optie .md-rij-sub { white-space: normal; }
.br-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--md-label-3); display: grid; place-items: center;
  transition: box-shadow var(--md-duur-vervaag) ease; }
.br-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--md-tint); transform: scale(0); transition: transform .22s var(--md-veer-standaard); }
.br-optie.br-aan .br-radio { box-shadow: inset 0 0 0 1.5px var(--md-tint); }
.br-optie.br-aan .br-radio::after { transform: scale(1); }
.br-chip { display: inline-block; padding: 0 7px; border-radius: 5px; font-size: var(--md-t-voet, 12px); font-weight: 600; line-height: 18px;
  background: var(--md-tint-zacht); color: var(--md-tint); white-space: nowrap; }
.br-rechts { display: inline-flex; align-items: center; gap: 10px; }
.br-score { font-variant-numeric: tabular-nums; color: var(--md-label-2); min-width: 22px; text-align: right; }

/* koppelen */
.br-seg-rij { margin: 0 0 10px; }
.br-seg-rij .md-seg-optie { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.br-stap { --md-rij-in: 48px; }
.br-nr { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--md-fill); color: var(--md-label-2); }
.br-url { font-family: var(--md-letter-mono); font-size: 12px; word-break: break-all; }
.br-code { display: block; margin-top: 2px; font-family: var(--md-letter-mono); font-size: 17px; font-weight: 600; letter-spacing: .06em; color: var(--md-label); user-select: all; }
.md-knop.br-klein { flex: none; height: 30px; padding: 0 12px; font-size: var(--md-t-sub); text-decoration: none; display: inline-flex; align-items: center; }
.md-knop.br-stil { background: transparent; color: var(--md-label-2); }

/* invoer in een rij: label links, veld rechts */
.br-invoer .md-rij-tekst { flex: none; }
.br-rij > .md-rij-tekst + .br-veld, .br-rij > .md-rij-tekst + .br-select { min-width: 0; }
.br-veld, .br-select { min-width: 0; font: inherit; font-size: var(--md-t-tekst); color: var(--md-label); background: var(--md-fill); border: 0; border-radius: 8px;
  height: 32px; padding: 0 10px; }
.br-veld, .br-select { flex: 0 1 60%; width: 60%; margin-left: auto; }
.br-mono { font-family: var(--md-letter-mono); font-size: 13px; }
.br-veld:focus-visible, .br-select:focus-visible { outline: 1.5px solid var(--md-tint); outline-offset: 0; }
.br-veld::placeholder { color: var(--md-label-3); }

.br-actie { padding: 12px 0 2px; }
.br-door { width: 100%; }
.md-knop.md-tint.br-door:disabled { opacity: 1; background: var(--md-fill); color: var(--md-label-3); }
.br-uit .md-rij-titel { color: var(--md-rood-tekst); font-weight: 400; }
.br-test .br-stip { margin-right: 2px; }

/* topbar: op de telefoon staat het brein in het Jij-vel, niet in de balk */
@media (max-width: 759px) { .topbar #topbar-brein { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .br-radio, .br-radio::after { transition: none; }
  .br-s-bezig { animation: none; }
}
/* Claude: teruggeplakte code — veld over de volle breedte, knop ernaast */
.br-plak { gap: 8px; }
.br-plak .br-veld { flex: 1 1 auto; width: auto; margin-left: 0; }

/* Eerste stap "Koppel je AI-account" (W4, eigen brein verplicht): rustig, in de lijn van de groepen eronder.
   Geen marketingblok: één nummer, één titel, twee zinnen. */
.br-stap-intro { padding: 16px 16px 14px; border-radius: var(--md-r-groep, 12px); background: var(--md-tint-zacht); }
.br-stap-kop { display: flex; align-items: center; gap: 8px; font-size: var(--md-t-sub); font-weight: 600; color: var(--md-tint); }
.br-stap-nr { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--md-tint); color: var(--md-op-tint); font-variant-numeric: tabular-nums; }
.br-stap-titel { margin-top: 8px; font-size: 19px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; color: var(--md-label); text-wrap: balance; }
.br-stap-tekst { margin: 6px 0 0; font-size: var(--md-t-tekst); line-height: 1.45; color: var(--md-label); text-wrap: pretty; }
.br-stap-tekst + .br-stap-tekst { margin-top: 4px; font-weight: 600; }
/* pill rechtsboven zolang er niets gekoppeld is: zachte oranje knop, geen extra stip */
.br-pill.br-pill-let { color: var(--md-oranje-tekst, var(--md-oranje)); background: var(--md-oranje-zacht); border-radius: 999px; padding: 4px 10px; }
@media (max-width: 480px) { .br-pill.br-pill-let { padding: 4px 8px; } }
/* kennismaking van Start wacht tot de eerste stap dicht is */
html.br-stap-open .oo-laag { display: none !important; }