/* app/ui-laag-topbridge.css — Top bridge: cheat sheet als paarprofiel (Voorbeeld 4, Design-canvas "Biedtrainer ·
   UI-laag voorbeelden"; notitie n4). Opbouw in modules/tab-topbridge.js (paarkopHtml, kpiHtml, metersHtml,
   sterkZwakHtml, aanTafelHtml). Alleen tokens uit app/ui-laag.css (--ul-*), dus licht én donker.
   Selectie: de bestaande chipbalk (.tb-filtbar) krijgt de chip-regel-look en het bestaande filterpaneel
   (.tb-filtpanel.ul-lade) wordt een zijlade; op de telefoon blijft het het volledige scherm van E4. */

/* ── paarkop: navy kaart met twee avatars, vraag als titel, twee knoppen ── */
.ul-tb-kop{background:var(--ul-navy);color:#fff;border-radius:16px;padding:20px;margin-bottom:14px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:16px;box-sizing:border-box}
@media(min-width:1024px){ .ul-tb-kop{padding:22px 26px} }
.ul-tb-kopid{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 420px}
.ul-tb-avatars{display:flex;flex:none}
.ul-tb-avatar{width:52px;height:52px;border-radius:999px;background:var(--ul-oranje-knop);color:#fff;font-size:16px;font-weight:700;
  display:grid;place-items:center;border:3px solid var(--ul-navy);box-sizing:border-box}
.ul-tb-avatar.twee{background:#5b6a8f;margin-left:-14px}
.ul-tb-koptekst{min-width:0;display:flex;flex-direction:column;gap:4px}
.ul-tb-kop .ul-eyebrow{color:var(--ul-licht)}
.ul-tb-h1{font-family:var(--ul-kopfont);font-weight:700;font-size:24px;line-height:1.2;letter-spacing:0;margin:0;color:#fff}
@media(min-width:1024px){ .ul-tb-h1{font-size:30px} }
.ul-tb-kopsub{margin:0;font-size:14px;color:var(--ul-licht)}
.ul-tb-kopknoppen{display:flex;flex-wrap:wrap;gap:8px}
.ul-tb-knoplicht{background:transparent;border-color:#5b6a8f;color:#fff}
.dark .ul-tb-knoplicht{color:#fff}
@media(max-width:600px){ .ul-tb-kop{padding:16px} .ul-tb-avatar{width:44px;height:44px;font-size:14px} .ul-tb-kopid{flex-basis:100%} }

/* ── selectie als één chip-regel (bestaande .tb-filtbar, alle tabs) ── */
.tb-filtbar{background:var(--ul-kaart);border-color:var(--ul-rand);border-radius:12px;padding:10px 16px}
.tb-filtsum.ul-chipregel{gap:8px}
.tb-filtsum .tb-sumchip{min-height:36px;padding:8px 12px;border-radius:999px;border:1px solid var(--ul-rand);background:var(--ul-creme);
  color:var(--ul-gedempt);font-family:inherit;font-size:13px;cursor:pointer}
.tb-filtsum .tb-sumchip b{color:var(--ul-tekst)}
.tb-filtsum .tb-sumchip:hover{border-color:var(--ul-rand-knop)}
.tb-filtsum .tb-sumchip:focus-visible,.tb-filtsum #tbToggleFilters2:focus-visible{outline:3px solid var(--ul-oranje);outline-offset:2px}
.tb-filtsum #tbToggleFilters2{min-height:36px;border:1px solid var(--ul-rand-knop);background:var(--ul-kaart);color:var(--ul-navy);
  font-weight:600;border-radius:10px;padding:8px 14px}
.dark .tb-filtsum #tbToggleFilters2{color:var(--ul-tekst)}

/* ── bestaande filterpanelen in een zijlade (desktop/tablet); telefoon = volledig scherm (E4) ── */
@media(min-width:601px){
  .tb-filtpanel.ul-lade{width:min(480px,100vw);margin:0;padding:0 0 24px;border-radius:0;border-width:0 0 0 1px;overflow-y:auto;
    background:var(--ul-kaart);display:block;transform:none}
  .tb-filtpanel.ul-lade .tb-selkop{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:2;
    background:var(--ul-kaart);border-bottom:1px solid var(--ul-rand2);padding:16px 20px;margin-bottom:14px}
  .tb-filtpanel.ul-lade .tb-selkop-titel{font-family:var(--ul-kopfont);font-size:20px;font-weight:700;color:var(--ul-tekst)}
  .tb-filtpanel.ul-lade .tb-selkop-sub{font-family:inherit;font-size:12px;font-weight:400;color:var(--ul-gedempt)}
  .tb-filtpanel.ul-lade .tb-selkop>button{min-height:44px;padding:0 14px;border:0;border-radius:10px;background:var(--ul-creme);
    color:var(--ul-tekst);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
  .tb-filtpanel.ul-lade>.tb-filtgrid{grid-template-columns:minmax(0,1fr);gap:12px;padding:0 20px}
  .tb-filtpanel.ul-lade>.tb-paireditor{padding:0 20px}
  .tb-filtpanel.ul-lade .tb-bereik{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tb-filtpanel.ul-lade .tb-suggwrap #tbSuggest>*{position:static!important;width:100%!important;max-height:46vh}
}

/* ── kerngetallen ── */
.ul-tb{display:flex;flex-direction:column;gap:22px;margin:14px 0 26px;min-width:0;color:var(--ul-tekst)}
.ul-tb-kern .ul-stat-num{font-size:30px}
.ul-stat.ul-stat-oranje{background:var(--ul-oranje-tint);border-color:var(--ul-oranje-rand)}
.ul-stat.ul-stat-oranje .ul-stat-lbl{color:var(--ul-oranje-tekst)}
.ul-stat.pos .ul-stat-num{color:var(--ul-groen)}
.ul-stat.neg .ul-stat-num{color:var(--ul-rood)}

/* ── zes meters ── */
.ul-tb-sectie{display:flex;flex-direction:column;gap:12px}
.ul-tb-meters{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:700px){ .ul-tb-meters{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1100px){ .ul-tb-meters{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ul-tb-meter{background:var(--ul-kaart);border:1px solid var(--ul-rand);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ul-tb-meter.sterkste,.ul-tb-meter.sterk{background:var(--ul-oranje-tint);border-color:var(--ul-oranje-rand)}
.ul-tb-meter.dof{background:transparent;border-style:dashed}
.ul-tb-meterkop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ul-tb-meternaam{margin:0;font-family:var(--ul-kopfont);font-size:17px;font-weight:700}
.ul-tb-meterrol{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ul-gedempt)}
.ul-tb-chip{border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700;white-space:nowrap}
.ul-tb-chip.sterkste,.ul-tb-chip.sterk{background:var(--ul-oranje-knop);color:#fff}
.ul-tb-chip.gemiddeld{background:var(--ul-chip);color:var(--ul-navy)}
.dark .ul-tb-chip.gemiddeld{color:var(--ul-tekst)}
.ul-tb-chip.werkpunt{background:#fbe9dd;color:#a8451a}
.dark .ul-tb-chip.werkpunt{background:var(--ul-oranje-tint);color:var(--ul-oranje-tekst)}
.ul-tb-meterget{display:flex;align-items:baseline;gap:6px}
.ul-tb-meterimp{font-family:var(--ul-kopfont);font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.ul-tb-meterimp.pos{color:var(--ul-groen)}
.ul-tb-meterimp.neg{color:var(--ul-rood)}
.ul-tb-metern{font-size:12px;color:var(--ul-gedempt)}
.ul-tb-meterbaan{position:relative;height:10px;border-radius:999px;background:var(--ul-rand2)}
.ul-tb-meter.sterkste .ul-tb-meterbaan,.ul-tb-meter.sterk .ul-tb-meterbaan{background:#f3e4d8}
.dark .ul-tb-meter.sterkste .ul-tb-meterbaan,.dark .ul-tb-meter.sterk .ul-tb-meterbaan{background:var(--ul-oranje-rand)}
.ul-tb-metervul{position:absolute;left:0;top:0;height:10px;border-radius:999px;background:#7fb08f}
.ul-tb-meter.sterkste .ul-tb-metervul,.ul-tb-meter.sterk .ul-tb-metervul{background:var(--ul-oranje)}
.ul-tb-meter.werkpunt .ul-tb-metervul{background:#d98c84}
.ul-tb-meterstreep{position:absolute;left:50%;top:-3px;width:3px;height:16px;margin-left:-1px;background:var(--ul-navy);border-radius:2px}
.dark .ul-tb-meterstreep{background:var(--ul-tekst)}
.ul-tb-meterbaan:focus-visible{outline:3px solid var(--ul-oranje);outline-offset:3px}
.ul-tb-metersub,.ul-tb-meterleeg{margin:0;font-size:12px;color:var(--ul-gedempt)}

/* ── sterke punten / werkpunten, Aan tafel, Verder kijken ── */
.ul-tb-twee{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch}
@media(min-width:900px){ .ul-tb-twee{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ul-tb-punten{gap:10px}
.ul-tb-puntlijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ul-tb-punt{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:10px 0;border:0;
  border-top:1px solid var(--ul-rand2);background:transparent;color:var(--ul-tekst);font-family:inherit;font-size:14px;text-align:left;cursor:pointer}
.ul-tb-punt:hover .ul-tb-puntlbl{text-decoration:underline}
.ul-tb-punt:focus-visible{outline:3px solid var(--ul-oranje);outline-offset:2px}
.ul-tb-puntlbl{min-width:0}
.ul-tb-puntn{display:block;font-size:12px;color:var(--ul-gedempt);margin-top:2px}
.ul-tb-punt b{white-space:nowrap;font-variant-numeric:tabular-nums}
.ul-tb-punt b.pos{color:var(--ul-groen)} .ul-tb-punt b.neg{color:var(--ul-rood)}
.ul-tb-tafel{gap:10px}
.ul-tb-tafelkop{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ul-oranje-tekst)}
.ul-tb-tafellijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.45}
.ul-tb-tafellijst li{display:flex;gap:10px}
.ul-tb-tafelnr{width:24px;height:24px;border-radius:999px;background:var(--ul-oranje-knop);color:#fff;font-size:12px;font-weight:700;
  display:grid;place-items:center;flex:none}
.ul-tb-tafelnoot{margin:0;font-size:12px;color:var(--ul-gedempt)}
.ul-tb-verdergrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ul-tb-verder{border:1px solid var(--ul-rand);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-height:44px;background:var(--ul-kaart);color:var(--ul-tekst);font-family:inherit;text-align:left;cursor:pointer}
.ul-tb-verder:hover{border-color:var(--ul-rand-knop)}
.ul-tb-verder:focus-visible{outline:3px solid var(--ul-oranje);outline-offset:2px}
.ul-tb-verdernaam{font-size:14px;font-weight:700}
.ul-tb-verdertel{font-size:12px;font-weight:600;color:var(--ul-gedempt)}
.ul-tb-verdersub{font-size:12px;color:var(--ul-gedempt)}
@media(max-width:420px){ .ul-tb-verdergrid{grid-template-columns:minmax(0,1fr)} }
.ul-tb-verdieping{display:flex;flex-direction:column;gap:12px;color:var(--ul-tekst)}

/* ── printen: alleen het paarprofiel ── */
@media print{
  .ul-tb-kopknoppen,.tb-filtbar,.tb-filtpanel,.tb-rolebar,.tb-tabs,.tb-subtabs,.ul-tb-verderkaart,.ul-tb-verdieping,[data-voorraad]{display:none!important}
  .ul-tb-kop{background:#fff;color:#1b1f2a;border:1px solid #e6e2d8}
  .ul-tb-h1,.ul-tb-kop .ul-eyebrow,.ul-tb-kopsub{color:#1b1f2a}
}