/* Phone panels (mobile redesign, Nov 2026): passport page with tabs, crew/port/route sheets, draggable sheets.
   Phone-only rules live inside @media (max-width: 760px). Above that, only what the new markup needs to look as it
   did (the sheet's sticky head is no box there) and a few things that read better everywhere (marked "all sizes"). */

/* ---- all sizes ------------------------------------------------------------------------------------------------ */
/* the panel's head (× and title): a sticky bar on a phone; on a wider screen no box at all, so nothing moves */
.dr-head { display: contents; }
.port-meta { display: none; }
/* the route's blurb and "Show the whole route" left its header (the header is the phone's sticky bar): the line
   under the header moves under them, so a wide screen looks as before */
.dr-head > .route-head { padding-bottom: 0; border-bottom: 0; }
.rt-intro { padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }      /* (in the header its button overhung the line by 4px) */
/* the route's key facts: three short columns, the label over its value (two lines at most); its whole story folded
   under "About this route", after the episodes */
.rt-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.rt-key > div { min-width: 0; display: grid; align-content: start; gap: 2px; }
.rt-key dt { font: 700 10.5px/1.25 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); overflow-wrap: break-word; hyphens: auto; }
.rt-key dd { margin: 0; font: 600 14px/1.3 var(--sans); color: var(--ink); overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.rt-more { margin-top: 20px; border-top: 1px solid var(--line); }
.rt-more > summary { display: flex; align-items: center; min-height: 48px; list-style: none; cursor: pointer; }
.rt-more > summary::-webkit-details-marker { display: none; }
.rt-more > summary h3 { margin: 0 !important; }
.rt-more > summary::after { content: '›'; margin-left: auto; font-size: 22px; color: var(--ink-3); transition: transform .2s; }
.rt-more[open] > summary::after { transform: rotate(90deg); }

/* one episode row (ui.js episodeRow) for the crew, port and route sheets and a wider screen's port and route panels
   (style.css: its card opening under it there): a 16:9 picture, the title on two lines, one line of meta */
.ep-rows { list-style: none; margin: 0; padding: 0; }
.ep-row { border-bottom: 1px solid var(--line); }
.ep-row:last-child { border-bottom: 0; }
.ep-rbtn { display: flex; gap: 12px; align-items: flex-start; width: 100%; min-height: 83px; padding: 10px 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.ep-th { position: relative; flex: none; width: 112px; height: 63px; border-radius: 8px; overflow: hidden; background: #2a2118; }
.ep-th img { width: 100%; height: 100%; object-fit: cover; }
.ep-th .ep-dur { right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.ep-seen { position: absolute; left: 4px; top: 4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; }
.ep-seen .ic { width: 13px; height: 13px; }
.ep-tx { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ep-tt { font: 600 14.5px/1.3 var(--sans); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ep-newdot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--gold); vertical-align: 2px; }
.ep-mt { font: 500 13px/1.35 var(--sans); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-row.watched .ep-tt { color: var(--ink-2); }

/* the crew panel: where they were last seen, their numbers as one quiet line (not tiles that look like buttons),
   their own words cut to three lines, the voyage's first and last stop with the rest folded */
.crew-where { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.crew-seen { display: flex; align-items: flex-start; gap: 7px; margin: 0; flex: 1 1 220px; font-size: 14px; color: var(--ink-2); }
.crew-seen .ic { flex: none; margin-top: 2px; color: var(--navy); }
.crew-seen b { color: var(--ink); }
.crew-seen .link-btn { font-size: inherit; }
.cta-row .btn.primary .ic { fill: none; }
.cta-share { flex: none; width: 38px; height: 38px; }
.crew-stats { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.crew-stats b { color: var(--ink); font-weight: 800; }
.log-more { margin-top: 8px; }
.crew-about { margin-top: 20px; }
.crew-about .about { margin: 0; }
.crew-about.clamp:not(.open) .about { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.crew-about.clamp:not(.open) .about cite { display: none; }
.about-tools { display: flex; gap: 14px; align-items: center; margin: 6px 0 0; }
.about-tools .link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.about-tools .ic { width: 13px; height: 13px; }
.cv-ends { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.cv-mid { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.cv-mid::before, .cv-mid::after { content: ''; width: 14px; border-top: 2px dotted var(--ink-3); }
.cv-all { margin-top: 10px; }
.cv-all > summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--navy); list-style: none; }
.cv-all > summary::-webkit-details-marker { display: none; }
.cv-all > summary::after { content: '›'; margin-left: 6px; transition: transform .2s; }
.cv-all[open] > summary::after { transform: rotate(90deg); }
.cv-all .route { margin-top: 8px; }

/* the crew panel's "Their boat: … See it in the Boat Show" (ui.js theirBoat; only while the Boat Show is switched on) */
.bs-their { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font: 600 13.5px/1.45 var(--sans); color: var(--ink-2); }
.bs-their > .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--navy); }
.bs-their b { font: 400 16px var(--serif); color: var(--ink); }
.bs-their .bs-n { font: 600 .84em var(--sans); }                          /* (numbers in Manrope, as everywhere) */
.bs-their .link-btn { font-size: 13px; }
@media (max-width: 760px) { .bs-their .link-btn { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; vertical-align: middle; font-size: 14px; } }

/* a channel not on the chart yet (the search's "Not on the chart?"): what to send, then how, at the top */
.bt-suggest .bt-lede { margin: 0; font: 400 16.5px/1.5 var(--serif); color: var(--ink); text-align: center; }
.bt-suggest .bt-send { display: flex; justify-content: center; margin: 16px 0 6px; }
.bt-suggest .bt-send .mail-send { margin: 0; }
.bt-suggest .bt-send .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.bt-suggest .bt-fine { margin-top: 10px; font-size: 13px; }
.bt-suggest .mail-addr .link-btn { min-height: 44px; }

/* a crew in focus: its clusters count its own ports, in its colour */
.node.cluster.crew-own .c-count { fill: var(--navy); }

/* "Show the whole route" / "Show route on chart": the line flashes, so a tap always shows something */
.route.flash .rt-line { opacity: 1; stroke-width: 5; }
.track.flash .track-line { stroke-width: 5; }
@media (prefers-reduced-motion: no-preference) {
  .route.flash .rt-line, .track.flash .track-line { animation: pn-flash .55s ease-in-out 3; }
  .ship.flash .ship-bob { animation: pn-bob .55s ease-in-out 3; }
}
@keyframes pn-flash { 50% { stroke-width: 8; opacity: .55; } }
@keyframes pn-bob { 50% { transform: translateY(-6px) scale(1.25); } }
/* …and two rings go out from the boat (chart.js flashCrew), so a tap on Route shows something even when nothing moves */
.ship-ping { fill: none; stroke-width: 3; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .ship-ping { animation: ship-ping .9s ease-out 2; } }
@media (prefers-reduced-motion: reduce) { .ship-ping { opacity: .8; } }
@keyframes ship-ping { from { transform: scale(.7); opacity: .95; } to { transform: scale(3); opacity: 0; } }
/* a quest object off screen: its bobbing waits (chart.js marks it .off) */
.qobj.off image { animation-play-state: paused; }

/* ---- the passport (all sizes; docs: ux-consult/passport-spec.md §3) ---------------------------------------------------
   Six type styles (title IM Fell 22, story 17, section IM Fell SC 17, body 15, meta 13, caps 11.5); numbers always in
   Manrope (IM Fell's "41" reads "4I"); one card style, used once per screen; rows separated by a hairline; one progress
   bar (4px gold); navy acts, gold rewards, green is done; no looping animation. A wide screen gets the same page in a
   560px dialog. */
.modal-card.pp-card { width: min(560px, 100%); padding: 0; background: var(--paper); }
.passport { --card: #fffaf0; --gold-ink: #8a5d12; --gold-soft: #f6e6b8;
  min-height: 100%; padding: 0 0 24px; font: 500 15px/1.45 var(--sans); background: var(--paper); }
.passport h3.pp-title, .pp-sheet h2.pp-title { margin: 0; font: 400 22px/1.15 var(--serif); letter-spacing: 0; }
.passport .pp-up-top h3.pp-title { margin-top: 2px; }
/* (style.css hides a dialog head's own × on wide screens: the passport's bar keeps its ×, a tap wide) */
.modal-card .passport .pp-bar > .pp-x { visibility: visible; width: 44px; height: 44px; }
.passport button { font: inherit; color: inherit; }
.passport .pp-num, .passport .pp-cnt, .passport .pp-big, .passport .pp-dot, .passport .pp-rdisc { font-family: var(--sans); font-variant-numeric: tabular-nums; }
/* header: the rank, one fact, the bar; a tap opens Ranks & leagues (the old .pp-bar progress bar's rules undone) */
.passport .pp-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 4px; flex: none; max-width: none; height: 64px; margin: 0;
  padding: 0 6px 0 16px; border-radius: 0; overflow: visible; background: var(--paper); }
.passport .pp-bar i { background: none; }
.pp-rankbtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.pp-rankbtn .pp-helm { flex: none; width: 34px; height: 34px; color: var(--gold); animation: none; }
.pp-rk { flex: 1; min-width: 0; display: grid; gap: 6px; }
.pp-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* the rank's name never cut: a long one ("Marinero de agua dulce") is set a little smaller and may take two lines (the
   header's 64px hold them with the bar); an ellipsis only past two lines */
.pp-l1 b { min-width: 0; font: 400 21px/1.25 var(--serif-sc); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: break-word; }
@media (max-width: 760px) { .pp-l1 b.pp-long { font-size: 19px; line-height: 1.05; } }
.pp-fact { margin-left: auto; flex: none; font: 600 12.5px var(--sans); color: var(--ink-3); white-space: nowrap; }
.pp-chev { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.passport .pp-x { flex: none; width: 44px; height: 44px; border: 0; background: none; }
.passport .pp-x:hover { background: var(--paper-2); }
.pp-meter { display: block; height: 4px; border-radius: 2px; background: var(--paper-3); overflow: hidden; }
.pp-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--gold) !important; }
/* the three tabs: a segmented control, sticky under the header */
.pp-seg { position: sticky; top: 64px; z-index: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; height: 44px; margin: 0 16px 12px; padding: 4px;
  border-radius: 12px; background: var(--paper-2); box-shadow: 0 -12px 0 var(--paper); }
.pp-seg [role="tab"] { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 4px; border: 0; border-radius: 9px; background: none;
  font: 600 14px var(--sans); color: var(--ink-3); white-space: nowrap; cursor: pointer; }
.pp-seg [role="tab"] { position: relative; }
.pp-seg [role="tab"]::after { content: ''; position: absolute; inset: -4px -2px; }        /* a tap 44px tall */
.pp-seg [role="tab"][aria-selected="true"] { background: var(--card); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(60, 40, 15, .18); }
.pp-dot { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold); color: #fff; font: 800 11.5px var(--sans); }
.pp-panel { padding: 4px 16px 0; outline: none; }
@media (prefers-reduced-motion: no-preference) { .pp-panel:not([hidden]) { animation: pp-fade .12s ease-out; } }
@keyframes pp-fade { from { opacity: 0; } }
/* type */
.pp-title { margin: 0; font: 400 22px/1.15 var(--serif); color: var(--ink); }
.pp-cap { font: 700 11.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.pp-meta { font: 500 13px/1.35 var(--sans); color: var(--ink-3); }
.pp-one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-two { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pp-sec { display: flex; align-items: baseline; gap: 8px; margin: 24px 0 4px; }
.pp-sec h4 { margin: 0; font: 400 17px/1.2 var(--serif-sc); letter-spacing: .02em; }
.pp-sec .pp-meta { font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-seclink { margin-left: auto; min-height: 44px; padding: 0 2px; border: 0; background: none; font: 700 13px var(--sans) !important; color: var(--navy) !important; cursor: pointer; }
/* the one card */
.pp-card { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.pp-up-top { display: flex; align-items: center; gap: 12px; }
.pp-up-top .pp-title { margin-top: 2px; }
.pp-up-text { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.pp-where { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin-top: 10px; font: 600 13px var(--sans); color: var(--ink-2); }
.pp-where .ic { align-self: center; width: 16px; height: 16px; color: var(--gold); }
.pp-where code { font: 500 12px ui-monospace, Consolas, monospace; color: var(--ink-3); }
.passport .pp-go { display: flex; width: 100%; height: 48px; margin-top: 16px; border-radius: 12px; font: 700 15px var(--sans); color: #f6eedb; }
.passport .pp-go:hover { transform: none; }
.pp-hint { margin: 10px 0 0; font: 500 13px/1.4 var(--sans); color: var(--ink-3); text-align: center; }
.pp-up.done .pp-title { font-size: 18px; line-height: 1.3; }
/* art: a disc; a rumour's is a dashed gold ring (sealed, not yet) */
.pp-art { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2); color: var(--gold-ink); overflow: hidden; }
.pp-art.pp-lg { width: 56px; height: 56px; }
.pp-art img { width: 100%; height: 100%; object-fit: contain; }
.pp-art .ic { width: 20px; height: 20px; }
.pp-art.rumour { background: transparent; border: 1.5px dashed var(--gold); }
.pp-ring { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.pp-ring.done { background: #e3efe2; color: var(--green); }
.pp-ring.lock { border: 1.5px dashed var(--line-2); color: var(--ink-3); }
/* rows */
.pp-rows { list-style: none; margin: 0; padding: 0; }
.pp-rows > li { border-bottom: 1px solid var(--line); }
.pp-rows > li:last-child { border-bottom: 0; }
.pp-fin { margin-top: 16px; border-top: 1px solid var(--line); }
.pp-row, .pp-reg { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.pp-reg { min-height: 56px; }
.pp-row.static { cursor: default; min-height: 52px; }
.pp-mid { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pp-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 400 17px/1.2 var(--serif); white-space: nowrap; overflow: hidden; }
/* (the title in its own box: text-overflow does nothing on a flex container's own text, so a long title was cut mid-letter) */
.pp-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-new { flex: none; font: 700 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.pp-nm { font: 600 15px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-prog { display: flex; align-items: center; gap: 8px; }
.pp-prog .pp-meter { width: 88px; flex: none; }
.pp-right { flex: none; display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.pp-cnt { font: 600 13px var(--sans); color: var(--ink-2); white-space: nowrap; }
.pp-row[aria-expanded="true"] .pp-right .pp-chev { transform: rotate(180deg); }
.pp-row.muted .pp-nm, .pp-reg.muted .pp-nm { color: var(--ink-3); }
.pp-reg.muted { min-height: 48px; }
.pp-row-body { margin: -2px 0 10px 19px; padding: 0 0 4px 31px; border-left: 2px solid var(--paper-3); }
.pp-row-body.flat { margin-left: 0; padding-left: 0; border-left: 0; }
@media (prefers-reduced-motion: no-preference) { .pp-row-body:not([hidden]) { animation: pp-open .18s ease-out; } }
@keyframes pp-open { from { opacity: 0; transform: translateY(-4px); } }
.pp-row-body > .pp-cap { margin: 2px 0 4px; color: var(--ink-3); }
.pp-lead { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 0; }
.pp-lead .pp-art { background: var(--card); }
.pp-lead.fin { min-height: 52px; }
.pp-lead .pp-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-lead.fin .pp-meta { white-space: normal; }
.pp-sail { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--navy); background: none; color: var(--navy); cursor: pointer; }
.pp-sail:hover { background: var(--navy); color: #f6eedb; }
.pp-sail .ic { width: 20px; height: 20px; }
.pp-textlink { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; font: 600 13px var(--sans) !important; color: var(--ink-3) !important; text-align: left; cursor: pointer; }
.pp-textlink.navy { color: var(--navy) !important; }
.pp-textlink .ic { width: 18px; height: 18px; flex: none; }
.pp-more { margin-top: 2px; color: var(--navy) !important; }
.pp-rows.cut:not(.all) > li:nth-child(n + 4), .pp-leads.cut:not(.all) > :nth-child(n + 4), .pp-rows.cut5:not(.all) > li:nth-child(n + 6),
  .pp-grid.cut6:not(.all) > :nth-child(n + 7) { display: none; }
.pp-quests > .pp-textlink:last-child { margin-top: 8px; }
/* stamps */
.pp-sum { display: flex; align-items: center; gap: 12px; padding: 4px 0 8px; }
.pp-sum-l { flex: 1; min-width: 0; display: grid; }
.pp-big { font: 800 36px/1 var(--sans); letter-spacing: -.01em; }
.pp-sum1 { margin-top: 4px; font: 600 14px var(--sans); }
.pp-latest { flex: none; display: flex; padding-left: 8px; }
.pp-latest .stamp-slot { width: 62px; height: 62px; margin-left: -8px; padding: 0; }
.pp-reg .pp-mid { gap: 8px; }
.pp-regview { padding-top: 2px; }
.pp-back { margin-top: -6px; }
.pp-country { margin-top: 16px; }
.pp-ch { display: flex; align-items: baseline; gap: 8px; }
.pp-ch b { font: 700 15px var(--sans); }
.pp-ch .pp-cnt { margin-left: auto; color: var(--ink-3); }
.pp-ch.sub { margin: 14px 0 4px; }
.pp-stamps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 6px 0 2px; }
.pp-stamps .stamp-slot { aspect-ratio: 1; padding: 3px; }
.pp-port { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.pp-port .pp-nm { flex: 1; min-width: 0; font-weight: 500; }
.pp-sealed { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--line-2); color: var(--ink-3); }
.pp-sealed .ic { width: 15px; height: 15px; }
.pp-empty { margin-top: 4px; text-align: center; }
.pp-empty p { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.pp-seals { display: flex; justify-content: center; gap: 10px; margin: 4px 0 10px; }
.pp-seals > span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 2px dashed var(--line-2); color: var(--ink-3); transform: rotate(var(--r, 0deg)); }
.pp-seals .ic { width: 28px; height: 28px; }
.pp-empty + .pp-rows { margin-top: 12px; }
/* treasures: tiles */
.pp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; margin-top: 8px; }
.pp-tile { display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 100px; padding: 6px 2px; border: 0; border-radius: 12px; background: none; text-align: center;
  font: 600 12.5px/1.25 var(--sans) !important; color: var(--ink); cursor: pointer; }
.pp-tile:hover { background: rgba(255, 252, 244, .7); }
.pp-disc { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--paper-2); color: var(--gold-ink); }
.pp-disc img { width: 44px; height: 44px; object-fit: contain; }
.pp-disc .ic { width: 26px; height: 26px; }
.pp-disc .shell { width: 44px; height: auto; }
.pp-tile[style*="--t"] .pp-disc { background: color-mix(in srgb, var(--t) 13%, var(--paper)); }
.pp-tile.medal .pp-disc { background: var(--gold-soft); border: 1.5px solid var(--gold); }
.pp-tile.medal .pp-disc img { width: 38px; height: 38px; }
.pp-tile.wanted .pp-disc { box-shadow: 0 0 0 2px var(--gold); }
.pp-tile.locked { cursor: default; color: var(--ink-3); }
.pp-tile.locked:hover { background: none; }
.pp-tile.locked .pp-disc { background: none; border: 1.5px dashed var(--line-2); color: var(--ink-3); }
.pp-lbl { width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; hyphens: auto; }
.pp-wants, .pp-how1 { font: 600 11.5px var(--sans); color: var(--gold-ink); }
.pp-how1 { color: var(--ink-3); font-weight: 500; }
.pp-c-all .pp-ch.sub:first-child { margin-top: 4px; }
/* the sheet over the passport (Ranks & leagues, How quests work, a treasure, a list) */
.pp-sheet-wrap { position: fixed; z-index: 30; overflow: hidden; border-radius: inherit; }
.pp-scrim { position: absolute; inset: 0; background: rgba(35, 25, 12, .42); opacity: 0; transition: opacity .2s; }
.pp-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 64px); overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(24px + var(--ph-sb, 0px));
  border-radius: 18px 18px 0 0; background: #f8f2e3; box-shadow: 0 -6px 30px rgba(40, 25, 10, .3); outline: none;
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); font: 500 15px/1.45 var(--sans); }
.pp-sheet-wrap.on .pp-scrim { opacity: 1; }
.pp-sheet-wrap.on .pp-sheet { transform: none; }
.pp-sheet-grip { display: grid; place-items: center; height: 20px; margin: 0 -16px; touch-action: none; }
.pp-sheet-grip i { width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); }
.pp-sheet .pp-sheet-x { position: absolute; top: 8px; right: 6px; z-index: 2; width: 44px; height: 44px; border: 0; background: none; }
.pp-sheet .pp-sheet-x:hover { background: var(--paper-2); }
.pp-sh-head { display: flex; align-items: center; min-height: 52px; padding-right: 52px; }
.pp-sheet p { margin: 8px 0 0; color: var(--ink-2); }
.pp-sheet .pp-you { margin: 0 0 4px; font: 600 15px var(--sans); color: var(--ink); }
.pp-sheet .pp-meta { margin: 0 0 6px; }
.pp-sheet > .pp-meter { margin-bottom: 12px; }
.pp-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pp-ladder li { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 10px; color: var(--ink-3); }
.pp-ladder li.got, .pp-ladder li.now { color: var(--ink); }
.pp-ladder li.now { background: var(--gold-soft); }
.pp-rdisc { display: grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 12px; border: 1.5px dashed var(--line-2); font: 800 12px var(--sans); }
.pp-ladder li.got .pp-rdisc, .pp-ladder li.now .pp-rdisc { border: 0; background: var(--gold); color: #2b2219; }
.pp-rname { flex: 1; font: 400 17px var(--serif-sc); }
.pp-rstate { display: flex; color: var(--green); }
.pp-rstate .pp-cap { color: var(--gold-ink); }
.pp-rstate .ic { width: 20px; height: 20px; }
.pp-earn { list-style: none; margin: 0; padding: 0; }
.pp-earn li { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--line); }
.pp-earn li:last-child { border-bottom: 0; }
.pp-earn li > span { flex: 1; }
.pp-earn li > .ic { width: 20px; height: 20px; color: var(--gold-ink); }
.pp-earn b { font: 800 14px var(--sans); color: var(--gold-ink); white-space: nowrap; }
.pp-sheet .pp-earn-note { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0 0; }
.pp-earn-note .ic { flex: none; width: 20px; height: 20px; color: var(--ink-3); }
.pp-item { display: flex; gap: 14px; align-items: flex-start; }
.pp-item p { margin: 0; }
.pp-facts { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 8px; color: var(--ink-2); }

/* ---- phones ------------------------------------------------------------------------------------------------ */
@media (max-width: 760px) {
  /* The sheet (js/sheet.js). One height, the full one: its top a strip under the top row (--ph-top + 56px), its bottom
     a gap above the tab bar (--ph-sheet-bottom, mobile-shell.css). It moves with transform only: closed (below the
     screen), peek and full; sheet.js sets the transform while it is open. At peek its content doesn't scroll and every
     drag moves the sheet (touch-action: none); at full the content scrolls (pan-y), and while it is at its top a
     finger moving down moves the sheet (pan-down: only an upward finger scrolls). It slides under the tab bar. */
  .drawer { top: calc(var(--ph-top) + 56px); bottom: var(--ph-sheet-bottom, calc(8px + var(--ph-sb))); height: auto; z-index: 7;
    overflow-y: hidden; overscroll-behavior: contain; touch-action: none; -webkit-tap-highlight-color: transparent; scrollbar-width: none;
    transform: translateY(calc(100% + var(--ph-sheet-bottom, 64px) + 24px));
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .25s, visibility 0s .38s; }
  .drawer.open { transform: translateY(max(0px, calc(100% - 340px))); transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
  .drawer.tall { height: auto; }
  .drawer.sheet-full { overflow-y: auto; touch-action: pan-y; }
  .drawer.sheet-full.at-top { touch-action: pan-down; }
  .drawer.dragging { transition: none !important; user-select: none; -webkit-user-select: none; }
  .drawer::-webkit-scrollbar { display: none; }

  /* the grip: a band at the sheet's top edge with a bar that says "drag me"; a tap switches peek and full */
  .dr-grip { position: sticky; top: 0; z-index: 4; display: flex !important; justify-content: center; align-items: flex-start; width: 100%; height: 20px; margin: 0;
    padding: 8px 0 0; border: 0; background: var(--panel); cursor: grab; touch-action: none; }
  .dr-grip i { width: 36px; height: 4px; border-radius: 99px; background: var(--line-2); transition: width .2s, background .2s; }
  .drawer.dragging .dr-grip i { width: 48px; background: var(--ink-3); }
  .dr-grip:focus-visible { outline-offset: -4px; }

  /* the head under it: the panel's name and its × stay at the top while the content scrolls; it drags the sheet too */
  .dr-inner { padding: 0 16px calc(24px + var(--ph-sb, 0px)); }
  .dr-head { display: block; position: sticky; top: 20px; z-index: 3; margin: 0 -16px; padding: 0 16px; background: var(--panel); touch-action: none; }
  .dr-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--line); }
  .drawer .dr-head > .dr-close { position: absolute; top: 0; right: 6px; z-index: 2; float: none; margin: 0; width: 44px; height: 44px; }
  .drawer .dr-head > .dr-close::after { inset: -2px; }
  .drawer .dr-head .port-head { padding: 0 48px 10px 0; border-bottom: 0; }
  .drawer .dr-head .port-head .kicker { display: flex; min-height: 18px; white-space: nowrap; overflow: hidden; }
  .drawer .dr-head .port-head h2 { margin: 2px 0 0; font-size: 24px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .drawer .dr-head .coords, .drawer .dr-head .charted { display: none; }
  .port-meta { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
  .drawer .dr-head + * { margin-top: 12px; }

  /* the port: its episodes straight under the head; "Part of" a route and the notes come after them */
  .port-body { display: flex; flex-direction: column; }
  .port-body > .rt-chips { order: 2; margin: 16px 0 0; }
  .port-body > .note-box, .port-body > .hint { order: 3; }
  .port-body > .dr-sec:not(.port-eps) { order: 4; }
  .port-body > .port-eps { margin-top: 0; }
  .drawer .port-eps > h3 { margin: 0 0 8px; }

  /* the crew: a compact head (56px picture, the name on one line, handle · subscribers) */
  .drawer .crew-top .crew-head { gap: 12px; padding: 2px 48px 10px 0; }
  .drawer .crew-top .portrait { --s: 56px !important; }
  .drawer .crew-top .crew-head > div { min-width: 0; }
  .drawer .crew-top .crew-head h2 { font-size: 22px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .drawer .crew-top .kicker { font-size: 11px; }
  .drawer .crew-top .handle { margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crew-where { margin-bottom: 10px; }
  .crew-route { height: 40px; }
  .cta-row { flex-wrap: nowrap; }
  .cta-row .btn { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 12px; }
  .cta-row .cta-share { flex: none; width: 44px; height: 44px; }
  .crew-log .tabs button { height: 36px; }
  .crew-log .rows .row { padding: 6px 0; }

  /* the route: its episodes first, its facts folded under "About this route" */
  .rt-intro { padding-bottom: 12px; }
  .rt-intro .rt-blurb { margin: 0 0 10px; font-size: 14px; }
  /* its key facts under the title (all sizes, above); the blurb then opens "About this route" */
  .rt-key { margin: 0 0 8px; }
  .rt-more .rt-blurb { margin: 4px 0 12px; font: 600 15px/1.45 var(--sans); color: var(--ink-2); }
  .rt-intro .btn[data-act="route-fit"] { min-height: 44px; margin-block: -2px; }       /* (a tap tall; the line as it was) */
  .rt-eps { margin-top: 12px; }

  /* a cluster: plain rows with a hairline between them (rows, not boxes), each a tap tall */
  .cluster-list { gap: 0; }
  .cluster-list li { border-bottom: 1px solid var(--line); }
  .cluster-list li:last-child { border-bottom: 0; }
  .cluster-list button { min-height: 56px; padding: 6px 0; border: 0; border-radius: 0; background: none; }
  .cluster-list button:hover { background: none; transform: none; }
  .cluster-list .near-name { font-size: 15px; }

  /* a curiosity: its shell beside the title, so the story starts at the peek */
  .drawer .dr-head .egg-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 0 12px; padding: 0 48px 10px 0; margin: 0; border-bottom: 0; text-align: left; }
  .drawer .dr-head .egg-head .egg-emblem { grid-row: 1 / span 3; align-self: center; }
  .drawer .dr-head .egg-emblem svg { width: 48px; height: 45px; }
  .drawer .dr-head .egg-head > :not(.egg-emblem) { grid-column: 2; justify-self: start; }
  .drawer .dr-head .egg-head h2 { margin: 0; font-size: 22px; line-height: 1.15; }
  .drawer .dr-head .egg-head .coords { display: block; font-size: 13px; }

  /* the passport, a tab page (mobile-shell.css sizes its box above the tab bar): a sheet over it fills it */
  .modal-card.pp-card { width: 100%; }

  /* the Crews page (ui.js crewsListHTML): a list of 72px rows, not cards. The intro is cut to two lines (More opens it),
     the search stays at the top while the list scrolls (clear of the floating ×), the order under it */
  .crews-page.cp-phone { padding: 16px 16px 24px; }
  .cp-phone .cp-head { display: block; padding-right: 52px; }
  .cp-phone .cp-head > .icon-btn { display: none; }
  .cp-phone .cp-head h2 { margin: 2px 0 4px; font-size: 30px; line-height: 1.1; }
  .cp-phone .crew-about.cp-intro { margin: 0; }
  .cp-intro-t { margin: 0; font: 500 14.5px/1.45 var(--sans); color: var(--ink-2); }
  .cp-intro:not(.open) .cp-intro-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .cp-phone .cp-tools { display: contents; }             /* (so the search sticks within the whole page, not its own row) */
  .cp-phone .cp-search { position: sticky; top: 0; z-index: 3; height: 56px; margin: 4px -16px 0; padding: 0 64px 0 30px; border: 0; border-radius: 0;
    background: var(--paper) padding-box; box-shadow: none; }
  .cp-phone .cp-search::before { content: ''; position: absolute; z-index: -1; inset: 4px 60px 4px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: #fffaf0; }
  .cp-phone .cp-search:focus-within { box-shadow: none; }
  .cp-phone .cp-search:focus-within::before { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(35, 64, 94, .12); }
  .cp-phone .cp-sort { justify-content: flex-end; margin-top: 6px; }
  .cp-phone .cp-sort select { height: 44px; }
  .cp-list { display: block; list-style: none; margin: 4px 0 0; padding: 0; }
  .cp-list .cp-row { flex-direction: row; align-items: center; gap: 0; min-height: 72px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  .cp-list .cp-row:last-child { border-bottom: 0; }
  .cp-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; }
  .cp-main .av { flex: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--c); }
  .cp-tx { flex: 1; min-width: 0; display: grid; gap: 3px; }
  .cp-tx b { font: 400 18px/1.2 var(--serif); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cp-tx small { font: 500 13px/1.3 var(--sans); color: var(--ink-3); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }   /* (a long status wraps rather than being cut) */
  /* (Follow rewrites the button's content with a word: the star stays alone, the name is in its aria-label) */
  .cp-star { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font-size: 0; cursor: pointer; }
  .cp-star .ic { width: 22px; height: 22px; }
  .cp-star[aria-pressed="true"] { color: var(--gold); }
  .cp-star[aria-pressed="true"] .ic { fill: currentColor; }
  .cp-phone > .bottle-link { min-height: 44px; margin-top: 12px; }

  /* ---- the sheets' contents (ux-consult/passport-spec.md §4): one episode row everywhere (all sizes, above), rows not
     cards, no pills ---- */
  .pn-sec { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; }
  .pn-sec h3 { margin: 0 !important; font: 400 17px/1.2 var(--serif-sc); letter-spacing: .02em; }
  .pn-n { font: 600 13px var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .pn-textlink { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; font: 600 14px var(--sans); color: var(--ink-3); text-align: left; text-decoration: none; cursor: pointer; }
  .pn-textlink.navy { color: var(--navy); }
  .pn-textlink .ic { width: 18px; height: 18px; flex: none; }
  .pn-textlink .ic:last-child:not(:first-child) { width: 14px; height: 14px; }
  .pn-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font: 500 13px/1.4 var(--sans); color: var(--ink-3); }
  .pn-note .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; }
  .pn-fold { margin-top: 12px; border-top: 1px solid var(--line); }
  .pn-fold > summary { display: flex; align-items: center; gap: 8px; min-height: 56px; list-style: none; cursor: pointer; }
  .pn-fold > summary::-webkit-details-marker { display: none; }
  .pn-fold > summary::after { content: '›'; flex: none; padding-left: 8px; font-size: 22px; line-height: 1; color: var(--ink-3); transform: rotate(90deg); transition: transform .18s; }
  .pn-fold[open] > summary::after { transform: rotate(-90deg); }
  .pn-mid { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .pn-mid > b { font: 600 15px/1.25 var(--sans); }
  .pn-meta { font: 500 13px/1.35 var(--sans); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pn-list { list-style: none; margin: 0; padding: 0; }
  .pn-list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: 600 15px var(--sans); color: var(--ink); cursor: pointer; }
  .pn-list li:last-child button { border-bottom: 0; }
  .pn-list button > .ic { width: 20px; height: 20px; color: var(--navy); }
  /* the crew */
  .drawer .crew-top .pn-head { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 52px 8px 0; }
  .drawer .pn-head .pn-mid { gap: 3px; }
  .drawer .pn-head h2 { margin: 0; font: 400 22px/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .drawer .pn-head .pn-meta .ic { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
  .pn-acts { display: flex; gap: 8px; margin: 4px 0 2px; }
  .pn-acts .pn-btn { flex: 1 1 0; min-width: 0; height: 48px; padding: 0 10px; border-radius: 12px; font: 700 15px var(--sans); }
  .pn-acts .pn-btn.navy { background: var(--navy); border-color: var(--navy); color: #f6eedb; }
  .pn-acts .pn-btn.navy .ic { fill: none; }
  .pn-acts .pn-sq { flex: none; width: 48px; padding: 0; background: none; }
  .pn-acts .pn-btn:hover { transform: none; }
  .pn-voy { display: flex; align-items: center; gap: 8px; min-height: 44px; font: 600 13px/1.3 var(--sans); color: var(--ink-2); }
  .pn-voy > .ic { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
  .pn-voy > span { flex: 1; min-width: 0; }
  .pn-route { flex: none; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px; border: 0; background: none; font: 700 14px var(--sans); color: var(--navy); cursor: pointer; }
  .pn-route .ic { width: 18px; height: 18px; }
  .pn-tabs { margin: 8px 0 2px; }
  .pn-tabs button { height: 38px; }
  .drawer .crew-stats { margin: 6px 0 0; }
  .pn-vessel { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font: 600 14px var(--sans); color: var(--ink-2); }
  .pn-vessel .ic { flex: none; width: 18px; height: 18px; color: var(--navy); }
  .drawer .crew-about { margin-top: 10px; }
  .drawer .crew-about .about { padding: 0; border: 0; background: none; font: 500 15px/1.45 var(--sans); color: var(--ink-2); }
  .pn-film { margin-top: 12px; }
  .pn-film .compo { height: 8px; border-radius: 4px; }
  .pn-film .pn-meta { margin-top: 6px; white-space: normal; }
  .pn-stops { list-style: none; margin: 0; padding: 0; }
  .pn-stops button { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: 500 15px var(--sans); color: var(--ink); cursor: pointer; }
  .pn-stops small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-3); }
  .pn-thanks { margin: 18px 0 0; font: 500 13px/1.45 var(--sans); color: var(--ink-3); }
  /* the port */
  .drawer .dr-head .pn-port .kicker { font-size: 11.5px; }
  .drawer .dr-head .pn-port h2 { font-size: 24px; }
  .pn-crews { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: -4px 0 -6px; padding: 0; border: 0; background: none; font: 500 13px var(--sans); color: var(--ink-3); cursor: pointer; }     /* (a tap tall in the space it had) */
  .pn-stack { display: inline-flex; }
  .pn-stack .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); }
  .pn-stack .av:first-child { margin-left: 0; }
  #port-eps { margin-top: 2px; }
}