/* Bouwkaart (protocol BOUWEN / skill /BuildWithETAandPOC) — stijl van de bouwkaarten op staffconcepts.nl,
   zoals eerst gebouwd voor poc.managerapp.staffsupport.nl (StaffManagerApp 0.17.0). Herbruikbaar: geen afhankelijkheden,
   CSP-veilig (geen inline style-attributen). Kleuren via --bb-* (licht/donker volgt data-theme of het systeem). */
.bb { --bb-primary: hsl(187.5 97.56% 16.08%); --bb-brand: hsl(162.29 99.06% 41.57%); --bb-sec: hsl(143.08 44.83% 94.31%);
  --bb-muted: hsl(162 5.15% 38.04%); --bb-vlak: #fff; --bb-rand: #E3E9E6; --bb-pagina: #F4F7F6; --bb-accent: #014751; --bb-accent-zacht: #E1FAF1;
  --bb-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  display: grid; gap: 8px; background: var(--bb-vlak); border: 1px solid var(--bb-rand); border-radius: .75rem; padding: 16px 18px; margin: 0 0 18px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bb { --bb-primary: #3fd3a6; --bb-sec: #12302a; --bb-muted: #9aa8a4; --bb-vlak: #0E1B22; --bb-rand: #1F3138; --bb-pagina: #071016; --bb-accent: #3fd3a6; --bb-accent-zacht: #0C2A25; } }
:root[data-theme="dark"] .bb { --bb-primary: #3fd3a6; --bb-sec: #12302a; --bb-muted: #9aa8a4; --bb-vlak: #0E1B22; --bb-rand: #1F3138; --bb-pagina: #071016; --bb-accent: #3fd3a6; --bb-accent-zacht: #0C2A25; }
.bb[hidden], .bb-live[hidden], .bb [hidden] { display: none !important; }
.bb .bb-kop { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bb-muted); }
.bb .bb-stip { width: 9px; height: 9px; border-radius: 50%; background: var(--bb-primary); animation: bbpuls 1.2s infinite; flex: none; }
.bb .bb-label { color: var(--bb-primary); }
.bb .bb-sinds { margin-left: auto; font-weight: 600; letter-spacing: .02em; text-transform: none; }
@keyframes bbpuls { 0% { box-shadow: 0 0 0 0 hsl(162.29 99.06% 41.57% / .55); } 70% { box-shadow: 0 0 0 7px hsl(162.29 99.06% 41.57% / 0); } 100% { box-shadow: 0 0 0 0 hsl(162.29 99.06% 41.57% / 0); } }
@media (prefers-reduced-motion: reduce) { .bb .bb-stip { animation: none; } }
.bb .bb-nu { margin: 0; font-size: 14px; }
.bb .bb-balk { position: relative; height: 8px; border-radius: 999px; background: var(--bb-sec); overflow: hidden; }
.bb .bb-balk i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--bb-primary), var(--bb-brand)); transition: width .6s linear; }
.bb .bb-regel { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--bb-muted); flex-wrap: wrap; }
.bb .bb-eta { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--bb-primary); }
.bb .bb-rij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; align-items: center; }
.bb button, .bb-live button { font: inherit; font-size: 13px; color: inherit; background: var(--bb-pagina); border: 1px solid var(--bb-rand); border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.bb button:hover, .bb-live button:hover { border-color: var(--bb-brand); }
.bb button[aria-pressed="true"], .bb-live button[aria-pressed="true"] { background: var(--bb-accent); color: #fff; border-color: var(--bb-accent); }
.bb .bb-sub, .bb-live .bb-sub { font-size: 13px; color: var(--bb-muted); margin: 0; }
.bb .bb-regels { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; font: 12.5px/1.5 var(--bb-mono); border: 1px solid var(--bb-rand); border-radius: 8px; background: var(--bb-pagina); }
.bb .bb-regels li { padding: 6px 10px; border-bottom: 1px solid var(--bb-rand); display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
.bb .bb-regels li:last-child { border-bottom: 0; }
.bb .bb-regels time { color: var(--bb-muted); }
.bb .bb-regels li.nu { background: var(--bb-accent-zacht); }

/* live sessielog: terminal */
.bb-live { --bb-vlak: #fff; --bb-rand: #E3E9E6; --bb-pagina: #F4F7F6; --bb-accent: #014751; --bb-muted: hsl(162 5.15% 38.04%); --bb-brand: hsl(162.29 99.06% 41.57%);
  display: grid; gap: 8px; background: var(--bb-vlak); border: 1px solid var(--bb-rand); border-radius: .75rem; padding: 16px 18px; margin: 0 0 18px; }
:root[data-theme="dark"] .bb-live { --bb-vlak: #0E1B22; --bb-rand: #1F3138; --bb-pagina: #071016; --bb-accent: #3fd3a6; --bb-muted: #9aa8a4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bb-live { --bb-vlak: #0E1B22; --bb-rand: #1F3138; --bb-pagina: #071016; --bb-accent: #3fd3a6; --bb-muted: #9aa8a4; } }
.bb-live h2 { margin: 0; font-size: 1.05rem; }
.bb-live .bb-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bb-live label { margin-left: auto; }
.bb-live .bb-geen { font-size: 14px; color: var(--bb-muted); border: 1px dashed var(--bb-rand); border-radius: 10px; padding: 14px; margin: 0; }
.bb-live ol { list-style: none; margin: 0; padding: 0; height: min(70vh, 640px); overflow: auto; font: 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: #0b1418; color: #d7e3df; border-radius: 10px; }
.bb-live li { padding: 6px 12px; border-bottom: 1px solid #1d2a2f; white-space: pre-wrap; word-break: break-word; }
.bb-live time { color: #7d918c; margin-right: 8px; }
.bb-live .s-prompt { background: #123026; color: #bff3dc; }
.bb-live .s-prompt b { color: #5ee0a8; }
.bb-live .s-tekst { color: #f1f5f4; }
.bb-live .s-tool b { color: #7fb2ff; }
.bb-live .s-tool .k { color: #c9d5d2; }
.bb-live pre { margin: 3px 0 0; white-space: pre-wrap; color: #9fb1ac; font: inherit; }
.bb-live .s-resultaat { color: #9fb1ac; }
.bb-live .fout, .bb-live .fout pre { color: #ff9a8a; }