/*
 * De agenda (referentie `schermen/Agenda.html`).
 *
 * Gedeeld komt uit `components.css`: `.segs`/`.seg`, `.chips`/`.chip`, `.banner`,
 * `.pill`, `.who`, `.fab`. Hier staat de dagindeling en de eventkaart.
 */

.ag-chips {
  margin-top: 12px;
}

/* ---- Het kopje boven een dag -------------------------------------------- */

.ag-dag {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
  margin-top: 18px;
}
/* Vandaag is goud: dat is de dag waar je op staat (§17.5). */
.ag-dag-nu {
  color: var(--gold);
}

/* ---- Eén afspraak ------------------------------------------------------- */

.ag {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  align-items: stretch;
}

/*
 * De tijd rechts uitgelijnd, zodat de uren onder elkaar staan en de lijst te
 * scannen is zonder te lezen.
 */
.ag-tijd {
  width: 46px;
  flex: 0 0 auto;
  font-size: var(--fs-support);
  color: var(--muted);
  padding-top: 1px;
  text-align: right;
}
.ag-tijd > b {
  display: block;
  color: var(--ink);
  font-size: var(--fs-body-sm);
  font-weight: 600;
}

/* Een streepje in plaats van een bolletje: het duurt iets, het gebeurt niet op één punt. */
.ag-streep {
  width: 3px;
  border-radius: 2px;
  background: var(--gold-a35);
  flex: 0 0 auto;
}
/* Een hele dag is geen tijdstip maar een periode: de hele hoogte, in verloop. */
.ag-streep-dag {
  background: linear-gradient(180deg, var(--gold-light), #8d6d2c);
}

.ag-inhoud {
  flex: 1;
  min-width: 0;
}
.ag-titel {
  display: block;
  font-size: var(--fs-list);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  line-height: 1.3;
}
.ag-onder {
  display: block;
  font-size: var(--fs-meta);
  color: var(--muted-2);
  margin-top: 3px;
}

/* ---- Een event is een kaart, geen regel --------------------------------- */

.ag-ev {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 8px;
  padding: 12px 13px;
  border-radius: 14px;
  background: radial-gradient(120% 120% at 100% 0%, var(--gold-a18), rgba(180, 142, 71, 0) 62%),
    var(--surface);
  border: 1px solid var(--gold-a30);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ag-ev-wapen {
  position: absolute;
  right: -22px;
  top: -24px;
  width: 96px;
  opacity: 0.13;
  mix-blend-mode: screen;
  pointer-events: none;
}
.ag-ev-naam {
  display: block;
  font-size: var(--fs-num-sum);
  margin-top: 9px;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}
.ag-ev-onder {
  display: block;
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-top: 5px;
  position: relative;
  z-index: 1;
}

/* ---- Het abonnement ----------------------------------------------------- */

.ag-sync {
  align-items: flex-start;
}

/*
 * Het adres, één keer. Het staat er als TEKST en niet alleen achter een
 * kopieerknop: zonder toestemming voor het klembord is die knop stil, en dan is
 * de tekst het enige dat er nog is.
 */
.ag-adres {
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--gold-a30);
}
.ag-adres-kop {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.ag-adres-uitleg {
  margin-top: 7px;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--muted);
}
.ag-adres-regel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: var(--r-btn);
  background: var(--white-a04);
  font-size: var(--fs-meta);
}
.ag-adres-regel > span {
  flex: 1;
  min-width: 0;
  word-break: break-all;
  color: var(--ink);
}


/* --- AANVULLING-19: het raster (Maand - Week - Dag) ------------------- */
.ag-balk { align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-periode { flex: 1; min-width: 120px; text-align: center; }
.ag-legenda { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.ag-legende { padding-left: 14px; position: relative; font-size: 12px; }
.ag-legende::before { content: ""; position: absolute; left: 0; top: 3px;
  width: 9px; height: 9px; border-radius: 2px; background: currentColor; }

/*
 * AANVULLING-27 §1.4: er is nog maar één agenda, dus een kleur per persoon is
 * geen informatie meer maar decoratie. Alle vier de klassen dragen nu dezelfde
 * gouden tint (de klassen blijven bestaan zodat oudere data blijft renderen).
 * Voor wie een afspraak is, staat op de afspraak zelf als deelnemer.
 */
.ag-p0, .ag-p1, .ag-p2, .ag-p3 { color: #C9A227; }

.ag-inhoud { display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.ag-inhoud > .ag-rooster { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:0; }
.ag-bronnen { flex:0 0 auto; max-height:25%; overflow:auto; }
.ag-week { min-width:720px; }
.ag-koppen,.ag-dagstrip,.ag-maandkop { position:sticky; top:0; z-index:5; background:var(--surface); }
.ag-koppen, .ag-stroken { display: grid; grid-template-columns: 48px repeat(7, minmax(96px, 1fr)); }
.ag-stroken-dag { grid-template-columns: 48px 1fr; }
/* AANVULLING-27 §1.1: de tijdenkolom en de hoek staan VAST links; alleen de
 * dagen schuiven zijwaarts mee. */
.ag-hoek { width: 48px; position: sticky; left: 0; z-index: 3; background: var(--surface); }
.ag-dagkop { text-align: center; padding: 6px 2px; background: none; border: 0;
  color: inherit; font: inherit; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.08); }
.ag-dagkop-nu b { color: #C9A227; }
.ag-strook { min-height: 22px; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 2px; padding: 2px; }
.ag-evbalk { display: block; background: rgba(201,162,39,.22); color: inherit;
  border: 0; border-left: 3px solid #C9A227; font: inherit; font-size: 12px;
  text-align: left; padding: 2px 6px; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ag-evbalk-begin { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.ag-evbalk-eind { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.ag-deadline { display: block; background: none; border: 0; font: inherit;
  font-size: 11px; text-align: left; cursor: pointer; color: inherit;
  padding: 0 6px 2px; border-top: 2px solid currentColor; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ag-heledag { display: block; border: 0; font: inherit; font-size: 12px;
  text-align: left; cursor: pointer; padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,.08); color: inherit;
  border-left: 3px solid currentColor; }

.ag-raster { display: grid; grid-template-columns: 48px repeat(7, minmax(96px, 1fr)); }
.ag-raster-dag { grid-template-columns: 48px 1fr; }
.ag-uren { display: flex; flex-direction: column; position: sticky; left: 0; z-index: 3;
  background: var(--surface); }
.ag-uur { height: 48px; font-size: 11px; color: rgba(255,255,255,.45);
  border-top: 1px solid rgba(255,255,255,.06); padding-right: 6px; text-align: right; }
/* §1.3: het rooster loopt van 07:00 tot 23:00 = 16 uur * 48px = 768px. */
.ag-kolom { position: relative; height: 768px; border-left: 1px solid rgba(255,255,255,.06);
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0,
    rgba(255,255,255,.05) 1px, transparent 1px, transparent 48px); cursor: pointer; }
.ag-kolom-nu { background-color: rgba(201,162,39,.05); }
/* §1.3: de rode lijn van nu, dwars door het rooster. */
.ag-nu-lijn { position: absolute; left: 0; right: 0; height: 2px; background: #d64545;
  z-index: 2; pointer-events: none; }
.ag-nu-lijn::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px;
  height: 8px; border-radius: 50%; background: #d64545; }
.ag-blok { position: absolute; left: 3px; right: 3px; overflow: hidden;
  border: 0; border-left: 3px solid currentColor; border-radius: 6px;
  background: rgba(255,255,255,.10); color: inherit; font: inherit;
  text-align: left; padding: 3px 6px; cursor: pointer; }
.ag-blok-shift { background: rgba(201,162,39,.14); }
.ag-blok-tijd { display: block; font-size: 10px; opacity: .7; }
.ag-blok-titel { display: block; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-blok-onder { display: block; font-size: 11px; opacity: .75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* §1.3: de greep aan de onderrand om langer/korter te trekken. */
.ag-blok-grip { position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  cursor: ns-resize; touch-action: none; }
.ag-blok-grip::after { content: ""; position: absolute; left: 50%; bottom: 2px;
  transform: translateX(-50%); width: 22px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.55); }
/* De greep boven (21-10-2026): trekt het begin. Op de computer alleen de onderste, zoals het was. */
.ag-blok-grip-boven { top: 0; bottom: auto; display: none; }
.ag-blok-grip-boven::after { bottom: auto; top: 2px; }
/* NAAST ELKAAR (21-10-2026): overlappende blokken delen de kolom. */
.ag-n2.ag-k0 { right: calc(50% + 1px); }
.ag-n2.ag-k1 { left: calc(50% + 1px); }
.ag-n3.ag-k0 { right: calc(66.67% + 1px); }
.ag-n3.ag-k1 { left: calc(33.33% + 1px); right: calc(33.33% + 1px); }
.ag-n3.ag-k2 { left: calc(66.67% + 1px); }
.ag-n4.ag-k0 { right: calc(75% + 1px); }
.ag-n4.ag-k1 { left: calc(25% + 1px); right: calc(50% + 1px); }
.ag-n4.ag-k2 { left: calc(50% + 1px); right: calc(25% + 1px); }
.ag-n4.ag-k3 { left: calc(75% + 1px); }
/* AANRAKEN (21-10-2026): vasthouden pakt het blok; dan verschijnen de grepen boven en onder. */
.ag-blok { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ag-blok-gepakt { z-index: 6; box-shadow: 0 0 0 2px #C9A227, 0 8px 22px rgba(0,0,0,.55); opacity: .96; }
.ag-blok-geselecteerd { z-index: 5; box-shadow: 0 0 0 2px #C9A227; }
@media (pointer: coarse) {
  .ag-blok-afspraak .ag-blok-grip { display: none; height: 14px; }
  .ag-blok-afspraak.ag-blok-geselecteerd .ag-blok-grip { display: block; }
  .ag-blok-afspraak.ag-blok-geselecteerd .ag-blok-grip::after { background: #C9A227; height: 4px; width: 28px; }
}

.ag-dagstrip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.ag-stripdag { display: flex; flex-direction: column; align-items: center;
  min-width: 44px; padding: 6px 4px; border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px; background: none; color: inherit; font: inherit; cursor: pointer; }
.ag-stripdag-aan { background: rgba(201,162,39,.18); border-color: #C9A227; }
.ag-stripdag-nu span { color: #C9A227; }

.ag-maand { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ag-maandkop { font-size: 11px; color: rgba(255,255,255,.45); text-align: center; padding: 4px 0; }
.ag-cel { min-height: 76px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  padding: 4px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.ag-cel-buiten { opacity: .4; }
.ag-cel-nu { border-color: #C9A227; }
.ag-cel-dag { font-size: 11px; color: rgba(255,255,255,.6); }
.ag-mini { display: block; font-size: 10px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; border-left: 2px solid currentColor; padding-left: 4px; }
.ag-mini-event { background: rgba(201,162,39,.2); border-left-color: #C9A227; border-radius: 3px; }
.ag-mini-deadline { border-left-width: 0; border-top: 2px solid #B4652F; }

.ag-r0 { top: 0px; }
.ag-r1 { top: 12px; }
.ag-r2 { top: 24px; }
.ag-r3 { top: 36px; }
.ag-r4 { top: 48px; }
.ag-r5 { top: 60px; }
.ag-r6 { top: 72px; }
.ag-r7 { top: 84px; }
.ag-r8 { top: 96px; }
.ag-r9 { top: 108px; }
.ag-r10 { top: 120px; }
.ag-r11 { top: 132px; }
.ag-r12 { top: 144px; }
.ag-r13 { top: 156px; }
.ag-r14 { top: 168px; }
.ag-r15 { top: 180px; }
.ag-r16 { top: 192px; }
.ag-r17 { top: 204px; }
.ag-r18 { top: 216px; }
.ag-r19 { top: 228px; }
.ag-r20 { top: 240px; }
.ag-r21 { top: 252px; }
.ag-r22 { top: 264px; }
.ag-r23 { top: 276px; }
.ag-r24 { top: 288px; }
.ag-r25 { top: 300px; }
.ag-r26 { top: 312px; }
.ag-r27 { top: 324px; }
.ag-r28 { top: 336px; }
.ag-r29 { top: 348px; }
.ag-r30 { top: 360px; }
.ag-r31 { top: 372px; }
.ag-r32 { top: 384px; }
.ag-r33 { top: 396px; }
.ag-r34 { top: 408px; }
.ag-r35 { top: 420px; }
.ag-r36 { top: 432px; }
.ag-r37 { top: 444px; }
.ag-r38 { top: 456px; }
.ag-r39 { top: 468px; }
.ag-r40 { top: 480px; }
.ag-r41 { top: 492px; }
.ag-r42 { top: 504px; }
.ag-r43 { top: 516px; }
.ag-r44 { top: 528px; }
.ag-r45 { top: 540px; }
.ag-r46 { top: 552px; }
.ag-r47 { top: 564px; }
.ag-r48 { top: 576px; }
.ag-r49 { top: 588px; }
.ag-r50 { top: 600px; }
.ag-r51 { top: 612px; }
.ag-r52 { top: 624px; }
.ag-r53 { top: 636px; }
.ag-r54 { top: 648px; }
.ag-r55 { top: 660px; }
.ag-r56 { top: 672px; }
.ag-r57 { top: 684px; }
.ag-r58 { top: 696px; }
.ag-r59 { top: 708px; }
.ag-r60 { top: 720px; }
.ag-r61 { top: 732px; }
.ag-r62 { top: 744px; }
.ag-r63 { top: 756px; }
.ag-r64 { top: 768px; }
.ag-h1 { height: 10px; }
.ag-h2 { height: 22px; }
.ag-h3 { height: 34px; }
.ag-h4 { height: 46px; }
.ag-h5 { height: 58px; }
.ag-h6 { height: 70px; }
.ag-h7 { height: 82px; }
.ag-h8 { height: 94px; }
.ag-h9 { height: 106px; }
.ag-h10 { height: 118px; }
.ag-h11 { height: 130px; }
.ag-h12 { height: 142px; }
.ag-h13 { height: 154px; }
.ag-h14 { height: 166px; }
.ag-h15 { height: 178px; }
.ag-h16 { height: 190px; }
.ag-h17 { height: 202px; }
.ag-h18 { height: 214px; }
.ag-h19 { height: 226px; }
.ag-h20 { height: 238px; }
.ag-h21 { height: 250px; }
.ag-h22 { height: 262px; }
.ag-h23 { height: 274px; }
.ag-h24 { height: 286px; }
.ag-h25 { height: 298px; }
.ag-h26 { height: 310px; }
.ag-h27 { height: 322px; }
.ag-h28 { height: 334px; }
.ag-h29 { height: 346px; }
.ag-h30 { height: 358px; }
.ag-h31 { height: 370px; }
.ag-h32 { height: 382px; }
.ag-h33 { height: 394px; }
.ag-h34 { height: 406px; }
.ag-h35 { height: 418px; }
.ag-h36 { height: 430px; }
.ag-h37 { height: 442px; }
.ag-h38 { height: 454px; }
.ag-h39 { height: 466px; }
.ag-h40 { height: 478px; }
.ag-h41 { height: 490px; }
.ag-h42 { height: 502px; }
.ag-h43 { height: 514px; }
.ag-h44 { height: 526px; }
.ag-h45 { height: 538px; }
.ag-h46 { height: 550px; }
.ag-h47 { height: 562px; }
.ag-h48 { height: 574px; }
.ag-h49 { height: 586px; }
.ag-h50 { height: 598px; }
.ag-h51 { height: 610px; }
.ag-h52 { height: 622px; }
.ag-h53 { height: 634px; }
.ag-h54 { height: 646px; }
.ag-h55 { height: 658px; }
.ag-h56 { height: 670px; }
.ag-h57 { height: 682px; }
.ag-h58 { height: 694px; }
.ag-h59 { height: 706px; }
.ag-h60 { height: 718px; }
.ag-h61 { height: 730px; }
.ag-h62 { height: 742px; }
.ag-h63 { height: 754px; }
.ag-h64 { height: 766px; }

/*
 * De categorie kleurt mee (AANVULLING-25 par. 1): een proeverij is te
 * onderscheiden van een gewone afspraak - hier met een gouden linkerrand
 * en een warme tint, in Outlook via de categorie "HAG proeverij".
 */
.ag-blok.ag-soort-proeverij {
  border-left: 3px solid var(--gold);
  background: var(--gold-a11, rgba(180, 142, 71, 0.11));
}

/*
 * AANVULLING-27 §1.1/§1.3: de kopregel (weergave, pijltjes, datum, filter)
 * blijft staan terwijl het rooster onder hem doorschuift - de dag opent bij de
 * rode lijn van nu, en dan mag de bediening niet mee het beeld uit schuiven.
 */
.ag-kop-pad {
  position: relative; flex:0 0 auto; max-height:45%; overflow:auto; z-index: 6; background: var(--bg, #0b0a08);
  padding-top: 8px; padding-bottom: 8px;
}

/* --- AANVULLING-27 §1.4: het ene filterknopje en de drie puntjes --------- */
.ag-kop-acties { display: flex; gap: 6px; flex: 0 0 auto; }
.ag-menu-knop { letter-spacing: 2px; }
.ag-paneel {
  margin-top: 8px; padding: 12px 14px; border: 1px solid var(--gold-a30);
  border-radius: 12px; background: var(--surface); display: flex; flex-wrap: wrap; gap: 20px;
}
.ag-paneel.ag-menu { flex-direction: column; gap: 4px; }
.ag-paneel-groep { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.ag-paneel-kop {
  font-size: var(--fs-eyebrow, 11px); text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-bottom: 2px;
}
.ag-keuze {
  display: flex; align-items: center; gap: 9px; background: none; border: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 5px 2px;
}
.ag-keuze::before {
  content: ""; width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto;
  border: 1px solid var(--gold-a40, rgba(180, 142, 71, 0.5));
}
.ag-keuze[aria-pressed="true"]::before { background: #C9A227; border-color: #C9A227; }
/* De drie-puntjes-acties (Afdrukken) zijn geen aan/uit-keuze: geen vinkje. */
.ag-menu .ag-keuze::before { display: none; }
.ag-dag-leeg { color: var(--muted); }

/* Bijwerken door vanaf de bovenkant omlaag te trekken. */
.ag-inhoud,.ag-rooster{overscroll-behavior-y:contain}
.ag-vernieuw-status{flex:0 0 auto;padding:10px 16px;text-align:center;color:var(--gold);font-size:13px;line-height:1.5}
.ag-vernieuw-status[hidden]{display:none}

.ag-bronnen:not(:has(.banner)){display:none}
.ag-afspraak-formulier{padding:0;border:1px solid var(--gold-a30);border-radius:18px;width:min(540px,calc(100vw - 32px));max-width:none;max-height:90dvh;background:var(--bg);color:var(--ink);overflow:hidden}
.ag-afspraak-formulier::backdrop{background:rgba(0,0,0,.7)}
.ag-afspraak-form{display:flex;flex-direction:column;max-height:90dvh}
.ag-form-kop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:18px 16px;border-bottom:1px solid var(--gold-a20)}
.ag-form-kop h2{font-size:17px;font-weight:600;margin:0}
.ag-form-kop button{border:0;background:none;color:var(--gold);font:inherit;font-size:15px;min-height:40px;padding:0;text-align:left;cursor:pointer}
.ag-form-kop button:last-child{text-align:right;font-weight:600}
.ag-form-kop button:disabled{opacity:.5;cursor:default}
.ag-form-inhoud{padding:24px 16px;overflow:auto;min-height:0}
.ag-form-groep{border:1px solid var(--gold-a20);border-radius:12px;background:var(--surface);margin-bottom:24px;overflow:hidden}
.ag-form-tekst,.ag-form-rij,.ag-form-keus{display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 14px;box-sizing:border-box;border-bottom:1px solid var(--gold-a15)}
.ag-form-groep>:last-child{border-bottom:0}
.ag-form-tekst>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ag-form-tekst input,.ag-form-rij input{font:inherit;font-size:16px;min-width:0;border:0;background:transparent;color:var(--ink);padding:4px 0;border-radius:0;color-scheme:dark}
.ag-form-tekst input{width:100%}
.ag-form-rij>span{flex:0 0 72px;font-size:15px}
.ag-form-rij input{flex:1;width:100%;text-align:right}
.ag-form-rij input[type="checkbox"]{appearance:none;flex:0 0 46px;width:46px;height:28px;border-radius:16px;background:#554d41;margin-left:auto;position:relative;cursor:pointer}
.ag-form-rij input[type="checkbox"]::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform .15s}
.ag-form-rij input[type="checkbox"]:checked{background:var(--gold)}
.ag-form-rij input[type="checkbox"]:checked::after{transform:translateX(18px)}
.ag-form-fout{color:var(--danger,#ef9b9b);font-size:14px;line-height:1.5;margin:0}
.ag-afspraak-formulier :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body:has(.ag-afspraak-formulier[open],.hag-agenda-editor) .fab,body:has(.ag-afspraak-formulier[open],.hag-agenda-editor) [data-actie="nieuwe-afspraak"]{display:none}
@media(max-width:600px){
 .ag-afspraak-formulier{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}
 .ag-afspraak-form{height:100%;max-height:100%}
 .ag-form-kop{padding-top:calc(8px + var(--safe-top))}
 .ag-form-inhoud{padding-bottom:calc(24px + var(--safe-onder))}
 .ag-form-rij{flex-wrap:wrap}
 .ag-form-rij input[type="datetime-local"]{flex-basis:210px;max-width:100%}
 .ag-form-herhaal .segs{flex-basis:100%}
}

/* Geen browser-<select> in het formulier (agenda-formulier.js): Herhaal is een keuzebalk in de rij,
   Agenda een lijst met een HAG-vinkje per partner. Het vinkje is bewust geen schakelaar: het is
   een keuze uit meer, geen aan/uit. */
.ag-form-kopje{padding:12px 14px 2px;font-size:13px;font-weight:600;color:var(--muted)}
.ag-form-leeg{margin:0;padding:10px 14px 16px;color:var(--muted);font-size:15px}
.ag-form-herhaal .segs{flex:1;min-width:0}
.ag-form-herhaal .seg{padding:0 6px;white-space:nowrap}
.ag-form-keus{cursor:pointer;font-size:16px}
.ag-form-keus input[type="checkbox"]{appearance:none;margin:0;flex:0 0 24px;width:24px;height:24px;border-radius:7px;border:1px solid var(--gold-a35);background:var(--white-a04);position:relative;cursor:pointer}
.ag-form-keus input[type="checkbox"]:checked{background:var(--gold);border-color:var(--gold)}
.ag-form-keus input[type="checkbox"]:checked::after{content:"";position:absolute;left:8px;top:3px;width:6px;height:12px;border-right:2px solid var(--on-gold);border-bottom:2px solid var(--on-gold);transform:rotate(45deg)}

@media(min-width:601px){.ag-afspraak-formulier{position:fixed;inset:0;margin:auto}}

/* Periodepijlen om de datum, Vandaag als eigen actie. */
.ag-periode-keuze{display:flex;align-items:center;gap:10px;flex:1;min-width:240px}
.ag-periode{font-family:var(--font-sans);font-size:18px;font-weight:600;line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums}
.ag-dagkop,.ag-dagkop b,.ag-stripdag,.ag-stripdag b,.ag-maandkop,.ag-cel-dag{font-family:var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:0}
.ag-dagkop b,.ag-stripdag b{font-size:18px;font-weight:600;line-height:1.35}
.ag-dagkop,.ag-maandkop{font-size:13px;color:var(--ink);font-weight:500}
.ag-cel-dag{font-size:14px;font-weight:600;color:var(--ink)}
@media(max-width:600px){.ag-periode-keuze{flex-basis:100%;min-width:0}.ag-periode{font-size:17px}.ag-balk>.ag-kop-acties{margin-left:auto}}

/* Plaats zoeken en dezelfde iPhone-achtige bediening voor nieuwe/bestaande afspraken. */
.ag-locatie-acties{display:flex;gap:18px;align-items:center;padding:10px 14px}
.ag-locatie-acties button,.ag-locatie-acties a{font:inherit;font-size:14px;color:var(--gold);background:none;border:0;padding:4px 0;cursor:pointer}
.ag-locatie-status{padding:0 14px 10px;font-size:14px;line-height:1.5}
/* R2-M365-12: de vaste regel dat de zoektekst naar Photon (komoot) gaat. */
.ag-locatie-uitleg{margin:0;padding:0 14px 10px;font-size:12px;line-height:1.5;color:var(--muted)}
.ag-plaats-resultaat{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--gold-a20);padding:12px 14px;color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.ag-plaats-resultaat:hover{background:var(--gold-a11)}
.ag-plaats-bron{display:block;padding:8px 14px;font-size:11px;color:var(--muted)}
.ag-deelnemers{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;margin-bottom:20px}
.ag-verwijder{margin-top:22px;color:var(--danger,#ef9b9b)}