/* HoloTwin shared UI · v0.1.9 (owner-approved design of 2026-11-02).
   One stylesheet for every HoloTwin digital twin. Everything is scoped under .ht-root; tokens are the only values a
   project may NOT override (there is no theming hook on purpose: four twins, one interface). */
.ht-root {
  --ht-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ht-text: #eef1f6; --ht-dim: #a9b2c3; --ht-faint: #7d8799;
  --ht-accent: #7cc4ff; --ht-accent-fill: rgba(124, 196, 255, 0.24); --ht-accent-strong: #2f8fe0;
  --ht-crit: #ff6b6b; --ht-warn: #ffb347; --ht-ok: #6fdc8c;
  --ht-glass: rgba(10, 12, 16, 0.62); --ht-glass-strong: rgba(10, 12, 16, 0.78); --ht-line: rgba(255, 255, 255, 0.14); --ht-hover: rgba(255, 255, 255, 0.08);
  --ht-blur: blur(16px) saturate(1.2); --ht-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
  --ht-r-pill: 999px; --ht-r-panel: 16px; --ht-r-card: 14px; --ht-r-btn: 10px;
  --ht-edge: 16px; --ht-bar-h: 52px; --ht-btn-h: 40px; --ht-touch: 44px; --ht-panel-w: min(360px, 42vw);
  --ht-ease: cubic-bezier(.2, .8, .2, 1); --ht-t: 240ms;
  --ht-top: max(var(--ht-edge), env(safe-area-inset-top, 0px)); --ht-right: max(var(--ht-edge), env(safe-area-inset-right, 0px));
  --ht-bottom: max(var(--ht-edge), env(safe-area-inset-bottom, 0px)); --ht-left: max(var(--ht-edge), env(safe-area-inset-left, 0px));
  position: fixed; inset: 0; pointer-events: none; z-index: 20; font-family: var(--ht-font); color: var(--ht-text); font-size: 14px; line-height: 1.35;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.ht-root * { box-sizing: border-box; }
.ht-root button { font: inherit; color: inherit; }
.ht-glass { background: var(--ht-glass); border: 1px solid var(--ht-line); -webkit-backdrop-filter: var(--ht-blur); backdrop-filter: var(--ht-blur); box-shadow: var(--ht-shadow); }
.ht-ico { width: 18px; height: 18px; flex: none; display: block; }

/* ---------------------------------------------------------------- quick access */
.ht-quick-launch { --ht-sal: env(safe-area-inset-left, 0px); position: absolute; left: var(--ht-sal); top: 50%; transform: translateY(-50%); width: 42px; height: auto; max-height: calc(100dvh - var(--ht-top) - var(--ht-bottom)); padding: 10px 4px 12px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; border: 1px solid var(--ht-line); border-radius: min(12px, calc(var(--ht-sal) * 100)) 12px 12px min(12px, calc(var(--ht-sal) * 100)); color: var(--ht-text); cursor: pointer; pointer-events: auto; transition: background var(--ht-t), width var(--ht-t); }
.ht-quick-launch[hidden] { display: none; }
.ht-quick-launch:hover, .ht-quick-launch[aria-expanded="true"] { width: 48px; background: var(--ht-glass-strong); }
.ht-quick-launch:focus-visible, .ht-quick-card:focus-visible, .ht-quick-drawer .ht-iconbtn:focus-visible { outline: 2px solid var(--ht-accent); outline-offset: 2px; }
.ht-quick-icon { color: var(--ht-accent); }
.ht-quick-icon svg { width: 16px; height: 16px; transform: rotate(180deg); }
.ht-quick-label { display: flex; flex-direction: column; align-items: center; font-size: 12px; line-height: 14px; font-weight: 700; }
.ht-quick-label b { display: block; font-weight: inherit; }
.ht-quick-gap { display: block; height: 9px; }
.ht-quick-drawer { position: absolute; left: calc(52px + env(safe-area-inset-left, 0px)); top: calc(50% + (var(--ht-top) - var(--ht-bottom)) / 2); bottom: auto; width: min(310px, calc(100vw - 72px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); height: min(620px, calc(100dvh - var(--ht-top) - var(--ht-bottom) - var(--ht-bar-h) - 36px)); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ht-r-panel); pointer-events: auto; transform: translateY(-50%); }
.ht-quick-drawer > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px 12px; border-bottom: 1px solid var(--ht-line); }
.ht-quick-drawer h2 { margin: 0; font-size: 17px; font-weight: 650; }
.ht-quick-drawer header p { margin: 2px 0 0; color: var(--ht-dim); font-size: 11px; }
.ht-quick-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.ht-quick-group { flex: none; margin: 5px 2px -4px; color: var(--ht-dim); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ht-quick-card { flex: none; width: 100%; padding: 0; border: 1px solid var(--ht-line); border-radius: 11px; overflow: hidden; background: rgba(255,255,255,.035); color: var(--ht-text); cursor: pointer; text-align: left; transition: border-color var(--ht-t), background var(--ht-t), transform var(--ht-t); }
.ht-quick-card:hover { border-color: rgba(124,196,255,.65); background: rgba(255,255,255,.075); transform: translateY(-1px); }
.ht-quick-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #171c23; }
.ht-quick-card > span { display: block; padding: 9px 11px 10px; font-size: 13px; font-weight: 600; }
.ht-quick-empty { margin: 8px; color: var(--ht-dim); font-size: 13px; }
@media (max-height: 560px) { .ht-quick-launch { padding: 6px 4px 8px; gap: 4px; } .ht-quick-label { font-size: 10px; line-height: 12px; } .ht-quick-gap { height: 6px; } .ht-quick-icon svg { width: 13px; height: 13px; } .ht-quick-drawer { height: calc(100dvh - var(--ht-top) - var(--ht-bottom) - var(--ht-bar-h) - 64px); } }
@media (max-width: 700px) { .ht-quick-launch { width: 38px; } .ht-quick-drawer { left: calc(46px + env(safe-area-inset-left, 0px)); width: min(300px, calc(100vw - 62px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); } }
/* short screens: thumbnail beside its title, so several destinations show at once and no card is taller than the list */
@media (max-height: 560px) { .ht-quick-drawer > header { padding: 8px 12px 8px; } .ht-quick-drawer header p { display: none; } .ht-quick-list { padding: 8px; gap: 8px; } .ht-quick-card { display: flex; align-items: center; } .ht-quick-card img { width: 104px; flex: none; } .ht-quick-card > span { padding: 6px 10px; font-size: 12.5px; } }
@media (pointer: coarse) { .ht-quick-launch { min-height: 44px; } .ht-quick-drawer .ht-iconbtn { min-width: 44px; min-height: 44px; } .ht-quick-card { min-height: 44px; } }

/* ---------------------------------------------------------------- header */
.ht-brand { position: absolute; left: var(--ht-left); top: var(--ht-top); display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 10px; border-radius: 14px; pointer-events: auto; max-width: calc(100vw - 2 * var(--ht-edge) - 64px); }
.ht-brand img { height: 30px; width: auto; display: block; }
.ht-brand .ht-sep { width: 1px; align-self: stretch; background: var(--ht-line); }
.ht-brand .ht-name { display: flex; flex-direction: column; min-width: 0; }
.ht-brand b { font-size: 15px; font-weight: 650; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-brand small { font-size: 11.5px; color: var(--ht-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- More button */
.ht-more { all: unset; box-sizing: border-box; background: var(--ht-glass); border: 1px solid var(--ht-line); -webkit-backdrop-filter: var(--ht-blur); backdrop-filter: var(--ht-blur); box-shadow: var(--ht-shadow); color: var(--ht-text); position: absolute; right: var(--ht-right); top: var(--ht-top); width: var(--ht-touch); height: var(--ht-touch); border-radius: 50%; display: grid; place-items: center; cursor: pointer; pointer-events: auto; }
.ht-more:hover { background: var(--ht-glass-strong); }
.ht-more[aria-expanded="true"] { background: var(--ht-accent-fill); border-color: var(--ht-accent); }
.ht-more .ht-ico { width: 20px; height: 20px; }
.ht-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ht-crit); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.ht-badge[hidden] { display: none; }

/* ---------------------------------------------------------------- utility panel (mounted only while open) */
.ht-panel { position: absolute; right: var(--ht-right); top: calc(var(--ht-top) + 56px); bottom: calc(var(--ht-bottom) + var(--ht-bar-h) + 14px); width: var(--ht-panel-w); border-radius: var(--ht-r-panel); display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;
  transform: translateX(0); opacity: 1; transition: transform var(--ht-t) var(--ht-ease), opacity var(--ht-t) var(--ht-ease); }
.ht-panel.ht-enter, .ht-panel.ht-leave { transform: translateX(24px); opacity: 0; }
.ht-panel.ht-leave { pointer-events: none; }
.ht-panel > header { display: flex; align-items: center; gap: 6px; padding: 10px 8px 8px 16px; min-height: 52px; }
.ht-panel > header h2 { flex: 1; margin: 0; font-size: 15px; font-weight: 650; }
.ht-iconbtn { all: unset; box-sizing: border-box; width: 36px; height: 36px; border-radius: var(--ht-r-btn); display: grid; place-items: center; cursor: pointer; color: var(--ht-dim); }
.ht-iconbtn:hover { background: var(--ht-hover); color: var(--ht-text); }
.ht-iconbtn:focus-visible, .ht-row:focus-visible, .ht-nav button:focus-visible, .ht-btn:focus-visible, .ht-more:focus-visible { outline: 2px solid var(--ht-accent); outline-offset: 2px; }
.ht-back { all: unset; cursor: pointer; font-size: 12.5px; color: var(--ht-accent); padding: 4px 6px; border-radius: 8px; }
.ht-panel .ht-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 2px 10px 12px; }
.ht-section { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ht-faint); padding: 12px 8px 4px; }
.ht-row { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; min-height: var(--ht-touch); border-radius: 12px; cursor: pointer; }
.ht-row:hover { background: var(--ht-hover); }
.ht-row[aria-disabled="true"] { opacity: .45; cursor: default; }
.ht-row .ht-ico { color: var(--ht-dim); }
.ht-row .ht-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ht-row .ht-t b { font-weight: 600; font-size: 13.5px; }
.ht-row .ht-t small { font-size: 11.5px; color: var(--ht-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-row .ht-r { font-size: 12px; color: var(--ht-dim); display: flex; align-items: center; gap: 6px; }
.ht-row .ht-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ht-crit); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.ht-switch { width: 34px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, .18); position: relative; transition: background var(--ht-t); }
.ht-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--ht-t) var(--ht-ease); }
.ht-row[aria-pressed="true"] .ht-switch { background: var(--ht-accent-strong); }
.ht-row[aria-pressed="true"] .ht-switch::after { transform: translateX(14px); }
.ht-seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--ht-r-pill); background: rgba(255, 255, 255, .08); }
.ht-seg button { all: unset; cursor: pointer; padding: 3px 9px; border-radius: var(--ht-r-pill); font-size: 12px; color: var(--ht-dim); }
.ht-seg button[aria-pressed="true"] { background: var(--ht-accent-fill); color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------- bottom dock: status chip · destination card / walk bar · navigation */
.ht-dock { position: absolute; left: 50%; bottom: var(--ht-bottom); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 2 * var(--ht-edge)); }
.ht-chip { pointer-events: none; font-size: 12.5px; padding: 6px 12px; border-radius: var(--ht-r-pill); color: var(--ht-text); }
.ht-chip:empty, .ht-chip[hidden] { display: none; }
.ht-nav { display: flex; align-items: center; gap: 4px; height: var(--ht-bar-h); padding: 5px; border-radius: var(--ht-r-pill); pointer-events: auto; }
.ht-nav .ht-group { display: flex; gap: 2px; }
.ht-nav .ht-div { width: 1px; height: 24px; background: var(--ht-line); margin: 0 4px; }
.ht-nav button { all: unset; box-sizing: border-box; cursor: pointer; height: var(--ht-btn-h); padding: 0 14px; border-radius: var(--ht-r-pill); display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 550; color: var(--ht-dim); white-space: nowrap; }
.ht-nav button .ht-ico { width: 17px; height: 17px; }
.ht-nav button:hover { color: var(--ht-text); background: var(--ht-hover); }
.ht-nav button[aria-pressed="true"] { background: var(--ht-accent-fill); color: #fff; font-weight: 650; }
.ht-card, .ht-walkbar { pointer-events: auto; border-radius: var(--ht-r-card); }
.ht-card[hidden], .ht-walkbar[hidden] { display: none; }
.ht-card { width: min(440px, calc(100vw - 2 * var(--ht-edge))); padding: 12px 12px 12px 16px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.ht-card h3 { margin: 0; font-size: 15px; font-weight: 650; }
.ht-card .ht-sub { grid-column: 1; font-size: 12px; color: var(--ht-dim); }
.ht-card .ht-iconbtn { grid-row: 1 / span 2; grid-column: 2; align-self: start; }
.ht-card .ht-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 10px; }
.ht-card .ht-note { grid-column: 1 / -1; margin-top: 8px; font-size: 12px; color: var(--ht-dim); }
.ht-card .ht-note:empty { display: none; }
.ht-link { all: unset; grid-column: 1 / -1; justify-self: start; margin-top: 6px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ht-accent); }
.ht-btn { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; height: var(--ht-btn-h); padding: 0 14px; border-radius: var(--ht-r-btn); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 650; border: 1px solid var(--ht-line); background: rgba(255, 255, 255, .06); }
.ht-btn:hover { background: rgba(255, 255, 255, .12); }
.ht-btn.ht-primary { background: var(--ht-accent); border-color: var(--ht-accent); color: #04121f; }
.ht-btn.ht-primary:hover { filter: brightness(1.08); }
.ht-btn:disabled, .ht-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; filter: none; }
.ht-walkbar { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; height: var(--ht-bar-h); }
.ht-walkbar .ht-wl { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; margin-right: 4px; }
.ht-walkbar .ht-wl b { font-weight: 650; }
.ht-walkbar .ht-btn { flex: none; height: 38px; padding: 0 12px; }
.ht-walkbar .ht-seg { margin-left: 4px; }

/* the dock never moves; the panel stops above the bottom bar. A destination card / walk bar that would sit UNDER an open panel is
   suspended (hidden) while that panel is open and returns when it closes (holotwin-ui.js: suspendUnderPanel) */
.ht-card.ht-suspended, .ht-walkbar.ht-suspended, .ht-chip.ht-suspended { visibility: hidden; pointer-events: none; }
@media (pointer: coarse) { .ht-walkbar .ht-seg button { min-height: var(--ht-touch); min-width: 40px; } .ht-back { display: inline-flex; align-items: center; min-height: var(--ht-touch); min-width: var(--ht-touch); padding: 0 8px; box-sizing: border-box; } .ht-panel .ht-body button:not(.ht-row) { min-height: var(--ht-touch); min-width: var(--ht-touch); box-sizing: border-box; } }

/* ---------------------------------------------------------------- dialog (Help, Offline Demo, wide project content) - mounted only while open */
.ht-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); pointer-events: auto; opacity: 1; transition: opacity var(--ht-t); }
.ht-dialog { --ht-sa-w: calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)); --ht-sa-h: calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)); position: absolute; left: calc(50% + (env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) / 2); top: calc(50% + (env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 2); transform: translate(-50%, -50%); width: min(980px, calc(100vw - 48px - var(--ht-sa-w))); height: min(760px, calc(100vh - 48px - var(--ht-sa-h))); height: min(760px, calc(100dvh - 48px - var(--ht-sa-h))); border-radius: var(--ht-r-panel); display: flex; flex-direction: column; overflow: hidden; pointer-events: auto; background: var(--ht-glass-strong);
  opacity: 1; transition: opacity var(--ht-t) var(--ht-ease), transform var(--ht-t) var(--ht-ease); }
.ht-dialog > header { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 18px; min-height: 54px; border-bottom: 1px solid var(--ht-line); }
.ht-dialog > header h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 650; }
.ht-dialog .ht-dbody { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ht-dialog.ht-enter, .ht-dialog.ht-leave { opacity: 0; transform: translate(-50%, -48%); } .ht-scrim.ht-enter, .ht-scrim.ht-leave { opacity: 0; }
@media (max-height: 560px) { .ht-dialog { width: calc(100vw - 20px - var(--ht-sa-w)); height: calc(100vh - 20px - var(--ht-sa-h)); height: calc(100dvh - 20px - var(--ht-sa-h)); } }

/* the toast keeps clear of an open panel (it re-centres in the free space; text wraps) */
.ht-root.ht-has-panel .ht-toast { left: calc((100vw - var(--ht-panel-w) - var(--ht-right)) / 2); max-width: calc(100vw - var(--ht-panel-w) - var(--ht-right) - 3 * var(--ht-edge)); }

/* dialog content: shared typography so Help / Offline / project pages read the same in every twin (projects add layout, not colours) */
.ht-dialog .ht-dbody { color: var(--ht-text); font-size: 14px; line-height: 1.55; background: transparent; }
.ht-dialog .ht-dbody :where(h1, h2, h3, h4) { color: var(--ht-text); font-weight: 650; line-height: 1.3; margin: 16px 0 6px; } .ht-dialog .ht-dbody :where(h2) { font-size: 18px; } .ht-dialog .ht-dbody :where(h3) { font-size: 15px; }
.ht-dialog .ht-dbody :where(p, li) { color: var(--ht-text); } .ht-dialog .ht-dbody :where(small, .note) { color: var(--ht-dim); }
.ht-dialog .ht-dbody :where(a) { color: var(--ht-accent); } .ht-dialog .ht-dbody :where(img) { max-width: 100%; border-radius: 10px; border: 1px solid var(--ht-line); }
.ht-dialog .ht-dbody :where(input[type="search"], input[type="text"]) { font: inherit; color: var(--ht-text); background: rgba(255, 255, 255, .06); border: 1px solid var(--ht-line); border-radius: var(--ht-r-btn); padding: 8px 10px; }
.ht-dialog .ht-dbody :where(mark) { background: var(--ht-accent-fill); color: inherit; border-radius: 3px; }

/* guided tour (mounted only while running) */
.ht-tour { position: absolute; inset: 0; pointer-events: auto; }
.ht-hole { position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); border: 2px solid var(--ht-accent); transition: all var(--ht-t) var(--ht-ease); pointer-events: none; }
.ht-tourcard { position: absolute; width: min(340px, calc(100vw - 24px)); padding: 14px 16px; border-radius: var(--ht-r-card); background: var(--ht-glass-strong); }
.ht-tourcard .ht-tstep { font-size: 11px; color: var(--ht-dim); letter-spacing: .06em; } .ht-tourcard h3 { margin: 4px 0 6px; font-size: 15px; font-weight: 650; } .ht-tourcard p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ht-text); }
.ht-tourcard .ht-tactions { display: flex; gap: 8px; margin-top: 12px; } .ht-tourcard .ht-tactions .ht-btn { flex: 1; height: 36px; }

/* ---------------------------------------------------------------- footer + toast */
.ht-powered { position: absolute; right: var(--ht-right); bottom: var(--ht-bottom); display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; background: rgba(10, 12, 16, .45); text-decoration: none; pointer-events: auto; }
.ht-powered span { font-size: 10px; color: var(--ht-dim); letter-spacing: .03em; } .ht-powered img { height: 12px; width: auto; display: block; }
.ht-toast { position: absolute; left: 50%; top: calc(var(--ht-top) + 6px); transform: translateX(-50%); padding: 8px 14px; border-radius: var(--ht-r-pill); font-size: 13px; pointer-events: none; opacity: 0; transition: opacity var(--ht-t); max-width: min(560px, 80vw); text-align: center; }
.ht-toast.ht-on { opacity: 1; } .ht-toast.ht-bad { color: #ffc4c4; }

/* ---------------------------------------------------------------- compact (phones in landscape, short windows) */
@media (max-height: 560px) {
  .ht-root { --ht-edge: 10px; --ht-bar-h: 48px; --ht-btn-h: 38px; --ht-panel-w: min(320px, 46vw); }
  .ht-brand { padding: 5px 12px 5px 7px; gap: 9px; } .ht-brand img { height: 24px; } .ht-brand b { font-size: 13px; } .ht-brand small { font-size: 10px; }
  .ht-panel { top: calc(var(--ht-top) + 52px); bottom: calc(var(--ht-bottom) + var(--ht-bar-h) + 18px); }   /* never over the bottom bar */
  .ht-nav button { padding: 0 11px; font-size: 13px; }
  .ht-walkbar .ht-wl { max-width: 22vw; }
  /* compact destination card on short screens: one title line, small buttons - the scene stays visible */
  .ht-card { width: min(400px, calc(100vw - 2 * var(--ht-edge))); padding: 8px 8px 8px 12px; }
  .ht-card h3 { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ht-card .ht-sub { display: none; }
  .ht-card .ht-actions { margin-top: 6px; } .ht-card .ht-btn { height: 36px; } .ht-card .ht-note { margin-top: 4px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ht-card .ht-iconbtn { width: 32px; height: 32px; grid-row: 1; }
}
@media (max-width: 700px) { .ht-nav button span { display: none; } .ht-nav button { padding: 0 12px; } .ht-walkbar .ht-btn span { display: none; } }
@media (pointer: coarse) { .ht-root { --ht-bar-h: 56px; } .ht-nav button, .ht-btn, .ht-iconbtn { min-height: var(--ht-touch); min-width: var(--ht-touch); } .ht-nav { height: auto; } }
/* compact card on short touch screens (after the touch rule): 36 px close, 44 px actions, the note only when it explains a disabled action */
@media (max-height: 560px) and (pointer: coarse) { .ht-card .ht-iconbtn { min-width: 36px; min-height: 36px; width: 36px; height: 36px; } .ht-card .ht-btn { height: 44px; } }
@media (max-height: 560px) { .ht-card:not(:has(.ht-btn:disabled)) .ht-note { display: none; } }
/* narrow screens: Powered by moves above the bottom bar (it overlapped the bar at 734 px, iPhone 15 Pro landscape) */
@media (max-width: 899px) { .ht-powered { bottom: calc(var(--ht-bottom) + var(--ht-bar-h) + 10px); } }
/* the smallest phones: the card / walk bar spans the width, so Powered by steps aside while either is shown */
@media (max-width: 699px) { .ht-root:has(.ht-card:not([hidden])) .ht-powered, .ht-root:has(.ht-walkbar:not([hidden])) .ht-powered { display: none; } }
@media (max-width: 1023px) { .ht-root:has(.ht-walkbar:not([hidden])) .ht-powered { display: none; } }   /* the walk bar with its speed group reaches the badge up to this width */
@media (prefers-reduced-motion: reduce) { .ht-root * { transition: none !important; } }

/* portrait guard: one full-screen rotate message on touch devices (above everything in the UI) */
.ht-rotate { position: fixed; inset: 0; z-index: 100; pointer-events: auto; touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; background: #0b0e13; color: var(--ht-text); }
.ht-rotate[hidden] { display: none; }
.ht-rotate svg { width: 92px; height: 92px; color: var(--ht-accent); animation: ht-rotate 2.4s ease-in-out infinite; }
.ht-rotate h2 { margin: 0; font-size: 21px; font-weight: 600; }
.ht-rotate p { margin: 0; max-width: 290px; color: var(--ht-dim); font-size: 14px; line-height: 1.45; }
@keyframes ht-rotate { 0%, 25% { transform: rotate(0deg); } 60%, 100% { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .ht-rotate svg { animation: none; } }

/* data licence credit: bottom left on wide screens; below 960 px the project repeats it in the Map panel / Evidence */
.ht-credit { position: absolute; left: var(--ht-left, var(--ht-edge)); bottom: var(--ht-bottom); max-width: calc(50vw - 300px); padding: 5px 9px; border-radius: 8px; background: rgba(10, 12, 16, .45); font-size: 10px; line-height: 1.35; letter-spacing: .03em; color: var(--ht-dim); pointer-events: none; }
@media (max-width: 959px) { .ht-credit { display: none; } }