/* layearth.css — THE ONE STYLESHEET of the whole map application: tokens, the app-shell the engine
 * owns, and the components the kit renders inside the two slots a layer gets. No layer ships CSS;
 * an app restyles everything by overriding the custom properties on `.lye-shell`.
 *
 * THE CONTRACT (see also the head of layers/_kit.js):
 *   regions   dock (layer menu + search)  ·  panel (the layer's slot)  ·  corner (legend slot +
 *             attribution)  ·  all inside the map container, all owned by the engine
 *   z-index   scrim 1 · overlay canvas 2 · MapLibre controls 3 · corner 10 · panel 20 · dock 30 ·
 *             panel on a phone 40 (full screen, above the sheet)
 *   breakpoint  >= 900px: dock is a left column, panel a card beside it that hugs its content
 *               <  900px: dock is a bottom sheet at three heights (peek / half / full), panel is
 *                         full screen with a back button, legend + attribution sit above the sheet
 *   safe-area every fixed edge adds env(safe-area-inset-*), so a notch or a home bar never
 *             covers a control
 */

.lye-shell {
  /* surfaces */
  --lye-bg: #0b0e14; --lye-bg2: #10141c; --lye-sunk: #131824; --lye-hover: #171d29;
  --lye-line: #1f2632; --lye-line2: #2b3444;
  /* ink */
  --lye-fg: #e9eef7; --lye-fg2: #c3ccd9; --lye-muted: #7f8ca1; --lye-faint: #56627a;
  --lye-accent: #9fb3c8; --lye-on-accent: #080c12;
  --lye-ok: #3ddc84; --lye-warn: #f0b232; --lye-bad: #e0525b; --lye-gold: #f2d24a;
  /* type */
  --lye-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lye-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* geometry */
  --lye-r: 12px; --lye-r-s: 8px; --lye-gap: 12px;
  --lye-dock-w: 264px; --lye-panel-w: 352px; --lye-peek: 64px;
  --lye-shadow: 0 10px 32px rgba(0, 0, 0, .45);
  --lye-sat: env(safe-area-inset-top, 0px); --lye-sab: env(safe-area-inset-bottom, 0px);
  --lye-sal: env(safe-area-inset-left, 0px); --lye-sar: env(safe-area-inset-right, 0px);

  position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden;
  font: 13px/1.45 var(--lye-font); color: var(--lye-fg);
  -webkit-font-smoothing: antialiased; color-scheme: dark;
}
.lye-shell [data-theme="dark"] {
  --lye-bg: #0b0e14; --lye-bg2: #10141c; --lye-sunk: #131824; --lye-hover: #171d29;
  --lye-line: #1f2632; --lye-line2: #2b3444;
  --lye-fg: #e9eef7; --lye-fg2: #c3ccd9; --lye-muted: #7f8ca1; --lye-faint: #56627a;
  --lye-on-accent: #080c12; --lye-shadow: 0 10px 32px rgba(0, 0, 0, .45); color-scheme: dark;
}
.lye-shell[data-theme="light"], .lye-shell [data-theme="light"] {
  --lye-bg: #ffffff; --lye-bg2: #f6f8fb; --lye-sunk: #eef1f6; --lye-hover: #eaeef5;
  --lye-line: #e2e7ef; --lye-line2: #cfd7e3;
  --lye-fg: #0f172a; --lye-fg2: #334155; --lye-muted: #64748b; --lye-faint: #94a3b8;
  --lye-on-accent: #ffffff; --lye-shadow: 0 10px 32px rgba(15, 23, 42, .14); color-scheme: light;
}
.lye-shell *, .lye-shell *::before, .lye-shell *::after { box-sizing: border-box; }
.lye-shell button, .lye-shell input { font: inherit; color: inherit; }
.lye-shell button { cursor: pointer; }
.lye-shell [hidden] { display: none !important; }
.lye-shell a { color: var(--lye-accent); text-decoration: none; }
.lye-shell a:hover { text-decoration: underline; }
/* a button-link keeps its own ink: `.lye-shell a` above is more specific than `.lye-btn`, and once
 * painted the label in the accent ON the accent background (an empty green button). */
.lye-shell ::-webkit-scrollbar { width: 9px; height: 9px; }
.lye-shell ::-webkit-scrollbar-thumb { background: var(--lye-line2); border: 3px solid var(--lye-bg); border-radius: 9px; }

/* ---- the layers under the shell: what the engine puts on the map itself ---- */
.lye-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; transition: opacity .35s ease, background-color .35s ease; }
.lye-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* ================================================================ the dock: the layer menu */
.lye-dock {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--lye-dock-w); z-index: 30;
  display: flex; flex-direction: column; pointer-events: auto;
  background: var(--lye-bg); border-right: 1px solid var(--lye-line);
  padding-top: var(--lye-sat); padding-left: var(--lye-sal);
  transition: transform .22s ease;
}
.lye-shell[data-dock="0"] .lye-dock { transform: translateX(-100%); }
.lye-dock-head { flex: 0 0 auto; padding: 14px 14px 10px; border-bottom: 1px solid var(--lye-line); }
.lye-brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.lye-brand b { font-size: 14px; letter-spacing: .04em; }
.lye-brand span { font-size: 11px; color: var(--lye-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lye-exits { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.lye-exit {
  display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: var(--lye-r-s);
  border: 1px solid var(--lye-line2); background: var(--lye-sunk); color: var(--lye-fg); text-align: left;
}
.lye-exit:hover { border-color: var(--lye-accent); color: var(--lye-accent); }
.lye-exit i { font-style: normal; opacity: .7; }
.lye-exit:not(:first-child) { font-size: 12px; padding: 6px 11px; opacity: .8; }

/* the one search box: filters the menu as you type, and asks for places */
.lye-search { position: relative; }
.lye-search svg { position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--lye-muted); pointer-events: none; }
.lye-in {
  width: 100%; padding: 8px 10px; border-radius: var(--lye-r-s); border: 1px solid var(--lye-line);
  background: var(--lye-sunk); color: var(--lye-fg); outline: none;
}
.lye-in:focus { border-color: var(--lye-accent); }
.lye-in::placeholder { color: var(--lye-muted); }
.lye-search .lye-in { padding-left: 30px; }
.lye-search-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--lye-muted); font-size: 15px; line-height: 1; }
.lye-search-x:hover { color: var(--lye-fg); background: var(--lye-hover); }

.lye-menu { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 6px 0 10px; }
.lye-group { position: sticky; top: 0; z-index: 1; padding: 10px 14px 4px; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--lye-muted); background: var(--lye-bg); }
.lye-tile {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 14px; border: 0; background: none;
  color: var(--lye-fg2); text-align: left; border-left: 2px solid transparent;
}
.lye-tile:hover { background: var(--lye-hover); color: var(--lye-fg); }
.lye-tile[aria-selected="true"] { color: var(--lye-fg); background: var(--lye-hover); border-left-color: var(--lye-accent); }
.lye-tile[data-busy="1"] { opacity: .55; cursor: progress; }
/* switched on (the dock is a set of toggles): a lit dot in the layer's own colour at the end of the row */
.lye-tile::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--lye-line2); }
.lye-tile[aria-pressed="true"]::after { background: var(--lye-tile-accent, var(--lye-accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lye-tile-accent, var(--lye-accent)) 25%, transparent); }
.lye-tile .lye-ico { --lye-accent: var(--lye-tile-accent, var(--lye-accent)); }
.lye-tile span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lye-tile small { font-size: 10px; color: var(--lye-muted); }
.lye-lock { color: var(--lye-gold); font-style: normal; font-size: 11px; }
.lye-ico { flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--lye-accent); }
.lye-ico svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lye-ico svg[fill="currentColor"], .lye-ico svg [fill="currentColor"] { fill: currentColor; stroke: none; }
.lye-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--lye-accent); }
.lye-place { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 14px; border: 0; background: none; color: var(--lye-fg2); text-align: left; }
.lye-place:hover { background: var(--lye-hover); color: var(--lye-fg); }
.lye-place b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lye-place span { display: block; font-size: 11px; color: var(--lye-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lye-empty { padding: 22px 14px; text-align: center; font-size: 12px; color: var(--lye-muted); line-height: 1.6; }
.lye-dock-foot { flex: 0 0 auto; padding: 8px 14px calc(10px + var(--lye-sab)); border-top: 1px solid var(--lye-line); font-size: 10.5px; color: var(--lye-muted); display: flex; justify-content: space-between; align-items: center; }

/* the handle that folds the dock away, and brings it back */
.lye-dock-tab {
  position: absolute; top: calc(var(--lye-gap) + var(--lye-sat)); left: calc(var(--lye-dock-w) + var(--lye-gap)); z-index: 31;
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px 0 9px; border-radius: 9px;
  border: 1px solid var(--lye-line2); background: var(--lye-bg); color: var(--lye-fg2); pointer-events: auto;
  box-shadow: var(--lye-shadow); transition: left .22s ease; font-size: 12px;
}
.lye-dock-tab:hover { color: var(--lye-fg); border-color: var(--lye-accent); }
.lye-dock-tab svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.lye-shell[data-dock="0"] .lye-dock-tab { left: calc(var(--lye-gap) + var(--lye-sal)); }
/* the row that says what is on: on a desktop only inside the menu; on a phone it is the peek bar */
.lye-now { display: none; }

/* ================================================================ the panel: the layer's slot */
.lye-panel {
  position: absolute; top: calc(var(--lye-gap) + 34px + 8px + var(--lye-sat)); left: calc(var(--lye-dock-w) + var(--lye-gap));
  width: var(--lye-panel-w); max-height: calc(100% - var(--lye-gap) * 2 - 42px - var(--lye-sat) - var(--lye-sab)); z-index: 20;
  display: none; flex-direction: column; pointer-events: auto;
  background: var(--lye-bg); border: 1px solid var(--lye-line2); border-radius: var(--lye-r); box-shadow: var(--lye-shadow);
  overflow: hidden; transition: left .22s ease;
}
.lye-shell[data-panel="1"] .lye-panel { display: flex; }
.lye-shell[data-dock="0"] .lye-panel { left: calc(var(--lye-gap) + var(--lye-sal)); }
.lye-panel-head { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 10px 10px 10px 13px; border-bottom: 1px solid var(--lye-line); }
.lye-panel-head .lye-ico { width: 24px; height: 24px; }
.lye-panel-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.lye-panel-title b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lye-count { font: 600 12.5px/1 var(--lye-mono); font-variant-numeric: tabular-nums; color: var(--lye-accent); }
.lye-count:empty { display: none; }
.lye-iconbtn { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; border: 1px solid transparent; background: none; color: var(--lye-muted); display: flex; align-items: center; justify-content: center; }
.lye-iconbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lye-iconbtn:hover { color: var(--lye-fg); background: var(--lye-hover); }
.lye-iconbtn:disabled { opacity: .35; cursor: default; }
.lye-iconbtn:disabled:hover { background: none; color: var(--lye-muted); }
.lye-back-m { display: none; }
.lye-slot { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.lye-slot:empty { display: none; }

/* ================================================================ the corner: legend + credits */
.lye-corner {
  position: absolute; right: calc(var(--lye-gap) + var(--lye-sar)); bottom: calc(var(--lye-gap) + var(--lye-sab)); z-index: 10;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; max-width: min(320px, 60%);
}
.lye-corner > * { pointer-events: auto; }
/* the legend: one card per layer that is on (the engine shows at most three, then a "+ N more" line),
 * stacked upwards in the corner; the column scrolls rather than climbing over the dock tab */
.lye-legend { display: none; width: 100%; min-width: 208px; max-height: calc(100vh - 150px); overflow: hidden auto; overscroll-behavior: contain; }
.lye-shell[data-legend="1"] .lye-legend { display: flex; flex-direction: column; gap: 6px; }
.lye-legend > [data-slots="legend"] { flex: 0 0 auto; gap: 6px; }
.lye-legend .lye-slot[data-layer] { flex: 0 0 auto; padding: 9px 12px 10px; border-radius: 10px; background: var(--lye-bg); border: 1px solid var(--lye-line2); box-shadow: var(--lye-shadow); }
.lye-legend-more { align-self: flex-end; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--lye-line2); background: var(--lye-bg); color: var(--lye-muted); font-size: 11px; }
.lye-legend-more:hover { color: var(--lye-fg); border-color: var(--lye-accent); }
.lye-attrib { font-size: 10.5px; color: var(--lye-muted); }
.lye-attrib .maplibregl-ctrl { margin: 0 !important; }
.lye-attrib .maplibregl-ctrl-attrib { background: var(--lye-bg) !important; color: var(--lye-muted) !important; border: 1px solid var(--lye-line) !important; border-radius: 8px !important; }
.lye-attrib .maplibregl-ctrl-attrib a { color: var(--lye-fg2) !important; }
.lye-attrib .maplibregl-ctrl-attrib-button { filter: invert(.8); }
.lye-shell[data-theme="light"] .lye-attrib .maplibregl-ctrl-attrib-button { filter: none; }

/* ================================================================ the kit: what a layer renders */
/* the list application */
.lye-app { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.lye-app-head { flex: 0 0 auto; padding: 10px 13px 10px; display: flex; flex-direction: column; gap: 9px; border-bottom: 1px solid var(--lye-line); }
.lye-app-head:empty { display: none; }
.lye-sub { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--lye-muted); min-width: 0; }
.lye-sub span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lye-live { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--lye-ok); box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: lye-pulse 2.4s ease-out infinite; }
.lye-live[data-stale="1"] { background: var(--lye-warn); animation: none; }
.lye-live[data-stale="2"] { background: var(--lye-bad); animation: none; }
@keyframes lye-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); } 70% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.lye-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lye-chips[data-scroll] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lye-chips[data-scroll]::-webkit-scrollbar { display: none; }
.lye-chip { flex: 0 0 auto; font-size: 11px; padding: 4px 10px; border-radius: 999px; background: var(--lye-sunk); color: var(--lye-muted); border: 1px solid transparent; white-space: nowrap; }
.lye-chip:hover { color: var(--lye-fg); }
.lye-chip[aria-pressed="true"] { color: var(--lye-on-accent); background: var(--lye-accent); font-weight: 600; }
.lye-chip.lye-end { margin-left: auto; }
.lye-tools:empty { display: none; }
.lye-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.lye-body[data-pad] { padding: 12px 13px; }
.lye-secth { position: sticky; top: 0; z-index: 1; padding: 9px 13px 5px; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--lye-muted); background: var(--lye-bg); }
.lye-row { display: flex; align-items: center; gap: 10px; padding: 8px 13px; cursor: pointer; border-left: 2px solid transparent; }
.lye-row:hover { background: var(--lye-hover); }
.lye-row[aria-selected="true"] { background: var(--lye-hover); border-left-color: var(--lye-accent); }
.lye-row:focus-visible { outline: 1px solid var(--lye-accent); outline-offset: -1px; }
.lye-main { min-width: 0; flex: 1; }
.lye-k { font: 600 12.5px/1.3 var(--lye-mono); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lye-v { margin-top: 1px; font-size: 11px; color: var(--lye-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lye-num { flex: 0 0 auto; text-align: right; font: 12px/1.25 var(--lye-mono); font-variant-numeric: tabular-nums; }
.lye-num small { display: block; font-size: 10px; color: var(--lye-muted); font-family: inherit; }
/* the detail screen, in flow, replacing the list until back is pressed */
.lye-app[data-detail="1"] > .lye-app-head, .lye-app[data-detail="1"] > .lye-body { display: none; }
.lye-detail { display: flex; flex-direction: column; min-height: 0; overflow: auto; animation: lye-in .16s ease; }
@keyframes lye-in { from { opacity: 0; transform: translateX(9px); } to { opacity: 1; transform: none; } }
.lye-back { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border: 0; background: none; color: var(--lye-muted); font-size: 11.5px; text-align: left; border-bottom: 1px solid var(--lye-line); }
.lye-back:hover { color: var(--lye-fg); }
.lye-hero { padding: 14px 13px 13px; border-bottom: 1px solid var(--lye-line); }
.lye-hero h2 { margin: 0; font: 650 21px/1.15 var(--lye-mono); letter-spacing: -.02em; overflow-wrap: anywhere; }
.lye-hero h2[data-small] { font-size: 16px; line-height: 1.3; }
.lye-hero p { margin: 4px 0 0; font-size: 11.5px; color: var(--lye-muted); }
.lye-hero p.lye-alert { color: var(--lye-bad); font-weight: 600; }
.lye-route { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.lye-port { min-width: 0; }
.lye-port b { display: block; font: 650 17px/1 var(--lye-mono); }
.lye-port span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--lye-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lye-arrow { flex: 1; height: 1px; background: var(--lye-line2); position: relative; }
.lye-arrow::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left-color: var(--lye-line2); }
.lye-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--lye-line); }
.lye-cell { background: var(--lye-bg); padding: 10px 13px; min-width: 0; }
.lye-cell b { display: block; font: 650 16px/1.15 var(--lye-mono); letter-spacing: -.01em; overflow-wrap: anywhere; }
.lye-cell span { display: block; margin-top: 3px; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--lye-muted); }
.lye-cell[data-wide] { grid-column: 1 / -1; }
.lye-note { padding: 11px 13px; font-size: 11.5px; line-height: 1.55; color: var(--lye-muted); border-top: 1px solid var(--lye-line); }
.lye-note b { color: var(--lye-fg); font-weight: 600; }
.lye-cross { margin: 0; padding: 10px 13px; border-top: 1px solid var(--lye-line); font-size: 11.5px; line-height: 1.5; color: var(--lye-muted); background: linear-gradient(90deg, color-mix(in srgb, var(--lye-accent) 12%, transparent), transparent 78%); }
.lye-cross b { color: var(--lye-fg); font-weight: 600; }
.lye-progress { height: 3px; border-radius: 2px; background: var(--lye-line2); margin-top: 10px; overflow: hidden; }
.lye-progress i { display: block; height: 100%; background: var(--lye-accent); transition: width .6s ease; }
.lye-split { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--lye-muted); margin-top: 6px; }

/* the readout: a field's one number, and where it was read */
.lye-read { padding: 12px 13px 12px; }
.lye-read .lye-title { margin-bottom: 4px; }
.lye-read-v { font: 600 26px/1.1 var(--lye-mono); letter-spacing: -.02em; }
.lye-read-x { margin-top: 3px; font-size: 11.5px; color: var(--lye-fg2); min-height: 1.4em; }
.lye-read-at { margin-top: 2px; font-size: 11px; color: var(--lye-muted); }
.lye-title { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--lye-muted); }

/* controls: transport bar, labelled range */
.lye-transport { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--lye-line); }
.lye-transport > div { flex: 1; min-width: 0; }
.lye-play { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--lye-line2); background: var(--lye-sunk); color: var(--lye-fg); font-size: 10px; display: flex; align-items: center; justify-content: center; }
.lye-play:hover { border-color: var(--lye-accent); color: var(--lye-accent); }
.lye-clock { margin-top: 5px; font: 11px/1 var(--lye-mono); font-variant-numeric: tabular-nums; color: var(--lye-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lye-scrub { width: 100%; height: 3px; -webkit-appearance: none; appearance: none; background: var(--lye-line2); border-radius: 3px; outline: none; margin: 0; display: block; }
.lye-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--lye-accent); cursor: pointer; border: 2px solid var(--lye-bg); }
.lye-scrub::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--lye-accent); cursor: pointer; border: 2px solid var(--lye-bg); }
.lye-range { display: flex; align-items: center; gap: 9px; font-size: 10.5px; color: var(--lye-muted); }
.lye-range .lye-scrub { flex: 1; }
.lye-range span { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.lye-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lye-kv .lye-k { font-size: 13px; }
.lye-itemlink { color: inherit; text-decoration: none; } .lye-itemlink:hover, .lye-itemlink:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.lye-stack { display: flex; flex-direction: column; gap: 9px; }
.lye-foot { font-size: 10.5px; color: var(--lye-faint); }
.lye-btn, .lye-shell a.lye-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 0; background: var(--lye-accent); color: var(--lye-on-accent); font-weight: 650; text-decoration: none !important; }
.lye-btn:hover { filter: brightness(1.08); }
.lye-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* the legend's own vocabulary */
.lye-legend .lye-title { margin-bottom: 6px; }
.lye-ramp { display: block; height: 6px; border-radius: 6px; }
.lye-ramp-l { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 10.5px; color: var(--lye-muted); font-variant-numeric: tabular-nums; }
.lye-sw { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: var(--lye-muted); margin-top: 5px; }
.lye-sw i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; margin-top: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.lye-sw i[data-line] { width: 14px; height: 3px; border-radius: 2px; margin-top: 6px; }
.lye-sw b { color: var(--lye-fg); font-weight: 600; }
.lye-legend .lye-foot { margin-top: 6px; }
.lye-legend .lye-chips { margin-top: 7px; }

/* ================================================================ the phone */
@media (max-width: 899px) {
  .lye-shell { --lye-gap: 10px; }
  .lye-dock-tab { display: none; }
  .lye-dock {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; height: var(--lye-peek); max-height: 100%;
    border-right: 0; border-top: 1px solid var(--lye-line2); border-radius: 16px 16px 0 0;
    padding-top: 0; padding-left: var(--lye-sal); padding-right: var(--lye-sar); padding-bottom: var(--lye-sab);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .35); transition: height .25s cubic-bezier(.2, .8, .2, 1);
    touch-action: none;
  }
  .lye-shell[data-dock="0"] .lye-dock { transform: none; }
  .lye-shell[data-sheet="half"] .lye-dock { height: 52%; }
  .lye-shell[data-sheet="full"] .lye-dock { height: calc(100% - var(--lye-sat) - 8px); }
  .lye-dock-grip { flex: 0 0 auto; display: block; width: 36px; height: 4px; margin: 7px auto 3px; border-radius: 2px; background: var(--lye-line2); }
  .lye-now { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: calc(var(--lye-peek) - 16px); padding: 0 8px 0 12px; }
  .lye-now .lye-ico { width: 26px; height: 26px; }
  .lye-now-t { flex: 1; min-width: 0; }
  .lye-now-t b { display: block; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lye-now-t span { display: block; font-size: 10.5px; color: var(--lye-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lye-now .lye-iconbtn { width: 44px; height: 44px; border: 1px solid var(--lye-line2); background: var(--lye-sunk); color: var(--lye-fg2); }
  .lye-now .lye-iconbtn[data-on="1"] { color: var(--lye-on-accent); background: var(--lye-accent); border-color: var(--lye-accent); }
  .lye-dock-head { padding: 4px 12px 10px; }
  .lye-brand, .lye-dock-foot { display: none; }
  .lye-exits { flex-direction: row; flex-wrap: wrap; }
  .lye-exit { flex: 1 1 auto; justify-content: center; }
  .lye-shell[data-sheet="peek"] .lye-dock-head, .lye-shell[data-sheet="peek"] .lye-menu { display: none; }
  .lye-menu { padding-bottom: 20px; }
  .lye-tile, .lye-place { padding: 9px 12px; }

  .lye-panel {
    top: 0; left: 0; right: 0; bottom: 0; width: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none; z-index: 40;
    padding-top: var(--lye-sat); padding-bottom: var(--lye-sab); transform: translateY(12px); opacity: 0; transition: transform .2s ease, opacity .2s ease;
  }
  .lye-shell[data-panel="1"] .lye-panel { display: flex; }
  .lye-shell[data-panel="1"][data-panel-open="1"] .lye-panel { transform: none; opacity: 1; }
  .lye-shell[data-panel="1"]:not([data-panel-open="1"]) .lye-panel { pointer-events: none; }
  .lye-back-m { display: flex; }
  .lye-panel-head { padding: 8px 10px 8px 6px; }
  .lye-body, .lye-detail { -webkit-overflow-scrolling: touch; }

  .lye-corner { bottom: calc(var(--lye-peek) + 10px + var(--lye-sab)); max-width: min(300px, 70%); }
  .lye-shell[data-sheet="half"] .lye-corner, .lye-shell[data-sheet="full"] .lye-corner { display: none; }
  .lye-legend { max-height: calc(100vh - var(--lye-peek) - 90px); }
  .lye-legend .lye-slot[data-layer] { padding: 8px 11px 9px; }
  /* on a phone a swatch's explanation doubles the card over the map; the colour and its name stay, the sentence is in the layer's page */
  .lye-legend .lye-sw-n { display: none; }
  /* a finger, not a cursor: every control is at least 44px on its short side (Apple HIG, WCAG 2.5.5) */
  .lye-iconbtn, .lye-play { width: 44px; height: 44px; }
  .lye-chip { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 14px; font-size: 12px; }
}
@media (min-width: 900px) {
  .lye-dock-grip { display: none; }
}

/* ================================================================ menu:false, the one-layer app */
.lye-shell[data-menu="0"] .lye-dock, .lye-shell[data-menu="0"] .lye-dock-tab { display: none !important; }
.lye-shell[data-menu="0"] .lye-panel { left: calc(var(--lye-gap) + var(--lye-sal)); }
@media (max-width: 899px) { .lye-shell[data-menu="0"] .lye-corner { bottom: calc(var(--lye-gap) + var(--lye-sab)); } }

/* ================================================================ float: a layer's controls ON the map */
.lye-float { position: absolute; inset: 0; z-index: 35; pointer-events: none; }
.lye-float > .lye-slot { position: absolute; inset: 0; display: block; }
@media (min-width: 900px) { .lye-shell[data-menu="1"][data-dock="1"] .lye-float { left: var(--lye-dock-w); } }

/* piratefly: two pills on top, one sheet from below */
.lye-pf { position: absolute; inset: 0; color: var(--lye-fg); font: 13px/1.4 var(--lye-font); }
.lye-pf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.lye-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lye-pf-top {
  position: absolute; top: calc(12px + var(--lye-sat)); left: 12px; right: 12px; display: flex; justify-content: center; gap: 8px;
  pointer-events: none; z-index: 2;
}
.lye-pf-pill {
  pointer-events: auto; display: flex; align-items: center; gap: 8px; min-width: 0; height: 50px; padding: 0 11px 0 6px;
  border-radius: 999px; border: 1px solid var(--lye-line2); background: color-mix(in srgb, var(--lye-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--lye-shadow); color: var(--lye-fg);
  text-align: left; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent;
}
.lye-pf-pill:hover { border-color: var(--lye-accent); }
.lye-pf-pill:active { transform: scale(.97); }
.lye-pf-pill:focus-visible, .lye-pf-x:focus-visible, .lye-pf-opt:focus-visible, .lye-pf-day:focus-visible, .lye-pf-cta:focus-visible { outline: 2px solid var(--lye-accent); outline-offset: 2px; }
.lye-pf-pill[aria-expanded="true"] { border-color: var(--lye-accent); }
.lye-pf-pill[aria-expanded="true"] > svg { transform: rotate(180deg); }
.lye-pf-pill > svg { width: 14px; height: 14px; color: var(--lye-muted); transition: transform .2s ease; }
.lye-pf-pill:first-child { flex: 0 1 auto; }
.lye-pf-pill[data-day] { flex: 0 0 auto; gap: 6px; padding: 0 10px 0 12px; }
.lye-pf-pill[data-day] .lye-pf-pt b { font-size: 13.5px; font-weight: 650; }
.lye-pf-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--lye-accent) 16%, transparent); color: var(--lye-accent);
}
.lye-pf-ico-s { width: 18px; height: 18px; background: none; color: var(--lye-fg2); }
.lye-pf-pt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.lye-pf-pt small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lye-accent); white-space: nowrap; }
.lye-pf-pt b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lye-pf[data-loading="1"] .lye-pf-pt small { color: var(--lye-muted); animation: lye-pf-pulse 1s ease-in-out infinite alternate; }
@keyframes lye-pf-pulse { from { opacity: .45; } to { opacity: 1; } }
.lye-pf-note {
  position: absolute; top: calc(70px + var(--lye-sat)); left: 50%; transform: translateX(-50%); margin: 0; max-width: calc(100% - 32px);
  padding: 8px 14px; border-radius: 999px; background: var(--lye-bg); border: 1px solid var(--lye-line2); box-shadow: var(--lye-shadow);
  font-size: 12.5px; color: var(--lye-fg2); text-align: center; pointer-events: auto;
}

.lye-pf-scrim { position: absolute; inset: 0; z-index: 1; background: rgba(8, 12, 20, .28); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.lye-pf[data-open="origin"] .lye-pf-scrim, .lye-pf[data-open="day"] .lye-pf-scrim { opacity: 1; pointer-events: auto; }

.lye-pf-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: min(62%, 560px); display: flex; flex-direction: column;
  background: var(--lye-bg); border-top: 1px solid var(--lye-line2); border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(8, 12, 20, .22); padding-bottom: var(--lye-sab); pointer-events: auto; outline: none; z-index: 3;
  transform: translateY(calc(100% + 30px)); visibility: hidden;
  transition: transform .42s cubic-bezier(.2, .9, .25, 1), visibility 0s linear .42s;
}
.lye-pf[data-open] .lye-pf-sheet { transform: translateY(0); visibility: visible; transition: transform .42s cubic-bezier(.2, .9, .25, 1), visibility 0s; }
.lye-pf-grip { flex: 0 0 auto; height: 26px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.lye-pf-grip i { width: 42px; height: 5px; border-radius: 3px; background: var(--lye-line2); }
.lye-pf-x {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; z-index: 1;
  background: var(--lye-sunk); color: var(--lye-fg2); display: flex; align-items: center; justify-content: center;
}
.lye-pf-x::after { content: ""; position: absolute; inset: -6px; }   /* a 48px target behind a 36px disc */
.lye-pf-x:hover { color: var(--lye-fg); background: var(--lye-hover); }
.lye-pf-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 18px 18px; -webkit-overflow-scrolling: touch; }

.lye-pf-fare { touch-action: none; padding-right: 40px; cursor: grab; }
.lye-pf-price { display: flex; align-items: center; gap: 10px; }
.lye-pf-price b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.lye-pf-tag { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.lye-pf-route { margin: 8px 0 2px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.lye-pf-route span { color: var(--lye-muted); font-weight: 500; }
.lye-pf-meta { margin: 0; font-size: 14px; color: var(--lye-fg2); }
.lye-pf-seen { margin: 4px 0 0; font-size: 12px; color: var(--lye-muted); }
.lye-pf-cta, .lye-shell a.lye-pf-cta {
  margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 14px;
  background: var(--lye-accent); color: var(--lye-on-accent); font-size: 15.5px; font-weight: 700; text-decoration: none;
  transition: transform .15s ease, filter .15s ease; -webkit-tap-highlight-color: transparent;
}
/* white on the light teal is 3.7:1; a darker shade of the same accent clears 4.5:1 */
.lye-pf[data-theme="light"] .lye-pf-cta { background: color-mix(in srgb, var(--lye-accent) 78%, #000); color: #fff; }
.lye-pf-cta:hover { filter: brightness(1.07); text-decoration: none !important; }
.lye-pf-cta:active { transform: scale(.98); }

.lye-pf-h { margin: 2px 44px 12px 0; font-size: 18px; font-weight: 750; letter-spacing: -.01em; touch-action: none; }
.lye-pf-in {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--lye-line2); background: var(--lye-sunk);
  color: var(--lye-fg); font-size: 16px; outline: none; -webkit-appearance: none; appearance: none;
}
.lye-pf-in:focus { border-color: var(--lye-accent); }
.lye-pf-list { display: flex; flex-direction: column; margin-top: 8px; }
.lye-pf-g { margin: 12px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lye-muted); }
.lye-pf-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 7px 8px; border: 0; border-radius: 12px;
  background: none; color: var(--lye-fg); text-align: left; -webkit-tap-highlight-color: transparent;
}
.lye-pf-opt:hover { background: var(--lye-hover); }
.lye-pf-opt[aria-current="true"] { background: color-mix(in srgb, var(--lye-accent) 10%, transparent); }
.lye-pf-opt .lye-pf-ico { width: 38px; height: 38px; }
.lye-pf-ot { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lye-pf-ot b { font-size: 15px; font-weight: 650; }
.lye-pf-ot small { font-size: 12.5px; color: var(--lye-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lye-pf-ok { color: var(--lye-accent); display: flex; }
.lye-pf-sw { flex: 0 0 auto; width: 44px; height: 26px; border-radius: 13px; background: var(--lye-line2); position: relative; transition: background .2s ease; }
.lye-pf-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s ease; }
.lye-pf-switch[aria-pressed="true"] .lye-pf-sw { background: var(--lye-accent); }
.lye-pf-switch[aria-pressed="true"] .lye-pf-sw::after { transform: translateX(18px); }
.lye-pf-empty { margin: 14px 4px; color: var(--lye-muted); font-size: 13.5px; }
.lye-pf-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.lye-pf-day {
  min-height: 46px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--lye-line2); background: var(--lye-bg2);
  color: var(--lye-fg); font-size: 13.5px; font-weight: 600;
}
.lye-pf-day:hover { border-color: var(--lye-accent); }
.lye-pf-day[aria-pressed="true"] { background: var(--lye-accent); border-color: var(--lye-accent); color: var(--lye-on-accent); }
.lye-pf[data-theme="light"] .lye-pf-day[aria-pressed="true"] { background: color-mix(in srgb, var(--lye-accent) 78%, #000); color: #fff; }

/* a desk: the sheet is a card in the bottom-left corner, the pills stay centred */
@media (min-width: 900px) {
  .lye-pf-sheet { left: 16px; right: auto; bottom: 16px; width: 380px; max-height: min(70%, 560px); border: 1px solid var(--lye-line2); border-radius: 20px; box-shadow: var(--lye-shadow); }
  .lye-pf-sheet[data-mode="origin"], .lye-pf-sheet[data-mode="day"] { left: 50%; margin-left: -200px; width: 400px; top: 76px; bottom: auto; transform: translateY(-12px); opacity: 0; transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s; }
  .lye-pf[data-open] .lye-pf-sheet[data-mode="origin"], .lye-pf[data-open] .lye-pf-sheet[data-mode="day"] { transform: none; opacity: 1; transition: transform .25s ease, opacity .2s ease, visibility 0s; }
  .lye-pf-sheet[data-mode="origin"] .lye-pf-grip, .lye-pf-sheet[data-mode="day"] .lye-pf-grip { height: 14px; visibility: hidden; }
  .lye-pf-pt b { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) { .lye-pf *, .lye-pf-sheet { transition-duration: .01s !important; animation: none !important; } }

/* the sky view (layers/_sky.js): full screen above everything, outside the shell on purpose — it
   replaces the map while it is up, and the camera feed needs the whole screen */
.lye-skybtn { margin: 8px 0 0; }
.lye-sky { position: fixed; inset: 0; z-index: 2147483000; background: radial-gradient(120% 90% at 50% 100%, #1a2440 0%, #070a14 60%, #02030a 100%); color: #eef3ff; font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action: none; }
.lye-sky video { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lye-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lye-sky-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; background: linear-gradient(rgba(0,0,0,.55), transparent); }
.lye-sky-top span { flex: 1; text-shadow: 0 1px 3px #000; }
.lye-sky-x { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 24px; line-height: 1; }