/* Bible Loom: People you've met, Places you've been, the person and place pages, the map, and a name tapped while
   reading (design: design/PEOPLE-PLACES.md, Atelier). Loads after theme.css + style.css.
   Theme variables only; no new colours. Water is a little of the God-words blue (--god), so it reads as water in
   every season and in dark mode. Pills stay semi-rounded (--r-pill). Hover changes colour only, never position. */

/* ================= Home: three tiles =================
   Phone: Stories read runs across the top (number left, OT/NT bars right); People | Places share the row under it.
   Wide (the rail): three across. Each tile is one tap, as before. */
.h-trio { grid-template-columns: 1fr 1fr; }
.h-trio > .card.st { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; row-gap: 2px; align-items: center; }
.h-trio > .card.st .k { grid-column: 1; grid-row: 1; }
.h-trio > .card.st .v { grid-column: 1; grid-row: 2; }
.h-trio > .card.st .bars { grid-column: 2; grid-row: 1 / 3; display: grid; gap: 7px; align-self: center; }
.h-trio > .card.st .tmline:first-of-type { margin-top: 0; padding-top: 0; }
/* the OT and NT numbers in one right-aligned column, so the two bars end together; a started bar shows at least a sliver */
.h-trio .tmline { grid-template-columns: 1.6rem 1fr 3ch; }
.h-trio .tmline > span:last-child { text-align: right; }
.h-trio .tmline .bar-line i:not([style*="width:0%"]) { min-width: 4px; }
.h-trio .s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h-trio .s.none { font-style: italic; }
@container loom (min-width: 900px) or ((min-width: 560px) and (min-aspect-ratio: 4/3)) {
  .h-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* one shared row for the labels, one for the numbers (subgrid): if a label wraps, all three numbers still line up */
  .h-trio { grid-template-rows: auto auto 1fr; row-gap: 0; }
  .h-trio > .card { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 2px; align-content: start; }
  .h-trio > .card .k { align-self: end; }
  .h-trio > .card.st { grid-column: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; }
  .h-trio > .card.st .k, .h-trio > .card.st .v, .h-trio > .card.st .bars { grid-column: auto; grid-row: auto; }
  .h-trio > .card.st .bars { align-self: end; padding-top: 4px; gap: 4px; }
  .h-trio .s { -webkit-line-clamp: 3; }
}

/* ================= People you've met · Places you've been =================
   Title and count, then the sort switch (it sticks under the page menu while the list scrolls), then the list. */
.pp-sort {
  position: sticky; top: -2px; z-index: 3; margin: 0 -18px 12px; padding: 6px 18px 8px;
  background: color-mix(in srgb, var(--surface) var(--pane, 100%), transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pp-sort .seg { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.pp-sort .seg button { min-height: 36px; padding: 6px 4px; font-size: .88rem; white-space: nowrap; }
.pp-sort .seg button svg { width: 16px; height: 16px; flex: none; }
.big .pp-count { margin: 0; }
/* (for style.css) the hairline after ⤡ only when something follows it */
.page-bar .pb-size:last-child::after { display: none; }

/* the first time only: what the default order means (one tap hides it for good) */
.pp-first { display: flex; align-items: flex-start; gap: 6px; padding-right: 4px; }
.pp-first span { flex: 1; padding-top: 2px; }
.pp-first .x { flex: none; width: 32px; height: 32px; margin: -4px -4px -4px 0; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: none; color: inherit; cursor: pointer; }
.pp-first .x:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pp-first .x svg { width: 16px; height: 16px; }

/* ---------- folding sections: a part of the Bible, a kind, a letter group ---------- */
.pp-sec { margin: 0 0 10px; }
.pp-sec > summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 4px 6px 2px; cursor: pointer; list-style: none;
  border-bottom: 1px solid var(--sep);
}
.pp-sec > summary::-webkit-details-marker { display: none; }
/* the fold mark: one drawn chevron, turned (the same size and centre open or folded) */
.pp-sec > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 9px 0 6px; border: solid var(--muted); border-width: 0 2px 2px 0; rotate: -45deg; transition: rotate var(--t-pop); }
.pp-sec[open] > summary::after { rotate: 45deg; translate: 0 -2px; }
.pp-sec > summary:hover .pp-t b { color: var(--accent); }
.pp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pp-t b { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent2); transition: color var(--t-2); }
.pp-t .sp { font-size: .82rem; font-weight: 600; color: var(--muted); line-height: 1.35; }
.pp-sec[open] > summary .peek { display: none; }   /* the first names are for the folded state only */
.pp-t .peek { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pp-sec > summary .n { flex: none; font-size: .82rem; font-weight: 800; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.pp-sec[open] > summary { margin-bottom: 8px; }
.pp-sec > .list { margin-bottom: 0; }
.pp-sec .pp-sec { margin: 0 0 8px 0; }   /* a book inside a part, a tribe inside the tribes */
.pp-sec .pp-sec > summary { min-height: 44px; border-bottom: 0; padding-block: 2px; padding-left: 12px; }   /* a book sits in from its part */
.pp-sec .pp-sec > summary .pp-t b { font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--text); }
.pp-sec .pp-sec[open] > summary { margin-bottom: 4px; }
/* By kind: the three bands (Roles, Groups) carry a quiet label, like Home's section headings */
.pp-band { margin: 20px 2px 4px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pp-band:first-child { margin-top: 4px; }

/* ---------- rows: the name, and under it the short tag that tells same-named people apart ---------- */
.pp-list .nrow { min-height: 48px; padding-block: 7px; }
.pp-list .nrow .nt b { font-weight: 800; }
.pp-list .nrow .nt span { -webkit-line-clamp: 1; font-size: .84rem; line-height: 1.35; }
.pp-list .nrow .ic { flex: none; width: 20px; height: 20px; color: var(--muted); }
/* Big Story: inside each book, the story where you first met them (one tap reads it), then the people */
.pp-story {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 14px; border: 0; border-bottom: 1px solid var(--sep);
  background: color-mix(in srgb, var(--surface2) 45%, transparent); color: var(--muted); font: inherit; font-size: .78rem; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer;
}
.pp-story svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.pp-story b { color: var(--text); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-story .ref { margin-left: auto; flex: none; font-weight: 600; }
.pp-story:hover b { color: var(--accent); }
/* "Other people": one list, by letter */
.pp-letter { padding: 5px 14px; border-bottom: 1px solid var(--sep); background: color-mix(in srgb, var(--surface2) 45%, transparent); font-size: .74rem; font-weight: 800; letter-spacing: .06em; color: var(--muted); }

/* ---------- A to Z: a plain list with the letters down the right edge ---------- */
.pp-az { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 6px; }
.pp-az > .list { margin: 0; }
.pp-jump { position: sticky; top: 60px; align-self: start; display: flex; flex-direction: column; margin-right: -12px; }
/* only the letters someone starts with (about 20), so the strip fits a phone; a finger can slide down it to scrub */
.pp-jump a { display: grid; place-items: center; width: 30px; height: 18px; margin-left: -4px; border-radius: var(--r-tag); font-size: .72rem; font-weight: 800; line-height: 1; color: var(--accent); text-decoration: none; }
.pp-jump a:hover, .pp-jump a.on { background: var(--accent-soft); }

/* ---------- empty ---------- */
.pp-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 36px auto 0; max-width: 20rem; padding: 0 12px; text-align: center; }
.pp-empty .ic { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.pp-empty .ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-empty p { margin: 0; font-size: 1.02rem; line-height: 1.45; }

/* ---------- Places you've been, Map view: the map fills the rest of the hub ---------- */
.hub-body.pp-fill { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.hub-body.pp-fill > .hub-col { flex: 1; min-height: 0; width: 100%; max-width: none; display: flex; flex-direction: column; }
.hub-body.pp-fill .big, .hub-body.pp-fill .pp-sort { padding-inline: 18px; margin-inline: 0; }
.hub-body.pp-fill .big { margin-top: 10px; }
.hub-body.pp-fill .pp-sort { margin-bottom: 0; position: static; }
.hub-body.pp-fill .pp-map { flex: 1; min-height: 0; border-radius: 0; border-width: 1px 0 0; }

/* ================= the person and place pages ================= */
.pp-head .chips { margin: 6px 0 4px; justify-content: inherit; }
.pp-head .chip.static { background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.pp-aka { margin: 4px 0 0; font-size: .95rem; color: var(--muted); }
.pp-aka b { color: var(--text); font-weight: 700; }
.pp-today { margin: 4px 0 0; font-size: .92rem; color: var(--muted); }
.pp-today svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* centred titles (the app's default) centre these lines too */
[data-title-align="center"] .pp-head { text-align: center; }
[data-title-align="center"] .pp-head .chips { justify-content: center; }
[data-title-align="right"] .pp-head { text-align: right; }
[data-title-align="right"] .pp-head .chips { justify-content: flex-end; }

/* the plain fact line for little-known people: same card as a dictionary paragraph */
.pp-desc p { margin: 0; line-height: 1.55; }
.pp-desc p + p { margin-top: 8px; }
.pp-desc .more { display: inline-block; margin-top: 6px; font-size: .9rem; font-weight: 800; }
.pp-desc button.more { padding: 0; border: 0; background: none; color: var(--accent); font-family: inherit; cursor: pointer; }   /* the app's Read more is a button (it shows the rest in place) */
.pp-desc button.more:hover { color: var(--text); }

/* facts and family: a label, then what it names (each a chip that opens it) */
.card.pp-facts { padding: 4px 14px; }   /* the card keeps its own margin (gap) */
.card.pp-facts > h2, .card.pp-in > h2 { font-size: 1rem; }   /* alignment follows the reader's heading setting, like every card heading */
.card.pp-in > h3 { margin: 12px 0 6px; font-size: .8rem; font-weight: 800; color: var(--muted); }
dl.pp-facts { margin: 0; }
.pp-facts > div { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--sep); }
.pp-facts > div:last-child { border-bottom: 0; }
.pp-facts dt { font-size: .82rem; font-weight: 700; color: var(--muted); }
.pp-facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-facts dd .chip { min-height: 32px; }
.pp-facts dd .plain { font-size: .9rem; font-weight: 600; color: var(--muted); padding-top: 2px; }   /* a qualifier beside the chips, not a value */
.pp-facts .chip .k { font-size: .76rem; font-weight: 700; color: var(--muted); }
@container hub (max-width: 360px) { .pp-facts > div { grid-template-columns: 1fr; } }

/* What happened (here): events in Bible order, on a thread */
.pp-ev { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 34px; border-bottom: 1px solid var(--sep); color: var(--text); text-decoration: none; cursor: pointer; }
.pp-ev:last-child { border-bottom: 0; }
.pp-ev::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; background: var(--accent-soft); }
.pp-ev:first-child::before { top: 50%; }
.pp-ev:last-child::before { bottom: 50%; }
.pp-ev::after { content: ""; position: absolute; left: 12.5px; top: 50%; width: 11px; height: 11px; translate: 0 -50%; border-radius: 50%; background: var(--panel); border: 2.5px solid var(--accent); box-sizing: border-box; }
.pp-ev .nt { flex: 1; min-width: 0; }
.pp-ev .nt b { display: block; font-weight: 800; line-height: 1.3; }
.pp-ev .nt span { font-size: .84rem; color: var(--muted); }
.pp-ev:hover { background: color-mix(in srgb, var(--surface2) 55%, transparent); }
.pp-ev.hidden { display: none; }

/* Why experts aren't sure: one quiet line from the source's author */
.pp-unsure { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-item); background: color-mix(in srgb, var(--surface2) 60%, transparent); }
.pp-unsure svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-unsure b { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.pp-unsure p { margin: 0; font-size: .95rem; line-height: 1.45; }
/* no site known at all: in place of the small map */
.pp-nomap { display: flex; gap: 12px; align-items: center; margin: 0 0 12px; padding: 14px; border: 1px dashed var(--edge); border-radius: var(--r-card); color: var(--muted); font-size: .95rem; }
.pp-nomap svg { flex: none; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ================= the map (drawn by the app: design/pp-map.js) =================
   Bible names in ink; today's names in grey, smaller, in italics, and no borders. */
.pp-map {
  --water: color-mix(in srgb, var(--god) 20%, var(--surface2));
  --land: var(--surface);
  --coast: color-mix(in srgb, var(--god) 22%, var(--border));
  --river: color-mix(in srgb, var(--god) 45%, var(--surface2));
  position: relative; overflow: hidden; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--water);
  -webkit-user-select: none; user-select: none; touch-action: none;
}
/* dark: the sea darker and bluer than the land, the land lifted toward the text colour, so the two never blur */
[data-mode="dark"] .pp-map { --water: color-mix(in srgb, var(--god) 11%, var(--bg)); --land: color-mix(in srgb, var(--text) 16%, var(--surface)); --coast: color-mix(in srgb, var(--god) 50%, var(--border)); --river: color-mix(in srgb, var(--god) 60%, var(--surface2)); }
[data-mode="dark"] .pp-map .now { fill: var(--muted); }
[data-mode="dark"] .pp-map .now.land-n { fill: color-mix(in srgb, var(--muted) 85%, transparent); }
[data-mode="dark"] .pp-map .bn.sea { fill: color-mix(in srgb, var(--god) 60%, var(--text)); }
.pp-map svg.m { display: block; width: 100%; height: 100%; fill: none; stroke: none; }   /* nothing inherited from the icon rules */
.pp-map .land { fill: var(--land); stroke: var(--coast); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pp-map .lake { fill: var(--water); stroke: var(--coast); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pp-map .river { fill: none; stroke: var(--river); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
/* labels sit on a halo of land colour, so they read over coasts and rivers */
.pp-map text { paint-order: stroke; stroke: var(--land); stroke-width: 3.2px; stroke-linejoin: round; }
.pp-map .bn { font: 700 12.5px var(--font-ui); fill: var(--text); }
.pp-map .bn.big { font-size: 14px; font-weight: 800; }
.pp-map .bn.sea { font-style: italic; font-weight: 600; fill: color-mix(in srgb, var(--god) 70%, var(--text)); stroke: var(--water); }
/* today's names: grey, lighter and in italics; countries faint and spaced; cities a small grey square-ish dot */
.pp-map .now { font: italic 500 11px var(--font-ui); fill: color-mix(in srgb, var(--muted) 85%, transparent); }
/* lands, regions, seas and rivers of the Bible: a name with no pin; lands in ink capitals, waters in the water's blue (upright) */
.pp-map .ar { font: 700 10.5px var(--font-ui); letter-spacing: .16em; fill: color-mix(in srgb, var(--text) 78%, var(--land)); }
.pp-map .ar.wa { font-size: 12px; font-weight: 600; letter-spacing: .02em; fill: color-mix(in srgb, var(--god) 75%, var(--text)); stroke-width: 0; }   /* no halo: it would show as a box on land (a river's name) */
.pp-map g.a:hover .ar, .pp-map g.a.on .ar { fill: var(--accent); }
/* the one rule for today: grey and in italics (cities, countries, seas) */
.pp-map .now.land-n { font: italic 500 11px var(--font-ui); letter-spacing: .06em; fill: color-mix(in srgb, var(--muted) 72%, transparent); stroke-width: 0; }
.pp-map .now.sea-n { stroke: var(--water); fill: color-mix(in srgb, var(--muted) 70%, transparent); }
.pp-map .now-dot { fill: color-mix(in srgb, var(--muted) 75%, transparent); stroke: var(--land); stroke-width: 1.5; }
.pp-map.no-today .today { display: none; }
/* pins: ● the most likely site (accent, with a soft ring); ○ other suggested sites */
.pp-map .pin { fill: var(--accent); stroke: var(--land); stroke-width: 2.5; }
.pp-map .halo { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: none; }
.pp-map .alt { fill: var(--land); stroke: var(--accent); stroke-width: 2; }
.pp-map .alt-line { stroke: color-mix(in srgb, var(--accent) 40%, transparent); stroke-width: 1.2; stroke-dasharray: 2 3; fill: none; }
.pp-map .clu { fill: var(--accent); stroke: var(--land); stroke-width: 2.5; }
.pp-map .clu-n { font: 800 11px var(--font-ui); fill: var(--accent-ink); stroke-width: 0; text-anchor: middle; dominant-baseline: central; }
.pp-map .sel { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.pp-map g.p { cursor: pointer; }
.pp-map g.p:hover .pin, .pp-map g.p:hover .clu { fill: color-mix(in srgb, var(--accent) 80%, var(--text)); }

/* overlays on the map: the key (a corner), Today's names, enlarge, the place you tapped */
.pp-key {
  position: absolute; left: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 2px 10px; max-width: calc(100% - 16px); padding: 5px 9px;
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text); font-size: .72rem; font-weight: 700; line-height: 1.3;
  box-shadow: 0 0 0 1px var(--sep);
}
.pp-key i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 50%; vertical-align: -1px; }
.pp-key i.b { background: var(--accent); }
.pp-key i.c { width: 15px; height: 15px; display: inline-grid; place-items: center; vertical-align: -3px; background: var(--accent); color: var(--accent-ink); font-style: normal; font-size: .6rem; font-weight: 800; }
.pp-key i.s { width: 8px; height: 8px; border: 2px solid var(--accent); background: var(--surface); box-sizing: border-box; }
.pp-key .gr { color: var(--muted); font-style: italic; font-weight: 600; }
.pp-key .gr i { width: 6px; height: 6px; background: var(--muted); opacity: .75; }
.pp-mtools { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: flex-start; gap: 8px; pointer-events: none; }
.pp-mtools > * { pointer-events: auto; }
.pp-mtools .spacer { flex: 1; pointer-events: none; }
.pp-mtools .seg { padding: 3px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 0 0 1px var(--sep); }
.pp-mtools .seg button { min-height: 34px; padding: 4px 10px; font-size: .84rem; white-space: nowrap; }
/* Today's names: a switch, on by default */
.pp-today-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 10px 4px 12px; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 0 0 1px var(--sep); color: var(--text); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.pp-today-sw .sw { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border); transition: background var(--t-2); }
.pp-today-sw .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: translate var(--t-2), background var(--t-2); }
.pp-today-sw[aria-checked="true"] .sw { background: var(--accent); box-shadow: none; }
.pp-today-sw[aria-checked="true"] .sw::after { translate: 14px 0; background: var(--accent-ink); }
.pp-today-sw:hover { color: var(--accent); }
.pp-enlarge { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 0 0 1px var(--sep); color: var(--text); cursor: pointer; }
.pp-enlarge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-enlarge:hover { color: var(--accent); }
/* the place you tapped: a card along the bottom of the map (a cluster lists its places) */
.pp-pick {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; padding: 4px; border-radius: var(--r-item);
  background: var(--surface); box-shadow: 0 0 0 1px var(--edge), 0 10px 30px -12px rgb(0 0 0 / .35);
}
.pp-pick .nrow { min-height: 52px; border-radius: calc(var(--r-item) - 4px); }
.pp-pick .nrow .go { flex: none; font-size: .86rem; font-weight: 800; color: var(--accent); }
.pp-pick .pk-h { display: flex; align-items: center; gap: 8px; padding: 8px 6px 4px 12px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pp-pick .pk-h span { flex: 1; }
.pp-pick .pk-h button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); cursor: pointer; }
.pp-pick .pk-h button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pp-pick .list { max-height: 208px; overflow-y: auto; margin: 0; border: 0; box-shadow: none; background: none; }
.pp-pick .list .nrow { min-height: 48px; padding-block: 6px; }
.pp-map:has(.pp-pick) .pp-key { display: none; }

/* the small map on a place page and in In this story: 180px tall, one tap enlarges it */
.pp-mini { height: 180px; margin: 0 0 12px; cursor: zoom-in; }
.pp-mini .pp-key { font-size: .68rem; padding: 4px 8px; }
.pp-mapfull { height: 100%; }

/* ================= a name tapped while reading: who or what it is, above the word ================= */
.pp-named { margin: 2px 0 14px; }
.pp-named .nrow { min-height: 52px; }
.pp-named .nrow .ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.pp-named .nrow .ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-named .nrow .nt b { display: inline; font-size: 1.05rem; }
.pp-named .nrow .nt .kd { display: inline; margin-left: 6px; font-size: .9rem; font-weight: 700; color: var(--muted); -webkit-line-clamp: unset; }
.pp-named .nrow .nt .tg { display: block; font-size: .84rem; color: var(--muted); }
.pp-named .nrow:hover .nt b { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .pp-sec > summary::after, .pp-today-sw .sw, .pp-today-sw .sw::after { transition: none; }
}