:root {
  --bg: #f4efe7;
  --paper: #fbf8f2;
  --ink: #1f2f37;
  --muted: #62727b;
  --line: rgba(31, 47, 55, 0.12);
  --shadow: 0 24px 60px rgba(31, 47, 55, 0.12);
  --green: #2f9e44;
  --orange: #e07a1f;
  --red: #d64545;
  --blue: #2f6fed;
  --unavailable: #ff2d8d;
  --road: #d7d1c7;
  --road-core: #f9f5ee;
  --accent: #b45d2a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(180, 93, 42, 0.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(47, 111, 237, 0.08), transparent 25%),
    linear-gradient(180deg, #f7f1e8 0%, #efe6da 100%);
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

button {
  font: inherit;
  cursor: pointer;
}

.app-shell {
  width: min(1480px, calc(100% - 28px));
  margin: 18px auto 28px;
  display: grid;
  gap: 22px;
}

.app-view {
  display: grid;
  gap: 22px;
}

.app-view[hidden] {
  display: none;
}

.app-tabs {
  position: sticky;
  top: 10px;
  z-index: 1400;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(251, 248, 242, 0.86);
  border: 1px solid rgba(31, 47, 55, 0.1);
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(31, 47, 55, 0.1);
  backdrop-filter: blur(12px);
}

.app-tabs-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.app-tab {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(31, 47, 55, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.app-tab.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 10px 22px rgba(31, 47, 55, 0.16);
}

/* Deliberately not styled as a fourth tab. It is pushed to the far end and drawn lighter than the
   three task tabs so it reads as a corner control rather than another destination - the account is
   optional, and the nav should not suggest the app wants you to sign in before using it. The auto
   margin collapses on its own once the row overflows on a phone, which is the behaviour we want
   there: the chip simply joins the end of the scroll instead of being pinned over a tab. */
.account-chip {
  margin-left: auto;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(31, 47, 55, 0.16);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  max-width: 190px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.account-chip:hover {
  color: var(--ink);
  border-color: rgba(31, 47, 55, 0.32);
}

.account-chip.is-active {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
}

/* The confirm-your-email prompt used to be unavoidable on the alerts page. Behind a chip it is not,
   so the chip has to carry the fact that something in there wants attention. */
.account-chip.has-notice::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--orange);
}

.landing-next-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 28px 30px;
  background:
    linear-gradient(135deg, rgba(31, 47, 55, 0.96), rgba(60, 77, 84, 0.92)),
    radial-gradient(circle at top right, rgba(247, 176, 67, 0.34), transparent 38%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 34px;
  box-shadow: 0 24px 54px rgba(31, 47, 55, 0.2);
  color: #fff;
}

.ready-kicker {
  width: max-content;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(247, 176, 67, 0.22), rgba(255, 228, 169, 0.12));
  border: 1px solid rgba(247, 176, 67, 0.45);
  color: #ffe0a4;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.26em;
  text-shadow: 0 2px 12px rgba(247, 176, 67, 0.28);
}

.landing-next-card h2 {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(2.35rem, 4vw, 3.7rem);
  line-height: 1;
}

.landing-next-card p:last-child {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.08rem;
  line-height: 1.55;
}

.landing-next-button {
  position: relative;
  overflow: hidden;
  min-height: 68px;
  padding: 20px 34px;
  background:
    linear-gradient(135deg, #fff1b8 0%, #f7b043 34%, #d97925 100%);
  border: 3px solid #ffe48c;
  color: #1f2f37;
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 5px rgba(247, 176, 67, 0.18),
    0 18px 38px rgba(247, 176, 67, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.landing-next-button::after {
  position: absolute;
  top: -45%;
  left: -35%;
  width: 32%;
  height: 190%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: rotate(22deg);
  animation: button-shine 3.2s ease-in-out infinite;
}

@keyframes button-shine {
  0% {
    left: -40%;
  }

  45%,
  100% {
    left: 125%;
  }
}

.single-panel-view {
  display: grid;
  grid-template-columns: minmax(0, 900px);
  justify-content: center;
}

.legal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  color: var(--muted);
  background: rgba(251, 248, 242, 0.72);
  border: 1px solid rgba(31, 47, 55, 0.1);
  border-radius: 24px;
}

.legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legal-link {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid rgba(31, 47, 55, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.legal-link.is-active {
  background: rgba(180, 93, 42, 0.13);
  border-color: rgba(180, 93, 42, 0.38);
  color: var(--accent);
}

.saved-sets-account-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* A text link rather than a button, because this is a sentence with an offer at the end of it and a
   pill here would compete with the primary action in the empty state directly below. */
.inline-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.inline-link:hover {
  color: var(--ink);
}

.legal-page {
  display: grid;
  grid-template-columns: minmax(0, 900px);
  justify-content: center;
}

.legal-card {
  padding: clamp(24px, 5vw, 44px);
  background: rgba(251, 248, 242, 0.92);
  border: 1px solid rgba(31, 47, 55, 0.1);
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.legal-card h1 {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 0.95;
}

.legal-updated {
  margin: 14px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.legal-copy {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.legal-copy h2 {
  margin: 12px 0 -6px;
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1.25;
}

.legal-copy p,
.legal-copy ul {
  margin: 0;
}

.legal-copy ul {
  padding-left: 22px;
}

.legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(20px, 4vw, 42px);
  padding: clamp(28px, 5vw, 54px);
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 10%, rgba(247, 176, 67, 0.24), transparent 34%),
    radial-gradient(circle at 86% 0%, rgba(47, 111, 237, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(31, 47, 55, 0.98), rgba(47, 67, 78, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 36px;
  box-shadow: 0 28px 70px rgba(31, 47, 55, 0.22);
  color: #fff;
}

.hero-copy {
  display: grid;
  align-content: start;
}

.eyebrow,
.section-kicker {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.73rem;
  color: var(--accent);
}

.hero .eyebrow {
  color: #f7b043;
}

.hero h1,
.section-head h2 {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  line-height: 0.95;
}

.hero h1 {
  font-size: clamp(3.25rem, 7vw, 6.2rem);
  max-width: 11.5ch;
  color: #fff;
  text-wrap: balance;
  letter-spacing: -0.04em;
}

.hero-text {
  max-width: 58ch;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.04rem, 1.5vw, 1.22rem);
  line-height: 1.62;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.hero-cta,
.hero-secondary {
  min-height: 56px;
}

.hero-secondary {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.hero-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.hero-trust-list span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.84rem;
  font-weight: 700;
}

.hero-quick-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.hero-quick-proof span {
  padding: 12px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
  font-size: 0.9rem;
}

.hero-quick-proof strong {
  display: block;
  color: #fff;
  font-size: 0.96rem;
}

.hero-summary {
  display: grid;
  gap: 12px;
  align-content: start;
}

.summary-card,
.note-card,
.selection-item {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(31, 47, 55, 0.08);
  border-radius: 22px;
}

.summary-card {
  padding: 16px 18px;
  display: grid;
  gap: 6px;
  background: rgba(255, 255, 255, 0.9);
}

.summary-card strong {
  font-size: 1.8rem;
}

.summary-card-featured {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 246, 235, 0.86)),
    radial-gradient(circle at top right, rgba(180, 93, 42, 0.18), transparent 42%);
}

.summary-card-featured strong {
  font-size: 1.35rem;
  line-height: 1.1;
}

.summary-card-featured p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.summary-label {
  color: var(--muted);
  font-size: 0.88rem;
}

.journey-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 18px;
  align-items: stretch;
  padding: 22px;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(251, 248, 242, 0.92), rgba(244, 239, 231, 0.86)),
    radial-gradient(circle at top right, rgba(47, 111, 237, 0.14), transparent 34%);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: var(--shadow);
}

.journey-copy {
  padding: 8px 8px 8px 0;
}

.journey-copy h2 {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.95;
}

.journey-copy p:last-child {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 1.04rem;
}

.journey-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-steps li {
  min-height: 100%;
  padding: 16px;
  border: 1px solid rgba(31, 47, 55, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
}

.journey-steps span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(180, 93, 42, 0.12);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
}

.journey-steps strong {
  display: block;
  font-size: 1rem;
}

.journey-steps p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.onboarding-card {
  display: grid;
  grid-template-columns: 0.85fr 1.45fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  background:
    linear-gradient(135deg, rgba(31, 47, 55, 0.94), rgba(48, 65, 73, 0.9)),
    radial-gradient(circle at top right, rgba(224, 122, 31, 0.28), transparent 34%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  box-shadow: var(--shadow);
  color: #fff;
}

.onboarding-card[hidden] {
  display: none;
}

.onboarding-card .section-kicker {
  color: #f1b778;
}

.onboarding-copy h2 {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
}

.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.onboarding-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
}

.step-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1b778;
  color: var(--ink);
  font-weight: 800;
}

.onboarding-steps strong,
.onboarding-steps span {
  display: block;
}

.onboarding-steps strong {
  font-size: 0.96rem;
}

.onboarding-steps span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.86rem;
  line-height: 1.35;
}

.onboarding-dismiss {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  white-space: nowrap;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.22);
}

.value-card {
  padding: 20px 22px;
  background: rgba(251, 248, 242, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 26px;
  box-shadow: 0 16px 42px rgba(31, 47, 55, 0.08);
}

.value-card h2 {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  line-height: 1;
}

.value-card p:last-child {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.beta-note {
  background: rgba(255, 246, 212, 0.74);
  border-color: rgba(245, 197, 66, 0.72);
}

.page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 26px 30px;
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(251, 248, 242, 0.94), rgba(242, 235, 225, 0.9)),
    radial-gradient(circle at top right, rgba(47, 111, 237, 0.12), transparent 36%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow);
}

.page-intro h1 {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 0.95;
}

.page-intro p:not(.section-kicker) {
  max-width: 66ch;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.55;
}

.compact-page-intro {
  width: min(900px, 100%);
  justify-self: center;
}

.journey-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.journey-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(31, 47, 55, 0.1);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

.journey-pill.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(180, 93, 42, 0.22);
}

.journey-pill.is-done {
  background: rgba(47, 158, 68, 0.13);
  border-color: rgba(47, 158, 68, 0.3);
  color: #216d35;
}

.workspace {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 18px;
  padding-top: 6px;
}

.lookup-card {
  margin-top: 18px;
  padding: 18px 22px;
  background: rgba(251, 248, 242, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 30px;
  box-shadow: var(--shadow);
  opacity: 0.94;
}

.lookup-text {
  margin: 10px 0 0;
  max-width: 54ch;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.98rem;
}

.lookup-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}

.lookup-field {
  display: grid;
  gap: 8px;
}

.lookup-status {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

.lookup-status strong {
  color: var(--ink);
}

.map-search-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 47, 55, 0.1);
  border-radius: 22px;
}

.map-search-field {
  display: grid;
  gap: 8px;
}

.map-search-status {
  margin-top: 10px;
}

.map-card,
.panel-card {
  padding: 22px;
  background: rgba(251, 248, 242, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 5px solid rgba(31, 47, 55, 0.18);
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.map-card {
  border-top-color: rgba(180, 93, 42, 0.62);
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(31, 47, 55, 0.1);
}

.map-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.privacy-note {
  margin: 14px 0 0;
  padding: 11px 14px;
  border: 1px solid rgba(31, 47, 55, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.section-head h2 {
  font-size: 2.2rem;
}

.ghost-button {
  border: 1px solid rgba(31, 47, 55, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 16px;
}

.ghost-button:hover {
  background: rgba(255, 255, 255, 0.95);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 18px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(31, 47, 55, 0.08);
  font-size: 0.86rem;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.green {
  background: var(--green);
}

.orange {
  background: var(--orange);
}

.red {
  background: var(--red);
}

.blue {
  background: var(--blue);
}

.pink {
  background: var(--unavailable);
}

.gray {
  background: #7b8790;
}

.plum {
  background: #8e44ad;
}

.leaflet-tooltip.you-are-here-label {
  background: rgba(31, 47, 55, 0.9);
  border: none;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(31, 47, 55, 0.18);
  color: #ffffff;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 12px;
}

.leaflet-tooltip.you-are-here-label::before {
  display: none;
}

.leaflet-tooltip.search-result-label {
  background: rgba(88, 61, 35, 0.92);
  border: none;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(88, 61, 35, 0.18);
  color: #ffffff;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 12px;
}

.leaflet-tooltip.search-result-label::before {
  display: none;
}

/* Curb hover tooltips carry a full sentence of schedule guidance. Leaflet's default
   `white-space: nowrap` renders that as one long line that runs off the map edge, so
   let the text wrap and cap the width against the viewport instead. */
.leaflet-tooltip.curb-tooltip {
  white-space: normal;
  width: max-content;
  max-width: min(260px, calc(100vw - 96px));
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.map-frame {
  position: relative;
  margin-top: 18px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(31, 47, 55, 0.12);
  background: #dbe8ee;
}

#map {
  width: 100%;
  height: 760px;
  display: block;
}

.map-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(247, 243, 234, 0.88);
  backdrop-filter: blur(4px);
  transition: opacity 180ms ease;
}

.map-loading-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.map-loading-card {
  width: min(100%, 440px);
  padding: 24px 26px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(31, 47, 55, 0.08);
  box-shadow: 0 18px 42px rgba(31, 47, 55, 0.12);
  text-align: center;
}

.map-loading-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.map-loading-card h3 {
  margin: 12px 0 10px;
  font-size: 1.55rem;
}

.map-loading-card p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.map-note {
  margin: 14px 4px 0;
  color: var(--muted);
  line-height: 1.6;
}

.panel-section {
  margin-top: 22px;
}

.panel-step-section {
  padding: 18px;
  border: 1px solid rgba(31, 47, 55, 0.09);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(250, 246, 239, 0.52)),
    radial-gradient(circle at top left, rgba(180, 93, 42, 0.06), transparent 36%);
  box-shadow: 0 14px 34px rgba(31, 47, 55, 0.05);
}

#current-selection-section {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

#current-selection-section.is-empty {
  border-color: rgba(214, 69, 69, 0.82);
  box-shadow:
    0 0 0 3px rgba(214, 69, 69, 0.14),
    0 0 24px rgba(214, 69, 69, 0.28),
    0 14px 34px rgba(31, 47, 55, 0.05);
}

#current-selection-section.is-empty .mini-head h3,
#current-selection-section.is-empty .mini-count {
  color: #b62f2f;
}

.mini-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.mini-head h3 {
  margin: 0;
  font-size: 1.08rem;
}

.mini-count {
  color: var(--muted);
  font-size: 0.86rem;
}

.panel-step-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(31, 47, 55, 0.08);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.workflow-step-label {
  min-height: 36px;
  padding: 8px 15px;
  background: #ffd84d;
  color: #4a3300;
  font-size: 0.9rem;
  letter-spacing: 0.09em;
  border: 1px solid rgba(255, 183, 0, 0.9);
  box-shadow:
    0 0 0 3px rgba(255, 216, 77, 0.22),
    0 0 18px rgba(255, 183, 0, 0.52);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.92rem;
}

.summary-line strong {
  color: var(--ink);
  text-align: right;
}

.empty-state {
  margin-top: 18px;
  padding: 28px 18px;
  text-align: center;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px dashed rgba(31, 47, 55, 0.16);
}

.empty-state p {
  margin: 0;
}

.empty-subtext {
  margin-top: 8px !important;
  color: var(--muted);
}

.selection-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.saved-sets-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.job-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.selection-item {
  padding: 16px;
}

.saved-set-item {
  padding: 16px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(31, 47, 55, 0.08);
  border-radius: 22px;
}

.job-item {
  padding: 16px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(31, 47, 55, 0.08);
  border-radius: 22px;
}

.selection-item-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.selection-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
}

.selection-title {
  margin: 12px 0 6px;
  font-size: 1.05rem;
}

.selection-meta {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.no-move-notice,
.unavailable-notice {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 12px 14px;
  color: #234e44;
  background: #eef8f2;
  border: 1px solid rgba(35, 78, 68, 0.18);
  border-radius: 14px;
  line-height: 1.4;
}

.no-move-notice[hidden],
.unavailable-notice[hidden] {
  display: none;
}

.no-move-notice span,
.unavailable-notice span {
  font-size: 0.9rem;
}

.no-move-notice a,
.unavailable-notice a {
  width: fit-content;
  color: #176b57;
  font-size: 0.88rem;
  font-weight: 700;
}

.unavailable-notice {
  color: #6f2148;
  background: #fff0f7;
  border-color: rgba(111, 33, 72, 0.2);
}

.unavailable-notice a {
  color: #a1165d;
}

.remove-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  padding: 0;
}

.save-set-card {
  margin-top: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(31, 47, 55, 0.08);
  border-radius: 22px;
  display: grid;
  gap: 12px;
}

.notification-status-block {
  display: grid;
  gap: 6px;
}

.notification-status-text {
  margin: 0;
  font-weight: 700;
}

.notification-action-row,
.job-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.input-label {
  font-size: 0.88rem;
  font-weight: 700;
}

.text-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(31, 47, 55, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font: inherit;
}

.issue-report-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.caution-icon {
  width: 28px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #f5c542;
  color: #4b3500;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  padding-top: 6px;
  text-shadow: 0 1px rgba(255, 255, 255, 0.35);
}

.issue-report-card {
  width: 100%;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  align-items: start;
  background: rgba(255, 246, 212, 0.72);
  border: 2px solid rgba(245, 197, 66, 0.88);
  box-shadow: 0 16px 34px rgba(129, 93, 10, 0.08);
}

.feedback-section {
  background:
    linear-gradient(180deg, rgba(255, 249, 223, 0.82), rgba(255, 246, 212, 0.58)),
    radial-gradient(circle at top right, rgba(245, 197, 66, 0.22), transparent 40%);
  border-color: rgba(245, 197, 66, 0.74);
}

.issue-note-input {
  min-height: 110px;
  resize: vertical;
}

.issue-report-status {
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  background: #e4f2df;
  border: 1px solid rgba(77, 160, 83, 0.28);
  color: #21382c;
  font-size: 0.92rem;
  line-height: 1.45;
}

.issue-report-status.is-error {
  background: #fff1eb;
  border-color: rgba(176, 94, 46, 0.25);
  color: #5c3222;
}

.issue-report-status[hidden] {
  display: none;
}

.floating-report {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 1500;
  display: grid;
  justify-items: end;
  gap: 12px;
  pointer-events: none;
}

.floating-report > * {
  pointer-events: auto;
}

.floating-report-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 13px 18px;
  border: 2px solid rgba(245, 197, 66, 0.92);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 252, 238, 0.98), rgba(255, 244, 199, 0.96)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), transparent 42%);
  color: #4b3500;
  font: inherit;
  font-weight: 900;
  box-shadow: 0 18px 38px rgba(31, 47, 55, 0.18);
}

.floating-report-button .caution-icon {
  flex: 0 0 auto;
}

.floating-report-panel {
  width: min(420px, calc(100vw - 28px));
  max-height: min(72vh, 620px);
  overflow: auto;
  padding: 18px;
  border: 2px solid rgba(245, 197, 66, 0.88);
  border-radius: 28px;
  background: rgba(255, 252, 242, 0.98);
  box-shadow: 0 28px 70px rgba(31, 47, 55, 0.24);
  backdrop-filter: blur(14px);
}

.floating-report-panel[hidden] {
  display: none;
}

.floating-report-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.floating-close-button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(31, 47, 55, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
}

.floating-issue-form {
  margin: 0;
}

.primary-button {
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.primary-button:hover {
  filter: brightness(0.96);
}

#enable-notifications-button.notifications-on,
#enable-notifications-button.notifications-on:disabled {
  background: #b9e7bd;
  color: #173c25;
  opacity: 1;
}

a.primary-button,
a.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.compact-empty {
  padding: 18px 16px;
}

.save-confirmation {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #e4f2df;
  border: 1px solid rgba(77, 160, 83, 0.28);
  color: #21382c;
  box-shadow: 0 10px 24px rgba(43, 99, 56, 0.08);
}

.save-confirmation[hidden] {
  display: none;
}

.save-confirmation strong {
  font-size: 1rem;
}

.save-confirmation span {
  color: #52665c;
  font-size: 0.92rem;
  line-height: 1.45;
}

.setup-next-card {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  border: 2px solid rgba(247, 176, 67, 0.58);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 250, 229, 0.94), rgba(255, 246, 212, 0.84)),
    radial-gradient(circle at top right, rgba(247, 176, 67, 0.24), transparent 42%);
}

.setup-next-card strong,
.setup-next-card span {
  display: block;
}

.setup-next-card strong {
  font-size: 1rem;
}

.setup-next-card span {
  margin-top: 5px;
  color: #677781;
  font-size: 0.92rem;
  line-height: 1.45;
}

.setup-next-button {
  min-height: 56px;
  width: 100%;
  background: var(--ink);
  font-size: 1.05rem;
}

.confirmation-next-card {
  margin-top: 18px;
}

.readiness-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(31, 47, 55, 0.08);
  border-radius: 22px;
}

.readiness-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 18px;
  background: rgba(31, 47, 55, 0.04);
  border: 1px solid rgba(31, 47, 55, 0.07);
}

.readiness-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(98, 114, 123, 0.16);
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  margin-top: 1px;
  overflow: hidden;
}

.readiness-icon::before {
  content: "!";
}

.readiness-copy {
  min-width: 0;
}

.readiness-copy strong,
.readiness-detail {
  display: block;
}

.readiness-copy strong {
  font-size: 0.95rem;
  line-height: 1.25;
}

.readiness-detail {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.readiness-item.is-ready {
  background: #e4f2df;
  border-color: rgba(77, 160, 83, 0.28);
}

.readiness-item.is-ready .readiness-icon {
  background: var(--green);
  color: #fff;
}

.readiness-item.is-ready .readiness-icon::before {
  content: "✓";
}

.saved-set-title {
  margin: 0;
  font-size: 1rem;
}

.saved-set-meta {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.92rem;
}

.saved-set-details {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(31, 47, 55, 0.08);
}

.saved-set-detail-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.4;
}

.saved-set-detail-label {
  color: var(--muted);
  font-weight: 700;
}

.reminder-card {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 0 18px 18px;
  border-radius: 26px;
  background: #f8f5ee;
  border: 1px solid rgba(31, 47, 55, 0.1);
  box-shadow: 0 16px 34px rgba(31, 47, 55, 0.08);
  display: grid;
  gap: 14px;
}

.reminder-head {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0 -18px;
  padding: 20px 22px;
  background:
    radial-gradient(circle at 88% 10%, rgba(247, 176, 67, 0.3), transparent 30%),
    linear-gradient(135deg, #203139, #334b53);
  color: #fff;
}

.reminder-head::after {
  position: absolute;
  right: 20px;
  bottom: -15px;
  width: 86px;
  height: 30px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 0;
  border-bottom: 0;
  border-radius: 70px 0 0;
  transform: rotate(-5deg);
}

.reminder-head-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffd186;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.reminder-head-icon svg {
  width: 24px;
  height: 24px;
}

.reminder-head-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reminder-eyebrow,
.reminder-kicker {
  display: block;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.reminder-eyebrow {
  color: #ffd186;
}

.reminder-title {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.1;
}

.reminder-summary {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  line-height: 1.45;
}

.reminder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 17px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.reminder-row:hover {
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(31, 47, 55, 0.08);
}

.reminder-row-featured {
  margin-top: 2px;
  padding: 15px 14px;
  background: #fff;
  border-color: rgba(31, 47, 55, 0.09);
  box-shadow: 0 9px 22px rgba(31, 47, 55, 0.06);
}

.reminder-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
}

.reminder-copy .reminder-kicker,
.reminder-copy .reminder-help {
  grid-column: 1 / -1;
}

.reminder-label {
  display: block;
  margin-top: 3px;
  font-size: 0.98rem;
  font-weight: 800;
}

.reminder-help {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.reminder-group {
  display: grid;
  gap: 2px;
  padding: 16px 4px 2px;
  border-top: 1px solid rgba(31, 47, 55, 0.1);
}

.reminder-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  padding: 0 10px 10px;
}

.reminder-group-head .reminder-help {
  grid-column: 1 / -1;
}

.reminder-count {
  align-self: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(180, 93, 42, 0.1);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.reminder-slot-label {
  font-size: 0.86rem;
  font-weight: 750;
}

.reminder-slot-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(31, 47, 55, 0.07);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.reminder-controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.reminder-switch-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
}

.reminder-toggle {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.reminder-switch {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(31, 47, 55, 0.13);
  border-radius: 999px;
  background: #d9ddd9;
  box-shadow: inset 0 1px 3px rgba(31, 47, 55, 0.12);
  transition: background 170ms ease, border-color 170ms ease;
}

.reminder-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  content: "";
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(31, 47, 55, 0.24);
  transition: transform 170ms ease;
}

.reminder-toggle:checked + .reminder-switch {
  background: var(--accent);
  border-color: var(--accent);
}

.reminder-toggle:checked + .reminder-switch::after {
  transform: translateX(18px);
}

.reminder-toggle:focus-visible + .reminder-switch {
  outline: 3px solid rgba(47, 111, 237, 0.25);
  outline-offset: 2px;
}

.time-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.time-input-icon {
  position: absolute;
  left: 12px;
  z-index: 1;
  width: 15px;
  height: 15px;
  border: 1.6px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
}

.time-input-icon::before,
.time-input-icon::after {
  position: absolute;
  left: 6px;
  content: "";
  width: 1.5px;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: bottom;
}

.time-input-icon::before {
  top: 3px;
  height: 4px;
}

.time-input-icon::after {
  top: 6px;
  height: 3px;
  transform: rotate(125deg);
}

.time-input {
  width: 138px;
  min-width: 0;
  padding: 10px 10px 10px 35px;
  border-radius: 12px;
  border: 1px solid rgba(31, 47, 55, 0.13);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 750;
  box-shadow: 0 3px 9px rgba(31, 47, 55, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.time-input:focus {
  outline: none;
  border-color: rgba(180, 93, 42, 0.6);
  box-shadow: 0 0 0 3px rgba(180, 93, 42, 0.12);
}

.time-input:disabled {
  opacity: 0.46;
  background: rgba(255, 255, 255, 0.55);
}

.time-input-wrap:has(.time-input:disabled) .time-input-icon {
  opacity: 0.35;
}

.saved-set-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.queue-note {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 47, 55, 0.08);
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.9rem;
}

.job-item-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.job-title {
  margin: 0;
  font-size: 1rem;
}

.job-meta,
.job-message,
.job-segments {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.92rem;
}

.job-message {
  color: var(--ink);
}

.job-status {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(47, 158, 68, 0.14);
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.job-actions {
  margin-top: 14px;
}

.apply-set-button {
  padding: 10px 14px;
}

.note-card {
  margin-top: 18px;
  padding: 16px;
}

.note-title {
  margin: 0 0 8px;
  font-weight: 700;
}

.leaflet-container {
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

.leaflet-tooltip.context-label {
  background: rgba(31, 47, 55, 0.84);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: #fff;
  font-weight: 700;
  padding: 6px 10px;
}

.leaflet-tooltip.context-label::before {
  display: none;
}

.context-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
}

.context-dot.school {
  background: #5f3dc4;
}

.context-dot.landmark {
  background: #0b7285;
}

@media (max-width: 1280px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    max-width: 18ch;
  }

  .hero-summary {
    grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(130px, 1fr));
    gap: 10px;
  }

  .summary-card {
    align-content: center;
    min-height: 112px;
    padding: 12px 14px;
  }
}

@media (max-width: 1100px) {
  .workspace,
  .onboarding-card,
  .journey-card,
  .page-intro,
  .value-grid {
    grid-template-columns: 1fr;
  }

  .journey-pills {
    justify-content: flex-start;
  }

  .hero-quick-proof,
  .journey-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .onboarding-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100% - 18px, 1480px);
    margin-top: 10px;
    gap: 16px;
  }

  .value-grid {
    padding: 0;
    background: transparent;
    border: 0;
  }

  .app-tabs {
    position: sticky;
    top: 6px;
    padding: 8px;
    border-radius: 22px;
  }

  /* Only the tabs scroll. The chip stays pinned at the right edge, so the account - and the dot on
     it - is reachable without discovering that this row scrolls at all. */
  .app-tabs-scroll {
    flex: 1 1 auto;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    /* Fade the last few pixels so a tab passing behind the chip reads as "this row scrolls" rather
       than as a word that has been chopped in half. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
  }

  .app-tab {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 10px 14px;
  }

  .account-chip {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 10px 12px;
    max-width: 116px;
  }

  .landing-next-card {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 24px;
  }

  .landing-next-card .primary-button {
    width: 100%;
  }

  .hero-quick-proof,
  .journey-steps {
    grid-template-columns: 1fr;
  }

  .journey-card,
  .page-intro {
    padding: 20px;
    border-radius: 28px;
  }

  .journey-steps li {
    padding: 16px;
  }

  .single-panel-view {
    grid-template-columns: 1fr;
  }

  .legal-footer {
    align-items: stretch;
    padding: 16px;
    border-radius: 22px;
  }

  .legal-footer-links,
  .legal-actions {
    flex-direction: column;
  }

  .legal-link,
  .legal-actions .primary-button,
  .legal-actions .ghost-button {
    width: 100%;
  }

  .legal-card {
    border-radius: 24px;
  }

  .hero,
  .onboarding-card,
  .lookup-card,
  .value-card,
  .map-card,
  .panel-card {
    padding: 18px;
  }

  .hero {
    gap: 22px;
    padding: 28px 20px 22px;
    border-radius: 30px;
  }

  .hero-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .summary-card-featured {
    grid-column: 1 / -1;
  }

  .summary-card {
    min-height: 96px;
    padding: 11px 13px;
    border-radius: 18px;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(3rem, 13vw, 4.1rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
  }

  .hero-text {
    margin-top: 18px;
    font-size: 1.13rem;
    line-height: 1.55;
  }

  .hero .eyebrow {
    max-width: 18rem;
    line-height: 1.45;
  }

  .hero-cta-row {
    flex-direction: column;
    margin-top: 28px;
  }

  .hero-cta-row .primary-button,
  .hero-cta-row .ghost-button {
    width: 100%;
  }

  .hero-trust-list span {
    width: 100%;
    text-align: center;
  }

  .onboarding-card {
    border-radius: 24px;
  }

  .section-head {
    flex-direction: column;
    gap: 12px;
  }

  .panel-step-section {
    padding: 16px;
    border-radius: 22px;
  }

  .mini-head {
    grid-template-columns: 1fr auto;
  }

  .panel-step-label {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .map-actions {
    width: 100%;
    justify-content: stretch;
  }

  .map-actions .ghost-button {
    width: 100%;
  }

  .section-head h2 {
    font-size: 1.8rem;
  }

  .lookup-toolbar,
  .map-search-bar {
    grid-template-columns: 1fr;
  }

  .map-search-bar .primary-button {
    width: 100%;
  }

  #map {
    height: min(52vh, 430px);
    min-height: 360px;
  }

  .reminder-row {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: flex-start;
  }

  .reminder-controls {
    width: 100%;
    justify-content: space-between;
  }

  .time-input-wrap,
  .time-input {
    width: min(180px, 100%);
  }

  .reminder-head {
    padding: 18px;
  }

  .floating-report {
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    justify-items: stretch;
  }

  .floating-report-button {
    width: 100%;
  }

  .floating-report-panel {
    width: 100%;
    max-height: 70vh;
    border-radius: 24px;
  }
}

/* ---------------------------------------------------------------------------
   Time-to-value layout: the map is the product, so it gets the screen.
   The search bar and the locate button ride on top of the map instead of
   stacking above it, the colour legend and privacy copy fold into a <details>
   below it, and the curb sheet delivers the sweep date at the moment of tap.
   --------------------------------------------------------------------------- */

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

/* Leaflet's own panes sit at z-index 400-700 inside the frame, so the overlay
   has to clear them while still leaving the zoom control reachable. */
.map-overlay-top {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 900;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}

.map-overlay-top > * {
  pointer-events: auto;
}

.map-overlay-top .map-search-bar {
  margin-top: 0;
  padding: 8px;
  gap: 8px;
  align-items: center;
  background: rgba(251, 248, 242, 0.94);
  border: 1px solid rgba(31, 47, 55, 0.14);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(31, 47, 55, 0.16);
  backdrop-filter: blur(10px);
}

.map-overlay-top .map-search-bar .primary-button {
  padding: 11px 16px;
}

.map-overlay-top .text-input {
  min-height: 44px;
}

/* Promoted from a ghost button: for a "where did I park" app, centring the map
   on the user is the fastest path to their own curb, and deferred/contextual
   location asks grant far better than an upfront one. */
.locate-button {
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(31, 47, 55, 0.18);
}

.map-meta {
  margin-top: 12px;
}

.map-meta h2 {
  margin: 2px 0 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.map-details {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 47, 55, 0.1);
  border-radius: 18px;
}

.map-details > summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--muted);
  min-height: 32px;
  display: flex;
  align-items: center;
}

.map-details .legend {
  margin-top: 12px;
}

.map-secondary-actions {
  margin-top: 12px;
}

/* The curb sheet. Desktop anchors it to the bottom-left of the viewport so it
   never covers the map's centre; mobile gets a full-width bottom sheet. */
.curb-sheet {
  position: fixed;
  z-index: 1600;
  left: 20px;
  bottom: 20px;
  width: min(420px, calc(100% - 40px));
}

.curb-sheet[hidden] {
  display: none;
}

.curb-sheet-inner {
  position: relative;
  padding: 20px 22px 22px;
  background: rgba(251, 248, 242, 0.97);
  border: 1px solid rgba(31, 47, 55, 0.12);
  border-top: 5px solid rgba(180, 93, 42, 0.62);
  border-radius: 26px;
  box-shadow: 0 22px 60px rgba(31, 47, 55, 0.26);
  backdrop-filter: blur(12px);
}

.curb-sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(31, 47, 55, 0.1);
  border-radius: 999px;
}

.curb-sheet-side {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.curb-sheet-street {
  margin: 10px 0 0;
  padding-right: 44px;
  font-size: 1.35rem;
  line-height: 1.2;
}

/* The answer the user came for. */
.curb-sheet-headline {
  margin: 10px 0 0;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.curb-sheet-rule {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.curb-sheet-notice {
  margin: 12px 0 0;
  padding: 11px 13px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 47, 55, 0.1);
  border-radius: 16px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.curb-sheet-action {
  width: 100%;
  margin-top: 16px;
}

.curb-sheet-action.is-on {
  background: rgba(47, 158, 68, 0.16);
  border: 1px solid rgba(47, 158, 68, 0.34);
  color: #1c5c2c;
  box-shadow: none;
}

.curb-sheet-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  /* Full-bleed map. A 420px map inside a scrolling document turns every pan
     into an accidental page scroll, so the map takes the viewport instead. */
  .setup-view .map-card {
    padding: 0 0 18px;
    border-radius: 24px;
    overflow: hidden;
  }

  .setup-view .map-frame {
    margin-top: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }

  .setup-view #map {
    height: calc(100dvh - 190px);
    min-height: 420px;
  }

  .setup-view .lookup-status,
  .setup-view .map-meta,
  .setup-view .map-details {
    margin-left: 16px;
    margin-right: 16px;
  }

  .map-overlay-top {
    top: 10px;
    left: 10px;
    right: 10px;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .map-overlay-top .map-search-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .map-overlay-top .map-search-bar .primary-button {
    width: auto;
  }

  .locate-button {
    width: 100%;
  }

  .curb-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
  }

  .curb-sheet-inner {
    border-radius: 26px 26px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }

  /* The report button owns the bottom of the screen; the sheet needs it. */
  body.curb-sheet-open .floating-report {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Activation: the soft ask, the iPhone install sheet, and giving the thumb
   zone back to the user.
   --------------------------------------------------------------------------- */

.push-primer {
  margin-top: 16px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(180, 93, 42, 0.1), rgba(180, 93, 42, 0.04));
  border: 1px solid rgba(180, 93, 42, 0.28);
  border-radius: 22px;
}

.push-primer[hidden] {
  display: none;
}

.push-primer strong {
  display: block;
  font-size: 1.08rem;
  line-height: 1.3;
}

.push-primer p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.push-primer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.push-primer-actions .primary-button,
.push-primer-actions .ghost-button {
  flex: 1 1 auto;
}

.install-sheet {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(31, 47, 55, 0.5);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}

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

.install-sheet-inner {
  position: relative;
  width: min(460px, 100%);
  padding: 24px 24px 26px;
  background: rgba(251, 248, 242, 0.99);
  border: 1px solid rgba(31, 47, 55, 0.12);
  border-top: 5px solid rgba(180, 93, 42, 0.62);
  border-radius: 28px;
  box-shadow: 0 26px 70px rgba(31, 47, 55, 0.34);
}

.install-sheet-inner h2 {
  margin: 4px 0 0;
  padding-right: 44px;
  font-size: 1.45rem;
  line-height: 1.2;
}

.install-sheet-lede {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.install-steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.install-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 47, 55, 0.1);
  border-radius: 18px;
}

.install-step-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  font-size: 0.92rem;
}

.install-steps strong {
  display: block;
  line-height: 1.35;
}

.install-steps span:not(.install-step-number):not(.install-step-glyph) {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.install-step-glyph {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 8px;
  border-radius: 14px;
  background: rgba(31, 47, 55, 0.06);
  border: 1px solid rgba(31, 47, 55, 0.12);
  color: #0a7cff;
}

.install-sheet-done {
  width: 100%;
  margin-top: 18px;
}

@media (max-width: 720px) {
  /* Beta feedback does not get the primary thumb zone. Icon-only on a phone,
     tucked to the trailing edge, out of the way of the curb sheet's action. */
  .floating-report {
    left: auto;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    justify-items: end;
  }

  .floating-report-button {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
  }

  .floating-report-label {
    display: none;
  }

  .floating-report-panel {
    width: calc(100vw - 28px);
    max-width: 420px;
  }

  /* The install sheet is a full modal on a phone; nothing should float over it. */
  body.install-sheet-open .floating-report {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   The reminder timing card was starving on a phone. Five padded boxes nest
   there — panel-card > panel-step-section > saved-set-item > reminder-card >
   reminder-head — and each took 32-36px of horizontal room, so on a 393px
   screen the "Reminder timing" heading was left 178px: 45% of the display,
   with every line of copy wrapping after three or four words.

   The section wrapper is the redundant one. It sits inside the panel card and
   repeats the same border, radius, background and shadow, so on a phone it
   drops to a plain heading group and gives its width back. The cards that
   carry real meaning — a saved set, a queued job, the readiness list — keep
   their treatment.
   --------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .single-panel-view .panel-card {
    padding: 14px;
  }

  .single-panel-view .panel-step-section {
    padding: 18px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .single-panel-view .panel-step-section:first-child {
    padding-top: 4px;
  }

  .single-panel-view .panel-step-section > .mini-head {
    padding: 0 4px;
  }

  .saved-set-item,
  .job-item {
    padding: 14px;
  }

  .reminder-card {
    margin-top: 14px;
    padding: 0 12px 14px;
    gap: 12px;
  }

  .reminder-head {
    margin: 0 -12px;
    padding: 16px 14px;
    gap: 12px;
  }

  /* 48px of bell plus a 14px gap is a tenth of the screen; the heading needs it
     more than the icon does. */
  .reminder-head-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .reminder-head-icon svg {
    width: 20px;
    height: 20px;
  }

  .reminder-group {
    padding: 14px 0 2px;
  }

  .reminder-group-head {
    padding: 0 4px 10px;
  }

  .reminder-row {
    padding: 11px 8px;
  }

  .reminder-row-featured {
    padding: 14px 10px;
  }

  .save-set-card,
  .readiness-card {
    padding: 14px;
  }

  .readiness-item {
    padding: 11px;
    column-gap: 10px;
  }
}

/* An empty state on the alerts page is a long way from the map it is asking for. */
.empty-state-action {
  margin-top: 14px;
}

/* Account panel. Deliberately built from the shapes already on this page — .panel-step-section for
   the frame, .text-input for the fields, .primary-button and .ghost-button for the actions — so an
   optional sign-in reads as one more step in the reminder flow rather than a bolted-on auth screen. */
/* The hidden attribute loses to any class that sets display, and all three of these set grid. That
   left the signed-out sign-in form rendering underneath a signed-in account, and both subforms —
   including "Delete my account" — permanently on screen with their toggle buttons doing nothing.
   .app-view[hidden] above is the same fix for the same reason; the account card never got it.
   .account-action-row joined the list on 2026-08-29: it sets flex, and #account-forgot-row is the
   one action row the JS toggles, so "Forgot password?" sat on the Create-account form - offering a
   reset for an address that does not have an account yet. */
.account-card[hidden],
.account-form[hidden],
.account-verify-notice[hidden],
.account-action-row[hidden] {
  display: none;
}

/* Amber rather than red: an unconfirmed address is a loose end, not a fault, and nothing about the
   app is broken while it sits there. */
.account-verify-notice {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(214, 158, 46, 0.1);
  border: 1px solid rgba(214, 158, 46, 0.32);
}

.account-verify-notice .account-hint {
  color: #6f4c14;
}

.account-card {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.account-intro {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.account-mode-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(31, 47, 55, 0.06);
  justify-self: start;
}

.account-mode-button {
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.account-mode-button.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(31, 47, 55, 0.08);
}

.account-form {
  display: grid;
  gap: 14px;
}

.account-field {
  display: grid;
  gap: 6px;
}

.account-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.account-identity {
  margin: 0;
  font-size: 0.98rem;
}

.account-plan {
  margin: 0;
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-self: start;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(31, 47, 55, 0.06);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-plan.is-active {
  background: rgba(47, 158, 68, 0.14);
  color: #1f6b31;
}

.account-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-subform {
  padding-top: 14px;
  border-top: 1px solid rgba(31, 47, 55, 0.09);
}

.account-danger-button {
  border-color: rgba(214, 69, 69, 0.34);
  color: #a32d2d;
}

.account-danger-button.primary-button {
  background: var(--red);
  color: #fff;
}

.account-danger-form {
  border-top-color: rgba(214, 69, 69, 0.24);
}

.account-status {
  padding: 12px 14px;
  border-radius: 16px;
  background: #e4f2df;
  border: 1px solid rgba(77, 160, 83, 0.28);
  color: #21382c;
  font-size: 0.92rem;
  line-height: 1.45;
}

.account-status.is-error {
  background: #fbe6e6;
  border-color: rgba(214, 69, 69, 0.32);
  color: #7d2626;
}

.account-status.is-working {
  background: rgba(31, 47, 55, 0.05);
  border-color: rgba(31, 47, 55, 0.12);
  color: var(--muted);
}

.account-form button[disabled],
.account-action-row button[disabled] {
  opacity: 0.55;
  cursor: progress;
}