/* Two screens, one stylesheet. No framework, no build step — the same rule the
 * rest of the repo runs on. */

:root {
  --bg: #14141c;
  --panel: rgba(18, 18, 24, 0.92);
  --ink: #e9e9ef;
  --dim: #9aa3b2;
  --line: #2c2c38;
  --accent: #f0c04a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#map { position: absolute; inset: 0; }

/* ---- panels -------------------------------------------------------- */

.panel {
  position: absolute; z-index: 2;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  /* PREFIXED FIRST, for the engine that needs it. Safari only accepted the
     unprefixed property from version 18; every iOS before that drops the rule
     silently. The panel is 0.92 opaque either way, so this is a degradation
     rather than a defect — but it costs one line to not have it. */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* The wrapper generates NO box on a desktop, so #head and #legend keep the exact
   absolute positions they were driven at. It only becomes a real element inside
   the phone media query at the foot of this file. */
#top { display: contents; }

#head { top: 12px; left: 12px; max-width: 430px; }
#head h1 { margin: 0 0 4px; font-size: 16px; letter-spacing: .2px; }
#head p { margin: 4px 0 0; color: var(--dim); font-size: 12px; }

#legend { bottom: 12px; left: 12px; max-width: 430px; font-size: 12px; }
#legend summary { margin: 0 0 8px; font-size: 12px; letter-spacing: .8px;
                  text-transform: uppercase; color: var(--dim);
                  cursor: pointer; list-style: none;
                  display: flex; gap: 8px; align-items: baseline; }
#legend summary::-webkit-details-marker { display: none; }
#legend summary::before { content: "▾ "; }
#legend details:not([open]) summary::before { content: "▸ "; }
#legend summary:hover { color: var(--ink); }
/* The city's own percentage rides in the summary, so the ONE number this page
   rests on is readable with the legend folded. Not uppercase: it is a fact, not
   a heading. */
/* The gap is MARGIN, not a space character in the markup: the two spans carry
 * different text-transform and letter-spacing, so a literal space between them
 * inherits the label's tracking and reads as a typo either way. Dennis saw
 * "CoverageCopenhagen" on his iPhone — they had no separation at all. */
#covsum { text-transform: none; letter-spacing: 0; color: #cfd4dd; margin-left: 8px; }
.attrib { margin-top: 6px; }

.key { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px;
       color: #cfd4dd; }
.sw { flex: 0 0 46px; height: 14px; border-radius: 2px; margin-top: 1px;
      border: 1px solid rgba(255,255,255,.15); }
.sw-nodata {
  background-color: #3a3a40;
  background-image: repeating-linear-gradient(45deg,
    #56565e 0 1px, transparent 1px 5px);
}
/* The ramp swatch with the surface switched off: an outline where the colour
   was, so the row still reads as a state rather than disappearing. */
.sw-off { background: transparent; border-style: dashed;
          border-color: rgba(255,255,255,.28); }
/* INFERRED — the ramp is set inline (it is the same ramp), and this lays the
   two-tone hatch over it, matching hatchLinesImage in coverage.js. The swatch
   has to carry BOTH, because the state on the map is a colour AND a texture:
   a legend row showing only the texture would not name the thing drawn.
   The hatch rides in a ::before rather than in background-image, because the
   ramp arrives as an inline `background` shorthand and would wipe it. */
.sw-inferred { position: relative; overflow: hidden; }
.sw-inferred::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg,
    rgba(16,16,22,.85) 0 1.4px, rgba(238,240,246,.85) 1.4px 2.8px,
    transparent 2.8px 7px);
}
.sw-unsurveyed {
  background-color: #1a1816;
  background-image: repeating-linear-gradient(-45deg,
    #7c643e 0 2px, transparent 2px 8px);
}

/* ---- screen one: the list ------------------------------------------ */

#list {
  position: absolute; z-index: 3; top: 12px; right: 12px; bottom: 12px;
  width: 372px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden;
}
#list header { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
#list h1 { margin: 0 0 2px; font-size: 16px; }
#list .sub { color: var(--dim); font-size: 12px; margin: 4px 0 0; }
#list ol { margin: 0; padding: 6px 0; overflow-y: auto; list-style: none; flex: 1; }
#list li {
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
}
#list li:hover { background: rgba(255,255,255,.05); }
#list li .n {
  display: inline-flex; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #17171d; font-weight: 700; font-size: 11px;
  align-items: center; justify-content: center; margin-right: 8px;
}
#list li .name { font-weight: 600; }
#list li .cat { color: var(--dim); font-size: 11px; text-transform: uppercase;
                letter-spacing: .5px; margin-left: 6px; }
#list li .why { display: block; color: #c3cad6; font-size: 12px; margin: 5px 0 0 28px; }
#list .empty { padding: 16px 14px; color: var(--dim); }
#list footer { padding: 10px 14px; border-top: 1px solid var(--line);
               color: var(--dim); font-size: 11px; }

/* ---- controls ------------------------------------------------------- */

.controls { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.controls button, .controls select {
  background: #232331; color: var(--ink); border: 1px solid var(--line);
  border-radius: 5px; padding: 5px 9px; font: inherit; font-size: 12px;
  cursor: pointer;
}
/* ROOM FOR THE ENGINE'S OWN ARROW, and a clean truncation when there is not
   (2026-08-21). `#city` is capped at 40vw on a phone — 166 px — and the
   engine draws the dropdown chevron INSIDE that box at the right edge, over
   whatever text is there. "S'Arenal / Platja de Palma" is the longest name in
   the picker and its final `a` came out with the chevron sitting on top of it:
   the control read as a rendering fault rather than as a control. 9 px of
   right padding is not an arrow's width. This reserves 22 px and lets a name
   that still does not fit end in an ellipsis, which is a truncation a reader
   recognises instead of two glyphs on one another. */
.controls select {
  padding-right: 22px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.controls button.on { background: var(--accent); color: #17171d;
                      border-color: var(--accent); font-weight: 600; }

/* THE HOUR SLIDER, drawn HERE rather than by the engine.
 *
 * `input[type=range]` is the one control on this page whose default rendering
 * is the browser's own widget, and the three engines do not agree. WebKit —
 * which is what iOS Safari IS, not merely resembles — draws a white full-width
 * track and a large white thumb, and on a panel this dark it reads as a broken
 * element rather than a control. Measured, not assumed: the computed
 * `-webkit-appearance` was `auto` on both WebKit and Chromium, and the first
 * iPhone frame (docs/layout-ios-*.png before this change) shows the white bar.
 *
 * So the appearance is reset once, for every engine, and the track and thumb
 * are drawn in this project's own colours. The thumb is 20 px because it is
 * dragged with a thumb; the track is 4 px because it is only a rail. Both the
 * -webkit- and -moz- pseudo-elements are written because a selector list
 * containing an unknown pseudo-element is dropped WHOLE by every browser —
 * they cannot be merged into one rule.
 */
#hour {
  /* No width here on purpose: the desktop sizes it from the flex row it sits
     in, and a `width: 100%` would reset its flex-basis and blow that row. */
  -webkit-appearance: none; appearance: none;
  height: 26px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
}
#hour::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: #33344a; border: 1px solid #3d3e56;
}
#hour::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 1px solid #17171d;
  margin-top: -9px;                 /* centres on a 4 px track with 1 px borders */
}
#hour::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: #33344a; border: 1px solid #3d3e56;
}
#hour::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 1px solid #17171d;
}
#hour:focus { outline: none; }
#hour:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(240, 192, 74, .35);
}
#hour:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(240, 192, 74, .35);
}

.tabs { position: absolute; z-index: 3; top: 12px; left: 50%;
        transform: translateX(-50%); display: flex; gap: 6px;
        background: var(--panel); border: 1px solid var(--line);
        border-radius: 8px; padding: 6px; }
.tabs a { color: var(--dim); text-decoration: none; padding: 5px 12px;
          border-radius: 5px; font-size: 13px; }
.tabs a.on { background: var(--accent); color: #17171d; font-weight: 600; }

.pin {
  width: 24px; height: 24px; border-radius: 50%;
  background: #17171d; border: 2px solid #fff; color: #fff;
  font-size: 11px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 0 0 2px rgba(0,0,0,.5);
}

.note { color: var(--dim); font-size: 11px; margin-top: 8px; }
.warn { color: var(--accent); }

/* THE ANSWER panel — named places ranked for the chosen hour. This is the
   product; the surface behind it is the evidence. */
#answer { top: 12px; right: 12px; max-width: 340px; }
#answer ol { margin: 6px 0 0; padding-left: 20px; }
#answer li { margin: 0 0 8px; line-height: 1.35; }
#answer li b { color: var(--accent); font-size: 15px; }
#answer .street { color: #e8e8ef; }
#answer .meta { display: block; color: var(--dim); font-size: 11px; }
#answer li.none { list-style: none; margin-left: -20px; color: var(--dim); }
/* The word, not a colour. A tint alone would be one more thing to decode, and
   this entry's hours being assumed is the kind of fact that has to survive a
   glance on a bright phone. */
.tag-inferred {
  display: inline-block; padding: 0 5px;
  font-size: 9.5px; letter-spacing: .06em; border-radius: 3px;
  color: #12121a; background: #d8dbe4;
}

/* Street names as DOM markers: readable over the brightest part of the
   surface, which a basemap label underneath it can never be. Long compound
   names (e.g. "Frederiksberg Allé Sankt Thomas Plads") wrap rather than
   stretching across the map as one unreadable ribbon. */
.street-label {
  font: 600 11px/1.15 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #ffffff; white-space: normal; pointer-events: none; text-align: center;
  text-shadow: 0 0 3px #05050a, 0 0 6px #05050a, 0 1px 2px #05050a,
               0 0 10px rgba(5,5,10,.9);
  letter-spacing: .2px;
}
.street-label.named { font-size: 13px; color: var(--accent); }
#answer li.pick { cursor: pointer; }
#answer li.pick:hover b { text-decoration: underline; }
#answer li.pick.on { outline: 1px solid var(--accent); outline-offset: 4px; }

/* Named dots. The name is the point; the category is what makes it actionable
   — a bar is not a fast-food counter at 22:00. */
.venue-label {
  font: 600 10.5px/1.15 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #fff; white-space: nowrap; pointer-events: none; text-align: center;
  transform: translateY(5px);
  text-shadow: 0 0 3px #05050a, 0 0 6px #05050a, 0 1px 2px #05050a;
}
.venue-label .vn { display: block; }
.venue-label .vc { display: block; font-size: 9px; font-weight: 500;
                   color: #cfd6e4; letter-spacing: .3px; }

#inside { margin-top: 10px; border-top: 1px solid #2a2a34; padding-top: 8px; }
#inside h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .4px;
             text-transform: uppercase; color: var(--accent); }
.inside-list { list-style: none; margin: 0; padding: 0;
               max-height: 260px; overflow-y: auto; }
.inside-list li { display: flex; justify-content: space-between; gap: 10px;
                  font-size: 12px; padding: 2px 0; border-bottom: 1px solid #20202a; }
.inside-list .vc { color: var(--dim); font-size: 10.5px; white-space: nowrap; }
#answer { max-height: calc(100vh - 24px); overflow-y: auto; }

/* ---------------------------------------------------------------------------
 * Find, filter, and the thing you clicked (2026-08-06). Dennis: "we also need
 * to be able to search, and filter, and we need to be able to click on a dot,
 * a street thats highlited" — and separately, that the text around the data
 * "is too much from public use". So these controls are deliberately quiet:
 * they sit under the hour slider, they carry no counts and no scores, and the
 * long honest paragraphs moved inside a <details> rather than off the page.
 * ------------------------------------------------------------------------ */
#find input[type="search"] {
  flex: 1; min-width: 0; padding: 5px 8px;
  background: #14141c; color: #f2f4f8;
  border: 1px solid #33344a; border-radius: 6px; font-size: 13px;
}
#find input[type="search"]:focus { outline: none; border-color: #6f7bd6; }

#suggest {
  list-style: none; margin: 4px 0 0; padding: 0;
  max-height: 190px; overflow-y: auto;
  border: 1px solid #33344a; border-radius: 6px; background: #101018;
}
#suggest li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 8px; cursor: pointer; font-size: 12.5px;
}
#suggest li:hover { background: #1d1d2a; }
#suggest .sk { color: #8b8ba7; font-size: 11px; text-transform: lowercase; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0 2px; }
.chip {
  padding: 3px 8px; font-size: 11.5px; cursor: pointer;
  background: #14141c; color: #b9bcd0;
  border: 1px solid #33344a; border-radius: 999px;
}
.chip:hover { border-color: #6f7bd6; }
/* On means "only these", so it has to read as a positive selection, not as a
   disabled state — an ambiguous chip makes a filtered map look like a broken one. */
.chip.on { background: #6f7bd6; border-color: #6f7bd6; color: #0b0b10; font-weight: 600; }

#honest { margin: 8px 0 0; }
#honest summary {
  cursor: pointer; font-size: 11.5px; color: #8b8ba7;
  list-style: none; padding: 2px 0;
}
#honest summary::-webkit-details-marker { display: none; }
#honest summary::before { content: "▸ "; }
#honest[open] summary::before { content: "▾ "; }
#honest summary:hover { color: #b9bcd0; }

/* Bottom-CENTRE, not bottom-left: at bottom-left it sat straight on top of the
   Coverage legend, so clicking a dot hid the key that explains the colours. */
#picked {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px;
  z-index: 6; max-width: 380px; padding: 12px 30px 12px 14px;
}
#picked h2 { margin: 0 0 4px; font-size: 15px; }
#picked-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; color: #8b8ba7;
  font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
#picked-close:hover { color: #f2f4f8; }
.dim { color: #8b8ba7; }

/* The bottom-sheet handle exists only on a phone; on a desktop the answer panel
   is a card that needs no pulling. */
#sheet { display: none; }

/* ---------------------------------------------------------------------------
 * PHONE (2026-08-07). Driven on Dennis's Pixel 10 Pro XL over USB, 1080x2404 at
 * density 390: every function worked and the LAYOUT was the whole defect. The
 * ranked list sat on top of the controls, so City, When, Find and the filter
 * chips were sliced mid-word; the two cards took about 57 % of the screen and
 * left the map a band; and the coverage legend was pinned open at three legend
 * rows plus three paragraphs. They were fixed cards placed for a 1400 px desktop
 * and nothing above this line had ever asked what happens at 415 px.
 *
 * The shape, and why: ONE stack pinned to the top (controls, then the coverage
 * line), ONE sheet pinned to the bottom that peeks at the answer and pulls up
 * for the rest, and the map keeps the band between them. Nothing is positioned
 * over anything else, so no control can be covered again by a panel that grew.
 *
 * Nothing here is a new capability. The heat switch, the fold and the sheet all
 * hide chrome; not one of them hides an absence state, and the coverage
 * percentage and the ODbL line stay on the page at every width.
 * ------------------------------------------------------------------------ */
@media (max-width: 760px) {

  /* ---- the top stack ---- */
  #top {
    /* GAP ZERO, AND IT IS NOT A SPACING PREFERENCE (2026-08-21).
       The stack used to sit 4 px apart, and 4 px of map between two opaque
       panels is a horizontal slit that cuts whatever street label happens to
       be behind it exactly in half — top of the glyphs under #head, bottom
       under #legend. Copenhagen and Berlin are the two cities the deep layout
       pass drives and neither happens to put a label there, so it survived
       every run; driving all twenty-six found it on Aarhus ("Frederiksbjerg
       Vej"), Barcelona ("Carretera del Carmel") and most cities in between.
       A word sliced through the middle reads as breakage, and this project
       already fixed "cut mid-word" once in the chip row. The two panels are
       one stack on a phone, so they now touch and the adjoining corners are
       squared below — no seam, nothing to slice. */
    display: flex; flex-direction: column; gap: 0;
    position: fixed; top: 0; left: 0; right: 0; z-index: 5;
    padding: 4px;
    /* it can never own the whole screen, however far the legend is opened.
       dvh SECOND so it wins where it is understood: on iOS Safari `vh` is the
       LARGE viewport and excludes the URL bar, so 72vh of a 660 px visible
       screen is 72 % of the 750-ish px the page thinks it has. An engine that
       does not know `dvh` keeps the `vh` line above and is no worse off than
       it was. THIS IS UNVERIFIABLE HEADLESS — there is no URL bar in a
       headless browser, so visualViewport.height equals innerHeight and the
       two units resolve identically. It needs a real handset. */
    max-height: 72vh;
    max-height: 72dvh;
    overflow-y: auto;
    /* Zero unless the page opts into `viewport-fit=cover`, which it does not:
       without that, Safari lays the page out INSIDE the safe area already, so
       these are a no-op today and correct if cover is ever added. */
    padding-top: max(4px, env(safe-area-inset-top));
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }
  #head, #legend {
    position: static; max-width: none; width: 100%;
    padding: 6px 9px; border-radius: 8px;
  }
  /* The two panels touch, so the corners that meet are squared and the border
     between them is drawn once. Rounded corners on a joint look like two
     panels that failed to line up. */
  #head { border-radius: 8px 8px 0 0; border-bottom: 0; }
  #legend { border-radius: 0 0 8px 8px; }
  #legend { padding: 5px 9px; }
  #legend summary { margin-bottom: 6px; }
  /* Folded, the summary's bottom margin is 6 px of nothing — it separates the
     summary from content that is not being drawn. */
  #legend details:not([open]) summary { margin-bottom: 0; }
  /* The ODbL line is the LAST thing in the panel, and it was carrying a `p`
     element's default 1em bottom margin — 10 px of empty panel under the last
     line of text, measured. It is not spacing anything from anything. */
  .attrib { font-size: 10px; margin-top: 4px; margin-bottom: 0; }

  /* The h1 goes: the sheet header already says "Where to head — Friday 22:00",
     which is the same question with the answer's own time in it. */
  #head h1 { display: none; }
  #head { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
  #head .controls { margin-top: 0; }

  /* FIND RIDES THE CITY ROW, which is a whole 40 px row bought back.
   *
   * At 393x660 the top stack was 257 px — 39 % of the screen — and it was four
   * full-width rows: city+heat, day+hour, find, chips. City and Heat together
   * are 208 px of a 363 px row, so the search field was asking for a row of
   * its own to use 149 px that were already sitting empty beside it.
   *
   * `order` rather than a DOM move, because the DOM order IS the desktop
   * layout and the desktop is not being changed. The cost is a focus order
   * that no longer matches the visual order below 760 px — tabbing runs
   * city, heat, day, hour, find while the eye reads city, heat, find, day,
   * hour. On a touch screen that is a small wart; moving the element in the
   * HTML would have moved the desktop too, which is a bigger one. */
  #where { flex: 0 0 auto; order: 1; }
  #find  { flex: 1 1 120px; min-width: 104px; order: 2; }
  #when  { flex: 1 1 100%; min-width: 0; order: 3; }
  #suggest { flex: 1 1 100%; order: 4; max-height: 34vh; max-height: 34dvh; }
  /* THE CHIPS STILL WRAP TO TWO ROWS, AND THAT IS NOW A MEASURED DECISION.
   *
   * The task line said they fit one row at 415 px and wrapped only at 393.
   * That is not what the page does: at 415, at 393 and on a 1600 px desktop
   * they are TWO ROWS, because `#cats` is inside `#head` and `#head` is capped
   * at 430 px. The seven chips the data actually carries — bar, biergarten,
   * cafe, fast food, nightclub, pub, restaurant — measure 400 px of chip plus
   * 24 px of gap against 363 px of row at 393 CSS px.
   *
   * One row is reachable only by cutting the font to 10.5 px and the padding
   * to 3px 6px, which lands the whole set at ~366 px and each chip at a 19 px
   * tall tap target. That trades 25 px of screen for a control a thumb misses,
   * and the words cannot be shortened without lying about the category. So:
   * two rows, at a size a thumb can hit, and the 40 px came out of the search
   * row above instead — where it was empty space rather than a tap target.
   *
   * They wrap rather than scrolling sideways: a horizontal scroller fits in
   * one row but leaves a half-drawn chip at the edge, and "the filter chips
   * are all cut mid-word" is the exact defect this layout exists to fix. A
   * reader cannot tell a scroll affordance from that bug. */
  #cats { flex: 1 1 100%; flex-wrap: wrap; margin: 0; order: 5; }
  .chip { flex: 0 0 auto; }
  /* Labels are hidden from the EYE, not from the accessibility tree — the
     selects would otherwise lose their names, and the values themselves read as
     labels: the city select says "Berlin", the day select says "Friday". */
  .controls label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  #city, #day { max-width: 40vw; }
  #hour { flex: 1 1 60px; min-width: 60px; height: 26px; }
  #find input[type="search"] { font-size: 16px; }

  /* ---- the answer, as a sheet ---- */
  #answer {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: none; max-height: none; overflow: visible;
    z-index: 5; padding: 0 12px 10px;
    border-radius: 12px 12px 0 0; border-bottom: none;
    /* CLEARANCE FOR THE HOME INDICATOR. `env(safe-area-inset-*)` resolves to 0
       unless the document asks for `viewport-fit=cover`, which this one does
       not — so on iOS today the clearance comes from Safari laying the page
       out inside the safe area, and these lines are a no-op that becomes the
       correct rule the moment cover is added. Written as `max()` so neither
       case can shrink the padding below what the design wants. UNVERIFIED on
       a real handset. */
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  #sheet {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 7px 0 4px; margin: 0;
    background: none; border: none; color: var(--dim); cursor: pointer;
    touch-action: none;            /* the drag is ours, not the page's */
  }
  #sheet .grip { width: 44px; height: 4px; border-radius: 2px; background: #4a4a5c; }
  #sheet .chev { font-size: 10px; line-height: 1; }
  #answer.open #sheet .chev { transform: rotate(180deg); }
  #answer-head { margin: 0 0 4px; font-size: 13px; }
  /* Peek shows the header and the top answer whole, with the next one cut — a
     cut line is what tells a thumb there is more to pull up. */
  #answer-body { max-height: 88px; overflow: hidden; transition: max-height .22s ease; }
  #answer.open #answer-body { max-height: 56vh; max-height: 56dvh; overflow-y: auto; }
  #answer li b { font-size: 14px; }
  .inside-list { max-height: none; }

  /* Above the peeking sheet, never behind it. */
  #picked { bottom: 132px; left: 8px; right: 8px; transform: none;
            max-width: none; z-index: 7; }
}

/* Attribution links inherit the panel's muted tone rather than the browser's
 * default blue, which on this dark ground read as an error state. Underlined
 * so they stay identifiable as links without shouting. */
.attrib a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }