/* Colours and type follow parcdewisant.co.uk: Figtree, moss green on
   warm paper, ink text, pill buttons and chips, small uppercase labels.
   Visitor pages get the brand touches (hero, eyebrows, uppercase CTAs).
   Admin and tenant pages share the palette and font but stay plain. */
:root {
  --ink: #0B211A;
  --moss: #0E5C41;
  --moss-2: #17795A;
  --mint: #7FD9A8;
  --pale: #E8F0EC;
  --stone: #EBE8E0;
  --paper: #FAF9F5;
  --brass: #7E5A1C;

  --bg: var(--paper);
  --surface: #ffffff;
  --text: var(--ink);
  --muted: #52625A;
  --border: rgba(11, 33, 26, 0.13);
  --border-strong: rgba(11, 33, 26, 0.26);
  --accent: var(--moss);
  --accent-hover: var(--moss-2);
  --accent-text: #ffffff;
  --notice: var(--stone);
  --radius: 11px;
  --radius-lg: 18px;
  --gutter: 16px;
  --f-body: 'Figtree', Arial, system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B211A;
    --surface: #12302A;
    --text: #EEF3EF;
    --muted: #A3B5AB;
    --border: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.24);
    --accent: #6FD6A2;
    --accent-hover: #8FE2B7;
    --accent-text: #0B211A;
    --notice: #1E3B33;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16.5px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  /* Keeps the footer at the bottom on short pages. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > .page { flex: 1 0 auto; width: 100%; }

a { color: var(--accent); text-underline-offset: 2px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 12px; }
h2 { font-size: 1.2rem; font-weight: 700; margin: 28px 0 12px; }
h3 { font-size: 1.05rem; font-weight: 700; }
img { max-width: 100%; display: block; }
.muted { color: var(--muted); }
.inline { display: inline; }
[hidden] { display: none !important; }

/* Small uppercase label above a heading, as on the main site. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; }

/* Header */
.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.brand img { width: 36px; height: 36px; }
.header-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.header-nav a, .header-nav .link-button { color: var(--muted); text-decoration: none; }
.header-nav a:hover, .header-nav .link-button:hover { color: var(--accent); }
.header-nav .link-button { font: inherit; letter-spacing: inherit; text-transform: inherit; }
.lang-switch { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; }
.lang-switch > * { padding: 4px 10px; border-radius: 999px; }
.lang-switch strong { background: var(--accent); color: var(--accent-text); font-weight: 600; }

.page { max-width: 760px; margin: 0 auto; padding: 24px var(--gutter) 56px; }
.area-admin .page { max-width: 980px; }

/* Admin sidebar. Phones: a "Menu" button above the page. Wide screens: a
   fixed column on the left that scrolls on its own, under a sticky header. */
:root { --header-h: 61px; --sidebar-w: 232px; }
.admin-sidebar { margin: 0 0 20px; }
.admin-menu-toggle { width: 100%; justify-content: space-between; }
.admin-menu-toggle::after { content: '\25BE'; }
.admin-menu-toggle[aria-expanded="true"]::after { content: '\25B4'; }
.admin-sidebar-groups { display: grid; gap: 14px; margin-top: 10px; }
.admin-nav-heading {
  margin: 0 0 4px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-nav-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.admin-nav-group a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
}
.admin-nav-group a:hover { background: var(--pale); }
.admin-nav-group a.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .admin-nav-group a:hover { background: var(--notice); }
}

@media (min-width: 900px) {
  .area-admin .site-header { position: sticky; top: 0; z-index: 10; height: var(--header-h); flex-wrap: nowrap; }
  .area-admin .admin-sidebar {
    position: fixed;
    top: var(--header-h);
    bottom: 0;
    left: 0;
    width: var(--sidebar-w);
    margin: 0;
    padding: 20px 12px 32px;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
  }
  .area-admin .admin-sidebar-groups { margin-top: 0; gap: 18px; }
  /* Walk mode's upload bar sticks below the pinned header, not under it. */
  .area-admin .walk-sync { top: var(--header-h); }
  /* width: auto, so the margin is taken out of the width instead of added to it. */
  .area-admin .page { width: auto; margin-left: var(--sidebar-w); max-width: calc(980px + 64px); padding-left: 32px; padding-right: 32px; }
}

/* Controls */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  min-height: 46px;
}
button:hover, .button:hover { border-color: var(--accent); }
button.primary, .button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button.primary:hover, .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:disabled { opacity: 0.4; cursor: default; }
.link-button { border: 0; background: none; padding: 0; min-height: 0; color: var(--accent); text-decoration: underline; font-weight: 400; border-radius: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Visitor pages: uppercase call-to-action buttons with an arrow, like the main site. */
.area-public .button.primary, .area-public button.primary {
  font-size: 12.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.area-public .button.primary.go::after { content: '\2192'; font-size: 15px; letter-spacing: 0; }

input[type="text"], input[type="search"], input[type="email"], input[type="password"] {
  width: 100%;
  font: inherit;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  min-height: 46px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
label { display: block; font-weight: 600; margin: 12px 0 6px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.narrow { max-width: 420px; margin: 0 auto; }
.card button { margin-top: 16px; width: 100%; }
.notice { background: var(--notice); padding: 12px 16px; border-radius: var(--radius); }

/* Home hero: deep green band, like the main site's header area. */
.hero {
  margin: -24px calc(-1 * var(--gutter)) 28px;
  padding: 36px var(--gutter) 32px;
  background: linear-gradient(160deg, #0B211A 0%, #0E5C41 100%);
  color: #fff;
}
.hero .eyebrow { color: var(--mint); }
.hero h1 { font-size: 2.4rem; font-weight: 400; letter-spacing: -0.03em; color: #fff; margin-bottom: 20px; }
.hero label { color: rgba(255, 255, 255, 0.8); font-weight: 500; }
.hero input[type="search"] { border-radius: 999px; border-color: transparent; background: #fff; color: #0B211A; padding-left: 20px; }
.hero button.primary { background: var(--mint); border-color: var(--mint); color: #0B211A; }
.hero button.primary:hover { background: #A2E6C1; border-color: #A2E6C1; }
@media (min-width: 761px) {
  .hero { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}
.search-row { display: flex; gap: 8px; align-items: center; }
.search-row input { flex: 1; min-width: 0; }
/* Overrides the full-width card button, so the input keeps the space. */
.search-row button { flex: none; width: auto; margin-top: 0; }
@media (max-width: 420px) {
  .card .search-row { flex-wrap: wrap; }
  .card .search-row input { flex-basis: 100%; }
  .card .search-row button { width: 100%; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  text-decoration: none;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip:hover { border-color: var(--accent); }
.chip.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.result-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.result-list a {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
}
.result-list a:hover { border-color: var(--accent); }
.result-list .time { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--accent); }

.tenant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tenant-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  padding: 18px 12px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}
.tenant-card:hover { border-color: var(--accent); }
.tenant-card img { height: 56px; width: auto; object-fit: contain; }
.initials { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--pale); color: var(--moss); font-weight: 700; }

/* Tenant profile and events */
.cover { border-radius: var(--radius-lg); margin-bottom: 16px; max-height: 240px; width: 100%; object-fit: cover; }
.profile-head { display: flex; gap: 14px; align-items: center; }
.profile-head .logo { width: 72px; height: 72px; object-fit: contain; }
.actions { display: grid; gap: 8px; margin: 16px 0; }
.description { white-space: pre-line; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; }
.details dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.details dd { margin: 0; overflow-wrap: anywhere; }

/* Route */
.route-title { font-size: 1.4rem; }
.step-count { font-family: var(--f-mono); color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px; }
.step-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.step-photo img { width: 100%; }
/* Bright yellow with a dark outline reads on any photo. */
.arrow {
  position: absolute;
  font-size: 72px;
  line-height: 1;
  color: #ffd400;
  text-shadow: 0 0 6px #000, 0 0 2px #000;
  pointer-events: none;
}
.instruction { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; margin: 16px 0; }
.arrived { color: var(--accent); font-weight: 700; }
.progress { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin: 12px 0; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }
.step-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.lost { font-size: 0.9rem; margin-top: 20px; }

/* Visitor footer */
.site-footer { background: #0B211A; color: rgba(255, 255, 255, 0.72); font-size: 14.5px; }
.site-footer .inner { max-width: 760px; margin: 0 auto; padding: 28px var(--gutter); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--mint); }
.site-footer .brand { color: #fff; }

/* Admin and portal */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.stat { display: grid; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.stat-value { font-size: 1.6rem; font-weight: 700; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table td { padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.permission-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.permission-list .off { color: var(--muted); }
.table th { text-align: left; padding: 8px 6px; border-bottom: 2px solid var(--border); font-size: 0.85rem; color: var(--muted); }
.subnav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; font-size: 0.95rem; }
.subnav a { text-decoration: none; color: var(--muted); padding-bottom: 4px; }
.subnav a.active { color: var(--text); border-bottom: 2px solid var(--accent); }
.title-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.title-row h1 { margin: 0; }
.card + .card, section.card { margin-top: 16px; }
.card h2:first-child { margin-top: 0; }
.checks { border: 0; padding: 0; margin: 16px 0 0; }
.checks legend { font-weight: 700; padding: 0; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 400; margin: 8px 0; }
.check input { width: 20px; height: 20px; }
.hint { font-size: 0.85rem; margin: 4px 0 0; }
.field-error { color: #b42318; font-size: 0.9rem; margin: 4px 0 0; }
.flash { padding: 12px 14px; border-radius: var(--radius); background: var(--notice); }
.flash-success { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.badge { display: inline-block; font-size: 0.8rem; padding: 2px 10px; border-radius: 999px; background: var(--border); color: var(--muted); margin-right: 8px; }
.badge.on { background: var(--accent); color: var(--accent-text); }
button.small { min-height: 36px; padding: 6px 12px; font-size: 0.85rem; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.inline-form { margin-top: 16px; }
.center { text-align: center; }
input[readonly] { opacity: 0.7; }

/* Profile editor */
textarea, select, input[type="url"], input[type="tel"], input[type="number"], input[type="time"] {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  min-height: 48px;
}
textarea { resize: vertical; }
input[type="file"] { width: 100%; font-size: 0.9rem; margin-top: 8px; }
.translated { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.translated legend { font-weight: 700; padding: 0; }
.translated-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lang-label { font-weight: 500; font-size: 0.9rem; display: flex; gap: 8px; align-items: center; }
.badge.warn { background: var(--notice); color: var(--text); }
.image-fields { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.image-preview { display: grid; place-items: center; min-height: 120px; border: 1px dashed var(--border); border-radius: var(--radius); padding: 8px; background: var(--bg); }
.image-preview img { max-height: 160px; object-fit: contain; }
.hours { display: grid; gap: 10px; }
.hours-row { display: grid; grid-template-columns: 7.5rem 1fr 1fr auto; gap: 8px; align-items: center; }
.hours-row .check { margin: 0; white-space: nowrap; }
.hours-row .field-error { grid-column: 1 / -1; }
.hours-row input:disabled { opacity: 0.4; }
@media (max-width: 560px) {
  .hours-row { grid-template-columns: 1fr 1fr; }
  .hours-day { grid-column: 1 / -1; font-weight: 600; }
}
.sticky-save { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); margin-top: 16px; }
.sticky-save button { width: 100%; }
.category-row { display: grid; gap: 8px; }
.chip.static { cursor: default; }
.category-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 16px; }

/* QR codes */
.qr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.qr-list li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.qr-list .check { margin: 0; align-items: center; }
.qr-list img { width: 64px; height: 64px; border-radius: 6px; background: #fff; flex: none; }
.qr-code-large { width: 200px; height: 200px; background: #fff; border-radius: var(--radius); padding: 6px; }

/* Translations */
.translation-list { display: grid; gap: 0; }
.translation-row { padding: 14px 0; border-bottom: 1px solid var(--border); }
.translation-key { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.translation-key code { font-family: var(--f-mono); font-size: 12px; background: none; padding: 0; color: var(--muted); }
.translation-row textarea { min-height: 0; padding: 8px 12px; }
.translation-row .lang-label { margin: 4px 0; }

/* Floors */
.floor-list { display: grid; gap: 8px; }
.floor-row { display: grid; grid-template-columns: 1fr 1fr 5rem auto auto; gap: 8px; align-items: center; }
.floor-row input { min-height: 40px; padding: 8px 10px; }
.floor-note { grid-column: 1 / -1; margin: 0; }
.building-delete { align-items: center; margin-top: 8px; }
.building-delete button { color: #b42318; border-color: #b42318; width: auto; margin-top: 0; }
.building-delete button:disabled { color: var(--muted); border-color: var(--border); }
@media (max-width: 560px) {
  .floor-row { grid-template-columns: 1fr 1fr; }
}

/* Route preferences */
.via-list { padding-left: 24px; display: grid; gap: 8px; margin: 8px 0 12px; }
.via-list.read-only { gap: 4px; }
.preview-row { margin-top: 12px; }
.route-preview { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.preview-steps { padding-left: 24px; display: grid; gap: 8px; }
.preview-steps li > * { vertical-align: middle; }
.preview-steps img { display: inline-block; width: 64px; height: 48px; object-fit: cover; border-radius: 6px; margin-right: 8px; }
.card .row-actions button { width: auto; }

/* Network editor */
.stat { text-decoration: none; color: var(--text); }
.stat.warn { border-color: var(--brass); }
.stat.warn .stat-value { color: var(--brass); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.filters select, .filters input { flex: 1 1 180px; width: auto; }
.link-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.link-list li { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; }
.link-list img, .thumb-empty { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); }
.link-list li > div { display: grid; gap: 4px; min-width: 0; }
.small-link { font-size: 0.85rem; }
.plain-list { padding-left: 18px; }
.arrow-editor .image-preview { display: block; text-align: center; min-height: 0; }
.arrow-stage { position: relative; display: inline-block; max-width: 100%; }
.arrow-stage img { max-width: 100%; max-height: 420px; width: auto; cursor: crosshair; }
.arrow-editor .walk-rotate { margin: 8px 0; }
.card.danger { border-color: #b42318; }
.card.danger button { color: #b42318; border-color: #b42318; width: auto; margin-top: 8px; }
code { font-size: 0.9em; background: var(--bg); padding: 1px 6px; border-radius: 4px; }

/* Walk mode */
.walk-sync { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; background: var(--bg); font-size: 0.9rem; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.walk-sync .ok { color: var(--accent); }
.walk-sync .waiting { font-weight: 600; }
.walk-sync .notice { width: 100%; margin: 4px 0 0; }
.walk-actions { display: grid; gap: 10px; margin-top: 20px; }
.walk-actions button, .walk-wide { width: 100%; }
.walk-wide { margin: 8px 0 16px; }
.walk-big { min-height: 96px; font-size: 1.4rem; }
.walk-timer { font-family: var(--f-mono); font-size: 4rem; font-weight: 500; text-align: center; margin: 24px 0; font-variant-numeric: tabular-nums; }
.walk-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.walk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.walk-list button { width: 100%; text-align: left; display: grid; justify-items: start; gap: 2px; padding: 12px 14px; border-radius: var(--radius); }
.walk-list .muted { font-size: 0.85rem; }
.walk-camera { width: 100%; text-align: center; font-weight: 600; }
.walk-preview { position: relative; margin-top: 10px; border-radius: var(--radius); overflow: hidden; }
.walk-preview img { width: 100%; cursor: crosshair; }
.walk-rotate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.walk-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
.walk-seg label { margin: 0; font-weight: 500; }
.walk-seg input { position: absolute; opacity: 0; pointer-events: none; }
.walk-seg span { display: block; text-align: center; padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.walk-seg input:checked + span { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.walk-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.walk-cy { margin-top: 8px; }
.walk-cy summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.walk-cy input, .walk-cy textarea { margin-top: 8px; }
.hours-list { margin-bottom: 16px; }
@media (max-width: 560px) {
  .table, .table tbody, .table tr, .table td { display: block; }
  .table thead { display: none; }
  .table tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .table td { border: 0; padding: 2px 0; }
  /* The column headings are hidden here, so each cell shows its own. */
  .table td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 12em;
    margin-right: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* Merge points */
.merge-pair { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.merge-pair .card { margin-top: 0; }
.merge-pair img { border-radius: var(--radius); max-height: 180px; object-fit: cover; width: 100%; }

/* Locked door with an intercom, on a route step */
.intercom { margin: 4px 0 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--notice); border-left: 4px solid var(--brass); }
.intercom p { margin: 4px 0; }
.intercom-title { font-weight: 700; }