@font-face {
  font-family: "Helvetica Neue";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/HelveticaNeue-Roman.woff2") format("woff2");
}

@font-face {
  font-family: "Helvetica Neue";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url("assets/fonts/HelveticaNeue-Bold.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --bg: #f7faf7;
  --clear: #12a43a;
  --danger: #ef2f2f;
  --neutral: #919f98;
  --ink: #14211f;
  --logo-height: min(76px, calc((100vw - 60px) / 7.28));
  --brand-block-padding: 18px;
  --panel: rgba(255, 255, 255, 0.94);
  --top-offset: calc(112px + env(safe-area-inset-top));
  --bottom-offset: calc(24px + env(safe-area-inset-bottom));
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  position: fixed;
  width: 100%;
}

body {
  background: var(--bg);
  font-family: "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  margin: 0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  inset: 0;
  overflow: hidden;
  position: fixed;
}

.map-stage {
  background: #f7faf7;
  bottom: 0;
  cursor: grab;
  isolation: isolate;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  touch-action: none;
  top: var(--top-offset);
  user-select: none;
}

.map-stage:active {
  cursor: grabbing;
}

.app-version {
  bottom: calc(4px + env(safe-area-inset-bottom));
  color: rgba(20, 33, 31, 0.28);
  font-size: 9px;
  left: calc(6px + env(safe-area-inset-left));
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
  position: fixed;
  user-select: none;
  z-index: 5;
}

.map-content {
  left: 0;
  position: absolute;
  top: 0;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 0 0;
  z-index: 1;
}

.map-content--focusing {
  transition: transform 0.36s ease-out;
}

.map-svg {
  inset: 0;
  position: absolute;
}

.map-image,
.map-svg {
  display: block;
  height: 100%;
  width: 100%;
}

.map-image {
  inset: 0;
  object-fit: fill;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.map-roads {
  z-index: 3;
}

.map-areas {
  pointer-events: none;
  z-index: 2;
}

.map-cities {
  pointer-events: none;
  z-index: 4;
}

.map-svg path[stroke] {
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    opacity 0.2s ease,
    stroke 0.2s ease,
    stroke-width 0.2s ease;
}

.map-svg .road-clear {
  stroke: var(--clear);
  stroke-width: 26;
}

.map-svg .road-busy {
  stroke: var(--danger);
  stroke-width: 26;
}

.map-svg .road-neutral {
  stroke: var(--neutral);
  stroke-width: 20;
}

.map-svg .road-unselected {
  opacity: 0.28;
}

.map-membership-unselected {
  opacity: 0.28;
}

.map-membership-unavailable {
  opacity: 0.38;
}

.map-areas .map-membership-unselected {
  fill: transparent;
  opacity: 1;
}

.map-areas .map-membership-unavailable {
  fill: transparent;
  opacity: 0.45;
}

.map-area-selected,
.map-area-selected path,
.map-area-selected polygon,
.map-area-selected rect {
  fill: #e7ffdf;
}

.map-membership-selected {
  opacity: 1;
}

.map-svg .road-focus {
  animation: road-focus-pulse 1s ease-in-out 3;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 13px rgba(255, 190, 0, 0.95));
}

@keyframes road-focus-pulse {
  50% {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1))
      drop-shadow(0 0 20px rgba(255, 190, 0, 1));
  }
}

.map-svg .city-clear {
  fill: var(--clear);
}

.map-svg .city-busy {
  fill: var(--danger);
}

.brand-bar {
  align-items: flex-end;
  background:
    linear-gradient(180deg, rgba(0, 126, 70, 0.15), rgba(0, 56, 35, 0.18)),
    url("assets/ui/top-bar-bg.webp") center / cover;
  box-shadow: 0 8px 28px rgba(0, 53, 36, 0.2);
  display: flex;
  gap: 24px;
  height: var(--top-offset);
  justify-content: space-between;
  left: 0;
  padding: calc(var(--brand-block-padding) + env(safe-area-inset-top)) 18px
    var(--brand-block-padding);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 8;
}

.brand-logo-left-frame {
  flex-shrink: 0;
  height: var(--logo-height);
  overflow: hidden;
  width: calc(var(--logo-height) * 853 / 286);
}

.brand-logo-left {
  display: block;
  height: calc(var(--logo-height) * 320 / 286);
  max-width: none;
  width: calc(var(--logo-height) * 1197 / 286);
}

.logos-group {
  flex-shrink: 0;
  height: var(--logo-height);
  position: relative;
  width: calc(var(--logo-height) * 1224 / 285);
}

.brand-logos {
  display: block;
  height: 100%;
  width: 100%;
}

.brand-logo-link {
  bottom: 0;
  display: block;
  position: absolute;
  top: 0;
}

.brand-logo-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.primary-logo-link {
  left: 0;
  width: 72.55%;
}

.rtrs-logo-link {
  right: 0;
  width: 27.45%;
}

.top-actions {
  align-items: center;
  display: flex;
  gap: 18px;
  left: 24px;
  max-width: calc(100vw - 48px);
  position: fixed;
  top: calc(var(--top-offset) + 20px);
  z-index: 6;
}

.alerts-button {
  background: transparent;
  border: 0;
  display: block;
  height: 64px;
  padding: 0;
  width: 119px;
}

.alerts-button img {
  display: block;
  height: 100%;
  width: 100%;
}

.emergency-widget {
  aspect-ratio: 201 / 71;
  max-width: min(310px, 42vw);
  position: fixed;
  right: 24px;
  top: calc(var(--top-offset) + 20px);
  width: 310px;
  z-index: 6;
}

.emergency-panel {
  display: block;
  height: 100%;
  width: 100%;
}

.emergency-call {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.emergency-call img {
  display: block;
  height: 100%;
  width: 100%;
}

.alerts-panel {
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
  border: 1px solid rgba(20, 33, 31, 0.12);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(21, 49, 52, 0.2);
  color: var(--ink);
  left: 0;
  max-height: min(360px, calc(100dvh - var(--top-offset) - 118px));
  overflow: auto;
  overscroll-behavior: contain;
  position: absolute;
  touch-action: pan-y;
  top: 76px;
  width: min(340px, calc(100vw - 48px));
}

.alerts-header {
  align-items: center;
  border-bottom: 1px solid rgba(20, 33, 31, 0.1);
  display: flex;
  font-size: 14px;
  gap: 10px;
  justify-content: space-between;
  padding: 12px 14px;
}

.alerts-updated {
  align-items: baseline;
  color: #66736f;
  display: flex;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  justify-content: flex-end;
  text-align: right;
  white-space: nowrap;
}

.alerts-updated-age {
  margin-left: 0.35em;
}

.alerts-updated-age[hidden] {
  display: none;
}

.alerts-list {
  display: grid;
  gap: 1px;
}

.alert-item {
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 5px;
  padding: 12px 14px;
  text-align: left;
  width: 100%;
}

.alert-item:focus-visible {
  outline: 3px solid rgba(0, 126, 70, 0.45);
  outline-offset: -3px;
}

.alert-item--busy {
  background: rgba(239, 47, 47, 0.06);
}

.alert-item--clear {
  background: rgba(18, 164, 58, 0.06);
}

.alert-item strong {
  font-size: 14px;
}

.alert-item span {
  color: #65716c;
  font-size: 12px;
}

.alert-empty {
  color: #65716c;
  font-size: 14px;
  margin: 0;
  padding: 16px 14px;
}

.alert-warning {
  background: #fff4d6;
  color: #765b00;
  font-size: 13px;
  margin: 0;
  padding: 12px 14px;
}

@media (prefers-reduced-motion: reduce) {
  .map-content--focusing {
    transition: none;
  }

  .map-svg .road-focus {
    animation: none;
  }
}

.notification-modal {
  align-items: center;
  background: rgba(8, 20, 16, 0.7);
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 24;
}

.notification-modal:not([hidden]) {
  display: flex;
}

.notification-modal__dialog {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
  color: var(--ink);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: 24px 20px 20px;
  position: relative;
  width: min(430px, 100%);
}

.notification-modal__close {
  align-items: center;
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(20, 33, 31, 0.18);
  color: #31423c;
  display: flex;
  font-size: 28px;
  height: 42px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 3px;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 42px;
}

.notification-modal__header {
  padding-right: 48px;
}

.notification-modal__header > span {
  color: #008f45;
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.notification-modal__header h2 {
  color: #08763d;
  font-size: 28px;
  line-height: 1.02;
  margin: 5px 0 12px;
}

.notification-modal__header p {
  color: #5d6c66;
  font-size: 14px;
  line-height: 1.35;
  margin: 0;
}

.notification-modal__roads {
  display: grid;
  gap: 10px;
  margin: 18px 0 14px;
}

.notification-modal__status {
  color: #5d6c66;
  font-size: 13px;
  line-height: 1.35;
  margin: 14px 0 0;
}

.notification-road-option {
  align-items: center;
  border: 1px solid rgba(0, 152, 70, 0.24);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 66px;
  padding: 11px 13px;
}

.notification-road-option:focus-within {
  outline: 3px solid rgba(0, 152, 70, 0.2);
  outline-offset: 2px;
}

.notification-road-option.is-unavailable {
  background: #eef2f0;
  border-color: rgba(93, 108, 102, 0.2);
  cursor: not-allowed;
}

.notification-road-option.is-unavailable
  .notification-road-option__copy
  strong {
  color: #5d6c66;
}

.notification-road-option.is-unavailable .notification-road-option__switch {
  background: #c8d0cc;
}

.notification-road-option__copy {
  min-width: 0;
}

.notification-road-option__copy strong,
.notification-road-option__copy span {
  display: block;
}

.notification-road-option__copy strong {
  color: #08763d;
  font-size: 17px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.notification-road-option__copy span {
  color: #64726d;
  font-size: 11px;
  line-height: 1.25;
  margin-top: 3px;
}

.notification-road-option input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.notification-road-option__switch {
  background: #aeb9b4;
  border-radius: 999px;
  flex: 0 0 48px;
  height: 28px;
  position: relative;
  transition: background 0.18s ease;
}

.notification-road-option__switch::after {
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  content: "";
  height: 24px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 0.18s ease;
  width: 24px;
}

.notification-road-option input:checked + .notification-road-option__switch {
  background: #00a651;
}

.notification-road-option
  input:checked
  + .notification-road-option__switch::after {
  transform: translateX(20px);
}

.notification-modal__submit {
  background: #00a651;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  min-height: 52px;
  padding: 12px 18px;
  width: 100%;
}

.notification-modal__submit:disabled {
  background: #9ca8a3;
  cursor: not-allowed;
}

.bottom-actions {
  --bottom-action-height: 66px;
  --notification-icon-width-share: 13.62%;

  bottom: var(--bottom-offset);
  display: flex;
  gap: 7px;
  left: 50%;
  position: fixed;
  transform: translateX(-50%);
  width: min(410px, calc(100vw - 48px));
  z-index: 6;
}

.install-help-button {
  align-items: center;
  align-self: center;
  aspect-ratio: 1;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.42);
  border: 4px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(18, 52, 40, 0.1);
  color: rgba(23, 96, 57, 0.84);
  display: flex;
  flex: 0 0 var(--notification-icon-width-share);
  height: auto;
  justify-content: center;
  padding: 0;
}

.install-help-button svg {
  height: 48%;
  width: 48%;
}

.install-help-button[hidden] {
  display: none;
}

.notify-button {
  background: transparent;
  border: 0;
  display: block;
  flex: 1 1 auto;
  height: var(--bottom-action-height);
  min-width: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

.notify-button:disabled {
  cursor: progress;
}

.notify-button img {
  display: block;
  height: 100%;
  object-fit: fill;
  width: 100%;
}

.notify-button__pending {
  --notify-pending-background: #737c78;
  --notify-pending-foreground: #ffffff;

  display: none;
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.notify-button__pending::before {
  background: var(--notify-pending-background);
  border-radius: 999px;
  bottom: 9%;
  content: "";
  left: calc(var(--bottom-action-height) / 2);
  position: absolute;
  right: 0;
  top: 9%;
}

.notify-button__spinner {
  align-items: center;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  height: var(--bottom-action-height);
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: var(--bottom-action-height);
}

.notify-button__spinner::before {
  background: var(--notify-pending-background);
  border-radius: 50%;
  content: "";
  height: 82%;
  position: absolute;
  width: 82%;
}

.notify-button__spinner-mark {
  animation: notify-button-spin 760ms linear infinite;
  height: 44%;
  position: relative;
  width: 44%;
  z-index: 1;
}

.notify-button__spinner-track,
.notify-button__spinner-arc {
  fill: none;
  stroke-width: 4;
}

.notify-button__spinner-track {
  stroke: rgba(63, 74, 69, 0.2);
}

.notify-button__spinner-arc {
  stroke: var(--notify-pending-foreground);
  stroke-dasharray: 56 20;
  stroke-linecap: round;
}

.notify-button__progress {
  align-items: center;
  bottom: 0;
  color: var(--notify-pending-foreground);
  display: flex;
  font-size: 16px;
  font-weight: 700;
  justify-content: center;
  left: calc(var(--bottom-action-height) + 4px);
  line-height: 1.15;
  position: absolute;
  right: 5%;
  top: 0;
}

.notify-button[data-progress] img {
  visibility: hidden;
}

.notify-button[data-progress] .notify-button__pending {
  display: block;
}

@keyframes notify-button-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notify-button__spinner-mark {
    animation: none;
  }
}

.feedback-button {
  align-items: center;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(0, 152, 70, 0.16);
  border-radius: 999px 0 0 999px;
  bottom: calc(var(--bottom-offset) + 2px);
  box-shadow: 0 5px 14px rgba(18, 52, 40, 0.08);
  color: var(--ink);
  display: flex;
  gap: 8px;
  min-height: 62px;
  padding: 7px 8px 7px 26px;
  position: fixed;
  right: 0;
  text-align: left;
  width: 300px;
  z-index: 6;
}

.feedback-button__copy,
.feedback-button__copy strong,
.feedback-button__copy span {
  display: block;
}

.feedback-button__copy {
  flex: 1 1 auto;
}

.feedback-button__copy strong {
  color: #176039;
  font-size: 14px;
  line-height: 1.15;
}

.feedback-button__copy span {
  color: #536660;
  font-size: 12px;
  line-height: 1.2;
  margin-top: 3px;
}

.feedback-button__icon {
  align-items: center;
  background: rgba(0, 152, 70, 0.9);
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.feedback-button__icon svg {
  height: 20px;
  width: 20px;
}

@media (max-width: 1023px) {
  .feedback-button {
    bottom: calc(var(--bottom-offset) + 72px);
  }
}

.feedback-modal {
  align-items: flex-end;
  background: rgba(8, 20, 16, 0.4);
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 22;
}

.feedback-modal:not([hidden]) {
  display: flex;
}

.feedback-modal__dialog {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -16px 54px rgba(0, 0, 0, 0.18);
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: calc(100dvh - 38px);
  overflow: hidden;
  width: 100%;
}

.feedback-modal__header {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(228, 235, 231, 0.68);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 15px 16px;
}

.feedback-modal__heading,
.feedback-modal__heading strong,
.feedback-modal__heading span {
  display: block;
}

.feedback-modal__heading strong {
  font-size: 17px;
}

.feedback-modal__heading span {
  color: #60706b;
  font-size: 11px;
  margin-top: 3px;
}

.feedback-modal__close {
  align-items: center;
  background: #eef3f0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  display: flex;
  flex: 0 0 auto;
  font-size: 24px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  width: 40px;
}

.feedback-modal__body {
  background: rgba(247, 250, 248, 0.94);
  min-height: 0;
  padding: 0 12px 12px;
  position: relative;
}

.feedback-modal__loading {
  color: #60706b;
  font-size: 13px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.feedback-modal__frame {
  background: transparent;
  border: 0;
  border-radius: 0 0 12px 12px;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.feedback-modal__fallback {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid rgba(228, 235, 231, 0.68);
  color: #007838;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  text-decoration: none;
}

@media (min-width: 641px) {
  .feedback-modal {
    align-items: center;
    padding: 32px;
  }

  .feedback-modal__dialog {
    border-radius: 18px;
    height: min(680px, calc(100dvh - 64px));
    max-width: 760px;
  }

  .feedback-modal__header {
    padding: 17px 20px;
  }

  .feedback-modal__body {
    padding: 0 14px 14px;
  }

  .feedback-modal__fallback {
    min-height: 48px;
  }
}

.install-modal {
  align-items: center;
  background: rgba(10, 18, 16, 0.72);
  inset: 0;
  justify-content: center;
  padding: clamp(10px, 3vw, 24px);
  position: fixed;
  z-index: 20;
}

.install-modal:not([hidden]) {
  display: flex;
}

.install-modal__content {
  background: #f7faf7;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  color: var(--ink);
  max-height: calc(100dvh - 20px);
  max-width: min(620px, calc(100vw - 20px));
  overflow: hidden;
  padding: clamp(14px, 2.8vmin, 24px);
  position: relative;
  width: 100%;
}

.install-modal__header {
  padding-right: 42px;
}

.install-modal__eyebrow {
  color: #087c3e;
  display: block;
  font-size: clamp(11px, 1.8vmin, 14px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.install-modal__header h2 {
  color: #176039;
  font-size: clamp(20px, 3.3vmin, 28px);
  line-height: 1.05;
  margin: 3px 0 8px;
}

.install-modal__browser-picker {
  display: grid;
  font-size: 12px;
  font-weight: 700;
  gap: 4px;
  margin-bottom: 7px;
}

.install-modal__browser-picker[hidden] {
  display: none;
}

.install-modal__browser-picker select {
  background: #ffffff;
  border: 1px solid rgba(0, 152, 70, 0.32);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  min-height: 36px;
  padding: 6px 34px 6px 10px;
  width: 100%;
}

.install-modal__steps {
  display: grid;
  gap: 7px;
}

.install-modal__step {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(0, 152, 70, 0.18);
  border-radius: 11px;
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(118px, 0.85fr) minmax(160px, 1.15fr);
  min-height: 64px;
  padding: 7px 9px;
}

.install-modal__step-heading {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 25px 1fr;
}

.install-modal__step-number {
  align-items: center;
  background: #009846;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  height: 25px;
  justify-content: center;
  width: 25px;
}

.install-modal__step h3 {
  color: #176039;
  font-size: clamp(12px, 1.8vmin, 15px);
  line-height: 1.15;
  margin: 0;
}

.install-modal__step-visual {
  min-width: 0;
}

.install-visual__caption {
  color: #66756b;
  display: block;
  font-size: 9px;
  line-height: 1;
  margin-bottom: 3px;
}

.install-visual__browser-bar,
.install-visual__toolbar {
  align-items: center;
  background: #edf1ee;
  border: 1px solid #dce5df;
  border-radius: 10px;
  color: #243c2e;
  display: flex;
  gap: 6px;
  height: 40px;
  padding: 4px 6px;
}

.install-visual__toolbar {
  justify-content: space-around;
}

.install-visual__sequence {
  align-items: center;
  display: flex;
  gap: 5px;
}

.install-visual__action {
  align-items: center;
  background: #e7f7ed;
  border: 2px solid #009846;
  border-radius: 8px;
  color: #087c3e;
  display: flex;
  font-size: 10px;
  gap: 5px;
  min-height: 31px;
  padding: 3px 7px;
}

.install-visual__address {
  background: #ffffff;
  border-radius: 7px;
  color: #526159;
  flex: 1;
  font-size: 9px;
  min-width: 0;
  overflow: hidden;
  padding: 7px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.install-visual__close-mark {
  font-size: 22px;
  line-height: 1;
}

.install-visual__control {
  align-items: center;
  border: 2px solid transparent;
  border-radius: 8px;
  display: flex;
  flex: 0 0 31px;
  height: 31px;
  justify-content: center;
}

.install-visual__control.is-target,
.install-visual__menu-row.is-target {
  background: #e7f7ed;
  border-color: #009846;
  color: #087c3e;
}

.install-visual__icon {
  height: 20px;
  width: 20px;
}

.install-visual__icon path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.install-visual__icon circle {
  fill: currentColor;
}

.install-visual__menu.is-ios .install-visual__icon rect {
  fill: #34c759;
}

.install-visual__menu.is-ios .install-visual__icon path {
  stroke: #ffffff;
}

.install-visual__menu {
  background: #edf1ee;
  border-radius: 10px;
  padding: 4px;
}

.install-visual__menu-row {
  align-items: center;
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: 8px;
  display: flex;
  font-size: 11px;
  gap: 8px;
  min-height: 38px;
  padding: 4px 8px;
}

.install-visual__dialog {
  background: #edf1ee;
  border: 1px solid #dce5df;
  border-radius: 10px;
  display: grid;
  font-size: 10px;
  gap: 4px;
  padding: 6px 8px;
}

.install-visual__dialog strong {
  font-size: 11px;
}

.install-visual__dialog button {
  background: #009846;
  border: 0;
  border-radius: 7px;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  justify-self: end;
  padding: 4px 10px;
}

.install-visual__dialog-copy,
.install-visual__app-name {
  color: #526159;
}

.install-visual__toggle-row {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: space-between;
}

.install-visual__toggle {
  background: #009846;
  border-radius: 8px;
  height: 14px;
  position: relative;
  width: 25px;
}

.install-visual__toggle::after {
  background: #ffffff;
  border-radius: 50%;
  content: "";
  height: 10px;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 10px;
}

.install-visual__launch {
  align-items: center;
  display: flex;
  gap: 7px;
}

.install-visual__app-icon {
  align-items: center;
  background: #176039;
  border-radius: 10px;
  color: #ffffff;
  display: flex;
  flex: 0 0 38px;
  font-size: 8px;
  font-weight: 700;
  height: 38px;
  justify-content: center;
}

.install-visual__notify {
  align-items: center;
  background: #d9261c;
  border-radius: 999px;
  color: #ffffff;
  display: flex;
  flex: 1;
  font-size: 9px;
  gap: 5px;
  min-height: 38px;
  padding: 5px 8px;
}

.install-visual__notify .install-visual__icon {
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
}

.install-visual__fallback {
  background: #fff4cc;
  border: 1px solid #f1ce53;
  border-radius: 9px;
  display: grid;
  font-size: 9px;
  gap: 2px;
  padding: 7px 9px;
}

.install-visual__fallback.is-neutral {
  background: #e8f5ed;
  border-color: #a9d8bb;
}

.install-modal__change-guide {
  background: transparent;
  border: 0;
  color: #176039;
  display: block;
  font-size: 10px;
  margin: 7px auto 0;
  padding: 2px;
  text-decoration: underline;
}

.install-modal__symbols {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.install-modal__close {
  align-items: center;
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  display: grid;
  height: 42px;
  justify-content: center;
  padding: 10px;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 42px;
  z-index: 1;
}

.install-modal__close img {
  display: block;
  height: 100%;
  width: 100%;
}

@media (max-width: 640px) {
  :root {
    --logo-height: min(54px, calc((100vw - 44px) / 7.28));
    --brand-block-padding: calc((82px - var(--logo-height)) / 2);
    --top-offset: calc(82px + env(safe-area-inset-top));
    --bottom-offset: calc(18px + env(safe-area-inset-bottom));
  }

  .brand-bar {
    gap: 16px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .top-actions {
    gap: 14px;
    left: 18px;
    max-width: calc(100vw - 36px);
    top: calc(var(--top-offset) + 18px);
  }

  .alerts-button {
    height: 54px;
    width: 101px;
  }

  .emergency-widget {
    max-width: 45vw;
    right: 18px;
    top: calc(var(--top-offset) + 18px);
    width: 210px;
  }

  .alerts-panel {
    top: 66px;
  }

  .bottom-actions {
    --bottom-action-height: 58px;

    width: calc(100vw - 36px);
  }

  .feedback-button {
    bottom: calc(var(--bottom-offset) + 62px);
    min-height: 58px;
    padding: 7px 8px 7px 22px;
    width: 252px;
  }

  .feedback-button__copy strong {
    font-size: 12px;
  }

  .feedback-button__copy span {
    font-size: 11px;
  }

  .feedback-button__icon {
    height: 42px;
    width: 42px;
  }

  .feedback-button__icon svg {
    height: 19px;
    width: 19px;
  }

  .install-modal {
    padding: 10px;
  }

  .install-modal__content {
    max-height: calc(100dvh - 20px);
    max-width: calc(100vw - 20px);
    padding: 14px;
  }

  .install-modal__close {
    height: 36px;
    right: 12px;
    top: 12px;
    width: 36px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --logo-height: min(44px, calc((100vw - 40px) / 7.28));
    --brand-block-padding: calc((64px - var(--logo-height)) / 2);
    --top-offset: calc(64px + env(safe-area-inset-top));
    --bottom-offset: calc(10px + env(safe-area-inset-bottom));
  }

  .brand-bar {
    gap: 16px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .top-actions {
    left: calc(12px + env(safe-area-inset-left));
    top: calc(var(--top-offset) + 10px);
  }

  .alerts-button {
    height: 44px;
    width: 82px;
  }

  .alerts-panel {
    max-height: calc(100dvh - var(--top-offset) - 68px);
    top: 52px;
    width: min(320px, calc(100vw - 24px));
  }

  .emergency-widget {
    max-width: 33vw;
    right: calc(12px + env(safe-area-inset-right));
    top: calc(var(--top-offset) + 10px);
    width: 190px;
  }

  .bottom-actions {
    --bottom-action-height: 50px;

    width: min(330px, calc(100vw - 140px));
  }

  .feedback-button {
    bottom: var(--bottom-offset);
    border-radius: 999px 0 0 999px;
    gap: 0;
    min-height: 50px;
    padding: 3px 7px 3px 3px;
    right: env(safe-area-inset-right);
    width: 57px;
  }

  .feedback-button__copy {
    display: none;
  }

  .feedback-button__icon {
    height: 44px;
    width: 44px;
  }
}

@media (max-height: 520px) {
  .install-modal__content {
    padding: 10px 14px;
  }

  .install-modal__header h2 {
    font-size: 18px;
    margin-bottom: 5px;
  }

  .install-modal__eyebrow {
    font-size: 9px;
  }

  .install-modal__steps {
    gap: 4px;
  }

  .install-modal__step {
    min-height: 54px;
    padding: 4px 7px;
  }

  .install-visual__browser-bar,
  .install-visual__toolbar {
    height: 34px;
  }

  .install-visual__menu-row {
    min-height: 32px;
  }
}

@media (max-width: 400px) {
  .install-modal__step {
    gap: 6px;
    grid-template-columns: minmax(103px, 0.8fr) minmax(145px, 1.2fr);
  }

  .install-modal__step-heading {
    gap: 6px;
  }

  .install-modal__step h3 {
    font-size: 11px;
  }

  .install-visual__menu-row {
    font-size: 10px;
    gap: 5px;
    padding-inline: 6px;
  }
}

@media (max-width: 360px) {
  .alerts-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .alerts-updated {
    justify-content: flex-start;
  }
}

@media (hover: hover) and (pointer: fine) {
  .emergency-widget {
    display: none;
  }
}