/* ============================================================
   liveride.space — phone mockups + the feature showcase rows
   that carry them.

   Nothing here is a screenshot. Every phone below is markup
   composed out of the same LiveRide tokens the app is built
   from (ds/tokens/), so it follows the theme, stays crisp at
   any density and cannot go stale as an image would.

   HOW THE FRAME SCALES
   The screen inside a phone is laid out at the app's real
   logical size — 390 x 844 — in real app pixels, then the whole
   thing is scaled by one unitless factor, --s. That means the
   numbers in the markup are the app's own numbers (a 26px HUD
   chip is 26px here too) and responsiveness is one variable.
   ============================================================ */

/* ── the frame ─────────────────────────────────────────────── */
/* 390 screen + an 8px bezel on each side = 406 x 860 unscaled. */
.ph {
  --s: .80;
  --cut-o: calc(26px * var(--s));
  --cut-i: calc(19px * var(--s));
  position: relative;
  flex: none;
  width: calc(406px * var(--s));
  height: calc(860px * var(--s));
  /* Depth is glow, never a grey drop shadow. drop-shadow is used rather
     than box-shadow because the body is clipped to a chamfer and a box
     shadow would trace the uncut rectangle. */
  filter: drop-shadow(0 0 30px rgba(255, 45, 143, .13))
          drop-shadow(0 18px 40px rgba(5, 4, 9, .85));
}
.ph-body {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(158deg, rgba(246,244,250,.20) 0%, rgba(246,244,250,.05) 42%, rgba(255,45,143,.20) 100%);
  clip-path: polygon(var(--cut-o) 0, 100% 0, 100% calc(100% - var(--cut-o)), calc(100% - var(--cut-o)) 100%, 0 100%, 0 var(--cut-o));
}
.ph-screen {
  position: absolute; inset: calc(8px * var(--s)); overflow: hidden;
  background: var(--bg-void);
  clip-path: polygon(var(--cut-i) 0, 100% 0, 100% calc(100% - var(--cut-i)), calc(100% - var(--cut-i)) 100%, 0 100%, 0 var(--cut-i));
}
.ph-in {
  position: relative;
  width: 390px; height: 844px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  background: var(--bg-page);
  font-family: var(--font-ui);
  color: var(--text-hi);
  overflow: hidden;
}
/* The OS clock, and nothing else. No notch, no battery cartoon. */
.ph-time {
  position: absolute; top: 15px; left: 18px; z-index: 6;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 12px; letter-spacing: var(--ls-mono); color: var(--text-low);
}

/* ── showcase: prose beside a phone, alternating on desktop ── */
.show { display: flex; align-items: center; gap: 64px; margin-top: 56px; }
.show.rev { flex-direction: row-reverse; }
.show-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.show-copy h3 { font: var(--type-title-2); color: var(--text-hi); }
.show-copy p { font: var(--type-body); color: var(--text-mid); max-width: 52ch; }
.show-copy p b { color: var(--text-hi); font-weight: var(--fw-semibold); }

/* a fact list — a chamfered tick block, not a bullet glyph */
.flist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.flist li { position: relative; padding-left: 22px; font: var(--type-body-sm); color: var(--text-low); }
.flist li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px;
  background: var(--accent); box-shadow: var(--glow-magenta-sm);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}
.flist.cyan li::before { background: var(--accent-2); box-shadow: var(--glow-cyan-sm); }
.flist.live li::before { background: var(--live); box-shadow: var(--glow-mint); }
.flist li b { color: var(--text-mid); font-weight: var(--fw-semibold); }
.flist li em {
  font-style: normal; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text-hi);
}

/* the tag strip under the servers headline */
.tagrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.tagrow .tag u { color: var(--text-low); }

/* ══ inside the phone ═══════════════════════════════════════ */
/* Shared micro type. Every number is Azeret Mono and tabular. */
.mk-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium); letter-spacing: -.01em; color: var(--text-hi); }
.mk-l { font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: 10px;
  letter-spacing: var(--ls-label-wide); text-transform: uppercase; color: var(--text-faint); }
.mk-u { font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: 10px;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-low); }
.mk-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 28px;
  line-height: 1.04; text-transform: uppercase; color: var(--text-hi); }
/* Proper nouns — room, place, route and driver names — are sentence case. */
.mk-name { font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: 15px;
  line-height: 1.25; color: var(--text-hi); }
.mk-meta { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.3; color: var(--text-low); }
.mk-body { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.45; color: var(--text-mid); }
.mk-note { font-family: var(--font-ui); font-size: 12px; line-height: 1.4; color: var(--text-faint); }
.mk-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* panel: 1px gradient edge, chamfered, scanline texture */
.mk-p { --c: 10px; position: relative; padding: 1px; background: var(--grad-panel);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.mk-p > .in { position: relative; background: var(--surface-1);
  background-image: var(--tex-scanline); background-blend-mode: soft-light;
  clip-path: polygon(calc(var(--c) - 1px) 0, 100% 0, 100% calc(100% - var(--c) + 1px), calc(100% - var(--c) + 1px) 100%, 0 100%, 0 calc(var(--c) - 1px)); }
.mk-p.f2 > .in { background-color: var(--surface-2); }
.mk-p.mir { clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.mk-p.mir > .in { clip-path: polygon(0 0, calc(100% - var(--c) + 1px) 0, 100% calc(var(--c) - 1px), 100% 100%, calc(var(--c) - 1px) 100%, 0 calc(100% - var(--c) + 1px)); }
.mk-p.brand { background: linear-gradient(158deg, rgba(255,45,143,.55), rgba(255,45,143,.10) 55%, rgba(255,45,143,.34)); }
.mk-p.cyan  { background: linear-gradient(158deg, rgba(35,229,224,.50), rgba(35,229,224,.08) 55%, rgba(35,229,224,.30)); }
.mk-pad { padding: 16px; }
/* panel header strip: label left, count right */
.mk-ph { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--line-hairline); background: rgba(246,244,250,.02); }
.mk-ph .mk-n { font-size: 11px; color: var(--text-faint); font-weight: var(--fw-regular); }

/* list row: 2px category rule, glyph tile, title/subtitle, right metric */
.mk-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-hairline); border-left: 2px solid transparent; }
.mk-row:last-child { border-bottom: 0; }
.mk-row.r-brand { border-left-color: var(--accent); }
.mk-row.r-cyan  { border-left-color: var(--accent-2); }
.mk-row.r-live  { border-left-color: var(--live); }
.mk-row .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mk-row .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.mk-row .rt .mk-n { font-size: 15px; }

/* chamfered glyph tile */
.mk-t { flex: none; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; background: var(--surface-3); border: 1px solid var(--line-hairline);
  color: var(--text-mid);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.mk-t.sm { width: 30px; height: 30px; }
.mk-t.brand { border-color: var(--line-brand); background: var(--surface-brand-wash); color: var(--text-brand); }
.mk-t.cyan  { border-color: var(--line-cyan);  background: var(--surface-cyan-wash);  color: var(--text-cyan); }
.mk-t.live  { border-color: var(--line-mint);  background: rgba(43,229,139,.09);      color: var(--text-live); }

/* badge */
.mk-b { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: 9.5px;
  letter-spacing: var(--ls-label-wide); text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--line-hairline); color: var(--text-low);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.mk-b.brand { background: var(--surface-brand-wash); border-color: var(--line-brand); color: var(--text-brand); }
.mk-b.cyan  { background: var(--surface-cyan-wash);  border-color: var(--line-cyan);  color: var(--text-cyan); }
.mk-b.live  { background: rgba(43,229,139,.09);      border-color: var(--line-mint);  color: var(--text-live); }
.mk-b i.d { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }

/* tag / chip */
.mk-c { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px;
  background: var(--surface-overlay); border: 1px solid var(--line-hairline); color: var(--text-mid);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.mk-c.cyan { border-color: var(--line-cyan); color: var(--text-cyan); }
.mk-c.live { border-color: var(--line-mint); color: var(--text-live); }
.mk-c .mk-n { font-size: 12.5px; }
.mk-c .ct { font-family: var(--font-ui); font-weight: var(--fw-medium); font-size: 12px; color: var(--text-mid); }
.mk-c.cyan .ct { color: var(--text-cyan); }

/* metric */
.mk-m { display: flex; flex-direction: column; gap: 5px; }
.mk-m.right { align-items: flex-end; }
.mk-m .v { display: inline-flex; align-items: baseline; gap: 5px; }
.mk-m .v .mk-n { font-size: 26px; line-height: 1; }
.mk-m.sm .v .mk-n { font-size: 17px; }
.mk-m.lg .v .mk-n { font-size: 42px; }
.mk-m.brand .v .mk-n { color: var(--neon-magenta-400); }
.mk-m.cyan  .v .mk-n { color: var(--neon-cyan-400); }
.mk-m.live  .v .mk-n { color: var(--acid-mint-300); }
.mk-m .lab { display: inline-flex; align-items: center; gap: 5px; }

/* Stat strip — StatStrip: 2-5 Metrics separated by 1px hairlines. The dividers
   are the component, not a flourish; without them three figures in a row read
   as one number broken up.
   The cells are content-sized rather than the component's even thirds, and the
   gutter is 12 rather than 18, because at the app's own numbers MEMBERS and
   DRIVING do not fit the cell they get — see the note in the audit. Widening
   the label here would be drawing a defect rather than the product. */
.mk-ss { display: flex; align-items: stretch; }
.mk-ss > div { display: flex; flex-direction: column; gap: 4px; padding-right: 12px; }
.mk-ss > div + div { padding-left: 12px; border-left: 1px solid var(--line-hairline); }
.mk-ss .mk-n { font-size: 17px; line-height: 1; }
.mk-ss .live .mk-n { color: var(--acid-mint-300); }

/* segmented control */
.mk-seg { display: flex; gap: 3px; padding: 3px; background: var(--surface-2);
  border: 1px solid var(--line-hairline);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.mk-seg > span { position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; height: 28px; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 11.5px;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-low);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
/* The selected segment: brand wash, brand edge, 2px glowing baseline rule.
   Cyan is the other tint, and it scopes data rather than naming a place. */
.mk-seg > span.on { background: var(--surface-brand-wash); color: var(--text-brand);
  box-shadow: inset 0 0 0 1px var(--line-brand); }
.mk-seg > span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); box-shadow: var(--glow-magenta-sm); }
.mk-seg.cyan > span.on { background: var(--surface-cyan-wash); color: var(--text-cyan);
  box-shadow: inset 0 0 0 1px var(--line-cyan); }
.mk-seg.cyan > span.on::after { background: var(--accent-2); box-shadow: var(--glow-cyan-sm); }
.mk-pip { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 15px;
  padding: 0 3px; background: var(--surface-cyan-wash); border: 1px solid var(--line-cyan);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold);
  font-size: 10px; letter-spacing: 0; color: var(--text-cyan);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }

/* button */
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px; border: 1px solid transparent;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 12px;
  letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.mk-btn.lg { height: 44px; font-size: 13px; padding: 0 18px; }
.mk-btn.pri { background: var(--grad-magenta-fill); color: var(--accent-contrast); box-shadow: var(--glow-magenta-sm); }
.mk-btn.sec { background: rgba(246,244,250,.03); border-color: var(--line-strong); color: var(--ink-100); }
.mk-btn.ghost { color: var(--text-mid); }
/* icon-only control */
.mk-ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid var(--line-hairline); background: rgba(246,244,250,.04); color: var(--text-mid);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.mk-ib.brand { border-color: var(--line-brand); background: var(--surface-brand-wash); color: var(--text-brand); }
.mk-ib.ghost { border-color: transparent; background: none; color: var(--text-faint); }

/* ── 1 · the live map ──────────────────────────────────────── */
.mk-map { background: var(--bg-void); }
.mk-map .tiles { position: absolute; inset: 0; }
.mk-map .tiles svg { display: block; width: 100%; height: 100%; }
.mk-map .vig { position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 118%, rgba(255,45,143,.16), transparent 55%),
              radial-gradient(90% 60% at 50% -8%, rgba(125,77,255,.14), transparent 60%);
  box-shadow: inset 0 0 100px 26px rgba(5,4,9,.8); }
/* --scrim-map-top, pulled back so it does not read as a broken tile band */
.mk-map .scrim { position: absolute; left: 0; right: 0; top: 0; height: 144px;
  background: linear-gradient(180deg, rgba(5,4,9,.82) 0%, rgba(5,4,9,.60) 56%, rgba(5,4,9,.28) 84%, rgba(5,4,9,0) 100%); }

.mk-hud { position: absolute; top: 48px; left: 12px; right: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-hud .l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mk-hud .pill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px;
  background: var(--surface-overlay); border: 1px solid var(--line-hairline);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.mk-hud .pill .mk-n { font-size: 13px; }
.mk-hud .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--live);
  box-shadow: var(--glow-mint); }
.mk-hud .mk-c { max-width: 156px; }
.mk-hud .mk-c .ct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* map markers: chamfered glyph tile on a 1px stem, count chip top-right */
.mk-pin { --pc: var(--accent); --pg: rgba(255,45,143,.40);
  position: absolute; display: flex; flex-direction: column; align-items: center;
  transform: translate(-50%, -100%); color: var(--pc); }
.mk-pin .tile { position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; background: var(--surface-overlay); border: 1px solid var(--pc);
  box-shadow: 0 0 0 1px rgba(5,4,9,.7), 0 0 14px var(--pg);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.mk-pin .stem { width: 1px; height: 12px; background: var(--pc); opacity: .8; }
.mk-pin .nib { width: 5px; height: 5px; background: var(--pc); transform: rotate(45deg);
  box-shadow: 0 0 8px var(--pg); }
.mk-pin .cnt { position: absolute; top: -7px; right: -9px; display: flex; align-items: center;
  justify-content: center; min-width: 20px; height: 17px; padding: 0 4px; background: var(--pc);
  color: var(--ink-1000); font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold); font-size: 10px;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.mk-pin.meet { --pc: var(--map-meet); --pg: rgba(43,229,139,.42); }
.mk-pin.trap { --pc: var(--map-trap); --pg: rgba(255,180,61,.42); }
.mk-pin.start { --pc: var(--accent); --pg: rgba(255,45,143,.42); }
/* A driver, drawn the way the app draws one (driver-app/src/mapHtml.js, and
   the live Leaflet map further down this same page): a chamfered vehicle tile,
   FILLED white for you and outlined for everybody else. Never a round dot —
   border-radius 999 belongs to status dots alone, and the app has no round
   marker anywhere on the map. Never a name either: the count is the message.
   The bloom rides on the wrapper because clip-path is applied after filter and
   would otherwise cut the glow off with the tile. */
.mk-drv { position: absolute; display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 1px rgba(5,4,9,.9)) drop-shadow(0 0 6px rgba(255,45,143,.30)); }
.mk-drv .tile { display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; background: var(--surface-overlay); color: var(--map-driver);
  border: 1px solid var(--line-brand);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.mk-drv.you { filter: drop-shadow(0 0 1px rgba(5,4,9,.9)) drop-shadow(0 0 10px rgba(255,45,143,.55)); }
.mk-drv.you .tile { width: 30px; height: 30px; background: var(--map-driver);
  color: var(--ink-1000); border-color: var(--map-route);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.mk-drv.you .ring { position: absolute; inset: -6px; border: 1px solid var(--map-route); opacity: .5;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  animation: lr-pulse 1.6s var(--ease-in-out) infinite; }

/* The map controls. The real screen always carries this rail — heading lock,
   map theme and the legend — and recenter joins it once the driver has panned
   away. IconButton `md` is a 40pt tile on a 6px cut, 8pt apart. */
.mk-rail { position: absolute; top: 88px; right: 12px; display: flex; flex-direction: column;
  align-items: flex-end; gap: 8px; }
.mk-ib.map { width: 40px; height: 40px; background: var(--surface-overlay);
  border-color: var(--line-soft);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }

/* the one permitted text glow on the map */
.mk-speed { position: absolute; left: 12px; bottom: 92px; min-width: 138px; padding: 10px 14px;
  background: var(--surface-overlay); border: 1px solid var(--line-cyan); box-shadow: var(--glow-cyan-sm);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.mk-speed .v { display: flex; align-items: baseline; gap: 6px; }
.mk-speed .mk-n { font-size: 42px; line-height: 1; color: var(--neon-cyan-400);
  text-shadow: var(--text-glow-cyan); }

/* tab bar */
.mk-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 68px; display: flex;
  background: var(--surface-1); border-top: 1px solid var(--line-hairline); }
.mk-tabs > span { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; color: var(--text-faint);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 10px;
  letter-spacing: var(--ls-label); text-transform: uppercase; }
.mk-tabs > span.on { color: var(--text-brand); }
.mk-tabs > span.on::before { content: ""; position: absolute; top: 0; width: 34px; height: 2px;
  background: var(--accent); box-shadow: var(--glow-magenta-sm); }

/* ── 2 · servers, 4 · admin — a scrolling screen ───────────── */
.mk-scroll { position: absolute; inset: 0; display: flex; flex-direction: column; }
.mk-head { padding: 56px 16px 13px; border-bottom: 1px solid var(--line-hairline); }
.mk-head .sub { margin-top: 5px; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 11px; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--text-faint); }
.mk-head .room { margin-top: 6px; }
.mk-list { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.mk-sec { font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: 10px;
  letter-spacing: var(--ls-label-wide); text-transform: uppercase; color: var(--text-low); }

/* a server card */
.mk-card .hd { display: flex; align-items: center; gap: 13px; }
.mk-card .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mk-card .ft { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; }
.mk-card .ft .mk-ss { flex: 1; min-width: 0; }

/* the admin row's action strip */
.mk-act { display: flex; align-items: center; gap: 6px; padding: 0 16px 10px 18px; }
.mk-act .gap { flex: 1; }

/* ── 3 · the ride inform ───────────────────────────────────── */
.mk-hero { position: relative; height: 240px; background: var(--bg-void); overflow: hidden; }
.mk-hero .tiles { position: absolute; inset: 0; }
.mk-hero .tiles svg { display: block; width: 100%; height: 100%; }
.mk-hero .fade { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,4,9,0) 0%, rgba(5,4,9,.72) 58%, rgba(5,4,9,1) 100%); }
.mk-hero .top { position: absolute; top: 44px; left: 14px; }
.mk-hero .foot { position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; flex-direction: column; gap: 8px; }
.mk-hero .ttl { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 34px;
  line-height: 1.04; letter-spacing: var(--ls-title); color: var(--text-hi); }
.mk-from { display: flex; align-items: center; gap: 7px; color: var(--text-faint); }
.mk-from .nm { font-family: var(--font-ui); font-size: 12.5px; color: var(--text-mid); }
.mk-when { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mk-place { display: flex; gap: 12px; }
.mk-place .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* the action bar, with the sunset rule along its leading edge */
.mk-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 14px 24px;
  display: flex; flex-direction: column; gap: 12px; background: var(--surface-overlay);
  border-top: 1px solid var(--line-hairline); }
.mk-bar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-horizon); }
.mk-bar .say { display: flex; align-items: flex-end; gap: 12px; }
.mk-bar .say p { flex: 1; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.4;
  color: var(--text-low); }
.mk-bar .btns { display: flex; gap: 12px; }
.mk-bar .btns .mk-btn { flex: 1; }

/* corner brackets — a highlight, one or two panels per screen */
.mk-p.bk > .in::before, .mk-p.bk > .in::after { content: ""; position: absolute; width: 9px; height: 9px;
  border: 0 solid var(--line-strong); }
.mk-p.bk > .in::before { top: 6px; right: 6px; border-top-width: 1px; border-right-width: 1px; }
.mk-p.bk > .in::after { bottom: 6px; left: 6px; border-bottom-width: 1px; border-left-width: 1px; }
.mk-p.bk.cyan > .in::before, .mk-p.bk.cyan > .in::after { border-color: var(--accent-2); }

/* small helpers used inside the screens */
.mk-segrow { padding: 12px 16px 0; }
.mk-list.pb { padding-bottom: 82px; }
/* the inform body stops at the action bar; the bar supplies the bottom air */
.mk-list.flush { padding-bottom: 0; }
.mk-m .lab { color: var(--text-faint); }
.mk-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 16px; }
.mk-btnrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-gapt { margin-top: 12px; }
/* an inform row and its action strip read as one block, so the wrapper owns
   the separator and the row above it drops its own */
.mk-item { border-bottom: 1px solid var(--line-hairline); }
.mk-item:last-child { border-bottom: 0; }
.mk-row.nb { border-bottom: 0; }
.mk-row .rt.st .mk-n { font-size: 13px; }
.mk-tabs > span.warn.on { color: var(--text-warn); }
.mk-tabs > span.warn.on::before { background: var(--warn); box-shadow: var(--glow-amber); }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .show { gap: 40px; }
  .ph { --s: .72; }
}
@media (max-width: 900px) {
  .show, .show.rev { flex-direction: column; align-items: flex-start; gap: 32px; margin-top: 40px; }
  .ph { --s: .74; align-self: center; }
}
@media (max-width: 620px) {
  .ph { --s: .68; }
  .show-copy h3 { font-size: 24px; }
}
@media (max-width: 400px) {
  .ph { --s: .62; }
}