/* Phone layout for /library.html (loaded at (max-width: 760px)). */
/* What changes on a phone. The page is one full-screen globe with
   overlays, and the phone problem is the split between map and panel:
   - A road's card opens as a shorter bottom sheet (50vh, scrolls inside)
     so the road the map just flew to stays in view above it; the counter
     overlay steps aside while a card is open.
   - Inside the card the download button moves up under the layout, so the
     main action is on the first screen of the sheet; votes and tag chips
     become finger-sized; the layout image shrinks (the map shows the road).
   - The bottom bar becomes search on top, then the road list + country
     side by side, all 44px, clear of the home-bar inset.
   - Mono labels and list meta move up to 12px+.
   Structural rules sit under 720px because that is where library.js
   switches to its phone behaviour (isPhone) and library.css to the
   bottom-sheet panel; between 721 and 760px the desktop overlays fit. */

/* ---------- header: tap targets match the 40px bell ---------- */
.wall .nr-header .actions .btn { min-height: 40px; }

/* ---------- counter overlay ---------- */
.counter, .queue, .lib-status { font-size: .76rem; }

/* ---------- list + card text sizes ---------- */
.panel .head .t { font-size: .76rem; }
.rows .nm { font-size: .95rem; }
.rows .meta { font-size: .76rem; }
.rows .empty { font-size: .82rem; }
.card-eyebrow { font-size: .76rem; letter-spacing: .14em; }
.where { font-size: .8rem; }
.lib-line, .lib-note { font-size: .86rem; }
.lib-note .mono { font-size: .8rem; }
.lib-comments .ch { font-size: .76rem; }
.lib-comment { font-size: .92rem; }
.lib-comment .who { font-size: .76rem; }
.lib-ds .lbl { font-size: .76rem; }

/* ---------- card: finger-sized controls ---------- */
.lib-thumbs button { min-height: 40px; padding: 0 14px; font-size: .82rem; }
/* Tag chips: one row that scrolls sideways (to the sheet's edge) rather
   than two rows of 20px pills. */
.lib-tags {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  margin: 0 -16px 14px; padding: 0 16px;
}
.lib-tags::-webkit-scrollbar { display: none; }
.lib-tags .tchip { flex: none; min-height: 40px; padding: 0 14px; font-size: .76rem; white-space: nowrap; }
.cbody .lib-dl { min-height: 48px; font-size: .95rem; }
.lib-comment-form textarea { font-size: 16px; min-height: 44px; }   /* 16px: no iOS zoom on focus */
.lib-comment-form .btn { min-height: 44px; }

@media (max-width: 720px) {
  /* ---------- bottom sheet ---------- */
  .panel { padding-bottom: env(safe-area-inset-bottom); }
  .panel .head { padding: 8px 8px 8px 16px; min-height: 56px; box-sizing: border-box; }
  /* A road's card: half the screen, so the road the map flies to (fitted
     above the bottom 260px by library.js) is mostly visible. The list
     keeps library.css's taller 72vh: there the list is the point. */
  .panel[data-view="card"] { max-height: 50vh; }
  /* The counter sits where the flown-to road lands; hide it while a card
     is open (:has is supported by every browser that runs the globe). */
  body:has(.panel.open[data-view="card"]) .brand-ov { opacity: 0; pointer-events: none; transition: opacity .2s; }

  /* Card order: name, layout, then the download right away; the tags,
     drift score and comments follow. (Flex order only; DOM unchanged.) */
  .cbody { display: flex; flex-direction: column; padding: 12px 16px 16px; }
  .cbody > * { order: 2; }
  .cbody > .card-eyebrow, .cbody > h2, .cbody > .where, .cbody > .outline { order: 0; }
  .cbody > .lib-dl, .cbody > .lib-dl + .lib-note { order: 1; }
  .cbody > .lib-dl + .lib-note { margin: 8px 0 14px; }
  .cbody h2 { font-size: 1.3rem; margin: 4px 0 2px; }
  /* Wide, short layout strip: the map already shows the road itself. */
  .outline { aspect-ratio: 3 / 1; margin: 10px 0 12px; }
  .outline .layout { display: block; padding: 10px 12px 10px 124px; }   /* right of the vote buttons; block so the img's 100% height is the padded box */
  .outline .ph { font-size: 1.4rem; }
  .lib-ds { margin-top: 0; }

  /* ---------- bottom bar ---------- */
  /* Row 1: search across the full width. Row 2: the road list toggle and
     the country filter side by side. Overrides the page's inline <style>
     orders/widths (same specificity, this file loads after it). */
  .bar { flex-wrap: wrap; row-gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
  .bar .search { order: 1; flex: 1 1 100%; height: 44px; }
  .bar #listToggle { order: 2; min-height: 44px; padding: 0 18px; font-size: .78rem; flex: none; }
  .bar .filters { order: 3; flex: 1 1 0; width: auto; min-width: 0; }
  .bar #country { min-height: 44px; font-size: 16px; }      /* 16px: no iOS zoom on focus */
  /* The input fills the whole 44px box, so a tap anywhere in it focuses. */
  .search input { align-self: stretch; font-size: 16px; }
}

/* ---------- list view (1.6): rows become two-line cards ---------- */
@media (max-width: 720px) {
  .viewsw button { min-height: 40px; padding: 0 14px; }
  .rl-inner { padding: 12px 12px 20px; }
  .rl-head h1 { font-size: 1.25rem; }
  .rl-sort { display: flex; flex: 1 1 100%; margin-left: 0; font-size: .76rem; }
  .rl-sort select { flex: 1; min-height: 44px; font-size: 16px; }
  .rl-table thead { display: none; }
  .rl-table, .rl-table tbody { display: block; }
  .rl-table tbody tr {
    display: grid; grid-template-columns: 56px 1fr auto; column-gap: 12px; row-gap: 2px;
    align-items: center; padding: 10px 4px; border-bottom: 1px solid #16181d;
  }
  .rl-table td { padding: 0; border: 0; }
  .rl-table td.c-road { display: contents; }
  .rl-table .rl-thumb { grid-column: 1; grid-row: 1 / span 2; }
  .rl-table .rl-nm { grid-column: 2 / span 2; grid-row: 1; }
  .rl-table .rl-nm b { font-size: 1rem; }
  .rl-table .rl-nm .sub { display: none; }
  .rl-table .c-cc { grid-column: 2; grid-row: 2; font-size: .8rem; }
  .rl-table .c-cc .cn { display: none; }
  .rl-table .c-len { grid-column: 2; grid-row: 2; padding-left: 36px; }
  .rl-table .c-score { grid-column: 3; grid-row: 2; text-align: right; }
  .rl-table .c-tags, .rl-table .c-up, .rl-table .c-date { display: none; }
  .lib-share-row .btn { min-height: 44px; }
  .lib-share-f { min-height: 40px; padding: 0 14px; }
  .lib-share textarea { font-size: 16px; }
  .cbody [data-share-send] { min-height: 48px; }
  .lib-refresh .btn { min-height: 48px; }
}

/* list pager: finger-sized; the page line drops under the buttons */
@media (max-width: 720px) {
  .rl-pager { flex-wrap: wrap; gap: 10px; }
  .rl-pager .chip { min-height: 44px; flex: 1; font-size: .8rem; }
  .rl-pageinfo { order: 3; flex: 1 1 100%; text-align: center; font-size: .78rem; }
}