/* The app's phones, drawn with the app's own styles (resources/views/site/phones): on the website at / (after style.css)
 and at /journey (after journey.css). The colours are the app's (design/design-tokens.json). */
.phone {
  --bg: #FAF8F3; --ink: #2B2B2B; --shadow-lg: 0 24px 60px rgba(11, 42, 74, .18);
}
/* what the website's own page gives every element, so the phones look the same on any page (no stronger than it was there) */
:where(.phone, .phone *) { box-sizing: border-box; }
:where(.phone) { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
:where(.phone) :where(img, svg) { display: block; max-width: 100%; }
:where(.phone) p { margin: 0; }
:where(.phone) :where(h1, h2, h3, h4) { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
:where(.phone) .i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- phone mockups: the app's screens, drawn with the app's styles ---------- */
.phone {
  --s: 1;
  width: calc(300px * var(--s)); aspect-ratio: 300 / 620;
  border-radius: calc(46px * var(--s)); padding: calc(10px * var(--s));
  background: #0A0D12; box-shadow: var(--shadow-lg), inset 0 0 0 2px #2A3038;
  position: relative;
}
.phone::before { /* the camera */
  content: ""; position: absolute; z-index: 3; top: calc(20px * var(--s)); left: 50%; transform: translateX(-50%);
  width: calc(12px * var(--s)); height: calc(12px * var(--s)); border-radius: 50%; background: #000;
}
.screen {
  height: 100%; border-radius: calc(36px * var(--s)); overflow: hidden; position: relative;
  background: var(--bg); color: var(--ink); font-size: calc(11px * var(--s)); line-height: 1.35;
  display: flex; flex-direction: column;
}


/* ---------- phones drawn in the app's own dp (.app): its sizes and colours exactly, like a screenshot of a 392 dp
   wide phone (the user, 2026-10-16: the Record phone "doesn't look like my app") ---------- */
.app {
  --dp: calc(var(--s) * 280px / 392);
  --p-bg: #FAF8F3; --p-card: #fff; --p-text: #2B2B2B; --p-muted: #6B6B6B; --p-line: #E3E0D8;
  --p-a900: #0B2A4A; --p-a600: #1E5AA8; --p-a400: #6FA3E3; --p-sun: #F5A524; --p-clay: #D9534F; --p-sky: #2F80ED; --p-sand: #F3F1EA;
  --p-shadow: 0 calc(4 * var(--dp)) calc(16 * var(--dp)) rgba(15, 46, 31, .08);
}
.app .screen { background: var(--p-bg); color: var(--p-text); font-size: calc(13 * var(--dp)); line-height: 1.3; text-align: left; }
.app .i { width: 1em; height: 1em; }
.app b { font-weight: inherit; }
/* the status bar, and the gesture bar at the bottom */
.app-status {
  flex: none; height: calc(32 * var(--dp)); padding: calc(4 * var(--dp)) calc(22 * var(--dp)) 0;
  display: flex; align-items: center; justify-content: space-between; font-size: calc(13.5 * var(--dp)); font-weight: 600;
}
.app-status svg { width: calc(50 * var(--dp)); height: calc(14 * var(--dp)); fill: currentColor; }
.app .screen::after { content: ""; position: absolute; left: 50%; bottom: calc(8 * var(--dp)); transform: translateX(-50%); width: calc(108 * var(--dp)); height: calc(4 * var(--dp)); border-radius: 9px; background: var(--p-text); opacity: .8; }
/* the tab bar over the bottom of the screen, with the raised Record circle (main.dart, TabBarW) */
.app-tabs {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end;
  padding: calc(8 * var(--dp)) calc(4 * var(--dp)) calc(26 * var(--dp));
  background: var(--p-card); border-top: max(1px, var(--dp)) solid var(--p-line);
  font-size: calc(11 * var(--dp)); color: var(--p-muted); line-height: 1.2;
}
.app-tabs > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--dp)); padding: calc(4 * var(--dp)); }
.app-tabs > span > .i { font-size: calc(24 * var(--dp)); }
.app-tabs .on { color: var(--p-a600); font-weight: 600; }
.app-tabs .app-rec { position: relative; height: calc(49 * var(--dp)); padding: 0; justify-content: flex-end; }
.app-rec i {
  position: absolute; top: calc(-18 * var(--dp)); left: 50%; transform: translateX(-50%);
  width: calc(44 * var(--dp)); height: calc(44 * var(--dp)); border-radius: 50%; display: grid; place-items: center;
  background: var(--p-a600); color: #fff; font-size: calc(22 * var(--dp)); box-shadow: 0 calc(6 * var(--dp)) calc(16 * var(--dp)) rgba(0, 0, 0, .22);
}
.app-rec > span { padding-bottom: calc(4 * var(--dp)); }

/* ---------- the Record screen (record.dart): the map takes what the rest leaves (mapH) ---------- */
.rp-map { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; background: #DCDFCF; }
.rp-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rp-map .trail-edge, .rp-map .trail, .rp-map .track { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rp-map .trail-edge { stroke: #fff; stroke-width: 10; }
.rp-map .trail { stroke: var(--p-sun); stroke-width: 6; }
.rp-map .track { stroke: var(--p-a600); stroke-width: 5; }
.rp-map .me path { fill: var(--p-sky); stroke: #fff; stroke-width: 5; stroke-linejoin: round; paint-order: stroke; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); }
.rp-btn {
  position: absolute; width: calc(44 * var(--dp)); height: calc(44 * var(--dp)); border-radius: 50%;
  display: grid; place-items: center; background: var(--p-card); color: var(--p-text);
  border: max(1px, var(--dp)) solid var(--p-line); font-size: calc(22 * var(--dp));
}
.rp-layers { left: calc(12 * var(--dp)); top: calc(12 * var(--dp)); }
.rp-col { position: absolute; right: calc(12 * var(--dp)); top: calc(12 * var(--dp)); display: grid; gap: calc(8 * var(--dp)); }
.rp-col .rp-btn { position: static; }
.rp-sos { background: var(--p-clay); border-color: transparent; color: #fff; font-size: calc(12 * var(--dp)); font-weight: 800; }
/* off the trail: the red banner on the map, while the walk is off it (main.js) */
.rp-alert {
  position: absolute; left: calc(64 * var(--dp)); right: calc(64 * var(--dp)); top: calc(12 * var(--dp));
  display: none; align-items: center; gap: calc(6 * var(--dp)); padding: calc(8 * var(--dp)) calc(10 * var(--dp));
  background: #FADCDB; border: max(1px, var(--dp)) solid rgba(217, 83, 79, .5); border-radius: calc(12 * var(--dp));
  box-shadow: var(--p-shadow); color: #9E2A27; font-size: calc(13 * var(--dp)); font-weight: 600; line-height: 1.3;
}
.rp.alerting .rp-alert { display: flex; }
.rp-alert .i { font-size: calc(16 * var(--dp)); }
.rp-gps {
  position: absolute; left: calc(12 * var(--dp)); bottom: calc(12 * var(--dp)); display: flex; align-items: center;
  padding: calc(6 * var(--dp)) calc(10 * var(--dp)); border-radius: 999px; background: var(--p-card); box-shadow: var(--p-shadow);
  font-size: calc(11 * var(--dp)); font-weight: 600; white-space: nowrap;
}
.rp-gps i { width: calc(8 * var(--dp)); height: calc(8 * var(--dp)); margin-right: calc(5 * var(--dp)); border-radius: 50%; background: var(--p-a400); }
.rp-credit { position: absolute; right: 0; bottom: 0; padding: calc(1 * var(--dp)) calc(4 * var(--dp)); background: rgba(255, 255, 255, .8); color: #333; font-size: calc(9 * var(--dp)); line-height: 1.3; }
/* under the map: the state, the plan, the time, four tiles and the buttons; 108 dp under them for the tab bar */
.rp-rest { flex: none; padding: calc(10 * var(--dp)) calc(16 * var(--dp)) calc(124 * var(--dp)); }
.rp-head { display: flex; align-items: center; gap: calc(8 * var(--dp)); }
.rp-head > div { flex: 1; min-width: 0; display: grid; }
.rp-head small { font-size: calc(13 * var(--dp)); color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-head b { font-size: calc(15 * var(--dp)); font-weight: 600; }
.rp-live { flex: none; padding: calc(5 * var(--dp)) calc(11 * var(--dp)); border-radius: 999px; background: #FADCDB; color: #9E2A27; font-size: calc(12 * var(--dp)); font-weight: 600; line-height: 1.25; }
.rp-plan { margin-top: calc(8 * var(--dp)); padding: calc(8 * var(--dp)) calc(12 * var(--dp)); border-radius: calc(16 * var(--dp)); background: var(--p-card); box-shadow: var(--p-shadow); font-size: calc(12 * var(--dp)); line-height: 1.35; }
.rp-plan i { font-style: normal; color: var(--p-muted); }
.rp-plan b { font-weight: 700; }
.rp-plan em { font-style: normal; font-weight: 600; color: var(--p-a600); }
.rp-dur, .rp-grid > div { border-radius: calc(14 * var(--dp)); background: var(--p-card); box-shadow: var(--p-shadow); display: grid; gap: calc(2 * var(--dp)); }
.rp-dur { margin-top: calc(8 * var(--dp)); padding: calc(8 * var(--dp)) calc(12 * var(--dp)); text-align: center; }
.rp-dur b { font-size: calc(31 * var(--dp)); font-weight: 800; letter-spacing: calc(-1.5 * var(--dp)); line-height: 1.15; }
.rp-dur > span, .rp-grid span { font-size: calc(12 * var(--dp)); color: var(--p-muted); line-height: 1.3; }
.rp-grid { margin-top: calc(8 * var(--dp)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--dp)); }
.rp-grid > div { padding: calc(7 * var(--dp)) calc(12 * var(--dp)); }
.rp-grid b { font-size: calc(19 * var(--dp)); font-weight: 800; letter-spacing: calc(-.5 * var(--dp)); line-height: 1.15; }
.rp-btns { margin-top: calc(10 * var(--dp)); display: flex; justify-content: center; align-items: flex-end; gap: calc(30 * var(--dp)); }
.rp-round { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--dp)); font-size: calc(12 * var(--dp)); font-weight: 600; color: var(--p-muted); }
.rp-round i {
  width: calc(54 * var(--dp)); height: calc(54 * var(--dp)); border-radius: 50%; display: grid; place-items: center;
  background: var(--p-card); border: max(1px, var(--dp)) solid var(--p-line); color: var(--p-text); font-size: calc(21.6 * var(--dp));
}
.rp-main { color: var(--p-text); }
.rp-main i { width: calc(70 * var(--dp)); height: calc(70 * var(--dp)); border: 0; background: var(--p-sun); color: var(--p-a900); font-size: calc(28 * var(--dp)); box-shadow: var(--p-shadow); }
.rp-fin i { color: var(--p-a600); }
/* the phone buzzes as the wrong-turn alert goes off */
.rp.buzz { animation: rp-buzz .5s linear; }
@keyframes rp-buzz {
  0%, 100% { transform: none; }
  10%, 50%, 90% { transform: translateX(-2px) rotate(-.6deg); }
  30%, 70% { transform: translateX(2px) rotate(.6deg); }
}

/* ---------- the Safety hub (safety.dart), in the app's dp: it scrolls slowly through the whole hub (main.js) ---------- */
.app-top { flex: none; display: flex; align-items: center; gap: calc(12 * var(--dp)); padding: calc(16 * var(--dp)) calc(16 * var(--dp)) calc(8 * var(--dp)); }
.app-top > b { flex: 1; font-size: calc(18 * var(--dp)); font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; }
.hy .sp .app-top > b { font-size: calc(15.5 * var(--dp)); } /* the app scales a long title down to one line (FittedBox) */
.app-btn {
  flex: none; width: calc(44 * var(--dp)); height: calc(44 * var(--dp)); border-radius: 50%; display: grid; place-items: center;
  background: var(--p-card); border: max(1px, var(--dp)) solid var(--p-line); font-size: calc(22 * var(--dp));
}
.sp-list { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.sp-scroll { padding: calc(8 * var(--dp)) calc(16 * var(--dp)) calc(124 * var(--dp)); will-change: transform; }
.app-card { background: var(--p-card); border-radius: calc(16 * var(--dp)); box-shadow: var(--p-shadow); padding: calc(10 * var(--dp)) calc(12 * var(--dp)); }
.sp-head { display: flex; align-items: center; gap: calc(8 * var(--dp)); }
.sp-head > .i { font-size: calc(16 * var(--dp)); color: var(--p-a600); }
.sp-head > b { flex: 1; min-width: 0; font-size: calc(14 * var(--dp)); font-weight: 700; }
.app-chip {
  flex: none; display: inline-flex; align-items: center; gap: calc(4 * var(--dp)); padding: calc(5 * var(--dp)) calc(11 * var(--dp));
  border-radius: 999px; background: var(--p-sand); color: var(--p-text); font-size: calc(12 * var(--dp)); font-weight: 600; line-height: 1.25; white-space: nowrap;
}
.app-chip .i { font-size: calc(12.6 * var(--dp)); }
.app-chip.on { background: var(--p-a600); color: #fff; }
.sp-pos code { display: block; margin-top: calc(4 * var(--dp)); font: 600 calc(15 * var(--dp))/1.25 "Roboto Mono", Consolas, "DejaVu Sans Mono", monospace; }
.sp-pos small { display: block; font-size: calc(12 * var(--dp)); color: var(--p-muted); line-height: 1.35; }
.sp-pos .sp-gps { margin-top: calc(4 * var(--dp)); }
/* SOS: the red disc and what it does */
.sp-sos { margin: calc(8 * var(--dp)) 0; padding: calc(10 * var(--dp)); display: flex; align-items: center; gap: calc(12 * var(--dp)); border: max(1px, var(--dp)) solid rgba(217, 83, 79, .35); }
.sp-disc {
  flex: none; width: calc(54 * var(--dp)); height: calc(54 * var(--dp)); border-radius: 50%; display: grid; place-items: center;
  background: var(--p-clay); color: #fff; box-shadow: 0 calc(3 * var(--dp)) calc(10 * var(--dp)) rgba(217, 83, 79, .35);
  font-size: calc(15 * var(--dp)); font-weight: 800;
}
.sp-sos-t { flex: 1; min-width: 0; display: grid; gap: calc(1 * var(--dp)); }
.sp-sos-t b { font-size: calc(14.5 * var(--dp)); font-weight: 800; }
.sp-sos-t small { font-size: calc(12 * var(--dp)); line-height: 1.3; color: var(--p-muted); }
/* Call 911 / Call 112 / SMS my position / Trail Radar */
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--dp)); }
.sp-grid > span {
  min-height: calc(42 * var(--dp)); padding: calc(10 * var(--dp)) calc(8 * var(--dp)); border-radius: calc(12 * var(--dp));
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--dp)); text-align: center;
  background: var(--p-sand); color: var(--p-text); font-size: calc(13.5 * var(--dp)); font-weight: 600; line-height: 1.2;
}
.sp-grid .i { font-size: calc(15.5 * var(--dp)); }
.sp-grid .sp-danger { background: var(--p-clay); color: #fff; }
.sp-check { margin-top: calc(12 * var(--dp)); }
.sp-check > small { display: block; margin-top: calc(4 * var(--dp)); font-size: calc(12.5 * var(--dp)); line-height: 1.35; color: var(--p-muted); }
.sp-check > small b { font-weight: 700; color: var(--p-text); }
.app-chips { display: flex; gap: calc(8 * var(--dp)); margin-top: calc(8 * var(--dp)); }
/* cards of rows: a 16 dp icon, the text, something on the right, a thin line under each (_row) */
.sp-rows { padding: calc(2 * var(--dp)) calc(12 * var(--dp)); }
.sp-check + .sp-rows { margin-top: calc(12 * var(--dp)); }
.sp-rows > div { display: flex; align-items: center; gap: calc(10 * var(--dp)); padding: calc(8 * var(--dp)) 0; border-bottom: max(1px, var(--dp)) solid var(--p-line); font-size: calc(13.5 * var(--dp)); line-height: 1.35; }
.sp-rows > div:last-child { border-bottom: 0; }
.sp-rows > div > .i:first-child { font-size: calc(16 * var(--dp)); color: var(--p-a600); }
.sp-rows > div > span[lang], .sp-rows > div > b { flex: 1; min-width: 0; }
.sp-rows > div > b { font-weight: 600; }
.sp-rows .app-chip, .sp-rows em, .sp-rows .sp-toggle, .sp-rows .sp-lock { margin-left: calc(-2 * var(--dp)); }
.sp-soon { flex: none; font-style: normal; padding: calc(2 * var(--dp)) calc(6 * var(--dp)); border-radius: calc(6 * var(--dp)); background: #DCE8F8; color: #1B4F9C; font-size: calc(10 * var(--dp)); font-weight: 800; letter-spacing: calc(.3 * var(--dp)); }
.sp-toggle { flex: none; position: relative; width: calc(46 * var(--dp)); height: calc(26 * var(--dp)); border-radius: calc(13 * var(--dp)); background: var(--p-line); }
.sp-toggle::after { content: ""; position: absolute; top: calc(3 * var(--dp)); left: calc(3 * var(--dp)); width: calc(20 * var(--dp)); height: calc(20 * var(--dp)); border-radius: 50%; background: #fff; }
.sp-toggle.on { background: var(--p-a600); }
.sp-toggle.on::after { left: calc(23 * var(--dp)); }
.sp-lock { flex: none; font-size: calc(15 * var(--dp)); color: var(--p-muted); }
.sp-med > div > span[lang] { flex: none; color: var(--p-muted); }
.sp-med > div > span[lang] ~ b { text-align: right; }
.sp-med .sp-below { flex-wrap: wrap; row-gap: calc(4 * var(--dp)); }
.sp-med .sp-below > b { flex-basis: 100%; text-align: left; padding: 0 0 calc(2 * var(--dp)) calc(26 * var(--dp)); }
.sp h6 { margin: calc(16 * var(--dp)) 0 calc(6 * var(--dp)); display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--dp)); font-size: calc(15 * var(--dp)); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.app-pro { font-style: normal; padding: calc(2 * var(--dp)) calc(6 * var(--dp)); border-radius: calc(6 * var(--dp)); background: var(--p-sun); color: var(--p-a900); font-size: calc(10 * var(--dp)); font-weight: 800; letter-spacing: calc(.5 * var(--dp)); }
.sp-none { margin: calc(-6 * var(--dp)) 0 0; padding-top: calc(6 * var(--dp)); font-size: calc(13 * var(--dp)); color: var(--p-muted); }
.sp-note { margin: calc(14 * var(--dp)) 0 0; text-align: center; font-size: calc(11.5 * var(--dp)); line-height: 1.35; color: var(--p-muted); }

/* ---------- a trail's page (detail.dart), in the app's dp: it scrolls slowly through the whole page (main.js) ----------
   The page runs under the status bar, which turns solid once the picture has gone by (.past); the Start hike bar stays. */
.pl-status { position: absolute; z-index: 3; left: 0; right: 0; top: 0; color: #fff; transition: background .15s, color .15s; }
.pl.past .pl-status { background: var(--p-bg); color: var(--p-text); }
.pl-list { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.pl-scroll { will-change: transform; }
.pl-hero { position: relative; height: calc(260 * var(--dp)); }
.pl-hero > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-btns { position: absolute; z-index: 1; left: calc(14 * var(--dp)); right: calc(14 * var(--dp)); top: calc(46 * var(--dp)); display: flex; gap: calc(8 * var(--dp)); }
.pl-btns > i { flex: 1; }
.pl-mark .i { font-size: calc(19 * var(--dp)); }
.pl-body { position: relative; margin-top: calc(-30 * var(--dp)); padding: 0 calc(16 * var(--dp)) calc(16 * var(--dp)); }
.pl-badges { margin-top: calc(-14 * var(--dp)); display: flex; align-items: center; gap: calc(6 * var(--dp)); }
.pl-badges > i { flex: 1; }
.pl .pl-mod { background: #FDEFD3; color: #8A5A00; }
.pl .pl-fit { padding-left: calc(15 * var(--dp)); color: var(--p-muted); font-weight: 500; }
.pl .pl-fit b { color: var(--p-text); font-weight: 600; }
.pl .pl-rate { background: #fff; color: #2B2B2B; }
.pl-star { display: inline-block; fill: currentColor; stroke: none; font-size: calc(13.9 * var(--dp)); vertical-align: -.1em; }
.pl-body h4 { margin: calc(30 * var(--dp)) 0 0; font-size: calc(22 * var(--dp)); font-weight: 800; letter-spacing: calc(-.5 * var(--dp)); line-height: 1.2; }
.pl-meta { margin: calc(8 * var(--dp)) 0 0; font-size: calc(13 * var(--dp)); line-height: 1.35; color: var(--p-muted); }
.pl-meta .i { display: inline-block; font-size: calc(15 * var(--dp)); vertical-align: -.2em; }
.pl-tiles { margin-top: calc(16 * var(--dp)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--dp)); }
.pl-tiles > div { padding: calc(9 * var(--dp)) calc(12 * var(--dp)); border-radius: calc(14 * var(--dp)); background: var(--p-card); box-shadow: var(--p-shadow); }
.pl-tiles b { display: block; font-size: calc(18 * var(--dp)); font-weight: 800; letter-spacing: calc(-.5 * var(--dp)); line-height: 1.2; }
.pl-tiles small { display: block; font-size: calc(11 * var(--dp)); line-height: 1.25; color: var(--p-muted); }
.pl-map { position: relative; margin-top: calc(8 * var(--dp)); height: calc(180 * var(--dp)); border-radius: calc(14 * var(--dp)); overflow: hidden; background: #DCE8D8; }
.pl-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-credit { position: absolute; right: 0; bottom: 0; padding: calc(1 * var(--dp)) calc(4 * var(--dp)); background: rgba(255, 255, 255, .8); color: #333; font-size: calc(9 * var(--dp)); line-height: 1.3; }
.pl-offline { margin-top: calc(8 * var(--dp)); padding: calc(10 * var(--dp)) calc(12 * var(--dp)); border-radius: calc(12 * var(--dp)); background: var(--p-sand); display: flex; align-items: center; gap: calc(10 * var(--dp)); font-size: calc(13 * var(--dp)); line-height: 1.3; }
.pl-offline > .i { font-size: calc(15 * var(--dp)); }
.pl-offline > span { flex: 1; min-width: 0; display: grid; color: var(--p-muted); }
.pl .pl-offline b { font-weight: 700; color: var(--p-text); }
.pl-wx { margin-top: calc(16 * var(--dp)); padding: calc(14 * var(--dp)); }
.pl-h { display: flex; align-items: center; gap: calc(8 * var(--dp)); }
.pl-h .i { font-size: calc(17 * var(--dp)); color: var(--p-a600); }
.pl .pl-h b, .pl .pl-h2 b { font-size: calc(15 * var(--dp)); font-weight: 700; line-height: 1.3; }
.pl-today { margin-top: calc(12 * var(--dp)); display: flex; align-items: center; gap: calc(8 * var(--dp)); }
.pl-today > .i { font-size: calc(22 * var(--dp)); }
.pl .pl-warm { color: #A15C00; }
.pl .pl-today b { font-size: calc(20 * var(--dp)); font-weight: 800; }
.pl-today > span { flex: 1; font-size: calc(13 * var(--dp)); }
.pl-today small { font-size: calc(12.5 * var(--dp)); color: var(--p-muted); }
.pl-facts { margin-top: calc(6 * var(--dp)); display: flex; flex-wrap: wrap; gap: calc(12 * var(--dp)); font-size: calc(11.5 * var(--dp)); color: var(--p-muted); }
.pl-facts > span { display: flex; align-items: center; gap: calc(5 * var(--dp)); }
.pl-facts .i { font-size: calc(12.5 * var(--dp)); }
.pl-days { margin-top: calc(10 * var(--dp)); padding-top: calc(8 * var(--dp)); border-top: max(1px, var(--dp)) solid var(--p-line); display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.pl-days > span { display: grid; justify-items: center; gap: calc(3 * var(--dp)); }
.pl-days small { font-size: calc(11.5 * var(--dp)); font-weight: 600; color: var(--p-muted); }
.pl-days > span > span { display: flex; align-items: center; gap: calc(5 * var(--dp)); font-size: calc(13 * var(--dp)); color: var(--p-muted); }
.pl-days > span > span .i { font-size: calc(16 * var(--dp)); }
.pl-days > span > span > .i:not(.pl-warm) { color: var(--p-a600); }
.pl .pl-days b { font-weight: 700; color: var(--p-text); }
.pl-days em { font-style: normal; display: flex; align-items: center; gap: calc(3 * var(--dp)); font-size: calc(10.5 * var(--dp)); color: var(--p-muted); }
.pl-days em .i { font-size: calc(11.5 * var(--dp)); }
.pl-src { display: block; margin-top: calc(10 * var(--dp)); font-size: calc(11 * var(--dp)); color: var(--p-muted); }
.pl-brief { margin-top: calc(16 * var(--dp)); padding: calc(14 * var(--dp)); }
.pl-h2 { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--dp)); margin-bottom: calc(4 * var(--dp)); }
.pl-row { display: flex; align-items: flex-start; gap: calc(10 * var(--dp)); padding: calc(7 * var(--dp)) 0; border-bottom: max(1px, var(--dp)) solid var(--p-line); font-size: calc(13 * var(--dp)); line-height: 1.35; }
.pl-row:last-child { border-bottom: 0; }
.pl-row > .i { margin-top: calc(1 * var(--dp)); font-size: calc(16 * var(--dp)); color: var(--p-a600); }
.pl-row > span:not(.app-chip) { flex: 1; min-width: 0; }
.pl .pl-row b { font-weight: 700; }
.pl-row i { font-style: normal; color: var(--p-muted); }
.pl h6 { margin: calc(24 * var(--dp)) 0 calc(8 * var(--dp)); font-size: calc(15 * var(--dp)); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.pl-elev { position: relative; padding: calc(10 * var(--dp)); }
.pl-elev > svg { display: block; width: 100%; height: calc(110 * var(--dp)); }
.pl-elev small { position: absolute; font-size: calc(10 * var(--dp)); color: #8A8A8A; line-height: 1.2; }
.pl-top { left: calc(14 * var(--dp)); top: calc(14 * var(--dp)); }
.pl-low { left: calc(14 * var(--dp)); bottom: calc(8 * var(--dp)); }
.pl-len { right: calc(14 * var(--dp)); bottom: calc(8 * var(--dp)); }
.pl-about { margin: 0; font-size: calc(15 * var(--dp)); line-height: 1.45; }
.pl-there { padding: calc(4 * var(--dp)) calc(14 * var(--dp)); }
.pl-there .pl-row { align-items: center; }
.pl-there .app-chip + .app-chip { margin-left: calc(-4 * var(--dp)); }
/* the bar that stays: Offline · Pro and Start hike */
.pl-bar { flex: none; display: flex; gap: calc(10 * var(--dp)); padding: calc(16 * var(--dp)) calc(16 * var(--dp)) calc(24 * var(--dp)); background: var(--p-bg); }
.pl-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--dp)); padding: calc(14 * var(--dp)) calc(18 * var(--dp)); border-radius: calc(12 * var(--dp)); background: var(--p-a600); color: #fff; font-size: calc(15 * var(--dp)); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.pl-btn .i { font-size: calc(17.25 * var(--dp)); }
.pl-btn.pl-sec { flex: none; max-width: 55%; background: var(--p-sand); color: var(--p-text); }

/* ---------- Community (community.dart), in the app's dp: the Talk tab, scrolling slowly through the posts and back
   (main.js) ---------- */
.cm-tab { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cm .app-top { gap: calc(8 * var(--dp)); }
.cm .app-top > b { margin-right: calc(4 * var(--dp)); }
.cm-has-badge { position: relative; }
.cm-badge {
  position: absolute; top: calc(-4 * var(--dp)); right: calc(-4 * var(--dp)); min-width: calc(16 * var(--dp)); height: calc(16 * var(--dp));
  padding: 0 calc(4 * var(--dp)); border-radius: calc(8 * var(--dp)); display: grid; place-items: center;
  background: var(--p-clay); color: #fff; font-style: normal; font-size: calc(10 * var(--dp)); font-weight: 700; line-height: 1;
}
.app-tabs .cm-badge { top: calc(2 * var(--dp)); right: auto; left: calc(50% + 6 * var(--dp)); }
.cm-list { flex: 1; min-height: 0; overflow: hidden; padding: 0 calc(16 * var(--dp)); }
/* the seg scrolls with the posts, as in the app (ScreenList); the room under the last post is in the scroller */
.cm-scroll { padding-bottom: calc(124 * var(--dp)); will-change: transform; }
/* Seg: Talk | Hikes | Events | People (in Armenian each as wide as its word, at least 4) */
.cm-seg { display: flex; gap: calc(2 * var(--dp)); padding: calc(3 * var(--dp)); border-radius: calc(12 * var(--dp)); background: var(--p-sand); }
.cm-seg > span { flex: 1; min-width: 0; padding: calc(10 * var(--dp)) calc(6 * var(--dp)); border-radius: calc(10 * var(--dp)); text-align: center; white-space: nowrap; overflow: hidden; font-size: calc(13 * var(--dp)); font-weight: 600; color: var(--p-muted); }
.cm-seg > .on { background: var(--p-card); color: var(--p-text); box-shadow: var(--p-shadow); }
.hy .cm-talk { flex: 9; } .hy .cm-hikes { flex: 8; } .hy .cm-events { flex: 13; } .hy .cm-people { flex: 6; }
.hy .cm-seg > span { font-size: calc(12 * var(--dp)); }
/* avatars (a circle in the member's colour with their initial), level chips, the guide pill */
.cm-av { flex: none; width: calc(28 * var(--dp)); height: calc(28 * var(--dp)); border-radius: 50%; display: grid; place-items: center; background: var(--av); color: #fff; font-style: normal; font-weight: 700; font-size: calc(10.6 * var(--dp)); line-height: 1; }
.cm-lvl, .cm-pill { flex: none; font-style: normal; padding: calc(2 * var(--dp)) calc(8 * var(--dp)); border-radius: 999px; font-size: calc(11 * var(--dp)); font-weight: 700; line-height: 1.3; white-space: nowrap; background: var(--p-sand); color: var(--p-text); }
.l2 { background: #E3F2E4; color: #256B2B; } .l3 { background: #FDEFD3; color: #8A5A00; } .l4 { background: #DCE8F8; color: #1B4F9C; } .l5 { background: #0B2A4A; color: #fff; }
.cm-guide { background: #FDEFD3; color: #8A5A00; }
.cm-who { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--dp)); }
.cm-who > b { font-size: calc(13.5 * var(--dp)); font-weight: 700; }
.cm .app-chip .i { font-size: calc(12.6 * var(--dp)); }
/* the closed composer, the filters with their scroll hint, the posts */
.cm-compose { margin-top: calc(16 * var(--dp)); padding: calc(10 * var(--dp)) calc(12 * var(--dp)); display: flex; align-items: center; gap: calc(10 * var(--dp)); }
.cm-ring { flex: none; width: calc(34 * var(--dp)); height: calc(34 * var(--dp)); border-radius: 50%; display: grid; place-items: center; background: rgba(111, 163, 227, .15); color: var(--p-a600); font-size: calc(17 * var(--dp)); }
.cm-compose > span:not(.cm-ring) { flex: 1; min-width: 0; display: grid; }
.cm-compose b { font-size: calc(14 * var(--dp)); font-weight: 700; }
.cm-compose small { font-size: calc(12 * var(--dp)); color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-down { font-size: calc(18 * var(--dp)); color: var(--p-muted); }
.cm-filters { margin-top: calc(16 * var(--dp)); padding: calc(4 * var(--dp)) 0; display: flex; gap: calc(8 * var(--dp)); overflow: hidden; }
.cm-hint { display: block; position: relative; margin-top: calc(6 * var(--dp)); height: calc(4 * var(--dp)); border-radius: calc(2 * var(--dp)); background: var(--p-line); }
.cm-hint::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 25%; border-radius: inherit; background: rgba(30, 90, 168, .6); }
.cm-post { margin-top: calc(10 * var(--dp)); padding: calc(12 * var(--dp)); }
.cm-incident { border: calc(1.2 * var(--dp)) solid rgba(217, 83, 79, .55); }
.cm-post-h { display: flex; align-items: flex-start; gap: calc(8 * var(--dp)); }
.cm-post-h > span { flex: 1; min-width: 0; }
.cm-post-h small { display: block; font-size: calc(12 * var(--dp)); color: var(--p-muted); }
.cm a { color: var(--p-a600); text-decoration: none; }
.cm-cat { flex: none; display: inline-flex; align-items: center; gap: calc(3 * var(--dp)); font-style: normal; padding: calc(2 * var(--dp)) calc(7 * var(--dp)); border-radius: 999px; font-size: calc(11 * var(--dp)); font-weight: 700; background: var(--p-sand); color: var(--p-text); }
.cm-cat .i { font-size: calc(12 * var(--dp)); }
.c-cond { background: #FDEFD3; color: #8A5A00; } .c-inc { background: #FADCDB; color: #9E2A27; }
.c-tip { background: #E3F2E4; color: #256B2B; } .c-q { background: #DCE8F8; color: #1B4F9C; }
.cm-post p { margin: calc(6 * var(--dp)) 0 0; font-size: calc(13 * var(--dp)); line-height: 1.4; }
.cm-acts { margin-top: calc(8 * var(--dp)); display: flex; gap: calc(6 * var(--dp)); }

/* ---------- the hero: the Explore screen (explore.dart), in the app's dp: the top bar stays and the trail list scrolls
   slowly under it and back (main.js; chosen 2026-10-17: B) ---------- */
.hx { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hx-top { flex: none; display: flex; align-items: center; gap: calc(8 * var(--dp)); padding: calc(16 * var(--dp)) calc(16 * var(--dp)) calc(8 * var(--dp)); }
.hx-top > span:first-child { flex: 1; min-width: 0; display: grid; }
.hx-top small { font-size: calc(13 * var(--dp)); color: var(--p-muted); }
.hr .hx-top b { font-size: calc(18 * var(--dp)); font-weight: 700; line-height: 1.25; }
.hx-list { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.hx-scroll { padding: calc(12 * var(--dp)) calc(16 * var(--dp)) calc(124 * var(--dp)); will-change: transform; }
.hx-search { height: calc(52 * var(--dp)); box-sizing: border-box; display: flex; align-items: center; gap: calc(10 * var(--dp)); padding: 0 calc(14 * var(--dp)); border-radius: calc(14 * var(--dp)); background: var(--p-card); border: max(1px, var(--dp)) solid var(--p-line); }
.hx-search > .i { font-size: calc(19 * var(--dp)); }
.hx-search > span { flex: 1; min-width: 0; font-size: calc(15 * var(--dp)); color: var(--p-muted); white-space: nowrap; overflow: hidden; }
.hr .hx-search b { flex: none; display: flex; align-items: center; gap: calc(6 * var(--dp)); color: var(--p-a600); font-size: calc(13 * var(--dp)); font-weight: 600; }
.hx-search b .i { font-size: calc(15 * var(--dp)); }
.hx-chips { margin: calc(12 * var(--dp)) calc(-16 * var(--dp)) 0 0; display: flex; gap: calc(8 * var(--dp)); overflow: hidden; }
.hr .app-chip .i { font-size: calc(12.6 * var(--dp)); }
.hx-hint { display: block; position: relative; margin-top: calc(6 * var(--dp)); height: calc(4 * var(--dp)); border-radius: calc(2 * var(--dp)); background: var(--p-line); }
.hx-hint::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(90 * var(--dp)); border-radius: inherit; background: rgba(30, 90, 168, .6); }
.hx-sort { margin-top: calc(8 * var(--dp)); height: calc(32 * var(--dp)); display: flex; align-items: center; justify-content: space-between; font-size: calc(13 * var(--dp)); color: var(--p-muted); }
.hx-sort > span:last-child { display: flex; align-items: center; gap: calc(6 * var(--dp)); }
.hr .hx-sort b { display: flex; align-items: center; gap: calc(6 * var(--dp)); padding: calc(7 * var(--dp)) calc(10 * var(--dp)); border-radius: calc(10 * var(--dp)); background: var(--p-card); border: max(1px, var(--dp)) solid var(--p-line); color: var(--p-text); font-size: calc(12 * var(--dp)); font-weight: 600; }
.hx-sort b .i { font-size: calc(16 * var(--dp)); }
.hx-pro { margin-top: calc(16 * var(--dp)); padding: calc(16 * var(--dp)); background: #0B2A4A; color: #fff; }
.hx-pro > div { display: flex; align-items: center; justify-content: space-between; }
.hx-pro small { font-size: calc(13 * var(--dp)); color: rgba(255, 255, 255, .8); }
.hr .hx-pro > b { display: block; margin-top: calc(8 * var(--dp)); font-size: calc(15 * var(--dp)); font-weight: 600; }
.hx-pro p { margin: calc(8 * var(--dp)) 0 0; font-size: calc(13 * var(--dp)); line-height: 1.35; color: rgba(255, 255, 255, .85); }
.hx h6 { margin: calc(24 * var(--dp)) 0 0; display: flex; align-items: baseline; justify-content: space-between; gap: calc(8 * var(--dp)); font-size: calc(15 * var(--dp)); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.hx h6 small { font-size: calc(13 * var(--dp)); font-weight: 400; color: var(--p-muted); }
.hx-cards { margin-top: calc(14 * var(--dp)); display: flex; flex-direction: column; gap: calc(14 * var(--dp)); }
.hx-card { overflow: hidden; }
.hx-art { position: relative; height: calc(150 * var(--dp)); }
.hx-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-mark { position: absolute; top: calc(10 * var(--dp)); right: calc(10 * var(--dp)); width: calc(36 * var(--dp)); height: calc(36 * var(--dp)); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .9); color: #2B2B2B; font-size: calc(18.4 * var(--dp)); }
.hx-mark.saved { font-size: calc(20.2 * var(--dp)); }
.hx-mark.saved .i { fill: currentColor; }
.hx-from { position: absolute; left: calc(10 * var(--dp)); bottom: calc(10 * var(--dp)); display: flex; align-items: center; gap: calc(4 * var(--dp)); padding: calc(5 * var(--dp)) calc(11 * var(--dp)); border-radius: 999px; background: rgba(255, 255, 255, .92); color: #0B2A4A; font-size: calc(12 * var(--dp)); font-weight: 600; }
.hx-from .i { font-size: calc(13.8 * var(--dp)); }
.hx-body { padding: calc(12 * var(--dp)) calc(14 * var(--dp)) calc(14 * var(--dp)); }
.hx-name { display: flex; align-items: center; gap: calc(8 * var(--dp)); }
.hr .hx-name b { flex: 1; min-width: 0; font-size: calc(15 * var(--dp)); font-weight: 600; }
.hx-name > span { flex: none; font-size: calc(13 * var(--dp)); }
.hx-star { display: inline-block; fill: currentColor; stroke: none; font-size: calc(16.4 * var(--dp)); vertical-align: -.2em; }
.hx-body > small { display: block; font-size: calc(13 * var(--dp)); color: var(--p-muted); }
.hx-stats { margin-top: calc(6 * var(--dp)); display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--dp)); font-size: calc(13 * var(--dp)); color: var(--p-muted); }
.hr .hx-stats b { font-weight: 600; color: var(--p-text); }
.hx-stats i { display: inline-block; width: calc(13 * var(--dp)); }
.hx-stats .i { display: inline-block; font-size: calc(15 * var(--dp)); vertical-align: -.25em; }
.hx-diff { flex: none; font-style: normal; padding: calc(3 * var(--dp)) calc(10 * var(--dp)); border-radius: 999px; font-size: calc(12 * var(--dp)); font-weight: 600; line-height: 1.25; }
.d-easy { background: #E3F2E4; color: #256B2B; } .d-mod { background: #FDEFD3; color: #8A5A00; } .d-hard { background: #FADCDB; color: #9E2A27; }
.hx-tags { margin-top: calc(8 * var(--dp)); display: flex; gap: calc(6 * var(--dp)); overflow: hidden; }
.hx-tags > span { flex: none; display: inline-flex; align-items: center; gap: calc(4 * var(--dp)); padding: calc(3 * var(--dp)) calc(8 * var(--dp)); border-radius: 999px; background: var(--p-sand); font-size: calc(11 * var(--dp)); font-weight: 600; }
.hx-tags .i { font-size: calc(12.65 * var(--dp)); }