/* Trapwise v3, afdelingensectie: zeven tabbladen, per afdeling een ontworpen console. Tokens uit DESIGN.md. */

.dept-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start;
}

/* ---------- Tabbladen ---------- */
.dept-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line); min-width: 0; }
.section-inner { min-width: 0; }
.dept-tab {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 18px 12px 18px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--dim);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, padding .2s;
}
.dept-tab .n { font-family: var(--font-mono); font-size: 12px; color: var(--dim-2); letter-spacing: .06em; }
.dept-tab .agents { grid-column: 2 / 4; margin-top: 4px; font-size: 13px; color: var(--dim-2); display: none; }
.dept-tab .st { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-2); }
.dept-tab:hover { color: var(--text); }
.dept-tab.is-active {
  color: var(--text);
  border-left-color: var(--blue);
  padding-left: 14px;
  background: linear-gradient(90deg, rgba(104, 213, 234, 0.10), rgba(104, 213, 234, 0));
}
.dept-tab.is-active .n { color: var(--blue-glow); }
.dept-tab.is-active .agents { display: block; }
.dept-tab.is-active .st { color: var(--blue-glow); }

/* ---------- Console-kop ---------- */
.dept-stage { min-width: 0; }
.dept-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.dept-head h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.dept-head .kop { margin: 0; color: var(--dim); font-size: 17px; max-width: 560px; }
.dept-head .kop b { color: var(--text); font-weight: 500; }

/* ---------- Placeholder (nog te bouwen) ---------- */
.dept-soon {
  border: 1px solid rgba(104, 213, 234, 0.5);
  border-radius: 16px;
  background: var(--surface);
  padding: 32px;
  min-height: 520px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
}
.dept-soon .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: start; }
.dept-soon .acard { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 16px; }
.dept-soon .acard .nm { font-weight: 600; margin-bottom: 6px; }
.dept-soon .acard .kp { color: var(--dim); font-size: 14px; line-height: 1.4; }
.dept-soon .note { color: var(--dim-2); }

/* ---------- Console 2: Customer Journey ---------- */
.cj-body {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  min-height: 600px;
}
.cj-col { padding: 18px; min-width: 0; }
.cj-col + .cj-col { border-left: 1px solid var(--line); }
.cj-col .ch { display: flex; align-items: center; justify-content: space-between; color: var(--dim-2); margin-bottom: 12px; }
.cj-col .ch b { color: var(--dim); font-weight: 500; }

/* Binnenkomend */
.inbox { display: flex; flex-direction: column; gap: 6px; }
.req {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  cursor: default;
  transition: border-color .2s, background .2s;
}
.req .chn { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim-2); }
.req .tm { font-family: var(--font-mono); font-size: 11px; color: var(--dim-2); text-align: right; }
.req .sub { grid-column: 1 / 3; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req .stt { grid-column: 1 / 3; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim-2); }
.req.is-active { border-color: rgba(189, 238, 248, 0.6); background: rgba(104, 213, 234, 0.10); }
.req.is-active .stt { color: var(--blue-glow); }
.req.is-done .stt { color: var(--green); }
.req.is-you .stt { color: var(--amber); }
.req.is-new { animation: rowin 480ms cubic-bezier(.2,.7,.2,1) both; }

/* Gesprek */
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 330px; }
.msg {
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both;
}
.msg.c { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.msg.a { align-self: flex-end; background: linear-gradient(180deg, #3FC4E0, #0C7A9E); border-bottom-right-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.msg .who { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.msg.c .who { color: var(--dim-2); }
.msg.typing { align-self: flex-end; background: transparent; padding: 4px 0; color: var(--blue-glow); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.msg.typing::after { content: "…"; animation: pulse 1s ease-in-out infinite; }

/* Uitgevraagd */
.fields { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fld { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: #08080b; }
.fld .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-2); margin-bottom: 4px; }
.fld .v { font-size: 12px; color: var(--dim-2); min-height: 16px; }
.fld.on { border-color: rgba(34,197,94,.45); }
.fld.on .v { color: var(--text); }
.fld.on .k::after { content: " ✓"; color: var(--green); }

/* Resultaat */
.rcard { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px; }
.rcard .rh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rcard .rh .nm { font-weight: 600; font-size: 15px; }
.rcard .rh .pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--dim-2); }
.rcard .rh .pill.done { color: var(--green); border-color: rgba(34,197,94,.4); }
.rcard .rh .pill.you { color: var(--amber); border-color: rgba(245,165,36,.4); }
.rcard .rows { display: grid; gap: 6px; }
.rcard .rows div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; font-size: 12px; }
.rcard .rows div span:first-child { color: var(--dim-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.rcard .rows div span:last-child { color: var(--dim); }
.rcard .rows div.on span:last-child { color: var(--text); }
.agents-line { margin-top: 16px; display: grid; gap: 8px; }
.agent-row { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center; font-size: 12px; color: var(--dim); }
.agent-row i { width: 6px; height: 6px; border-radius: 50%; background: #2a2a33; }
.agent-row.on i { background: var(--blue-glow); box-shadow: 0 0 8px var(--blue-glow); animation: pulse 1.4s ease-in-out infinite; }
.agent-row.done i { background: var(--green); }
.agent-row .cnt { font-family: var(--font-mono); font-size: 11px; color: var(--dim-2); }
.you-box { margin-top: 16px; border: 1px solid rgba(245,165,36,.35); border-radius: 10px; padding: 12px 14px; background: rgba(245,165,36,.04); }
.you-box .yh { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.you-box .yq { font-weight: 600; font-size: 13px; line-height: 1.35; }
.you-box .yw { color: var(--dim); font-size: 12px; margin-top: 4px; }
.you-box.idle .yq { color: var(--dim-2); font-weight: 500; }

/* ---------- Console 3: Sales ---------- */
.sa-body { grid-template-columns: 250px 1fr 300px; }
.req.is-off .stt { color: var(--dim); }
.wh { color: var(--dim-2); margin: 0 0 8px; }
* + .wh { margin-top: 16px; }

/* Kwalificatie: vier vragen, groen als beantwoord, open als het tegenhoudt */
.qual { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fld.off { border-color: rgba(245,165,36,.45); }
.fld.off .v { color: var(--text); }
.fld.off .k::after { content: " open"; color: var(--amber); }

/* Offerte: een document dat regel voor regel ontstaat */
.quote { border: 1px solid var(--line); border-radius: 10px; background: #08080b; padding: 12px 14px; min-height: 96px; transition: border-color .3s; }
.quote.on { border-color: rgba(189, 238, 248,.35); }
.quote.off { border-color: rgba(245,165,36,.35); }
.quote .qh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.quote .qh .nr { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quote .pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--dim-2); white-space: nowrap; }
.quote .pill.done { color: var(--green); border-color: rgba(34,197,94,.4); }
.quote .pill.you { color: var(--amber); border-color: rgba(245,165,36,.4); }
.quote .pill.off { color: var(--amber); border-color: rgba(245,165,36,.4); }
.quote .ql { display: grid; gap: 4px; }
.quote .ql div, .quote .qt { display: grid; grid-template-columns: 1fr auto; gap: 12px; font-size: 12px; color: var(--dim-2); }
.quote .ql div.on { color: var(--dim); animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }
.quote .amt { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.quote .qt { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 600; }
.quote .qt.on { color: var(--text); }
.quote .qn { margin-top: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--dim-2); line-height: 1.45; }
.quote.idle .qn { margin-top: 0; }
.quote.off .qn { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; color: var(--dim); }

/* Opvolging: tijdlijn */
.follow { display: grid; gap: 6px; }
.fs { display: grid; grid-template-columns: 78px 10px 1fr; gap: 10px; align-items: center; font-size: 12px; color: var(--dim-2); }
.fs .d { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.fs i { width: 6px; height: 6px; border-radius: 50%; background: #2a2a33; justify-self: center; }
.fs.on { color: var(--dim); animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }
.fs.on .d { color: var(--text); }
.fs.on i { background: var(--blue-glow); box-shadow: 0 0 8px var(--blue-glow); }
.rcard .rh .pill.off { color: var(--amber); border-color: rgba(245,165,36,.4); }

/* ---------- Console 4: Planning ---------- */
.pl-body { grid-template-columns: 230px 1fr 280px; }

/* Rooster: rijen per medewerker, blokken op een tijdlijn */
.roster { border: 1px solid var(--line); border-radius: 10px; background: #08080b; padding: 10px 12px 12px; display: grid; gap: 6px; }
.rs-row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; }
.rs-head { margin-bottom: 2px; }
.rs-head .ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; color: var(--dim-2); }
.rs-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-track { position: relative; height: 26px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 20%); }
.blk {
  position: absolute; top: 3px; bottom: 3px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2);
  padding: 0 6px; font-size: 10px; line-height: 18px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .4s;
}
.blk.new { background: linear-gradient(180deg, rgba(20,20,255,.55), rgba(0,0,200,.55)); border-color: rgba(189, 238, 248,.8); color: var(--text); box-shadow: 0 0 10px rgba(104, 213, 234,.35); animation: rowin 420ms cubic-bezier(.2,.7,.2,1) both; z-index: 2; }
.blk.gap { background: rgba(245,165,36,.06); border: 1px dashed rgba(245,165,36,.7); color: var(--amber); animation: rowin 420ms cubic-bezier(.2,.7,.2,1) both; z-index: 2; }
.blk.gone { opacity: .28; text-decoration: line-through; }
.blk.short { color: transparent; padding: 0; }
.blk.under { display: none; }
.blk.short.gap { background: repeating-linear-gradient(135deg, rgba(245,165,36,.18) 0 3px, transparent 3px 7px); }

/* Ritten */
.routes { display: grid; gap: 6px; }
.rt { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: baseline; font-size: 12px; color: var(--dim-2); }
.rt .who { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt .delta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.rt.on { color: var(--dim); animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }
.rt.on .who { color: var(--text); }
.rt.on.chg .delta { color: var(--blue-glow); }
.rt-note { font-size: 12px; color: var(--dim-2); }
.rt-note.on { color: var(--dim); animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }

/* Herinneringen */
.remind { display: grid; gap: 6px; }
.rm { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 12px; color: var(--dim-2); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; background: var(--surface-2); }
.rm .who { color: var(--dim); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm .ch { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.rm .tx { grid-column: 1 / 3; font-size: 11px; }
.rm.on { animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }
.rm.on .who { color: var(--text); }
.rm.on.ok { border-color: rgba(34,197,94,.35); } .rm.on.ok .tx { color: var(--green); }
.rm.on.no { border-color: rgba(245,165,36,.45); } .rm.on.no .tx { color: var(--amber); }
.rm.on.wait .tx { color: var(--dim); }

/* ---------- Console 5: Back Office ---------- */
.bo-body { grid-template-columns: 250px 1fr 300px; }
.bo-body .fs { grid-template-columns: 84px 10px 1fr; align-items: start; }
.bo-body .fs i { margin-top: 5px; }
.bo-body .fs .t { line-height: 1.35; }
.bo-body .quote .pill.you { color: var(--amber); }

/* ---------- Console 6: Supply ---------- */
.su-body { grid-template-columns: 250px 1fr 300px; }
.su-body .quote + .follow { margin-top: 10px; }
.su-body .fs.warn .d, .su-body .fs.warn .t { color: var(--amber); }
.su-body .fs.warn i { background: var(--amber); box-shadow: 0 0 8px rgba(245,165,36,.6); }
.quote .pill.on { color: var(--blue-glow); border-color: rgba(189, 238, 248,.45); }

/* Voorraad: balk per artikel met minimum-streep */
.stock { display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 10px; background: #08080b; padding: 10px 12px; }
.stk { display: grid; grid-template-columns: 1fr 96px 74px; gap: 10px; align-items: center; font-size: 12px; color: var(--dim-2); }
.stk .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk .bar { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: visible; }
.stk .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--green); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.stk .bar b { position: absolute; top: -3px; bottom: -3px; width: 1px; background: rgba(255,255,255,.45); }
.stk .num { font-family: var(--font-mono); font-size: 11px; text-align: right; white-space: nowrap; }
.stk .num em { font-style: normal; color: var(--dim-2); }
.stk.on { color: var(--dim); }
.stk.on .num { color: var(--text); }
.stk.low .bar i { background: var(--amber); box-shadow: 0 0 8px rgba(245,165,36,.5); }
.stk.low .num { color: var(--amber); }
.stk-note { font-size: 12px; color: var(--dim-2); padding-top: 6px; border-top: 1px solid var(--line); }
.stk-note.on { color: var(--dim); animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }

/* Factuur naast bestelling */
.check { display: grid; gap: 5px; }
.chk { display: grid; grid-template-columns: 1fr 74px 74px 14px; gap: 10px; align-items: center; font-size: 12px; color: var(--dim-2); }
.chk.head { color: var(--dim-2); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.chk .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chk .amt { font-family: var(--font-mono); font-size: 11px; text-align: right; white-space: nowrap; }
.chk .m { text-align: center; font-size: 12px; }
.chk.on { color: var(--dim); animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }
.chk.on.ok .m { color: var(--green); }
.chk.on.no .amt:last-of-type, .chk.on.no .m { color: var(--amber); }
.chk-note { font-size: 12px; color: var(--dim-2); padding-top: 6px; border-top: 1px solid var(--line); }
.chk-note.on { color: var(--green); animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }
.chk-note.on.no { color: var(--amber); }
.check > .chk-note:only-child { border-top: 0; padding-top: 0; color: var(--dim); }

/* ---------- Tabs boven het console: mobiel tot en met kleine laptop ----------
   Naast elkaar (tabs links + drie consolekolommen) past pas vanaf 1366px. */
@media (max-width: 1365px) {
  .dept-layout { grid-template-columns: 1fr; gap: 24px; }
  .dept-tabs { flex-direction: row; overflow-x: auto; border-top: 0; gap: 8px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .dept-tab { grid-template-columns: auto auto; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; font-size: 14px; white-space: nowrap; }
  .dept-tab .agents, .dept-tab .st { display: none !important; }
  .dept-tab.is-active { border-color: var(--blue); padding-left: 14px; background: rgba(104, 213, 234,.14); }
}

/* ---------- Mobiel ---------- */
@media (max-width: 1023px) {
  .cj-body { grid-template-columns: 1fr; }
  .cj-col + .cj-col { border-left: 0; border-top: 1px solid var(--line); }
  .cj-inbox, .sa-pipe, .pl-pipe, .bo-pipe, .su-pipe { display: none; }
  .chk { grid-template-columns: 1fr 66px 66px 14px; }
  .rs-row, .rt { grid-template-columns: 64px 1fr auto; }
  .rs-row { grid-template-columns: 64px 1fr; }
  .fields, .qual { grid-template-columns: repeat(2, 1fr); }
  .dept-soon .cards { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .dept-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dept-head h3 { font-size: 24px; }
  .cj-col { padding: 14px; }
  .msg { max-width: 92%; }
  .dept-soon { padding: 20px; min-height: 0; }
}

/* ---------- Console 7: Growth ---------- */
.gr-body { grid-template-columns: 250px 1fr 300px; }
.req.is-wait .stt { color: var(--blue-glow); }
.rcard .rh .pill.wait { color: var(--blue-glow); border-color: rgba(189, 238, 248,.45); }

/* Bron: chips uit de andere afdelingen */
.chips { display: grid; gap: 6px; }
.chip { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline; font-size: 12px; color: var(--dim-2); }
.chip .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.chip .v { min-width: 0; line-height: 1.35; }
.chip.on { color: var(--dim); animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }
.chip.on .k { color: var(--blue-glow); }

/* Campagne: cijfers naast aanvragen */
.camp[hidden] { display: none; }
.camp { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: #08080b; padding: 10px 12px; display: grid; gap: 5px; }
.cr { display: grid; grid-template-columns: minmax(0, 1fr) 30px 46px 58px 58px 12px; gap: 6px; align-items: center; font-size: 12px; color: var(--dim-2); }
.cr.head { padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .04em; }
.cr .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr .m { font-family: var(--font-mono); font-size: 11px; text-align: right; white-space: nowrap; }
.cr .tr { text-align: center; }
.cr.on { color: var(--dim); animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }
.cr.on .m { color: var(--text); }
.cr.on.ok .tr { color: var(--green); }
.cr.on.down .d, .cr.on.down .tr, .cr.on.down .m { color: var(--amber); }

/* Render-stage: canvas links, lagen en merkpoort rechts */
.gr-stage { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 16px; align-items: start; }
.gr-stage.wide { grid-template-columns: 1fr; }
.gr-stage.wide .side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-auto-flow: column; gap: 0 16px; margin-top: 16px; }
.gr-stage.wide .side .wh { margin-top: 0; }
.canvas { min-width: 0; }
.canvas.static .ad, .canvas.review .ad { width: 100%; max-width: 250px; }
.canvas.campaign .ad { width: 100%; max-width: 168px; }
.side { min-width: 0; }
.side .wh:first-child { margin-top: 0; }
.layers, .gates { display: grid; gap: 5px; }
.lr, .gt { display: grid; grid-template-columns: 10px 1fr; gap: 8px; align-items: start; font-size: 12px; line-height: 1.35; color: var(--dim-2); }
.lr i, .gt i { width: 6px; height: 6px; border-radius: 50%; background: #2a2a33; margin-top: 5px; }
.lr.on { color: var(--dim); animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }
.lr.on i { background: var(--blue-glow); box-shadow: 0 0 8px var(--blue-glow); }
.gt.on { color: var(--dim); animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }
.gt.on i { background: var(--green); }

/* Formaten: dezelfde copy in elk formaat, uit dezelfde bron */
.fmts { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.fmt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; flex: none; min-width: 0; }
.fmt[data-f="1x1"] { width: 84px; } .fmt[data-f="4x5"] { width: 76px; } .fmt[data-f="9x16"] { width: 60px; }
.fmt .ad { width: 100%; border-radius: 3px; }
.fmt .ph { width: 100%; aspect-ratio: 4 / 5; border: 1px dashed var(--line); border-radius: 3px; }
.fmt[data-f="1x1"] .ph { aspect-ratio: 1; } .fmt[data-f="9x16"] .ph { aspect-ratio: 9 / 16; }
.fmt .fl { font-family: var(--font-mono); font-size: 9px; line-height: 1.35; letter-spacing: .04em; color: var(--dim-2); }
.fmt.on { animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }
.fmt.on .fl { color: var(--dim); }
.fmt-note { align-self: center; font-size: 12px; color: var(--dim-2); }
.fmt-note.on { color: var(--green); animation: rowin 360ms cubic-bezier(.2,.7,.2,1) both; }
.fmts > .fmt-note:only-child { color: var(--dim-2); }

/* Wachtrij: klaar voor jou */
.queue { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.queue .card { min-width: 0; }
.queue .card .cd { min-width: 0; }
.queue .card .cd .n { color: var(--blue-glow); white-space: nowrap; flex: none; }
.queue .card .cd .dept { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-body .rcard .rh .pill { white-space: nowrap; }
.queue .card.is-hold .acts { display: none; }
.queue .card.is-hold { border-color: rgba(245,165,36,.4); }
.queue .card.is-hold .why { color: var(--amber); }

/* ---------- De creative zelf: één stylesheet, elk formaat, tokens per klant via custom properties ---------- */
.ad {
  position: relative; overflow: hidden; container-type: inline-size;
  width: 100%; aspect-ratio: 4 / 5;
  background: var(--abg); color: var(--aink);
  font-family: var(--font-body); border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
}
.ad[data-fmt="1x1"] { aspect-ratio: 1; }
.ad[data-fmt="9x16"] { aspect-ratio: 9 / 16; }
.ad .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0; filter: blur(8px) saturate(.6); transform: scale(1.04); transition: opacity .7s ease, filter .7s ease, transform .9s ease; }
.ad .bg.on { opacity: 1; filter: none; transform: none; }
.ad .ov { position: absolute; inset: 0; background:
  linear-gradient(to bottom, color-mix(in srgb, var(--abg) 62%, transparent) 0%, color-mix(in srgb, var(--abg) 30%, transparent) 16%, transparent 32%),
  linear-gradient(to top, var(--abg) 0%, color-mix(in srgb, var(--abg) 78%, transparent) 34%, color-mix(in srgb, var(--abg) 20%, transparent) 62%, transparent 85%); }
.ad .logo { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ad .lay { position: absolute; inset: 0; padding: 7cqw; display: flex; flex-direction: column; justify-content: flex-end; gap: 2.4cqw; }
.ad[data-fmt="9x16"] .lay { padding-bottom: 16cqw; }
.ad .el { opacity: 0; transform: translateY(1.6cqw); transition: opacity .45s ease, transform .45s ease; }
.ad .el.on { opacity: 1; transform: none; }
.ad .tag { font-family: var(--font-mono); font-size: 3.1cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--aacc); }
.ad .kop { font-family: var(--font-display); font-weight: 800; font-size: 10.4cqw; line-height: .96; letter-spacing: -.02em; white-space: pre-line; font-variation-settings: "wdth" var(--awdth, 110); text-wrap: balance; }
.ad[data-fmt="9x16"] .kop { font-size: 11cqw; }
.ad .regel { font-size: 3.9cqw; line-height: 1.35; max-width: 90%; color: color-mix(in srgb, var(--aink) 82%, transparent); }
.ad .knop { align-self: flex-start; margin-top: 1.2cqw; padding: 3cqw 5cqw; border-radius: 1.6cqw; background: var(--aacc); color: var(--abg); font-weight: 700; font-size: 3.7cqw; letter-spacing: .01em; }
.ad .logo { position: absolute; top: 6cqw; left: 7cqw; z-index: 2; font-family: var(--font-display); font-weight: 800; font-size: 4.4cqw; line-height: 1; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "wdth" 125; }
.ad .logo small { display: block; margin-top: .9cqw; font-family: var(--font-mono); font-weight: 500; font-size: 2.3cqw; letter-spacing: .16em; color: var(--aacc); }
.ad .cnt, .ad .tc { position: absolute; top: 5cqw; right: 6cqw; z-index: 2; font-family: var(--font-mono); font-size: 3cqw; letter-spacing: .08em; color: color-mix(in srgb, var(--aink) 70%, transparent); }
.ad .tc { right: auto; left: 7cqw; }

/* Review-post: typografisch, cream vlak, citaat in serif */
.ad.review .lay { justify-content: center; gap: 3cqw; padding: 9cqw 8cqw; }
.ad.review .kicker { font-family: var(--font-mono); font-size: 3cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--aacc); }
.ad.review .stars { font-size: 6.4cqw; letter-spacing: .12em; color: var(--aacc); line-height: 1; }
.ad.review .rq { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; font-size: 8.2cqw; line-height: 1.16; letter-spacing: -.01em; text-wrap: balance; }
.ad.review .who { display: flex; gap: 2.6cqw; align-items: baseline; font-size: 3.6cqw; color: color-mix(in srgb, var(--aink) 70%, transparent); }
.ad.review .who b { color: var(--aink); font-weight: 600; }
.ad.review .who span::before { content: "·"; margin-right: 2.6cqw; }
.ad.review .logo { color: var(--aink); }
.ad.review .logo small { color: var(--aacc); }

/* Carrousel: drie slides, dots */
.slides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ad.nums .lay { justify-content: center; gap: 4.2cqw; padding: 9cqw; }
.ad.nums .nrow { display: grid; gap: .8cqw; padding-bottom: 3cqw; border-bottom: 1px solid color-mix(in srgb, var(--aink) 16%, transparent); }
.ad.nums .nrow:last-child { border-bottom: 0; padding-bottom: 0; }
.ad.nums .nrow b { font-family: var(--font-display); font-weight: 800; font-size: 13cqw; line-height: .95; letter-spacing: -.02em; color: var(--aacc); font-variation-settings: "wdth" var(--awdth, 110); }
.ad.nums .nrow span { font-size: 3.8cqw; color: color-mix(in srgb, var(--aink) 78%, transparent); }
.ad.ctaslide .lay { justify-content: center; padding-top: 18cqw; }
.sdots { display: flex; gap: 5px; justify-content: center; margin-top: 8px; }
.sdots i { width: 5px; height: 5px; border-radius: 50%; background: #2a2a33; transition: background .3s; }
.sdots i.on { background: var(--blue-glow); box-shadow: 0 0 6px var(--blue-glow); }

/* Reel: drie frames, ondertitel ingebrand, tijdlijn */
.frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.frames .ad .lay { padding: 0 6cqw 14cqw; align-items: center; }
.frames .ad .cap { display: inline-block; padding: 2.6cqw 4cqw; border-radius: 2cqw; background: rgba(0,0,0,.62); color: #fff; font-weight: 600; font-size: 5.2cqw; line-height: 1.25; text-align: center; text-wrap: balance; }
.ad.endcard .lay { justify-content: center; gap: 4cqw; padding-bottom: 0; }
.ad.endcard .logo { position: static; text-align: center; font-size: 9cqw; }
.ad.endcard .logo small { font-size: 3.4cqw; }
.ad.endcard .cap { background: transparent; color: var(--aink); font-size: 5.6cqw; padding: 0; }
.ad.endcard .knop { align-self: center; font-size: 4.6cqw; padding: 3.4cqw 6cqw; }
.tl { display: grid; grid-template-columns: 4fr 7fr 3fr; gap: 3px; margin-top: 8px; height: 4px; }
.tl i { border-radius: 2px; background: #1d1d26; transition: background .3s; }
.tl i.on { background: var(--blue); box-shadow: 0 0 6px rgba(104, 213, 234,.6); }

/* Growth op mobiel: één kolom, canvas over de volle breedte */
@media (max-width: 1023px) {
  .gr-body { grid-template-columns: 1fr; }
  .gr-pipe { display: none; }
  .gr-stage { grid-template-columns: 1fr; }
  .canvas.static .ad, .canvas.review .ad { max-width: 300px; }
  .canvas.campaign .ad { max-width: 200px; }
  .cr { grid-template-columns: minmax(0, 1fr) 46px 56px 56px 12px; gap: 6px; }
  .cr span:nth-child(2) { display: none; }
}

/* ---------- Tussenmaat (1024–1439): de middenkolom houdt minstens de desktopbreedte ----------
   Vaste zijkolommen lieten tussen 1024 en 1440 te weinig over voor het midden (37px op 1024).
   De zijkolommen groeien hier mee met het scherm en komen op 1440 exact uit op de desktopmaten
   (tabs 300, kolommen 250/300, planning 230/280). Vanaf 1440 geldt dit blok niet. */
@media (min-width: 1024px) and (max-width: 1365px) {
  /* Tabs staan boven, het console heeft de volle breedte: zijkolommen 200/240 op 1024, vanaf 1200 de desktopmaten. */
  .cj-body { grid-template-columns: min(250px, calc(200px + (100vw - 1024px) * .284)) 1fr min(300px, calc(240px + (100vw - 1024px) * .341)); }
  .pl-body { grid-template-columns: min(230px, calc(184px + (100vw - 1024px) * .261)) 1fr min(280px, calc(224px + (100vw - 1024px) * .318)); }
  /* Growth: de postkaart rechts (pil + knoppen op één regel) heeft de volle 300px nodig. */
  .gr-body { grid-template-columns: min(250px, calc(200px + (100vw - 1024px) * .284)) 1fr 300px; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  /* Zeven tabs op één rij zonder schuiven. */
  .dept-tabs { gap: 6px; }
  .dept-tab { padding: 10px; }
}
@media (min-width: 1366px) and (max-width: 1439px) {
  /* Tabs links: alles krimpt een fractie mee, op 1440 is de krimp nul. */
  .dept-layout { grid-template-columns: calc(300px - (1440px - 100vw) * .3125) 1fr; gap: calc(32px - (1440px - 100vw) * .05); }
  .cj-body { grid-template-columns: calc(250px - (1440px - 100vw) * .3125) 1fr calc(300px - (1440px - 100vw) * .375); }
  .pl-body { grid-template-columns: calc(230px - (1440px - 100vw) * .2875) 1fr calc(280px - (1440px - 100vw) * .35); }
  .gr-body { grid-template-columns: calc(250px - (1440px - 100vw) * .3125) 1fr 300px; }
}

/* ---------- Proef: typ je bedrijf, zie je post (proef.js; hergebruikt .ad hierboven) ---------- */
.proef .section-lead { margin-bottom: 32px; }
.proef-form { display: flex; gap: 10px; max-width: 640px; }
.proef-form input { flex: 1; min-width: 0; padding: 16px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 17px/1.2 var(--font-body); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.proef-form input:focus { border-color: var(--blue-glow); box-shadow: 0 0 0 3px rgba(189, 238, 248,.22); }
.proef-form input::placeholder { color: var(--dim-2); }
.proef-form button { padding: 16px 22px; border-radius: 10px; border: 0; background: var(--blue); color: #fff; font: 700 16px/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.proef-form button:hover { background: var(--blue-glow); }
.proef-branches { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.proef-branches button { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--dim); font: 500 13px/1 var(--font-body); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.proef-branches button:hover { color: var(--text); border-color: var(--dim-2); }
.proef-branches button[aria-pressed="true"] { color: #fff; background: var(--blue); border-color: var(--blue); }
.proef-form { margin-bottom: 40px; }
.proef-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: end; }
.proef-out figure { margin: 0; min-width: 0; }
.proef-out .ad { border-radius: 10px; }
.proef-out figcaption { margin-top: 10px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim-2); }
.proef-meta { margin: 22px 0 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-glow); }
.proef-note { margin: 10px 0 0; max-width: 560px; font-size: 14px; line-height: 1.5; color: var(--dim-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) {
  .proef-form { flex-direction: column; }
  .proef-out { grid-template-columns: 1fr 1fr; }
  .proef-out figure:last-child { grid-column: 1 / -1; max-width: 62%; }
}

/* ---------- Cinematic: Trapwise HQ (video uit de elementbibliotheek) ---------- */
.cine .section-lead { margin-bottom: 40px; }
.cine-frame { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.cine-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cine-cap { position: absolute; left: 18px; bottom: 14px; padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,.55); color: var(--dim); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 767px) { .cine-frame { border-radius: 8px; } .cine-cap { left: 10px; bottom: 8px; font-size: 10px; } }