/* rail2.css - the left console, redesigned [Macel 2026-10-10, Atlas]
   Macel (his words, typos fixed): "de website ziet er nog steeds rommelig uit. Bedenk een nieuwe, niet de huidige implementatie.
   Zelfde functionaliteiten als in de balk links, opbouw mag anders, groeperen is een must have. Onderin
   de balk is de opbouw ok. De verkleining in de linkerbalk mag weg; laat die knop alleen zien als de tekst
   van het item getoond wordt, naast de luidspreker."
   WHAT CHANGED, and what deliberately did not:
   - The layer list was fifteen full-width rows, each a checkbox + icon + title + a 2-3 line description,
     1560 px of rail in a 900 px window. It is now two collapsible sections (the split Macel chose on
     2026-08-18: what you click and read / what the globe wears), each holding small labelled groups of
     tiles. A tile is the layer's icon and name in its own colour; ON is a tinted, outlined tile with a
     small lit dot, OFF is a quiet one. The description is not gone: it is still inside the label (screen readers
     read it, as before), and the one hint line under the sections shows it for the tile you point at.
   - The real <input type=checkbox id=...> elements are untouched and still inside #drawer .lrow:
     app.js reads them, theme.js persists them, the tests find them. Only the markup around them and
     this stylesheet are new. Loaded after theme.css so it wins without !important wars.
   - The lower block (Time, Dating confidence, Timeline/Show all, Tour, text size, Info) Macel called fine:
     same order and look, only tightened so the whole rail fits a 900 px window without scrolling.
   - #railToggle (the elbow handle on the rail's edge) is removed, with its CSS in layout.css/theme.css;
     collapsing now lives in the reading panel, next to the speaker, and is undone when the panel closes
     (rail2.js). Folded means gone: --rail goes to 0, not to a 40 px strip that had nothing left in it. */

/* ---------- tiles: both desktop rail and the phone sheet ---------- */
#drawer .rail2 { padding-top: 2px; }
#drawer .lsec { border-top: 1px solid var(--wl-line); }
#drawer .lsec:first-of-type { border-top: none; }
#drawer .lsec > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 10px 2px 8px; user-select: none;
}
#drawer .lsec > summary::-webkit-details-marker { display: none; }
#drawer .lsec > summary .dsub { margin: 0; padding: 0; border-top: none; opacity: 1; flex: 1 1 auto; }
#drawer .lsec > summary .lcnt {
  font: 600 10px/1 'Inter', Arial, sans-serif; letter-spacing: .08em; color: var(--wl-mut);
  padding: 3px 7px; border: 1px solid var(--wl-line); border-radius: 999px;
}
#drawer .lsec > summary .chev { width: 12px; height: 12px; color: var(--wl-mut); transition: transform .2s; }
#drawer .lsec[open] > summary .chev { transform: rotate(90deg); }
#drawer .lsec > summary:focus-visible { outline: 2px solid var(--wl-cyan); outline-offset: 2px; border-radius: 6px; }

#drawer .lgrp { margin: 0 0 10px; }
#drawer .lgh {
  font: 600 9.5px/1 'Inter', Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wl-mut); opacity: .8; margin: 2px 2px 6px;
}
#drawer .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#drawer .tiles.t3 { grid-template-columns: 1fr 1fr 1fr; }

#drawer .lrow.tile {
  position: relative; display: flex; align-items: center; gap: 8px; margin: 0;
  min-height: 38px; padding: 6px 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--wl-line); background: rgba(255, 255, 255, .015);
  transition: background .15s, border-color .15s, opacity .15s;
}
#drawer .tiles.t3 .lrow.tile { flex-direction: column; justify-content: center; gap: 4px; padding: 7px 4px; text-align: center; }
#drawer .lrow.tile:hover { border-color: var(--wl-line-2); background: rgba(255, 255, 255, .04); }
/* the real checkbox stays in the DOM and in the tab order, just not painted */
#drawer .lrow.tile > input[type="checkbox"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
#drawer .lrow.tile:focus-within { outline: 2px solid var(--wl-cyan); outline-offset: 1px; }
#drawer .lrow.tile .ic {
  flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px;
  color: var(--c); opacity: .5; background: transparent; transition: opacity .15s, background .15s;
}
#drawer .lrow.tile .lt { display: block; min-width: 0; }
#drawer .lrow.tile .lt > span {
  display: block; font: 500 12px/1.2 'Inter', Arial, sans-serif; color: var(--wl-mut);
  overflow-wrap: anywhere; transition: color .15s;
}
#drawer .tiles.t3 .lrow.tile .lt > span { font-size: 11px; }
/* phones: the sheet is touched, not pointed at - keep the 48 px target the old rows had */
@media (max-width: 900px) { #drawer .lrow.tile { min-height: 48px; } #drawer .tiles.t3 .lrow.tile { min-height: 60px; } }
/* the description stays in the accessible name (screen readers) and feeds the hint line; it is not painted */
#drawer .lrow.tile .lt > em {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* ON: tinted tile in the layer's own colour, with a small check */
#drawer .lrow.tile:has(> input:checked) {
  border-color: color-mix(in srgb, var(--tc, var(--wl-cyan)) 55%, transparent);
  background: color-mix(in srgb, var(--tc, var(--wl-cyan)) 13%, transparent);
}
#drawer .lrow.tile:has(> input:checked) .ic { opacity: 1; background: color-mix(in srgb, var(--tc, var(--wl-cyan)) 16%, transparent); }
#drawer .lrow.tile:has(> input:checked) .lt > span { color: var(--wl-ink); }
#drawer .lrow.tile:has(> input:checked)::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tc, var(--wl-cyan)); box-shadow: 0 0 6px var(--tc, var(--wl-cyan));
}

/* base map: one segmented control, full width */
#drawer .rail2 .lrow.basemap { display: block; margin: 0 0 10px; padding: 0; border: none; background: none; }
#drawer .rail2 .lrow.basemap > .lt { display: none; }
#drawer .rail2 .lrow.basemap .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* the one hint line: the description of the tile you point at */
#drawer .lhint {
  margin: 4px 2px 0; min-height: 30px; font: 400 11px/1.35 'Inter', Arial, sans-serif; color: var(--wl-mut);
}
#drawer .lhint b { color: var(--wl-ink); font-weight: 600; }

/* the Dating-confidence block inside the drawer has had both its children hidden since the confidence moved to
   its own right panel (theme.css), leaving an empty bordered box under the layers. The checkboxes stay in the
   DOM (that panel clicks them); only the empty frame goes. */
#drawer .dsec:has(> .fg.grades) { display: none; }

/* the time window's state slider is invisible on purpose (class .sr, its controls live in the Time section), but
   style.css's #win{width:100%} outranks .sr's 1 px, so a 273 px invisible input stuck 14 px out of the layer block:
   that was the bottom scrollbar Macel saw [2026-10-10]. JS reads only its value, so 1 px changes nothing else. */
#win.sr { width: 1px; height: 1px; }

/* ---------- desktop rail ---------- */
@media (min-width: 901px) {
  /* "LAYERS" above two sections that already name themselves; the aside keeps its aria-label */
  #deck #drawer .dhead { display: none; }
  #deck #drawer { padding: 4px 12px 8px; }
  #drawer .lsec > summary { padding: 8px 2px 6px; }
  #drawer .lgrp { margin-bottom: 8px; }
  #drawer .lgh { margin-bottom: 5px; }
  #drawer .lrow.tile { min-height: 34px; padding: 5px 7px; }
  #drawer .lrow.tile .ic { width: 22px; height: 22px; }
  #drawer .lrow.tile .lt > span { font-size: 11.5px; }
  #drawer .tiles.t3 .lrow.tile { padding: 5px 3px; gap: 3px; }
  #drawer .lhint { min-height: 28px; margin-top: 2px; }
  /* the layers card and the lower block, tightened so the rail fits a 900 px window */
  #deck { gap: 6px; }
  #controls { padding-top: 12px; padding-bottom: calc(12px + var(--safe-b, 0px)); }
  #deck #searchBtn { min-height: 38px; height: 38px; }
  #deck #drawer, #deck #drawer[hidden] { margin: 0 0 2px; }
  #deck > .ghost, #deck > button.ghost { min-height: 38px; height: 38px; }
  #deck .master { min-height: 38px; height: 38px; }
  /* ONE COLUMN, NO BOX THAT SCROLLS ON ITS OWN [Macel 2026-10-10 19:0x: "waarom zit er in de linkerbalk een scroll bar
     onder en rechts naast de selecties van points on the globe en what the globe wears? liever weg en samen vallen met
     de rest"]. The layer block keeps style.css's popup rule overflow-y:auto, and as a flex item of #deck that let it
     shrink below its content and scroll by itself: measured 1440x860, a 345 px box over 371 px of tiles, and 287 px of
     content in 273 px (the #win line below). Now it takes its natural height and never scrolls; when a window is too
     short for the whole rail, #controls is the one thing that scrolls (theme.css), as for every other rail item. */
  #deck #drawer { overflow: visible; flex: 0 0 auto; }

  /* reading mode: the console folds away completely (layout.css sets --rail to 0) - no 1 px seam either */
  /* the rail's 12 px side padding would otherwise keep a 24 px strip (border-box: width 0 + padding) */
  body.rail-collapsed #controls { border-right: none; overflow: hidden; padding-left: 0; padding-right: 0; }

  /* the globe buttons sat UNDER an open reading panel (theme.css pins them at right:16px, above the
     layout.css rule that would have followed --read). Now they step aside by the panel's own width. */
  body.panel-open .globebtn, body.panel-open #navpad, body.panel-open #ap-knop {
    right: calc(var(--panelw, 420px) + 16px) !important;
    transition: right .32s cubic-bezier(.22, .94, .24, 1);
  }
}

/* ---------- the collapse button in the reading panel, next to the speaker ---------- */
#railCollapse {
  position: absolute; top: 8px; right: 98px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--wl-line); background: transparent; color: var(--wl-mut); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
#railCollapse:hover { color: var(--wl-cyan); border-color: var(--wl-line-2); background: rgba(79, 209, 224, .06); }
#railCollapse:focus-visible { outline: 2px solid var(--wl-cyan); outline-offset: 2px; }
#railCollapse svg { transition: transform .32s cubic-bezier(.22, .94, .24, 1); }
body.rail-collapsed #railCollapse svg { transform: rotate(180deg); }
/* like the speaker, it exists only while an item's text is shown */
#panel.hidden #railCollapse { display: none; }
/* phones: there is no side rail to fold, so there is nothing for this button to do */
@media (max-width: 900px) { #railCollapse { display: none; } }