/* Vandaag v4 — post, te doen, bellen; rechts agenda en aandacht. Alleen tokens uit style.css. */
.vd{gap:22px;padding-top:22px}

/* kop, snelle invoer, ongedaan maken */
.vd-kop{display:flex;gap:4px 14px;align-items:baseline;flex-wrap:wrap}
.vd-titel{font-size:26px;line-height:1.2;letter-spacing:-.02em}
.vd-datum{color:var(--muted);font-size:14px}
.vd-invoer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;max-width:900px}
.vd-invoer label{font-size:13px;color:var(--muted)}
.vd-ongedaan{margin:0;font-size:14px;color:var(--ink)}
.vd-ongedaan .lnk{margin-left:4px}
.vd-regel{margin:0;font-size:14px}

/* uitklapdelen */
.vd-script>summary,.vd-act>summary{cursor:pointer;color:var(--muted);font-size:13px;width:max-content;list-style:none;display:inline-flex;gap:6px;align-items:center}
.vd-script>summary::-webkit-details-marker,.vd-act>summary::-webkit-details-marker{display:none}
.vd-script>summary::before,.vd-act>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-right:2px}
.vd-script[open]>summary::before,.vd-act[open]>summary::before{transform:rotate(45deg)}
.vd-script>summary:hover,.vd-act>summary:hover{color:var(--head)}

/* post: kopregels, vlak (lezen); acties klein rechts */
.vd-kop-rechts{display:inline-flex;gap:14px;align-items:baseline;font-size:13px}
.vd-post{list-style:none;margin:0;padding:0}
.vd-mail{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:10px 0;border-top:1px solid var(--line-soft)}
.vd-mail:first-child{border-top:0}
.vd-mail-hoofd{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:12px;color:var(--ink);min-width:0}
.vd-mail-hoofd:hover .vd-mail-ond{color:var(--head)}
.vd-mail-van,.vd-mail-ond{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-mail.ongelezen .vd-mail-van,.vd-mail.ongelezen .vd-mail-ond{color:var(--head);font-weight:600}
.vd-mail-sub{grid-column:1;display:flex;gap:4px 12px;flex-wrap:wrap;font-size:12.5px;padding-left:212px}
.vd-mail-acties{grid-column:2;grid-row:1/span 2;display:flex;gap:6px;align-items:center}
.vd-mail-extra{grid-column:1/-1}
.vd-mail-extra:empty{display:none}

/* taak bewerken (overdracht) */
.taak-bewerk{display:grid;grid-template-columns:minmax(0,2fr) auto auto minmax(0,1.4fr);gap:8px;width:100%;grid-column:1/-1;align-items:center}
.taak-bewerk .acties{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}
.item .sub .wacht{color:var(--warn)}

/* onderste deel */
.vd-onderste{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
@media (max-width:1000px){.vd-onderste{grid-template-columns:minmax(0,1fr)}}
.vd-hoofd{display:grid;gap:32px;min-width:0}
.vd-sec{min-width:0}
.vd-sec-kop{display:grid;gap:2px;margin-bottom:10px}
.vd-sec-kop.rij{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.vd-sec-kop h2{font-size:16px;line-height:1.35}
.vd-sec-kop p{margin:0;font-size:13.5px}

/* bellen: de eerste op een vlak (de handeling), de rest als tabel; uitkomst direct op de kaart */
.vd-bel-sub{margin:-6px 0 10px;font-size:13.5px}
.vd-uitkomst{display:flex;gap:8px;flex-wrap:wrap}
.vd-uitkomst-vak:empty{display:none}
.vd-snel{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.vd-snel label{display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.vd-eerste{background:var(--panel);border-radius:var(--r-kaart);padding:16px 18px;display:grid;gap:12px}
.vd-e-naam{font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
.vd-e-naam a{color:var(--head)}
.vd-e-acties{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vd-e-acties .btn{min-height:38px}
.vd-bel .num{font-size:15px;letter-spacing:.01em}
.vd-e-info{display:grid;gap:2px}
.vd-e-info p{margin:0;font-size:14px}
.vd-e-info p.muted{font-size:13px}
.vd-e-info p:empty{display:none}
.vd-script-tekst{display:flex;gap:8px;align-items:flex-start;margin-top:8px}
.vd-script-tekst p{margin:0;font-size:14px;line-height:1.6;color:var(--head);max-width:72ch;flex:1 1 auto}

.vd-rest{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.vd-rest th{font-weight:500;font-size:12.5px;color:var(--muted);text-align:left;padding:0 10px 6px 0}
.vd-rest td{padding:9px 10px 9px 0;border-top:1px solid var(--line-soft);vertical-align:middle}
.vd-rest .nr{width:32px;color:var(--muted);text-align:right;padding-right:14px}
.vd-rest td.bedrijf{font-weight:600;width:34%}
.vd-rest td.bedrijf a{color:var(--head)}
.vd-rest td.stap{color:var(--ink)}
.vd-rest td.nummer{white-space:nowrap;text-align:right;padding-right:0}
.vd-rest th:last-child{text-align:right;padding-right:44px}
.vd-r-tel{display:inline-flex;gap:6px;align-items:center;color:var(--ink)}
.vd-r-tel .ic{width:16px;height:16px;color:var(--muted)}
.vd-rest .icbtn{vertical-align:middle}

@media (max-width:640px){
  .vd{gap:16px;padding-top:14px}
  .vd-script>summary,.vd-act>summary{min-height:44px}
  .vd-invoer{grid-template-columns:minmax(0,1fr) auto}
  .vd-invoer label{grid-column:1/-1}
  .vd-invoer .in{font-size:16px}
  .vd-mail{grid-template-columns:minmax(0,1fr)}
  .vd-mail-hoofd{grid-template-columns:minmax(0,1fr)}
  .vd-mail-sub{padding-left:0}
  .vd-mail-acties{grid-column:1;grid-row:auto}
  .vd-mail-acties .btn,.vd-uitkomst .btn{min-height:44px}
  .taak-bewerk{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .taak-bewerk>.in:first-child,.taak-bewerk>.in:nth-child(4){grid-column:1/-1}
  .vd-eerste{padding:14px}
  .vd-e-acties .btn{min-height:44px}
  .vd-e-acties .vd-bel{flex:1 1 auto;justify-content:center}
  .vd-rest thead{display:none}
  .vd-rest tr{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:0 10px;border-top:1px solid var(--line-soft);padding:8px 0}
  .vd-rest td{border:0;padding:0}
  .vd-rest .nr{grid-row:1;padding:0;text-align:left}
  .vd-rest td.bedrijf{grid-column:2;width:auto}
  .vd-rest td.stap{grid-column:2;font-size:13px;color:var(--muted)}
  .vd-rest td.nummer{grid-column:3;grid-row:1/span 2;align-self:center}
  .vd-r-tel{min-height:44px}
  .vd-rest td.nummer .icbtn{display:none}
}

/* te doen */
.vd-todo .items .item{padding:9px 0}
.vd-geen-cb{width:16px}

/* rechterkolom */
.vd-rail{display:grid;gap:0;min-width:0}
.vd-rail-sec{padding:14px 0;border-top:1px solid var(--line-soft);display:grid;gap:8px;font-size:13.5px}
.vd-rail>:first-child{border-top:0;padding-top:4px}
.vd-rail-kop{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.vd-rail-kop h3{font-size:14px;line-height:1.35}
.vd-rail-kop .lnk{font-size:13px}
.vd-rail-sec p{margin:0}
.vd-rail-regel{margin:0;padding:14px 0;border-top:1px solid var(--line-soft);font-size:13.5px}
.vd-act>summary{font-size:14px;color:var(--head);font-weight:600}
.vd-mini{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.vd-mini li{min-width:0;overflow-wrap:anywhere;display:grid;gap:1px}
.vd-mini a{color:var(--ink)}
.vd-mini a:hover{color:var(--head)}
.vd-mini a.warn-t{color:var(--warn)}
.vd-mini b{font-weight:600;color:var(--head)}
.vd-mini li>span.muted{font-size:12.5px}
.vd-mini.act li{grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start}

/* Eén invoeractie (Codex-review 3): voorbeelden als optionele hulp, "Nieuwe taak" ingeklapt */
.vd-invoer-onder{grid-column:2/-1;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;margin-top:-4px}
.vd-hulp summary{cursor:pointer;color:var(--muted)}
.vd-hulp ul{margin:6px 0 4px;padding-left:18px;display:grid;gap:2px}
.vd-hulp code{font-size:12.5px;color:var(--ink)}
.vd-hulp p{margin:0;max-width:60ch}
.vd-nieuw{font-size:12.5px}
.vd-taakform{max-width:900px;display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.vd-taakform>form{flex:1 1 auto;margin-top:0}
@media (max-width:640px){.vd-invoer-onder{grid-column:1/-1}}