/* Vandaag (dayplan.html), sinds 27 oktober 2026 simpel: datum met één standregel, een storingsregel als er iets kapot is,
   Nu (het ene ding van nu), Je dag als rustige lijst, Te doen, op maandag de terugblik en vanaf 16:00 Dag afsluiten.
   Eén kolom van hooguit 760 breed. Bouwt op core.css; alleen wat daar niet staat.
   De volledige stand (.stand) staat op Cijfers maar houdt zijn opmaak hier. Vandaag toont ook stukken van andere
   onderdelen: projecten en tickets (werk.css) en de kans (core.css); hier staat alleen hoe ze in Je dag staan. */

/* ---------- Eén kolom: Vandaag leest van boven naar beneden, op de laptop niet breder dan een rustige leesregel ---------- */
.today-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 760px; }
.today-page > * { margin: 0; }
.today-head { margin-bottom: 16px; }

/* De stand in één dunne regel onder de datum; de volledige stand staat op Cijfers */
.today-stand { margin-top: 4px; font-size: 15px; color: var(--mute); }
.today-stand > .num { color: var(--ink); font-weight: 600; }
.today-stand a { font-weight: 500; }
@media (max-width: 760px) { .today-stand a { display: inline-block; padding: 10px 0; margin: -10px 0; } }

/* Storing: één kleine regel boven Nu, alleen als er echt iets kapot is */
.today-fault { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 15px; color: var(--charcoal); }
.today-fault .status-dot { flex: none; background: var(--accent-danger); transform: translateY(-1px); }
.today-fault strong { color: var(--ink); font-weight: 600; }

/* ---------- Nu: het ene ding van nu, met één zwarte knop. Een inkt-rand onderscheidt hem van de rest (geen vulling) ---------- */
.now-card { border-color: var(--hairline-strong); }
.now-card .eyebrow { margin-bottom: 8px; }
.now-title { font: 500 24px/1.25 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.now-title a { color: inherit; text-decoration: none; }
.now-title a:hover { text-decoration: underline; }
.now-meta { margin-top: 4px; font-size: 15px; color: var(--mute); }
.now-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 16px; }
.now-actions form { margin: 0; }
.now-actions > a:not(.btn) { font-size: 15px; font-weight: 500; }
.now-card[data-kind="done"] .now-title { font-size: 20px; color: var(--charcoal); }
@media (max-width: 760px) {
  .now-title { font-size: 20px; }
  .now-actions { gap: 8px 16px; }
  .now-actions > .btn, .now-actions > form { flex: 1 1 100%; }
  .now-actions > form .btn { width: 100%; }
  .now-actions > a:not(.btn) { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ---------- De stand. De indeling hangt af van de breedte van de kaart (container "stand"):
   breed: jaar, week, maand en Cijfers op één regel, de schema-chips eronder;
   middel (naast Belangrijk deze week): jaar, week en maand, eronder de chips en Cijfers;
   smal (iPhone): twee kolommen, Cijfers rechtsboven ---------- */
.stand { container: stand / inline-size; padding: 16px var(--card-pad); }
.stand-grid { position: relative; display: grid; grid-template-columns: minmax(176px, max-content) max-content minmax(0, 1fr) max-content;
  grid-template-areas: "year week month link" "chips chips chips chips"; align-items: start; gap: 12px 32px; } /* start: de labels op één lijn */
.stand-item { min-width: 0; margin: 0; }
.stand-year { grid-area: year; }
.stand-week { grid-area: week; }
.stand-month { grid-area: month; }
.stand-label { font-size: 14px; color: var(--mute); }
.stand-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 15px; color: var(--mute); white-space: nowrap; }
.stand-value strong { font: 500 20px/1.3 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.stand-value .plan-state { font-size: 15px; }
.stand-bar { display: block; height: 6px; margin-top: 8px; border-radius: var(--r-full); background: var(--surface-soft); overflow: hidden; }
.stand-bar span { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: var(--ink); transform-origin: left center; animation: bar-grow .6s var(--ease) both; }
.stand-bar[data-state="good"] span { background: var(--accent-teal); }
.stand-bar[data-state="warn"] span { background: var(--accent-warn); }
.stand-bar[data-state="bad"] span { background: var(--accent-danger); }
/* de twee chips zijn samen één link naar de route */
.stand-chips { grid-area: chips; align-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-self: start; text-decoration: none; }
.stand-chips:hover .schedule-chip { box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.stand-link { grid-area: link; align-self: center; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; font-size: 15px; font-weight: 500; white-space: nowrap; }
@container stand (max-width: 859px) {
  .stand-grid { grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(0, 1fr); grid-template-areas: "year week month" "chips chips link"; gap: 12px 24px; }
  .stand-link { justify-self: end; }
}
@container stand (max-width: 599px) {
  .stand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "year year" "chips chips" "week month"; align-items: start; gap: 12px; }
  .stand-chips { gap: 4px 8px; min-height: 40px; }
  .stand-chips .schedule-chip { height: auto; padding: 0; background: none; font-size: 14px; }
  .stand-chips:hover .schedule-chip { box-shadow: none; text-decoration: underline; }
  .stand-link { position: absolute; top: -8px; right: 0; }
  .stand-value { white-space: normal; }
}

/* Op Cijfers staan het jaar en de chips al in de reis erboven: daar alleen week en maand */
.stand-grid.on-cijfers { grid-template-columns: repeat(2, minmax(0, max-content)); grid-template-areas: "week month"; gap: 12px 48px; }
@container stand (max-width: 599px) { .stand-grid.on-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "week month"; } }

/* Systeemmeldingen zonder knop: één regel onderin de stand, de uitleg achter Bekijken */
.today-alert { font-size: 15px; color: var(--charcoal); }
.stand > .stand-grid + .today-alert { margin-top: 12px; border-top: 1px solid var(--hairline-light); }
.today-alert > summary { display: flex; align-items: baseline; gap: 12px; min-height: 40px; padding: 8px 0; list-style: none; }
.stand > .stand-grid + .today-alert > summary { padding-bottom: 0; } /* de kaart heeft onderin al 16 */
.today-alert .status-dot { background: var(--accent-warn); transform: translateY(-1px); }
.today-alert strong { color: var(--ink); font-weight: 600; }
.today-alert-items > span + span::before { content: " · "; }
.today-alert-toggle { margin-left: 4px; color: var(--mute); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; white-space: nowrap; }
.today-alert[open] .today-alert-toggle { display: none; }
.today-alert-list { display: grid; gap: 8px; max-width: 72ch; margin: 0; padding: 8px 0 0 20px; list-style: none; } /* 20px = stip 8 + tussenruimte 12: gelijk met de tekst erboven */

/* ---------- Weekterugblik (alleen maandag) en Belangrijk deze week, onder Te doen ---------- */
.today-recap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 16px var(--card-pad); }
.today-recap-head .eyebrow { margin-bottom: 4px; }
.today-recap-seen { margin: 0; }
.today-recap > .week-facts, .today-recap > .goal-line { grid-column: 1 / -1; }
.today-recap .week-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 12px 0 0; }
.today-recap .week-facts dt { font-size: 14px; color: var(--mute); }
.today-recap .week-facts dd { margin: 0; }
.today-recap .week-facts dd.num { font: 500 20px/1.3 var(--font-display); color: var(--ink); }
.today-recap .week-fact-note { font-size: 14px; }
.today-recap .goal-line { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline-light); font-size: 15px; color: var(--charcoal); }
.today-recap .goal-line strong { color: var(--ink); font-weight: 600; }

.today-focus { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 16px var(--card-pad); }
.today-focus > h2:first-child, .today-focus > h2 + * { margin: 0; } /* wint van .panel > h2 in core */
.today-focus-title { font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.today-focus-list { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; counter-reset: focus; }
.today-focus-list li { display: flex; align-items: baseline; gap: 8px; counter-increment: focus; }
.today-focus-list li::before { content: counter(focus); display: inline-grid; place-items: center; flex: none; min-width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--tint-cobalt); color: var(--primary); font: 600 13px/1 var(--font-body); transform: translateY(-1px); }

/* Te doen: per regel de tekst en daaronder de knoppen. Op Vandaag drie regels open, de rest achter "Nog N tonen". */
.todo-panel h2 .count { margin-left: 4px; vertical-align: 2px; }
.todo-panel .tile-title + .todo-list { margin-top: 16px; }
.todo-list li { flex-direction: column; align-items: stretch; gap: 8px; }
.todo-text { min-width: 0; }
.todo-list .followup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.todo-list .followup-actions form { margin: 0; }
.todo-list .followup-actions .link { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; color: var(--charcoal); }
.todo-rest { border-top: 1px solid var(--hairline-light); }
.todo-show { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-top: 4px; font-size: 15px; font-weight: 500; color: var(--ink); }
.todo-show .icon-inline { margin: 0; transition: transform .18s var(--ease); }
.todo-rest[open] > .todo-show .icon-inline { transform: rotate(180deg); }
.todo-rest[open] .todo-show-closed, .todo-rest:not([open]) .todo-show-open { display: none; }
.todo-rest > .todo-list > li:first-child { padding-top: 12px; border-top: 1px solid var(--hairline-light); }
.todo-more { margin-top: 12px; }
@media (max-width: 760px) {
  .todo-text > a { display: inline-block; padding: 8px 0; margin: -8px 0; } /* tikvlak van 40px zonder dat de regel hoger wordt */
}

/* ---------- Je dag: een rustige lijst, per regel tijd en titel. Wat nu loopt heeft een cobalt stip en staat open,
   wat voorbij is staat gedempt. Een tik op een regel klapt de inhoud uit (details); de regel zelf heeft geen knoppen. ---------- */
.timeline-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 12px; }
.timeline-head h2 { font-size: 20px; }
.timeline-agenda { margin: 0 0 12px; font-size: 15px; color: var(--mute); }
.timeline-agenda a { font-weight: 500; }
.timeline-progress { font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; }
.plan-save { margin-left: 8px; font-size: 14px; color: var(--mute); }
.plan-save[data-error="true"] { color: var(--accent-danger); font-weight: 500; }
.timeline-allday { margin: 0 0 12px; font-size: 15px; color: var(--charcoal); }
.timeline-late { margin-top: 12px; }
.day-timeline > .timeline { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hairline-light); border-radius: var(--r-xl); background: var(--surface-card); overflow: hidden; }
.day-row + .day-row { border-top: 1px solid var(--hairline-light); }
.day-sum { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 20px 8px 36px; }
.day-sum::before { content: ""; position: absolute; left: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--faint); }
details.day-item > summary.day-sum { list-style: none; cursor: pointer; }
details.day-item > summary.day-sum:hover .day-title { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
div.day-sum { grid-template-columns: 112px minmax(0, 1fr); }
.day-time { font-size: 15px; color: var(--mute); white-space: nowrap; }
.day-title { min-width: 0; font: 500 16px/1.35 var(--font-body); color: var(--ink); overflow-wrap: anywhere; }
.day-title .tint-pill { margin-left: 6px; height: 22px; vertical-align: 1px; }
.day-sum .plan-block-count { grid-column: 3; justify-self: end; }
.day-sum .plan-chevron { grid-column: 4; }
.day-row.is-now { background: var(--surface-card); box-shadow: inset 3px 0 0 var(--primary); }
.day-row.is-now > * > .day-sum::before, .day-row.is-now > .day-sum::before { background: var(--primary); box-shadow: 0 0 0 4px var(--tint-cobalt); }
.day-row.is-now .day-time { color: var(--primary); font-weight: 600; }
.day-row.is-past .day-time, .day-row.is-past .day-title { color: var(--mute); font-weight: 400; } /* gedempt, maar nog leesbaar (AA) */
.day-row.is-past .plan-block-count { opacity: .7; }
.day-row.is-late:not(.is-past) .day-time { color: var(--sys-warn-ink); }
.day-body { padding: 0 20px 20px 36px; }
.day-body > :first-child { margin-top: 0; }
.day-body > .meta + .meta { margin-top: 4px; }
.tl-work .project-issues { gap: 8px; margin-top: 12px; }
.tl-admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl-admin-list a { color: var(--ink); font-weight: 500; }
.tl-content .content-today { margin-bottom: 0; padding: 16px; } /* de contenttaak (content.css) als regel in Je dag */
@media (max-width: 620px) {
  .day-sum { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "time count chev" "title title title"; gap: 2px 12px; padding: 10px 16px 10px 32px; }
  div.day-sum { grid-template-columns: minmax(0, 1fr); grid-template-areas: "time" "title"; }
  .day-sum::before { left: 14px; top: 21px; margin-top: 0; }
  .day-time { grid-area: time; font-size: 14px; }
  .day-title { grid-area: title; }
  .day-sum .plan-block-count { grid-area: count; grid-column: auto; }
  .day-sum .plan-chevron { grid-area: chev; grid-column: auto; }
  .day-body { padding: 0 16px 16px 32px; }
}

/* ---------- Salesblok als regel in Je dag (_plan_block.html): uitgeklapt de vinkjes, Vandaag benaderen en de velden ---------- */
.plan-block-count[data-complete="true"] { border-color: var(--accent-teal); color: var(--sys-teal-ink); }
.plan-block:has(.plan-block-count[data-complete="true"]) .day-title { color: var(--mute); }
.plan-block > .day-body > :last-child { margin-bottom: 0; }
.plan-theme { padding: 12px 16px; border-radius: var(--r-lg); background: var(--tint-cobalt); font-size: 15px; font-weight: 500; }
.plan-theme .plan-links { display: flex; margin-top: 4px; }
.plan-items { list-style: none; margin: 4px 0 0; padding: 0; }
.plan-items li { border-top: 1px solid var(--hairline-light); }
.plan-items li:first-child { border-top: 0; }
.plan-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; min-height: 44px; font-size: 16px; cursor: pointer; }
.plan-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; padding: 0; cursor: pointer; } /* 2px: gelijk met de eerste tekstregel */
.plan-check input:checked + span { color: var(--mute); text-decoration: line-through; text-decoration-color: var(--faint); }
.plan-check.is-na { cursor: default; color: var(--mute); }
.plan-na { flex: none; width: 48px; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--stone); } /* 2px: gelijk met de eerste tekstregel */
.plan-field { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hairline-light); }
.plan-field input[type="text"] { width: 100%; }
.plan-number { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.plan-take { grid-column: 1 / -1; justify-self: start; font-size: 15px; font-weight: 500; }
.plan-crm { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--hairline-light); font-size: 15px; color: var(--charcoal); }
.plan-crm strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-network a { font-weight: 500; } /* LinkedIn-blok: Reageer vandaag op … */
.plan-links { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; font-weight: 500; }
.plan-note { margin: 24px 0 0; }
.plan-note h2 label { cursor: text; }
.plan-note textarea { margin-top: 12px; }
.plan-noscript { margin-top: 16px; }

/* Vandaag benaderen: de gekozen leads in het Outbound-blok */
.picks { margin-top: 16px; padding: 16px; border-radius: var(--r-lg); background: var(--tint-cobalt); }
.picks-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.picks-head .eyebrow { margin: 0; }
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pick { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-card); }
.pick.done { opacity: .7; }
.pick-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.pick-main .meta { margin: 0; overflow-wrap: anywhere; }
.pick-main .kans { justify-self: start; }
.pick-name { font: 600 16px/1.35 var(--font-body); color: var(--ink); text-decoration: none; }
.pick-name:hover { text-decoration: underline; }
.pick-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pick-side form { margin: 0; }
@media (max-width: 620px) { .pick { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Dag afsluiten: vanaf 16:00, ingeklapt ---------- */
.close-day > .close-sum { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin: -4px 0; }
.close-day > .close-sum .eyebrow, .close-day > .close-sum .tile-title { display: block; }
.close-day > .close-sum .eyebrow { margin-bottom: 4px; }
.close-day[open] > .close-sum { margin-bottom: 8px; }
.close-day.closed .close-sum .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-teal); }
.close-day.closed .close-sum .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-teal); }
.recap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.recap-list strong { font: 500 18px/1 var(--font-display); margin-right: 4px; }
.recap-list.inline { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 8px 0 16px; }
.close-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.close-field { display: grid; gap: 8px; }
.close-field label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.close-field label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-teal); }
.close-field.bad label::before { background: var(--accent-warn); }
.close-field textarea { min-height: 0; }
.close-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }

@media (max-width: 760px) {
  .today-head .head-actions { flex: 1 1 100%; }
  .today-head .head-actions > .btn { flex: 1 1 auto; }
  .today-head .head-actions .schedule-chip { height: 40px; }
  .plan-links a { display: inline-flex; align-items: center; min-height: 40px; }
  /* losse links in een zin of lijst: tikvlak van 40px zonder dat de regel hoger wordt */
  .timeline-agenda a, .plan-crm > span > a, .tl-admin-list a, .day-timeline .project-issues a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .today-recap { grid-template-columns: minmax(0, 1fr); }
  .today-recap-seen { order: 9; margin-top: 16px; }
  .today-recap-seen .btn { width: 100%; height: 44px; font-size: 15px; }
  .today-recap .week-facts { display: grid; gap: 8px; }
  .today-recap .week-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 16px; }
  .today-recap .week-facts dd.num { font-size: 18px; }
  .today-recap .week-fact-note { grid-column: 1 / -1; }
  .today-focus { display: grid; gap: 8px; }
  .today-focus-list { display: grid; }
  .close-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Project bij een afspraak in de tijdlijn (_timeline_item.html) ---------- */
.day-project { margin-top: 12px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-soft); }
.day-project .project-issues { margin-top: 12px; gap: 8px; }
.day-project-head { margin: 0 0 8px; font-weight: 600; }
.day-project-head a { color: var(--ink); text-decoration: none; }
.day-project-head a:hover { text-decoration: underline; }


/* ---------- De startknop van de timer bij Jira-taken in Je dag (de timer zelf staat in de zijbalk en de balk) ---------- */
.project-issues li { position: relative; }
.time-go { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 8px; vertical-align: middle; border: 1px solid var(--hairline-light);
  border-radius: 50%; background: var(--surface-card); color: var(--charcoal); cursor: pointer; }
.time-go .icon { width: 16px; height: 16px; }
.time-go:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.time-go-on { margin-left: 8px; }
@media (max-width: 760px) { .time-go { width: 40px; height: 40px; } }

/* ---------- Urenknop boven Nu (_hours_button.html): de hele kaart is één knop naar het reviewscherm ---------- */
.hours-cta { --sys-bad-ink: color-mix(in srgb, var(--accent-danger) 75%, var(--ink)); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; color: var(--ink); text-decoration: none; border-color: var(--accent-warn); }
.hours-cta[data-tone="bad"] { border-color: var(--accent-danger); }
.hours-cta[data-tone="good"] { border-color: var(--accent-teal); }
.hours-cta:hover { border-color: var(--ink); }
.hours-cta-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-warn); align-self: flex-start; margin-top: 30px; }
.hours-cta[data-tone="bad"] .hours-cta-dot { background: var(--accent-danger); }
.hours-cta[data-tone="good"] .hours-cta-dot { background: var(--accent-teal); }
.hours-cta-text { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; }
.hours-cta-text .eyebrow { margin: 0 0 4px; }
.hours-cta-title { font: 500 20px/1.3 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.hours-cta-meta { font-size: 15px; color: var(--mute); }
.hours-cta[data-tone="bad"] .hours-cta-meta { color: var(--sys-bad-ink); }
.hours-cta-action { flex: none; gap: 8px; pointer-events: none; }
.today-page > .hours-live { margin-top: -16px; font-size: 15px; text-align: right; }  /* kleine link onder de urenknop, geen kaart */
.hours-live a { display: inline-flex; align-items: center; min-height: 40px; }
.hours-cta:hover .hours-cta-action:not(.secondary) { background: var(--surface-elevated); }
@media (max-width: 760px) {
  .hours-cta-action { flex: 1 1 100%; }
  .hours-cta-title { font-size: 18px; }
}

/* Live op Vandaag: bovenaan de teller, links alleen de klant die nu live wordt opgenomen (met zijn balkjes over de dag),
   rechts het dagplan en Te doen in de leeskolom van 760px */
.today-counter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin: 0 0 24px; padding: 20px 24px; }
.today-counter .eyebrow { flex: 1 1 100%; margin: 0; }
.today-counter .today-counter-note { margin: 0; }
.today-counter-sum { margin: 0; font: 500 40px/1.05 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.today-counter-note { margin: 4px 0 0; color: var(--charcoal); font-size: 14px; }
.today-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 760px); gap: 24px 32px; align-items: start; }
.today-side { position: sticky; top: 24px; min-width: 0; }
.today-lv { gap: 12px; }
.today-rec-list { display: grid; gap: 12px; margin: 0; }
.today-rec-title { margin: 0; font: 600 13px/1.4 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.today-rec { display: grid; gap: 6px; padding: 16px; }
.today-rec-head { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; font-size: 17px; }
.today-rec-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.today-rec-task { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.today-rec-meta { margin: 0; color: var(--charcoal); font-size: 14px; }
.today-rec-track { height: 32px; margin-top: 6px; border-radius: var(--r-xs); background: var(--surface-soft); }
.today-rec-track .lv-item.is-bar { height: 16px; margin-top: -8px; }
.today-rec-axis { display: flex; justify-content: space-between; margin: 0; color: var(--mute); font-size: 12px; }
.today-rec .btn { justify-self: start; margin-top: 4px; }
.today-rec-empty { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 16px; font-size: 15px; }
.today-rec-info { margin: 0; font-size: 14px; }
.today-rec-more { margin: 0; font-size: 15px; }
@media (max-width: 1100px) {
  .today-layout { grid-template-columns: minmax(0, 1fr); }
  .today-side { position: static; max-width: 760px; }
}
@media (max-width: 760px) {
  .today-counter { padding: 16px; margin-bottom: 20px; }
  .today-counter-sum { flex: 1 1 100%; font-size: 34px; }
}