/* scene 7: 48 places, page in, rows out. The place picker (list and map), then the real page with a stitch
   on every amount read from it, beside the rows those amounts became. Dot type only at 40px and up;
   smaller numbers use the text face with tabular figures. */

/* ---- head and map --------------------------------------------------------------------------------- */
.places .pl-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 72px);
  align-items: end; margin-bottom: clamp(26px, 4vh, 40px);
}
.places .pl-head { margin-bottom: 0; }
.places .pl-head h2 { font-size: max(40px, var(--s-title)); }
.places .pl-br { display: inline; }
.places .pl-map { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1.62; justify-self: end; }
.places .pl-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.places .pl-map.is-hot { cursor: pointer; }
.places .pl-landdot { fill: var(--grey-2); }
.places .pl-land { fill: url(#pl-land-dots); }
.places .pl-borders { fill: none; stroke: var(--paper); stroke-width: 1.4; stroke-linejoin: round; }
.places .pl-map .st { fill: var(--blue); }
.places .pl-map .st-fill { fill: var(--blue); opacity: .14; }
.places .pl-dots .pl-dot { fill: var(--blue); opacity: 0; transition: opacity .3s var(--ease-stitch); }
.places .pl-dots.on .pl-dot { opacity: .85; }
.places .pl-dots.on .pl-dot.on { opacity: 1; }
.places .pl-rings .pl-ring-hover { opacity: .55; }
.places .pl-label { font-family: var(--text); font-size: 12.5px; font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.places .pl-label.dim { opacity: .35; }
.places .pl-tip {
  position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap;
  transform: translate(12px, -50%); padding: 3px 8px; background: var(--ink); color: var(--paper);
  font-size: 12.5px; line-height: 1.4; opacity: 0; transition: opacity .15s var(--ease);
}
.places .pl-tip.left { transform: translate(calc(-100% - 12px), -50%); }
.places .pl-tip.show { opacity: 1; }

/* ---- the place list --------------------------------------------------------------------------------- */
.places .pl-pick { border-top: 1px solid var(--grey-2); padding-top: 12px; }
.places .pl-pick-label { margin: 0 0 8px; font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: var(--label-weight); color: var(--label-color); }
.places .pl-list {
  list-style: none; margin: 0 -8px; padding: 0;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 8), auto); grid-auto-columns: minmax(0, 1fr);
  column-gap: clamp(8px, 1.6vw, 24px);
}
.places .pl-list button {
  display: flex; align-items: baseline; gap: .55em; width: 100%; min-height: 32px; padding: 5px 8px;
  text-align: left; font-size: var(--s-small); color: var(--ink); line-height: 1.3;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.places .pl-list .pl-sc { flex: none; width: 1.75em; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.places .pl-list .pl-ct { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.places .pl-list .pl-scan { flex: none; font-size: var(--s-micro); color: var(--ink-3); letter-spacing: .03em; }
.places .pl-list button:hover, .places .pl-list button.is-hot { color: var(--blue); }
.places .pl-list button:hover .pl-sc, .places .pl-list button.is-hot .pl-sc { color: var(--blue); }
.places .pl-list button[aria-pressed="true"] { background: var(--blue-3); color: var(--blue); }
.places .pl-list button[aria-pressed="true"] .pl-sc, .places .pl-list button[aria-pressed="true"] .pl-scan { color: var(--blue); }
.places .pl-list button:focus-visible { outline-offset: -2px; }

/* ---- the viewer: who and what -------------------------------------------------------------------------- */
.places .pl-view { margin-top: clamp(44px, 7vh, 72px); }
.places .pl-meta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "place steps" "auth stats" "facts open";
  column-gap: clamp(24px, 4vw, 64px); align-items: end;
  padding-bottom: 20px; border-bottom: 1px solid var(--ink); margin-bottom: clamp(18px, 3vh, 26px);
}
.places .pl-auth { grid-area: auth; margin: 8px 0 0; font-size: var(--s-small); line-height: 1.45; color: var(--ink-2); min-width: 0; align-self: start; }
.places .pl-code { font-weight: 600; color: var(--blue); letter-spacing: .04em; margin-right: .5em; }
.places .pl-area:empty { display: none; }
.places .pl-area { color: var(--ink-3); }
.places .pl-area::before { content: "·"; margin: 0 .55em; color: var(--ink-3); }
.places .pl-steps { grid-area: steps; display: flex; gap: 6px; justify-self: end; align-self: start; }
.places .pl-step {
  width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink);
  border: 1px solid var(--grey-2); transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.places .pl-step svg { width: 18px; height: 18px; fill: currentColor; }
.places .pl-step:hover { color: var(--blue); border-color: var(--blue); }
.places .pl-step:active { background: var(--blue-3); }
.places .pl-place { grid-area: place; margin: 0; font-size: clamp(40px, 3.5vw, 3.3rem); color: var(--ink); min-width: 0; overflow-wrap: anywhere; align-self: start; }

/* small numbers: the text face, tabular figures */
.places .pl-stats { grid-area: stats; margin: 0; display: flex; gap: clamp(22px, 3vw, 48px); justify-self: end; align-self: end; }
.places .pl-stats > div { display: flex; flex-direction: column-reverse; }
.places .pl-stats dt { font-size: var(--s-small); color: var(--ink-2); margin-top: 4px; white-space: nowrap; }
.places .pl-num {
  margin: 0; font-family: var(--text); font-feature-settings: "tnum" 1; font-weight: 500;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap;
}
.places .pl-count { color: var(--blue); }

.places .pl-facts { grid-area: facts; margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px clamp(26px, 4vw, 60px); min-width: 0; }
.places .pl-facts div { min-width: 0; }
.places .pl-facts dt { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: var(--label-weight); color: var(--label-color); }
.places .pl-facts dd { margin: 4px 0 0; font-size: var(--s-body); color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6em; font-feature-settings: "tnum" 1; }
.places .pl-facts dd small { font-size: var(--s-small); color: var(--ink-3); }
.places .pl-open { grid-area: open; justify-self: end; align-self: end; font-size: var(--s-body); }

/* ---- page and rows, side by side ---------------------------------------------------------------------- */
.places .pl-panes {
  --pane-h: clamp(400px, 60vh, 620px);
  position: relative; display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(320px, 1fr); gap: clamp(26px, 3.2vw, 52px);
}
.places .pl-threads { z-index: 4; }
.places .pl-page { margin: 0; min-width: 0; }
.places .pl-scroll {
  position: relative; height: var(--pane-h); overflow: auto; display: flex; background: var(--grey-1);
  cursor: crosshair; outline-offset: 3px; scrollbar-width: thin; scrollbar-color: var(--grey-2) transparent; scrollbar-gutter: stable;
}
.places .pl-scroll.is-over.is-zoom { cursor: grab; }
.places .pl-scroll.is-over.is-zoom:active { cursor: grabbing; }
.places .pl-sheet { position: relative; flex: none; margin: auto; background: var(--paper); transition: opacity .16s var(--ease); }
.places .pl-sheet.out { opacity: 0; }
.places .pl-sheet img { display: block; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.places .pl-sheet .stitch-layer { z-index: 2; }
/* quiet stitches: the amounts we read; the lit one is solid blue with its faint fill */
.places .pl-sheet .pl-st { opacity: .44; transition: opacity .18s var(--ease); }
.places .pl-sheet .pl-st .st-fill { display: none; }
.places .pl-sheet .pl-st.is-lit { opacity: 1; }
.places .pl-sheet .pl-st.is-lit .st-fill { display: inline; }
.places .pl-sheet .pl-st.is-lit .st { r: 1.5px; }
.places .pl-frame { position: relative; }
.places .pl-cap { margin-top: 12px; font-size: var(--s-small); color: var(--ink-3); }
.places .pl-hint-tap { display: none; }
.places .pl-zoom {
  position: absolute; right: 20px; bottom: 12px; z-index: 3; height: 34px; padding: 0 12px;
  background: var(--paper); border: 1px solid var(--grey-2); color: var(--ink); font-size: var(--s-small);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.places .pl-zoom:hover { color: var(--blue); border-color: var(--blue); }
.places .pl-zoom[aria-pressed="true"] { color: var(--blue); border-color: var(--blue); }

.places .pl-rows { display: flex; flex-direction: column; height: var(--pane-h); min-width: 0; }
.places .pl-rows-head, .places .pl-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) 6.6rem 3.8rem; column-gap: 12px; align-items: center; }
.places .pl-rows-head {
  padding: 0 10px 8px 4px; border-bottom: 1px solid var(--ink);
  font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: var(--label-weight); color: var(--label-color);
}
.places .pl-rows-head span:last-child { text-align: right; }
.places .pl-rows-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--grey-2) transparent; }
.places .pl-rowlist { transition: opacity .16s var(--ease); }
.places .pl-rowlist.out { opacity: 0; }
.places .pl-grp-h {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap;
  padding: 10px 10px 8px 30px; background: var(--paper); border-bottom: 1px solid var(--grey-2);
  font-size: var(--s-small); color: var(--ink);
}
.places .pl-grp-h .k { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: var(--label-weight); color: var(--label-color); }
.places .pl-grp-h .x { color: var(--ink-3); }
.places .pl-row {
  position: relative; padding: 7px 10px 7px 4px; cursor: pointer; outline: none;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .28s var(--ease), transform .34s var(--ease), background .14s var(--ease);
}
.places .pl-row.in { opacity: 1; transform: none; }
.places .pl-row.first:not(:first-of-type) { box-shadow: inset 0 1px 0 var(--grey-2); }
@media (hover: hover) { .places .pl-row:hover { background: var(--grey-1); } }
.places .pl-row.lit, .places .pl-row.lit:hover { background: var(--blue-3); }
.places .pl-row:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.places .pl-knot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue-2); justify-self: center; transition: transform .15s var(--ease), background .15s var(--ease); }
.places .pl-row.lit .pl-knot { background: var(--blue); transform: scale(1.6); }
.places .pl-row.nobox .pl-knot { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-3); }
.places .pl-u { display: flex; flex-direction: column; min-width: 0; }
.places .pl-un { font-size: .94rem; line-height: 1.3; color: var(--ink); }
.places .pl-u small { font-size: var(--s-micro); line-height: 1.35; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.places .pl-flag { font-weight: 500; color: var(--ink-2); margin-left: .6em; }
.places .pl-b { font-size: var(--s-small); color: var(--ink-2); white-space: nowrap; }
.places .pl-a {
  justify-self: end; font-family: var(--text); font-feature-settings: "tnum" 1; font-weight: 600;
  font-size: 1rem; line-height: 1; color: var(--ink); white-space: nowrap;
}
.places .pl-row.lit .pl-a { color: var(--blue); }

/* ---- touch screens: tap words ------------------------------------------------------------------------------- */
@media (hover: none) {
  .places .pl-hint-point { display: none; }
  .places .pl-hint-tap { display: inline; }
  .places .pl-scroll { cursor: default; }
}

/* ---- phone ------------------------------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .places .pl-top { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .places .pl-map { justify-self: stretch; max-width: none; }
  .places .pl-pick { padding-top: 10px; }
  .places .pl-list {
    display: flex; gap: 8px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 10px;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; scroll-padding: 0 var(--gutter);
  }
  .places .pl-list::-webkit-scrollbar { display: none; }
  .places .pl-list li { flex: none; scroll-snap-align: start; }
  .places .pl-list button { width: auto; min-height: 44px; padding: 8px 12px; border: 1px solid var(--grey-2); white-space: nowrap; align-items: center; }
  .places .pl-list button[aria-pressed="true"] { border-color: var(--blue-3); }
  .places .pl-view { margin-top: 26px; }
  /* the facts, tight: who, where, two numbers on one line, date and source side by side, then the link */
  .places .pl-meta {
    grid-template-areas: "place place" "auth auth" "stats stats" "facts facts" "open steps";
    column-gap: 16px; padding-bottom: 14px; align-items: center;
  }
  .places .pl-auth { font-size: .82rem; margin-top: 6px; }
  .places .pl-place { font-size: 40px; }
  .places .pl-stats { justify-self: stretch; margin-top: 12px; gap: 6px 22px; flex-wrap: wrap; }
  .places .pl-stats > div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: .45em; }
  .places .pl-stats dt { margin: 0; font-size: .82rem; white-space: normal; }
  .places .pl-num { font-size: 1.3rem; }
  .places .pl-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 12px; }
  .places .pl-facts dd { display: block; margin-top: 2px; font-size: .92rem; line-height: 1.35; }
  .places .pl-facts dd small { display: block; font-size: .78rem; }
  .places .pl-open { justify-self: start; align-self: center; margin-top: 12px; font-size: .95rem; }
  .places .pl-steps { align-self: center; margin-top: 12px; }
  .places .pl-panes { grid-template-columns: 1fr; gap: 16px; --pane-h: 300px; }
  .places .pl-rows { height: 380px; }
  .places .pl-cap { margin-top: 10px; }
  .places .pl-zoom { right: 10px; bottom: 10px; height: 36px; }
  .places .pl-rows-head, .places .pl-row { grid-template-columns: 12px minmax(0, 1fr) 5.4rem 3.1rem; column-gap: 10px; }
  .places .pl-rows-head span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .places .pl-grp-h { padding-left: 26px; }
  .places .pl-row { min-height: 48px; }
  .places .pl-un { font-size: .9rem; }
  .places .pl-b { font-size: .8rem; white-space: normal; line-height: 1.25; }
  .places .pl-a { font-size: .95rem; }
}
@media (max-width: 520px) {
  .places .pl-br { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .places .pl-row { opacity: 1; transform: none; }
  .places .pl-dots .pl-dot { opacity: .85; }
}