/* TIVO Regie: de planningstijdlijn onder 'Lopende klussen'.
   Zelfde designsysteem als de rest (ink/copper/mist, hairlines, geen
   schaduwen). Alles op CSS-grid: één kolom per ISO-week, precies de weken die
   de server in planning_overzicht.weken meestuurt. Geen externe libraries —
   online staat de CSP op script-src 'self'.

   De kolommen zijn níet altijd gelijk breed: planning.js zet de sporen in
   --pl-kolommen. Tot twintig weken is elke week even breed (daar plan je per
   week); in het jaar krijgt elke maand een gelijk deel en verdelen de weken
   binnen die maand dat deel. Elke grid die op de weekas ligt (koppen, balken,
   overlay) gebruikt exact diezelfde variabele — anders staat een balk een halve
   week naast de maand waar hij onder hangt.

   Onder de 720 pixels kantelt dezelfde tijdlijn: de naam gaat bóven zijn balk
   in plaats van ernaast (zie 'smalle tijdlijn' onderaan dit bestand). Beide
   staan altijd in de pagina; de media-query kiest. */

/* ------------------------------------------------------- weergave-schakelaar */
.klus-balk {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center;
  margin-bottom: 24px;
}
.klus-schakelaar { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.klus-schakelaar button {
  background: var(--surface); border: none; padding: 7px 16px;
  color: var(--mist); font-weight: 500;
}
.klus-schakelaar button + button { border-left: 1px solid var(--line); }
.klus-schakelaar button.actief { background: var(--ink); color: #fff; }
.klus-balk .rechts { margin-left: auto; display: flex; gap: 12px 18px; align-items: center; flex-wrap: wrap; }
.pl-schakelaar { display: inline-flex; gap: 4px; }
.pl-schakelaar button {
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  padding: 4px 10px; font-size: 13px; color: var(--mist);
}
.pl-schakelaar button.actief { border-color: var(--line); color: var(--ink); background: var(--surface-warm); }
.pl-vink { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--mist); }
/* 'Toon voorbeeldklant' komt uit app.css en draagt daar 16 pixels marge boven,
   voor de plek waar hij los onder een alinea staat. Hier staat hij náást 'Toon
   afgeronde' op één regel, en dan zakt hij er een halve regel onderuit. */
.klus-balk .demo-toggle { margin-top: 0; }

/* --------------------------------------------------------- weekronde */
/* De herinnering aan de wekelijkse statusronde. Staat boven de schakelaars,
   want hij gaat over de hele pagina, en verdwijnt zodra de vragen op zijn. */
.pl-weekronde {
  border: 1px solid var(--copper); background: #FBF0E6; color: #7A4212;
  border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 20px;
}
.pl-weekronde-kop { font-weight: 600; margin-bottom: 2px; }
.pl-weekronde p { font-size: 14px; margin: 0; }
.pl-weekronde code {
  background: rgba(194,109,39,.12); border-radius: 4px; padding: 1px 5px;
  font-size: 13px;
}

/* ------------------------------------------------------------- tegels */
/* Vier tegels van een halve schermhoogte duwden de planning zelf onder de
   vouw. Ze mogen kleiner: het getal blijft het grootste op de regel, de
   toelichting eronder wordt een bijzin in plaats van een alinea. */
#pl-tegels { margin-bottom: 20px; }
.pl-tegels { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.pl-tegels .an-tegel { padding: 12px 14px; }
.pl-tegels .an-tegel-groot { font-size: 22px; margin-top: 2px; }
.pl-tegels .an-tegel-sub { font-size: 12px; line-height: 1.35; }

/* ------------------------------------------------------------ legenda */
/* Zonder deze regel is de tijdbalk een code die je uit je hoofd moet kennen.
   Elke vorm die op dit scherm iets betekent, staat hier met het woord ernaast.

   position/z-index: de legenda staat ín .pl-breed en dus onder de overlay, die
   inset:0 over de hele hoogte ligt. Zonder eigen stapelplek schilderde de
   arcering van gesloten weken dwars over de uitleg heen — een gestreepte balk
   over het woord 'bouwvak'. */
.pl-uitleg {
  border-top: 1px solid var(--line); background: var(--surface-warm);
  padding: 9px 16px; position: relative; z-index: 1;
}
.pl-legenda {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: center; margin: 0;
}
.pl-legenda li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--mist);
}
.pl-lg-balk {
  width: 20px; height: 10px; border-radius: 2px; background: var(--ink-soft);
  flex: none;
}
.pl-lg-balk.uitloop { background: var(--copper); }
.pl-lg-balk.licht { background: #EAEFF6; border: 1px dashed #C6D2E4; }
.pl-lg-balk.voorstel { background: var(--surface); border: 1px dashed var(--copper); }
.pl-lg-balk.wacht {
  background: repeating-linear-gradient(135deg, #EAEFF6 0 4px, #DCE4F0 4px 8px);
}
.pl-lg-ruit {
  width: 9px; height: 9px; transform: rotate(45deg); flex: none;
  border: 1px solid var(--ink); background: var(--surface);
}
.pl-lg-dicht {
  width: 20px; height: 12px; flex: none;
  background: repeating-linear-gradient(135deg, rgba(135,149,173,.28) 0 3px,
                                        rgba(135,149,173,0) 3px 6px);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}

/* ------------------------------------------------------------- let op */
/* Het enige oordeel op dit scherm. Elke regel noemt zijn bron, klein maar
   zichtbaar: staat er iets zonder bron, dan is er een aanname binnengeslopen. */
.pl-letop { margin-top: 28px; }
.pl-letop ul { list-style: none; margin-top: 8px; }
.pl-letop li {
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; display: flex; gap: 14px; align-items: baseline;
}
.pl-letop li .soort {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--copper); min-width: 92px; flex: none;
}
.pl-letop li .wat { color: var(--ink-soft); }
.pl-letop li .bron {
  display: block; font-size: 12px; color: var(--mist); margin-top: 2px;
}
.pl-meer { font-size: 13px; color: var(--mist); margin-top: 8px; }

/* ------------------------------------------------------------- weekas */
/* Twee opbouwen van dezelfde tijdlijn: naam náást de balk op een breed scherm,
   naam bóven de balk op een telefoon. Allebei staan ze in de pagina; de
   media-query hieronder kiest welke je ziet. Geen JavaScript aan te pas, dus
   het draaien van een telefoon kan de omschakeling niet missen. */
.pl-tijdlijn { margin-top: 28px; --pl-label: 272px; }
.pl-breed {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; position: relative; background: var(--surface);
}
.pl-smal { display: none; }
.pl-rij { display: grid; grid-template-columns: var(--pl-label) minmax(0, 1fr); }
.pl-rij + .pl-rij { border-top: 1px solid var(--line); }
.pl-rij.kop { background: var(--surface-warm); border-bottom: 1px solid var(--line); }
.pl-rij.klikbaar { cursor: pointer; transition: background .15s var(--ease); }
@media (hover: hover) {
  .pl-rij.klikbaar:hover { background: var(--surface-warm); }
}
/* Afgerond of wachtend mag naar de achtergrond, maar het dimmen hoort op de
   onderdelen en niet op de rij zelf: `opacity` maakt van de rij een
   stapelcontext, en dan komt de arcering uit de overlay bovenóp het bijschrift
   te liggen in plaats van eronder. Dat is precies de streping dwars door de
   tekst die de pil bij .pl-buiten moest wegnemen. */
.pl-rij.rust .pl-label,
.pl-rij.rust .pl-balk,
.pl-rij.rust .pl-ruit,
/* Ook de pil zelf: bij een afgeronde klus is dat vaak het énige dat er in de
   tijdas staat ("afgerond 27 april 2026"), en die stond dan op volle sterkte in
   een verder gedimde rij. */
.pl-rij.rust .pl-buiten { opacity: .6; }

.pl-label { padding: 12px 16px; border-right: 1px solid var(--line); min-width: 0; }
.pl-label .naam { font-weight: 600; color: var(--ink); }
.pl-label .project { font-size: 13px; color: var(--mist); }
/* De klus in gewone taal. Dit is wat een balk nooit zelf kan zeggen — welke
   fase er nu loopt, tot wanneer, en wanneer het klaar is. Wie de vormen niet
   kent, leest hier gewoon wat er aan de hand is. */
.pl-label .zin {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; margin-top: 5px;
}
.pl-label .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.pl-koppen { min-width: 0; }
.pl-weken, .pl-maanden, .pl-baan {
  display: grid; grid-template-columns: var(--pl-kolommen); min-width: 0;
}
.pl-weken { align-items: end; }
/* De maand is het hoofdlabel geworden: 'september' lees je, 'week 38' moet je
   omrekenen. In het jaar zijn de maanden even breed, dus hier past een naam. */
.pl-maand {
  min-width: 0; overflow: hidden; white-space: nowrap;
  padding: 6px 6px 4px; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink); border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Om en om een tint: achterin zijn de maandvakken te smal voor een naam, en
   dan is het verschil tussen twee maanden alleen nog aan de tint te zien. */
.pl-maand.om { background: rgba(135,149,173,.07); }
/* Januari staat achterin op 26 pixels; daar past geen jaartal meer bij. Een
   hardere lijn zegt hetzelfde: hier begint het volgende jaar. */
.pl-maand.jaarstart { border-left: 1px solid var(--ink-soft); }
.pl-maand:first-child { border-left: none; }
/* Het weeknummer is bijzaak geworden en verschijnt alleen als er ruimte voor
   is (planning.js meet dat). Het bezettingsgetal dat hier stond is weg: een
   kaal getal onder een weeknummer zei nergens wát het telde. */
.pl-week {
  padding: 5px 1px; text-align: center; font-size: 11px; color: var(--mist);
  border-left: 1px solid var(--line); line-height: 1.3;
  min-width: 0; overflow: hidden; min-height: 21px;
}
.pl-week:first-child { border-left: none; }
.pl-week .nr { display: block; color: var(--mist); }
.pl-week.gesloten .nr, .pl-week.gesloten { color: var(--mist); }
.pl-week.nu { border-top: 2px solid var(--copper); }
.pl-week.nu .nr { color: var(--copper); font-weight: 600; }

.pl-baan { padding: 10px 0; row-gap: 4px; position: relative; }
.pl-balk {
  grid-row: 1; min-width: 0; height: 22px; border-radius: var(--radius);
  background: var(--ink-soft); color: #fff; font-size: 11px; line-height: 22px;
  padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin: 0 1px;
}
/* Afgesneden door de rand van het venster: die kant recht en tegen de rand aan.
   Zo zie je dat de fase verder loopt dan deze weergave laat zien. Zonder dat
   werd de staart van een fase van twee maanden een los blokje met ronde hoeken
   naast de balk die er wél helemaal in past. */
.pl-balk.af-links { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pl-balk.af-rechts { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pl-balk.licht {
  background: #EAEFF6; color: var(--ink-soft); border: 1px dashed #C6D2E4;
  line-height: 20px;
}
.pl-balk.uitloop { background: var(--copper); color: #fff; }
.pl-balk.wacht {
  background: repeating-linear-gradient(135deg, #EAEFF6 0 6px, #DCE4F0 6px 12px);
  color: var(--ink-soft);
}
/* Nog niet bevestigd: een voorstel, geen afspraak. Open balk met een stippellijn
   in plaats van gevuld — je ziet in één oogopslag waar nog een ja op moet. */
.pl-balk.voorstel {
  background: var(--surface); color: var(--ink-soft);
  border: 1px dashed var(--copper); line-height: 20px;
}
.pl-ruit {
  justify-self: end; align-self: center; z-index: 2;
  width: 9px; height: 9px; transform: rotate(45deg);
  border: 1px solid var(--ink); background: var(--surface); pointer-events: none;
}
.pl-leeg-rij { padding: 16px; color: var(--mist); font-size: 14px; }

/* Gesloten weken liggen als overlay over alle rijen: dan staan ze gegarandeerd
   op dezelfde plek als de kolommen eronder. Welke week 'nu' is tekent de browser
   zelf in de kop (.pl-week.nu) — een momentopname van vrijdag zou anders het
   hele weekend de verkeerde week aanwijzen. */
.pl-overlay {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; grid-template-columns: var(--pl-label) var(--pl-kolommen);
  grid-template-rows: 1fr;
}
.pl-arcering {
  grid-row: 1;
  background: repeating-linear-gradient(135deg, rgba(135,149,173,.10) 0 5px,
                                        rgba(135,149,173,0) 5px 10px);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
/* Waar 'nu' ligt staat in de kop: de week waarin we zitten krijgt een koperen
   rand en een koper weeknummer (.pl-week.nu). Er stond ook een koperen streep
   dwars door alle banen, maar die zei niets extra's: het venster begint altijd
   op de maandag van deze week, dus de lijn stond per definitie in de eerste
   kolom. Op de laptop liep hij door de legenda, op de telefoon bleven er losse
   stompjes boven en onder elke balk van over. */

/* Klus die volledig buiten het gekozen venster valt: geen lege regel, maar een
   wijzer naar wat er wél bekend is.

   Zo'n regel staat ín de tijdas, en daar ligt de arcering van gesloten weken
   als overlay overheen. Zonder eigen ondergrond liep die streping dwars door het
   woord, en dat las als een storing. Vandaar een pil met een rand: die houdt de
   arcering tegen, en hij leest als bijschrift bij de tijdlijn in plaats van als
   een balk waar de vulling van vergeten is. */
.pl-buiten {
  grid-row: 1; align-self: center; justify-self: start; max-width: 100%;
  position: relative; z-index: 1;
  font-size: 11px; color: var(--mist); white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.pl-buiten.rechts { justify-self: end; }

/* status- en schemabadges */
.badge.st-geen_datums { background: #FBF0E6; border-color: #EED9C4; color: #7A4212; }
.badge.niet-bevestigd {
  background: var(--surface); border-color: var(--copper); color: #7A4212;
  border-style: dashed;
}
.badge.st-lopend { background: var(--ink); border-color: var(--ink); color: #fff; }
.badge.st-uitgelopen { background: var(--copper); border-color: var(--copper); color: #fff; }
.badge.st-wacht { background: #EFEDE8; border-color: #DCD8CF; color: var(--ink-soft); }
.badge.st-afgerond { background: var(--groen); border-color: var(--groen); color: #fff; }
.badge.st-start_binnenkort, .badge.st-in_voorbereiding { background: #EAEFF6; border-color: #D4DEEC; }
.badge.schema-achter { background: #FBF0E6; border-color: #EED9C4; color: #7A4212; }
.badge.schema-voor { background: #E9F3EE; border-color: #CBE3D7; color: var(--groen); }
.badge.schema-op_schema, .badge.schema-meerwerk { background: var(--surface-warm); }
.badge.klein { font-size: 11px; padding: 1px 8px; }

/* ------------------------------------------------------------- paneel */
/* Het paneel is een leesscherm met formulieren erin, niet andersom. Boven de
   vouw staan de badges, één alinea in gewone taal en hoogstens één beslissing;
   de drie uitklapblokken eronder openen pas op een klik. Daarvóór stond alles
   altijd open: 1565 pixels paneel in een venster van 720, met 34 invulvelden
   waar je doorheen moest scrollen om te zien of een klus op schema lag. */
.pl-paneel-kop { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.pl-samenvatting {
  font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 4px;
}
.pl-knoprij {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.pl-tab {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 7px 14px; font-size: 14px;
  color: var(--ink-soft); transition: background .15s var(--ease);
}
.pl-tab:hover { background: var(--surface-warm); color: var(--ink); }
.pl-tab.actief { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Een uitklap draagt zelf geen lijn: de knoprij erboven scheidt al. Anders
   staan er twee hairlines onder elkaar zodra een blok opengaat. */
.pl-uitklap[hidden] { display: none; }
.pl-uitklap > .pl-vorm:first-child,
.pl-uitklap > div:first-child > .pl-vorm:first-child { margin-top: 0; padding-top: 14px; border-top: none; }
.pl-uitklap > div:first-child > .paneel-feiten { margin-top: 14px; border-top: none; padding-top: 0; }
.pl-vorm { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.pl-vorm h3 { font-size: 15px; margin-bottom: 10px; }
.pl-vorm label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--mist); margin-bottom: 3px; }
/* Een keuze is geen veldnaam: kapitalen zijn hier alleen maar schreeuwen. */
.pl-vorm label.pl-vink {
  display: inline-flex; text-transform: none; letter-spacing: normal;
  font-size: 13px; color: var(--ink-soft); margin: 0;
}
.pl-vorm input[type=text], .pl-vorm input[type=date], .pl-vorm input[type=number],
.pl-vorm select, .pl-vorm textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 7px 10px; font: inherit; color: var(--ink); background: var(--surface);
}
.pl-vorm textarea { min-height: 60px; resize: vertical; }
.pl-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 12px; }
.pl-velden .breed { grid-column: 1 / -1; }
.pl-fases { display: grid; gap: 6px; margin-bottom: 10px; }
.pl-fase-rij { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto auto; gap: 6px; align-items: center; }
.pl-fase-rij input[type=date] { padding: 6px 8px; font-size: 13px; }
.pl-fase-rij .weg { background: none; border: none; color: var(--mist); font-size: 16px; line-height: 1; padding: 2px 4px; }
.pl-fase-rij .weg:hover { color: var(--copper); }
.pl-vorm .knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Het datumveld naast 'Vul uit sjabloon' stond er zonder zichtbaar opschrift
   bij en zag eruit als een los veld dat je moest invullen. */
.pl-vorm label.pl-vanaf {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  text-transform: none; letter-spacing: normal; font-size: 13px; color: var(--mist);
}
.pl-vorm label.pl-vanaf input[type=date] { width: auto; font-size: 13px; padding: 6px 8px; }
.pl-hint { font-size: 12px; color: var(--mist); margin-top: 6px; }
.pl-radio { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.pl-radio label { display: inline-flex; gap: 6px; align-items: center; text-transform: none; letter-spacing: normal; font-size: 14px; color: var(--ink); margin: 0; }
.pl-voorstel, .pl-bevestig {
  border: 1px solid var(--copper); background: #FBF0E6; color: #7A4212;
  border-radius: var(--radius-md); padding: 12px 14px; margin: 12px 0; font-size: 14px;
}
.pl-voorstel .knoppen, .pl-bevestig .knoppen {
  margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
/* De planning uit de klantdocumenten. Bewust niet koper: dat is de kleur van
   'hier wordt een ja van je gevraagd', en die hoort maar op één blok tegelijk
   te staan. Dit is een aanbod, geen openstaande vraag. */
.pl-bron {
  border: 1px solid var(--line); background: var(--surface-warm);
  border-radius: var(--radius-md); padding: 12px 14px; margin: 12px 0;
  font-size: 14px; color: var(--ink-soft);
}
.pl-bron .knoppen { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pl-bron .pl-hint { margin-top: 8px; }
.pl-bron-fases { list-style: none; margin: 10px 0 0; font-size: 13px; }
.pl-bron-fases li {
  display: flex; gap: 12px; justify-content: space-between;
  padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--ink);
}
.pl-bron-fases li span { color: var(--mist); flex: none; }
/* De fasenaam in zo'n lijst is de inhoud, niet het bijschrift: hij mag afbreken
   op een smal scherm en houdt de kleur van gewone tekst. De datum ernaast
   blijft het bijschrift (mist, niet afbreken). */
.pl-bron-fases li .naam { color: var(--ink); flex: 1; min-width: 0; }
.pl-bron label.pl-vanaf {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13px; color: var(--mist);
}
.pl-bron label.pl-vanaf input[type=date] {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 6px 8px; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface);
}

.pl-log { list-style: none; margin-top: 10px; font-size: 13px; }
.pl-log li { padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.pl-log .wanneer { color: var(--mist); }
.pl-alleen-lezen { font-size: 13px; color: var(--mist); margin: 16px 0; }

/* -------------------------------------------------------- smalle tijdlijn */
/* Het mobiele beeld (planning.js tekent dit onder 720px). Wat een telefoon
   sloopt is niet de tijdas maar de labelkolom ernaast: 208 pixels naam liet er
   174 over voor twaalf maanden. Hier staat de naam bóven zijn balk, dus is de
   volle schermbreedte tijdas — dezelfde weken en dezelfde vormen als op de
   laptop.

   Geen kader om het geheel: een telefoon heeft die twee pixels harder nodig dan
   het scherm een lijstje-gevoel. De rijen scheiden zich met hairlines, zoals in
   de brede tijdlijn. */
.pl-smal { border-top: 1px solid var(--line); }

/* De maandschaal blijft bovenaan plakken. Zonder dat lees je bij de achtste
   klus een balk zonder te weten in welke maand hij ligt — en scrollen naar de
   kop en weer terug is precies wat een tijdlijn je uit handen zou moeten nemen.
   Let op: geen overflow:hidden op een voorouder, anders plakt hij niet meer. */
.pl-smal-as {
  position: sticky; top: 0; z-index: 3; min-width: 0;
  background: var(--surface-warm); border-bottom: 1px solid var(--line);
}
/* Dezelfde laag als de overlay van de brede tijdlijn (gesloten weken +
   maandgrenzen), maar per baan in plaats van één keer over alles heen: tussen
   twee banen staan hier een naam en een zin, en daar hoort geen arcering en
   geen maandlijn doorheen. */
.pl-smal-tint {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; grid-template-columns: var(--pl-kolommen);
  grid-template-rows: 1fr;
}
.pl-smal-as .pl-arcering { border: none; }
/* De weeknummerrij houdt zijn eigen ondergrond: de arcering van een gesloten
   week loopt over de volle hoogte van de kop, en een gestreepte 52 leest niet.
   In de maandband erboven is die arcering wél te zien, en de weekcel zelf
   vergrijst al bij .pl-week.gesloten. */
.pl-smal-as .pl-weken { position: relative; z-index: 2; background: var(--surface-warm); }
/* De maandgrens loopt licht door elke baan door: dan hangt een balk onderaan de
   lijst nog steeds aan de schaal bovenaan. Alleen de maandgrens — elke week een
   lijn geven maakt er een hek van waar de balken in verdwijnen. */
.pl-smal-tint .pl-maandgrens { grid-row: 1; border-left: 1px solid rgba(135,149,173,.16); }

/* De maand is op een telefoon de maat: per week plan je hier niet. Daarom hangt
   de hele schaal aan de maand — de naam staat gecentreerd bóven zijn weken, die
   weken dragen dezelfde tint, en alleen de overgang tussen twee maanden is een
   harde lijn. Daarvóór stond de maandnaam links uitgelijnd en het weeknummer
   gecentreerd: twee ritmes boven elkaar, en dan lees je een rij losse getallen
   in plaats van een tijdschaal.

   Krap op de letter en krap op de rand: in het jaar is een maand hier 25 pixels
   breed, en met 11px plus 4px lucht paste 'aug' er net niet in. Dan viel het
   label terug op één letter, en 'j' kan jan, jun of jul zijn — erger dan geen
   label. Met deze maten past overal de afkorting van drie letters. */
.pl-smal .pl-maand {
  font-size: 10.5px; padding: 5px 2px 3px; text-align: center;
}
.pl-smal .pl-week {
  font-size: 10.5px; padding: 4px 1px; min-height: 19px;
  border-left-color: rgba(135,149,173,.18);
}
.pl-smal .pl-week.om { background: rgba(135,149,173,.07); }
.pl-smal .pl-week.maandstart { border-left-color: var(--line); }
.pl-smal .pl-week:first-child { border-left: none; }
.pl-smal-as.geen-weken .pl-weken { display: none; }

/* Geen zijpadding, en dat is geen slordigheid maar de kern: de kop is precies
   zo breed als de tijdas, dus elke pixel padding hier verschuift de balken ten
   opzichte van de schaal erboven. Met 2 pixels links stond de maandgrens in de
   rij anderhalve pixel naast die in de kop, en liep het verschil naar rechts op
   tot vier — genoeg om een balk onder de verkeerde maand te laten eindigen. */
.pl-smal-rij {
  padding: 13px 0 15px; border-top: 1px solid var(--line);
  cursor: pointer; transition: background .15s var(--ease);
}
.pl-smal-rij:first-of-type { border-top: none; }
/* Alleen waar een muis is: op een telefoon blijft de hover-staat na een tik
   hangen, en dan lijkt de laatst aangetikte klus geselecteerd te staan. */
@media (hover: hover) {
  .pl-smal-rij:hover { background: var(--surface-warm); }
}
/* Per onderdeel dimmen, om dezelfde reden als bij .pl-rij hierboven: opacity op
   de rij maakt er een stapelcontext van, en dan legt de eerste overlay die
   erbij komt zijn arcering bovenóp de tekst in plaats van eronder. */
.pl-smal-rij.rust .naam,
.pl-smal-rij.rust .project,
.pl-smal-rij.rust .zin,
.pl-smal-rij.rust .badges,
.pl-smal-rij.rust .pl-balk,
.pl-smal-rij.rust .pl-ruit,
.pl-smal-rij.rust .pl-buiten { opacity: .66; }
.pl-smal-rij .kop { display: flex; gap: 10px; align-items: flex-start; }
.pl-smal-rij .kop > div { min-width: 0; flex: 1; }
.pl-smal-rij .naam { font-weight: 600; color: var(--ink); line-height: 1.3; }
.pl-smal-rij .project { font-size: 13px; color: var(--mist); margin-top: 1px; }
.pl-smal-rij .kop .badge { flex: none; }
.pl-smal-rij .zin {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; margin: 7px 0 0;
}
.pl-smal-rij .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* De baan draagt zijn eigen tintlaag, dus hij is het houvast voor de absolute
   positionering erin. Lager en dichter op elkaar dan op een breed scherm: een
   balk zonder naam heeft geen 22 pixels nodig.

   De 8 pixels onderlucht die hier voor de koperen dag-streep stonden zijn
   eruit: die streep is weg, en op een telefoon is verticale ruimte het schaarse
   goed. Wat blijft is lucht boven de balk, los van de zin erboven. */
.pl-smal .pl-baan { position: relative; padding: 11px 0 2px; row-gap: 3px; }
.pl-smal .pl-balk {
  position: relative; height: 16px; line-height: 16px; font-size: 10px;
  padding: 0 5px;
}
.pl-smal .pl-balk.licht, .pl-smal .pl-balk.voorstel { line-height: 14px; }
.pl-smal .pl-uitleg { padding: 11px 2px; }

/* ------------------------------------------------------------- klein scherm */
/* Tussen telefoon en ruime laptop: de labelkolom smaller, anders houdt de as
   te weinig over en vallen de maandnamen terug op één letter — en 'j' kan jan,
   jun of jul zijn, wat erger is dan geen label. */
@media (max-width: 1180px) {
  .pl-tijdlijn { --pl-label: 208px; }
  .pl-label { padding: 11px 13px; }
}
@media (max-width: 900px) {
  .pl-velden { grid-template-columns: 1fr; }
  .pl-fase-rij { grid-template-columns: 1fr auto; grid-auto-flow: dense; }
}
/* 760 en niet 720: app.css schakelt zijn eigen telefoonlayout op dezelfde grens.
   Stonden die uit elkaar, dan kreeg je tussen 721 en 760 pixels (iPad mini
   staand op 744, telefoon liggend) de laptoptekening in een telefoonlayout. */
@media (max-width: 760px) {
  /* Hier kantelt de tijdlijn: naam naast de balk wordt naam boven de balk. */
  .pl-breed { display: none; }
  /* Flexkolom, want de legenda hoort hier bóven de klussen. Onderaan stond hij
     ná alle rijen, dus las je acht balken voordat er stond wat de vormen
     betekenen. De plakkende maandschaal blijft gewoon plakken. */
  .pl-smal { display: flex; flex-direction: column; }
  .pl-smal .pl-smal-as { order: 0; }
  .pl-smal .pl-uitleg { order: 1; }
  .pl-smal .pl-smal-rij { order: 2; }
  /* De vier tegels als één regel per tegel: label en getal naast elkaar, de
     toelichting eronder weg. Ze kostten 226 van de ruim 900 pixels chrome die
     boven de eerste klus stonden, op een tijdlijn die zelf 443 pixels kreeg. */
  .pl-tegels { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pl-tegels .an-tegel {
    padding: 8px 12px; display: flex; align-items: baseline;
    gap: 8px; flex-wrap: wrap;
  }
  .pl-tegels .an-tegel-label { font-size: 11px; letter-spacing: .08em; }
  .pl-tegels .an-tegel-groot { font-size: 19px; margin-top: 0; }
  .pl-tegels .an-tegel-sub { display: none; }
  /* De schakelbalk als één rij knoppen in plaats van drie blokjes onder elkaar.
     `display: contents` haalt de tussenlaag .rechts weg, zodat flex-wrap de vier
     schakelaars zelf mag verdelen; met `order` staat 'Toon afgeronde' naast de
     weergavekeuze en krijgt de periodekeuze de regel eronder. Past het niet, dan
     wrapt het gewoon verder -- nooit slechter dan de drie rijen die het was. */
  .klus-balk { gap: 8px 14px; margin-bottom: 18px; }
  .klus-balk .rechts { display: contents; }
  .klus-balk .pl-vink { order: 1; }
  .klus-balk .pl-schakelaar { order: 2; }
  .klus-balk .demo-toggle { order: 3; margin-top: 0; }
  .klus-schakelaar button { padding: 7px 12px; min-height: 44px; }
  /* Aanraakdoelen. De periodeknoppen waren 29 pixels hoog en de vinkjes
     daarnaast net zo klein: dat is op een telefoon twee keer mikken. */
  .pl-schakelaar { gap: 6px; }
  .pl-schakelaar button { min-height: 44px; padding: 4px 14px; }
  .pl-vink { min-height: 44px; }
  .pl-vink input[type=checkbox] { width: 20px; height: 20px; }
  /* Het statusformulier is sinds fase 7 ook een telefoonformulier: dit wordt op
     de bouw ingevuld, met een handschoen of een natte vinger. Zelfde grens als
     de knoppen hierboven. */
  .pl-vorm .knoppen button,
  .pl-velden input, .pl-velden select { min-height: 44px; }
  .pl-radio { gap: 10px 18px; }
  .pl-radio label { min-height: 44px; }
  .pl-radio input[type=radio] { width: 20px; height: 20px; }
  /* Zelfde iOS-grens als in app.css: onder 16 pixels zoomt de pagina in bij
     focus en niet meer uit. De selectors zijn gelijk aan de basisregels,
     zodat deze — later in het bestand — winnen. */
  .pl-vorm input[type=text], .pl-vorm input[type=date], .pl-vorm input[type=number],
  .pl-vorm select, .pl-vorm textarea,
  .pl-fase-rij input[type=date],
  .pl-vorm label.pl-vanaf input[type=date],
  .pl-bron label.pl-vanaf input[type=date] { font-size: 16px; }
  /* De sectieknoppen van het paneel (Status melden, Betalingen, Details) waren
     38 pixels hoog; zelfde aanraakgrens als de rest van dit blok. */
  .pl-tab { min-height: 44px; }
}