/* The frame around a place (view/place-frame.js). It reads the blog's tokens, which carry both themes, so it needs no rules
   of its own for dark mode. Titles wrap; nothing here shortens one. The strip's reserved space is in style.css. */
.pf { font-family: var(--font-sans); color: var(--color-text); }
.pf a { color: inherit; text-decoration: none; }
.pf a:hover, .pf a:focus-visible { color: var(--color-accent); }
.pf p { margin: 0; }

/* where the reader is, the way on, and Keep: one line, wrapping only when the width runs out */
.pf-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding: var(--space-sm) 0; font-size: var(--place-text); line-height: 1.4; }
.pf-select { font: inherit; font-weight: 600; padding: 0; background: none; border: 0; color: var(--color-text); cursor: pointer; text-align: left; }
.pf-select::after { content: " ▾"; color: var(--color-text-muted); }
.pf-select[aria-expanded="true"]::after { content: " ▴"; }
.pf-select:hover { color: var(--color-accent); }
.pf-off { color: var(--color-text-muted); }
/* on a phone the trigger names the route and the way back says which step: the note is for a screen reader there */
@media (max-width: 767px) { .pf-off { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.pf .pf-back { color: var(--color-accent); font-weight: 500; }
.pf-back::before { content: "← "; }
.pf-arrows { display: inline-flex; align-items: baseline; gap: var(--space-sm); }
.pf .pf-prev { color: var(--color-text-muted); }
.pf-prev::before { content: "←"; }
.pf .pf-next { color: var(--color-accent); font-weight: 500; }
.pf-next::after { content: "→"; }
.pf .pf-prev:hover, .pf .pf-prev:focus-visible { color: var(--color-accent); }

/* one quiet word each; state is colour, never a pill */
.pf-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-left: auto; }
.pf-keep { font: inherit; padding: 0; border: 0; background: none; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.pf-keep:hover, .pf-keep:focus-visible { color: var(--color-text); }
.pf-keep[aria-pressed="true"] { color: var(--color-accent); }
.pf-keep[aria-pressed="true"]::before { content: "✓ "; }
.pf .pf-kept-link { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }

/* the selector, open: a chip per walk and per type, then the list for the chip */
.pf-sel-panel { max-height: 52vh; overflow: auto; padding: var(--space-xs) 0 var(--space-sm); overscroll-behavior: contain; }
.pf-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-bottom: var(--space-sm); }
.pf-chip { font: inherit; font-size: var(--text-xs); line-height: 1.4; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border); border-radius: 999px; background: none; color: var(--color-text-muted); cursor: pointer; }
.pf-chip:hover, .pf-chip:focus-visible { color: var(--color-text); border-color: var(--color-text-muted); }
.pf-chip.walk { color: var(--color-text); }
.pf-chip[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
/* what the arrows follow says so in more than colour */
.pf-chip.walk[aria-pressed="true"]::before { content: "✓ "; }
.pf-chip.showing { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.pf-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.pf-steps-list a { display: flex; gap: var(--space-sm); align-items: baseline; padding: var(--space-xs) 0; }
.pf-steps-list .n { flex: none; min-width: 1.6em; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pf-steps-list .t { font: 400 var(--text-sm)/1.3 var(--font-serif); }
.pf-steps-list .on .t { font-weight: 600; }

/* what it connects to: a title and a short relation, and the author's sentence under them */
.pf-h { margin: 0 0 var(--space-sm); font: 600 var(--text-xs)/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.pf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.pf-item { display: flex; flex-direction: column; }
.pf-item .t { font: 500 var(--text-sm)/1.3 var(--font-serif); color: var(--color-text); }
.pf-item:hover .t, .pf-item:focus-visible .t { color: var(--color-accent); }
.pf-item .why { font-size: var(--text-xs); line-height: 1.4; color: var(--color-text-muted); }
.pf-list q { display: block; margin-top: var(--space-xs); font: 400 var(--text-xs)/1.5 var(--font-serif); color: var(--color-text-muted); quotes: "\201C" "\201D"; }
.pf-more { font: inherit; font-size: var(--text-xs); margin-top: var(--space-xs); padding: var(--space-xs) 0; border: 0; background: none; color: var(--color-accent); cursor: pointer; }
.pf-about { margin-bottom: var(--space-sm) !important; font-size: var(--text-sm); color: var(--color-text-muted); }
.pf-map { margin-top: var(--space-sm) !important; font-size: var(--text-xs); }
.pf .pf-map a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }

/* on a page: a strip over the title, and the list at the end of the article */
.place-top { border-bottom: 1px solid var(--color-border); }
.place-end { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
@media print { .place-top, .place-end { display: none; } }