/* Makelab HQ, stijl 1b "Combi netter" (bron: design/hq-ui, thema net / netDonker) */
:root {
  --bg: #F7F4F0; --panel: #FFFFFF; --ink: #16120F; --muted: #5C534B; --line: #16120F; --soft: #F7F4F0;
  --divider: #ECE6DF; --accent: #F99339; --accent-ink: #16120F; --accent-text: #B4520C;
  --nav-bg: #16120F; --nav-ink: #F7F4F0; --nav-muted: #CFC5BA; --nav-on-bg: #F7F4F0; --nav-on-ink: #16120F;
  --shadow: 3px 3px 0 #16120F; --shadow-sm: 2px 2px 0 #16120F;
  --t-oranje: #F3E3D3; --t-roze: #F1E1E6; --t-groen: #E0EFE6; --t-grijs: #ECE6DF; --t-rood: #FAD4DF; --t-blauw: #DCE6F2;
  --wait-bg: #FFF8F1; --sel-bg: #FBF3EA; --live-bg: #E0EFE6; --live-ink: #1B6B3C;
  --ok: #2FB463; --warn: #DA456F; --idle: #A89F95; --danger: #B4233F; --ok-soft: #D7F2E1; --ok-ink: #1B6B3C;
  --chip-on: #16120F; --chip-on-ink: #F7F4F0; --scrim: rgba(22,18,15,.4); --live-dot: #6FD39A;
  --head: 'Archivo', system-ui, sans-serif; --body: 'DM Sans', system-ui, sans-serif; --mono: 'Space Mono', ui-monospace, monospace;
  --r: 10px; --r-btn: 8px; --bw: 1.5px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12100E; --panel: #1B1815; --ink: #F3EEE8; --muted: #A89F95; --line: #3A332D; --soft: #12100E;
    --divider: #2A2521; --accent-text: #F9A85C; --nav-bg: #0C0B0A; --nav-ink: #F3EEE8; --nav-muted: #A89F95;
    --nav-on-bg: #2A2521; --nav-on-ink: #F99339; --shadow: 3px 3px 0 #000; --shadow-sm: 2px 2px 0 #000;
    --t-oranje: #4A3220; --t-roze: #4A2833; --t-groen: #1F3D2C; --t-grijs: #2E2925; --t-rood: #5A2330; --t-blauw: #22324A;
    --wait-bg: #221C17; --sel-bg: #2A2521; --live-bg: #1F3D2C; --live-ink: #7FDCA4;
    --ok: #4CC27E; --danger: #FF7A8A; --ok-soft: #1F3D2C; --ok-ink: #7FDCA4;
    --chip-on: #F3EEE8; --chip-on-ink: #12100E; --scrim: rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12100E; --panel: #1B1815; --ink: #F3EEE8; --muted: #A89F95; --line: #3A332D; --soft: #12100E;
  --divider: #2A2521; --accent-text: #F9A85C; --nav-bg: #0C0B0A; --nav-ink: #F3EEE8; --nav-muted: #A89F95;
  --nav-on-bg: #2A2521; --nav-on-ink: #F99339; --shadow: 3px 3px 0 #000; --shadow-sm: 2px 2px 0 #000;
  --t-oranje: #4A3220; --t-roze: #4A2833; --t-groen: #1F3D2C; --t-grijs: #2E2925; --t-rood: #5A2330; --t-blauw: #22324A;
  --wait-bg: #221C17; --sel-bg: #2A2521; --live-bg: #1F3D2C; --live-ink: #7FDCA4;
  --ok: #4CC27E; --danger: #FF7A8A; --ok-soft: #1F3D2C; --ok-ink: #7FDCA4;
  --chip-on: #F3EEE8; --chip-on-ink: #12100E; --scrim: rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.4 var(--body); min-height: 100vh; }
a { color: inherit; }
a:hover { opacity: .85; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.sr { position: absolute; left: -9999px; }
[hidden] { display: none !important; }

/* kop */
.top { background: var(--nav-bg); color: var(--nav-ink); position: sticky; top: 0; z-index: 20; }
.top .in { max-width: 1240px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.logo { font: 800 20px var(--head); text-decoration: none; letter-spacing: -0.015em; }
.logo b { color: var(--accent); font-weight: 800; }
.nav { display: flex; gap: 4px; font-weight: 600; flex: 1 1 auto; }
.nav a { padding: 7px 12px; border-radius: 999px; color: var(--nav-muted); text-decoration: none; }
.nav a.on { background: var(--nav-on-bg); color: var(--nav-on-ink); }
.nav a .n { font-family: var(--mono); font-size: 11px; margin-left: 4px; }
.fresh { font: 12px var(--mono); color: var(--live-dot); white-space: nowrap; }
.fresh.stale { color: var(--nav-muted); }
.iconbtn { border: 0; background: none; color: inherit; padding: 6px; cursor: pointer; border-radius: 8px; display: inline-flex; }
.iconbtn:hover { background: rgba(127,127,127,.15); }

main { max-width: 1240px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
h1 { margin: 0; font: 800 28px/1.1 var(--head); letter-spacing: -0.015em; }
h2 { font-family: var(--head); font-weight: 800; letter-spacing: -0.015em; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--panel); border: var(--bw) solid var(--line); white-space: nowrap; }
.pill.accent { background: var(--accent); color: var(--accent-ink); border-color: #16120F; font-weight: 700; }
.pill.bad { background: var(--t-rood); }
.tag { font-weight: 700; padding: 1px 7px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: var(--bw) solid var(--line); flex: none; }

.box { border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); background: var(--panel); }
.btn { font-weight: 700; min-height: 44px; padding: 0 16px; border-radius: var(--r-btn); border: var(--bw) solid var(--line); background: var(--panel); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: #16120F; box-shadow: var(--shadow-sm); font-weight: 800; }
.btn.ghost { border-color: var(--divider); font-weight: 600; }
.btn.danger { border: 0; background: none; color: var(--danger); padding: 0; min-height: 36px; font-weight: 600; }
.btn:disabled { opacity: .5; cursor: default; }

/* matrix */
.summary { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.summary h1 { margin-right: 12px; }
.matrix-wrap { overflow-x: auto; }
.matrix { min-width: 1000px; display: grid; grid-template-columns: 190px minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
.matrix > div { padding: 10px; border-bottom: var(--bw) solid var(--line); border-left: var(--bw) solid var(--line); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.matrix > div.c0 { border-left: 0; padding: 14px; gap: 6px; }
.matrix > div.last { border-bottom: 0; }
.matrix .hd { padding: 12px 14px; background: var(--soft); font: 800 14px var(--head); }
.matrix .hd.c0 { font: 11px var(--mono); color: var(--muted); }
.matrix .hd.wait { background: var(--accent); color: var(--accent-ink); }
.matrix .hd.live { background: var(--live-bg); }
.matrix .waitcol { background: var(--wait-bg); }
.pname { display: flex; align-items: center; gap: 8px; font: 800 16px var(--head); }
.bar { height: 6px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--ink); }
.card { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--r-btn); background: var(--panel); border: var(--bw) solid var(--line); box-shadow: var(--shadow-sm); width: 100%; }
.card.sel { box-shadow: var(--shadow); outline: 2px solid var(--accent); outline-offset: 2px; }
.card .meta { display: flex; gap: 6px; align-items: center; font-size: 11px; }
.card .t { font-weight: 700; line-height: 1.3; }
.card .adv { font-size: 12px; color: var(--muted); }
.card .adv strong { color: var(--ink); }
.urg { margin-left: auto; font-weight: 700; color: var(--muted); }
.urg.blokkeert { color: var(--danger); }
.more { font-size: 13px; font-weight: 700; color: var(--accent-text); padding: 2px 4px; background: none; border: 0; cursor: pointer; text-align: left; }
.none { font-size: 13px; color: var(--muted); padding: 4px; }
.doing { padding: 8px 10px; border-radius: var(--r-btn); background: var(--soft); display: flex; flex-direction: column; gap: 4px; }
.ready { padding: 8px 10px; border-radius: var(--r-btn); border: 1px dashed var(--muted); text-decoration: none; display: block; }
.live { text-decoration: none; padding: 8px 10px; border-radius: var(--r-btn); background: var(--live-bg); display: block; }
.live .mono { font-size: 11px; color: var(--live-ink); }
.small { font: 11px var(--mono); color: var(--muted); }
.answered { padding: 8px 10px; border-radius: var(--r-btn); border: 1px solid var(--divider); font-size: 13px; display: flex; flex-direction: column; gap: 2px; }

/* detailpaneel */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: flex; justify-content: flex-end; }
.panel { width: 100%; max-width: 460px; background: var(--panel); border-left: var(--bw) solid var(--line); display: flex; flex-direction: column; height: 100%; }
.panel .ph { padding: 14px 20px; border-bottom: var(--bw) solid var(--line); background: var(--t-oranje); display: flex; align-items: center; gap: 10px; }
.panel .ph .pn { font: 800 15px var(--head); }
.panel .pb { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.panel .pf { padding: 14px 20px 20px; border-top: var(--bw) solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; }
.panel h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.lbl { font: 11px var(--mono); color: var(--muted); text-transform: uppercase; }
.opt { border: var(--bw) solid var(--divider); border-radius: var(--r-btn); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.opt.adv { border-color: var(--line); background: var(--sel-bg); box-shadow: var(--shadow-sm); }
.opt .on { font-weight: 800; }
.opt .plus, .opt .min { font-size: 13px; }
.opt .min { color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.links a, .links span { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; }
.links span { background: var(--soft); border-color: transparent; }
.note { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.note .row { display: flex; gap: 8px; }
textarea, input[type=text], input[type=password], input[type=search] { font: inherit; font-weight: 400; color: var(--ink); background: var(--panel); padding: 10px; border-radius: var(--r-btn); border: var(--bw) solid var(--line); }
textarea { flex: 1; resize: vertical; min-height: 64px; }
.mic { width: 52px; min-height: 52px; border-radius: var(--r-btn); background: #16120F; color: #F7F4F0; border: var(--bw) solid #16120F; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
:root[data-theme="dark"] .mic { background: #F3EEE8; color: #12100E; border-color: #F3EEE8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mic { background: #F3EEE8; color: #12100E; border-color: #F3EEE8; } }
.mic.rec { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; animation: pulse 1.2s infinite; }
.mic.busy { opacity: .6; cursor: wait; }
@keyframes pulse { 50% { opacity: .65; } }
.dictstate { font: 400 12px var(--mono); color: var(--muted); min-height: 1em; }
.panel .pf .btn { flex: 1; min-height: 48px; }
.panel .pf .btn.ghost { flex: 0 0 auto; }
.done-msg { padding: 12px; border-radius: var(--r-btn); background: var(--ok-soft); color: var(--ok-ink); font-weight: 700; }

/* mobiel: tabs + bottom-sheet */
.mtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--panel); }
.mtabs button { font-size: 12px; font-weight: 700; min-height: 48px; border-radius: 7px; border: 0; cursor: pointer; background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.mtabs button b { font: 800 17px var(--head); }
.mtabs button.on { background: var(--accent); color: var(--accent-ink); }
.mgroup { background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.mgroup .gh { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: var(--bw) solid var(--line); }
.mgroup .gh .gn { font: 800 15px var(--head); }
.mgroup .gh .gc { margin-left: auto; font: 700 12px var(--mono); }
.mrow { width: 100%; text-align: left; cursor: pointer; border: 0; border-bottom: 1px solid var(--divider); background: var(--panel); padding: 12px; display: flex; gap: 10px; align-items: center; text-decoration: none; }
.mrow:last-child { border-bottom: 0; }
.mrow .mt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mrow .t { font-weight: 700; }
.sheet-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: flex; align-items: flex-end; }
.sheet { width: 100%; background: var(--panel); border-top: var(--bw) solid var(--line); border-radius: 16px 16px 0 0; display: flex; flex-direction: column; max-height: 90vh; max-height: 90dvh; }
.sheet .grip { display: flex; justify-content: center; padding: 8px 0 2px; }
.sheet .grip span { width: 40px; height: 4px; border-radius: 999px; background: var(--nav-muted); }
.sheet .sh { padding: 6px 16px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--divider); }
.sheet .sb { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.sheet .sb h2 { margin: 0; font-size: 21px; line-height: 1.2; }
.sheet .sf { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: var(--bw) solid var(--line); display: flex; gap: 8px; }
.sheet .sf .btn { flex: 1; min-height: 52px; }

/* artifacts */
.ahead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ahead h1 { font-size: 36px; }
.search { display: flex; align-items: center; gap: 8px; background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r-btn); padding: 0 12px; flex: 0 1 320px; }
.search input { border: 0; outline: none; background: none; padding: 10px 0; width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { font-size: 14px; font-weight: 600; min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; border: var(--bw) solid var(--line); background: var(--panel); }
.chip.on { background: var(--chip-on); color: var(--chip-on-ink); border-color: var(--chip-on); }
.agroup { display: flex; flex-direction: column; gap: 12px; }
.agroup h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; }
.agroup h2 .sq { width: 14px; height: 14px; border-radius: 4px; border: var(--bw) solid var(--line); }
.alist { background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.arow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 18px; border-bottom: 1px solid var(--divider); }
.arow:last-child { border-bottom: 0; }
.thumb { width: 44px; height: 44px; flex: none; border-radius: 8px; border: var(--bw) solid var(--line); display: flex; align-items: center; justify-content: center; font: 800 15px var(--head); }
.arow .ai { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; }
.arow .ai a { font-weight: 700; text-decoration: none; font-size: 15px; }
.arow .ai .small { font-size: 12px; }
.shared { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok-ink); }
.react { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--t-oranje); }
.empty { padding: 28px; text-align: center; color: var(--muted); }

/* deelvenster */
.modal-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; overflow-y: auto; }
.modal { width: 100%; max-width: 500px; background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.modal h2 { margin: 0; font-size: 24px; }
.linkbox { flex: 1; min-width: 0; font: 13px var(--mono); background: var(--soft); border: var(--bw) solid var(--line); border-radius: var(--r-btn); padding: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.mfoot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--divider); padding-top: 14px; font-size: 13px; color: var(--muted); gap: 12px; flex-wrap: wrap; }
.oldlinks { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.oldlinks div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.reacties { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.reacties div { padding: 8px 10px; border-radius: var(--r-btn); background: var(--soft); }

/* besluiten */
.blist { display: flex; flex-direction: column; }
.brow { display: grid; grid-template-columns: 110px 1fr; gap: 4px 16px; padding: 14px 18px; border-bottom: 1px solid var(--divider); }
.brow:last-child { border-bottom: 0; }
.brow .w { font-weight: 700; }
.mdtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.mdtable th, .mdtable td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--divider); vertical-align: top; }
.mdtable th { font: 11px var(--mono); color: var(--muted); text-transform: uppercase; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 700; z-index: 90; box-shadow: var(--shadow-sm); max-width: calc(100vw - 32px); }
.toast.err { background: var(--danger); color: #fff; }

@media (max-width: 760px) {
  .top .in { padding: 12px 16px; gap: 8px 12px; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  main { padding: 12px 16px 32px; gap: 12px; }
  .ahead h1 { font-size: 30px; }
  .search { flex: 1 1 100%; }
  .arow { padding: 12px; }
  .arow .ai { flex-basis: calc(100% - 60px); }
  .brow { grid-template-columns: 1fr; padding: 12px; }
  .modal-scrim { padding: 16px; align-items: flex-end; }
  .modal { padding: 18px; }
  .mdtable thead { display: none; }
  .mdtable tr { display: block; border-bottom: 1px solid var(--divider); padding: 8px 0; }
  .mdtable td { display: block; border: 0; padding: 2px 12px; }
}