/* Agenda en het blok "In de Kamer" voor Start. Komt na site.css en gebruikt alleen de tokens daarvan. */

/* ---------- een rij: tijd, naam met zaal, rechts Live of een pijl ---------- */
.ag-rows { margin: 0; padding: 0; list-style: none; }
.ag-rows > .ag-row:last-child { border-bottom: 1px solid var(--line); }
.ag-row { position: relative; display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto; align-items: baseline; gap: 0 24px; padding: 14px 0 15px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
a.ag-row { transition: background-color 0.15s, box-shadow 0.15s; }
a.ag-row:hover { background: var(--wash); box-shadow: -14px 0 0 var(--wash), 14px 0 0 var(--wash); }
a.ag-row:focus-visible { outline-offset: 2px; border-radius: 2px; }
.ag-row .d { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 3px; font: 500 14px/1.2 var(--sans); color: var(--tx4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-row .d b { font: 650 24px/1 var(--disp); letter-spacing: 0.01em; color: var(--tx2); }
.ag-row .t { grid-column: 2; grid-row: 1; font: 500 21px/1.15 var(--disp); letter-spacing: 0.003em; color: var(--tx2); overflow-wrap: anywhere; }
.ag-row .s { grid-column: 2; grid-row: 2; margin-top: 3px; font: 500 14.5px/1.4 var(--sans); color: var(--tx3); }
.ag-row .e { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sans); color: var(--tx4); transition: color 0.2s, transform 0.25s var(--ease); }
.ag-row .e .live-dot { margin-right: 0; vertical-align: 0; }
a.ag-row:hover .e { color: var(--tx); transform: translateX(2px); }

/* plenair: groter, lichter en een scherpere lijn erboven; commissies blijven stil */
.ag-row.is-plen { border-top-color: var(--line2); padding-top: 18px; padding-bottom: 19px; }
.ag-row.is-plen .d b { color: var(--tx); }
.ag-row.is-plen .t { font: 650 clamp(26px, 2.5vw, 32px)/1.08 var(--disp); color: var(--tx); }
.ag-row.is-plen .s { color: var(--tx2); }

/* nu bezig */
.ag-row.is-live .d b, .ag-row.is-live .e { color: var(--live); }
.ag-row.is-live .e { gap: 7px; }

/* voorbij (alleen vandaag): gedimd, nog wel te lezen */
.ag-row.is-past { opacity: 0.5; }
.ag-row.is-past:hover { opacity: 1; }

/* korte formaliteiten onder de dag */
.ag-row.is-quiet { padding-top: 9px; padding-bottom: 10px; }
.ag-row.is-quiet .d b { font-size: 18px; }
.ag-row.is-quiet .t { font-size: 18px; color: var(--tx3); }

/* een dag zonder vergaderingen: één rustige regel, het kopje kleiner en stiller */
.ag-none { margin: 0; padding: 14px 0 15px; border-top: 1px solid var(--line); font: 500 17px/1.4 var(--sans); color: var(--tx3); }
.group.is-empty .dw { font-size: clamp(22px, 2vw, 26px); color: var(--tx3); }
.group.is-empty .dd { color: var(--tx4); }
.group.is-empty { margin-top: 28px; }

/* ---------- het blok voor Start ---------- */
.agb-h { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.agb-k { margin: 0; font: 600 13px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx3); }
.agb-h .more { margin: 0; }
.agb-d { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 4px; font: 650 24px/1 var(--disp); letter-spacing: 0.005em; color: var(--tx); }
.agb-d span { font: 500 14.5px/1 var(--sans); color: var(--tx3); }
.agb-d.is-live { color: var(--live); }
.agb-d.is-live .live-dot { margin-right: 0; vertical-align: 0; align-self: center; }
.agb .ag-rows > .ag-row:first-child { border-top: 0; }
.agb .ag-row { padding: 12px 0 13px; }
.agb .ag-row .t { font-size: 20px; }
.agb .ag-row.is-plen { padding-top: 14px; padding-bottom: 15px; }
.agb .ag-row.is-plen .t { font-size: clamp(23px, 2vw, 27px); }
.agb .ag-none { border-top: 0; }
.agb .err { margin-top: 18px; }

@media (max-width: 640px) {
  .ag-row { grid-template-columns: 3.9rem minmax(0, 1fr) auto; gap: 0 14px; padding: 13px 0 14px; }
  .ag-row .d b { font-size: 21px; }
  .ag-row .t { font-size: 19px; }
  .ag-row.is-plen .t { font-size: 24px; }
  .ag-row.is-quiet .d b, .ag-row.is-quiet .t { font-size: 17px; }
  .agb .ag-row .t { font-size: 18.5px; }
  .agb .ag-row.is-plen .t { font-size: 22px; }
  .agb-d { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-row .e, a.ag-row { transition: none; }
  a.ag-row:hover .e { transform: none; }
}