/* 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;
  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. */
#covsum { text-transform: none; letter-spacing: 0; color: #cfd4dd; }
.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); }
.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;
}
.controls button.on { background: var(--accent); color: #17171d;
                      border-color: var(--accent); font-weight: 600; }

.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); }

/* 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 {
    display: flex; flex-direction: column; gap: 5px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 5;
    padding: 5px;
    /* it can never own the whole screen, however far the legend is opened */
    max-height: 72vh; overflow-y: auto;
  }
  #head, #legend {
    position: static; max-width: none; width: 100%;
    padding: 7px 9px; border-radius: 8px;
  }
  #legend summary { margin-bottom: 6px; }
  .attrib { font-size: 10px; margin-top: 5px; }

  /* 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: 6px; }
  #head .controls { margin-top: 0; }
  #where { flex: 1 1 auto; }
  #when  { flex: 1 1 auto; min-width: 0; }
  #find  { flex: 1 1 100%; }
  #suggest { flex: 1 1 100%; max-height: 34vh; }
  /* The chips WRAP rather than scroll sideways. A horizontal scroller is the
     usual phone pattern and it fits in one row — but it leaves a half-drawn
     chip at the right edge, and "the filter chips are all cut mid-word" is the
     exact defect being fixed here. A reader cannot tell a scroll affordance
     from the bug, so the second row is worth its 26 px. */
  #cats { flex: 1 1 100%; flex-wrap: wrap; margin: 0; }
  .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;
  }
  #sheet {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 9px 0 5px; 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; 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; }
}