/* ==========================================================================
   drive.css — the Bestanden page
   --------------------------------------------------------------------------
   Three columns on a desk: a rail of places, the folder you are in, and the
   file you are looking at. Two on a laptop, one on a phone, where the preview
   becomes a sheet that comes up over the list — a 300-pixel column beside a
   300-pixel column is two things nobody can read.
   ========================================================================== */

/* The root block is `.files`, not `.drive`, even though everything inside it
   is `drive-*`: `.drive` is already taken by the car that drives across the
   screen after you log in (components.css), and that one is `position: fixed;
   z-index: 300`. Two blocks with one name is a bug that only shows up as
   "clicking does nothing". */

/* Randloos, zoals de documentatiepagina. De rail van deze pagina is een echte
   kolom die tegen de zijbalk van de app aan staat en tot onderaan doorloopt;
   met de marge van `.page` eromheen zweefde hij op de paginakleur en was het
   een blokje tekst in plaats van een kolom. */
#files-page.page {
  max-width: none;
  padding: 0;
}

.files {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  position: relative;
  min-height: calc(100vh - var(--topbar-h, 60px));
}

.files:has(.drive-panel) {
  grid-template-columns: 230px minmax(0, 1fr) 360px;
}

/* Every column can shrink below its content. Without this a grid item keeps
   its min-content width and pushes the whole page sideways — which is what the
   rail did on a phone, where it lays its three places out in a row. */
.files > * { min-width: 0; }

/* De middenkolom is een container, en dat is geen sierlijkheid: met het paneel
   open is hij op 1400 pixels nog maar 498 breed, terwijl de tabel er 574 nodig
   heeft. Een mediaquery ziet dat niet — die meet het venster, en het venster is
   dan nog steeds 1400. De tabel stak er onderuit, precies onder het paneel,
   waar de knoppen van een rij niets meer deden en de rij er normaal uitzag. */
.files__main { min-width: 0; container-type: inline-size; container-name: hoofdkolom; }

/* ==========================================================================
   The rail
   ========================================================================== */

.drive-rail {
  position: sticky;
  top: var(--topbar-h, 60px);
  height: calc(100vh - var(--topbar-h, 60px));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  background: var(--surface-raised);
  border-right: 1px solid var(--border-subtle);
}

/* Nieuw staat bovenaan vast, de opslag onderaan, en alleen het middenstuk
   scrollt. Zonder dit zakt de opslag onder de vouw zodra je meer dan een
   handvol projecten hebt — terwijl dat juist het ding is dat er altijd hoort
   te zijn. */
.drive-rail__mid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* De opslag zit vást onderaan, zoals in het ontwerp: het is geen plek waar je
   heen gaat maar een stand die er altijd is.

   De streep loopt van rand tot rand en niet alleen onder de tekst — vandaar de
   negatieve marge die de padding van de rail opheft. Gemeten in het ontwerp:
   het blok is 229 breed in een rail van 229, met 12 pixels rondom. */
.drive-rail .drive-store {
  flex: none;
  align-self: stretch;
  gap: var(--space-2);
  margin: 0 calc(var(--space-3) * -1) calc(var(--space-4) * -1);
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* 34 hoog met 1 pixel ertussen, gemeten in het ontwerp: 35 van hart tot hart.
   Wij zaten op 36 met 2 ertussen, en over zeven plekken plus twee mappenlijsten
   loopt dat op tot een rail die een halve regel langer is dan hij hoeft. */
.drive-rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

/* Het kopje boven een groep plekken. Ruimte erboven en niet eronder: hij hoort
   bij wat eronder staat, niet bij wat erboven eindigt. */
.drive-rail__group {
  margin-top: var(--space-4);
  padding: 0 var(--space-3) var(--space-1);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  /* `--text-faint` haalde 3,3:1 op deze achtergrond. Een kopje boven een groep
     is informatie en geen decoratie, dus dezelfde inkt als de andere kopjes op
     deze pagina. */
  color: var(--text-muted);
}

.drive-rail__group:first-child { margin-top: 0; }

/* De twee mappenlijsten. Hun kopje is een knop, want je kunt ze dichtdoen —
   met dertig projecten is een rail die niet dicht kan een rail waarin je moet
   scrollen om bij de prullenbak te komen. */
.drive-rail__foldhead {
  width: 100%;
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.drive-rail__foldhead:hover { background: var(--surface-hover); }
.drive-rail__foldhead:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.drive-rail__foldname {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.drive-rail__caret {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-rail__caret--shut { transform: rotate(-90deg); }

/* Een map onder een kopje staat een pictogrambreedte naar binnen, zodat je aan
   de inspringing ziet dat hij eronder hoort. */
.drive-rail__item--sub { padding-left: var(--space-4); font-size: var(--text-xs); }
.drive-rail__item--sub .drive-rail__icon { width: 15px; height: 15px; }
.drive-rail__item--sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drive-rail__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
}

.drive-rail__item:hover { background: var(--surface-hover); color: var(--text-primary); }

.drive-rail__item[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  font-weight: 600;
}

.drive-rail__icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-rail__count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.drive-rail__item[aria-current="page"] .drive-rail__count { color: inherit; }

/* ---- storage ------------------------------------------------------------ */

.drive-store { display: grid; gap: var(--space-2); padding: 0 var(--space-3); }

.drive-store__label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.drive-store__value { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); }

/* "6,8 MB van 100,0 MB": het getal dat je zoekt vet, de rest erachteraan. De
   maten komen uit het ontwerp — 12 en 11,5 pixels, niet 13 en 12. */
.drive-store__top {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: var(--text-2xs);
  /* Vaste regelhoogte: die van het lettertype maakte de regel 19 hoog waar het
     ontwerp op 16 zit, en over vier regels loopt dat op tot een blok dat elf
     pixels langer is dan het hoort. */
  line-height: 1.3;
  color: var(--text-muted);
}

.drive-store__used { font-size: var(--text-xs); color: var(--text-primary); }
.drive-store__note {
  margin: 0;
  font-size: var(--text-2xs);
  line-height: 1.35;
  color: var(--text-muted);
}

/* Een keuzegroep in een veld hoort zo breed te zijn als zijn knoppen. Zonder
   dit rekt hij uit tot de rand van de dialoog en staat er een halve balk
   niets naast drie knopjes. */
.field__pick { width: fit-content; }

.drive-store__ask {
  width: 100%;
  height: 30px;
  margin-top: var(--space-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.drive-store__ask:hover { background: var(--surface-hover); color: var(--text-primary); }
.drive-store__ask:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Een verzoek dat loopt hoort te blijven staan tot er antwoord is. Zonder deze
   regel is de knop na het versturen weer dezelfde knop, en vraag je het over
   een week nog een keer. */
.drive-store__pending {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.drive-store__pendingIcon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-store__undo {
  align-self: start;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.drive-store__undo:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* ==========================================================================
   The head
   ========================================================================== */

/* Eén witte strook over de inhoud, met een rand eronder: het kruimelpad links,
   en alles waarmee je de lijst bijstelt rechts. Ze stonden bij ons op drie
   regels onder elkaar, met een kop van 20 pixels erboven — samen bijna 200
   pixels voordat het eerste bestand in beeld kwam. */
/* Eén strook, en overal dezelfde 10 pixels ertussen. Het ontwerp zet het
   kruimelpad, de vier menuknoppen en de weergaveschakelaar in één rij met
   `gap: 10px`; wij hadden 12 tussen de groepen en 8 erbinnen, en dan valt de
   rij uiteen in drie klontjes in plaats van één ritme. 18 links en rechts is
   ook uit het ontwerp — geen token, want tussen 16 en 20 zit er geen. */
.drive-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: var(--space-3) 18px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}

.drive-head__top { flex: 1 1 12rem; min-width: 0; }

/* Wel `flex: 0 1 auto` en niet `flex: none`: op ongeveer 1100 pixels passen de
   drie filters, de sortering en de weergaveknoppen niet meer naast het
   kruimelpad, en een strook die niet mag krimpen duwt de hele pagina dan
   zijwaarts. Gemeten: 1173 in een venster van 1100. */
.drive-head__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
  gap: 10px;
  justify-content: flex-end;
}

.drive-body { padding: var(--space-4); }

.drive-tools__right { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* Lijst en Tegels als twee pictogrammen van 26 bij 26, uiterst rechts. De
   klasse staat hier en niet in components.css: `.segmented` is elders een rij
   woorden en die mag hier niet van veranderen. */
.segmented--icons .segmented__btn--icon {
  width: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.segmented__icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- de filters --------------------------------------------------------- */

.drive-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* ---- aanvinken ---------------------------------------------------------- */

.tickbox {
  width: 18px;
  height: 18px;
  justify-self: center;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--accent-ink);
  cursor: pointer;
}

.tickbox--on { border-color: var(--accent); background: var(--accent); }

/* Een bestand van iemand anders is niet aan te vinken. Het vakje staat er wel,
   want zonder vakje schuift de hele rij een kolom op. */
.tickbox--none { border: 0; background: none; cursor: default; }

.tickbox:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.tickbox__mark {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* De balk met wat je met de aangevinkte bestanden kunt. Hij hoort onder de
   filters en boven de lijst: daar staat hij tussen de vraag en het antwoord. */
.drive-picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}

.drive-picked__count { font-size: var(--text-sm); font-weight: 600; color: var(--accent-soft-ink); }

.drive-picked__acts {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-left: auto;
}

.drive-picked__close { flex: none; }

/* De sleep-hint. Streepjesrand, want het is een vlak waar iets in mag en niet
   een knop waar je op drukt. */
.drive-rail__drop {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: var(--text-2xs);
  line-height: 1.35;
  color: var(--text-secondary);
}

.drive-rail__dropIcon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Geen bestanden en geen filter aan: dan is een filterbalk een balk over
   niets. Hij blijft wel in de opmaak staan zodat de lijst niet verspringt
   zodra het eerste bestand er is. */
.drive-filters--none { min-height: 30px; }

.drive-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.drive-filter__btn:hover { border-color: var(--border-hover); }

/* Het ontwerp zet hier een `:focus` neer, dus ook na een muisklik. Dat nemen we
   niet over — een ring om een knop die je net hebt aangewezen is ruis. De
   vórm nemen we wel over: rand plus ring in plaats van een losse outline. */
.drive-filter__btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* Een filter dat aanstaat moet je zien zónder de waarde te lezen — anders
   zoek je naar een bestand dat er wel is en zegt de pagina niets. */
.drive-filter__btn--on {
  border-color: var(--accent-soft-border);
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

/* Het kopje is een kopje: klein, vet, kapitaal, gespatieerd — de vorm die het
   ontwerp overal voor een veldnaam gebruikt. 10,5 pixels staat in geen enkele
   schaal, ook niet in die van het ontwerp zelf; het is de maat die daar
   gemeten is.

   De kléúr van het ontwerp nemen we niet over. Dat is `--stone-400`, en dat
   haalt op wit 3,5:1 — onder de 4,5 die in dit project geldt, en juist bij
   tien-en-een-halve pixel is dat geen theorie. Blijft `--text-muted`. */
.drive-filter__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Ook als het filter aanstaat blijft het kopje het kopje. Het is de waarde die
   veranderd is, niet het woord ervoor.

   Eén stap donkerder dan in de ruststand, en dat moet: de vulling eronder is
   dan `--accent-soft`, en die is in het donkere thema lichter dan de pagina.
   `--text-muted` haalde daar 4,11:1 — gemeten, niet geschat. */
.drive-filter__btn--on .drive-filter__label { color: var(--text-secondary); }

.drive-filter__value { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.drive-filter__btn--on .drive-filter__value { color: inherit; }

.drive-filter__caret {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-filter__btn[aria-expanded="true"] .drive-filter__caret { transform: rotate(180deg); }

/* Twee knoppen, geen onderstreepte tekstlink. Ze staan tussen de filters en de
   sortering en horen daar bij die vier — een link ertussen leest als een
   voetnoot, terwijl dit de enige twee knoppen in de rij zijn die iets dóén in
   plaats van iets openklappen. */
.drive-filters__act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.drive-filters__act:hover { background: var(--surface-hover); }

.drive-filters__act:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Bewaren is de enige van de twee die iets toevoegt in plaats van weghaalt, en
   draagt daarom de zachte groene stand die een filter ook draagt als hij aan
   staat. Zo hoort hij bij wat je zojuist hebt ingesteld. */
/* Alleen deze krijgt een rand — precies zoals in het ontwerp, en dat is ook
   waarom hij één pixel breder is dan je op het oog zou tekenen. */
.drive-filters__act--keep {
  border: 1px solid var(--accent-soft-border);
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

.drive-filters__act--keep:hover { background: var(--accent-soft-hover); }

.drive-filters__actIcon {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Het filtermenu is krapper dan de andere menu's in de app: 30 pixels per regel
   met één pixel ertussen. Dat kan hier omdat een regel één woord is en je hem
   niet leest maar aanwijst — in het Nieuw-menu staat er een zin onder elke
   ingang en daar zou dit onleesbaar zijn. Vandaar op `--filter` en niet op
   `.menu` zelf. */
.menu--filter {
  left: 0;
  right: auto;
  top: 34px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 186px;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 19, 19, 0.12);
  max-height: 280px;
  overflow-y: auto;
}

/* Sorteren is de laatste knop in de rij en staat het dichtst bij de rand. Een
   menu dat daar links uitlijnt steekt eruit, dus dat lijnt rechts uit. Het
   heeft ook geen maximum: vier regels halen dat toch nooit, en een lijst die
   kán schuiven terwijl er niets te schuiven valt tekent een spoor. */
.menu--sort { left: auto; right: 0; min-width: 180px; max-height: none; overflow-y: visible; }


.menu--filter .menu__item--pick {
  height: 30px;
  padding: 0 var(--space-2);
  gap: 9px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 500;
}

/* De gekozen regel is een gevuld vlakje, niet alleen een vinkje aan de rand.
   In een lijst van acht soorten kijk je naar de linkerkant — daar staan de
   woorden — en een merkteken 150 pixels verderop staat buiten dat kijkveld. */
.menu--filter .menu__item--pick[aria-checked="true"] {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  font-weight: 600;
}

.menu--filter .menu__item--pick[aria-checked="true"]:hover { background: var(--accent-soft-hover); }

/* De telling gaat mee met de kleur van de regel waar hij op staat. Het grijs van
   `--menu__count` haalde op de groene vulling in donker 4,11:1 — hetzelfde
   struikelpunt als het kopje hierboven, en dezelfde oplossing. */
.menu--filter .menu__item--pick[aria-checked="true"] .menu__count { color: inherit; }

.menu__count {
  margin-left: auto;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Het vinkje stond op `margin-left: auto`; met een telling ernaast zijn dat er
   twee die allebei naar rechts willen. De telling duwt, het vinkje volgt. */
.menu__item--pick .menu__check { margin-left: var(--space-2); }
.menu--filter .menu__check { font-size: 13px; }

/* Het zoekveld staat in de rail, onder Nieuw: het is een vraag over al je
   bestanden en niet over de map waar je toevallig staat. */
.drive-search { width: 100%; }
.drive-rail__top { display: grid; gap: var(--space-2); }
.drive-rail__top .drive-new,
.drive-rail__top .drive-new__btn { width: 100%; }

/* Sorteren staat altijd ergens op, dus hij licht niet op zoals een filter dat
   aanstaat — anders staat er permanent iets te roepen. */
.drive-filter__btn--sort .drive-filter__value { font-weight: 600; }

/* Een bewaard filter in de rail: de link neemt de ruimte, het kruisje staat
   ernaast en komt pas tevoorschijn als je de regel aanwijst of erheen tabt.
   Altijd zichtbaar zou van elke regel een regel-met-een-knop maken, en je komt
   hier om er een aan te klikken en niet om er een weg te gooien. */
.drive-rail__viewrow { display: flex; align-items: center; gap: var(--space-1); }

/* De regel is hier een `<button>` en geen `<a>` — dus krijgt hij de breedte en
   de uitlijning die een link vanzelf had. */
.drive-rail__viewrow .drive-rail__item {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.drive-rail__viewoff {
  flex: none;
  width: 22px;
  height: 22px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.drive-rail__viewrow:hover .drive-rail__viewoff,
.drive-rail__viewoff:focus-visible { opacity: 1; }

@media (hover: none) {
  .drive-rail__viewoff { opacity: 1; }
}

/* ---- breadcrumbs -------------------------------------------------------- */

.drive-crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  min-width: 0;
}

.drive-crumbs__here {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
}

.drive-crumbs__step {
  font-size: var(--text-md);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.drive-crumbs__step:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

.drive-crumbs__sep {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   The body
   ========================================================================== */

.drive-body { display: grid; gap: var(--space-3); align-content: start; }

.drive-section {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.drive-section:first-child { margin-top: 0; }

.drive-note { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* De regel boven de prullenbak: waarom er dertig dagen op staat, en de knop
   die ze overslaat. Die twee horen naast elkaar — de knop zonder de zin is
   een knop waarvan je niet weet wat hij weggooit. */
.drive-trashbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

/* Whose drive this is. A shared drive that does not say who it is shared with
   is just a folder with a different name. */
.drive-team {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-size: var(--text-sm);
}

.drive-team__icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-team__text { color: var(--text-secondary); }

/* An avatar's face is the sunken surface, so the strip behind it has to be the
   raised one — sunken on sunken is five sets of initials floating in a grey
   box with no faces under them, and each ring then eats the left edge of the
   next one's letters. Raised strip, sunken faces, ring in the strip's colour.

   They are also a size bigger here than on a project card, because this strip
   has the room and the people on a drive are the point of it. */
.drive-team .avatar-stack .avatar {
  width: 28px;
  height: 28px;
  box-shadow: 0 0 0 2px var(--surface-raised);
}

/* ---- folders ------------------------------------------------------------ */

.drive-folders__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
}

.drive-folders__head .drive-section { margin: 0; }
.drive-folders__sorts { margin-left: auto; display: flex; gap: 2px; }

.drive-folders__sort {
  height: 24px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.drive-folders__sort:hover { background: var(--surface-hover); color: var(--text-primary); }
.drive-folders__sort--on { background: var(--surface-sunken); color: var(--text-primary); }
.drive-folders__sort:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Mappen zijn kaartjes, in beide standen.

   Ze waren regels, en daar stond een reden bij: "in de lijst is een map een
   regel, net als een bestand — er een doos van maken laat hem groter lijken
   dan wat erin zit." Die vlieger gaat niet meer op sinds de bestanden zelf in
   een omkaderde tabel staan: dan zijn juist de mappen de losse regels ernaast,
   en vier ervan over de volle breedte met niets erlangs is een halve pagina
   leeg. */
.drive-folders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
  gap: var(--space-2);
}

.drive-folder {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text-primary);
  min-width: 0;
}

.drive-folder__open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-lg);
}

.drive-folder__open:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.drive-folder:hover .drive-folder__name { text-decoration: underline; }

/* Hetzelfde getinte vlak als op een bestandsregel: een map en een bestand
   staan onder elkaar en horen dezelfde maat te hebben. */
.drive-folder__tile {
  width: 32px;
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.drive-folder:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.drive-folder__icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-folder--system .drive-folder__icon { stroke: var(--text-muted); }

.drive-folder__text { min-width: 0; display: grid; }

.drive-folder__name {
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drive-folder__meta { font-size: var(--text-xs); color: var(--text-muted); }

.drive-folder__actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
  opacity: 0;
}

.drive-folder:hover .drive-folder__actions,
.drive-folder:focus-within .drive-folder__actions { opacity: 1; }

/* Touch has no hover, so there is nothing to reveal. */
@media (hover: none) {
  .drive-folder__actions { opacity: 1; }
}

/* ---- files -------------------------------------------------------------- */

.drive-files { display: grid; gap: 2px; }

.drive-files--grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  /* Elke rij even hoog als de hoogste. Zonder dit meet elke rij zichzelf, en
     dan is een tegel waarvan de labels omslaan 24 pixels hoger dan zijn buren —
     een raster met een rafelrand. `1fr` is hier `minmax(auto, 1fr)`: er valt in
     een raster zonder vaste hoogte niets te verdelen, dus krijgen ze allemaal
     de maat van de grootste. */
  grid-auto-rows: 1fr;
  gap: var(--space-3);
}

/* De lijst is een tabel, geen stapel regels: over elk bestand dezelfde vier
   antwoorden, elk op dezelfde plek. Eén omhulsel met één rand eromheen, want
   veertig losse kaartjes onder elkaar zijn veertig randen om langs te lezen. */
/* Geen `overflow: hidden` om de hoeken rond te snijden: het menu van een rij
   hangt buiten de kaart en zou eraf gesneden worden. De eerste en de laatste
   rij ronden zichzelf af. */
.drive-files--list {
  display: block;
  gap: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.drive-files__head {
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}

.drive-files--list .drive-file:last-child {
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
}

/* De kop en de regels delen één rasteropgave. Ze staan hier samen omdat ze
   niet uit elkaar mogen lopen: een kolomkop boven de verkeerde kolom is
   erger dan geen kolomkop. */
.drive-files__head,
.drive-files--list .drive-file {
  display: grid;
  /* `minmax(0, …)` en niet `minmax(240px, …)`: die 240 komt uit het ontwerp, en
     daar staat de lijst zonder paneel ernaast. Bij ons wordt de middenkolom
     smaller zodra je een bestand opent, en een raster dat niet onder zijn
     minimum kan steekt dan onder het paneel uit in plaats van te krimpen. Dat
     was met het oog niet te zien — de knoppen van een rij lagen eronder en
     deden niets meer. Een mediaquery lost het niet op: die meet het venster en
     niet de kolom. */
  grid-template-columns: 34px minmax(0, 1.6fr) auto 124px 132px 92px 108px;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-3);
}

.drive-files__head {
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-sunken);
}

.drive-files__col {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}

.drive-files__col:hover { color: var(--text-primary); }
.drive-files__col--on { color: var(--text-primary); }
.drive-files__col:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.drive-files__col--size { justify-content: flex-end; }
/* De laatste kolom draagt de knoppen; hij heeft geen naam, en een knop die
   niets doet hoort er niet te staan. */
.drive-files__col--actions { cursor: default; }

.drive-files__arrow { font-size: 9px; line-height: 1; }

.drive-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  min-width: 0;
}

.drive-files--list .drive-file {
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  /* 50 in het ontwerp, 56 bij ons: over dertien regels is dat bijna tachtig
     pixels die je moet scrollen om hetzelfde te zien. De naam en de plek
     eronder krijgen daarom een vaste regelhoogte in plaats van die van het
     lettertype. */
  min-height: 50px;
}

.drive-files--list .drive-file__name { line-height: 1.35; }
.drive-files--list .drive-file__meta { line-height: 1.3; }
.drive-files--list .drive-file__open { padding-block: var(--space-1); }

.drive-files--list .drive-file:last-child { border-bottom: 0; }

.drive-file:hover { background: var(--surface-hover); }
.drive-file--open { background: var(--accent-soft); border-color: var(--accent); }
.drive-file--picked { background: var(--accent-soft); }
.drive-files--list .drive-file--open { box-shadow: inset 3px 0 0 var(--accent); }

.drive-file__open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  font: inherit;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
}

/* In de tabel draagt de rij de ruimte, niet de link — anders schuift de naam
   een halve kolom op ten opzichte van zijn eigen kolomkop. */
.drive-files--list .drive-file__open { padding-inline: 0; }

/* Een streep onder elke naam én onder elke mapnaam maakt van een lijst een
   veld strepen. De streep komt terug zodra je de rij aanwijst — dan is hij
   antwoord op een vraag in plaats van decoratie. */
.drive-file__open { text-decoration: none; }
.drive-file:hover .drive-file__name,
.drive-file__open:focus-visible .drive-file__name { text-decoration: underline; }

.drive-file__open:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }

/* Het pictogram in een getint vlak. Het bestandstype is op een lange lijst
   sneller een kleur dan een woord. */
.drive-file__tile {
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.drive-file__icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A file type is worth a colour — you find the image among the documents by
   glance rather than by reading nine names.

   Het vlak achter het pictogram is nu ook getint, zoals in het ontwerp. Dat
   wachtte op zes palettewaarden die er niet waren; die staan sinds vandaag in
   `tokens.css`, als wassing van de kleur zelf. */
.drive-file__tile--image { background: var(--chart-1-soft); }
.drive-file__tile--pdf { background: var(--chart-2-soft); }
.drive-file__tile--sheet { background: var(--chart-3-soft); }
.drive-file__tile--slides { background: var(--chart-4-soft); }
.drive-file__tile--text { background: var(--chart-7-soft); }
.drive-file__tile--audio,
.drive-file__tile--video { background: var(--chart-5-soft); }

.drive-file__head--image { background: var(--chart-1-soft); }
.drive-file__head--pdf { background: var(--chart-2-soft); }
.drive-file__head--sheet { background: var(--chart-3-soft); }
.drive-file__head--slides { background: var(--chart-4-soft); }
.drive-file__head--text { background: var(--chart-7-soft); }
.drive-file__head--audio,
.drive-file__head--video { background: var(--chart-5-soft); }

.drive-file__head--sheet .drive-file__icon { stroke: var(--chart-3); }
.drive-file__head--slides .drive-file__icon { stroke: var(--chart-4); }
.drive-file__head--text .drive-file__icon { stroke: var(--chart-7); }
.drive-file__head--audio .drive-file__icon,
.drive-file__head--video .drive-file__icon { stroke: var(--chart-5); }
.drive-file__tile--image .drive-file__icon { stroke: var(--chart-1); }
.drive-file__tile--pdf .drive-file__icon { stroke: var(--chart-2); }
.drive-file__tile--sheet .drive-file__icon { stroke: var(--chart-3); }
.drive-file__tile--slides .drive-file__icon { stroke: var(--chart-4); }
.drive-file__tile--text .drive-file__icon { stroke: var(--chart-7); }
.drive-file__tile--audio .drive-file__icon,
.drive-file__tile--video .drive-file__icon { stroke: var(--chart-5); }

.drive-file__text { min-width: 0; display: grid; flex: 1; }

/* De badges staan tussen de naam en de kolommen. Ze krijgen geen eigen kolom:
   het zijn er nul tot vier en een lege kolom van vaste breedte is ruimte die de
   naam beter kan gebruiken. */
.drive-file__badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-width: 0;
  overflow: hidden;
}

/* Géén `display: none` als hij leeg is: dan valt de cel uit het raster en
   schuift alles erna een kolom op. Een lege cel hoort zijn plek te houden. */

.drive-file__badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: 600;
  white-space: nowrap;
}

.badge__icon {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Op een tegel is er geen ruimte naast de naam; daar staan ze onder het
   voorbeeld, op de voetregel. */
/* In de lijst is dit een cel in een raster met een vaste breedte, en daar hoort
   afknippen: de kolom ernaast mag niet gaan schuiven. In een tegel is het een
   regel over de volle breedte, en dan knipt hetzelfde `overflow: hidden` een
   woord doormidden — op 390 pixels stond er "ontvang" met de rest buiten de
   tegel. Een tegel heeft geen kolom naast zich die kan verschuiven, dus daar
   mogen ze omlaag. */
.drive-files--grid .drive-file__badges {
  padding: 0 var(--space-3) var(--space-2);
  flex-wrap: wrap;
  overflow: visible;
}

/* ---- de kolommen naast de naam ---- */

.drive-file__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.drive-file__source > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drive-file__source-icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Het ontwerp geeft elke herkomst zijn eigen inkt. Gemeten haalt dat het
   niet: de grafiekkleuren zijn gekozen om als VLAK te werken, en een staaf
   van veertig pixels breed komt weg met wat een letter van twaalf niet haalt
   — chart-2 kwam op 3,2:1 uit in het lichte thema, chart-7 op 4,2:1 in het
   donkere. Eigen tekstinkten per herkomst zijn vier palettewaarden die er
   niet zijn. Dus draagt het pictogram het verschil en blijft de tekst leesbaar
   (test/drivecontrast.mjs). */

.drive-file__added {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.drive-file__when {
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drive-file__name {
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* `--text-muted` haalde 4,1:1 op een aangewezen regel in het donkere thema —
   de hover-achtergrond is lichter, en daar valt het grijs door de bodem. */
.drive-file__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drive-file__size {
  flex: none;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Getallen lees je van rechts: dan staan de eenheden onder elkaar. */
.drive-files--list .drive-file__size { text-align: right; }

/* De knoppen staan er altijd, zoals in het ontwerp. Ze waren onzichtbaar tot je
   de rij aanwees, en dat is op een lijst van veertig regels een lijst waarvan je
   niet ziet wat je ermee kunt. Grijs tot je erbij komt. */
.drive-file__actions {
  flex: none;
  display: flex;
  gap: 2px;
  padding-right: var(--space-2);
}

.drive-file__actions .btn__icon { stroke: var(--text-faint); }
.drive-file:hover .drive-file__actions .btn__icon,
.drive-file__actions .btn:hover .btn__icon,
.drive-file__actions .btn:focus-visible .btn__icon { stroke: var(--text-secondary); }

.drive-files--list .drive-file__actions {
  justify-content: flex-end;
  padding-right: 0;
}


/* Het menu van een rij hangt aan de knop en moet boven de rijen eronder
   staan; de rij zelf krijgt daarom een stapelcontext zodra hij open is. */
.drive-file__more { display: flex; }
.drive-file:has(.menu:not([hidden])) { position: relative; z-index: 5; }

.menu--file { min-width: 200px; }

.menu__icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu__item--danger { color: var(--critical-ink); }
.menu__item--danger .menu__icon { stroke: var(--critical-ink); }

/* A star that is on stays on, hover or not — it is the answer to a question
   you asked. */
.drive-star--on { opacity: 1 !important; }
.drive-star--on .btn__icon { stroke: var(--accent); fill: var(--accent-soft); }

/* ---- the grid ----------------------------------------------------------- */

/* De tegel beantwoordt dezelfde vragen als de rij en heeft geen kolommen om ze
   in te zetten: een voorbeeld bovenaan met het vinkje en de ster erop, de naam
   eronder, en een voetregel met de herkomst. */
.drive-files--grid .drive-file {
  flex-direction: column;
  align-items: stretch;
  border-color: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.drive-files--grid .drive-file:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

.drive-file__head {
  position: relative;
  height: 112px;
  flex: none;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  overflow: hidden;
}

.drive-file__shot { width: 100%; height: 100%; object-fit: cover; }

.drive-file__icon--big { width: 34px; height: 34px; }

.drive-file__head--image .drive-file__icon { stroke: var(--chart-1); }
.drive-file__head--pdf .drive-file__icon { stroke: var(--chart-2); }

/* De extensie als woord. Een .docx en een .odt krijgen hetzelfde pictogram, en
   welke van de twee het is bepaalt of je hem kunt openen. */
.drive-file__ext {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.drive-file__head .tickbox { position: absolute; top: 8px; left: 8px; }

.drive-file__tilestar {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--surface-raised);
}

.drive-files--grid .drive-file__open {
  flex: none;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-2);
}

/* Twee regels en dan afkappen: de tegels moeten even hoog blijven, anders
   wordt een raster een trap. */
.drive-files--grid .drive-file__name {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.7em;
  line-height: 1.35;
  font-weight: 600;
}

.drive-file__line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-2);
}

.drive-file__line .drive-file__added { flex: 1; min-width: 0; }

.drive-file__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.drive-file__foot .drive-file__source { flex: 1; min-width: 0; }

/* ---- de Nieuw-knop ------------------------------------------------------- */

.drive-new { display: inline-flex; }

/* 38 hoog, gemeten in het ontwerp. Onze knopmaat `--sm` is 28 en dat is naast
   een zoekveld van 34 een knop die wegvalt. */
.drive-new__btn { gap: var(--space-2); height: 38px; }

.drive-new__caret {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-new__btn[aria-expanded="true"] .drive-new__caret { transform: rotate(180deg); }

.menu--new { min-width: 260px; }

/* Elke ingang zegt eronder wat hij oplevert, dus twee regels naast een
   pictogram dat bovenaan uitlijnt in plaats van in het midden. */
.menu__item--rich { align-items: center; gap: var(--space-3); }

/* Het pictogram in een getint vierkantje, met een kleur per soort — dezelfde
   afspraak als de vlakjes voor het bestandstype in de lijst. */
.menu__tile {
  width: 28px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.menu__tile--go { background: var(--accent-soft); }
.menu__tile--go .menu__icon { stroke: var(--accent-soft-ink); }
.menu__tile--doc { background: var(--chart-1-soft); }
.menu__tile--doc .menu__icon { stroke: var(--chart-1); }
.menu__tile--sheet { background: var(--chart-3-soft); }
.menu__tile--sheet .menu__icon { stroke: var(--chart-3); }
.menu__tile--slides { background: var(--chart-4-soft); }
.menu__tile--slides .menu__icon { stroke: var(--chart-4); }

.menu__item:disabled .menu__tile { background: var(--surface-sunken); }
.menu__item:disabled .menu__tile .menu__icon { stroke: var(--text-faint); }

.menu__note:empty { display: none; }
.menu__text { display: grid; gap: 1px; text-align: left; }
/* `.menu__label` niet: dat is in components.css het kopje boven een groep, in
   kapitalen. Twee betekenissen onder één naam is hoe dit menu er eerst uitzag
   als een lijst schreeuwende koppen. */
.menu__name { font-size: var(--text-md); }
.menu__note { font-size: var(--text-xs); color: var(--text-muted); }

.menu__item:disabled { cursor: not-allowed; }
.menu__item:disabled .menu__name { color: var(--text-faint); }
.menu__item:disabled .menu__icon { stroke: var(--text-faint); }
.menu__item:disabled:hover { background: transparent; }

/* ---- slepen -------------------------------------------------------------- */

/* Wat je optilt blijft zichtbaar maar wordt lichter: je moet kunnen zien wat je
   vasthebt zonder het uit de lijst te laten verdwijnen. */
.drive-file--lifted { opacity: 0.45; }

/* En waar het heen kan, kleurt op zodra je erboven hangt. */
.drive-drop--on {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft);
}

/* ---- het paneel ---------------------------------------------------------- */

.drive-panel__eyebrow {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Het voorbeeld draagt linksonder de extensie en rechtsonder de weg naar de
   pagina zelf: het is het grootste ding in het paneel en dus de plek waar je
   klikt. */
.drive-panel__shot { position: relative; }
.drive-panel__shot .drive-file__ext { bottom: var(--space-2); left: var(--space-2); }

.drive-panel__open {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-decoration: none;
}

.drive-panel__open:hover { color: var(--text-primary); }

.drive-panel__openIcon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-panel__danger:not(:disabled) .btn__icon { stroke: var(--critical-ink); }

/* ---- wie erbij kan ------------------------------------------------------ */

/* Als eigen kaart met de uitleg eronder. In een rij feiten is dit een woord
   tussen andere woorden, en het is het enige feit hier waar iemand een
   beslissing op neemt. */
.drive-access-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.drive-access-card--project {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.drive-access-card__icon {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-access-card--project .drive-access-card__icon { stroke: var(--accent-soft-ink); }

.drive-access-card__text { display: grid; gap: 2px; min-width: 0; }
.drive-access-card__name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.drive-access-card--project .drive-access-card__name { color: var(--accent-soft-ink); }
.drive-access-card__note { font-size: var(--text-xs); color: var(--text-secondary); }

/* Waarlangs het bij je is gekomen — een regel die ernaartoe leidt. */
.drive-via {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.drive-via:hover { background: var(--surface-hover); }
.drive-via:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.drive-via__icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-via__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-via__when { flex: none; font-size: var(--text-xs); color: var(--text-muted); }

.drive-access {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.drive-access--project { background: var(--accent-soft); color: var(--accent-soft-ink); }

.drive-access__icon {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-files--grid .drive-file__actions { padding-right: 0; }

/* ==========================================================================
   The preview panel
   ========================================================================== */

.drive-panel {
  position: sticky;
  top: var(--space-4);
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  max-height: calc(100vh - var(--space-6) * 2);
  overflow-y: auto;
}

.drive-panel:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.drive-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* De naam is een kop, geen link: de weg naar de pagina zit op het voorbeeld. */
.drive-panel__title {
  min-width: 0;
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.drive-preview {
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 140px;
  max-height: 420px;
}

.drive-preview__image {
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  display: block;
}

.drive-preview__media { width: 100%; }

.drive-preview__prose,
.drive-preview__text {
  width: 100%;
  max-height: 420px;
  overflow: auto;
  padding: var(--space-4);
  margin: 0;
  text-align: left;
  align-self: start;
}

/* The document's own heading scale is set for a page; in a 360px panel it has
   to come down a step or the title is the only thing you see. */
.drive-preview__prose { max-width: none; font-size: var(--text-sm); }
.drive-preview__prose .md-h--2 { font-size: var(--text-lg); }
.drive-preview__prose .md-h--3 { font-size: var(--text-md); }
.drive-preview__prose .md-h--4 { font-size: var(--text-sm); }
.drive-preview__prose .md-table { font-size: var(--text-xs); }

.drive-preview__text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--text-primary);
}

.drive-preview__none {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.drive-preview__icon {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-preview__nonetext {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 26ch;
}

/* ---- the facts ---------------------------------------------------------- */

.drive-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-xs);
}

.drive-facts__key { color: var(--text-muted); }
.drive-facts__value { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }

.drive-panel__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Een knop die toevallig een link is, blijft een knop: geen streep eronder. */
.drive-panel__actions a { text-decoration: none; }

/* ==========================================================================
   Dropping files on it
   ========================================================================== */

.files--dropping::after {
  content: attr(data-drop);
  position: absolute;
  inset: calc(var(--space-4) * -1);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--accent-soft-ink);
  pointer-events: none;
  z-index: 5;
}

/* ---- the file input the label stands in for ----------------------------- */

.drive-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.drive-upload__input:focus-visible + .btn { box-shadow: var(--focus-ring); }

.btn--disabled { opacity: 0.5; pointer-events: none; }

/* ---- the folder picker -------------------------------------------------- */

.picklist--folders label { align-items: center; }
/* Tall enough that the shared drives at the bottom are visible rather than
   merely reachable. */
.dialog__body .picklist--folders { max-height: 340px; }
.picklist__folder { flex: 1; min-width: 0; font-size: var(--text-sm); }

/* A heading in the list, for the shared drives: it names a place without
   pretending to be one you can pick. */
.picklist__head {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   Narrower
   ========================================================================== */

@media (max-width: 1200px) {
  /* The preview takes the place of the rail rather than squeezing the list
     into a gutter. */
  .files:has(.drive-panel) { grid-template-columns: 230px minmax(0, 1fr); }
  .files:has(.drive-panel) .drive-panel { grid-column: 2; }
  .files:has(.drive-panel) .files__main { grid-column: 2; }
}

@media (max-width: 900px) {
  .files,
  .files:has(.drive-panel) { grid-template-columns: minmax(0, 1fr); }
  .files:has(.drive-panel) .drive-panel,
  .files:has(.drive-panel) .files__main { grid-column: 1; }

  /* Op een telefoon is de rail geen kolom maar een strook bovenaan. Dan hoort
     de rand eronder en niet ernaast, en vallen de kopjes en de twee
     mappenlijsten weg: een kopje boven een rij die zijwaarts scrollt zegt
     niets, en de mappen zelf staan als kaartjes op de pagina eronder. */
  .drive-rail {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3);
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .drive-rail__top { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .drive-rail__group,
  .drive-rail__fold { display: none; }
  .drive-rail__list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: var(--space-2);
    /* Three places side by side are wider than a phone; they scroll rather
       than stack, so the list underneath starts at the top of the screen. */
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .drive-rail__list::-webkit-scrollbar { display: none; }
  .drive-store { display: none; }
  .drive-panel { position: static; max-height: none; }
}

@media (max-width: 640px) {
  .drive-head { padding: var(--space-3); }
  .drive-head__tools { width: 100%; }
  .drive-tools__right { flex: 1; justify-content: space-between; }
  .drive-body { padding: var(--space-3); }
  .drive-file__size { display: none; }
  .drive-files--grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Zes kolommen naast elkaar houden op tot ongeveer 820 pixels KOLOMBREEDTE;
   daaronder wordt de naam een strookje. Dan kantelt de tabel: de naam op de
   eerste regel, de drie antwoorden eronder. Er verdwijnt niets — het gaat
   alleen onder elkaar staan.

   Aan de container en niet aan het venster, want de kolom wordt ook smal
   doordat het paneel opengaat en dan verandert het venster niet.

   Touch heeft geen hover, dus de knoppen staan er altijd; ze horen op de
   eerste regel, tegen de rand, waar ze niet met de tekst vechten. */
@container hoofdkolom (max-width: 820px) {
  .drive-files__head { display: none; }
  .drive-files--list .drive-file {
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
    row-gap: 2px;
    padding-block: var(--space-2);
  }
  .drive-files--list .drive-file .tickbox { grid-column: 1; grid-row: 1 / span 2; }
  .drive-files--list .drive-file__open { grid-column: 2; grid-row: 1; }
  .drive-files--list .drive-file__actions { grid-column: 3 / -1; grid-row: 1; }
  .drive-files--list .drive-file__source { grid-column: 2; grid-row: 2; }
  .drive-files--list .drive-file__added { grid-column: 3; grid-row: 2; }
  .drive-files--list .drive-file__size { grid-column: 4; grid-row: 2; }
}