/* Generated by scripts/build_web_assets.py; edit apps/ui-core/src. */

/*
 * Smart Bus shared visual foundation.
 * Authority: Nuanu Visual Identity V1.0 and docs/NUANU_BRAND_GUIDE.md.
 * Product classification: Brand Flexibility Level 01 (Fixed).
 */
@font-face {
  font-family: "Suisse Int'l";
  src: url("suisse-intl-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Int'l";
  src: url("suisse-intl-medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Int'l";
  src: url("suisse-intl-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --numeral-optical-inset: 2px;

  /* Fixed Nuanu core palette. */
  --brand-white: #ffffff;
  --brand-green: #1e5246;
  --brand-dark-green: #1d2b29;
  --brand-black: #000000;
  --brand-warm-neutral: #f3efe8;

  /* Distinct operational layers, shared by portal and bus (not gradients). */
  --ui-canvas: color-mix(in srgb, var(--brand-green) 9%, var(--brand-white));
  --ui-section: color-mix(in srgb, var(--brand-green) 3%, var(--brand-white));
  --ui-paper: var(--brand-white);

  /* Approved Green → White canvas: broad and quiet; never a card fill. */
  --brand-canvas-gradient: radial-gradient(
    ellipse at top left,
    color-mix(in srgb, var(--brand-green) 18%, var(--brand-white)) 0%,
    color-mix(in srgb, var(--brand-green) 7%, var(--brand-white)) 48%,
    var(--brand-white) 100%
  );

  /* Product-semantic colors: never use these as general decoration. */
  --semantic-warning: #dc8b2b;
  --semantic-danger: #a54334;
  --semantic-nature: #263f3a;
  --semantic-nature-mid: #5e9d8e;
  --semantic-nature-light: #bcbca9;

  /* One bounded operational type scale across every Smart Bus page. */
  --font-family-ui: "Suisse Int'l", "Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 14px;
  --font-lg: 18px;
  --font-xl: 18px;
  --font-2xl: 22px;
  --font-hero: 22px;
  --font-input: 16px;

  /* The atlas translates the 2-based grid into a 4/8 px UI rhythm. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* One restrained radius family for controls and content vessels. */
  --radius-control: 12px;
  --radius-card: 20px;
  --radius-vessel: 24px;

  --touch-target-min: 44px;
  --control-target: var(--touch-target-min);
  --control-padding: 6px 10px;
  --icon-size: 18px;
  --map-marker-size: 28px;
}

/* Both applications use the same theme-specific operational layers. */
:root[data-theme="dark"],
:root[data-color-scheme="dark"] {
  --ui-canvas: var(--brand-dark-green);
  --ui-section: color-mix(in srgb, var(--brand-white) 4%, var(--brand-dark-green));
  --ui-paper: color-mix(in srgb, var(--brand-white) 8%, var(--brand-dark-green));
}

/* Compact mouse/keyboard density; hybrid devices keep the touch contract. */
@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
  :root {
    --control-target: 32px;
    --font-input: 14px;
    --icon-size: 16px;
    --map-marker-size: 24px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-family-ui);
}

button,
input,
select,
textarea {
  font: inherit;
}

button { cursor: pointer; }
body { font-size: var(--font-md); line-height: 1.4; }

/* Shared operational action hierarchy. */

.icon-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--control-target);
  height: var(--control-target);
  min-width: var(--control-target);
  min-height: var(--control-target);
  padding: 0;
  color: var(--muted, var(--brand-dark-green));
  background: var(--neutral, var(--brand-warm-neutral));
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-size: 22px;
  line-height: 1;
}

.icon-button:hover { color: var(--ink); background: var(--soft, var(--paper)); }
.primary,
.secondary,
.danger,
.danger-button,
.ghost,
.text-button {
  min-height: var(--control-target);
  min-width: var(--control-target);
  padding: var(--control-padding);
  border: 1px solid var(--line, rgba(29, 43, 41, .18));
  border-radius: var(--radius-control);
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.2;
}

.primary {
  color: var(--on-accent, var(--brand-white));
  background: var(--green, var(--brand-green));
  border-color: var(--green, var(--brand-green));
  box-shadow: none;
}

.primary:hover {
  background: var(--green-hover, var(--green-dark, var(--brand-dark-green)));
  border-color: var(--green-hover, var(--green-dark, var(--brand-dark-green)));
}

.secondary {
  color: var(--ink, var(--brand-dark-green));
  background: var(--paper, var(--brand-white));
}

.secondary:hover {
  border-color: var(--green, var(--brand-green));
}

.ghost,
.text-button {
  color: var(--muted, var(--brand-dark-green));
  background: transparent;
}

.text-button {
  border-color: transparent;
}

.danger {
  color: var(--danger-text, var(--danger, var(--semantic-danger)));
  background: transparent;
  border-color: color-mix(in srgb, var(--semantic-danger) 38%, transparent);
}

.danger-button {
  color: var(--brand-white);
  background: var(--danger, var(--semantic-danger));
  border-color: var(--danger, var(--semantic-danger));
  font-weight: 700;
}

.danger-button:hover {
  background: color-mix(in srgb, var(--danger, var(--semantic-danger)) 84%, black);
  border-color: color-mix(in srgb, var(--danger, var(--semantic-danger)) 84%, black);
}

.primary:disabled,
.secondary:disabled,
.danger:disabled,
.danger-button:disabled,
.ghost:disabled,
.text-button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

/* Shared form controls. Checkboxes, radios, ranges and file pickers stay feature-owned. */

.ui-field {
  width: 100%;
  min-height: var(--control-target);
  padding: 6px 10px;
  font-size: var(--font-input);
  color: var(--ink, var(--brand-dark-green));
  background: var(--paper, var(--brand-white));
  border: 1px solid var(--line, rgba(29, 43, 41, .18));
  border-radius: var(--radius-control);
  outline: none;
  line-height: 1.2;
}

.ui-field:focus {
  border-color: var(--green, var(--brand-green));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green, var(--brand-green)) 9%, transparent);
}

.ui-field:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.ui-field[readonly] {
  color: var(--muted, var(--brand-dark-green));
}

textarea.ui-field {
  line-height: 1.35;
}

/* Route colour and text stay separate so names retain contrast in both themes. */
.ui-color-choice{display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer}
.ui-color-choice>span{flex:1;min-width:0;overflow-wrap:anywhere}
.ui-color-choice::after{content:"";width:7px;height:7px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 3px 4px 6px}
.ui-route-dot{display:block;flex:0 0 12px;width:12px;height:12px;border-radius:50%;background:var(--route-color);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 20%,transparent)}
.ui-color-options{position:fixed;z-index:1000;overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:4px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-control);box-shadow:0 4px 16px #0002;font-size:var(--font-input);line-height:1.3;text-align:left}
.ui-color-options [role="option"]{display:flex;align-items:center;gap:8px;min-height:var(--control-target);padding:6px 8px;border-radius:var(--radius-small,8px);cursor:pointer}
.ui-color-options [role="option"]>span{min-width:0;overflow-wrap:anywhere}
.ui-color-options [aria-selected="true"]{font-weight:700}
.ui-color-options [aria-selected="true"]::after{content:"✓";margin-inline-start:auto;padding-inline-start:4px}
.ui-color-options :is([role="option"]:hover,.is-active){background:var(--soft);outline:1px solid var(--line);outline-offset:-1px}
.ui-color-options[hidden],.ui-route-dot[hidden]{display:none}

/* Brand-governed content vessels shared by Device and Portal pages. */

.device-shell .ui-card,
.portal-shell .ui-card {
  background: var(--paper, var(--brand-white));
  border: 1px solid color-mix(in srgb, var(--ink, var(--brand-dark-green)) 14%, transparent);
  border-radius: var(--radius-card);
  box-shadow: var(--atlas-shadow, 0 18px 48px rgba(29, 43, 41, .07));
}

/* Shared dialog frame. Feature classes keep ownership of width and body layout exceptions. */

.ui-dialog {
  width: min(var(--ui-dialog-width, 700px), calc(100% - 32px));
  max-height: calc(100dvh - 30px);
  padding: 0;
  overflow: auto;
  color: var(--ink, var(--brand-dark-green));
  background: var(--paper, var(--brand-white));
  border: 1px solid var(--structure-line, var(--line, rgba(29, 43, 41, .18)));
  border-radius: var(--radius-card);
  box-shadow: 0 30px 90px rgba(29, 43, 41, .28);
}

.ui-dialog--portal { --ui-dialog-width: 680px; }

.ui-dialog::backdrop {
  background: var(--backdrop, rgba(29, 43, 41, .58));
  backdrop-filter: blur(5px);
}

.ui-dialog .ui-dialog-head {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--paper, var(--brand-white));
  border-bottom: 1px solid var(--structure-line, var(--line, rgba(29, 43, 41, .18)));
}

.ui-dialog .ui-dialog-head h2 {
  font-size: var(--font-lg);
  line-height: 1.2;
}

.ui-dialog .ui-dialog-body { padding: 12px; }

.ui-dialog .ui-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  background: var(--paper, var(--brand-white));
  border-top: 1px solid var(--structure-line, var(--line, rgba(29, 43, 41, .18)));
  box-shadow: none;
}

.ui-dialog .ui-dialog-actions > :is(span, .form-state) { margin-right: auto; }

@media (max-width: 760px) {
  .ui-dialog--device {
    width: calc(100% - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 17px;
  }

}

@media (max-width: 600px) {
  .ui-dialog--portal {
    width: calc(100% - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 17px;
  }

}

/* Shared secondary workspace: side panel on desktop, modal sheet on mobile. */
.ui-panel-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; min-width:0; align-items:start; }
.ui-panel-workspace:has(> .ui-disclosure-panel[open]) { grid-template-columns:minmax(0,1fr) minmax(300px,420px); }
.ui-panel-content { grid-column:1; grid-row:1; min-width:0; }
.ui-disclosure-panel {
  position:sticky; top:calc(var(--portal-header-height,60px) + 12px);
  grid-column:2; grid-row:1; width:100%; min-width:0;
  max-width:none; max-height:calc(100dvh - var(--portal-header-height,60px) - 24px);
  margin:0; padding:0; overflow:hidden;
  color:var(--ink); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-card);
}
.ui-disclosure-panel[open] { display:flex; flex-direction:column; }
.ui-disclosure-panel::backdrop { background:rgba(29,43,41,.4); backdrop-filter:blur(3px); }
.ui-panel-head { flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); }
.ui-panel-head h2 { margin:0; font-size:var(--font-lg); }
.ui-panel-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:12px; }
.ui-panel-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
.ui-panel-toolbar > :first-child { margin-right:auto; min-width:0; }
@media(max-width:800px) {
  .ui-panel-workspace:has(> .ui-disclosure-panel[open]) { grid-template-columns:minmax(0,1fr); }
  .ui-disclosure-panel {
    position:fixed; inset:auto 8px 8px; width:auto;
    max-height:calc(100dvh - 16px);
    box-shadow:0 20px 60px rgba(29,43,41,.3);
  }
  .ui-disclosure-panel[open] { animation:ui-panel-enter .2s ease-out; }
  .ui-panel-head { padding-top:16px; }
  .ui-panel-head::before { content:""; position:absolute; top:6px; left:calc(50% - 18px); width:36px; height:3px; background:var(--line); border-radius:99px; }
  html:has(.ui-disclosure-panel:modal) { overflow:hidden; }
}
@keyframes ui-panel-enter { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
@media(prefers-reduced-motion:reduce) { .ui-disclosure-panel[open] { animation:none; } }

/* Segmented navigation. Layout remains page-owned; controls share one visual contract. */

.ui-segmented {
  padding: 3px;
  background: var(--ui-segmented-background, var(--neutral, var(--brand-warm-neutral)));
  border: 1px solid var(--line, rgba(29, 43, 41, .18));
  border-radius: var(--ui-segmented-radius, 12px);
}

.ui-segmented > .ui-tab {
  min-width: 0;
  min-height: var(--control-target);
  padding: var(--ui-tab-padding, 6px 10px);
  color: var(--muted, var(--brand-dark-green));
  background: transparent;
  border: 0;
  border-radius: var(--ui-tab-radius, 9px);
  font-size: var(--ui-tab-font-size, var(--font-sm));
  font-weight: var(--ui-tab-font-weight, 600);
  line-height: 1.2;
  text-decoration: none;
}

.ui-segmented > .ui-tab:is(.active, [aria-selected="true"], [aria-current="page"]) {
  color: var(--on-accent, var(--brand-white));
  background: var(--green, var(--brand-green));
  box-shadow: none;
}

.ui-segmented--workspace {
  --ui-segmented-background: color-mix(in srgb, var(--paper, var(--brand-white)) 70%, transparent);
  --ui-segmented-radius: 14px;
  --ui-tab-padding: 6px 10px;
  --ui-tab-radius: 10px;
  --ui-tab-font-size: 14px;
}

.ui-segmented--settings {
  --ui-segmented-background: color-mix(in srgb, var(--paper, var(--brand-white)) 75%, transparent);
  --ui-tab-padding: 7px 11px;
  --ui-tab-font-weight: 700;
}

.ui-segmented--range {
  --ui-tab-padding: 6px 10px;
  --ui-tab-radius: 8px;
  --ui-tab-font-size: 14px;
}

.ui-segmented--announcement {
  --ui-tab-padding: 7px 6px;
  --ui-tab-radius: 9px;
  --ui-tab-font-size: 13px;
  --ui-tab-font-weight: 700;
}

@media (max-width: 760px) {
  .ui-segmented--workspace {
    --ui-tab-padding: 7px 5px;
    --ui-tab-font-size: 13px;
  }
}

@media (max-width: 800px) {
  .ui-segmented--range {
    --ui-tab-padding: 8px 11px;
  }
}

@media (max-width: 360px) {
  .ui-segmented--workspace { --ui-tab-font-size: 12px; }
  .ui-segmented--range { --ui-tab-padding: 8px 9px; }
}

/* Reusable validation and transient notification feedback. */

.ui-form-state.ui-form-state {
  min-height: 16px;
  color: var(--muted, var(--brand-dark-green));
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.ui-form-state.ui-form-state.error {
  color: var(--danger, var(--semantic-danger));
}

.toast[role="status"] {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: min(420px, calc(100% - 36px));
  max-height: min(40dvh, 240px);
  padding: 12px 15px;
  overflow: auto;
  overflow-wrap: break-word;
  word-break: normal;
  color: var(--on-accent, var(--brand-white));
  background: var(--green, var(--brand-green));
  border-radius: 12px;
  box-shadow: var(--shadow, 0 18px 48px rgba(29, 43, 41, .16));
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: .2s ease;
}

.toast[role="status"].show {
  opacity: 1;
  transform: translateY(0);
}

.toast[role="status"].error {
  background: var(--danger, var(--semantic-danger));
}

body[data-mobile-view] .toast[role="status"] {
  padding: 13px 16px;
  transform: translateY(16px);
  transition-duration: .22s;
}

body[data-mobile-view] .toast[role="status"].show { transform: translateY(0); }

@media (max-width: 760px) {
  body[data-mobile-view] .toast[role="status"] {
    right: 9px;
    left: 9px;
    bottom: 9px;
    max-width: none;
  }
}

/* Reusable, brand-governed interface components. */

.ui-media-usage { display:flex; grid-column:2 / -1; flex-wrap:wrap; gap:4px; min-width:0; }
.ui-media-usage > span { display:block; max-width:100%; padding:2px 6px; color:var(--ink); background:color-mix(in srgb,var(--ink) 8%,transparent); border-radius:6px; font-size:var(--font-xs); line-height:1.4; overflow-wrap:anywhere; }

/* One counter geometry, including optical centering for Suisse numerals.
 * Multi-digit values grow into a pill instead of overflowing a fixed circle. */
.ui-count {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: var(--count-size, 24px);
  height: var(--count-size, 24px);
  padding: var(--numeral-optical-inset) 6px 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Canonical monitoring theme picker and shared appearance glyphs. */
.theme-picker {
  position: relative;
  z-index: 30;
  flex: 0 0 var(--control-target);
  width: var(--control-target);
  height: var(--control-target);
}

.theme-trigger {
  display: grid;
  place-items: center;
  width: var(--control-target);
  height: var(--control-target);
  padding: 0;
  color: var(--ink, var(--brand-dark-green));
  background: color-mix(in srgb, var(--brand-white) 58%, transparent);
  border: 1px solid var(--line, rgba(29, 43, 41, .18));
  border-radius: var(--radius-control);
}

.theme-trigger:hover,
.theme-trigger[aria-expanded="true"] {
  background: var(--soft, var(--brand-warm-neutral));
  border-color: var(--accent, var(--green, var(--brand-green)));
}

.theme-icon,
.theme-choice-icon {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--ink, var(--brand-dark-green));
}

.theme-icon {
  width: 16px;
  height: 16px;
}

.theme-choice-icon {
  justify-self: center;
  width: 30px;
  height: 30px;
  background: var(--paper, var(--brand-white));
  border: 1px solid var(--line, rgba(29, 43, 41, .18));
  border-radius: 10px;
}

.theme-icon::before,
.theme-choice-icon::before {
  content: "";
  display: block;
}

.theme-trigger[data-theme-icon="auto"] .theme-icon::before,
.theme-choice-icon.auto::before {
  content: "A";
  font-size: var(--font-md);
  font-weight: 700;
  line-height: 1;
}

.theme-trigger[data-theme-icon="light"] .theme-icon::before,
.theme-choice-icon.light::before {
  width: 13px;
  height: 13px;
  background: currentColor;
  clip-path: polygon(50% 0, 58% 35%, 85% 15%, 65% 42%, 100% 50%, 65% 58%, 85% 85%, 58% 65%, 50% 100%, 42% 65%, 15% 85%, 35% 58%, 0 50%, 35% 42%, 15% 15%, 42% 35%);
}

.theme-trigger[data-theme-icon="dark"] .theme-icon::before,
.theme-choice-icon.dark::before {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  padding: 6px;
  background: var(--theme-menu, rgba(255, 255, 255, .98));
  border: 1px solid var(--line, rgba(29, 43, 41, .18));
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(29, 43, 41, .22);
  backdrop-filter: blur(18px);
}

.theme-menu button {
  width: 100%;
  min-height: var(--control-target);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  color: var(--ink, var(--brand-dark-green));
  background: transparent;
  border: 0;
  border-radius: 11px;
  text-align: left;
}

.theme-menu button:hover,
.theme-menu button:focus-visible,
.theme-menu button.selected {
  background: var(--soft, var(--brand-warm-neutral));
}

.theme-menu button.selected {
  color: var(--accent, var(--green, var(--brand-green)));
}

.theme-choice-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.theme-choice-copy strong { font-size: var(--font-sm); }
.theme-choice-copy small {
  color: var(--muted, var(--brand-dark-green));
  font-size: var(--font-xs);
  font-weight: 500;
}

.theme-check {
  justify-self: center;
  font-size: var(--font-md);
  font-weight: 800;
  opacity: 0;
}

.ui-file-picker { min-width: 0; align-self: start; }
.ui-file-picker:not([open]) > .ui-file-options { display: none; }
.ui-file-picker > summary { cursor: pointer; overflow-wrap: anywhere; }
.ui-file-options { display: grid; gap: 0; max-height: min(280px, 40dvh); overflow: auto; overscroll-behavior: contain; margin-top: 4px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--paper); }
.ui-file-picker .ui-file-option { display: grid; gap: 4px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); background: var(--paper); text-align: left; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.ui-file-picker .ui-file-option:last-child { border-bottom: 0; }
.ui-file-option strong { font-size: var(--font-sm); }
.ui-file-option small { color: var(--muted); font-size: var(--font-xs); }
.ui-file-picker .ui-file-option:hover, .ui-file-picker .ui-file-option[aria-pressed="true"] { background: var(--green-soft); }
.ui-file-picker .ui-file-option:focus-visible, .ui-file-picker > summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.theme-menu button.selected .theme-check { opacity: 1; }
.login-page .login-card { position: relative; }
.login-theme-picker { position: absolute; top: 22px; right: 22px; }
.login-theme-picker .theme-menu { top: calc(100% + 6px); }
html[data-theme="dark"] .theme-menu { box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }

@media (max-width: 480px) {
  .theme-picker,
  .theme-trigger {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .login-theme-picker { top: 13px; right: 13px; }
  .theme-menu { width: min(220px, calc(100vw - 28px)); }
  .theme-picker:not(.login-theme-picker) .theme-menu {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Shared announcement timing summary and read-only map points. */
.stop-timing{grid-column:1/-1;min-width:0;padding:8px 0;font-size:var(--font-sm);overflow-wrap:anywhere}
.stop-timing p{margin:4px 0;color:var(--muted)}
.stop-timing ul{padding-left:20px;margin:4px 0}
.announcement-map-point,.announcement-legend{--phase-color:var(--green)}
.announcement-map-point[data-phase="approach"],.announcement-legend[data-phase="approach"]{--phase-color:var(--warning)}
.announcement-map-point[data-phase="departure"],.announcement-legend[data-phase="departure"]{--phase-color:var(--muted)}
.announcement-map-point circle{fill:var(--phase-color);stroke:var(--paper);stroke-width:2;vector-effect:non-scaling-stroke}
.announcement-map-point.triggered circle{stroke:var(--phase-color);stroke-width:5}
.announcement-map-point text{display:none;fill:var(--ink);stroke:var(--paper);stroke-width:3;paint-order:stroke;font-size:11px;font-weight:600}
.announcement-map-point.triggered text{display:block}
.announcement-legend-strip{display:flex;flex-wrap:wrap;gap:4px 12px;padding:4px 8px;font-size:var(--font-xs);color:var(--muted)}
.announcement-legend{display:inline-flex;align-items:center;gap:4px}
.announcement-legend[data-phase] i{width:8px;height:8px;border-radius:50%;background:var(--phase-color)}