/* Showcase: the product the family uses, in one section with three modes (tree, person, map), drawn on a demo family.
   The screens are light on purpose: a bright product window on the black case reads at once as "the thing I built".
   Every class of the product UI starts with u- and lives under .ui, so nothing collides with the case styles. */

/* ── the slide: notes, a large browser window, notes */
.show { row-gap: 24px; padding: calc(var(--edge) + 58px) var(--edge) 36px; }
.show .head { max-width: 1200px; }
.show-row { --cw: clamp(180px, 16.5vw, 260px); --g: clamp(20px, 2vw, 36px); display: grid; grid-template-columns: var(--cw) auto var(--cw); gap: var(--g); align-items: center; justify-content: center; width: 100%; }
.screen { position: relative; width: min(calc((100vh - 330px) * 1.5625), calc(100vw - 2 * var(--edge) - 2 * var(--cw) - 2 * var(--g)), 1120px); aspect-ratio: 1000 / 640; border-radius: 12px; overflow: hidden; background: #f4f1ea; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16), 0 40px 120px rgb(0 0 0 / 0.75); }

.callouts { margin: 0; padding: 0; list-style: none; display: grid; gap: 32px; }
.callouts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; cursor: default; outline-offset: 6px; transition: opacity 0.25s; }
.callouts i { grid-column: 1; grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #000; font: 500 12px/1 var(--mono); font-style: normal; }
.callouts b { grid-column: 2; grid-row: 1; font: 400 clamp(16px, 1.3vw, 20px)/1.25 var(--font); }
.callouts span { grid-column: 2; grid-row: 2; font-size: 14px; line-height: 1.4; color: var(--text); text-wrap: balance; }
.callouts b { text-wrap: balance; }
.callouts:first-child li { grid-template-columns: minmax(0, 1fr) 24px; text-align: right; }
.callouts:first-child i { grid-column: 2; }
.callouts:first-child b, .callouts:first-child span { grid-column: 1; }
.show-row.focus .callouts li:not(.on) { opacity: 0.32; }
.hint { order: -1; margin: -8px 0 4px; text-align: center; }
.callouts { transition: opacity 0.18s; }
.show-row.swap .callouts { opacity: 0; }

/* the three modes: a switch under the heading; the product's own tabs and the great-grandfather's card switch them too */
.modes { display: inline-flex; gap: 28px; margin-top: calc(var(--gap-2) - var(--gap-1)); padding: 0 2px; border-bottom: 1px solid var(--line); }
.modes button { display: flex; gap: 8px; margin-bottom: -1px; padding: 0 0 12px; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--dim); cursor: pointer; transition: color 0.25s, border-color 0.25s; }
.modes button i { font-style: normal; }
.modes button:hover { color: var(--text); }
.modes button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--orange); }
.modes button[aria-selected="true"] i { color: var(--orange); }

/* markers on the screen: the same numbers as the notes */
.mks { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.mks.cur { opacity: 1; visibility: visible; }
.mk { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 0; border-radius: 50%; background: var(--orange); color: #000; font: 500 12px/24px var(--mono); text-align: center; pointer-events: auto; cursor: pointer; box-shadow: 0 0 0 4px rgb(255 77 23 / 0.22); transition: opacity 0.25s; }
.show-row.focus .mk:not(.on) { opacity: 0; }
/* the frame's name and counter step aside while the screen is under them (demo.js) */
.frame :is(.f-tl, .f-br) { transition: opacity 0.25s; }
.frame :is(.f-tl, .f-br).off { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  .show { padding-top: var(--gap-4); row-gap: var(--gap-2); }
  .show-row { grid-template-columns: 1fr; gap: 20px; }
  .screen { order: -1; width: 100%; border-radius: 8px; }
  .screen.phone { justify-self: center; width: min(100% - 16px, 330px); aspect-ratio: 390 / 800; border-radius: 30px; box-shadow: 0 0 0 6px #1b1b1b, 0 0 0 7px rgb(255 255 255 / 0.16), 0 30px 80px rgb(0 0 0 / 0.7); }
  .callouts { gap: 16px; }
  .callouts:first-child li { grid-template-columns: 24px minmax(0, 1fr); text-align: left; }
  .callouts:first-child i { grid-column: 1; }
  .callouts:first-child b, .callouts:first-child span { grid-column: 2; }
  .mk { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 10px; line-height: 20px; }
  .modes { gap: 16px; }
  .modes .long { display: none; }
  .modes button i { display: none; }
}

/* ── the product: 1000 × 640 design pixels, scaled to the window */
.ui {
  --u-bg: #f4f1ea; --u-card: #fff; --u-chrome: #e4dfd4;
  --u-ink: #121212; --u-ink2: #4c4841; --u-mute: #857f73; --u-line: #e0dacd; --u-line2: #c6bfb0;
  --ff: #2c5be0; --fm: #13936b; --mf: #c58a00; --mm: #c03b8a;   /* one hue per branch, checked for colour-blind separation */
  position: absolute; left: 0; top: 0; width: 1000px; height: 640px; overflow: hidden; transform-origin: 0 0;
  background: var(--u-bg); color: var(--u-ink); font: 400 13px/1.35 var(--font); letter-spacing: -0.005em; text-align: left;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
.ui.cur { opacity: 1; visibility: visible; }
/* 08.11.2026: d2.css balances short text on every slide (`.slide span { text-wrap: balance }`). text-wrap also switches
   wrapping back on, so it undid white-space: nowrap here: on a phone the branch chips broke in two and spilled out of their pills.
   Chips, pills and buttons stay on one line, with a selector stronger than the slide rule. */
.ui :is(.u-chip, .u-open, .u-card .u-p, .u-btn, .u-tag, .u-who3, .u-pl, .m-btn, .m-back, .m-sug, .m-time b) { white-space: nowrap; text-wrap: nowrap; }
.ui [data-go] { cursor: pointer; }
.u-card.sel { border-color: var(--u-ink); box-shadow: 0 0 0 2px var(--u-ink); }
/* the way from the tree to a person and back */
.u-open { position: absolute; height: 22px; display: flex; align-items: center; padding: 0 10px; border-radius: 11px; background: var(--u-ink); color: #fff; font-size: 11.5px; font-weight: 500; white-space: nowrap; z-index: 2; }
.u-cur { display: block; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.25)); }
.u-scrim { position: absolute; left: 0; top: 82px; bottom: 0; width: 340px; z-index: 2; background: rgb(244 241 234 / 0.62); cursor: pointer; }
.ui .u-card.sel { z-index: 3; }
.u-drawer { position: absolute; left: 340px; right: 0; top: 82px; bottom: 0; z-index: 4; padding: 16px 24px; background: #fff; border-left: 1px solid var(--u-line); box-shadow: -24px 0 48px rgb(60 40 10 / 0.12); }
.u-drawer.u-a { transform: translateX(48px); }
.u-dtop { display: flex; align-items: center; gap: 12px; }
.u-dtop .u-m::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--ff); vertical-align: 0; }
.u-x { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--u-bg); font-size: 17px; line-height: 1; color: var(--u-ink2); }
.u-drawer .u-title { margin-top: 12px; }
.u-chain { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--u-bg); font-size: 12.5px; color: var(--u-ink2); }
.u-chain em { font-style: normal; color: var(--u-mute); margin: 0 2px; }
.u-chain b { font-weight: 500; color: var(--u-ink); }
.u-drawer .u-table { margin-top: 14px; }
.u-drawer .u-tr { grid-template-columns: 122px 240px minmax(0, 1fr); column-gap: 14px; min-height: 40px; padding: 4px 0; }
.u-drawer .u-tr.th { min-height: 28px; padding: 0; }
.u-drawer .u-tr .f { font-size: 13px; }
.u-drawer .u-tr .src { font-size: 11.5px; }
.u-drawer .u-next { position: static; margin-top: 12px; padding: 13px 16px; }
.u-drawer .u-next p { font-size: 14px; }
.u-back { height: 26px; display: flex; align-items: center; padding: 0 11px; border: 1px solid var(--u-line2); border-radius: 13px; font-size: 12px; font-weight: 500; color: var(--u-ink); }
.u-back:hover, .u-open:hover { box-shadow: 0 0 0 2px rgb(255 77 23 / 0.5); }
.ui * { box-sizing: border-box; }
.u-y { font-family: var(--font-date); font-variant-numeric: lining-nums; letter-spacing: 0; }
.u-m { font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--u-mute); }
.u-a { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--d, 0s), transform 0.5s var(--d, 0s); }
.ui.in .u-a { opacity: 1; transform: none; }

/* browser chrome and app bar */
.u-chrome { position: absolute; left: 0; right: 0; top: 0; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--u-chrome); border-bottom: 1px solid #d3ccbe; }
.u-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #c7bfb0; }
.u-url { position: absolute; left: 50%; top: 6px; width: 320px; height: 22px; transform: translateX(-50%); display: grid; place-items: center; border-radius: 6px; background: #f8f6f1; font: 400 11px/1 var(--mono); color: #6d675c; }
.u-bar { position: absolute; left: 0; right: 0; top: 34px; height: 48px; display: flex; align-items: center; gap: 22px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--u-line); }
.u-logo { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; }
.u-logo svg { fill: var(--u-ink); }
.u-tabs { display: flex; gap: 22px; height: 100%; margin-left: 18px; }
.u-tabs span { position: relative; display: flex; align-items: center; color: var(--u-ink2); }
.u-tabs .on { color: var(--u-ink); font-weight: 500; }
.u-tabs .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--u-ink); }
.u-search { margin-left: auto; width: 230px; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 8px; background: var(--u-bg); color: var(--u-mute); font-size: 12.5px; }
.u-search i { width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; }
.u-tag { height: 22px; padding: 0 9px; display: grid; place-items: center; border: 1px solid var(--u-line2); border-radius: 11px; font: 500 10px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--u-ink2); }

/* tree: branch filter, generations, cards */
.u-tools { position: absolute; left: 0; right: 0; top: 82px; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 20px; border-bottom: 1px solid var(--u-line); }
.u-chips { display: flex; gap: 8px; padding: 3px; margin: -3px; }
.u-chip { height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--u-line2); border-radius: 14px; background: #fff; font-size: 12.5px; white-space: nowrap; }
.u-chip.on { background: var(--u-ink); border-color: var(--u-ink); color: #fff; }
.u-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.u-count { margin-left: auto; font-size: 12.5px; color: var(--u-ink2); }
.u-canvas { position: absolute; left: 0; right: 0; top: 126px; bottom: 0; }
.u-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 68px; border-right: 1px solid var(--u-line); background: rgb(255 255 255 / 0.35); }
.u-gen { position: absolute; left: 0; width: 68px; display: grid; justify-items: center; gap: 4px; transform: translateY(-50%); }
.u-gen b { font: 500 10.5px/1 var(--mono); color: var(--u-mute); }
.u-gen span { font: 400 14px/1 var(--font-date); color: var(--u-ink2); }
.u-wires { position: absolute; left: 0; top: 0; overflow: visible; }
.u-wires path { fill: none; stroke: var(--u-line2); stroke-width: 1.5; }
.u-wires .up { stroke-dasharray: 2 3; }
.u-more { position: absolute; height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--u-line); border-radius: 6px; background: rgb(255 255 255 / 0.55); }
.u-more i { width: 7px; height: 7px; border: 1.25px solid var(--c); border-radius: 1px; }
.u-more i.f { background: var(--c); }
.u-more b { margin-left: 4px; font: 500 10.5px/1 var(--mono); color: var(--u-mute); }

.u-card { position: absolute; overflow: hidden; border: 1px solid var(--u-line2); border-radius: 6px; background: var(--u-card); padding: 13px 12px 10px; }
.u-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c, var(--u-ink)); }
.u-card.doc { border-color: var(--u-ink); }
.u-card.hyp { border: 1.5px dashed #8d8679; background: transparent; }
.u-card.gap { border: 1.5px dashed var(--u-line2); background: transparent; display: grid; place-content: center; justify-items: center; gap: 2px; padding-top: 10px; color: var(--u-mute); font-size: 11.5px; }
.u-card.gap::before, .u-card.hyp::before { opacity: 0.55; }
.u-card.gap .u-g { position: static; font-size: 15px; color: var(--u-ink2); }
.u-card .u-r { display: block; font-size: 14px; font-weight: 500; }
.u-card .u-y { display: block; margin-top: 2px; font-size: 17px; line-height: 1.2; }
.u-card .u-p { display: block; margin-top: 2px; font-size: 12px; color: var(--u-mute); white-space: nowrap; }
.u-g { position: absolute; right: 10px; top: 12px; font-size: 12px; line-height: 1; color: var(--u-ink); }
.u-card.sm { padding: 11px 10px 8px; }
.u-card.sm .u-y { margin-top: 0; font-size: 15px; }
.u-card.sm .u-p { font-size: 11.5px; padding-right: 16px; }
.u-card.sm .u-g { top: auto; bottom: 10px; }
.u-card.me { border-color: var(--u-ink); background: var(--u-ink); color: #fff; }
.u-card.me::before { display: none; }
.u-card.me .u-p { color: #a9a397; }
.u-legend { position: absolute; left: 84px; bottom: 16px; display: flex; gap: 16px; font-size: 12px; color: var(--u-ink2); }
.u-legend span::first-letter { color: var(--u-ink); }
.u-zoom { position: absolute; right: 16px; bottom: 11px; height: 28px; display: flex; border: 1px solid var(--u-line2); border-radius: 8px; background: #fff; font-size: 12px; }
.u-zoom span { display: grid; place-items: center; min-width: 28px; padding: 0 6px; }
.u-zoom span + span { border-left: 1px solid var(--u-line); }

/* one person's file */
.u-side { position: absolute; left: 0; top: 82px; bottom: 0; width: 260px; padding: 22px 20px; border-right: 1px solid var(--u-line); }
.u-main { position: absolute; left: 260px; right: 0; top: 82px; bottom: 0; padding: 22px 28px; background: #fff; }
.u-title { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }
.u-title h3 { margin: 0; font: 500 28px/1.1 var(--font); letter-spacing: -0.02em; }
.u-title .u-y { font-size: 28px; line-height: 1.1; }
.u-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--u-ink2); }
.u-sub i { width: 8px; height: 8px; border-radius: 50%; background: var(--ff); }
.u-table { margin-top: 18px; border-top: 1px solid var(--u-ink); }
.u-tr { display: grid; grid-template-columns: 118px 286px minmax(0, 1fr); column-gap: 16px; align-items: center; min-height: 43px; padding: 5px 0; border-bottom: 1px solid var(--u-line); }
.u-tr.th { min-height: 30px; padding: 0; }
.u-tr .s { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; }
.u-tr .s span { width: 14px; text-align: center; font-size: 13px; }
.u-tr .f { font-size: 13.5px; }
.u-tr .src { font-size: 12px; color: var(--u-ink2); }
/* an open line gets a soft plate that stands clear of the row's edge, its lines and its words */
.u-tr.open, .m-fact.open { position: relative; }
.u-tr.open::before, .m-fact.open::before { content: ""; position: absolute; inset: 4px -10px; z-index: -1; border-radius: 7px; background: #f7f0e1; }
.u-tr.open .src { color: var(--u-ink); }
.u-next { position: absolute; left: 28px; right: 28px; bottom: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 5px; align-items: center; padding: 15px 18px; border-radius: 10px; background: var(--u-ink); color: #fff; }
.u-next .u-m { color: #9b958a; }
.u-next p { margin: 0; font-size: 15px; line-height: 1.35; }
.u-next small { font-size: 12px; color: #b9b3a7; }
.u-next .u-btn { grid-column: 2; grid-row: 1 / span 3; height: 34px; display: grid; place-items: center; padding: 0 14px; border-radius: 8px; background: #fff; color: var(--u-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }

/* suggestions: a relative proposes, the agent checks, a keeper decides */
.u-tabs em { min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--u-ink); color: #fff; font: 500 10.5px/18px var(--font); font-style: normal; text-align: center; }
.u-side.u-queue { width: 280px; }
.u-ql { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.u-ql li { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid var(--u-line); border-radius: 9px; background: rgb(255 255 255 / 0.6); }
.u-ql li.on { border-color: var(--u-ink); background: #fff; }
.u-ql b { font-size: 13px; font-weight: 500; }
.u-ql span { font-size: 12.5px; color: var(--u-ink2); }
.u-ql small { display: flex; justify-content: space-between; margin-top: 3px; font-size: 11px; color: var(--u-mute); }
.u-ql em { font-style: normal; font-weight: 500; color: #a8441c; }
.u-access { position: absolute; left: 20px; right: 20px; bottom: 22px; padding-top: 12px; border-top: 1px solid var(--u-line); font-size: 11.5px; color: var(--u-mute); }
.u-access b { font: 400 15px/1 var(--font-date); color: var(--u-ink); }
.u-main.u-review { left: 280px; padding: 22px 30px; }
.u-rtop { display: flex; align-items: center; justify-content: space-between; }
.u-who3 { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border: 1px solid var(--u-line2); border-radius: 13px; font-size: 12px; }
.u-who3 i { width: 7px; height: 7px; border-radius: 50%; background: var(--ff); }
.u-who3 .u-y { font-size: 13px; }
.u-rt { margin: 12px 0 0; font: 500 22px/1.2 var(--font); letter-spacing: -0.015em; }
.u-quote { margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--u-line2); font-size: 13.5px; line-height: 1.4; color: var(--u-ink2); }
.u-diff { margin-top: 18px; border-top: 1px solid var(--u-ink); }
.u-dr { display: grid; grid-template-columns: 84px minmax(0, 1fr) 20px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--u-line); }
.u-dr s { font-size: 14px; color: var(--u-mute); text-decoration-thickness: 1px; }
.u-dr b { font-size: 14px; font-weight: 500; }
.u-dr small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--u-mute); }
.u-dr > i { font-style: normal; text-align: center; color: var(--u-mute); }
.u-none { font-size: 13px; color: var(--u-mute); }
.u-ph { display: flex; align-items: center; gap: 12px; }
.u-photo { flex: none; width: 48px; height: 60px; border: 3px solid #fff; border-radius: 2px; box-shadow: 0 1px 5px rgb(60 40 10 / 0.28);
  background: radial-gradient(ellipse 22% 17% at 50% 38%, #6b5640 96%, transparent 100%), radial-gradient(ellipse 44% 30% at 50% 100%, #5d4a37 96%, transparent 100%), linear-gradient(#dccaa8, #b89c74); }
.u-agent { margin-top: 16px; padding: 13px 15px; border: 1px solid var(--u-line2); border-radius: 10px; background: var(--u-bg); }
.u-agent p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.u-tags { display: flex; gap: 6px; margin-top: 10px; }
.u-tags span { height: 22px; display: flex; align-items: center; padding: 0 9px; border: 1px solid var(--u-line2); border-radius: 11px; background: #fff; font-size: 11px; }
.u-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.u-acts small { flex-basis: 100%; margin-top: 4px; font-size: 11.5px; color: var(--u-mute); }
.u-btn2 { height: 34px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--u-line2); border-radius: 9px; font-size: 13px; font-weight: 500; }
.u-btn2.pri { border-color: var(--u-ink); background: var(--u-ink); color: #fff; }
.u-btn2.ghost { border-color: transparent; color: var(--u-ink2); }

/* the highlight a note puts on the screen */
.u-hl { position: absolute; border-radius: 9px; box-shadow: 0 0 0 2px var(--orange), 0 0 0 3000px rgb(8 8 8 / 0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s, left 0.3s, top 0.3s, width 0.3s, height 0.3s; }
.ui.lit .u-hl { opacity: 1; }

/* the map */
.u-places { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.u-places li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; }
.u-places li.on { border-color: var(--u-ink); background: #fff; }
.u-places i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.u-places .hyp i { background: transparent; border: 1.5px dashed var(--u-ink2); }
.u-places b { font-size: 13px; font-weight: 500; }
.u-places .hyp b { font-weight: 400; color: var(--u-ink2); }
.u-places em { font: 400 15px/1 var(--font-date); font-style: normal; }
.u-places small { grid-column: 2 / -1; font-size: 11.5px; color: var(--u-mute); }
.u-key { position: absolute; left: 20px; right: 20px; bottom: 22px; display: grid; gap: 8px; font-size: 11.5px; color: var(--u-ink2); }
.u-key div { display: flex; align-items: center; gap: 9px; }
.u-key i { flex: none; width: 18px; display: grid; place-items: center; }
.u-key i::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--u-ink2); }
.u-key i.h::before { background: transparent; border: 1.5px dashed var(--u-ink2); }
.u-key i.d::before { width: 18px; height: 0; border-radius: 0; background: none; border-top: 1.75px dashed var(--u-ink2); }
.u-key i.n { font: 400 14px/1 var(--font-date); font-style: normal; color: var(--u-ink); }
.u-key i.n::before { display: none; }
.u-map { position: absolute; left: 260px; right: 0; top: 82px; bottom: 0; overflow: hidden; background: #ece4d3; }
.u-map svg { position: absolute; left: 0; top: 0; overflow: visible; }
.u-grat path { fill: none; stroke: #e0d8c8; stroke-width: 1; }
.u-grat text { font: 400 10px var(--mono); fill: #aaa18e; }
.u-river { fill: none; stroke: #9db6c8; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.u-trib { fill: none; stroke: #aec2d1; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.u-lake { fill: #c3d3de; stroke: #a7bfcf; stroke-width: 1; stroke-linejoin: round; }
.u-town { fill: #a59a86; }
.u-townl { font: 400 10.5px var(--font); fill: #8f8574; paint-order: stroke; stroke: #ece4d3; stroke-width: 3px; stroke-linejoin: round; }
.u-townl.big { font-size: 11.5px; fill: #7d7464; }
.u-rlab.sm { font-size: 12px; }
.u-scale path { fill: none; stroke: #8f8574; stroke-width: 1.2; }
.u-scale text { font: 400 9.5px var(--mono); fill: #8f8574; }
.u-rlab { font: italic 400 14px var(--font-date); fill: #8197a8; }
.u-mv { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.u-mv.inf { stroke-dasharray: 4 4; }
.u-mvl { font: 500 10px var(--mono); fill: var(--u-ink2); paint-order: stroke; stroke: #ede6d8; stroke-width: 4px; stroke-linejoin: round; }
.u-pt { position: absolute; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #f6f1e6, 0 2px 6px rgb(60 40 10 / 0.35); }
.u-pt.hyp { background: rgb(255 255 255 / 0.4); border: 1.5px dashed var(--u-ink2); box-shadow: none; }
.u-pt.on { box-shadow: 0 0 0 2px #f6f1e6, 0 0 0 3.5px var(--u-ink), 0 0 0 11px rgb(44 91 224 / 0.16), 0 2px 6px rgb(60 40 10 / 0.35); }
.u-pl { position: absolute; transform: translateY(-50%); font-size: 12.5px; font-weight: 500; white-space: nowrap; text-shadow: 0 0 3px #ede6d8, 0 0 3px #ede6d8, 0 0 3px #ede6d8; }
.u-pl small { margin-left: 5px; font: 400 13px var(--font-date); color: var(--u-ink2); }
.u-pl.hyp { font-weight: 400; color: var(--u-ink2); }
.u-lead { fill: none; stroke: var(--u-ink); stroke-width: 1; }
.u-pop { position: absolute; width: 236px; padding: 12px 14px 10px; border: 1px solid var(--u-line); border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgb(60 40 10 / 0.14); }
.u-pop h4 { margin: 0; font: 500 15px/1.2 var(--font); }
.u-pop > small { display: block; margin-top: 2px; font-size: 12px; color: var(--u-mute); }
.u-pop ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.u-pop li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 6px; align-items: baseline; font-size: 12.5px; }
.u-pop li span { font-size: 11px; }
.u-pop em { font-style: normal; font-size: 11.5px; color: var(--u-mute); }
.u-pop footer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--u-line); font-size: 11.5px; color: var(--u-mute); }
.u-time { position: absolute; left: 20px; right: 20px; bottom: 16px; height: 64px; display: grid; grid-template-columns: 32px 112px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 0 18px 0 14px; border: 1px solid var(--u-line); border-radius: 10px; background: #fff; }
.u-play { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--u-ink); }
.u-play::after { content: ""; margin-left: 3px; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.u-when b { display: block; font: 400 16px/1.1 var(--font-date); }
.u-when small { font-size: 11px; color: var(--u-mute); }
.u-hist { position: relative; height: 46px; }
.u-bars { position: absolute; left: 0; right: 0; top: 0; height: 24px; display: flex; align-items: flex-end; gap: 2px; }
.u-bars i { flex: 1; height: calc(var(--h) * 1%); border-radius: 1.5px 1.5px 0 0; background: var(--u-ink); opacity: 0.78; }
.u-track { position: absolute; left: 0; right: 0; top: 27px; height: 2px; border-radius: 1px; background: var(--u-ink); }
.u-track::before, .u-track::after { content: ""; position: absolute; top: -5px; width: 12px; height: 12px; border: 2px solid var(--u-ink); border-radius: 50%; background: #fff; }
.u-track::before { left: -6px; }
.u-track::after { right: -6px; }
.u-ticks { position: absolute; left: 0; right: 0; top: 34px; display: flex; justify-content: space-between; font: 400 10px/1 var(--mono); color: var(--u-mute); }
.u-mapzoom { top: 14px; bottom: auto; right: 14px; }

/* ── mobile: the phone version of the same screens (390 × 800) */
.ui.m { background: #fff; }
.m-status { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 4px 26px 0 32px; background: #fff; }
.m-status b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.m-status > span { display: flex; align-items: center; gap: 6px; }
.m-sig { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.m-sig i { width: 3px; border-radius: 1px; background: var(--u-ink); }
.m-sig i:nth-child(1) { height: 4px; } .m-sig i:nth-child(2) { height: 6px; } .m-sig i:nth-child(3) { height: 8.5px; } .m-sig i:nth-child(4) { height: 11px; }
.m-bat { position: relative; width: 24px; height: 12px; border: 1.5px solid var(--u-ink); border-radius: 3.5px; }
.m-bat::after { content: ""; position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; right: 5px; border-radius: 1.5px; background: var(--u-ink); }
.m-head { position: absolute; left: 0; right: 0; top: 44px; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--u-line); }
.m-head svg { fill: var(--u-ink); }
.m-head h3 { margin: 0; font: 600 17px/1 var(--font); letter-spacing: -0.01em; }
.m-head .r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.m-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--u-bg); }
.m-ico i { width: 11px; height: 11px; border: 1.75px solid var(--u-ink2); border-radius: 50%; }
.m-back { display: flex; align-items: center; height: 32px; padding: 0 12px 0 8px; margin-left: -6px; border-radius: 16px; background: var(--u-bg); font-size: 15px; font-weight: 500; }
.m-more { font-size: 15px; letter-spacing: 1px; color: var(--u-ink2); }
.m-gr2 { font-size: 12.5px; color: var(--u-mute); }
.m-chips { position: absolute; left: 0; right: 0; top: 96px; height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 16px; overflow: hidden; white-space: nowrap; background: var(--u-bg); border-bottom: 1px solid var(--u-line); }
.m .u-card { padding: 11px 10px 8px; }
.m .u-card .u-r { font-size: 13px; }
.m .u-card .u-y { font-size: 15px; margin-top: 1px; }
.m .u-card .u-p { font-size: 11px; margin-top: 1px; }
.m .u-g { right: 9px; top: 11px; font-size: 11px; }
.m .u-card.sm { padding: 9px 8px 7px; }
.m .u-card.sm .u-y { font-size: 13.5px; }
.m .u-card.sm .u-p { font-size: 10.5px; padding-right: 12px; }
.m .u-card.sm .u-g { top: auto; bottom: 9px; right: 7px; }
.m .u-card.gap { font-size: 10.5px; }
.m .u-card.me { padding: 9px 12px; display: flex; align-items: baseline; gap: 10px; }
.m-gl { position: absolute; left: 16px; display: flex; align-items: baseline; gap: 8px; }
.m-gl b { font: 500 10.5px/1 var(--mono); color: var(--u-mute); }
.m-gl .u-y { font-size: 14px; color: var(--u-ink2); }
.m-gr { position: absolute; right: 16px; font-size: 11.5px; color: var(--u-mute); }
.m-tap { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgb(18 18 18 / 0.16); box-shadow: 0 0 0 7px rgb(18 18 18 / 0.07); pointer-events: none; }
.m-sheet { position: absolute; left: 0; right: 0; bottom: 64px; padding: 18px 16px 12px; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -10px 30px rgb(60 40 10 / 0.13); }
.m-sheet::before { content: ""; position: absolute; left: 50%; top: 7px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--u-line2); }
.m-peek { display: flex; align-items: center; gap: 12px; }
.m-peek > div { flex: 1; min-width: 0; }
.m-peek b { display: block; font-size: 14px; font-weight: 500; }
.m-peek small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--u-mute); }
.m-peek small .u-y { font-size: 13px; color: var(--u-ink2); }
.m-btn { height: 36px; display: grid; place-items: center; padding: 0 14px; border-radius: 10px; background: var(--u-ink); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; }
.m-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px 14px; background: #fff; border-top: 1px solid var(--u-line); }
.m-tabbar span { display: grid; justify-items: center; gap: 3px; font-size: 10.5px; color: var(--u-mute); }
.m-tabbar .on { color: var(--u-ink); font-weight: 500; }
.m-tabbar svg { width: 22px; height: 22px; fill: currentColor; }
.m-title { position: absolute; left: 16px; right: 16px; top: 62px; }
.m-title h3 { margin: 0; font: 500 25px/1.1 var(--font); letter-spacing: -0.02em; }
.m-title div { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12.5px; color: var(--u-ink2); }
.m-title .u-y { margin-right: 4px; font-size: 18px; color: var(--u-ink); }
.m-title i { width: 8px; height: 8px; border-radius: 50%; background: var(--ff); }
.m-who { position: absolute; left: 16px; right: 16px; top: 130px; }
.m-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 7px; padding: 8px 10px; border: 1px solid var(--u-line); border-radius: 8px; background: var(--u-bg); font-size: 12px; color: var(--u-ink2); }
.m-path em { font-style: normal; color: var(--u-mute); }
.m-path b { font-weight: 500; color: var(--u-ink); }
.m-facts { position: absolute; left: 16px; right: 16px; top: 198px; }
.m-scrim { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; z-index: 2; background: rgb(18 18 18 / 0.34); }
.m-full { position: absolute; left: 0; right: 0; top: 86px; bottom: 0; z-index: 4; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -10px 30px rgb(0 0 0 / 0.18); }
.m-full::before { content: ""; position: absolute; left: 50%; top: 7px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--u-line2); }
.m-full.u-a { transform: translateY(72px); }
.m-fhead { position: absolute; left: 16px; right: 16px; top: 16px; height: 34px; display: flex; align-items: center; justify-content: space-between; }
.m-x { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--u-bg); font-size: 18px; line-height: 1; color: var(--u-ink2); }
.m-fact { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; padding: 8px 0 8px 12px; border-bottom: 1px solid var(--u-line); }
.m-fact > span { font-size: 12px; line-height: 19px; }
.m-fact b { display: block; font-size: 13.5px; font-weight: 400; line-height: 1.35; }
.m-fact small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: var(--u-mute); }
.m-fact small em { font-style: normal; font-weight: 500; color: var(--u-ink2); }
.m-fact.open::before { inset: 4px -6px; }
.m-next { display: grid; gap: 6px; margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--u-ink); color: #fff; }
.m-next .u-m { color: #9b958a; }
.m-next p { margin: 0; font-size: 14px; line-height: 1.35; }
.m-next small { font-size: 11.5px; color: #b9b3a7; }
.m-next .u-btn { height: 36px; display: grid; place-items: center; margin-top: 4px; border-radius: 9px; background: #fff; color: var(--u-ink); font-size: 13px; font-weight: 500; }
.m-mapbox { position: absolute; left: 0; right: 0; top: 96px; height: 428px; overflow: hidden; background: #ece4d3; }
.m-mapbox svg { position: absolute; left: 0; top: 0; }
.m-time { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 48px; display: grid; grid-template-columns: 28px auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 0 14px 0 10px; border: 1px solid var(--u-line); border-radius: 10px; background: #fff; }
.m-time .u-play { width: 28px; height: 28px; }
.m-time b { font: 400 14px/1 var(--font-date); white-space: nowrap; }
.m-time .u-hist { height: 30px; }
.m-time .u-bars { height: 18px; }
.m-time .u-track { top: 22px; }
.ui.m .m-place { top: 532px; bottom: 64px; width: auto; padding: 20px 18px 12px; border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgb(60 40 10 / 0.13); }
.ui.m .m-place h4 { font-size: 17px; }
.ui.m .m-place li { font-size: 13px; }

/* phone: a relative suggests a change */
.m-fhead .r2 { display: flex; align-items: center; gap: 8px; }
.m-sug { height: 30px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--u-line2); border-radius: 15px; font-size: 12.5px; font-weight: 500; }
.m-form { position: absolute; left: 16px; right: 16px; top: 62px; bottom: 28px; display: flex; flex-direction: column; gap: 7px; }
.m-fh h3 { margin: 0; font: 500 23px/1.15 var(--font); letter-spacing: -0.02em; }
.m-fh small { display: block; margin-top: 5px; font-size: 12px; color: var(--u-mute); }
.m-fh .u-y { font-size: 13px; color: var(--u-ink2); }
.m-form > .u-m { margin-top: 9px; }
.m-card { padding: 10px 12px; border: 1px solid var(--u-line2); border-radius: 10px; background: #fff; }
.m-card > .u-m { display: block; font-size: 10px; }
.m-card small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--u-mute); }
.m-diff { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 15px; }
.m-diff s { color: var(--u-mute); text-decoration-thickness: 1px; }
.m-diff i { font-style: normal; color: var(--u-mute); }
.m-diff b { font-weight: 500; }
.m-phrow { display: flex; align-items: center; gap: 12px; }
.m-phrow b { font-size: 13.5px; font-weight: 500; }
.m-phrow small { margin-top: 2px; }
.m-add { margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--u-bg); font-size: 17px; color: var(--u-ink2); }
.m-text { font-size: 13.5px; line-height: 1.4; }
.m-agent { margin-top: 10px; padding: 11px 12px; border-radius: 10px; background: var(--u-bg); }
.m-agent p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; }
.m-send { display: grid; gap: 8px; margin-top: auto; padding-top: 10px; }   /* the button sits at the bottom of the sheet, as in a real form */
.m-send small { text-align: center; font-size: 11.5px; color: var(--u-mute); }
.m-send .u-btn { height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--u-ink); color: #fff; font-size: 14px; font-weight: 500; }

@media (prefers-reduced-motion: reduce) { .ui, .u-a, .mk, .u-hl, .callouts { transition: none; } }