:root {
  --gridly-app-font-scale: 1;
  --gridly-settings-text-scale: var(--gridly-app-font-scale);
  --gridly-settings-density-scale: 1;
  font-size: calc(16px * var(--gridly-app-font-scale));
  --bg: #050505;
  --bg-elev: #08090b;
  --bg-panel: #0d0f12;
  --card: rgba(16, 18, 21, 0.86);
  --card-soft: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.14);
  --text: #ffffff;
  --muted: #a4acb8;
  --accent: #39f3a4;
  --warning: #ffbf47;
  --danger: #ff5c3d;
  --blue: #66e8ff;
  --gridly-bg-deep: #020812;
  --gridly-surface: #06111f;
  --gridly-surface-strong: #081827;
  --gridly-cyan: #00f5f0;
  --gridly-cyan-soft: rgba(0, 245, 240, 0.24);
  --gridly-border: rgba(0, 245, 240, 0.28);
  --gridly-border-muted: rgba(247, 251, 255, 0.12);
  --gridly-text: #f7fbff;
  --gridly-text-muted: rgba(247, 251, 255, 0.72);
  --gridly-depth-shadow: 0 22px 54px rgba(0, 0, 0, 0.58);
  --gridly-cyan-glow: 0 0 26px rgba(0, 245, 240, 0.14);
  --shadow: 0 26px 60px rgba(0, 0, 0, 0.72);
}


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% -10%, rgba(255, 255, 255, 0.035), transparent 34%),
    radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.02), transparent 28%),
    linear-gradient(180deg, #050505 0%, #060708 42%, #090b0d 100%);
  color: var(--text);
}

.gridly-search-shell[hidden] {
  display: none;
}

.gridly-search-shell {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100% - 32px));
  z-index: 950;
  pointer-events: none;
}

.gridly-search-shell .gridly-search-card {
  pointer-events: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: rgba(8, 9, 11, 0.95);
}

.gridly-search-shell .gridly-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.gridly-search-shell .gridly-search-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0;
}

.gridly-search-shell .gridly-search-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.gridly-search-shell .gridly-search-close-btn:hover,
.gridly-search-shell .gridly-search-close-btn:focus-visible {
  border-color: rgba(123, 224, 255, 0.58);
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.gridly-search-shell .gridly-search-input-row {
  display: flex;
  gap: 8px;
}

.gridly-search-shell .gridly-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 10px 12px;
}

.gridly-search-shell .gridly-search-clear-btn {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  padding: 10px 12px;
  font-weight: 700;
}

.gridly-search-shell .gridly-search-results {
  min-height: 20px;
  margin-top: 10px;
}

.gridly-search-shell .gridly-search-results-status {
  font-size: 0.88rem;
  color: var(--muted);
  padding: 10px 12px;
}

.gridly-search-shell .gridly-search-results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gridly-search-shell .gridly-search-result-item {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.gridly-search-shell .gridly-search-result-item:hover,
.gridly-search-shell .gridly-search-result-item:focus-visible {
  background: rgba(57, 243, 164, 0.1);
  border-color: rgba(57, 243, 164, 0.5);
  outline: none;
  transform: translateY(-1px);
}

.gridly-search-shell .gridly-search-result-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gridly-search-shell .gridly-search-result-meta {
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
}

button,
input,
select {
  font: inherit;
}

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

.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 78px;
  padding: 0 28px;
  background: rgba(5, 5, 5, 0.9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-live-brand {
  display: none;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.brand-logo-frame {
  width: min(285px, 42vw);
  height: 78px;
  max-height: 78px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.brand-logo-img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.beta-pill {
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(67, 230, 160, 0.08);
  border: 1px solid rgba(67, 230, 160, 0.32);
  font-size: 0.75rem;
  font-weight: 850;
  white-space: nowrap;
}


.header-share-btn {
  display: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.header-share-btn:hover,
.header-share-btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
  outline: none;
}
.top-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

.nav-btn,
.primary-btn,
.secondary-btn,
.popup-report-btn,
.search-result-btn,
.trend-item {
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  font-weight: 900;
}

.nav-btn {
  background: transparent;
  color: var(--muted);
  padding: 10px 13px;
}

.mobile-share-nav {
  display: none;
}

.mobile-premium-header {
  display: none;
}

.mobile-quick-actions .secondary-btn svg,
.mobile-location-chip svg,
.mobile-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.nav-btn.active,
.nav-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
}

.primary-btn {
  background: linear-gradient(135deg, #66e8ff, #3dcfe8);
  color: #02070a;
  padding: 12px 16px;
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 12px 16px;
}

.compact-btn {
  padding: 9px 13px;
  width: auto;
}

.smart-alert-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(67, 230, 160, 0.2);
  background: linear-gradient(140deg, rgba(57, 243, 164, 0.11), rgba(255, 255, 255, 0.03));
  color: #e9f6ff;
  font-size: 0.95rem;
  line-height: 1.32;
  text-align: left;
}

.smart-alert-option input {
  margin: 0;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: #43e6a0;
}


.smart-alert-option-label {
  flex: 1 1 auto;
}

.smart-alerts-confirmation {
  min-height: 44px;
  margin: 12px 0 0;
  color: #d8ffe9;
  font-size: 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(67, 230, 160, 0.35);
  background: rgba(67, 230, 160, 0.12);
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.smart-alerts-banner {
  margin-bottom: 14px;
  border: 1px solid rgba(255, 209, 102, 0.35);
  background: rgba(255, 209, 102, 0.12);
  border-radius: 12px;
  padding: 8px 11px;
  color: #ffe4a4;
  font-size: 0.88rem;
  line-height: 1.35;
}

.app-shell {
  width: min(1500px, calc(100% - 28px));
  margin: 16px auto;
}

.dashboard {
  display: grid;
  gap: 11px;
  margin-bottom: 11px;
}

.hero-card,
.setup-card,
.map-card,
.panel-card,
.insight-card,
.report-card,
.growth-card,
.mobile-priority-card,
.mobile-home-card,
.mobile-alerts-panel,
.desktop-business-note {
  background: linear-gradient(180deg, rgba(12, 14, 17, 0.95), rgba(17, 19, 22, 0.93));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 24px;
  backdrop-filter: blur(14px) saturate(125%);
}

.hero-card {
  min-height: 150px;
  background: linear-gradient(155deg, rgba(4, 4, 4, 0.95), rgba(17, 19, 22, 0.9));
  border-color: rgba(255, 255, 255, 0.16);
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 18px;
  align-items: stretch;
}

.driver-hero {
  border-color: rgba(67, 230, 160, 0.12);
}

.hero-main-copy {
  min-width: 0;
}

.hero-command-card {
  display: grid;
  gap: 10px;
  align-content: center;
}

.hero-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.hero-route-btn,
.hero-alerts-btn {
  display: none;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  font-weight: 950;
}

h1,
h2 {
  margin: 0;
  letter-spacing: -0.055em;
}

h1 {
  font-size: clamp(2.15rem, 4vw, 3.35rem);
  line-height: 0.96;
}

h2 {
  font-size: 1.24rem;
}

.subtext,
.map-note {
  color: #b8c9dc;
  max-width: 720px;
  font-size: 0.94rem;
  line-height: 1.42;
}

.subtext {
  margin: 8px 0 0;
}

.map-note {
  margin: 7px 0 0;
  font-size: 0.87rem;
  color: var(--muted);
}

.habit-status-strip {
  margin-top: 11px;
  padding: 11px 13px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  display: grid;
  gap: 4px;
}

.habit-status-strip span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #02070a;
  background: var(--accent);
}

.habit-status-strip strong {
  font-size: 1rem;
}

.habit-status-strip p {
  margin: 0;
  color: var(--muted);
  line-height: 1.32;
  font-size: 0.88rem;
}

.habit-status-strip.delayed span {
  background: var(--warning);
}

.habit-status-strip.high span {
  background: var(--danger);
  color: #fff;
}

.habit-status-strip.high {
  border-color: rgba(255, 92, 122, 0.4);
  background: rgba(255, 92, 122, 0.08);
}

.habit-status-strip.delayed {
  border-color: rgba(255, 209, 102, 0.4);
  background: rgba(255, 209, 102, 0.08);
}

.trust-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.trust-row span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

#syncStatus {
  color: #dfffee;
}

.route-status-card {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  display: grid;
  gap: 5px;
}

.route-status-card strong {
  font-size: 1.78rem;
}

.status-label,
.insight-card span,
.mobile-priority-card span,
.route-summary span,
.growth-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.delayed strong,
.high strong {
  color: var(--danger);
}

.clear strong {
  color: var(--accent);
}

.mobile-priority-strip {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mobile-priority-card {
  padding: 18px;
}

.mobile-priority-card strong {
  display: block;
  font-size: 1.6rem;
  margin: 6px 0;
}

.mobile-priority-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}


.mobile-home-cards {
  display: none;
}

.command-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.growth-card {
  padding: 15px;
}

.growth-card strong {
  display: block;
  font-size: 1.1rem;
  margin: 6px 0;
}

.growth-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: 0.9rem;
}

.corridor-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.corridor-intel-card .trust-pill,
.mobile-corridor-intel-card .trust-pill {
  font-size: 0.68rem;
}

.setup-card {
  padding: 16px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: end;
}

.setup-copy p,
.setup-card p,
.report-copy p,
.desktop-business-note p {
  color: var(--muted);
  margin-bottom: 0;
  line-height: 1.42;
}

.setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

label {
  color: var(--muted);
  font-weight: 900;
  font-size: 0.8rem;
  display: grid;
  gap: 7px;
}

input,
select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text);
  outline: none;
}

select option {
  color: #111827;
}

input:focus,
select:focus {
  border-color: rgba(67, 230, 160, 0.55);
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}

.insight-card {
  padding: 15px;
}

.insight-card strong {
  display: block;
  font-size: 1.28rem;
  margin: 6px 0;
}

.insight-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: 0.9rem;
}

.command-center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 8px;
  margin-bottom: 11px;
  align-items: stretch;
}

.map-card {
  padding: 10px;
  min-width: 0;
  background: linear-gradient(180deg, rgba(10, 11, 13, 0.95), rgba(16, 18, 21, 0.92));
  border-color: rgba(255, 255, 255, 0.18);
}

.desktop-route-watch-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, rgba(15, 18, 21, 0.95), rgba(24, 29, 34, 0.88));
}

.route-watch-strip-copy {
  min-width: 0;
}

.route-watch-strip-copy strong,
.route-watch-strip-copy p {
  display: block;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-watch-strip-copy strong {
  margin: 3px 0 4px;
}

.route-watch-strip-copy p {
  color: var(--muted);
  font-size: 0.86rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 9px;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.report-mode-banner {
  display: none;
  margin-bottom: 9px;
  padding: 8px 11px;
  border-radius: 16px;
  border: 1px solid rgba(67, 230, 160, 0.34);
  background: rgba(67, 230, 160, 0.1);
  color: #dfffee;
}

.report-mode-banner.visible {
  display: grid;
  gap: 4px;
}

.report-mode-banner span {
  color: var(--muted);
  line-height: 1.35;
}

.geo-filter-shell {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.geo-filter-pill {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.geo-filter-pill:hover,
.geo-filter-pill:focus-visible {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.09);
  outline: none;
}

.geo-filter-pill.selected {
  color: #02070a;
  border-color: transparent;
  background: linear-gradient(135deg, #66e8ff, #3dcfe8);
}

.geo-filter-status {
  margin: 4px 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(145deg, rgba(14, 16, 19, 0.94), rgba(22, 27, 31, 0.9));
  color: #eef8ff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  box-shadow: 0 8px 20px rgba(7, 16, 30, 0.32);
}

#map {
  position: relative;
  height: 610px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0e1319;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 18px 48px rgba(0, 0, 0, 0.58);
  filter: saturate(0.9) contrast(1.08) brightness(0.9);
}

#map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 13, 17, 0.08), rgba(4, 7, 10, 0.24)),
    radial-gradient(circle at 20% 18%, rgba(92, 228, 255, 0.08), transparent 36%);
  mix-blend-mode: screen;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  height: 610px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 10px;
  box-shadow: var(--shadow);
}

.desktop-command-panel {
  height: auto;
  min-height: 610px;
  max-height: none;
  overflow: visible;
  align-self: stretch;
}

.panel-card {
  padding: 14px;
}
.drawer-panel {
  padding: 0;
}

.drawer-summary {
  list-style: none;
  cursor: pointer;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.drawer-summary::-webkit-details-marker {
  display: none;
}

.drawer-summary::after {
  content: "â–¾";
  color: var(--muted);
  font-size: 0.9rem;
}

.drawer-panel:not([open]) .drawer-summary::after {
  content: "â–¸";
}

.drawer-summary .eyebrow {
  margin: 0;
}

.drawer-body {
  padding: 0 14px 14px;
}

.route-summary,
.trending-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.route-summary div,
.trend-item {
  padding: 11px;
  border-radius: 15px;
  background: var(--card-soft);
}

.route-summary strong {
  display: block;
  margin-top: 5px;
}

.trend-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  color: var(--text);
}

.trend-item strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 3px;
}

.trend-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.28;
}

.trend-item.hot {
  border-color: rgba(255, 92, 122, 0.42);
  background: rgba(255, 92, 122, 0.08);
}

.trend-item.clear {
  border-color: rgba(67, 230, 160, 0.34);
  background: rgba(67, 230, 160, 0.08);
}

.trend-item.muted {
  color: var(--muted);
}

.combined-module-block + .combined-module-block {
  margin-top: 12px;
}

.combined-module-block h3 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.route-summary-inline {
  margin-top: 0;
}

.route-summary-inline p {
  margin: 0;
  padding: 11px;
  border-radius: 15px;
  background: var(--card-soft);
  border: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-watch-secondary-note {
  font-size: 0.78rem;
  opacity: 0.82;
}


.route-status-card {
  cursor: pointer;
}

.route-status-card:focus-visible {
  outline: 2px solid rgba(102, 232, 255, 0.7);
  outline-offset: 2px;
}

.route-edit-link {
  display: none;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.82rem;
  text-decoration: underline;
}


@media (min-width: 1101px) {
  .desktop-route-watch-rail {
    display: none;
  }
}

/* Gridly V18 style fix: keep basemap color true-to-source for command-center readability. */
#map,
#map::before,
#map::after,
#map .leaflet-pane,
#map .leaflet-layer,
#map .leaflet-tile-pane .leaflet-tile,
#map .leaflet-roadsPane-pane .leaflet-tile,
#map .leaflet-railPane-pane .leaflet-tile,
#map .leaflet-labelsPane-pane .leaflet-tile,
#map .leaflet-control-zoom,
#map .leaflet-control-attribution,
.leaflet-tile,
.map-card::before {
  filter: none !important;
  mix-blend-mode: normal !important;
}

#map::before,
#map::after,
.map-card::before {
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}
@media (max-width: 1100px) {
  .desktop-route-watch-strip {
    display: none;
  }

  .route-edit-link {
    display: inline-flex;
    align-self: flex-start;
  }
}

.route-setup-modal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: grid;
  place-items: end center;
}

.route-setup-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 15, 0.62);
}

.route-setup-modal-card {
  position: relative;
  width: min(560px, 100%);
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--border);
  background: rgba(13, 15, 18, 0.98);
  padding: 18px;
  max-height: min(92svh, 760px);
  overflow-y: auto;
  box-shadow: 0 -22px 60px rgba(0, 0, 0, 0.5);
}

.route-setup-modal-card .route-setup-grid-mobile {
  min-height: 0;
}

.route-modal-close {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 700;
  color: #eaf4ff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
}

.route-modal-close:hover,
.route-modal-close:focus-visible {
  background: rgba(102, 232, 255, 0.12);
  border-color: rgba(102, 232, 255, 0.35);
}

body.route-setup-open #gridlyHazardLauncher {
  opacity: 0 !important;
  pointer-events: none !important;
}

.route-setup-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.route-setup-grid-mobile {
  margin-top: 12px;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.route-setup-grid-mobile label {
  width: 100%;
}

.route-setup-grid-mobile .primary-btn,
.route-setup-grid-mobile .secondary-btn {
  width: 100%;
}

@media (max-width: 1100px) {
  .route-setup-modal {
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .route-setup-modal-card {
    width: min(520px, calc(100% - 10px));
    padding: 12px 12px calc(10px + env(safe-area-inset-bottom));
    max-height: min(82svh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 16px 16px 0 0;
    border-color: rgba(142, 204, 255, 0.28);
    background: linear-gradient(180deg, rgba(10, 19, 31, 0.97), rgba(6, 12, 21, 0.98));
  }

  .route-setup-modal-head {
    margin-bottom: 8px;
  }

  .route-setup-grid-mobile {
    margin-top: 8px;
    gap: 8px;
  }

  .route-setup-grid-mobile label {
    gap: 5px;
    font-size: 0.76rem;
  }

  .route-setup-grid-mobile input {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
  }

  .route-setup-grid-mobile .primary-btn,
  .route-setup-grid-mobile .secondary-btn {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 0.84rem;
  }

  .route-setup-grid-mobile .primary-btn {
    box-shadow: 0 10px 24px rgba(102, 232, 255, 0.12);
  }

  .route-setup-grid-mobile .secondary-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.22);
  }
}

@media (min-width: 1101px) {
  .route-setup-modal {
    place-items: center;
    padding: 32px 16px;
  }

  .route-setup-modal-card {
    border-radius: 22px;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
  }
}

.smart-alerts-modal {
  position: fixed;
  inset: 0;
  z-index: 3200;
}

.smart-alerts-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 20, 0.62);
}

.smart-alerts-modal-card {
  position: relative;
  width: min(760px, calc(100% - 32px));
  margin: 6vh auto 0;
  background: var(--card);
  border: 1px solid rgba(67, 230, 160, 0.28);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
}

.smart-alerts-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.smart-alerts-subtitle {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.smart-alert-options-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 520px);
  margin: 0 auto 14px;
}

.smart-alerts-confirmation:empty {
  display: none;
}

.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 3250;
}

.settings-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 20, 0.62);
}

.settings-modal-card {
  position: relative;
  width: min(620px, calc(100% - 32px));
  margin: 9vh auto 0;
  background: var(--card);
  border: 1px solid rgba(67, 230, 160, 0.28);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
  max-height: calc(100vh - 18vh);
  overflow-y: auto;
}

.settings-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.settings-modal-subtitle { margin: 0 0 12px; color: var(--muted); }
.settings-modal-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; }

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

.settings-place-grid,
.settings-toggle-grid,
.settings-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.settings-place-card,
.settings-toggle-row,
.settings-select-grid label {
  border: 1px solid rgba(171, 204, 238, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  padding: 10px;
}

.settings-place-card { display: grid; gap: 4px; align-content: start; }
.settings-place-card-wide { grid-column: 1 / -1; }
.settings-place-label { color: var(--muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; }
.settings-place-card small,
.settings-placeholder-note,
.settings-save-status { color: var(--muted); }
.settings-saved-places-list { display: grid; gap: 8px; margin-top: 10px; }
.settings-saved-place-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(12, 24, 38, 0.55); }
.settings-notification-notice {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(171, 204, 238, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}
.settings-toggle-row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.settings-select-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 0.85rem; }
.settings-select-grid select { width: 100%; min-height: 38px; border-radius: 10px; }
.settings-save-status { min-height: 1.2em; margin: 10px 0 0; }

.settings-feedback-flow {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(57, 243, 164, 0.22);
  border-radius: 14px;
  background: rgba(10, 22, 34, 0.68);
}
.settings-feedback-flow[hidden] { display: none; }
.settings-feedback-flow h3 { margin: 0; }
.settings-feedback-category {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(171, 204, 238, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}
.settings-feedback-category legend,
.settings-feedback-message-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.settings-feedback-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.settings-feedback-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  min-width: min(100%, 132px);
  flex: 1 1 calc(50% - 10px);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.settings-feedback-chip input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.settings-feedback-chip-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.settings-feedback-chip input:checked + .settings-feedback-chip-text::before {
  content: "✓";
  font-weight: 950;
}
.settings-feedback-chip:has(input:checked) {
  color: #02070a;
  border-color: transparent;
  background: linear-gradient(135deg, #66e8ff, #3dcfe8);
  box-shadow: 0 12px 26px rgba(61, 207, 232, 0.2);
}
.settings-feedback-chip:hover,
.settings-feedback-chip:focus-within {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.09);
}
.settings-feedback-chip:has(input:checked):hover,
.settings-feedback-chip:has(input:checked):focus-within {
  color: #02070a;
  background: linear-gradient(135deg, #66e8ff, #3dcfe8);
}
.settings-feedback-chip:focus-within {
  outline: 2px solid rgba(102, 232, 255, 0.65);
  outline-offset: 3px;
}
.settings-feedback-helper {
  margin: -2px 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
}
.settings-feedback-prompt {
  margin: 2px 0 -4px;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 850;
}
.settings-feedback-flow textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border: 1px solid rgba(171, 204, 238, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  padding: 10px;
  font: inherit;
}
.settings-feedback-flow textarea::placeholder { color: rgba(220, 232, 245, 0.54); }
.settings-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.settings-feedback-actions .compact-btn {
  flex: 1 1 180px;
}
.settings-feedback-actions .compact-btn[disabled] {
  cursor: wait;
  opacity: 0.72;
}

.settings-list-experience {
  display: grid;
  gap: 8px;
}

.settings-list-section {
  border: 1px solid rgba(171, 204, 238, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.settings-list-section.settings-modal-section {
  margin: 0;
}

.settings-list-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.settings-list-summary::-webkit-details-marker {
  display: none;
}

.settings-list-summary::after {
  content: "";
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 2;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(183, 220, 255, 0.18);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.055);
  background-image:
    linear-gradient(rgba(230, 245, 255, 0.9), rgba(230, 245, 255, 0.9)),
    linear-gradient(rgba(230, 245, 255, 0.9), rgba(230, 245, 255, 0.9));
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 9px 2px, 2px 9px;
  transition: background-size 0.18s ease, opacity 0.18s ease;
}

.settings-list-section[open] .settings-list-summary::after {
  background-size: 9px 2px, 2px 0;
}

.settings-list-title {
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.settings-list-meta {
  grid-column: 1 / 2;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25;
}

.settings-list-detail {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.settings-list-detail > p:first-child,
.settings-list-detail .settings-select-grid:first-child,
.settings-list-detail .settings-place-grid:first-child,
.settings-list-detail .settings-toggle-grid:first-child {
  margin-top: 0;
}


@media (max-width: 640px) {
  .settings-modal-card {
    width: min(100% - 20px, 620px);
    margin-top: 6vh;
    padding: 14px;
    max-height: calc(100vh - 12vh);
  }

  .settings-section-head,
  .settings-place-grid,
  .settings-toggle-grid,
  .settings-select-grid { grid-template-columns: 1fr; }
  .settings-section-head { align-items: stretch; }
}

body.modal-open {
  overflow: hidden;
}

.rail-manage-alerts-btn {
  margin-top: 10px;
  width: 100%;
}

.alerts-list,
.trending-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.alerts-list::-webkit-scrollbar,
.trending-list::-webkit-scrollbar,
.desktop-command-panel::-webkit-scrollbar {
  width: 6px;
}

.alerts-list::-webkit-scrollbar-thumb,
.trending-list::-webkit-scrollbar-thumb,
.desktop-command-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.impact-meter {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
  margin: 10px 0;
}

.impact-fill {
  height: 100%;
  width: 42%;
  background: linear-gradient(90deg, var(--accent), var(--warning), var(--danger));
  border-radius: inherit;
}

#impactScore {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 4px;
}

#impactText {
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
  font-size: 0.9rem;
}

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

.alert-item {
  padding: 9px 10px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--border);
}

.alert-item.high {
  border-color: rgba(255, 92, 122, 0.45);
  background: rgba(255, 92, 122, 0.08);
}

.alert-item.cleared {
  border-color: rgba(67, 230, 160, 0.35);
  background: rgba(67, 230, 160, 0.08);
}

.alert-item strong {
  display: block;
  margin-bottom: 4px;
}

.alert-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.24;
}

.alert-item .alert-meta {
  margin-top: 5px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

@media (min-width: 1101px) {
  .desktop-command-panel {
    gap: 5px;
    padding: 8px;
  }

  .desktop-command-panel .panel-card {
    border-radius: 16px;
  }

  .desktop-command-panel .drawer-summary {
    padding: 10px 11px;
  }

  .desktop-command-panel .drawer-body {
    padding: 0 11px 11px;
  }

  .desktop-command-panel .combined-module-block + .combined-module-block {
    margin-top: 10px;
  }

  .desktop-command-panel .combined-module-block h3 {
    margin: 0 0 6px;
    font-size: 0.76rem;
  }

  .desktop-command-panel .trend-item,
  .desktop-command-panel .route-summary div,
  .desktop-command-panel .route-summary-inline p {
    padding: 8px 9px;
    border-radius: 12px;
  }

  .desktop-command-panel .trend-item strong {
    font-size: 0.86rem;
    margin-bottom: 2px;
  }

  .desktop-command-panel .trend-item p {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .desktop-command-panel .alerts-list {
    gap: 5px;
  }

  .desktop-command-panel .alert-item strong {
    font-size: 0.84rem;
    margin-bottom: 2px;
  }

  .desktop-command-panel .alert-meta {
    gap: 4px;
  }

  .desktop-command-panel .rail-manage-alerts-btn {
    margin-top: 8px;
  }

  .desktop-route-watch-rail {
    display: none !important;
  }

  #gridlyHazardLauncher.gridly-hazard-launcher {
    right: auto !important;
    left: 22px !important;
    bottom: 26px !important;
    max-width: min(360px, calc(100vw - 44px));
  }
}

.source-pill,
.trust-pill,
.alert-count-pill {
  display: inline-block;
  margin-top: 7px;
  margin-right: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.trust-pill,
.alert-count-pill {
  color: #dfffee;
  background: rgba(67, 230, 160, 0.13);
  border: 1px solid rgba(67, 230, 160, 0.24);
}

.mobile-alerts-panel {
  display: none;
  padding: 18px;
  margin-bottom: 18px;
}

.mobile-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-alerts-note {
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.report-card {
  padding: 16px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  align-items: start;
}

.report-drawer-summary {
  display: none;
}

.report-drawer-summary h2 {
  font-size: 1.02rem;
}

.confirmation-box {
  margin-top: 16px;
  padding: 14px 15px;
  border-radius: 16px;
  background: rgba(126, 173, 214, 0.09);
  border: 1px solid rgba(126, 173, 214, 0.24);
  color: var(--muted);
  line-height: 1.5;
  letter-spacing: 0.01em;
  min-height: 48px;
  display: flex;
  align-items: center;
  transition: opacity 260ms ease, transform 260ms ease, border-color 260ms ease, background-color 260ms ease;
}

.confirmation-box.success {
  color: #9ed7bd;
  border-color: rgba(111, 187, 151, 0.42);
  background: rgba(81, 164, 125, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.confirmation-box.info {
  color: #9ed8ff;
  border-color: rgba(126, 173, 214, 0.46);
  background: rgba(91, 155, 213, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.confirmation-box.is-fading {
  opacity: 0;
  transform: translateY(-2px);
}

.confirmation-box.error {
  color: #ff8fa3;
  border-color: rgba(255, 92, 122, 0.6);
  background: rgba(255, 92, 122, 0.1);
}

.share-card,
.quick-clear-card {
  display: none;
  margin-top: 14px;
  padding: 14px;
  border-radius: 20px;
}

.share-card {
  border: 1px solid rgba(102, 232, 255, 0.2);
  background: rgba(102, 232, 255, 0.08);
}

.quick-clear-card {
  border: 1px solid rgba(67, 230, 160, 0.32);
  background: rgba(67, 230, 160, 0.1);
}

.share-card.visible,
.quick-clear-card.visible {
  display: grid;
  gap: 8px;
}

.share-card strong,
.quick-clear-card strong {
  font-size: 1rem;
}

.share-card p,
.quick-clear-card p {
  margin: 0;
  color: var(--muted);
}

/* Legacy in-content Share card is retired; Share now lives in header/nav. */
#reportSection #shareCard,
#reportSection #shareCard.visible {
  display: none !important;
}

.report-tools {
  display: grid;
  grid-template-columns: 1fr 1fr 165px;
  gap: 11px;
  align-items: end;
}

.report-buttons {
  grid-column: 1 / -1;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.search-results {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.search-result-btn {
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.search-result-btn span {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
  margin-top: 4px;
}

.gridly-marker {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #3be0ff;
  border: 2px solid rgba(2, 10, 16, 0.92);
  box-shadow:
    0 0 0 2px rgba(188, 246, 255, 0.42),
    0 0 18px rgba(59, 224, 255, 0.44);
}

.gridly-marker.alert {
  background: #ff4e6f;
  animation: pulse 1.4s infinite;
}

.gridly-marker.cleared {
  background: #30f0a6;
  box-shadow:
    0 0 0 2px rgba(168, 255, 224, 0.46),
    0 0 16px rgba(67, 230, 160, 0.42);
}

.gridly-marker.nearby {
  box-shadow:
    0 0 0 8px rgba(67, 230, 160, 0.24),
    0 0 0 18px rgba(67, 230, 160, 0.1);
}

.gridly-popup {
  color: #101820;
  min-width: 250px;
}

.gridly-popup strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 4px;
}

.gridly-popup span {
  color: #506070;
}

.popup-report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 10px;
}

.popup-report-btn {
  position: relative;
  padding: 9px 10px;
  font-size: 0.82rem;
  color: #02070a;
  transition:
    transform 0.14s ease,
    opacity 0.14s ease,
    box-shadow 0.14s ease,
    filter 0.14s ease;
}

.popup-report-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.popup-report-btn:active {
  transform: scale(0.9);
  filter: brightness(1.18);
}

.popup-report-btn.is-submitting {
  opacity: 0.8;
  pointer-events: none;
  transform: scale(0.94);
  box-shadow: 0 0 0 5px rgba(102, 232, 255, 0.2);
}

.popup-report-btn.is-success {
  opacity: 1;
  pointer-events: none;
  transform: scale(1.01);
  box-shadow: 0 0 0 3px rgba(102, 192, 150, 0.28);
  filter: brightness(1.06);
}

.popup-report-btn.danger {
  background: var(--danger);
}

.popup-report-btn.warning {
  background: var(--warning);
}

.popup-report-btn.blue {
  background: var(--blue);
}

.popup-report-btn.neutral {
  background: #4b5563;
  color: white;
}

.desktop-business-note {
  padding: 18px;
  margin-top: 11px;
}

.mobile-sticky-report {
  display: none;
}

.app-footer {
  width: min(1500px, calc(100% - 28px));
  margin: 0 auto 24px;
  color: var(--muted);
  text-align: center;
  font-size: 0.84rem;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 92, 122, 0.45);
  }

  100% {
    box-shadow: 0 0 0 18px rgba(255, 92, 122, 0);
  }
}



@media (min-width: 1101px) {
  .dashboard {
    gap: 8px;
    margin-bottom: 8px;
  }

 .hero-card {
    min-height: 0;
    padding: 10px 14px;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 220px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
  }

  .hero-main-copy h1 {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    line-height: 1.12;
  }

  .subtext,
  .habit-status-strip p {
    display: none;
  }

  .habit-status-strip {
    margin-top: 4px;
    padding: 6px 9px;
    border-radius: 12px;
    gap: 3px;
  }

  .trust-row {
    margin-top: 6px;
    gap: 8px;
  }

  .route-status-card {
    padding: 13px;
    border-radius: 16px;
  }

  .route-status-card strong {
    font-size: 1.45rem;
  }

  .hero-actions .primary-btn,
  .hero-actions .secondary-btn {
    padding: 10px 14px;
  }

  .desktop-command-strip,
  .desktop-route-setup,
  .desktop-insights {
    display: none;
  }

  .growth-card,
  .insight-card,
  .setup-card {
    padding: 12px;
  }

  .growth-card strong,
  .insight-card strong {
    font-size: 1rem;
  }

  .growth-card p,
  .insight-card p,
  .setup-copy p {
    font-size: 0.84rem;
  }

  .setup-card {
    grid-template-columns: 200px 1fr;
    gap: 10px;
  }

  .setup-card .eyebrow {
    margin-bottom: 4px;
  }

  .setup-card h2 {
    font-size: 1.04rem;
  }

  .setup-grid {
    gap: 8px;
  }

  .setup-grid input {
    padding: 10px 11px;
  }

  .insight-grid {
    gap: 8px;
  }

  .command-center {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 10px;
  }

  .map-card {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 26px 58px rgba(2, 8, 17, 0.52);
  }

  .map-header h2 {
    font-size: 1.16rem;
  }

  .geo-filter-shell {
    margin-bottom: 8px;
  }

  .geo-filter-status {
    margin: 2px 0 10px;
  }

  #map {
    height: 650px;
  }

 .side-panel {
    background: rgba(13, 20, 33, 0.86);
  }

  .panel-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: none;
  }

 .hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 0;
    padding: 10px 14px;
  }

  .hero-main-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  #timeContext,
  #greetingTitle,
  #greetingSubtitle,
  #habitStatusDetail,
  .hero-command-card {
    display: none;
  }

  .habit-status-strip {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
  }

  .habit-status-strip strong {
    font-size: 0.88rem;
  }

  .trust-row {
    margin: 0;
  }

  .trust-row span {
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
  }

  .hero-route-btn,
  .hero-alerts-btn {
    display: none;
  }

  #desktopReportNearMeBtn {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 1900;
    width: auto;
    min-width: 164px;
    padding: 10px 14px;
    font-size: 0.88rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  }

  .desktop-business-note {
    display: none;
  }

  .report-drawer {
    display: block;
    padding: 0;
  }

  .report-drawer-summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .report-drawer-summary::-webkit-details-marker {
    display: none;
  }

  .report-drawer-summary::after {
    content: "â–¾";
    color: var(--muted);
    font-size: 0.9rem;
  }

  .report-drawer:not([open]) .report-drawer-summary::after {
    content: "â–¸";
  }

  .report-drawer .report-copy,
  .report-drawer .report-tools {
    padding: 0 16px 16px;
  }

  .report-drawer .report-copy {
    padding-top: 2px;
  }
}
@media (max-width: 1100px) {
  .app-header {
    height: auto;
    min-height: 116px;
    padding: 10px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .brand-wrap {
    width: 100%;
    flex-wrap: wrap;
  }

  .brand-logo-frame {
    width: min(280px, 56vw);
    height: 82px;
    max-height: 82px;
  }

  .brand-logo-img {
    width: 100%;
    height: 100%;
  }

  .top-nav {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .hero-card,
  .setup-card,
  .command-center,
  .report-card {
    grid-template-columns: 1fr;
  }

  .setup-grid,
  .insight-grid,
  .command-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .report-tools {
    grid-template-columns: 1fr;
  }

  .desktop-command-panel {
    height: auto;
    max-height: none;
  }
}

@media (max-width: 700px) {
  .app-header {
    min-height: 82px;
    padding: 10px 14px 8px;
    background: linear-gradient(180deg, rgba(5, 12, 22, 0.98), rgba(5, 11, 19, 0.92));
    border-bottom: 1px solid rgba(125, 173, 245, 0.26);
    box-shadow: 0 10px 24px rgba(2, 7, 15, 0.42);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 11px;
  }

  .brand-wrap {
    width: 100%;
    gap: 9px;
    flex-wrap: wrap;
    align-items: center;
  }

  .brand-logo-frame {
    width: min(196px, 62vw);
    height: 56px;
    max-height: 56px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }

  .brand-logo-img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
  }

  .beta-pill {
    font-size: 0.66rem;
    padding: 6px 11px;
    white-space: nowrap;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-color: rgba(67, 230, 160, 0.44);
    background: linear-gradient(145deg, rgba(67, 230, 160, 0.12), rgba(67, 230, 160, 0.04));
    box-shadow: inset 0 1px 0 rgba(160, 255, 214, 0.22);
  }

  .header-share-btn {
    display: none;
  }

  .mobile-share-nav {
    display: inline-flex;
    align-items: center;
    color: rgba(220, 229, 245, 0.72);
    font-weight: 800;
  }

  .mobile-share-nav:hover,
  .mobile-share-nav:focus-visible {
    color: var(--text);
  }

  .top-nav {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    gap: 4px;
    padding: 0 1px 2px;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .nav-btn {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    font-weight: 820;
    flex-shrink: 0;
    border: 1px solid transparent;
  }

  .nav-btn.active {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(214, 234, 255, 0.2);
    background: linear-gradient(145deg, rgba(102, 232, 255, 0.12), rgba(255, 255, 255, 0.04));
  }

  .desktop-only-nav,
  .desktop-command-strip,
  .desktop-route-setup,
  .desktop-insights,
  .desktop-command-panel,
  .desktop-business-note {
    display: none !important;
  }

  .app-shell {
    width: calc(100% - 20px);
    margin: 10px auto 104px;
  }

  .dashboard {
    gap: 10px;
    margin-bottom: 10px;
  }

 .hero-card {
    display: none;
  }

  .hero-command-card {
    display: grid;
    gap: 10px;
  }

  h1 {
    font-size: 2.35rem;
    line-height: 1.02;
    letter-spacing: -0.02em;
  }

  .subtext {
    font-size: 0.96rem;
    line-height: 1.45;
    color: #d8e8ff;
    margin-bottom: 0;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero-route-btn,
  .hero-alerts-btn {
    display: inline-flex;
    justify-content: center;
  }

  .habit-status-strip {
    margin-top: 16px;
    padding: 13px 14px;
    border-radius: 18px;
    border: 1px solid rgba(129, 183, 255, 0.25);
    background: linear-gradient(145deg, rgba(57, 129, 221, 0.18), rgba(70, 198, 158, 0.12));
  }

  .trust-row {
    gap: 8px;
  }

  .trust-row span {
    font-size: 0.72rem;
  }

  .route-status-card {
    padding: 18px;
    border: 1px solid rgba(132, 183, 255, 0.26);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(62, 129, 221, 0.1));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .hero-command-card {
    gap: 12px;
  }

  .route-status-card strong {
    font-size: 1.65rem;
  }

  .mobile-priority-strip {
    display: none;
  }

  .mobile-premium-header {
    display: grid;
    gap: 9px;
    padding: 8px 11px;
    border-radius: 20px;
    border: 1px solid rgba(128, 177, 247, 0.3);
    background: linear-gradient(140deg, rgba(12, 23, 40, 0.96), rgba(10, 18, 34, 0.97));
    box-shadow: 0 16px 30px rgba(4, 8, 16, 0.38), inset 0 1px 0 rgba(187, 220, 255, 0.08);
  }
  .mobile-premium-location { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .mobile-location-chip,
  .mobile-weather-chip { border-radius:999px; border:1px solid rgba(255, 255, 255, 0.24); background: linear-gradient(145deg, rgba(21, 24, 29, 0.92), rgba(13, 15, 19, 0.92)); color:#e9eef5; font-size:.74rem; font-weight:760; letter-spacing:.01em; padding:6px 10px; min-height: 30px; }
  .mobile-weather-chip { appearance:none; -webkit-appearance:none; }
  .mobile-location-chip { display:inline-flex; align-items:center; gap:6px; }
  .mobile-premium-actions { display:flex; gap:7px; justify-content:flex-end; }
  .mobile-icon-btn,
  .mobile-avatar-btn { width:33px; height:33px; border-radius:999px; border:1px solid rgba(255, 255, 255, 0.26); background: linear-gradient(145deg, rgba(24, 27, 32, 0.9), rgba(14, 16, 20, 0.94)); color:#e9eef5; display:grid; place-items:center; transition:transform .2s ease, background .2s ease, border-color .2s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .mobile-avatar-btn span { width:14px; height:14px; border-radius:50%; background: linear-gradient(160deg,#b8d6ff,#7faeff); display:block; box-shadow:0 0 0 5px rgba(184,214,255,.2); }
  .mobile-home-card > span { font-weight:700; letter-spacing:.01em; color:#d5e8ff; font-size:.8rem; text-transform:uppercase; }
  .mobile-home-card strong { font-weight:850; }
  .mobile-live-hero.clear-status { border-color: rgba(112, 233, 183, 0.58); box-shadow: 0 0 0 1px rgba(112,233,183,.14),0 0 26px rgba(67,230,160,.2),0 18px 34px rgba(3,9,20,.45); }
  .mobile-live-hero.delay-status { border-color: rgba(255, 209, 111, 0.64); background: radial-gradient(circle at 86% 16%, rgba(255, 204, 102, 0.28), transparent 38%), linear-gradient(160deg, rgba(104, 78, 18, 0.58), rgba(25, 22, 16, 0.94)); }
  .mobile-live-hero.blocked-status { border-color: rgba(255, 109, 139, 0.75); background: radial-gradient(circle at 84% 18%, rgba(255, 111, 142, 0.35), transparent 40%), linear-gradient(160deg, rgba(102, 27, 42, 0.72), rgba(30, 12, 20, 0.95)); }
  .mobile-quick-actions .secondary-btn { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
  .mobile-quick-actions .secondary-btn:active,
  .mobile-icon-btn:active,
  .mobile-avatar-btn:active,
  .mobile-location-chip:active,
  .mobile-weather-chip:active { transform: translateY(1px) scale(0.985); }
  .mobile-location-chip:focus-visible,
  .mobile-weather-chip:focus-visible,
  .mobile-icon-btn:focus-visible,
  .mobile-avatar-btn:focus-visible {
    outline: 2px solid rgba(161, 208, 255, 0.95);
    outline-offset: 2px;
  }

  .section-header.map-header {
    display: none;
  }

  .dashboard {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .future-map-hero,
  .driver-hero,
  .destination-hero-card,
  .desktop-command-strip,
  .desktop-route-setup,
  .desktop-insights {
    display: none;
  }

  .mobile-premium-header,
  .destination-hero-card,
  .mobile-home-cards {
    position: relative;
    z-index: 6;
  }

  .command-center {
    position: relative;
    overflow: visible;
  }

  .map-card {
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  .mobile-live-command {
    position: absolute;
    top: 58px;
    left: 10px;
    right: 10px;
    z-index: 700;
    margin: 0;
    border-radius: 16px;
    border: 1px solid rgba(145, 204, 255, 0.38);
    background: linear-gradient(145deg, rgba(8, 19, 33, 0.82), rgba(5, 12, 23, 0.88));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 32px rgba(3, 9, 22, 0.45), 0 0 40px rgba(45, 135, 255, 0.14);
  }

  .mobile-live-command .compact-btn {
    min-height: 34px;
    padding: 8px 12px;
    font-size: .78rem;
  }

  .desktop-route-watch-strip {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 120px;
    z-index: 680;
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(7, 17, 32, 0.74), rgba(5, 13, 24, 0.78));
    border: 1px solid rgba(133, 185, 255, 0.34);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .desktop-route-watch-strip .route-watch-metrics,
  .desktop-route-watch-strip .route-watch-setup-hint,
  .desktop-route-watch-actions {
    display: none;
  }

  .map-frame {
    order: 2;
    margin: 0 -10px 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    min-height: 70vh;
    box-shadow: 0 34px 54px rgba(2, 8, 20, 0.56), inset 0 -60px 120px rgba(2, 14, 28, 0.35);
    overflow: hidden;
    isolation: isolate;
  }

  .map-frame::before {
    content: "";
    position: absolute;
    inset: -18% -10%;
    pointer-events: none;
    background: radial-gradient(circle at 70% 18%, rgba(102, 194, 255, 0.24), transparent 42%),
      radial-gradient(circle at 20% 80%, rgba(63, 255, 183, 0.14), transparent 45%);
    animation: mapAmbientDrift 12s ease-in-out infinite alternate;
    z-index: 300;
  }

  #map {
    min-height: 70vh;
  }

  .geo-filter-status {
    order: 3;
    margin-top: -6px;
    border-radius: 0 0 18px 18px;
    border-top: none;
    background: linear-gradient(180deg, rgba(7, 13, 23, 0.78), rgba(4, 9, 16, 0.94));
  }

  .mobile-home-cards { display: none; }

  .mobile-home-card {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: linear-gradient(155deg, rgba(13, 22, 37, 0.82), rgba(8, 15, 28, 0.82));
  }

  .mobile-home-card:nth-child(n + 5) {
    display: none;
  }

  .mobile-route-decision-card {
    border-color: rgba(255, 198, 104, 0.5);
    box-shadow: 0 18px 32px rgba(4, 8, 16, 0.44), 0 0 0 1px rgba(255, 198, 104, 0.2);
  }

  .mobile-route-decision-card span {
    color: #ffd489;
  }

  .mobile-map-floating-chips {
    top: 150px;
    left: 10px;
    right: 10px;
    z-index: 760;
  }

  .map-tools-overlay {
    left: 10px;
    right: 10px;
    bottom: 86px;
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(8, 15, 28, 0.8), rgba(9, 17, 30, 0.74));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .mobile-floating-action-dock {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: linear-gradient(145deg, rgba(9, 15, 25, 0.82), rgba(7, 13, 23, 0.84));
    box-shadow: 0 16px 30px rgba(2, 9, 20, 0.48), 0 0 34px rgba(90, 164, 255, 0.16);
  }

  .report-drawer {
    margin-top: -8px;
    border-top: 1px solid rgba(118, 171, 243, 0.24);
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, rgba(6, 12, 22, 0.96), rgba(4, 9, 17, 0.98));
  }

  .report-copy > p,
  .confirmation-box,
  .share-card,
  .quick-clear-card,
  .report-tools-advanced {
    display: none;
  }

  .mobile-report-mode-card {
    margin-top: 8px;
  }

  @keyframes mapAmbientDrift {
    0% { transform: scale(1) translate3d(0, 0, 0); opacity: .7; }
    100% { transform: scale(1.08) translate3d(-2%, 2%, 0); opacity: 1; }
  }

  .mobile-home-cards {
    display: none;
    gap: 12px;
  }

  .mobile-home-card {
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px solid rgba(128, 177, 247, 0.26);
    background: linear-gradient(155deg, rgba(16, 28, 46, 0.95), rgba(11, 21, 35, 0.94));
    box-shadow: 0 16px 30px rgba(4, 8, 16, 0.34), inset 0 1px 0 rgba(194, 223, 255, 0.06);
  }

  .mobile-premium-status-bar {
    display: grid;
    gap: 8px;
    background: linear-gradient(145deg, rgba(33, 72, 128, 0.5), rgba(16, 29, 47, 0.95));
    border-color: rgba(137, 188, 255, 0.44);
  }

  .mobile-premium-status-bar > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-premium-status-bar strong {
    margin: 0;
    font-size: 1rem;
  }

  .mobile-live-hero {
    padding: 18px 16px 16px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 88% 18%, rgba(255, 212, 120, 0.2), transparent 36%),
      linear-gradient(160deg, rgba(25, 70, 140, 0.72), rgba(7, 22, 43, 0.96));
    border-color: rgba(120, 193, 255, 0.58);
    box-shadow: 0 18px 34px rgba(3, 9, 20, 0.45), inset 0 0 0 1px rgba(199, 228, 255, 0.12);
  }

  .mobile-live-hero strong {
    font-size: 2rem;
    margin-top: 6px;
    letter-spacing: -0.02em;
    line-height: 1.03;
  }

  .mobile-live-hero p {
    color: #d8e9ff;
    margin-top: 6px;
    line-height: 1.45;
  }
  .mobile-hero-map-cta {
    width: 100%;
    margin-top: 12px;
    min-height: 48px;
    border-radius: 12px;
    font-size: .96rem;
    box-shadow: 0 12px 24px rgba(2, 8, 20, 0.4), inset 0 1px 0 rgba(255,255,255,.18);
  }

  .mobile-quick-actions-card {
    padding-bottom: 14px;
  }

  .mobile-home-card strong {
    display: block;
    font-size: 1.2rem;
    margin: 5px 0 4px;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .mobile-home-card p {
    margin: 0;
    color: #b9cce6;
    font-size: 0.84rem;
    line-height: 1.42;
  }

  .mobile-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 0 0;
  }

  .mobile-quick-actions .secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
    border-radius: 12px;
    border-color: rgba(255, 255, 255, 0.28);
    background: linear-gradient(145deg, rgba(102, 232, 255, 0.12), rgba(255, 255, 255, 0.035));
    color: #e7f1ff;
    min-height: 46px;
    font-weight: 850;
    box-shadow: 0 8px 18px rgba(5, 11, 24, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 9px 10px;
  }

  .mobile-home-cards > .mobile-home-card.mobile-commute-card {
    border-color: rgba(69, 204, 164, 0.34);
    background: linear-gradient(160deg, rgba(15, 40, 47, 0.96), rgba(10, 24, 35, 0.94));
  }
  .mobile-community-card {
    border-color: rgba(118, 165, 225, 0.4);
    background: linear-gradient(160deg, rgba(20, 41, 70, 0.94), rgba(11, 26, 45, 0.95));
  }

  .mobile-home-cards > .mobile-home-card.mobile-commute-card strong {
    color: #d6ffef;
  }

  .mobile-commute-cta {
    margin-top: 12px;
    width: 100%;
    border-radius: 12px;
    border-color: rgba(111, 226, 184, 0.42);
    background: linear-gradient(145deg, rgba(38, 151, 113, 0.38), rgba(30, 94, 78, 0.35));
    color: #dbfff1;
    min-height: 44px;
  }

  .mobile-active-crossings-card {
    border-color: rgba(113, 153, 203, 0.37);
    background: linear-gradient(160deg, rgba(17, 33, 56, 0.94), rgba(10, 22, 39, 0.95));
  }

  .mobile-community-card span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .command-center {
    display: block;
    margin-bottom: 8px;
  }

  .map-card {
    padding: 10px;
    border-radius: 22px;
  }

  .section-header {
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
  }

  .section-header .actions {
    display: none;
  }

  .geo-filter-shell {
    margin-bottom: 8px;
  }

  #map {
    height: clamp(360px, 52svh, 500px);
    border-radius: 20px;
  }

  .mobile-alerts-panel {
    display: none;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 16px;
  }

  .report-card {
    grid-template-columns: 1fr;
    padding: 12px;
    border-radius: 18px;
  }

  .report-drawer-summary {
    display: none;
  }

  .report-drawer .report-copy,
  .report-drawer .report-tools {
    padding: 0;
  }

  .report-tools {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .report-copy h2 {
    margin-top: 4px;
  }

  .report-copy p {
    margin-top: 6px;
    line-height: 1.35;
    font-size: 0.86rem;
  }

  .confirmation-box,
  .quick-clear-card {
    margin-top: 10px;
  }

  .report-buttons {
    display: grid;
    gap: 8px;
  }

  .share-card,
  .share-card.visible {
    display: none;
  }

  .primary-btn,
  .secondary-btn {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.84rem;
  }

  .compact-btn {
    width: auto;
  }

  .mobile-sticky-report {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    z-index: 2000;
    display: block;
    padding: 14px 16px;
    border: 1px solid rgba(255, 233, 161, 0.72);
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a4f, #ff4242);
    color: #fff6f2;
    letter-spacing: 0.01em;
    font-weight: 950;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(255, 104, 104, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    animation: report-cta-pulse 1.9s ease-in-out infinite;
  }

.mobile-sticky-report.clear-mode {
  background: linear-gradient(135deg, var(--warning), var(--accent));
}

.map-report-shortcut {
  display: none;
}

@media (min-width: 1101px) {
  .map-card {
    position: relative;
  }

  .map-report-shortcut {
    display: inline-flex;
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 800;
    border: 1px solid rgba(255, 213, 145, 0.68);
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 900;
    color: #fff5ee;
    background: linear-gradient(135deg, rgba(255, 122, 79, 0.96), rgba(255, 66, 66, 0.94));
    backdrop-filter: blur(6px);
  }

  .map-report-shortcut:hover {
    border-color: rgba(255, 245, 215, 0.9);
    transform: translateY(-1px);
  }
}

@keyframes report-cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}


  #gridlyHazardLauncher,
  #gridlyHazardCounter {
    display: none !important;
  }

  #gridlyHazardPanel.visible {
    display: block !important;
  }

  .app-footer {
    margin-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 20px);
  }
}

@media (max-width: 760px) {
  .smart-alerts-modal-card {
    width: calc(100% - 14px);
    margin-top: 10px;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  }

  .smart-alerts-subtitle {
    margin-bottom: 10px;
    font-size: 0.84rem;
  }

  .smart-alert-option {
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 12px;
    font-size: 0.84rem;
  }

  .smart-alert-options-grid {
    width: 100%;
    gap: 10px;
    margin: 0 0 10px;
  }

  .smart-alerts-confirmation {
    min-height: 30px;
    margin-top: 8px;
    font-size: 0.8rem;
  }

  #gridlyBetaLaunchWrap {
    margin: 6px 14px 4px !important;
  }

  #gridlyBetaLaunchWrap .gridly-share-btn {
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    opacity: 0.88;
  }
}
/* V12.2 desktop sidebar full-height fix */
@media (min-width: 1101px) {
  .command-center {
    align-items: stretch;
  }

  .map-card {
    height: 100%;
  }

  .desktop-command-panel {
    height: auto;
    max-height: none;
    align-self: stretch;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .desktop-command-panel .panel-card:last-child {
    flex: 1;
  }
}

@media (max-width: 720px) {
  .geo-filter-status {
    margin-bottom: 10px;
    padding: 9px 12px;
    font-size: 0.81rem;
  }
}

@media (max-width: 1100px) {
  #gridlyBetaLaunchWrap .gridly-share-btn {
    display: none !important;
  }
}


.mobile-report-mode-card {
  display: none;
}

@media (max-width: 1100px) {
  .mobile-report-mode-card {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(110, 168, 255, 0.25);
    background: rgba(9, 20, 41, 0.45);
  }

  .mobile-report-mode-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
  }

  .mobile-report-mode-actions .secondary-btn.active {
    border-color: rgba(88, 212, 162, 0.95);
    box-shadow: 0 0 0 1px rgba(88, 212, 162, 0.65) inset;
    background: rgba(11, 61, 47, 0.55);
    color: #dffef3;
  }

  .mobile-report-mode-card p {
    margin: 0;
    font-size: 0.85rem;
    color: #d7e6ff;
  }
}

/* V17 premium quality pass: mobile-first and desktop command center polish */
@media (max-width: 1100px) {
  .app-header {
    padding: 10px 12px 8px;
    min-height: auto;
    border-bottom-color: rgba(98, 151, 229, 0.2);
  }

  .mobile-premium-header {
    padding: 14px;
    gap: 12px;
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(16, 30, 52, 0.98), rgba(10, 21, 37, 0.97));
    box-shadow: 0 24px 44px rgba(2, 8, 19, 0.5), inset 0 1px 0 rgba(207, 231, 255, 0.11);
  }

  .mobile-home-cards {
    gap: 14px;
  }

  .mobile-live-hero {
    padding: 20px 18px 18px;
    border-radius: 22px;
    background: radial-gradient(circle at 90% 14%, rgba(145, 198, 255, 0.32), transparent 42%), linear-gradient(165deg, rgba(33, 86, 160, 0.88), rgba(8, 24, 49, 0.97));
  }

  .mobile-live-hero > span {
    font-size: 0.74rem;
    letter-spacing: 0.13em;
    color: #c6defd;
  }

  .mobile-live-hero strong {
    font-size: clamp(1.55rem, 6.4vw, 2.05rem);
    line-height: 1.06;
    margin-top: 8px;
  }

  .mobile-hero-map-cta {
    margin-top: 14px;
    min-height: 50px;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 900;
  }

  .mobile-home-card {
    padding: 16px;
    border-radius: 20px;
  }

  .mobile-quick-actions {
    gap: 10px;
    padding-top: 10px;
  }

  .mobile-quick-actions .secondary-btn {
    min-height: 48px;
    border-radius: 15px;
    justify-content: center;
    text-align: center;
    gap: 7px;
  }

  .mobile-home-card strong {
    margin: 6px 0 6px;
  }

  .mobile-commute-cta {
    margin-top: 14px;
    min-height: 46px;
    border-radius: 13px;
  }
}

@media (min-width: 1101px) {
  .app-shell {
    width: min(1540px, calc(100% - 26px));
    margin-top: 12px;
  }

  .command-center {
    grid-template-columns: minmax(0, 1fr) 304px;
    gap: 12px;
  }

  .map-card {
    padding: 14px;
    border-radius: 26px;
    background: linear-gradient(165deg, rgba(17, 29, 47, 0.95), rgba(8, 16, 29, 0.95));
  }

  .desktop-route-watch-strip {
    border: 1px solid rgba(114, 174, 255, 0.25);
    border-radius: 18px;
    padding: 12px 14px;
    background: linear-gradient(140deg, rgba(45, 92, 156, 0.26), rgba(13, 27, 45, 0.76));
    margin-bottom: 10px;
  }

  .map-header {
    padding: 2px 0 3px;
  }

  .map-header h2 {
    font-size: 1.28rem;
    letter-spacing: -0.015em;
  }

  .geo-filter-shell {
    border-radius: 16px;
    padding: 6px;
    background: rgba(17, 31, 52, 0.72);
    border: 1px solid rgba(130, 178, 255, 0.16);
    gap: 7px;
  }

  .geo-filter-pill {
    border-radius: 999px;
    min-height: 34px;
  }

  .geo-filter-status {
    border-radius: 12px;
    background: rgba(18, 39, 68, 0.64);
  }

  #map {
    border-radius: 22px;
  }

  .desktop-command-panel {
    gap: 10px;
    padding: 8px;
    border: 1px solid rgba(104, 160, 240, 0.18);
    border-radius: 24px;
    background: linear-gradient(170deg, rgba(11, 23, 39, 0.94), rgba(7, 15, 28, 0.95));
  }

  .desktop-command-panel .panel-card {
    border-radius: 16px;
    border-color: rgba(118, 170, 240, 0.14);
    background: linear-gradient(155deg, rgba(21, 36, 57, 0.68), rgba(10, 20, 35, 0.78));
    box-shadow: 0 10px 22px rgba(1, 6, 13, 0.28);
  }

  .drawer-summary {
    min-height: 34px;
    align-items: center;
  }
}

/* V17.1 visual architecture pass: stronger hierarchy + command center */
@media (max-width: 700px) {
  .app-shell {
    width: calc(100% - 16px);
    margin: 6px auto 108px;
  }

  .top-nav {
    display: none;
  }

  .mobile-premium-header {
    margin-bottom: 2px;
  }

  .mobile-home-cards {
    gap: 16px;
  }

  .mobile-live-hero {
    padding: 24px 20px 20px;
    border-radius: 24px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .mobile-live-hero > span {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
  }

  .mobile-live-hero strong {
    font-size: clamp(2rem, 8.6vw, 2.65rem);
    line-height: 0.98;
    margin: 8px 0 6px;
    max-width: 11ch;
  }

  .mobile-live-hero p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #e2efff;
    max-width: 34ch;
  }

  .mobile-hero-map-cta {
    min-height: 56px;
    margin-top: 16px;
    font-size: 1.02rem;
    border-radius: 16px;
    box-shadow: 0 20px 34px rgba(2, 9, 24, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.23);
  }

  .mobile-quick-actions-card {
    background: rgba(11, 20, 34, 0.68);
    border-style: dashed;
    border-color: rgba(124, 173, 245, 0.32);
  }

  .mobile-quick-actions-card > span,
  .mobile-community-card,
  .mobile-active-crossings-card,
  .mobile-premium-status-bar {
    opacity: 0.92;
  }

  .mobile-home-card:not(.mobile-live-hero):not(.mobile-commute-card) {
    padding: 14px 14px;
  }

  .mobile-commute-card {
    padding: 18px 16px;
    border-width: 1px;
    border-color: rgba(98, 220, 178, 0.42);
  }

  .mobile-home-card strong {
    font-size: 1.3rem;
    margin: 7px 0 6px;
  }

  .mobile-home-card p {
    font-size: 0.88rem;
  }

  .map-card {
    margin-top: 6px;
    padding: 12px;
    border-radius: 24px;
  }

  .section-header h2 {
    font-size: 1.38rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .section-header .map-note {
    font-size: 0.9rem;
  }
}

@media (min-width: 1101px) {
  .app-shell {
    width: min(1660px, calc(100% - 34px));
    margin-top: 16px;
  }

  .dashboard {
    gap: 14px;
    margin-bottom: 14px;
  }

 .hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    padding: 22px 24px;
    gap: 22px;
    border-radius: 28px;
    border: 1px solid rgba(108, 171, 255, 0.34);
    background:
      radial-gradient(circle at 88% 16%, rgba(114, 175, 255, 0.2), transparent 40%),
      linear-gradient(165deg, rgba(17, 31, 52, 0.94), rgba(8, 17, 30, 0.94));
  }

  #timeContext,
  #greetingTitle,
  #greetingSubtitle,
  #habitStatusDetail {
    display: block;
  }

  #greetingTitle {
    font-size: clamp(2.15rem, 2.8vw, 3.1rem);
    line-height: 0.98;
  }

  .subtext {
    display: block;
    font-size: 1rem;
  }

  .habit-status-strip {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(14, 29, 49, 0.78);
  }

  .trust-row {
    margin-top: 12px;
  }

  .trust-row span {
    font-size: 0.78rem;
  }

  .hero-command-card {
    display: grid;
    gap: 12px;
    align-content: stretch;
  }

  .route-status-card {
    padding: 18px;
    border-radius: 18px;
    min-height: 142px;
  }

  .route-status-card strong {
    font-size: 2rem;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .primary-btn,
  .hero-actions .secondary-btn {
    min-height: 46px;
    font-size: 0.92rem;
  }

  .hero-route-btn,
  .hero-alerts-btn {
    display: inline-flex;
    justify-content: center;
  }

  #desktopReportNearMeBtn {
    position: static;
    width: 100%;
    min-width: 0;
  }

  .command-center {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 16px;
  }

  .map-card {
    padding: 16px;
    border-radius: 28px;
  }

  .map-header h2 {
    font-size: 1.5rem;
  }

  #map {
    height: 720px;
    border-radius: 24px;
  }

  .desktop-command-panel {
    padding: 12px;
    border-radius: 28px;
    gap: 12px;
  }

  .desktop-command-panel .panel-card {
    border-radius: 18px;
    padding: 16px;
  }

  .desktop-command-panel .drawer-summary {
    padding: 12px 14px;
  }

  .desktop-command-panel .drawer-body {
    padding: 0 14px 14px;
  }
}

/* V17.2 final premium conversion pass: launch polish */
@media (max-width: 700px) {
  .app-header {
    padding: 7px 12px 6px;
    gap: 5px;
    min-height: 0;
  }

  .brand-wrap {
    gap: 7px;
  }

  .brand-logo-frame {
    width: min(176px, 58vw);
    height: 44px;
    max-height: 44px;
  }

  .brand-logo-img {
    width: 100%;
    height: 100%;
  }

  .beta-pill {
    padding: 5px 10px;
    font-size: 0.62rem;
  }

  .mobile-premium-header {
    padding: 12px;
    gap: 10px;
    border-radius: 18px;
  }

  .mobile-location-chip,
  .mobile-weather-chip {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
  }

  .mobile-icon-btn,
  .mobile-avatar-btn {
    width: 31px;
    height: 31px;
  }

  .mobile-home-cards {
    gap: 12px;
  }

  .mobile-home-card {
    border-radius: 20px;
  }

  .mobile-live-hero {
    min-height: 0;
    padding: 22px 18px 18px;
    border-radius: 22px;
  }

  .mobile-live-hero > span,
  .mobile-home-card > span {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }

  .mobile-live-hero strong,
  .mobile-home-card strong {
    letter-spacing: -0.015em;
  }

  .mobile-home-card strong {
    font-size: 1.25rem;
    margin: 8px 0 6px;
  }

  .mobile-live-hero p,
  .mobile-home-card p {
    font-size: 0.88rem;
    line-height: 1.48;
  }

  .mobile-quick-actions {
    gap: 9px;
    padding-top: 12px;
  }

  .mobile-quick-actions .secondary-btn {
    min-height: 50px;
    border-radius: 12px;
    padding: 10px 11px;
    border-color: rgba(141, 197, 255, 0.52);
    background: linear-gradient(150deg, rgba(90, 171, 255, 0.28), rgba(41, 90, 165, 0.22));
    box-shadow: 0 12px 24px rgba(2, 9, 21, 0.4), inset 0 1px 0 rgba(225, 239, 255, 0.18);
    font-size: 0.8rem;
    letter-spacing: 0.01em;
  }

  .mobile-quick-actions .secondary-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
  }

  .mobile-premium-status-bar {
    gap: 5px;
    padding: 15px;
  }

  .map-card {
    margin-top: 4px;
    padding: 11px;
    border-radius: 22px;
  }
}

@media (min-width: 1101px) {
  .app-shell {
    width: min(1750px, calc(100% - 30px));
    margin-top: 12px;
  }

  .dashboard {
    gap: 10px;
    margin-bottom: 10px;
  }

 .hero-card {
    padding: 16px 18px;
    gap: 16px;
    border-radius: 22px;
    grid-template-columns: minmax(0, 1fr) 330px;
  }

  .command-center {
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 10px;
  }

  .map-card {
    padding: 12px;
    border-radius: 24px;
  }

  #map {
    height: 760px;
    border-radius: 20px;
  }

  .desktop-command-panel {
    padding: 9px;
    gap: 8px;
    border-radius: 22px;
  }

  .desktop-command-panel .panel-card {
    padding: 13px;
    border-radius: 12px;
  }

  .desktop-command-panel .drawer-summary {
    padding: 10px 11px;
    min-height: 34px;
  }

  .desktop-command-panel .drawer-body {
    padding: 0 11px 11px;
  }

  .desktop-command-panel .route-summary,
  .desktop-command-panel .trending-list,
  .desktop-command-panel .alerts-list {
    gap: 5px;
    margin-top: 8px;
  }

  .desktop-command-panel .trend-item,
  .desktop-command-panel .route-summary div,
  .desktop-command-panel .route-summary-inline p,
  .desktop-command-panel .alert-item {
    padding: 8px 9px;
    border-radius: 12px;
  }

  .desktop-command-panel .trend-item strong,
  .desktop-command-panel .alert-item strong {
    font-size: 0.82rem;
  }

  .desktop-command-panel .trend-item p,
  .desktop-command-panel .alert-item p,
  .desktop-command-panel .route-summary-inline p {
    font-size: 0.74rem;
    line-height: 1.26;
  }

  .desktop-command-panel .combined-module-block h3 {
    font-size: 0.73rem;
    letter-spacing: 0.06em;
  }
}

/* V17 strict visual match pass */
:root {
  --bg: #030303;
  --bg-panel: #0a0b0d;
  --card: rgba(18, 19, 22, 0.8);
  --border: rgba(255, 255, 255, 0.12);
  --muted: #9ba3ad;
}
body { background: radial-gradient(circle at 12% -8%, rgba(255,255,255,0.05), transparent 34%), #030303; }
.map-card { position: relative; overflow: hidden; }
.map-card::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background: radial-gradient(circle at 18% 22%, rgba(102,232,255,0.022), transparent 45%), radial-gradient(circle at 78% 78%, rgba(40,50,64,0.14), transparent 52%), repeating-linear-gradient(32deg, rgba(255,255,255,0.008) 0 2px, transparent 2px 6px); mix-blend-mode: screen; opacity:.2; }
.app-shell.premium-layout { max-width: 1600px; display: block; }
.desktop-left-rail { display:none; }
.main-column { min-width: 0; }
.hero-card, .map-card, .panel-card, .report-card, .growth-card, .insight-card, .setup-card, .mobile-home-card {
  background: linear-gradient(175deg, rgba(20,22,26,0.72), rgba(13,14,16,0.8));
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.primary-btn { background: linear-gradient(135deg,#33d98b,#2bb874); color:#03150c; }
.secondary-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); }
.hero-report-btn, #quickClearBtn, #mobileQuickReportBtn { background: linear-gradient(135deg,#ff7a4f,#ff4f4f); color: #fff; border: 0; }
#mobileQuickClearedBtn { background: linear-gradient(135deg,#38d98e,#28b976); color: #042013; border: 0; }
#mobileQuickRouteBtn { background: rgba(79,170,255,0.18); border-color: rgba(120,198,255,0.45); }
#map {
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 16px 30px rgba(0,0,0,0.46);
  filter: saturate(0.75) brightness(0.74) contrast(1.08);
}
#map .leaflet-tile-pane .leaflet-tile { filter: grayscale(0.48) brightness(0.6) contrast(1.18) saturate(0.32) hue-rotate(158deg); }
#map .leaflet-roadsPane-pane .leaflet-tile { filter: saturate(1.15) brightness(0.88) contrast(1.06) hue-rotate(185deg); }
#map .leaflet-railPane-pane .leaflet-tile { filter: saturate(1.32) brightness(0.8) contrast(1.2) hue-rotate(26deg); }
#map .leaflet-labelsPane-pane .leaflet-tile { filter: grayscale(0.15) brightness(0.82) contrast(1.02); }
.mobile-bottom-nav { display:none; }

@media (min-width:1101px){
  .app-header { padding-left: 24px; background: rgba(3,3,3,0.95); }
  .top-nav { gap: 8px; }
  .premium-layout { display: grid !important; grid-template-columns: 98px minmax(0,1fr); gap: 14px; }
  .desktop-left-rail {
    display:flex; flex-direction:column; gap:10px; position: sticky; top: 96px; align-self:start;
    background: rgba(12,13,15,0.8); border:1px solid rgba(255,255,255,0.13); border-radius: 24px; padding: 14px 10px;
    box-shadow: 0 18px 34px rgba(0,0,0,0.5);
  }
  .rail-brand { font-size: .62rem; letter-spacing: .14em; color:#7f8792; text-align:center; font-weight:800; }
  .rail-nav-btn { border:1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color:#dbe3ec; border-radius:14px; padding:10px 6px; font-size:.72rem; font-weight:800; }
  .rail-nav-btn.active { background: rgba(68,220,146,0.2); color:#a7ffd0; border-color: rgba(68,220,146,0.5); }
  .rail-status-chip { margin-top:auto; color:#8be7bb; font-size:.67rem; text-align:center; border:1px solid rgba(68,220,146,0.34); border-radius: 12px; padding:8px 6px; }
  .command-center { display:grid; grid-template-columns: minmax(0,1fr) 370px; gap:12px; }
  .map-card { min-height: 720px; }
  #map { min-height: 560px; }
}

@media (max-width:1100px){
  .app-header { min-height:64px; padding:0 14px; background: rgba(3,3,3,0.94); }
  .brand-logo-frame { width: 180px; height: 60px; }
  .beta-pill { display:none; }
  .hero-card { grid-template-columns: 1fr; padding: 14px; }
  .mobile-premium-header { display:flex; justify-content:space-between; align-items:center; background:#090909; border:1px solid rgba(255,255,255,0.12); border-radius:16px; padding:10px 12px; }
  .mobile-home-cards { display:grid; gap:10px; }
  .mobile-home-card { border-radius: 18px; }
  .mobile-active-crossings-card { order: 4; }
  .mobile-community-card { order: 5; }
  .mobile-bottom-nav {
    position: fixed; left: 10px; right: 10px; bottom: 8px; z-index: 1200;
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:8px;
    border-radius: 18px; border:1px solid rgba(255,255,255,0.14); background: rgba(9,10,12,0.94); backdrop-filter: blur(16px);
  }
  .mobile-bottom-nav-btn { border:1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); color:#dde3ea; border-radius: 12px; padding: 10px 4px; font-size:.73rem; font-weight:800; }
  .mobile-bottom-nav-btn.active { color:#9dffcb; border-color: rgba(68,220,146,0.5); background: rgba(68,220,146,0.17); }
  .mobile-sticky-report { bottom: 88px; }
  .app-footer { padding-bottom: 90px; }
}

/* V18 WOW factor presentation pass: visual-only upgrades */
:root {
  --bg: #030406;
  --bg-elev: #07090d;
  --bg-panel: #0b0f15;
  --card: rgba(13, 17, 24, 0.84);
  --border: rgba(178, 197, 224, 0.2);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.62);
}

body {
  background:
    radial-gradient(circle at 10% -5%, rgba(120, 170, 255, 0.1), transparent 30%),
    radial-gradient(circle at 84% 0%, rgba(74, 235, 199, 0.09), transparent 28%),
    linear-gradient(180deg, #030406 0%, #06080c 45%, #090c12 100%);
}

.hero-card,
.setup-card,
.map-card,
.panel-card,
.insight-card,
.report-card,
.growth-card,
.mobile-priority-card,
.mobile-home-card,
.mobile-alerts-panel,
.desktop-business-note,
.side-panel {
  position: relative;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4), 0 34px 80px rgba(0, 0, 0, 0.48);
}

.hero-card::before,
.map-card::before,
.side-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01) 36%);
  opacity: 0.5;
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: -30px -60px auto;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 45%, rgba(102, 232, 255, 0.22), transparent 42%),
    radial-gradient(circle at 72% 38%, rgba(67, 230, 160, 0.16), transparent 44%);
  filter: blur(22px);
}

h1 { font-weight: 920; letter-spacing: -0.045em; }
h2 { font-weight: 820; letter-spacing: -0.025em; }
.subtext { color: #c5d3e6; line-height: 1.5; }

.app-shell { margin: 20px auto; }
.dashboard { gap: 14px; margin-bottom: 14px; }
.command-center { gap: 12px; }

.primary-btn,
.secondary-btn,
.nav-btn,
.geo-filter-pill,
.search-result-btn,
.trend-item,
.route-status-card,
.alert-item,
.panel-card {
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease, color 0.24s ease;
}

@media (hover: hover) {
  .nav-btn:hover,
  .secondary-btn:hover,
  .geo-filter-pill:hover,
  .trend-item:hover,
  .search-result-btn:hover,
  .route-status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
  }

  .primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(83, 214, 255, 0.28);
  }
}

.side-panel {
  background: linear-gradient(180deg, rgba(12, 17, 26, 0.9), rgba(9, 13, 20, 0.92));
  border-color: rgba(173, 196, 228, 0.24);
}

.panel-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.09);
}

#map {
  border: 1px solid rgba(172, 194, 224, 0.26);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 22px 60px rgba(1, 4, 8, 0.45),
    0 22px 56px rgba(0, 0, 0, 0.58);
}

.gridly-marker {
  position: relative;
  box-shadow: 0 0 0 2px rgba(196, 247, 255, 0.6), 0 0 18px rgba(75, 221, 255, 0.65);
}

.gridly-marker::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  border: 1px solid rgba(111, 232, 255, 0.55);
  opacity: 0.8;
}

.gridly-marker.alert {
  animation: pulse-alert 1.4s ease-out infinite;
  box-shadow: 0 0 0 2px rgba(255, 177, 194, 0.52), 0 0 20px rgba(255, 78, 111, 0.62);
}

.gridly-marker.alert::after {
  border-color: rgba(255, 120, 146, 0.75);
  animation: marker-ring 1.8s ease-out infinite;
}

@keyframes pulse-alert {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes marker-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

@media (max-width: 700px) {
  .app-shell { width: calc(100% - 16px); margin: 10px auto 106px; }
  .dashboard { gap: 12px; }
  .mobile-home-cards { gap: 14px; }

  .mobile-home-card,
  .mobile-premium-header,
  .mobile-alerts-panel {
    border-color: rgba(172, 198, 236, 0.26);
    box-shadow: 0 14px 28px rgba(2, 8, 18, 0.38), 0 28px 54px rgba(0, 0, 0, 0.36);
  }

  .mobile-quick-actions .secondary-btn,
  .mobile-hero-map-cta,
  .mobile-commute-cta {
    min-height: 48px;
    border-radius: 12px;
    font-weight: 880;
  }

  .mobile-quick-actions .secondary-btn:active,
  .mobile-hero-map-cta:active,
  .mobile-commute-cta:active,
  .nav-btn:active {
    transform: scale(0.98);
    filter: brightness(1.08);
  }

  .mobile-sticky-nav {
    backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid rgba(169, 192, 226, 0.22);
  }
}

.future-map-hero {
  position: relative;
  min-height: 420px;
  border-radius: 34px;
  overflow: visible;
  padding-bottom: 44px;
  border: 1px solid rgba(129, 255, 196, 0.22);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  background: radial-gradient(circle at 20% 20%, rgba(102, 232, 255, 0.2), transparent 38%), linear-gradient(160deg, #07090c, #080a0e 58%, #0b1116);
}

.future-map-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.future-map-grid {
  position: absolute;
  inset: -20%;
  background-image: linear-gradient(rgba(102, 232, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 232, 255, 0.08) 1px, transparent 1px);
  background-size: 58px 58px;
  transform: rotate(-8deg) scale(1.2);
}

.future-route {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(57, 243, 164, 0.94), rgba(102, 232, 255, 0.9), transparent);
  box-shadow: 0 0 24px rgba(57, 243, 164, 0.75);
  animation: routeFlow 4.4s linear infinite;
}
.route-a { width: 62%; top: 34%; left: 12%; transform: rotate(8deg); }
.route-b { width: 46%; top: 61%; left: 31%; transform: rotate(-17deg); animation-duration: 5.1s; }

.pulse-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #39f3a4;
  box-shadow: 0 0 0 0 rgba(57, 243, 164, 0.76);
  animation: pulseRing 2.4s infinite;
}
.dot-a { top: 33%; left: 24%; }
.dot-b { top: 51%; left: 54%; animation-delay: .6s; }
.dot-c { top: 66%; left: 40%; animation-delay: 1.1s; }

.hero-floating-badge {
  position: absolute;
  padding: 10px 14px;
  border-radius: 999px;
  backdrop-filter: blur(13px);
  background: rgba(8, 16, 20, 0.65);
  border: 1px solid rgba(255,255,255,0.18);
  font-weight: 800;
  letter-spacing: .02em;
}
.live-chip { top: 20px; right: 26px; color: #39f3a4; }
.county-chip { bottom: 22px; right: 24px; color: #66e8ff; }

.future-hero-overlay {
  position: relative;
  z-index: 2;
  max-width: 650px;
  padding: 46px 40px;
}

.future-metric-headline {
  font-size: clamp(2.7rem, 6vw, 4.6rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-weight: 900;
  margin: 0;
}

/* V37 mobile operating system redesign: map-first live movement architecture */
@media (max-width: 1100px) {
  .future-map-hero,
  .destination-hero-card,
  .mobile-home-card:not(.mobile-priority-card),
  .command-summary-grid,
  .desktop-route-setup,
  .desktop-insights {
    display: none !important;
  }

  .dashboard {
    display: grid;
    gap: 8px;
  }

  .mobile-premium-header {
    position: sticky;
    top: 8px;
    z-index: 920;
    backdrop-filter: blur(16px);
  }

  .mobile-home-cards {
    display: grid;
    gap: 8px;
  }

  .mobile-home-card.mobile-priority-card {
    border-radius: 16px;
    padding: 12px;
  }

  #mapSection {
    margin-top: 4px;
  }

  .map-card {
    padding: 8px;
    border-radius: 22px;
  }

  .mobile-live-command {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(18, 40, 66, 0.92), rgba(12, 22, 38, 0.95));
    border: 1px solid rgba(120, 192, 255, 0.4);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.42);
  }

  .mobile-live-command strong {
    display: block;
    margin: 3px 0;
    font-size: 1.05rem;
    color: #f2f8ff;
  }

  .mobile-live-command p {
    margin: 0;
    font-size: 0.8rem;
    color: #bfd1ea;
  }

  .mobile-map-floating-chips {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 750;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .map-floating-chip {
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid rgba(168, 218, 255, 0.44);
    background: rgba(8, 16, 28, 0.85);
    color: #def2ff;
    font-size: 0.73rem;
    font-weight: 800;
    padding: 8px 12px;
  }

  .map-tools-overlay {
    top: 52px;
  }

  #map {
    height: clamp(470px, 62svh, 700px);
    border-radius: 18px;
  }

  .mobile-sticky-report {
    display: none !important;
  }

  .mobile-floating-action-dock {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    z-index: 1400;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
  }

  .mobile-dock-btn {
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    min-height: 50px;
    font-weight: 900;
    letter-spacing: 0.01em;
    color: #ecf5ff;
    background: rgba(8, 12, 20, 0.9);
  }

  .mobile-dock-btn.report { background: linear-gradient(135deg, #c63c33, #ff5b4d); }
  .mobile-dock-btn.route { background: linear-gradient(135deg, #009fc9, #2fd4ff); color: #031621; }
  .mobile-dock-btn.alerts { background: linear-gradient(135deg, #4f3cb6, #7a60e8); }

  .app-footer {
    padding-bottom: 168px;
  }
}

.future-hero-subtext { max-width: 540px; color: #c5d5e4; font-size: 1.02rem; }
.future-hero-actions { display: flex; gap: 10px; margin-top: 18px; }

.floating-route-status {
  position: absolute;
  left: 40px;
  bottom: -32px;
  z-index: 3;
  width: min(360px, calc(100% - 80px));
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(16, 23, 26, 0.86), rgba(16, 19, 22, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.19);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.55);
}

.floating-route-status span { color: #66e8ff; font-size: .77rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.floating-route-status strong { display: block; margin: 6px 0 4px; font-size: 1.35rem; }
.floating-route-status p { margin: 0; color: #d0dceb; }

@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(57,243,164,.8);} 100% { box-shadow: 0 0 0 18px rgba(57,243,164,0);} }
@keyframes routeFlow { 0% { opacity: .35; filter: hue-rotate(0deg);} 50% { opacity: 1;} 100% { opacity: .35; filter: hue-rotate(22deg);} }

@media (max-width: 1100px) {
  .future-map-hero { min-height: 390px; border-radius: 28px; padding-bottom: 24px; }
  .future-hero-overlay { padding: 36px 20px 118px; }
  .future-metric-headline { font-size: clamp(2.1rem, 11vw, 3.1rem); }
  .future-hero-actions { gap: 8px; }
  .future-hero-actions .secondary-btn { display: none; }
  .floating-route-status { left: 18px; width: calc(100% - 36px); bottom: 12px; }
  .live-chip { top: 14px; right: 14px; }
  .county-chip { display: none; }
  .top-nav { gap: 8px; padding: 4px; border-radius: 18px; background: rgba(255,255,255,0.05); }
  .nav-btn { padding: 8px 11px; font-size: .8rem; }
}

.place-name-modal {
  z-index: 10010;
}

.place-name-modal-card {
  max-width: 420px;
}

/* V19 final elite pass: premium map intelligence + ambient polish (CSS-only) */
#map {
  background: radial-gradient(circle at 50% 46%, #111c2a 0%, #0a121d 38%, #060b13 72%, #04070c 100%);
  border: 1px solid rgba(140, 175, 215, 0.28);
  filter: saturate(1.02) contrast(1.26) brightness(0.76);
}

#map::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 401;
  background:
    linear-gradient(rgba(118, 201, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 201, 255, 0.06) 1px, transparent 1px),
    radial-gradient(ellipse at center, transparent 46%, rgba(1, 4, 10, 0.48) 100%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
  mix-blend-mode: screen;
}

#map .leaflet-pane,
#map .leaflet-layer,
#map .leaflet-control-zoom,
#map .leaflet-control-attribution {
  filter: drop-shadow(0 0 10px rgba(79, 173, 255, 0.14));
}

.leaflet-tile {
  filter: grayscale(0.33) brightness(0.72) contrast(1.28) saturate(0.72) hue-rotate(176deg);
}

.leaflet-overlay-pane path {
  filter: drop-shadow(0 0 5px rgba(88, 235, 255, 0.35));
}

.gridly-marker {
  background: #6ef1ff;
  border-color: rgba(202, 249, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(174, 244, 255, 0.62), 0 0 18px rgba(74, 235, 255, 0.75);
}

.gridly-marker::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 999px;
  border: 1px solid rgba(114, 241, 255, 0.56);
  animation: marker-ring-soft 3.2s ease-out infinite;
}

.gridly-marker.alert {
  background: #ff5a74;
  border-color: rgba(255, 217, 225, 0.98);
  box-shadow: 0 0 0 2px rgba(255, 163, 181, 0.64), 0 0 24px rgba(255, 66, 106, 0.85);
  animation: pulse-alert 2s ease-in-out infinite;
}

.gridly-marker.alert::after,
.gridly-marker.alert::before {
  border-color: rgba(255, 120, 150, 0.72);
  animation: marker-ring-alert 1.95s ease-out infinite;
}

.gridly-marker.cleared {
  background: #5effaa;
  border-color: rgba(220, 255, 233, 0.95);
  box-shadow: 0 0 0 2px rgba(147, 255, 198, 0.52), 0 0 20px rgba(73, 237, 158, 0.7);
}

/* V20 map-first pass: reduce framing + boost live map realism */
.command-center {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 10px;
  align-items: start;
}

.map-card {
  position: relative;
  padding: 8px;
  border-radius: 20px;
  background: rgba(8, 11, 16, 0.55);
  border-color: rgba(150, 184, 225, 0.16);
  box-shadow: 0 20px 52px rgba(1, 6, 14, 0.5);
}

.map-card::before {
  opacity: 0.2;
}

.desktop-route-watch-strip,
.map-header,
.report-mode-banner,
.geo-filter-shell,
.geo-filter-status {
  position: absolute;
  z-index: 520;
  margin: 0;
}

.desktop-route-watch-strip {
  top: 16px;
  left: 16px;
  right: 16px;
  border-radius: 12px;
  padding: 8px 11px;
  background: linear-gradient(140deg, rgba(10, 16, 24, 0.82), rgba(7, 13, 20, 0.58));
  backdrop-filter: blur(10px);
}

.map-header {
  left: 16px;
  bottom: 122px;
  margin-bottom: 0;
  padding: 11px 12px;
  border-radius: 12px;
  max-width: min(560px, calc(100% - 32px));
  background: linear-gradient(145deg, rgba(8, 14, 22, 0.8), rgba(9, 14, 20, 0.54));
  border: 1px solid rgba(170, 208, 255, 0.18);
  backdrop-filter: blur(10px);
}

.map-header .eyebrow,
.map-header h2,
.map-note { margin: 0; }

.map-header h2 { font-size: clamp(1rem, 2vw, 1.2rem); }
.map-note { margin-top: 6px; color: #d7e4f6; }

.report-mode-banner {
  left: 16px;
  bottom: 16px;
  width: min(420px, calc(100% - 200px));
}

.geo-filter-shell {
  right: 16px;
  top: 92px;
  display: grid;
  gap: 7px;
  width: 160px;
}

.geo-filter-pill {
  width: 100%;
  text-align: left;
  background: rgba(8, 14, 22, 0.72);
  backdrop-filter: blur(8px);
}

.geo-filter-status {
  right: 16px;
  bottom: 16px;
  max-width: 280px;
  margin: 0;
  background: rgba(8, 15, 23, 0.8);
  border-color: rgba(171, 207, 247, 0.24);
}

#map {
  height: 740px;
  border-radius: 16px;
  border: 1px solid rgba(129, 168, 214, 0.25);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.64);
  filter: saturate(1.08) contrast(1.26) brightness(0.93);
}

#map::before {
  background:
    linear-gradient(rgba(118, 201, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 201, 255, 0.04) 1px, transparent 1px),
    radial-gradient(ellipse at center, transparent 58%, rgba(1, 4, 10, 0.42) 100%);
}

.leaflet-tile {
  filter: grayscale(0.12) brightness(0.92) contrast(1.34) saturate(1.02) hue-rotate(183deg);
}

.leaflet-control-zoom,
.leaflet-control-attribution {
  border: 0 !important;
  background: rgba(8, 15, 24, 0.74) !important;
  backdrop-filter: blur(8px);
  border-radius: 12px !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34) !important;
}

.leaflet-control-zoom a {
  background: transparent !important;
  color: #dff2ff !important;
  border-color: rgba(171, 211, 255, 0.28) !important;
}

.leaflet-control-attribution {
  color: rgba(212, 230, 249, 0.8) !important;
}

@media (max-width: 1100px) {
  .map-card {
    padding: 8px;
    border-radius: 18px;
  }

  #map {
    height: 560px;
    border-radius: 12px;
  }

  .desktop-route-watch-strip,
  .map-header,
  .geo-filter-shell,
  .geo-filter-status {
    position: static;
    width: auto;
    max-width: 100%;
    margin-bottom: 8px;
  }

  .geo-filter-shell {
    display: flex;
    width: auto;
  }

  .geo-filter-pill {
    width: auto;
  }
}

@keyframes marker-ring-soft {
  0% { transform: scale(0.92); opacity: 0.65; }
  100% { transform: scale(1.38); opacity: 0; }
}

@keyframes marker-ring-alert {
  0% { transform: scale(0.9); opacity: 0.9; }
  72% { transform: scale(1.48); opacity: 0; }
  100% { transform: scale(1.48); opacity: 0; }
}

.future-map-hero {
  min-height: 446px;
}

.future-map-grid {
  background-image: linear-gradient(rgba(102, 232, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 232, 255, 0.05) 1px, transparent 1px);
}

.future-route {
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(98, 247, 255, 0.1) 20%, rgba(121, 255, 214, 0.95) 50%, rgba(98, 247, 255, 0.1) 80%, transparent 100%);
  animation: routeFlow 6.8s linear infinite;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  filter: blur(0.45px);
  background: #72ffd8;
  animation: pulseRing 4.9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.dot-b { animation-delay: 1.25s; }
.dot-c { animation-delay: 2.15s; }

@media (min-width: 1101px) {
  .app-shell {
    width: min(1560px, calc(100% - 54px));
    margin: 26px auto;
  }

  .dashboard,
  .command-center {
    gap: 14px;
    margin-bottom: 14px;
  }

  .hero-card,
  .map-card,
  .setup-card {
    padding: 22px;
  }
}

@media (max-width: 1100px) {
  .future-map-hero {
    min-height: 430px;
  }

  .future-hero-overlay {
    padding: 42px 22px 122px;
  }

  .future-metric-headline {
    letter-spacing: -0.046em;
    font-size: clamp(2.3rem, 11.5vw, 3.3rem);
  }

  .mobile-bottom-nav {
    left: 12px;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 9px;
    border-radius: 22px;
    border: 1px solid rgba(159, 188, 223, 0.28);
    background: linear-gradient(165deg, rgba(10, 16, 24, 0.86), rgba(6, 11, 18, 0.9));
    backdrop-filter: blur(20px) saturate(130%);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

/* V34 final pass: map-dominant premium hierarchy */
:root {
  --lux-gap: clamp(18px, 2.2vw, 32px);
}

.app-shell {
  width: min(1580px, calc(100% - 64px));
  margin: clamp(22px, 2.6vw, 34px) auto;
}

.main-column > * + * {
  margin-top: var(--lux-gap);
}

.dashboard {
  gap: var(--lux-gap);
  margin-bottom: 0;
}

.command-center {
  gap: var(--lux-gap);
  align-items: stretch;
}

.map-card {
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: rgba(5, 9, 14, 0.32);
  box-shadow: 0 28px 70px rgba(0, 8, 20, 0.52);
}

.map-card::before {
  opacity: 0;
}

#map {
  border: 0;
  border-radius: 28px;
  height: 78vh;
  min-height: 760px;
  box-shadow: inset 0 0 0 1px rgba(130, 184, 240, 0.2), 0 30px 85px rgba(0, 0, 0, 0.58);
  filter: saturate(1.1) contrast(1.28) brightness(0.95);
}

.desktop-route-watch-strip,
.map-header,
.report-mode-banner,
.geo-filter-shell,
.geo-filter-status {
  z-index: 650;
}

.desktop-route-watch-strip,
.map-header,
.report-mode-banner,
.geo-filter-status {
  border: 1px solid rgba(173, 209, 246, 0.22);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.side-panel .panel-card {
  background: linear-gradient(180deg, rgba(11, 15, 22, 0.9), rgba(11, 15, 20, 0.84));
  border-color: rgba(170, 201, 236, 0.16);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
}

.desktop-command-strip,
.desktop-insights,
.desktop-route-setup {
  opacity: 0.88;
}

.desktop-route-setup .primary-btn {
  box-shadow: 0 10px 26px rgba(91, 227, 255, 0.3);
}

@media (min-width: 1101px) {
  .premium-layout {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 22px;
  }

  .command-center {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .future-map-hero {
    min-height: 420px;
  }
}

@media (max-width: 1100px) {
  .app-shell {
    width: min(100%, calc(100% - 24px));
    margin: 16px auto 92px;
  }

  .main-column > * + * {
    margin-top: 16px;
  }

  .future-map-hero,
  .hero-card {
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  }

  .mobile-home-cards {
    gap: 14px;
  }

  .mobile-home-card {
    border-radius: 18px;
    border-color: rgba(171, 202, 236, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  }

  .command-center {
    gap: 14px;
  }

  .map-card {
    border-radius: 22px;
    overflow: hidden;
  }

  #map {
    min-height: 64vh;
    height: 64vh;
    border-radius: 22px;
  }

  .desktop-route-watch-strip,
  .map-header,
  .geo-filter-shell,
  .geo-filter-status {
    position: static;
    margin: 0 0 10px;
    max-width: 100%;
  }

  .geo-filter-shell {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Gridly 2026 visual identity system */
:root {
  --obsidian: #040608;
  --graphite-900: #0d1217;
  --graphite-800: #111820;
  --graphite-700: #18222c;
  --cyan-live: #3ce8ff;
  --cyan-route: #0fb8ff;
  --green-confidence: #3ddc84;
  --amber-severity: #ffb347;
  --red-severity: #ff4f5e;
  --text-primary: #ecf3ff;
  --text-secondary: #8ea0b5;
}

body {
  background: radial-gradient(1200px 800px at 78% -10%, rgba(17, 100, 120, 0.18), transparent 55%), linear-gradient(180deg, #030507 0%, var(--obsidian) 46%, #060b10 100%);
  color: var(--text-primary);
}

.app-header,
.desktop-left-rail,
.map-card,
.panel-card,
.hero-card,
.setup-card,
.insight-card,
.growth-card,
.mobile-home-card,
.report-card {
  background: linear-gradient(160deg, rgba(17, 24, 32, 0.92), rgba(11, 16, 22, 0.9));
  border: 1px solid rgba(101, 134, 161, 0.28);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(185, 227, 255, 0.05);
}

.eyebrow,
.beta-pill,
.rail-brand {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7fb3d1;
}

h1, h2, h3, .future-metric-headline {
  letter-spacing: -0.03em;
  font-weight: 760;
}

.subtext, p, .trust-row, .future-hero-subtext {
  color: var(--text-secondary);
}

.primary-btn {
  background: linear-gradient(135deg, var(--green-confidence), #2dc66f);
  color: #052010;
  box-shadow: 0 10px 24px rgba(47, 196, 110, 0.32);
}

.secondary-btn,
.nav-btn,
.header-share-btn {
  background: rgba(13, 21, 30, 0.76);
  color: #b3c6da;
  border: 1px solid rgba(109, 141, 168, 0.28);
}

.nav-btn.active,
.nav-btn:hover,
.secondary-btn:hover,
.secondary-btn:focus-visible {
  background: rgba(20, 42, 56, 0.82);
  color: #dff5ff;
  border-color: rgba(95, 206, 239, 0.45);
}

.future-map-hero,
.future-map-stage,
#map {
  background-color: #081019;
}

.future-map-grid {
  background-image: linear-gradient(rgba(60, 232, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 232, 255, 0.09) 1px, transparent 1px);
}

.future-route {
  background: linear-gradient(90deg, transparent 0%, rgba(15, 184, 255, 0.2) 22%, rgba(60, 232, 255, 0.95) 50%, rgba(15, 184, 255, 0.2) 78%, transparent 100%);
}

.pulse-dot,
.live-chip {
  background: var(--cyan-live);
  color: #06202d;
}

.route-status-card.delayed,
.blocked-status,
.gridly-hazard-marker.high {
  border-color: rgba(255, 79, 94, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(255, 79, 94, 0.35), 0 0 24px rgba(255, 79, 94, 0.3);
}
.gridly-hazard-marker.route-relevant {
  transform: scale(1.08);
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(163, 224, 255, 0.62), 0 0 18px rgba(86, 179, 255, 0.36);
  z-index: 410;
  animation: gridlyRouteRelevantPulse 2.8s ease-in-out infinite;
}
.gridly-hazard-marker.route-deemphasized {
  opacity: 0.66;
  filter: saturate(0.82);
}
.gridly-hazard-marker.state-cleared,
.gridly-hazard-marker[data-state="cleared"] {
  opacity: 0.35;
  filter: grayscale(0.72);
}
@keyframes gridlyRouteRelevantPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(163, 224, 255, 0.52), 0 0 12px rgba(86, 179, 255, 0.22); }
  50% { box-shadow: 0 0 0 1px rgba(163, 224, 255, 0.72), 0 0 18px rgba(86, 179, 255, 0.34); }
}

.gridly-hazard-marker.moderate,
.delay-status {
  border-color: rgba(255, 179, 71, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(255, 179, 71, 0.35), 0 0 20px rgba(255, 179, 71, 0.28);
}

.clear-status,
.gridly-hazard-marker.low,
.route-status-card.cleared {
  border-color: rgba(61, 220, 132, 0.62) !important;
  box-shadow: 0 0 0 1px rgba(61, 220, 132, 0.3), 0 0 20px rgba(61, 220, 132, 0.25);
}
.gridly-hazard-marker.gridly-consequence-low {
  box-shadow: 0 0 0 1px rgba(112, 197, 255, 0.24), 0 0 14px rgba(112, 197, 255, 0.18);
}
.gridly-hazard-marker.gridly-consequence-moderate {
  box-shadow: 0 0 0 1px rgba(255, 189, 92, 0.3), 0 0 16px rgba(255, 189, 92, 0.2);
}
.gridly-hazard-marker.gridly-consequence-high {
  box-shadow: 0 0 0 1px rgba(255, 126, 98, 0.36), 0 0 18px rgba(255, 126, 98, 0.26);
}
.gridly-hazard-marker.gridly-consequence-critical {
  box-shadow: 0 0 0 1px rgba(255, 95, 126, 0.4), 0 0 20px rgba(255, 95, 126, 0.28);
}
.gridly-hazard-marker.gridly-freshness-fresh {
  opacity: 0.98;
  filter: saturate(1.02);
}
.gridly-hazard-marker.gridly-freshness-recent {
  opacity: 0.92;
  filter: saturate(0.96);
}
.gridly-hazard-marker.gridly-freshness-aging {
  opacity: 0.78;
  filter: saturate(0.84);
}
.gridly-hazard-marker.gridly-freshness-stale {
  opacity: 0.62;
  filter: saturate(0.72) grayscale(0.2);
}
.gridly-hazard-marker.gridly-freshness-unknown {
  opacity: 0.56;
  filter: saturate(0.6) grayscale(0.34);
}
.gridly-hazard-marker.gridly-confidence-high {
  opacity: 1;
  filter: contrast(1.02) saturate(1.01);
}
.gridly-hazard-marker.gridly-confidence-medium {
  opacity: 0.92;
  filter: contrast(0.99) saturate(0.95);
}
.gridly-hazard-marker.gridly-confidence-low {
  opacity: 0.82;
  filter: contrast(0.95) saturate(0.84);
}
.gridly-hazard-marker.gridly-confidence-very-low {
  opacity: 0.72;
  filter: contrast(0.9) saturate(0.72) grayscale(0.22);
}

* {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 220ms ease;
}

@media (max-width: 1100px) {
  .mobile-home-card,
  .hero-card,
  .future-map-hero {
    border-radius: 20px;
    background: linear-gradient(170deg, rgba(18, 27, 36, 0.96), rgba(12, 18, 26, 0.96));
  }

  .mobile-bottom-nav {
    background: linear-gradient(165deg, rgba(9, 14, 21, 0.95), rgba(7, 11, 17, 0.95));
    border-color: rgba(86, 126, 156, 0.45);
  }
}


/* Premium map overlay weight tuning */
.share-card, .quick-clear-card { background: rgba(10,12,15,0.52); border-color: rgba(255,255,255,0.09); box-shadow: 0 10px 20px rgba(0,0,0,0.28); backdrop-filter: blur(8px); }
.secondary-btn, .nav-btn { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
.leaflet-control-zoom a { background: rgba(10,13,16,0.62) !important; border-color: rgba(255,255,255,0.14) !important; color:#c5d5e7 !important; }

/* V35 refinement pass: calmer labels + lighter overlays + subtle premium motion */
#map .leaflet-labelsPane-pane .leaflet-tile {
  filter: grayscale(0.38) brightness(0.9) contrast(0.96);
  opacity: 0.9;
}

.leaflet-pane,
.leaflet-layer {
  text-shadow: 0 1px 1px rgba(2, 8, 14, 0.12);
}

.leaflet-container {
  font-size: 0.94rem;
  letter-spacing: 0.01em;
}

.desktop-route-watch-strip {
  top: 14px;
  left: 14px;
  right: 14px;
  padding: 8px 11px;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(9, 15, 23, 0.66), rgba(7, 12, 19, 0.44));
  border-color: rgba(162, 198, 236, 0.2);
  overflow: hidden;
}

.desktop-route-watch-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(102deg, transparent 24%, rgba(99, 210, 255, 0.16) 49%, transparent 74%);
  transform: translateX(-130%);
  animation: route-strip-shimmer 7.8s ease-in-out infinite;
  pointer-events: none;
}

.report-mode-banner {
  background: linear-gradient(145deg, rgba(10, 16, 24, 0.58), rgba(8, 13, 20, 0.38));
  border-color: rgba(167, 200, 235, 0.22);
  backdrop-filter: blur(6px);
}

.share-card,
.quick-clear-card,
.geo-filter-shell,
.geo-filter-status,
.map-header {
  background-color: rgba(10, 15, 22, 0.56);
}

.map-header {
  border-color: rgba(168, 205, 245, 0.14);
}

@keyframes route-strip-shimmer {
  0%,
  78% {
    transform: translateX(-130%);
    opacity: 0;
  }
  86% {
    opacity: 0.7;
  }
  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

/* V36 map-style polish: style-specific tuning with readable roads and labels */
#map {
  filter: none;
}

#map.map-style-standard {
  filter: saturate(0.95) brightness(0.96) contrast(1.03);
}

#map.map-style-dark {
  filter: saturate(1.05) brightness(1.03) contrast(1.06);
}

#map.map-style-satellite {
  filter: saturate(1.08) brightness(1.06) contrast(1.08);
}

#map.map-style-standard .leaflet-tile {
  filter: none;
}

#map.map-style-dark .leaflet-tile {
  filter: brightness(1.08) contrast(1.12) saturate(0.95);
}

#map.map-style-satellite .leaflet-tile-pane .leaflet-tile {
  filter: saturate(1.14) brightness(1.08) contrast(1.08);
}

#map.map-style-satellite .leaflet-tile-pane + .leaflet-pane .leaflet-tile,
#map.map-style-satellite .leaflet-pane .leaflet-tile {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

#map .leaflet-control-layers {
  font-size: 0.82rem;
  line-height: 1.2;
}

#map .leaflet-control-layers-base label {
  font-weight: 700;
}

.gridly-marker {
  box-shadow: 0 0 0 2px rgba(145, 243, 255, 0.78), 0 0 24px rgba(59, 222, 255, 0.75);
}

.gridly-marker.alert {
  box-shadow: 0 0 0 2px rgba(255, 170, 186, 0.72), 0 0 26px rgba(255, 71, 110, 0.78);
}

.gridly-marker.cleared {
  box-shadow: 0 0 0 2px rgba(132, 244, 166, 0.72), 0 0 22px rgba(45, 210, 125, 0.72);
}

.route-status-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(120, 215, 255, 0.52);
  background: linear-gradient(145deg, rgba(11, 23, 34, 0.9), rgba(7, 16, 25, 0.94));
  box-shadow: inset 0 0 0 1px rgba(130, 232, 255, 0.16), 0 16px 34px rgba(0, 0, 0, 0.42);
}

.route-status-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(102deg, rgba(86, 237, 255, 0.34), rgba(94, 139, 255, 0.2) 42%, rgba(112, 255, 206, 0.26));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.all-crossings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(186, 210, 232, 0.24);
  background: linear-gradient(140deg, rgba(9, 14, 20, 0.82), rgba(8, 12, 18, 0.68));
  color: #cfdded;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.all-crossings-toggle input {
  appearance: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: rgba(160, 183, 207, 0.28);
  border: 1px solid rgba(200, 218, 236, 0.34);
  position: relative;
  transition: background 0.22s ease, border-color 0.22s ease;
}

.all-crossings-toggle input::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: rgba(235, 243, 252, 0.9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s ease;
}

.all-crossings-toggle input:checked {
  background: rgba(78, 208, 255, 0.42);
  border-color: rgba(128, 225, 255, 0.6);
}

.all-crossings-toggle input:checked::after {
  transform: translateX(14px);
}

@media (max-width: 768px) {
  .all-crossings-toggle {
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
    padding: 10px 13px;
    font-size: 0.8rem;
  }
}

/* V36 usability clarity updates */
#map .leaflet-roadsPane-pane .leaflet-tile {
  filter: saturate(1.38) brightness(1.14) contrast(1.28) hue-rotate(182deg);
}

#map .leaflet-labelsPane-pane .leaflet-tile {
  filter: grayscale(0) brightness(1.2) contrast(1.32);
}

.gridly-marker.state-normal { background: #4bc7ff; border-color: rgba(214, 246, 255, 0.9); }
.gridly-marker.state-blocked { background: #ff5c3d; border-color: rgba(255, 208, 201, 0.95); }
.gridly-marker.state-delay { background: #ffbf47; border-color: rgba(255, 236, 195, 0.95); }
.gridly-marker.state-cleared { background: #43e6a0; border-color: rgba(202, 255, 232, 0.95); }
.gridly-marker-wrap {
  position: relative;
}
.gridly-marker {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid rgba(226, 243, 255, 0.86);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  color: #04131d;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32);
}
.gridly-marker.state-blocked {
  color: #fff3f1;
  box-shadow: 0 0 0 3px rgba(255, 92, 61, 0.22), 0 8px 16px rgba(0, 0, 0, 0.34);
  animation: blocked-pulse 1.1s ease-in-out infinite;
}
.gridly-marker.state-delay {
  color: #2a1700;
}
.gridly-marker.state-cleared {
  color: #022d1d;
}
.gridly-marker.state-normal {
  color: #032232;
  background: #7d8a93;
  border-color: rgba(216, 231, 240, 0.74);
}
.gridly-marker-minutes {
  position: absolute;
  left: 19px;
  top: -8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #f4f8ff;
  background: rgba(8, 17, 28, 0.92);
  border: 1px solid rgba(167, 193, 214, 0.5);
  border-radius: 999px;
  padding: 2px 6px;
}

.gridly-marker.pulse-nearest,
.pulse-nearest .gridly-marker {
  animation: marker-nearest-pulse 1.05s ease-in-out 4;
}

/* V173.5 rail-only marker visual pass (passive class driven) */
.gridly-marker-rail-clear .gridly-marker {
  background: #6f8695;
  border-color: rgba(214, 229, 240, 0.72);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.26);
  color: #022536;
}

.gridly-marker-rail-blocked .gridly-marker {
  background: #ff6a4f;
  border-color: rgba(255, 220, 212, 0.92);
  box-shadow: 0 0 0 2px rgba(255, 106, 79, 0.18), 0 7px 14px rgba(0, 0, 0, 0.33);
  color: #fff6f3;
}

.gridly-marker-rail-route-impact .gridly-marker {
  background: #ff6046;
  border-color: rgba(255, 230, 224, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 96, 70, 0.18), 0 8px 16px rgba(0, 0, 0, 0.34);
  color: #fff8f5;
}

.leaflet-tooltip.gridly-map-hint {
  background: rgba(8, 16, 26, 0.95);
  color: #eaf4ff;
  border: 1px solid rgba(102, 232, 255, 0.58);
  border-radius: 12px;
  font-weight: 700;
  padding: 8px 10px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}

@keyframes marker-nearest-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.28); }
}

@keyframes gridly-rail-route-impact-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 86, 61, 0.18), 0 8px 16px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(255, 86, 61, 0.24), 0 9px 17px rgba(0, 0, 0, 0.35); }
}

@keyframes blocked-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(255, 92, 61, 0.2), 0 8px 16px rgba(0,0,0,0.3); }
  50% { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(255, 92, 61, 0.38), 0 10px 18px rgba(0,0,0,0.34); }
}


.map-tools-overlay {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin: 0 0 10px;
  position: relative;
  z-index: 700;
}

.crossing-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legend-pill {
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 0.75rem;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}

/* V18.5 critical UI cleanup hotfixes */
html,
body {
  overflow-x: clip;
}

body {
  overflow-y: auto;
  min-height: 100%;
}

body.modal-open {
  overflow: hidden !important;
}

.map-tools-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  z-index: 820;
  display: grid;
  gap: 8px;
  width: auto;
  max-width: min(94%, 640px);
  pointer-events: none;
}

.map-frame,
#map,
#map .leaflet-pane,
#map .leaflet-map-pane,
#map .leaflet-overlay-pane,
#map .leaflet-marker-pane,
#map .leaflet-popup-pane {
  pointer-events: auto;
}

.map-frame::before,
.map-frame::after,
.map-card::before,
.map-card::after {
  pointer-events: none !important;
}

.map-tools-overlay {
  height: auto !important;
  bottom: auto !important;
}

.map-tools-overlay .geo-filter-shell,
.map-tools-overlay .geo-filter-status,
.map-tools-overlay .crossing-status-legend,
.map-tools-overlay .all-crossings-advanced {
  pointer-events: auto;
}

.map-tools-overlay .geo-filter-shell {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  max-width: fit-content;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px;
  border-radius: 999px;
}

.map-tools-overlay .geo-filter-pill {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0;
  white-space: nowrap;
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
}

#firstRunSetupModal .first-run-modal-card {
  width: min(560px, calc(100vw - 28px));
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
}

#firstRunSetupModal .route-setup-grid-mobile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#firstRunSetupModal .route-setup-grid-mobile .primary-btn,
#firstRunSetupModal .route-setup-grid-mobile .secondary-btn {
  width: 100%;
  min-height: 44px;
}

.setup-detected-town {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  .map-tools-overlay {
    top: 12px;
    left: 12px;
    right: 12px;
    max-width: calc(100% - 24px);
  }

  .map-tools-overlay .geo-filter-shell {
    max-width: 100%;
    padding-right: 4px;
  }

  #firstRunSetupModal {
    align-items: flex-end;
  }

  #firstRunSetupModal .first-run-modal-card {
    width: min(100vw - 12px, 560px);
    border-radius: 20px 20px 14px 14px;
    margin: 0 auto 8px;
    padding: 18px 16px 20px;
    max-height: 88vh;
  }

  #firstRunSetupModal .route-setup-grid-mobile {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.legend-pill.blocked { color: #ff6b6b; border-color: rgba(255, 80, 80, 0.42); background: rgba(255, 60, 60, 0.12);}
.legend-pill.delayed { color: #ffc45a; border-color: rgba(255, 176, 51, 0.42); background: rgba(255, 180, 50, 0.12);}
.legend-pill.cleared { color: #53e6a5; border-color: rgba(83, 230, 165, 0.4); background: rgba(50, 220, 140, 0.12);}
.legend-pill.inactive { color: #a9b7cb; }


.map-header .crossing-status-legend {
  margin-top: 10px;
}

.map-header .legend-pill {
  font-size: 0.7rem;
  padding: 5px 10px;
}

.desktop-map-legend-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(138, 168, 197, 0.24);
  background: linear-gradient(145deg, rgba(8, 13, 20, 0.88), rgba(10, 17, 28, 0.74));
  justify-content: flex-end;
  max-width: 100%;
}

.mobile-map-legend {
  display: flex;
}

#map {
  border-radius: 20px;
  border: 1px solid rgba(113, 163, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 24px 40px rgba(1, 10, 20, 0.45);
}

.gridly-marker {
  border-width: 2px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.52), 0 0 0 3px rgba(255,255,255,0.05);
}

.gridly-marker-minutes {
  font-weight: 900;
  letter-spacing: 0.01em;
  background: rgba(3,7,14,0.95);
  border: 1px solid rgba(255,255,255,0.22);
}

.alert-item {
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(145deg, rgba(8,13,20,0.9), rgba(10,17,28,0.85));
}

.alert-item.high { border-color: rgba(255, 84, 84, 0.45); box-shadow: inset 0 0 0 1px rgba(255,84,84,0.18);}
.alert-item.cleared { border-color: rgba(77, 227, 156, 0.36); box-shadow: inset 0 0 0 1px rgba(77,227,156,0.14);}

@media (max-width: 768px) {
  .crossing-status-legend {
    gap: 5px;
  }

  .legend-pill {
    font-size: 0.7rem;
    padding: 5px 10px;
  }
}

/* V38 usability rescue pass: brighter map, road-first hierarchy, obvious incidents */
#map .leaflet-roadsPane-pane .leaflet-tile {
  filter: saturate(1.1) brightness(1.3) contrast(1.28) hue-rotate(196deg);
  opacity: 1;
}

#map .leaflet-labelsPane-pane .leaflet-tile {
  filter: grayscale(0.08) brightness(1.26) contrast(1.18);
  opacity: 1;
}

.gridly-marker {
  width: 30px;
  height: 30px;
  font-size: 15px;
  border-width: 2px !important;
}

.gridly-marker.state-blocked { background: #e31837; }
.gridly-marker.state-delay { background: #ffb020; }
.gridly-marker.state-cleared { background: #1fbf68; }
.gridly-marker.state-normal {
  width: 16px;
  height: 16px;
  opacity: 0.65;
}

.gridly-marker-minutes {
  left: 20px;
  top: -12px;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
}

@media (max-width: 768px) {
  #map {
    height: clamp(420px, 64svh, 620px);
  }
}

/* V37 commuter intelligence pass: brighter roads, quieter rail, clearer incident hierarchy */
#map {
  filter: saturate(0.94) brightness(0.98) contrast(1.08);
}

#map .leaflet-roadsPane-pane .leaflet-tile {
  filter: saturate(1.34) brightness(1.16) contrast(1.2) hue-rotate(190deg);
  opacity: 0.98;
}

#map .leaflet-labelsPane-pane .leaflet-tile {
  filter: grayscale(0.18) brightness(1.08) contrast(1.08);
  opacity: 0.95;
}

#map .leaflet-railPane-pane .leaflet-tile {
  filter: grayscale(0.72) saturate(0.22) brightness(0.62) contrast(0.82) hue-rotate(8deg);
  opacity: 0.24;
}

.gridly-marker {
  width: 16px;
  height: 16px;
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(192, 244, 255, 0.7), 0 0 18px rgba(68, 221, 255, 0.58);
}

.gridly-marker.state-blocked {
  background: #ff3d49;
  box-shadow: 0 0 0 2px rgba(255, 188, 192, 0.72), 0 0 22px rgba(255, 61, 73, 0.68);
}

.gridly-marker.state-delay {
  background: #ffb347;
  box-shadow: 0 0 0 2px rgba(255, 225, 176, 0.66), 0 0 20px rgba(255, 179, 71, 0.64);
}

.gridly-marker.state-cleared {
  background: #3fd88e;
  box-shadow: 0 0 0 2px rgba(191, 255, 222, 0.66), 0 0 18px rgba(63, 216, 142, 0.56);
}

.gridly-marker.state-normal {
  width: 10px;
  height: 10px;
  opacity: 0.45;
  box-shadow: 0 0 0 1px rgba(193, 228, 255, 0.42);
}

.gridly-marker.cluster-lead {
  width: 18px;
  height: 18px;
}

.gridly-marker-wrap {
  position: relative;
}

.gridly-marker-cluster-badge {
  position: absolute;
  top: -12px;
  right: -16px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #14324c, #1f5076);
  border: 1px solid rgba(183, 232, 255, 0.84);
  color: #f2fbff;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(8, 26, 41, 0.58);
}

@media (max-width: 1100px) {
  .app-shell {
    width: min(100%, calc(100% - 16px));
    margin: 12px auto 104px;
  }

  .command-center {
    gap: 18px;
  }

  .map-card {
    border-radius: 24px;
    padding-bottom: 4px;
  }

  #map {
    height: 68vh;
    min-height: 500px;
    border-radius: 24px;
  }

  .map-header,
  .report-mode-banner,
  .geo-filter-shell,
  .geo-filter-status,
  .desktop-route-watch-strip {
    margin-left: 8px;
    margin-right: 8px;
  }
}

/* V38 final override ordering */
#map .leaflet-roadsPane-pane .leaflet-tile {
  filter: saturate(1.1) brightness(1.3) contrast(1.28) hue-rotate(196deg);
  opacity: 1;
}

#map .leaflet-labelsPane-pane .leaflet-tile {
  filter: grayscale(0.08) brightness(1.26) contrast(1.18);
  opacity: 1;
}

.gridly-marker {
  width: 30px;
  height: 30px;
  font-size: 15px;
  border-width: 2px !important;
}

.gridly-marker.state-blocked { background: #e31837; }
.gridly-marker.state-delay { background: #ffb020; }
.gridly-marker.state-cleared { background: #1fbf68; }
.gridly-marker.state-normal {
  width: 16px;
  height: 16px;
  opacity: 0.65;
}

.gridly-marker-minutes {
  left: 20px;
  top: -12px;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
}

@media (max-width: 768px) {
  #map {
    height: clamp(420px, 64svh, 620px);
  }
}

/* === Map-first layout redesign (hierarchy-only) === */
@media (min-width: 1101px) {
  .app-shell.premium-layout {
    width: min(1680px, calc(100% - 24px));
    margin: 8px auto 14px;
  }

  .main-column > * + * { margin-top: 8px; }

  .command-center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 12px;
    align-items: start;
  }

  .map-card {
    position: relative;
    min-height: calc(100vh - 132px);
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .map-card .section-header.map-header {
    display: none;
  }

  .desktop-map-legend-row {
    display: flex;
  }

  .mobile-map-legend {
    display: none;
  }

  .desktop-route-watch-strip {
    position: static;
    transform: none;
    z-index: auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(10, 14, 18, 0.72);
    border: 1px solid rgba(102, 232, 255, 0.24);
    box-shadow: none;
  }

  .map-ux-strip {
    position: absolute;
    right: 14px;
    top: 14px;
    left: auto;
    z-index: 680;
    margin: 0;
    max-width: min(52%, 580px);
  }

  .geo-filter-shell {
    padding: 6px;
    border-radius: 999px;
    background: rgba(5, 9, 13, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
  }

  .all-crossings-toggle,
  .geo-filter-status,
  .report-mode-banner {
    display: none;
  }

  #map {
    min-height: calc(100vh - 158px);
    height: calc(100vh - 200px);
    margin-top: 0;
    border-radius: 18px;
  }

  .desktop-command-panel {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 104px);
    overflow: auto;
  }
}

@media (max-width: 1100px) {
  .app-header {
    min-height: 56px;
    padding: 0 12px;
  }

  .brand-logo-frame {
    width: 170px;
    height: 48px;
  }

  .beta-pill,
  .top-nav {
    display: none;
  }

  .main-column > * + * { margin-top: 8px; }

  .command-center {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .map-card {
    order: 1;
    padding: 8px;
    border-radius: 18px;
  }

  .map-card .section-header.map-header {
    display: none;
  }

  .desktop-map-legend-row {
    display: none;
  }

  .mobile-map-legend {
    display: flex;
  }

  .desktop-route-watch-strip {
    display: flex;
    margin: 0 0 8px;
    border-radius: 12px;
    padding: 8px 10px;
  }

  .map-ux-strip {
    margin: 0 0 8px;
  }

  .geo-filter-shell {
    display: flex;
    overflow-x: auto;
    gap: 5px;
    padding: 7px;
    border-radius: 12px;
  }

  #map {
    height: 48vh;
    min-height: 320px;
    border-radius: 12px;
  }

  .desktop-command-panel {
    order: 2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(82vw, 1fr);
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  .desktop-command-panel .panel-card {
    scroll-snap-align: start;
    margin: 0;
    border-radius: 16px;
  }

  .report-drawer {
    order: 3;
    border-radius: 16px;
  }

  .mobile-bottom-nav {
    display: grid;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1400;
  }
}

/* UX simplification pass: map-first hierarchy */
.desktop-route-watch-strip {
  padding: 10px 14px;
  border-radius: 12px;
}
.desktop-route-watch-strip .eyebrow { margin-bottom: 3px; }
.desktop-route-watch-strip strong { font-size: 0.95rem; }
.desktop-route-watch-strip p { margin: 2px 0 0; font-size: 0.78rem; color: var(--muted); }

.map-header {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.map-header .actions { display: none; }
.map-note { max-width: 54ch; }

.map-ux-strip {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}
.geo-filter-shell {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(10, 12, 15, 0.72);
  border: 1px solid rgba(255,255,255,0.12);
}
.geo-filter-pill {
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 0.78rem;
}

#map {
  margin-top: 10px;
  border-radius: 16px;
}

@media (min-width: 1101px) {
  .all-crossings-toggle,
  .geo-filter-status {
    margin-top: 8px;
    margin-bottom: 0;
  }
  .mobile-sticky-report { display: none !important; }
}

@media (max-width: 1100px) {
  .map-card {
    padding: 12px;
    border-radius: 16px;
  }
  .desktop-route-watch-strip {
    padding: 8px 10px;
    border-radius: 12px;
  }
  .desktop-route-watch-strip .secondary-btn:not(#stopRouteWatchBtn):not(#clearRouteBtn) { display: none; }
  .desktop-route-watch-strip #stopRouteWatchBtn,
  .desktop-route-watch-strip #clearRouteBtn { display: inline-flex; }
  .geo-filter-shell {
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
  }
  .geo-filter-pill {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  #map {
    min-height: 62vh;
  }
}


/* Gridly beta polish sprint */
@media (max-width: 760px) {
  .gridly-hazard-launcher {
    bottom: 88px !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,95,61,.45) !important;
  }
}
.trend-item p, .alert-item p {
  line-height: 1.25;
}
.gridly-marker.state-blocked.alert {
  box-shadow: 0 0 0 3px rgba(255, 170, 155, 0.82), 0 0 26px rgba(255, 49, 49, 0.85);
}
.gridly-marker-minutes {
  font-weight: 900;
}


.gridly-hazard-marker.nearby-priority {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(80, 155, 255, 0.35), 0 10px 24px rgba(47, 134, 255, 0.35);
  opacity: 1;
}

.gridly-hazard-marker.far-faded {
  opacity: 0.36;
  filter: saturate(0.72);
}

.leaflet-interactive[stroke="#56a8ff"] {
  filter: drop-shadow(0 0 10px rgba(72, 145, 255, 0.9));
}

/* UX simplification overrides */
.map-ux-strip {
  justify-content: flex-start;
}

.geo-filter-shell {
  border-radius: 12px;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.all-crossings-advanced {
  margin: 8px 0 0;
}

.all-crossings-advanced summary,
.report-tools-advanced summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
}

.all-crossings-advanced:not([open]) .all-crossings-toggle {
  display: none;
}

.report-tools-advanced {
  margin-top: 12px;
}

.report-tools-advanced:not([open]) .report-tools {
  display: none;
}

@media (min-width: 1101px) {
  .all-crossings-advanced {
    display: none;
  }
}

@media (max-width: 1100px) {
  .mobile-sticky-report {
    bottom: max(14px, env(safe-area-inset-bottom));
    min-height: 58px;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.01em;
  }

  .report-drawer-summary h2 {
    font-size: 1.12rem;
  }
}

/* Hotfix: keep map filter UI above map and prevent clipped edge overlays */
.map-card .map-ux-strip .geo-filter-shell {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
}

.map-card .map-ux-strip .geo-filter-pill {
  width: auto;
  min-width: max-content;
  text-align: center;
}

.map-card .geo-filter-status {
  position: static !important;
  inset: auto !important;
  max-width: 100%;
  margin-top: 8px;
}

/* Gridly V18 daily destination */
.destination-hero-card,
.desktop-destination-strip,
.route-watch-badge {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(160deg, rgba(11, 17, 26, 0.95), rgba(14, 18, 24, 0.92));
  border-radius: 18px;
}
.destination-hero-card {
  padding: 14px;
  display: grid;
  gap: 10px;
}
.destination-hero-copy strong { font-size: 1.05rem; }
.destination-hero-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.destination-chip-row,
.desktop-destination-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.destination-chip {
  padding: 9px 13px;
  font-size: 0.83rem;
}
.destination-chip-primary,
.destination-chip-secondary {
  display: block;
  line-height: 1.15;
}
.destination-chip-secondary {
  margin-top: 2px;
  color: rgba(212, 230, 244, 0.78);
  font-size: 0.72rem;
  font-weight: 600;
}
.destination-empty-note {
  margin: 0;
  color: #ffd480;
  font-size: 0.8rem;
}
.destination-empty-note-row {
  display: block;
}
.desktop-destination-strip {
  padding: 12px 14px;
  margin-top: 10px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.route-watch-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 8px 0 10px;
  padding: 7px 11px;
  font-size: 0.76rem;
  line-height: 1.2;
  font-weight: 800;
  z-index: 1;
}
.route-watch-badge.route-green { border-color: rgba(70, 218, 142, 0.62); color: #95ffcd; }
.route-watch-badge.route-amber { border-color: rgba(255, 191, 71, 0.62); color: #ffd99a; }
.route-watch-badge.route-red { border-color: rgba(255, 92, 61, 0.72); color: #ffb1a1; }
@media (min-width: 1101px) {
  .destination-hero-card { display: none; }
  .desktop-destination-strip { display: flex; }
  .route-watch-badge {
    margin: 4px 0 6px;
    padding: 5px 9px;
    font-size: 0.71rem;
    border-radius: 12px;
  }
}

.leaflet-marker-icon.route-priority {
  z-index: 690 !important;
  filter: drop-shadow(0 0 8px rgba(46, 204, 113, 0.55));
}

.leaflet-marker-icon.off-route-faded {
  opacity: 0.48;
  transform: scale(0.92);
}

/* GRIDLY V18.1: route trust + control stacking safety */
#map .leaflet-pane.leaflet-routePane-pane {
  z-index: 630 !important;
}

#map .leaflet-popup-pane {
  z-index: 700 !important;
}

/* GRIDLY V18.2 crossing report click safety */
#map .leaflet-marker-pane {
  z-index: 650 !important;
  pointer-events: auto !important;
}

#map .leaflet-popup-pane {
  pointer-events: auto !important;
}

#map .leaflet-marker-pane .leaflet-marker-icon,
#map .leaflet-marker-pane .leaflet-interactive,
#map .leaflet-popup-pane .popup-report-btn,
#map .leaflet-popup-pane .leaflet-popup-content {
  pointer-events: auto !important;
}

.destination-hero-card {
  position: relative;
  z-index: 25;
  margin-bottom: 14px;
}

.mobile-sticky-report {
  z-index: 1100;
}

@media (max-width: 960px) {
  .map-report-shortcut {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .map-tools-overlay {
    align-items: stretch;
    gap: 7px;
    margin-bottom: 8px;
  }

  .map-tools-overlay .geo-filter-shell {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 2px;
  }

  .desktop-map-legend-row {
    justify-content: flex-start;
    overflow-x: auto;
  }
}

/* V18.3 premium onboarding + compact map filter pills */
.first-run-modal-card { max-width: 520px; }

@media (min-width: 1101px) {
  .map-card .map-ux-strip .geo-filter-shell {
    width: auto !important;
    max-width: 560px;
    margin-left: auto;
    padding: 6px 8px;
    border-radius: 999px;
  }
}

@media (max-width: 1100px) {
  .map-card .map-ux-strip .geo-filter-shell {
    width: 100% !important;
    padding: 0 2px;
    gap: 7px;
    -webkit-overflow-scrolling: touch;
  }

  .map-card .map-ux-strip .geo-filter-pill { flex: 0 0 auto; }

  .map-card .geo-filter-status { margin-bottom: 64px; }
}

/* V18.4 onboarding modal + compact filters */
#firstRunSetupModal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: grid;
  place-items: center;
}

#firstRunSetupModal .route-setup-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 12, 0.72);
}

#firstRunSetupModal .first-run-modal-card {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
  overflow-y: auto;
  border-radius: 22px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(15, 20, 30, 0.97), rgba(9, 11, 16, 0.97));
}

.setup-detected-town { margin: 0; color: #9ad9ff; font-size: 0.92rem; }
#firstRunSetupModal .first-run-modal-card { max-height: 88vh; }
#firstRunSetupModal .setup-wizard { display: block; }
#firstRunSetupModal .setup-step { display: grid; gap: 12px; }
#firstRunSetupModal .setup-step .primary-btn,
#firstRunSetupModal .setup-step .secondary-btn { min-height: 48px; width: 100%; }

@media (max-width: 1100px) {
  #firstRunSetupModal { align-items: end; }
  #firstRunSetupModal .first-run-modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    padding-bottom: 28px;
  }
}

.map-card .map-ux-strip .geo-filter-shell {
  width: auto !important;
  max-width: max-content;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
}

.map-card .map-ux-strip .geo-filter-pill {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 0.82rem;
  flex: 0 0 auto;
}

@media (max-width: 1100px) {
  .map-card .map-ux-strip .geo-filter-shell {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* V18.6 stabilization: desktop rail stickiness, control stacking, map readability, onboarding tap safety */
@media (min-width: 1101px) {
  .app-shell.premium-layout {
    align-items: start;
  }

  .desktop-left-rail {
    position: sticky !important;
    top: 88px !important;
    align-self: start;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    z-index: 40;
  }

  .map-card .desktop-route-watch-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }

  .map-card .desktop-destination-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
  }

  .map-card .desktop-destination-actions {
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
  }

  .map-card .map-tools-overlay {
    position: static !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
    margin: 0 0 8px;
    pointer-events: auto;
  }

  .map-card .map-tools-overlay .geo-filter-shell {
    align-self: flex-start;
    max-width: 100%;
    overflow-x: auto;
  }

  .map-card .desktop-map-legend-row {
    justify-content: flex-start;
    align-self: flex-start;
  }
}


#firstRunSetupModal .route-setup-modal-backdrop {
  pointer-events: auto;
}

#firstRunSetupModal .first-run-modal-card {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* V18.7 stabilization: CSS conflict reduction for modal/nav/map/layout reliability */
.route-setup-modal,
.smart-alerts-modal,
#firstRunSetupModal {
  z-index: 3200 !important;
}

.route-setup-modal-backdrop,
.smart-alerts-modal-backdrop,
#firstRunSetupModal .route-setup-modal-backdrop {
  z-index: 0;
}

.route-setup-modal-card,
.smart-alerts-modal-card,
#firstRunSetupModal .first-run-modal-card {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  overflow-y: auto;
}

@media (max-width: 1100px) {
  #firstRunSetupModal .first-run-modal-card {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    max-height: 86vh;
    border-radius: 20px 20px 0 0;
  }
}


/* Interaction safety: hidden overlays must never intercept clicks */
.route-setup-modal[hidden],
.smart-alerts-modal[hidden],
.place-name-modal[hidden],
#firstRunSetupModal[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.route-setup-modal:not([hidden]),
.smart-alerts-modal:not([hidden]),
.place-name-modal:not([hidden]),
#firstRunSetupModal:not([hidden]) {
  pointer-events: auto;
}

/* Desktop must never render mobile bottom nav */
@media (min-width: 1101px) {
  .mobile-bottom-nav {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden;
  }
}

body.modal-open {
  overflow: hidden !important;
}

.app-shell {
  overflow-x: clip;
}

@media (min-width: 1101px) {
  .desktop-left-rail {
    position: sticky !important;
    top: 88px !important;
    align-self: flex-start;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    z-index: 55;
  }
}

.map-card .map-tools-overlay {
  position: relative;
  z-index: 20;
  max-width: 100%;
}

.map-card .desktop-map-legend-row {
  position: relative;
  z-index: 19;
  flex-wrap: wrap;
  gap: 8px;
}

.map-card .map-ux-strip .geo-filter-shell {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.map-card .map-ux-strip .geo-filter-pill {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 12px;
}

@media (max-width: 1100px) {
  .mobile-bottom-nav {
    left: 10px;
    right: 10px;
    bottom: 8px;
    z-index: 1200;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    gap: 5px;
  }

  .mobile-bottom-nav-btn {
    min-height: 38px;
    padding: 10px 6px;
  }

  #mobileReportBtn.mobile-sticky-report {
    bottom: 82px;
    z-index: 1190;
  }

  .hero-card {
    overflow: visible;
  }
}

/* V18 clean stable: separate Route Watch controls from map filters */
.map-card .desktop-route-watch-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.map-card .desktop-destination-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.map-card .desktop-destination-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.map-card .map-frame {
  position: relative;
}

.map-card .map-tools-overlay {
  position: absolute !important;
  top: 8px;
  left: 12px;
  right: auto;
  z-index: 420;
  max-width: min(calc(100% - 220px), 620px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(8, 13, 20, 0.72);
  border: 1px solid rgba(170, 205, 240, 0.24);
  backdrop-filter: blur(8px);
}

.map-card .map-view-label {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b9d2ea;
  font-weight: 700;
}

.map-card .map-tools-overlay .geo-filter-shell {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.map-card .geo-filter-status {
  margin-top: 10px;
}


.route-ownership-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}

.route-ownership-summary span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(124, 231, 255, 0.22);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(7, 17, 28, 0.56);
  color: #b7c9db;
  font-size: 0.78rem;
}

.route-ownership-summary b {
  color: #d9edf8;
  font-weight: 700;
}

.route-ownership-summary em {
  color: #f6fbff;
  font-style: normal;
}

.route-watch-setup-hint {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: #9ab3cb;
}

.destination-chip.is-pending {
  opacity: 0.82;
  border-style: dashed;
}
.destination-chip.is-empty-guidance {
  text-align: left;
}

@media (max-width: 1100px) {
  .map-card .map-tools-overlay {
    top: 10px;
    left: 10px;
    right: 10px;
    max-width: none;
    padding: 7px;
  }

  .map-card .map-tools-overlay .desktop-map-legend-row,
  .map-card .map-tools-overlay .all-crossings-advanced,
  .map-card .map-tools-overlay .map-view-label {
    display: none;
  }

  .map-card .map-tools-overlay .geo-filter-pill {
    flex: 0 0 auto;
  }

  #map {
    padding-top: 48px;
  }
}

/* V18 command-center desktop polish */
@media (min-width: 1101px) {
  .app-shell {
    align-items: start;
    gap: 14px;
  }

  .desktop-left-rail {
    position: sticky;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .command-center {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    align-items: start;
    gap: 8px;
  }

  .map-card {
    padding: 10px;
    min-height: 0;
  }

  .map-card .section-header.map-header {
    padding: 0 2px 4px;
    margin-bottom: 6px;
  }

  .map-card .section-header.map-header h2 {
    font-size: 1.02rem;
    margin: 2px 0;
  }

  .map-card .section-header.map-header .map-note {
    font-size: 0.78rem;
    margin: 0;
  }

  .map-card .desktop-route-watch-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 12px;
    background: linear-gradient(130deg, rgba(10, 15, 21, 0.9), rgba(20, 25, 30, 0.85));
  }

  .map-card .desktop-route-watch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
  }

  .map-card .desktop-destination-strip {
    display: none;
  }

  .map-card .map-frame {
    min-height: 0;
  }

  .map-card .map-tools-overlay {
    top: 12px;
    left: 12px;
    right: auto;
    max-width: min(92%, 920px);
    padding: 8px 11px;
    gap: 8px;
    border-radius: 16px;
    border-color: rgba(151, 215, 255, 0.28);
    background: linear-gradient(145deg, rgba(7, 12, 18, 0.76), rgba(11, 17, 24, 0.62));
    box-shadow: 0 12px 28px rgba(2, 6, 12, 0.48), 0 0 0 1px rgba(214, 234, 255, 0.08) inset;
    backdrop-filter: blur(16px) saturate(136%);
  }

  .map-card .map-tools-overlay .geo-filter-shell {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    align-items: center;
    gap: 9px;
    padding: 2px;
    scrollbar-width: thin;
  }

  .map-card .map-tools-overlay .geo-filter-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 7px 14px;
    min-height: 34px;
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: 0.01em;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .map-card .desktop-map-legend-row {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 421;
    margin: 0;
    max-width: 42%;
    justify-content: flex-end;
    gap: 4px;
    padding: 5px 7px;
    border-radius: 12px;
    background: rgba(8, 14, 21, 0.7);
    backdrop-filter: blur(10px);
  }

  .map-card .legend-pill { font-size: 0.66rem; padding: 4px 8px; }

  #map {
    margin-top: 0;
    height: clamp(610px, 78vh, 860px);
    min-height: 610px;
  }

  .desktop-command-panel {
    display: grid;
    gap: 5px;
    max-height: clamp(610px, 78vh, 860px);
    overflow-y: auto;
    padding: 8px;
    border-radius: 18px;
  }

  .desktop-command-panel .panel-card {
    margin: 0;
    border-radius: 12px;
    box-shadow: none;
  }

  .desktop-command-panel .drawer-summary {
    padding: 8px 10px;
    min-height: 34px;
  }

  .desktop-command-panel .drawer-body {
    padding: 8px 10px 10px;
    display: grid;
    gap: 8px;
  }

  .report-drawer {
    max-width: 400px;
    margin-left: auto;
    opacity: 0.89;
  }
}


/* GRIDLY V18 clean map style controls: readable basemaps and premium layer switcher */
#map,
#map .leaflet-pane,
#map .leaflet-layer {
  filter: none !important;
}

#map .leaflet-tile-pane .leaflet-tile,
#map .leaflet-roadsPane-pane .leaflet-tile,
#map .leaflet-railPane-pane .leaflet-tile,
#map .leaflet-labelsPane-pane .leaflet-tile,
#map.map-style-standard .leaflet-tile,
#map.map-style-dark .leaflet-tile,
#map.map-style-satellite .leaflet-tile {
  filter: none !important;
}

#map.map-style-standard {
  filter: saturate(0.97) brightness(0.98) contrast(1.02) !important;
}

#map.map-style-dark {
  filter: saturate(1.08) brightness(1.13) contrast(1.08) !important;
}

#map.map-style-satellite {
  filter: saturate(1.04) brightness(1.07) contrast(1.03) !important;
}

#map .leaflet-control-layers {
  margin-top: 10px;
  margin-right: 10px;
  z-index: 5000 !important;
  border: 1px solid rgba(116, 214, 255, 0.34);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(10, 17, 26, 0.94), rgba(7, 12, 20, 0.92));
  color: #dff5ff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(140, 231, 255, 0.1);
  backdrop-filter: blur(6px);
}

#map .leaflet-control-layers-toggle {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background-color: rgba(13, 21, 33, 0.96);
}

#map .leaflet-control-layers-expanded {
  padding: 8px 11px;
  min-width: 148px;
}

#map .leaflet-control-layers-list,
#map .leaflet-control-layers-base {
  margin: 0;
}

#map .leaflet-control-layers-base label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e9f8ff;
  margin: 0;
  padding: 4px 0;
}

#map .leaflet-control-layers-selector {
  accent-color: #66e8ff;
}

.leaflet-marker-icon.route-impacted {
  z-index: 695 !important;
  filter: drop-shadow(0 0 10px rgba(255, 102, 102, 0.52)) drop-shadow(0 0 16px rgba(255, 180, 90, 0.36));
}

/* V18 desktop command center rebuild */
.command-top-nav { gap: 12px; }
.live-data-pill,.profile-chip{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(7,20,38,.72);font-weight:700;font-size:.82rem}
.live-data-pill{color:#60f0b1;border-color:rgba(83,230,165,.35)}
.profile-chip{color:#d4deec}
.rail-cta-btn{margin-top:auto;border-radius:14px;padding:12px 10px;font-size:.85rem}

@media (min-width: 1101px){
  .app-shell.premium-layout{width:min(1880px,calc(100% - 20px));display:grid;grid-template-columns:108px minmax(0,1fr);gap:14px}
  .desktop-left-rail{position:sticky;top:92px;height:calc(100vh - 108px);display:flex!important;flex-direction:column;gap:8px;padding:14px 10px;border:1px solid rgba(76,139,190,.25);border-radius:24px;background:linear-gradient(180deg,#030a14,#040912 52%,#071120);box-shadow:0 24px 40px rgba(0,0,0,.45)}
  .desktop-left-rail .rail-brand{font-weight:900;color:#45d9ff;letter-spacing:.08em;font-size:.82rem;padding:8px}
  .desktop-left-rail .rail-nav-btn{width:100%;text-align:left;border-radius:12px;padding:10px}
  .main-column{display:grid;gap:12px}
  #dashboardSection{display:none}
  .command-center{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:14px;align-items:start}
  .map-card{padding:12px;min-height:calc(100vh - 130px);display:grid;grid-template-rows:auto auto minmax(620px,1fr) auto;background:linear-gradient(165deg,rgba(5,16,29,.93),rgba(7,12,20,.95));border-color:rgba(79,155,220,.3)}
  .desktop-route-watch-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px;border-radius:18px;background:linear-gradient(120deg,rgba(8,18,31,.88),rgba(6,14,23,.7));border:1px solid rgba(90,171,227,.32)}
  .desktop-route-watch-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .map-header{display:none}
  .map-frame{position:relative;min-height:620px;border-radius:20px;overflow:hidden}
  #map{height:100%;min-height:620px;filter:saturate(1.1) contrast(1.02) brightness(.78)}
  .map-tools-overlay{position:absolute;inset:14px 14px auto 14px;z-index:500;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
  .map-tools-overlay>*{pointer-events:auto}
  .map-tools-overlay .geo-filter-shell{display:flex;gap:8px;padding:8px;border-radius:16px;background:rgba(5,14,26,.85);backdrop-filter:blur(8px);border:1px solid rgba(107,185,229,.28)}
  .map-tools-overlay .geo-filter-pill{border-radius:999px;padding:8px 12px;font-size:.82rem}
  .geo-filter-pill[data-geo-filter="active-delays"]{color:#ffc45a}
  .geo-filter-pill[data-geo-filter="all"]{color:#57e3a7}
  .desktop-map-legend-row{position:absolute;left:14px;right:14px;bottom:14px;padding:10px 12px;border-radius:14px;background:rgba(6,14,25,.82);border:1px solid rgba(102,160,214,.3);justify-content:space-between}
  .side-panel.desktop-command-panel{display:grid;gap:12px}
  .desktop-command-panel .drawer-panel{margin:0;border-radius:20px;background:linear-gradient(180deg,rgba(5,14,26,.95),rgba(7,13,21,.94));border:1px solid rgba(80,140,190,.34)}
  .desktop-command-panel .drawer-body{padding-top:8px}
  .trending-list,.alerts-list{max-height:300px;overflow:auto}
}

/* GRIDLY Phase 3C: desktop map control visibility hardening */
@media (min-width: 1101px) {
  .map-card,
  .map-card .map-frame {
    overflow: visible;
  }

  .map-card .map-frame {
    position: relative;
    padding-top: 4px;
  }

  .map-card .map-tools-overlay {
    top: 16px;
    left: 16px;
    z-index: 1200;
    pointer-events: auto;
    max-width: min(calc(100% - 32px), 760px);
  }

  .map-card .map-tools-overlay .geo-filter-shell,
  .map-card .map-tools-overlay .crossing-status-legend,
  .map-card .map-tools-overlay .geo-filter-pill,
  .map-card .map-tools-overlay .desktop-legend-btn {
    pointer-events: auto;
  }
}

.route-watch-live-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(147, 161, 178, 0.45);
  color: #b8c7d8;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.route-watch-live-pill.is-on {
  border-color: rgba(70, 218, 142, 0.65);
  color: #9dffd0;
  background: rgba(42, 182, 116, 0.15);
}

/* GRIDLY Phase 4C: rebuild desktop top-left map control dock */
@media (min-width: 1101px) {
  .map-card .map-frame {
    overflow: hidden;
  }

  .map-card .map-tools-overlay {
    position: absolute !important;
    top: 18px;
    left: 18px;
    right: auto;
    inset: 18px auto auto 18px;
    z-index: 1300;
    width: min(420px, calc(100% - 36px));
    max-width: calc(100% - 36px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(5, 14, 25, 0.94), rgba(7, 16, 28, 0.9));
    border: 1px solid rgba(111, 177, 230, 0.32);
    box-shadow: 0 10px 24px rgba(2, 7, 14, 0.45);
    backdrop-filter: blur(8px);
    pointer-events: auto;
  }

  .map-card .map-view-label {
    display: block;
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.2;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #c0d9ef;
    font-weight: 800;
  }

  .map-card .map-tools-overlay .geo-filter-shell {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .map-card .map-tools-overlay .geo-filter-pill {
    min-height: 34px;
    padding: 8px 10px;
    font-size: 0.78rem;
    line-height: 1.15;
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }

  .map-card .desktop-map-legend-row {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .map-card .legend-pill {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7px 8px;
    width: 100%;
    font-size: 0.73rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .map-card .map-tools-overlay .all-crossings-advanced {
    margin-top: 2px;
    align-self: start;
  }
}

/* GRIDLY Phase 5B: simplify desktop map controls + tighten height rhythm */
@media (min-width: 1101px) {
  .command-center {
    gap: 12px;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) 390px;
  }

  .map-card {
    padding: 12px;
    min-height: calc(100vh - 128px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px;
  }

  .map-frame {
    min-height: clamp(520px, calc(100vh - 250px), 780px);
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  #map {
    flex: 1 1 auto;
    height: 100%;
    min-height: clamp(520px, calc(100vh - 250px), 780px);
  }

  .side-panel {
    height: auto;
    min-height: calc(100vh - 128px);
    align-self: stretch;
  }

  .desktop-command-panel {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, auto));
    align-content: start;
  }

  .desktop-command-panel {
    min-height: 0;
  }

  .desktop-route-watch-strip {
    margin: 0;
    padding: 8px 11px;
    border-radius: 13px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .route-watch-strip-copy strong,
  .route-watch-strip-copy p {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .route-watch-strip-copy strong {
    line-height: 1.24;
  }

  .route-watch-strip-copy p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    line-height: 1.25;
    max-height: 2.5em;
  }

  .map-card .map-tools-overlay {
    left: 12px;
    right: 12px;
    top: 12px;
    inset: 12px 12px auto 12px;
    width: min(100%, 980px);
    max-width: calc(100% - 24px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(7, 15, 25, 0.62);
    border: 1px solid rgba(120, 171, 213, 0.26);
    box-shadow: 0 8px 20px rgba(1, 8, 15, 0.35);
    backdrop-filter: blur(10px) saturate(122%);
  }

  .map-card .map-tools-overlay .map-view-label,
  .map-card .map-tools-overlay .map-tools-section-label,
  .map-card .map-tools-overlay .map-tools-status,
  .map-card .map-tools-overlay .all-crossings-advanced {
    display: none;
  }

  .map-card .map-tools-overlay .map-tools-section {
    display: contents;
  }

  .map-card .desktop-map-legend-row,
  .map-card .map-tools-overlay .geo-filter-shell {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    min-width: 0;
  }

  .map-card .desktop-map-legend-row {
    flex: 0 0 auto;
  }

  .map-card .map-tools-overlay .geo-filter-shell {
    flex: 1 1 auto;
    justify-content: flex-start;
    overflow: visible;
  }

  .map-card .legend-pill,
  .map-card .map-tools-overlay .geo-filter-pill {
    min-height: 30px;
    padding: 6px 11px;
    font-size: 0.75rem;
    line-height: 1.1;
    border-radius: 999px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    width: auto;
  }

  .map-card .geo-filter-status {
    margin: 0;
    padding: 8px 11px;
    border-radius: 12px;
  }
}

/* GRIDLY Phase 5D: premium desktop wow polish */
@media (min-width: 1101px) {
  .command-center {
    gap: 14px;
    align-items: stretch;
  }

  .map-card {
    border-color: rgba(154, 196, 235, 0.26);
    background: linear-gradient(168deg, rgba(6, 15, 25, 0.95), rgba(7, 11, 20, 0.97));
    box-shadow: 0 26px 52px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .map-frame {
    border: 1px solid rgba(126, 171, 219, 0.3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 20px 46px rgba(2, 6, 12, 0.55);
  }

  .map-card .map-tools-overlay {
    width: min(100%, 1024px);
    padding: 8px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(8, 20, 34, 0.84), rgba(7, 15, 26, 0.72));
    border: 1px solid rgba(131, 176, 221, 0.3);
    box-shadow: 0 14px 34px rgba(1, 8, 15, 0.45);
    gap: 10px;
  }

  .map-card .map-tools-overlay .map-view-label {
    display: inline-flex;
    margin: 0 8px 0 0;
    padding-right: 10px;
    border-right: 1px solid rgba(160, 187, 214, 0.28);
    font-size: 0.64rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    font-weight: 800;
    color: #99b3d0;
  }

  .map-card .map-tools-overlay .map-tools-section {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .map-card .map-tools-overlay .map-tools-section + .map-tools-section {
    margin-left: 4px;
    padding-left: 11px;
    border-left: 1px solid rgba(160, 187, 214, 0.24);
  }

  .map-card .map-tools-overlay .map-tools-section-label {
    display: inline-flex;
    margin: 0;
    color: #8ea5bf;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 800;
  }

  .map-card .desktop-map-legend-row,
  .map-card .map-tools-overlay .geo-filter-shell {
    flex-wrap: nowrap;
    gap: 7px;
  }

  .map-card .legend-pill,
  .map-card .map-tools-overlay .geo-filter-pill {
    min-height: 31px;
    min-width: 78px;
    justify-content: center;
    text-align: center;
    padding: 6px 12px;
    font-size: 0.74rem;
    font-weight: 760;
    letter-spacing: 0.01em;
  }

  .map-card .map-tools-overlay .geo-filter-pill.selected {
    box-shadow: 0 0 0 1px rgba(115, 200, 255, 0.52), 0 6px 14px rgba(0, 0, 0, 0.32);
  }

  .desktop-route-watch-strip {
    border-color: rgba(116, 165, 211, 0.27);
    background: linear-gradient(147deg, rgba(8, 16, 29, 0.92), rgba(10, 19, 29, 0.84));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
    gap: 12px;
  }

  .route-watch-strip-copy .eyebrow { margin-bottom: 6px; }
  .route-watch-strip-copy strong { font-size: 1.02rem; letter-spacing: -0.018em; }
  .route-watch-strip-copy p { color: #b6c5d7; }

  .route-watch-live-pill {
    border-radius: 999px;
    border: 1px solid rgba(117, 142, 165, 0.4);
    background: rgba(132, 152, 170, 0.13);
    color: #dbe7f4;
    font-weight: 780;
    letter-spacing: 0.07em;
    padding: 5px 10px;
  }

  .route-watch-live-pill.is-on {
    background: rgba(52, 198, 138, 0.17);
    border-color: rgba(71, 223, 158, 0.44);
    color: #93ffd0;
  }

  .desktop-route-watch-actions {
    align-items: center;
    gap: 8px;
  }

  .desktop-route-watch-actions .compact-btn {
    min-height: 32px;
    padding: 7px 11px;
    font-size: 0.73rem;
  }

  .desktop-command-panel .panel-card {
    border-color: rgba(141, 174, 206, 0.2);
    background: linear-gradient(174deg, rgba(11, 16, 22, 0.96), rgba(9, 13, 18, 0.93));
    box-shadow: 0 14px 28px rgba(2, 5, 10, 0.48);
  }

  .desktop-command-panel .drawer-summary {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .desktop-command-panel .drawer-body {
    padding: 12px 14px 14px;
  }

  .desktop-command-panel .combined-module-block h3 {
    font-size: 0.73rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #90a9c3;
    margin-bottom: 8px;
  }

  .desktop-command-panel .trending-list,
  .desktop-command-panel .alerts-list {
    gap: 7px;
  }

  .desktop-command-panel .trend-item,
  .desktop-command-panel .alert-item {
    border-radius: 12px;
    padding: 10px 11px;
    background: rgba(16, 21, 28, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .desktop-command-panel .trend-item strong,
  .desktop-command-panel .alert-item strong {
    font-size: 0.86rem;
    letter-spacing: -0.01em;
  }

  .desktop-command-panel .trend-item p,
  .desktop-command-panel .alert-item p,
  .desktop-command-panel .alert-meta {
    font-size: 0.73rem;
    color: #a9b7c7;
  }

  .desktop-command-panel .trend-item.hot {
    border-left: 2px solid rgba(255, 110, 94, 0.72);
  }

  .desktop-command-panel .trend-item.clear {
    border-left: 2px solid rgba(76, 219, 152, 0.72);
  }
}

/* v18 premium desktop alignment refinements */
@media (min-width: 1100px) {
  .app-shell.premium-layout {
    width: min(1600px, calc(100% - 40px));
    margin: 18px auto 14px;
  }

  .app-header {
    min-height: 86px;
    padding: 0 34px;
    background: linear-gradient(180deg, rgba(4, 10, 18, 0.94), rgba(6, 12, 20, 0.9));
    border-bottom: 1px solid rgba(150, 190, 230, 0.14);
  }

  .top-nav.command-top-nav {
    gap: 10px;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid rgba(116, 156, 200, 0.18);
    background: rgba(6, 16, 28, 0.56);
  }

  .top-nav .nav-btn,
  .top-nav .top-command-btn {
    min-height: 38px;
    padding: 10px 16px;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
    border-radius: 12px;
    color: #b2bfd3;
    border: 1px solid transparent;
    background: transparent;
  }

  .top-nav .nav-btn.active,
  .top-nav .nav-btn:hover,
  .top-nav .top-command-btn:hover {
    color: #e9f4ff;
    background: rgba(71, 124, 178, 0.16);
    border-color: rgba(122, 171, 224, 0.32);
  }

  .command-center {
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .map-card {
    padding: 14px;
    border: 1px solid rgba(122, 161, 204, 0.2);
    background: linear-gradient(180deg, rgba(6, 14, 24, 0.93), rgba(8, 16, 25, 0.9));
    box-shadow: 0 22px 52px rgba(2, 7, 16, 0.58);
  }

  .desktop-route-watch-strip {
    margin-bottom: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(108, 155, 206, 0.22);
    background: linear-gradient(128deg, rgba(8, 20, 35, 0.96), rgba(8, 17, 28, 0.89));
    gap: 18px;
  }

  .route-watch-strip-copy .eyebrow { margin-bottom: 4px; }
  .route-watch-strip-copy strong { font-size: 1.9rem; letter-spacing: -0.03em; margin: 8px 0 8px; }
  .route-watch-strip-copy p { font-size: 0.9rem; color: #9db2ca; }

  .route-watch-live-pill {
    background: rgba(39, 153, 103, 0.12);
    border: 1px solid rgba(79, 198, 143, 0.34);
    color: #89efbe;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .desktop-route-watch-actions {
    gap: 8px;
    justify-content: flex-end;
  }

  .desktop-route-watch-actions .compact-btn {
    min-height: 34px;
    border-radius: 12px;
    padding: 8px 12px;
    border-color: rgba(122, 160, 201, 0.25);
    background: rgba(8, 22, 36, 0.48);
  }

  .map-frame {
    border-radius: 20px;
    border: 1px solid rgba(128, 168, 211, 0.2);
    padding: 8px;
    background: linear-gradient(165deg, rgba(5, 13, 22, 0.9), rgba(7, 14, 23, 0.8));
  }

  #map {
    border-radius: 16px;
    border-color: rgba(141, 181, 222, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 16px 34px rgba(2, 7, 16, 0.45);
  }

  .map-card .map-tools-overlay {
    position: absolute;
    inset: 14px 16px auto 16px;
    z-index: 520;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
    align-items: start;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(125, 166, 210, 0.22);
    background: rgba(6, 16, 29, 0.72);
    backdrop-filter: blur(14px) saturate(115%);
  }

  .map-card .map-tools-section,
  .map-card .geo-filter-shell,
  .map-card .map-view-label,
  .map-card .map-tools-status,
  .map-card .all-crossings-advanced {
    margin: 0;
  }

  .map-card .desktop-map-legend-row,
  .map-card .geo-filter-shell {
    background: transparent;
    border: 0;
    padding: 0;
    gap: 7px;
  }

  .map-card .legend-pill,
  .map-card .map-tools-overlay .geo-filter-pill {
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 0.72rem;
    letter-spacing: 0.025em;
  }

  .side-panel.desktop-command-panel {
    padding: 12px;
    border-radius: 22px;
    border: 1px solid rgba(121, 162, 206, 0.2);
    background: linear-gradient(180deg, rgba(7, 16, 28, 0.93), rgba(8, 15, 24, 0.9));
  }

  .desktop-command-panel .drawer-panel {
    border: 1px solid rgba(114, 153, 196, 0.14);
    background: rgba(7, 16, 28, 0.58);
    box-shadow: none;
  }

  .desktop-command-panel .drawer-summary {
    padding: 12px 12px 10px;
  }

  .desktop-command-panel .drawer-body {
    padding: 0 12px 12px;
  }

  .desktop-command-panel .combined-module-block h3 {
    margin: 0 0 10px;
    font-size: 0.85rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8ea7c3;
  }

  .desktop-command-panel .trending-list,
  .desktop-command-panel .alerts-list {
    gap: 8px;
  }

  .desktop-command-panel .trend-item {
    padding: 10px 11px;
    border-radius: 12px;
    border-width: 1px;
    background: rgba(11, 24, 39, 0.5);
  }

  .desktop-command-panel .trend-item strong {
    font-size: 0.88rem;
    letter-spacing: 0.02em;
  }

  .desktop-command-panel .trend-item p {
    font-size: 0.8rem;
    line-height: 1.25;
  }
}

/* GRIDLY Phase 5E: desktop map toolbar and right rail structural cleanup */
@media (min-width: 1100px) {
  .map-card .map-frame .map-tools-overlay {
    top: 64px;
    left: 14px;
    right: 14px;
    inset: 64px 14px auto 14px;
  }

  .map-card .map-tools-overlay {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    width: fit-content;
    max-width: calc(100% - 20px);
  }

  .map-toolbar-main-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .map-card .map-tools-overlay .map-view-label,
  .map-card .map-tools-overlay .map-tools-section-label {
    display: inline-flex;
    margin: 0;
    white-space: nowrap;
  }

  .map-card .map-tools-overlay .map-tools-section {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 0 1 auto;
  }

  .map-card .desktop-map-legend-row,
  .map-card .map-tools-overlay .geo-filter-shell {
    position: static;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    background: transparent;
    border: 0;
    padding: 0;
  }

  .map-toolbar-divider { display: none; }

  .map-card .map-tools-overlay .map-tools-section-label { font-size: 0.7rem; }
  .map-card .map-tools-overlay .map-view-label { font-size: 0.74rem; margin-right: 2px; }
  .map-card .map-tools-overlay .legend-pill,
  .map-card .map-tools-overlay .geo-filter-pill { min-height: 28px; padding: 5px 9px; }

  .map-toolbar-meta-row { display: none; }

  .side-panel.desktop-command-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
  }

  .desktop-command-panel .drawer-panel,
  .desktop-command-panel .panel-card {
    position: static;
    top: auto;
    margin: 0;
  }

  #railPulseDrawer .drawer-body {
    display: grid;
    gap: 10px;
  }

  .desktop-command-panel .trending-list {
    max-height: 180px;
    overflow: auto;
  }

  .desktop-command-panel .alerts-list {
    max-height: 240px;
    overflow: auto;
  }
}

@media (min-width: 1100px) and (max-width: 1320px) {
  .map-toolbar-main-row {
    flex-wrap: wrap;
    row-gap: 5px;
  }

  .map-toolbar-main-row > .map-view-label,
  .map-toolbar-main-row > .map-tools-section:first-of-type {
    flex: 0 0 auto;
  }

  .map-tools-scope-section {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* GRIDLY premium desktop alignment pass: hero route watch, integrated map bar, live intelligence rail */
@media (min-width: 1100px) {
  .command-center {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 16px;
  }

  .map-card {
    background: linear-gradient(160deg, rgba(8, 18, 31, 0.92), rgba(6, 14, 24, 0.84));
    border: 1px solid rgba(98, 140, 183, 0.24);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(190, 220, 255, 0.08), 0 24px 50px rgba(0, 0, 0, 0.35);
    gap: 14px;
  }

  .desktop-route-watch-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    border-radius: 18px;
    border: 1px solid rgba(82, 153, 214, 0.34);
    background: linear-gradient(135deg, rgba(9, 23, 40, 0.96), rgba(8, 17, 30, 0.88));
    padding: 16px;
  }

  .route-watch-heading-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .route-watch-strip-copy strong { font-size: 1.35rem; line-height: 1.2; margin-top: 4px; display: block; }
  .route-watch-strip-copy #desktopRouteStatus { font-size: 0.92rem; color: #a8bdd4; margin-top: 6px; }

  .route-watch-metrics {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
  }
  .route-watch-metrics span { font-size: 0.8rem; color: #8fa8c3; }
  .route-watch-metrics b { color: #b8cce1; font-weight: 600; }
  .route-watch-metrics em { color: #e3eef8; font-style: normal; }

  .desktop-route-watch-actions { align-content: start; justify-content: flex-end; }

  .map-frame {
    border-radius: 18px;
    border: 1px solid rgba(92, 130, 170, 0.25);
    overflow: hidden;
    position: relative;
  }
  .map-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 13, 23, 0.18) 0%, rgba(6, 13, 23, 0) 22%, rgba(6, 13, 23, 0.26) 100%);
    z-index: 390;
  }

  .map-card .map-tools-overlay {
    left: 12px;
    right: 12px;
    top: 12px;
    width: auto;
    display: grid;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 12px;
    border: 1px solid rgba(115, 155, 196, 0.24);
    background: rgba(8, 19, 33, 0.78);
    backdrop-filter: blur(7px);
  }

  .map-toolbar-main-row { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }
  .map-card .map-tools-overlay .map-view-label { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: #95b3cf; }
  .map-card .map-tools-overlay .map-tools-section { gap: 10px; }
  .map-card .map-tools-overlay .map-tools-section-label { min-width: 64px; color: #9db7cf; }
  .map-card .desktop-map-legend-row, .map-card .map-tools-overlay .geo-filter-shell { flex-wrap: wrap; gap: 5px; }

  .desktop-command-panel { gap: 12px; }
  .desktop-command-panel .drawer-panel {
    border-radius: 16px;
    border: 1px solid rgba(112, 153, 194, 0.22);
    background: linear-gradient(180deg, rgba(8, 18, 31, 0.84), rgba(7, 14, 24, 0.8));
  }
  .desktop-command-panel .drawer-summary { border-bottom: 1px solid rgba(113, 146, 181, 0.2); }
  .desktop-command-panel .combined-module-block { background: transparent; border: 0; padding: 0; }
  .desktop-command-panel .trend-item {
    border-left: 3px solid rgba(91, 166, 224, 0.75);
    border-radius: 12px;
    background: rgba(13, 27, 45, 0.52);
    padding: 10px 10px 10px 12px;
  }

  .impact-meter { height: 10px; border-radius: 999px; background: rgba(61, 86, 110, 0.45); }
  #impactScore { display: block; margin-top: 12px; font-size: 1.15rem; }
  #impactText { margin-top: 6px; color: #a9bfd6; }
}


/* Route layer menu stacking fix */
#map .leaflet-control-container,
#map .leaflet-top,
#map .leaflet-control-layers,
#map .leaflet-control-layers-expanded {
  z-index: 1300 !important;
}

/* V148C surgical fix: restore map-control glyph visibility without reviving hidden panels */
#map .leaflet-control-zoom a span,
#map .leaflet-control-zoom a svg,
#map .leaflet-control-layers-toggle,
#map .leaflet-control-layers-toggle span,
#map .leaflet-control-layers-toggle svg,
#gridlyPortraitV2 .gridly-v2-control-rail button span,
#gridlyPortraitV2 .gridly-v2-control-rail button i,
#gridlyPortraitV2 .gridly-v2-control-rail button svg,
.gridly-mobile-control-rail button span,
.gridly-mobile-control-rail button i,
.gridly-mobile-control-rail button svg {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.map-tools-overlay {
  z-index: 540 !important;
  background: rgba(8, 13, 20, 0.56) !important;
  backdrop-filter: blur(2px);
}

/* Route Watch inline selectors */
.route-inline-field{display:flex;flex-direction:column;gap:4px;min-width:150px}
.route-inline-field span{font-size:.72rem;color:#9db2ca;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.route-inline-field select{min-height:36px;border-radius:10px;padding:6px 10px;background:rgba(8,22,36,.85);color:#eaf4ff;border:1px solid rgba(126,184,232,.35)}
.desktop-route-watch-actions{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.route-watch-start-btn{
  min-height: 34px;
  border: 1px solid rgba(177, 231, 255, 0.78);
  background: linear-gradient(135deg, #1f7eb1 0%, #26b6d9 52%, #1278a9 100%);
  color: #f4fbff;
  text-shadow: 0 1px 2px rgba(5, 17, 28, 0.8);
  box-shadow: 0 8px 16px rgba(6, 34, 53, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.route-watch-start-btn:hover:not(:disabled){
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.route-watch-start-btn:disabled{
  border-color: rgba(109, 137, 166, 0.5);
  background: linear-gradient(135deg, rgba(71, 94, 120, 0.72), rgba(57, 78, 102, 0.72));
  color: rgba(225, 238, 252, 0.68);
  text-shadow: none;
  box-shadow: none;
  cursor: not-allowed;
}

.gridly-route-endpoint-label {
  background: rgba(3, 10, 18, 0.96);
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  text-transform: uppercase;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.75), 0 0 14px rgba(0, 255, 255, 0.42), 0 2px 8px rgba(2, 8, 23, 0.55);
}

.gridly-route-endpoint-label::before {
  display: none;
}

/* V35 mobile operational UX polish */
@media (max-width: 700px) {
  .app-shell {
    margin-bottom: 122px;
  }

  .map-card {
    padding: 10px;
  }

  .map-card .map-frame {
    min-height: 62vh;
    border-radius: 18px;
  }

  .map-card .map-tools-overlay {
    inset: 10px 10px auto 10px;
    gap: 8px;
  }

  .map-card .map-tools-overlay .geo-filter-shell,
  .map-card .map-tools-overlay .desktop-map-legend-row {
    gap: 5px;
  }

  .map-card .map-tools-overlay .legend-pill,
  .map-card .map-tools-overlay .geo-filter-pill,
  .mobile-bottom-nav-btn,
  #mobileReportBtn.mobile-sticky-report,
  .mobile-report-mode-actions .secondary-btn,
  .report-buttons button {
    min-height: 44px;
  }

  .desktop-route-watch-strip {
    padding: 12px;
    gap: 10px;
  }

  .route-watch-strip-copy strong {
    font-size: 1.08rem;
    line-height: 1.3;
  }

  .route-watch-metrics {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .route-watch-metrics span {
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
  }

  .report-drawer {
    margin-top: 8px;
    border: 1px solid rgba(132, 184, 255, 0.24);
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(8, 18, 31, 0.96), rgba(6, 14, 24, 0.96));
  }

  .report-drawer-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(12, 24, 41, 0.98), rgba(9, 20, 34, 0.95));
    border-bottom: 1px solid rgba(130, 179, 246, 0.2);
  }

  .report-drawer-summary h2 {
    font-size: 0.96rem;
    line-height: 1.28;
  }

  .report-drawer .report-copy,
  .report-drawer .report-tools,
  .report-drawer .mobile-report-mode-card {
    padding-left: 14px;
    padding-right: 14px;
  }

  .confirmation-box {
    margin-top: 10px;
    line-height: 1.5;
  }

  .report-tools-advanced > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  #mobileReportBtn.mobile-sticky-report {
    left: 10px;
    right: 10px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: auto;
    border-radius: 12px;
  }

  .mobile-bottom-nav {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .mobile-route-decision-card,
  .mobile-fast-report-card,
  .mobile-map-preview-card {
    border: 1px solid rgba(124, 192, 255, 0.3);
    background: linear-gradient(165deg, rgba(12, 27, 45, 0.97), rgba(7, 16, 27, 0.97));
  }

  .mobile-route-priority-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
  }

  .mobile-route-priority-actions .secondary-btn {
    border-color: rgba(122, 188, 255, 0.42);
    background: rgba(83, 148, 214, 0.14);
  }

  .mobile-route-decision-card .mobile-commute-cta {
    font-weight: 800;
  }

  .mobile-home-card.mobile-community-card,
  .mobile-home-card.mobile-active-crossings-card,
  .mobile-home-card.mobile-corridor-intel-card,
  .mobile-home-card.mobile-premium-status-bar {
    opacity: 0.92;
  }

  .desktop-route-watch-strip .route-watch-metrics,
  .report-tools-advanced {
    display: none;
  }
}

/* V36B mobile card compression & focus pass */
@media (max-width: 700px) {
  .app-shell {
    margin-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  .mobile-home-cards {
    gap: 8px;
    margin-top: 8px;
  }

  .mobile-home-card {
    padding: 11px 12px;
    border-radius: 12px;
    min-height: 0;
  }

  .mobile-home-card > span {
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    margin-bottom: 2px;
  }

  .mobile-home-card strong {
    margin: 2px 0 4px;
    font-size: 1rem;
    line-height: 1.25;
  }

  .mobile-home-card p {
    margin: 0;
    font-size: 0.81rem;
    line-height: 1.35;
  }

  /* remove oversized decorative treatment on priority cards */
  .mobile-route-decision-card,
  .mobile-fast-report-card {
    background-image: none !important;
  }

  .mobile-route-decision-card::before,
  .mobile-route-decision-card::after,
  .mobile-fast-report-card::before,
  .mobile-fast-report-card::after {
    content: none !important;
    display: none !important;
  }

  .mobile-route-priority-actions {
    margin-top: 8px;
    gap: 5px;
  }

  .mobile-route-priority-actions .primary-btn,
  .mobile-route-priority-actions .secondary-btn,
  .mobile-map-preview-card .secondary-btn {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
  }

  .mobile-route-priority-actions .secondary-btn svg {
    width: 14px;
    height: 14px;
  }

  /* map-first flow and compressed hierarchy */
  .mobile-map-preview-card { order: 3; }
  .map-card {
    margin-top: 6px;
    padding: 10px;
    border-radius: 16px;
  }

  .map-card .section-header.map-header {
    padding-bottom: 4px;
    gap: 8px;
  }

  .map-card .section-header.map-header .map-note {
    font-size: 0.77rem;
    line-height: 1.3;
  }

  .map-card .map-frame {
    min-height: 60vh;
    border-radius: 12px;
  }

  /* mobile Route Watch rebuild */
  .desktop-route-watch-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    margin-bottom: 8px;
  }

  .route-watch-heading-row {
    flex-wrap: wrap;
    gap: 5px;
  }

  .route-watch-live-pill {
    max-width: 100%;
    white-space: normal;
  }

  .route-watch-strip-copy strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.25;
    word-break: break-word;
  }

  #desktopRouteStatus,
  #routeWatchSetupHint {
    font-size: 0.77rem;
    line-height: 1.3;
  }

  .route-watch-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .route-watch-metrics span {
    padding: 5px 7px;
    border-radius: 9px;
    font-size: 0.77rem;
    white-space: normal;
  }

  .desktop-route-watch-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    width: 100%;
  }

  .desktop-route-watch-actions .route-inline-field,
  .desktop-route-watch-actions .route-inline-field select,
  .desktop-route-watch-actions .primary-btn,
  .desktop-route-watch-actions .secondary-btn {
    width: 100%;
  }

  .desktop-route-watch-actions .compact-btn,
  .desktop-route-watch-actions .route-watch-start-btn {
    min-height: 38px;
  }

  /* hide nonessential verbose metrics on mobile */
  .route-watch-metrics span:nth-child(1),
  .route-watch-metrics span:nth-child(2) {
    display: none;
  }

  /* reduce repeated helper copy */
  .mobile-active-crossings-card p,
  #mobileCorridorSummaryDetail,
  .mobile-premium-status-bar p {
    display: none;
  }

  /* compress additional intelligence cards */
  .mobile-community-card,
  .mobile-corridor-intel-card,
  .mobile-premium-status-bar {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* bottom nav spacing / collision prevention */
  .mobile-bottom-nav {
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav-btn {
    min-height: 38px;
    padding: 8px 4px;
  }

  #mobileReportBtn.mobile-sticky-report {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* V36C mobile map-first hierarchy (mobile only; desktop preserved) */
@media (max-width: 700px) {
  .dashboard {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  /* Keep top utility compact */
  .mobile-premium-header {
    order: 1;
    position: sticky;
    top: 8px;
    z-index: 26;
    padding: 8px 10px;
    border-radius: 12px;
  }

  /* De-prioritize non-operational hero blocks on mobile */
  .future-map-hero,
  .driver-hero,
  .destination-hero-card,
  .desktop-command-strip,
  .desktop-route-setup,
  .desktop-insights {
    display: none !important;
  }

  /* Allow map section placement between route decision and the rest */
  .mobile-home-cards {
    display: contents;
  }

  .mobile-route-decision-card {
    order: 2;
    min-height: 148px;
    padding: 12px;
    border-radius: 12px;
  }

  .mobile-route-decision-card p {
    margin: 4px 0 8px;
    line-height: 1.25;
    max-height: 2.5em;
    overflow: hidden;
  }

  .mobile-route-priority-actions {
    gap: 8px;
  }

  /* Map becomes primary content directly after route decision */
  .command-center {
    order: 3;
    margin-top: 0;
    padding: 0;
    gap: 0;
    background: transparent;
    border: 0;
  }

  .map-card {
    padding: 8px;
    border-radius: 12px;
    min-height: 62vh;
  }

  .map-card .section-header.map-header {
    padding: 2px 2px 6px;
  }

  .map-card .section-header.map-header .map-note {
    display: none;
  }

  .map-card .map-frame {
    min-height: 58vh;
    border-radius: 12px;
  }

  /* Float quick actions near map instead of stacked cards */
  .mobile-fast-report-card,
  .mobile-map-preview-card,
  .mobile-quick-actions-card {
    order: 4;
    position: sticky;
    z-index: 24;
    margin: 0 10px;
    border-radius: 999px;
    padding: 6px 8px;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-fast-report-card { bottom: calc(162px + env(safe-area-inset-bottom)); }
  .mobile-map-preview-card { bottom: calc(116px + env(safe-area-inset-bottom)); }
  .mobile-quick-actions-card { bottom: calc(70px + env(safe-area-inset-bottom)); }

  .mobile-fast-report-card > span,
  .mobile-fast-report-card p,
  .mobile-map-preview-card > span,
  .mobile-map-preview-card p,
  .mobile-map-preview-card strong,
  .mobile-quick-actions-card > span {
    display: none;
  }

  .mobile-fast-report-card .mobile-route-priority-actions,
  .mobile-map-preview-card button,
  .mobile-quick-actions-card .mobile-quick-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 5px;
  }

  .mobile-fast-report-card .secondary-btn,
  .mobile-fast-report-card .primary-btn,
  .mobile-map-preview-card .secondary-btn,
  .mobile-quick-actions-card .secondary-btn {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.77rem;
  }

  /* Collapse lower-priority intelligence cards */
  .mobile-community-card,
  .mobile-active-crossings-card,
  .mobile-corridor-intel-card,
  .mobile-premium-status-bar {
    order: 5;
    padding: 8px 10px;
    min-height: auto;
  }

  .mobile-community-card p,
  .mobile-active-crossings-card p,
  .mobile-corridor-intel-card p,
  .mobile-premium-status-bar p,
  .mobile-corridor-intel-card #mobileCorridorBadges {
    display: none;
  }

  .mobile-community-card strong,
  .mobile-active-crossings-card strong,
  .mobile-corridor-intel-card strong,
  .mobile-premium-status-bar strong {
    font-size: 0.9rem;
  }

  /* Map-attached reporting and safe bottom spacing */
  #reportSection {
    order: 6;
    margin-top: 6px;
  }

  #mobileReportBtn.mobile-sticky-report {
    bottom: calc(74px + env(safe-area-inset-bottom));
  }
}

/* V36D mobile live map priority + reporting simplification */
@media (max-width: 700px) {
  .dashboard { gap: 8px; }

  .mobile-route-decision-card { margin-bottom: 2px; }
  .command-center { margin-top: -2px; }

  /* Remove standalone map-launch card behavior; keep tiny status row only */
  .mobile-map-preview-card {
    position: static;
    order: 4;
    margin: 0 10px;
    padding: 8px 10px;
    border-radius: 12px;
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    align-items: center;
  }
  .mobile-map-preview-card p { display: none; }
  .mobile-map-preview-card .secondary-btn { min-height: 30px; padding: 8px 12px; font-size: .72rem; }

  /* Compact floating actions near map */
  .mobile-fast-report-card,
  .mobile-quick-actions-card {
    order: 4;
    position: sticky;
    z-index: 24;
    margin: 0 10px;
    border-radius: 999px;
    padding: 6px 8px;
    min-height: auto;
  }

  /* Secondary intelligence collapsed by default */
  .mobile-community-card,
  .mobile-active-crossings-card,
  .mobile-corridor-intel-card,
  .mobile-premium-status-bar {
    order: 6;
    padding: 8px 10px;
    min-height: auto;
    max-height: 48px;
    overflow: hidden;
    cursor: pointer;
  }
  .mobile-community-card:active,
  .mobile-active-crossings-card:active,
  .mobile-corridor-intel-card:active,
  .mobile-premium-status-bar:active {
    max-height: 180px;
  }

  /* Reporting feels map-attached */
  #reportSection { order: 5; margin-top: 4px; }
  .report-drawer-summary h2 { font-size: .95rem; }
  .report-drawer .report-copy p { font-size: .8rem; margin: 4px 0; }

  /* Compact route watch utility */
  .desktop-route-watch-strip { padding: 10px; gap: 8px; }
  .route-watch-strip-copy .eyebrow,
  .route-watch-setup-hint,
  .route-watch-metrics span:nth-child(1),
  .route-watch-metrics span:nth-child(2),
  .route-watch-metrics span:nth-child(3) { display: none; }
  .route-watch-strip-copy strong { font-size: .9rem; margin: 0; }
  .route-watch-strip-copy #desktopRouteStatus { margin-top: 3px; font-size: .8rem; }
  .route-watch-metrics { margin-top: 4px; }

  /* Map-first framing */
  .map-card { padding: 6px; border-radius: 12px; min-height: 64vh; }
  .map-card .map-frame { min-height: 60vh; }
}

/* V37E cinematic live movement system mobile immersion pass */
@media (max-width: 700px) {
  body {
    background:
      radial-gradient(circle at 50% -6%, rgba(82, 157, 255, 0.18), transparent 36%),
      radial-gradient(circle at 84% 22%, rgba(57, 243, 164, 0.1), transparent 38%),
      linear-gradient(180deg, #03070d 0%, #07111d 45%, #071425 100%);
  }

  .app-shell {
    width: calc(100% - 8px);
    margin: 8px auto 112px;
  }

  .mobile-premium-header,
  .mobile-home-card,
  .map-card,
  .report-card {
    border-color: rgba(137, 194, 255, 0.2);
    background: linear-gradient(155deg, rgba(13, 24, 39, 0.62), rgba(9, 18, 30, 0.56));
    box-shadow: 0 18px 34px rgba(3, 10, 20, 0.42), inset 0 1px 0 rgba(208, 229, 255, 0.06);
    backdrop-filter: blur(16px) saturate(125%);
  }

  .mobile-live-command {
    margin: 0 2px 8px;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(115, 199, 255, 0.34);
    background:
      radial-gradient(circle at 88% 16%, rgba(121, 208, 255, 0.28), transparent 42%),
      linear-gradient(145deg, rgba(15, 39, 62, 0.8), rgba(8, 24, 42, 0.8));
    box-shadow: 0 12px 24px rgba(1, 12, 26, 0.45), 0 0 24px rgba(70, 177, 255, 0.15);
  }

  .mobile-live-command strong { font-size: 1.12rem; }
  .mobile-live-command p { color: #d5e8ff; }

  .map-card {
    padding: 6px;
    border-radius: 20px;
    border: 1px solid rgba(124, 197, 255, 0.3);
    background:
      radial-gradient(circle at 50% 0%, rgba(84, 158, 255, 0.2), transparent 46%),
      linear-gradient(180deg, rgba(8, 22, 39, 0.74), rgba(5, 15, 28, 0.72));
  }

  .map-card .section-header.map-header {
    margin-bottom: 5px;
    padding: 2px 6px;
  }

  .map-card .map-frame {
    border-radius: 18px;
    min-height: 64svh;
    box-shadow: 0 22px 44px rgba(2, 10, 21, 0.58), 0 0 34px rgba(78, 177, 255, 0.18);
  }

  #map {
    height: clamp(440px, 68svh, 700px);
    border-radius: 18px;
  }

  .mobile-floating-action-dock {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(92vw, 370px);
    padding: 6px;
    gap: 5px;
    border-radius: 18px;
    border: 1px solid rgba(130, 198, 255, 0.36);
    background: linear-gradient(145deg, rgba(8, 20, 35, 0.84), rgba(10, 21, 34, 0.72));
    backdrop-filter: blur(18px) saturate(145%);
    box-shadow: 0 14px 34px rgba(2, 9, 21, 0.52), 0 0 20px rgba(86, 179, 255, 0.16);
  }

  .mobile-dock-btn {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 12px;
    border: 1px solid rgba(174, 218, 255, 0.2);
  }

  .mobile-dock-btn.report,
  .mobile-dock-btn.route,
  .mobile-dock-btn.alerts {
    background: linear-gradient(145deg, rgba(93, 171, 255, 0.2), rgba(40, 109, 186, 0.26));
    color: #dcedff;
  }

  .mobile-route-decision-card {
    border-color: rgba(115, 199, 255, 0.44);
    background: radial-gradient(circle at 88% 20%, rgba(130, 214, 255, 0.2), transparent 35%), linear-gradient(155deg, rgba(16, 45, 67, 0.78), rgba(9, 26, 43, 0.76));
  }

  .desktop-route-watch-strip {
    border: 1px solid rgba(130, 198, 255, 0.34);
    background: linear-gradient(145deg, rgba(9, 31, 52, 0.75), rgba(7, 23, 38, 0.72));
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(210, 234, 255, 0.08);
  }
}

/* V37F living movement intelligence layer: restrained motion + operational urgency */
#map {
  position: relative;
}

#map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 22%, rgba(125, 203, 255, 0.12), transparent 42%),
    radial-gradient(circle at 76% 72%, rgba(82, 166, 255, 0.1), transparent 44%);
  mix-blend-mode: screen;
  opacity: 0.42;
  animation: gridlyAmbientDrift 11s ease-in-out infinite alternate;
}

#map .leaflet-pane.leaflet-routePane-pane path {
  filter: drop-shadow(0 0 7px rgba(88, 177, 255, 0.24));
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: gridlyRoutePulse 3.2s ease-in-out infinite;
}

.gridly-hazard-marker {
  animation: gridlyHazardBreath 2.1s ease-in-out infinite;
}

#map .leaflet-marker-icon.gridly-production-marker-icon {
  width: 64px !important;
  height: 64px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker,
.gridly-hazard-marker.has-production-marker {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px;
  min-height: 64px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: block;
  place-items: initial;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker .gridly-production-marker-img,
.gridly-production-marker-img {
  width: 64px !important;
  height: 64px !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  object-fit: contain;
  pointer-events: none;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.34));
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker:is(.high, .moderate, .low, .route-relevant),
#map .leaflet-marker-icon.gridly-production-marker-icon.gridly-marker-hazard-critical .gridly-hazard-marker.has-production-marker,
#map .leaflet-marker-icon.gridly-production-marker-icon.gridly-marker-hazard-high .gridly-hazard-marker.has-production-marker,
#map .leaflet-marker-icon.gridly-production-marker-icon.gridly-marker-hazard-moderate .gridly-hazard-marker.has-production-marker,
#map .leaflet-marker-icon.gridly-production-marker-icon.gridly-marker-hazard-low .gridly-hazard-marker.has-production-marker,
#map .leaflet-marker-icon.gridly-production-marker-icon [data-gridly-impact-level].gridly-hazard-marker.has-production-marker {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gridly-hazard-marker.has-production-marker.high .gridly-production-marker-img,
.gridly-hazard-marker.has-production-marker.gridly-consequence-critical .gridly-production-marker-img {
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 9px rgba(255, 78, 111, 0.38));
}

.gridly-hazard-marker.has-production-marker small {
  right: -5px;
  bottom: -4px;
}

.gridly-hazard-marker.high {
  animation-duration: 1.5s;
}

.desktop-route-watch-strip,
.mobile-live-command {
  background:
    radial-gradient(circle at 87% 18%, rgba(116, 206, 255, 0.14), transparent 40%),
    linear-gradient(142deg, rgba(9, 25, 40, 0.82), rgba(7, 18, 31, 0.72));
}

.route-watch-live-pill.is-on {
  box-shadow: 0 0 0 1px rgba(126, 211, 255, 0.42), 0 0 20px rgba(74, 182, 255, 0.2);
  animation: gridlyConfidencePulse 1.9s ease-in-out infinite;
}

@media (max-width: 700px) {
  .mobile-home-cards > .mobile-home-card.mobile-quick-actions-card,
  .mobile-home-cards > .mobile-home-card.mobile-community-card,
  .mobile-home-cards > .mobile-home-card.mobile-active-crossings-card {
    display: none;
  }
}

@keyframes gridlyRoutePulse {
  0%, 100% { stroke-opacity: 0.72; }
  50% { stroke-opacity: 0.93; }
}

@keyframes gridlyHazardBreath {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(80, 176, 255, 0.12); }
  50% { transform: scale(1.06); box-shadow: 0 0 18px rgba(80, 176, 255, 0.26); }
}

@keyframes gridlyConfidencePulse {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}

@keyframes gridlyAmbientDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.35; }
  100% { transform: translate3d(-1.2%, 1.1%, 0) scale(1.03); opacity: 0.5; }
}

/* V39B mobile immersion pass: remove dashboard framing, map-native overlays, tactical controls */
@media (max-width: 860px) {
  .mobile-home-cards {
    gap: 8px;
    margin-top: 4px;
  }

  .mobile-home-card {
    border: 0;
    background: linear-gradient(150deg, rgba(15, 32, 48, 0.34), rgba(9, 17, 30, 0.2));
    box-shadow: inset 0 1px 0 rgba(199, 234, 255, 0.18);
    backdrop-filter: blur(8px);
  }

  .mobile-home-card:not(.mobile-priority-card),
  .mobile-home-cards > .mobile-home-card.mobile-quick-actions-card,
  .mobile-home-cards > .mobile-home-card.mobile-community-card,
  .mobile-home-cards > .mobile-home-card.mobile-active-crossings-card {
    display: none !important;
  }

  .mobile-home-card.mobile-priority-card {
    border-radius: 18px;
    padding: 13px 14px;
  }

  #mapSection {
    margin-top: -12px;
  }

  .map-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-height: 72vh;
    overflow: visible;
  }

  .map-card .section-header.map-header {
    margin: 0 10px 8px;
    padding: 8px 11px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(130deg, rgba(6, 17, 30, 0.5), rgba(10, 24, 38, 0.22));
    backdrop-filter: blur(9px);
  }

  .map-card .section-header.map-header .map-note {
    opacity: 0.84;
  }

  .map-card .map-frame {
    min-height: 76vh;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }

  #map {
    min-height: 76vh;
  }

  .mobile-floating-action-dock {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    gap: 8px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(154, 210, 255, 0.22);
    background: linear-gradient(145deg, rgba(6, 15, 27, 0.68), rgba(6, 15, 27, 0.35));
    backdrop-filter: blur(12px) saturate(1.1);
    box-shadow: 0 8px 30px rgba(2, 8, 16, 0.45), inset 0 1px 0 rgba(198, 234, 255, 0.2);
  }

  .mobile-dock-btn {
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    background: rgba(133, 189, 227, 0.14);
    border: 1px solid rgba(152, 212, 255, 0.24);
  }

  .map-frame[data-reporting-state="active"]::before {
    opacity: .78;
    background: radial-gradient(circle at 50% 62%, rgba(241, 99, 84, 0.28), transparent 55%), linear-gradient(180deg, rgba(6, 14, 24, 0.05), rgba(3, 8, 15, 0.32));
    animation: gridlyReportPulse 2.2s ease-in-out infinite;
  }

  body.reporting-live .map-tools-overlay,
  body.reporting-live .mobile-map-floating-chips {
    opacity: 0.5;
    transition: opacity 160ms ease;
  }
}

@keyframes gridlyReportPulse {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50% { transform: scale(1.02); filter: saturate(1.18); }
}

/* V39D command center spine restoration */
@media (max-width: 760px) {
  .app-shell {
    width: 100%;
    margin: 0;
    padding: 0 0 96px;
  }

  .dashboard > :not(.command-center),
  .mobile-home-cards,
  .mobile-bottom-nav,
  .mobile-sticky-report {
    display: none !important;
  }

  .command-center,
  .map-card {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .map-card .section-header,
  .desktop-route-watch-strip,
  .map-toolbar-meta-row,
  .desktop-map-legend-row,
  .map-toolbar-divider,
  .all-crossings-advanced,
  .map-view-label,
  .map-tools-section-label {
    display: none !important;
  }

  .map-frame {
    position: relative;
    border: 0 !important;
    border-radius: 22px 22px 30px 30px;
    margin: 0 8px;
    min-height: calc(100vh - 176px);
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(1, 8, 18, 0.7), inset 0 -40px 90px rgba(3, 12, 24, 0.45);
    isolation: isolate;
  }

  .map-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 420;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 9, 16, 0.58), transparent 20%, transparent 72%, rgba(3, 9, 15, 0.72));
  }

  .map-frame::before {
    opacity: .72;
    background: radial-gradient(circle at 72% 16%, rgba(100, 210, 255, 0.28), transparent 46%),
      radial-gradient(circle at 28% 88%, rgba(91, 248, 182, 0.18), transparent 42%);
  }

  .mobile-live-command {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 54px);
    left: 10px;
    right: 10px;
    z-index: 620;
    border-radius: 16px;
    border: 1px solid rgba(149, 217, 255, 0.34);
    background: linear-gradient(148deg, rgba(9, 23, 40, 0.82), rgba(5, 13, 25, 0.88));
    backdrop-filter: blur(15px) saturate(138%);
    box-shadow: 0 10px 26px rgba(2, 8, 18, 0.48), inset 0 1px 0 rgba(189, 226, 255, 0.12);
    padding: 8px 11px;
  }

  .mobile-live-command strong { font-size: 1.06rem; letter-spacing: .01em; }
  .mobile-live-command p { color: #d8e8fa; }

  .mobile-live-command .compact-btn {
    min-height: 32px;
    padding: 7px 11px;
    border-color: rgba(132, 204, 255, 0.44);
    background: rgba(84, 176, 255, 0.16);
  }

  .mobile-map-floating-chips {
    top: calc(env(safe-area-inset-top, 0px) + 138px);
    left: 10px;
    right: 10px;
    z-index: 630;
    gap: 5px;
  }

  .map-floating-chip {
    border-radius: 999px;
    border: 1px solid rgba(147, 213, 255, 0.27);
    background: linear-gradient(155deg, rgba(8, 22, 36, 0.74), rgba(7, 18, 30, 0.68));
    box-shadow: 0 8px 18px rgba(1, 8, 18, 0.34);
    backdrop-filter: blur(10px) saturate(124%);
  }

  .map-tools-overlay {
    left: 10px;
    right: 10px;
    bottom: 74px;
    top: auto;
    z-index: 640;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(8, 19, 31, 0.84), rgba(5, 12, 23, 0.86));
    border: 1px solid rgba(138, 204, 255, 0.3);
    backdrop-filter: blur(15px) saturate(132%);
    box-shadow: 0 11px 26px rgba(3, 10, 21, 0.44), inset 0 1px 0 rgba(195, 228, 255, 0.08);
    padding: 8px;
  }

  .map-toolbar-main-row,
  .map-tools-section,
  .geo-filter-shell {
    width: 100%;
  }

  .geo-filter-shell {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .geo-filter-pill {
    border-radius: 999px;
    border-color: rgba(149, 216, 255, 0.3);
    background: rgba(8, 22, 37, 0.62);
    font-size: .71rem;
    padding: 7px 6px;
    min-height: 30px;
  }

  .geo-filter-status {
    display: block !important;
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 24px;
    z-index: 610;
    margin: 0;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(125, 197, 255, 0.26);
    background: rgba(6, 15, 27, 0.72);
    color: #c6ddf5;
    font-size: 0.71rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
  }

  .report-drawer {
    display: block !important;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 100px;
    z-index: 760;
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(138, 205, 255, 0.24);
    background: linear-gradient(165deg, rgba(8, 17, 30, 0.78), rgba(4, 11, 22, 0.82));
    backdrop-filter: blur(14px);
    max-height: 68px;
    overflow: hidden;
  }

  .report-drawer[open] {
    max-height: 242px;
  }

  .report-drawer-summary {
    padding: 8px 11px;
    min-height: 58px;
  }

  .mobile-report-mode-card {
    margin-top: 6px;
    border-radius: 12px;
    border: 1px solid rgba(133, 201, 255, 0.24);
    background: rgba(8, 20, 34, 0.66);
  }

  .mobile-floating-action-dock {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    width: calc(100% - 32px);
    max-width: 360px;
    margin: 0;
    padding: 5px;
    border-radius: 999px;
    border: 1px solid rgba(128, 193, 247, 0.32);
    background: linear-gradient(155deg, rgba(9, 18, 31, 0.9), rgba(6, 13, 24, 0.88));
    backdrop-filter: blur(16px) saturate(138%);
    box-shadow: 0 12px 24px rgba(1, 8, 19, 0.5);
    gap: 5px;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
  }

  .mobile-dock-btn {
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: .73rem;
    letter-spacing: .02em;
    border: 1px solid rgba(201, 225, 255, 0.16);
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
  }

  body.reporting-live .map-frame {
    box-shadow: inset 0 0 0 1px rgba(98, 201, 255, 0.34), inset 0 0 120px rgba(84, 179, 255, 0.2), 0 18px 52px rgba(2, 9, 20, 0.74);
  }
}

@media (max-width: 760px) {
  body[data-mobile-mode] .route-setup-modal {
    place-items: end center;
    padding-inline: 6px;
  }

  body[data-mobile-mode] .route-setup-modal-card {
    width: 100%;
    max-width: 460px;
    border-radius: 14px 14px 0 0;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    max-height: min(74dvh, 560px);
    box-shadow: 0 -16px 34px rgba(2, 8, 18, 0.58);
  }

  body[data-mobile-mode] .report-drawer {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  body[data-mobile-mode] .desktop-command-panel {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  body[data-mobile-mode="report"] .report-drawer {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  body[data-mobile-mode="alert"] .desktop-command-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  body[data-mobile-mode="route"] .route-watch-live-pill,
  body[data-mobile-mode="route"] .mobile-live-command {
    box-shadow: 0 0 0 1px rgba(108, 206, 255, 0.38), 0 0 26px rgba(74, 182, 255, 0.22);
  }

  body[data-mobile-mode="route"] .map-frame::before {
    opacity: 0.9;
    background: radial-gradient(circle at 60% 22%, rgba(106, 228, 255, 0.34), transparent 45%),
      radial-gradient(circle at 28% 88%, rgba(113, 170, 255, 0.22), transparent 48%);
  }

  body[data-mobile-mode="alert"] .map-floating-chip[data-geo-filter="active-delays"] {
    border-color: rgba(255, 176, 138, 0.6);
    background: rgba(73, 34, 24, 0.72);
  }

  body[data-mobile-mode="report"] .map-frame::before {
    opacity: .82;
  }

  .mobile-dock-btn.active {
    border-color: rgba(170, 224, 255, 0.68);
    background: linear-gradient(155deg, rgba(55, 145, 230, 0.42), rgba(39, 86, 156, 0.35));
    color: #fff;
  }

  body.report-pulse .map-frame::before {
    animation: gridlyReportPulse .85s ease;
  }

  body[data-mobile-mode] .report-drawer {
    left: 8px;
    right: 8px;
    bottom: 84px;
    max-height: 72px;
    border-radius: 12px;
    border-color: rgba(142, 209, 255, 0.32);
    background: linear-gradient(165deg, rgba(7, 16, 28, 0.9), rgba(4, 10, 19, 0.9));
    z-index: 1560;
  }

  body[data-mobile-mode]:not([data-mobile-mode="report"]) .report-drawer {
    display: none !important;
    opacity: 0;
    pointer-events: none;
  }

  body[data-mobile-mode] .report-drawer[open] {
    max-height: min(62dvh, 440px);
  }

  body[data-mobile-mode] .desktop-command-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 78px;
    top: auto;
    z-index: 754;
    margin: 0;
    max-height: min(44dvh, 320px);
    padding: 10px 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(142, 209, 255, 0.28);
    background: linear-gradient(158deg, rgba(8, 20, 33, 0.9), rgba(5, 12, 23, 0.92));
    backdrop-filter: blur(14px) saturate(130%);
    box-shadow: 0 14px 28px rgba(2, 8, 18, 0.46);
    overflow: hidden;
  }

  body[data-mobile-mode] .desktop-command-panel .panel-card {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-mobile-mode] .desktop-command-panel .alerts-list {
    max-height: min(30dvh, 210px);
    overflow: auto;
    padding-right: 2px;
  }

  body[data-mobile-mode] .map-tools-overlay {
    left: 10px;
    right: 10px;
    top: calc(env(safe-area-inset-top, 0px) + 186px);
    bottom: auto;
    width: fit-content;
    max-width: calc(100% - 20px);
    margin-left: auto;
    padding: 6px;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(8, 20, 34, 0.86), rgba(6, 14, 24, 0.84));
  }

  body[data-mobile-mode] .map-tools-overlay .map-toolbar-main-row {
    width: auto;
  }

  body[data-mobile-mode] .map-tools-overlay .geo-filter-shell {
    display: flex;
    gap: 4px;
    width: auto;
  }

  body[data-mobile-mode] .map-tools-overlay .geo-filter-pill {
    min-height: 28px;
    padding: 6px 8px;
    font-size: 0.68rem;
  }

  body[data-mobile-mode] #map .leaflet-bottom.leaflet-right {
    right: 10px;
    bottom: 148px;
  }

  body[data-mobile-mode] #map .leaflet-control-layers {
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(147, 213, 255, 0.28);
    background: linear-gradient(160deg, rgba(8, 20, 34, 0.9), rgba(6, 14, 24, 0.9));
    box-shadow: 0 8px 18px rgba(1, 8, 18, 0.4);
  }
}

@keyframes gridlyReportPulse {
  0% { opacity: .42; }
  40% { opacity: .82; }
  100% { opacity: .45; }
}


@media (max-width: 760px) {
  html:has(body[data-mobile-mode]),
  body[data-mobile-mode] {
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
  }

  body[data-mobile-mode] {
    position: fixed;
    inset: 0;
    width: 100%;
    overscroll-behavior: none;
    touch-action: pan-x pan-y;
  }

  body[data-mobile-mode] #dashboardSection,
  body[data-mobile-mode] #setupCard,
  body[data-mobile-mode] .desktop-insights,
  body[data-mobile-mode] .desktop-route-setup,
  body[data-mobile-mode] .section-header.map-header,
  body[data-mobile-mode] .mobile-home-cards,
  body[data-mobile-mode] .destination-hero-card,
  body[data-mobile-mode] .desktop-route-watch-strip,
  body[data-mobile-mode] .desktop-command-strip,
  body[data-mobile-mode] .mobile-premium-header,
  body[data-mobile-mode] .app-header,
  body[data-mobile-mode] .desktop-left-rail,
  body[data-mobile-mode] .geo-filter-status,
  body[data-mobile-mode] .mobile-sticky-report {
    display: none !important;
  }

  body[data-mobile-mode] .app-shell,
  body[data-mobile-mode] .dashboard,
  body[data-mobile-mode] .command-center,
  body[data-mobile-mode] #mapSection,
  body[data-mobile-mode] .map-card {
    width: 100%;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-mobile-mode] .app-shell,
  body[data-mobile-mode] .dashboard,
  body[data-mobile-mode] #mapSection,
  body[data-mobile-mode] .map-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  body[data-mobile-mode] .command-center {
    display: block;
    flex: 1 1 auto;
  }

  body[data-mobile-mode] #mapSection {
    position: relative;
    overflow: hidden;
  }

  body[data-mobile-mode] .map-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
  }

  body[data-mobile-mode] .map-frame {
    min-height: 0;
    height: calc(var(--gridly-visual-vh, 100dvh) - 56px);
    max-height: calc(var(--gridly-visual-vh, 100dvh) - 56px);
    margin: 0;
    border-radius: 0;
    border-inline: 0;
    border-bottom: 0;
    box-shadow: none;
    padding-top: 56px;
  }

  body[data-mobile-mode] #map {
    height: 100%;
    min-height: 0;
  }

  body[data-mobile-mode] .desktop-command-panel {
    display: none !important;
  }

  body[data-mobile-mode] .mobile-live-brand {
    display: flex !important;
    position: fixed;
    --mobile-overlay-gutter: 10px;
    --mobile-brand-top: calc(env(safe-area-inset-top, 0px) + 8px);
    --mobile-brand-height: 42px;
    --mobile-overlay-gap: 8px;
    left: var(--mobile-overlay-gutter);
    right: var(--mobile-overlay-gutter);
    top: var(--mobile-brand-top);
    height: var(--mobile-brand-height);
    min-height: var(--mobile-brand-height);
    padding: 8px 12px;
    border-radius: 12px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    z-index: 880;
    background: linear-gradient(155deg, rgba(7, 16, 28, 0.92), rgba(5, 12, 22, 0.88));
    border: 1px solid rgba(132, 204, 255, 0.2);
    box-shadow: 0 8px 20px rgba(2, 8, 18, 0.34);
    backdrop-filter: blur(14px) saturate(132%);
  }

  body[data-mobile-mode] .mobile-live-brand-logo {
    width: 154px;
    height: 28px;
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
  }

  body[data-mobile-mode] .mobile-live-brand-logo img {
    width: 266px;
    max-width: none;
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
  }

  body[data-mobile-mode] .mobile-live-brand span {
    font-size: 0.69rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9fd8ff;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-mobile-mode="alert"] .desktop-command-panel {
    display: block !important;
    position: fixed;
    left: var(--mobile-overlay-gutter, 10px);
    right: var(--mobile-overlay-gutter, 10px);
    top: calc(var(--mobile-brand-top, env(safe-area-inset-top, 0px) + 8px) + var(--mobile-brand-height, 38px) + var(--mobile-overlay-gap, 8px) + 38px);
    z-index: 760;
    max-height: 48dvh;
    overflow: auto;
    border-radius: 12px;
    background: linear-gradient(165deg, rgba(8, 17, 30, 0.84), rgba(4, 11, 22, 0.9));
    border: 1px solid rgba(138, 205, 255, 0.24);
    backdrop-filter: blur(14px);
  }

  body[data-mobile-mode="report"] #mobileReportModeCard {
    position: fixed;
    left: var(--mobile-overlay-gutter, 10px);
    right: var(--mobile-overlay-gutter, 10px);
    top: calc(var(--mobile-brand-top, env(safe-area-inset-top, 0px) + 8px) + var(--mobile-brand-height, 38px) + var(--mobile-overlay-gap, 8px) + 40px);
    z-index: 780;
    display: block !important;
  }

  body[data-mobile-mode]:not([data-mobile-mode="report"]) #mobileReportModeCard {
    display: none !important;
  }
}

/* V42 — premium tactical mobile polish */
@media (max-width: 760px) {
  body[data-mobile-mode] .mobile-live-command,
  body[data-mobile-mode] .mobile-map-floating-chips,
  body[data-mobile-mode] .map-tools-overlay,
  body[data-mobile-mode] .desktop-command-panel,
  body[data-mobile-mode] #mobileReportModeCard {
    transition: opacity 180ms ease, transform 200ms ease, filter 180ms ease;
    will-change: opacity, transform;
  }

  body[data-mobile-mode] .mobile-live-command {
    top: calc(var(--mobile-brand-top, env(safe-area-inset-top, 0px) + 8px) + var(--mobile-brand-height, 38px) + var(--mobile-overlay-gap, 8px));
    left: var(--mobile-overlay-gutter, 10px);
    right: var(--mobile-overlay-gutter, 10px);
    z-index: 760;
    padding: 9px 10px;
    border-radius: 15px;
    border-color: rgba(153, 212, 255, 0.24);
    background: linear-gradient(155deg, rgba(8, 19, 33, 0.7), rgba(5, 13, 23, 0.78));
    box-shadow: 0 10px 24px rgba(3, 9, 22, 0.3), 0 0 16px rgba(45, 135, 255, 0.08);
    backdrop-filter: blur(15px) saturate(124%);
    gap: 11px;
  }

  body[data-mobile-mode] .mobile-live-command .eyebrow {
    margin: 0 0 4px;
    font-size: 0.6rem;
    letter-spacing: 0.13em;
    opacity: 0.88;
  }
  body[data-mobile-mode] .mobile-live-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 5px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(116, 239, 196, 0.48);
    background: rgba(46, 188, 151, 0.2);
    color: #b8ffea;
    font-size: 0.6rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  body[data-mobile-mode] .mobile-live-command strong {
    font-size: 0.96rem;
    line-height: 1.16;
    letter-spacing: 0.002em;
  }

  body[data-mobile-mode] .mobile-live-command p {
    margin: 3px 0 0;
    font-size: 0.69rem;
    line-height: 1.25;
    color: #cfe0f5;
  }

  body[data-mobile-mode] .mobile-live-command .compact-btn {
    min-height: 32px;
    padding: 8px 12px;
    font-size: 0.7rem;
    font-weight: 760;
    border-color: rgba(164, 214, 255, 0.34);
    background: linear-gradient(145deg, rgba(96, 205, 255, 0.16), rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 1px 0 rgba(224, 242, 255, 0.12);
    align-self: center;
  }

  body[data-mobile-mode] .mobile-live-command[data-delay-state="delayed"],
  body[data-mobile-mode] .mobile-live-command[data-delay-state="blocked"] {
    border-color: rgba(255, 206, 126, 0.42);
    box-shadow: 0 10px 24px rgba(30, 16, 5, 0.32), 0 0 20px rgba(255, 181, 81, 0.12);
  }
  body[data-mobile-mode] .mobile-live-command[data-delay-state="delayed"] .mobile-live-status-pill {
    border-color: rgba(255, 214, 124, 0.7);
    background: rgba(255, 176, 65, 0.24);
    color: #ffe2ad;
  }

  body[data-mobile-mode] .mobile-live-command[data-delay-state="blocked"] {
    border-color: rgba(255, 122, 145, 0.54);
    box-shadow: 0 10px 26px rgba(35, 8, 15, 0.35), 0 0 22px rgba(255, 95, 119, 0.14);
  }
  body[data-mobile-mode] .mobile-live-command[data-delay-state="blocked"] .mobile-live-status-pill {
    border-color: rgba(255, 146, 130, 0.8);
    background: rgba(255, 90, 64, 0.26);
    color: #ffd0bf;
  }

  body[data-mobile-mode] .mobile-map-floating-chips {
    top: calc(var(--mobile-brand-top, env(safe-area-inset-top, 0px) + 8px) + var(--mobile-brand-height, 38px) + var(--mobile-overlay-gap, 8px) + 80px);
    left: var(--mobile-overlay-gutter, 10px);
    right: var(--mobile-overlay-gutter, 10px);
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
  }

  body[data-mobile-mode] .map-floating-chip {
    padding: 6px 11px;
    min-height: 29px;
    font-size: 0.69rem;
    border-color: rgba(161, 212, 252, 0.28);
    background: linear-gradient(145deg, rgba(9, 20, 34, 0.66), rgba(8, 17, 30, 0.62));
    color: rgba(222, 236, 255, 0.82);
    box-shadow: 0 3px 9px rgba(2, 8, 18, 0.14);
    opacity: 0.82;
  }
  body[data-mobile-mode] .gridly-marker {
    transform: scale(0.9);
    opacity: 0.84;
    filter: saturate(0.85);
  }

  body[data-mobile-mode] .map-tools-overlay {
    top: calc(var(--mobile-brand-top, env(safe-area-inset-top, 0px) + 8px) + var(--mobile-brand-height, 38px) + var(--mobile-overlay-gap, 8px) + 122px);
    left: auto;
    right: var(--mobile-overlay-gutter, 10px);
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(141, 206, 250, 0.26);
    background: linear-gradient(160deg, rgba(7, 18, 31, 0.7), rgba(5, 13, 23, 0.71));
    box-shadow: 0 7px 16px rgba(2, 8, 17, 0.24);
    backdrop-filter: blur(11px) saturate(118%);
  }

  body[data-mobile-mode] .map-tools-overlay .geo-filter-pill {
    min-height: 27px;
    padding: 5px 9px;
    font-size: 0.65rem;
  }

  body[data-mobile-mode] #map .leaflet-control-zoom a,
  body[data-mobile-mode] #map .leaflet-control-layers-toggle {
    background: rgba(9, 16, 25, 0.56) !important;
    border-color: rgba(173, 216, 255, 0.24) !important;
    color: #d7e7f7 !important;
    box-shadow: 0 5px 10px rgba(3, 8, 16, 0.24) !important;
  }

  body[data-mobile-mode] .mobile-floating-action-dock {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 5px;
    min-height: 48px;
    border-radius: 16px;
    border: 1px solid rgba(148, 204, 251, 0.3);
    background: linear-gradient(145deg, rgba(8, 15, 24, 0.8), rgba(7, 12, 21, 0.84));
    box-shadow: 0 9px 20px rgba(2, 8, 17, 0.31), 0 0 16px rgba(90, 164, 255, 0.08);
    backdrop-filter: blur(15px) saturate(120%);
  }

  body[data-mobile-mode] .mobile-dock-btn {
    min-height: 36px;
    border-radius: 12px;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.015em;
    opacity: 0.9;
    transition: transform 150ms ease, opacity 150ms ease, box-shadow 180ms ease, filter 180ms ease, border-color 180ms ease;
  }

  body[data-mobile-mode] .mobile-dock-btn.active {
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(233, 245, 255, 0.26), 0 6px 12px rgba(4, 11, 22, 0.28), 0 0 14px rgba(110, 191, 255, 0.18);
    filter: saturate(1.11);
  }

  body[data-mobile-mode] .mobile-dock-btn:active {
    transform: translateY(1px) scale(0.985);
  }

  body[data-mobile-mode="route"] .mobile-map-floating-chips,
  body[data-mobile-mode="route"] .map-tools-overlay,
  body[data-mobile-mode="alert"] .mobile-map-floating-chips,
  body[data-mobile-mode="alert"] .map-tools-overlay,
  body[data-mobile-mode="report"] .mobile-map-floating-chips,
  body[data-mobile-mode="report"] .map-tools-overlay {
    opacity: 0;
    transform: translateY(-4px) scale(0.99);
    pointer-events: none;
  }
}

/* V43C — mobile map layer picker tap + stacking fixes */
@media (max-width: 760px) {
  body[data-mobile-mode] #map .gridly-mobile-layer-menu {
    position: absolute;
    right: 10px;
    bottom: 202px;
    z-index: 10070;
    display: none;
    gap: 5px;
    justify-items: end;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu.is-mobile-visible {
    display: grid;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle,
  body[data-mobile-mode] #map .gridly-mobile-layer-menu-list button {
    border: 1px solid rgba(173, 216, 255, 0.24);
    background: rgba(9, 16, 25, 0.82);
    color: #d7e7f7;
    border-radius: 999px;
    min-height: 30px;
    padding: 8px 12px;
    font-size: 0.69rem;
    font-weight: 700;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle {
    pointer-events: auto;
    width: 30px;
    height: 30px;
    min-height: 30px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    line-height: 1;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle .gridly-layer-icon {
    display: inline-flex;
    transform: translateY(0.5px);
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-list {
    display: grid;
    gap: 5px;
    justify-items: end;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-list button.active {
    border-color: rgba(141, 208, 255, 0.66);
    box-shadow: inset 0 0 0 1px rgba(221, 242, 255, 0.26);
  }

  body[data-mobile-mode] #map .leaflet-control-layers.gridly-mobile-layer-control-hidden,
  body[data-mobile-mode] #map .leaflet-control-layers-expanded.gridly-mobile-layer-control-hidden {
    display: none !important;
    pointer-events: none !important;
  }

  body[data-mobile-mode] #map .leaflet-control-container,
  body[data-mobile-mode] #map .leaflet-top,
  body[data-mobile-mode] #map .leaflet-right,
  body[data-mobile-mode] #map .leaflet-control-layers,
  body[data-mobile-mode] #map .leaflet-control-layers-expanded,
  body[data-mobile-mode] #map .leaflet-control-layers-list,
  body[data-mobile-mode] #map .leaflet-control-layers-base,
  body[data-mobile-mode] #map .leaflet-control-layers-base label,
  body[data-mobile-mode] #map .leaflet-control-layers-selector {
    pointer-events: auto !important;
  }

  body[data-mobile-mode] #map .leaflet-control-layers,
  body[data-mobile-mode] #map .leaflet-control-layers-expanded {
    z-index: 10060 !important;
    touch-action: manipulation;
  }

  body[data-mobile-mode] #map .leaflet-control-layers-base label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
  }

  body[data-mobile-mode] #map .leaflet-control-layers-base label *,
  body[data-mobile-mode] #map .leaflet-control-layers-selector {
    pointer-events: auto !important;
  }

  body[data-mobile-mode] #map .leaflet-bottom.leaflet-left {
    left: 8px;
    bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - 120px);
  }

  body[data-mobile-mode] #map .leaflet-control-attribution {
    margin: 0;
    padding: 2px 6px;
    border-radius: 8px !important;
    font-size: 0.58rem;
    line-height: 1.2;
    color: rgba(212, 230, 249, 0.72) !important;
    background: rgba(6, 12, 21, 0.58) !important;
    border: 1px solid rgba(140, 192, 236, 0.18);
    backdrop-filter: blur(6px);
  }

  body[data-mobile-mode] #map .leaflet-control-attribution a {
    color: rgba(198, 229, 255, 0.88) !important;
  }
}

/* V43N — mobile visual cleanup after functional stabilization */
@media (max-width: 760px) {
  body[data-mobile-mode] .mobile-floating-action-dock {
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    width: auto;
    max-width: 420px;
    margin-inline: auto;
    transform: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 6px;
    box-sizing: border-box;
  }

  body[data-mobile-mode] .mobile-dock-btn {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.72rem;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu {
    left: max(8px, env(safe-area-inset-left, 0px));
    right: auto;
    bottom: calc(176px + env(safe-area-inset-bottom, 0px));
    gap: 4px;
    justify-items: start;
    align-items: start;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle,
  body[data-mobile-mode] #map .gridly-mobile-layer-menu-list button {
    background: linear-gradient(145deg, rgba(8, 14, 23, 0.75), rgba(9, 16, 26, 0.68));
    border-color: rgba(166, 208, 245, 0.28);
    color: rgba(221, 237, 255, 0.92);
    box-shadow: 0 4px 10px rgba(2, 8, 16, 0.22);
    backdrop-filter: blur(8px) saturate(116%);
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-list button {
    font-size: 0.65rem;
    min-height: 29px;
    padding: 5px 10px;
    width: 88px;
    text-align: left;
    justify-content: flex-start;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-list {
    justify-items: start;
    align-items: start;
  }
  body[data-mobile-mode] #map .gridly-mobile-layer-menu-list button.active {
    border-color: rgba(141, 214, 255, 0.62);
    box-shadow: inset 0 0 0 1px rgba(217, 241, 255, 0.24), 0 0 10px rgba(76, 176, 255, 0.18);
    color: #e8f6ff;
  }

  body[data-mobile-mode] .map-tools-overlay {
    top: calc(var(--mobile-brand-top, env(safe-area-inset-top, 0px) + 8px) + var(--mobile-brand-height, 38px) + var(--mobile-overlay-gap, 8px) + 116px);
    padding: 5px;
  }

  body[data-mobile-mode] #map .leaflet-control-zoom {
    margin-right: max(6px, env(safe-area-inset-right, 0px));
    margin-top: 2px;
  }

  body[data-mobile-mode] #map .leaflet-bottom.leaflet-left {
    left: max(8px, env(safe-area-inset-left, 0px));
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - 132px);
  }

  body[data-mobile-mode] #map .leaflet-control-attribution {
    padding: 2px 5px;
    font-size: 0.56rem;
    opacity: 0.88;
  }
}


/* V44B mobile modal polish */
@media (max-width: 1100px) {
  .route-setup-modal-card,
  .smart-alerts-modal-card,
  .gridly-mobile-route-quick-panel,
  .gridly-hazard-panel {
    border-radius: 14px 14px 0 0;
    border-width: 1px;
    box-shadow: 0 -10px 24px rgba(0,0,0,0.28);
    backdrop-filter: blur(10px);
  }

  .route-setup-modal-card {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    max-height: min(82svh, 600px);
  }
  .route-setup-grid-mobile {
    gap: 8px;
  }
  .route-setup-grid-mobile label {
    gap: 4px;
    font-size: 0.76rem;
  }
  .destination-chip-row {
    gap: 5px;
  }
  .destination-chip-row .destination-chip {
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 0.76rem;
  }

  .route-setup-modal-head h2,
  .gridly-mobile-route-quick-panel .panel-head h3,
  .smart-alerts-modal-head + h2,
  .hazard-panel-header strong {
    font-size: 1rem;
    letter-spacing: 0.01em;
  }

  .route-modal-close,
  #closeSmartAlertsModalBtn,
  .hazard-panel-header button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08);
  }

  .route-setup-grid-mobile input,
  .route-setup-grid-mobile select,
  .smart-alerts-modal-card input,
  .smart-alerts-modal-card select {
    border-radius: 12px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
  }

  .route-setup-grid-mobile .primary-btn,
  .route-setup-grid-mobile .secondary-btn,
  .smart-alerts-modal-card .primary-btn,
  .smart-alerts-modal-card .secondary-btn,
  .gridly-mobile-route-quick-panel .primary-btn,
  .gridly-mobile-route-quick-panel .secondary-btn,
  .hazard-panel-placement-actions button {
    min-height: 38px;
    border-radius: 12px;
    padding: 8px 11px;
  }
  .route-setup-grid-mobile #mobileSaveRouteBtn,
  .route-setup-grid-mobile #mobileUseLocationBtn {
    min-height: 36px;
    font-size: 0.82rem;
    font-weight: 700;
  }
  .route-setup-grid-mobile #mobileResetPlacesBtn {
    min-height: 34px;
    font-size: 0.76rem;
    opacity: 0.9;
  }
}

/* V45 mobile IA + density refinement */
.gridly-mobile-route-quick-panel{background:rgba(8,16,28,.9)!important;border:1px solid rgba(170,206,248,.2)!important;border-radius:12px!important;box-shadow:0 10px 24px rgba(0,0,0,.28)!important}
.gridly-mobile-route-quick-panel .route-quick-field{font-size:10px!important;gap:2px!important}
.gridly-mobile-route-quick-panel select{min-height:34px!important;border-radius:8px!important}
.gridly-mobile-route-quick-panel .route-quick-actions button{padding:7px 9px!important;border-radius:9px!important;font-size:11px!important}
.route-setup-modal-card,.smart-alerts-modal-card{border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.route-modal-close,#closeSmartAlertsModalBtn{min-height:30px;padding:4px 10px}

.geo-filter-shell{gap:6px;padding:2px 2px 3px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:999px}
.geo-filter-pill{padding:6px 10px;font-size:.73rem;border-color:transparent;background:rgba(255,255,255,.05);color:rgba(234,241,250,.78)}
.geo-filter-pill.selected{background:linear-gradient(135deg,#8eefff,#56d8f4);color:#04202a;box-shadow:none}
.geo-filter-status{padding:8px 11px;border-color:rgba(255,255,255,.1);background:rgba(12,17,24,.72);box-shadow:0 6px 16px rgba(6,13,25,.2)}

.alerts-list{gap:6px}
.alert-item.intelligence-row{padding:8px 9px;border-radius:12px;background:rgba(255,255,255,.04)}
.alert-row-main{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px}
.alert-severity-chip{font-size:.64rem;font-weight:800;letter-spacing:.02em;padding:2px 6px;border-radius:999px;background:rgba(103,180,255,.2);color:#c4e8ff}
.alert-item.high .alert-severity-chip{background:rgba(255,92,122,.2);color:#ffd2dc}
.alert-item.cleared .alert-severity-chip{background:rgba(67,230,160,.2);color:#c8ffe4}
.alert-row-time{font-size:.66rem;color:#b5c9e0}
.alert-row-subline{margin-top:3px!important;font-size:.72rem!important;line-height:1.2!important}
.alert-row-details summary{cursor:pointer;list-style:none;font-size:.68rem;color:#95bfe6;margin-top:4px}
.alert-row-details summary::-webkit-details-marker{display:none}
.alert-row-details p{font-size:.72rem!important;line-height:1.22!important;margin-top:4px}

.mobile-floating-action-dock{backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;background:rgba(9,13,20,.74)!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 8px 18px rgba(0,0,0,.22)!important}
.mobile-alerts-panel{background:rgba(10,15,23,.74)!important;border-color:rgba(255,255,255,.09)!important;box-shadow:0 9px 18px rgba(0,0,0,.2)!important}


body[data-mobile-mode] .report-drawer-summary{display:none!important}
body[data-mobile-mode] .report-drawer{border:0;background:transparent;box-shadow:none;padding:0}
.manage-places-group{display:grid;gap:6px;padding:8px 0;border-top:1px solid rgba(255,255,255,.07)}
.manage-places-group:first-child{border-top:0;padding-top:0}
.manage-places-group-label{margin:0;color:rgba(180,205,230,.86);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.manage-places-group-utility .secondary-btn{opacity:.82}
.geo-filter-shell{background:rgba(255,255,255,.01);border:1px solid rgba(255,255,255,.06)}
.geo-filter-pill{background:rgba(255,255,255,.035)}
body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle,body[data-mobile-mode] #map .gridly-mobile-layer-menu.is-open .gridly-mobile-layer-menu-list{display:block}
#map .gridly-mobile-layer-menu-list button{background:rgba(8,14,23,.62);border-color:rgba(166,208,245,.2);box-shadow:0 3px 8px rgba(2,8,16,.16)}

/* V46 premium commute intelligence refinement */
.mobile-live-brand{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:11px 14px;border-radius:18px;background:rgba(9,16,27,.58);border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 22px rgba(2,8,18,.24)}
.mobile-live-brand-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.mobile-live-brand-copy{min-width:0}
.mobile-live-brand-copy strong{display:block;font-size:.82rem;letter-spacing:.16em;color:#eaf6ff}
.mobile-live-brand-copy span{display:block;font-size:.7rem;color:rgba(217,231,245,.75)}
.mobile-live-brand-status{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;min-width:124px;max-width:42%;text-align:right;flex:0 0 auto}
.mobile-live-brand-status strong{font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(194,224,242,.78);line-height:1.2}
.mobile-live-brand-status span{display:block;font-size:.74rem;font-weight:700;letter-spacing:.02em;text-transform:none;color:#e6f4ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}

.route-status-card{background:rgba(8,16,26,.62)!important;border:1px solid rgba(255,255,255,.07)!important;box-shadow:0 10px 24px rgba(3,10,18,.2)!important}
.hero-actions{gap:10px}
.hero-route-btn{font-weight:600}
.hero-alerts-btn{opacity:.84}

.route-setup-modal-card .setup-grid{display:grid;gap:10px}
.manage-places-group{display:grid;gap:8px;background:rgba(11,20,31,.45);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:11px 12px}
.manage-places-group-label{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:#8fc9e6;margin:0}
.manage-places-group-note{margin:0;font-size:.74rem;color:rgba(210,227,241,.76);line-height:1.3}
.manage-places-group label{gap:5px}
.manage-places-group-utility{opacity:.8}
.manage-places-group .destination-chip-row{display:grid;grid-template-columns:1fr;gap:8px}
.manage-places-group .destination-chip{width:100%}

.manage-places-save-status{margin:0;font-size:.74rem;line-height:1.35;color:rgba(214,232,246,.86)}
.manage-places-save-status[data-state="success"]{color:#9be7b0}
.manage-places-save-status[data-state="error"]{color:#ffb5b5}
.subtle-secondary-btn{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.11)!important;color:rgba(219,236,248,.86)!important}
.manage-places-group-utility .subtle-secondary-btn{opacity:.78}

@media (min-width: 761px){
  .manage-places-group .destination-chip-row{display:flex;flex-wrap:wrap}
  .manage-places-group .destination-chip{flex:1 1 30%}
}

.route-setup-modal-head,.smart-alerts-modal-head,.gridly-mobile-route-quick-panel .panel-head,.hazard-panel-header{margin-bottom:8px}
.route-modal-close,#closeSmartAlertsModalBtn,.hazard-panel-header button{display:inline-flex;align-items:center;justify-content:center}

.alerts-list{gap:8px}
.alert-item{padding:10px 11px;border:1px solid rgba(255,255,255,.07);background:rgba(10,17,27,.48);box-shadow:none}
.alert-row-main{gap:8px}
.alert-severity-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.alert-item.high .alert-severity-chip{background:rgba(255,130,93,.17);border-color:rgba(255,160,122,.3)}
.alert-row-time{font-size:.72rem;color:rgba(202,221,236,.78)}
.alert-item[data-alert-focus]{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.alert-item[data-alert-focus]:hover,.alert-item[data-alert-focus]:focus-visible{transform:translateY(-1px);border-color:rgba(142,239,255,.38);box-shadow:0 6px 16px rgba(7,16,29,.28);outline:none}

.geo-filter-shell{background:rgba(8,15,24,.44)!important;border-color:rgba(255,255,255,.07)!important;box-shadow:none!important}
.geo-filter-pill{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.04)!important;color:rgba(229,238,249,.72)!important}
.geo-filter-pill.selected{background:linear-gradient(135deg,rgba(112,220,255,.92),rgba(77,185,239,.9))!important;color:#062331!important}

.hero-card,.setup-card,.panel-card,.growth-card,.mobile-home-card,.desktop-command-panel{border-color:rgba(255,255,255,.07)!important;box-shadow:0 10px 28px rgba(3,10,16,.2)!important}

/* V47 progressive calmness pass */
.mobile-live-brand{align-items:center;padding:10px 14px;gap:12px;box-shadow:0 6px 14px rgba(2,8,18,.18)}
.mobile-live-brand-copy strong{font-size:.86rem;letter-spacing:.18em}
.mobile-live-brand-status{min-width:118px;max-width:48%}
.mobile-live-brand-status span{max-width:100%}

body[data-mobile-mode] #map .gridly-mobile-layer-menu{right:12px;bottom:96px}
body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle{padding:8px 12px;border-radius:14px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
body[data-mobile-mode] #map .gridly-mobile-layer-menu-list{margin-top:6px;border-radius:14px;overflow:hidden}
body[data-mobile-mode] #map .gridly-mobile-layer-menu.is-open .gridly-mobile-layer-menu-list{display:block}
#map .gridly-mobile-layer-menu-list button{font-size:.75rem}

.manage-source-row{display:grid;grid-template-columns:1fr;gap:8px}
.manage-source-row .destination-chip.active{background:rgba(72,164,255,.18);border-color:rgba(141,205,255,.56)}
.manage-places-group-utility{opacity:.82}
.manage-places-group-utility .manage-places-group-label{font-size:.64rem}
#mobileResetPlacesBtn{font-size:.72rem;padding:8px 10px}

/* V47A progressive disclosure and control consolidation */
.mobile-live-brand-main{gap:0}
.mobile-live-brand-status{margin-left:auto}
body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle{background:rgba(9,16,27,.54);border-color:rgba(255,255,255,.18);box-shadow:0 4px 14px rgba(2,8,18,.2)}
body[data-mobile-mode] #map .gridly-mobile-layer-menu-list{background:rgba(9,16,27,.66);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
body[data-mobile-mode] #map .gridly-mobile-layer-menu.is-open .gridly-mobile-layer-menu-list{display:block}
#map .gridly-mobile-layer-menu-list button{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.08)}
body[data-mobile-mode] #map .gridly-mobile-layer-menu-list button:last-child{border-bottom:0}
.manage-places-group{display:grid;gap:10px}
.manage-places-group-utility{margin-top:6px;opacity:.85}
.manage-places-group-utility .secondary-btn{justify-self:start}
.route-setup-grid-mobile #managePlacesSlotsGroup .manage-places-group-label,
.route-setup-grid-mobile #managePlacesSourceGroup .manage-places-group-label,
.route-setup-grid-mobile #managePlacesSaveGroup .manage-places-group-label{font-size:.68rem;letter-spacing:.12em;color:rgba(194,224,242,.72)}

/* V47B — system unification + overlay simplification */
.map-toolbar-main-row{gap:8px}
.map-toolbar-divider{opacity:.35}
.map-card .map-tools-overlay{box-shadow:0 6px 16px rgba(2,8,16,.16)!important;border-color:rgba(255,255,255,.08)!important}
.map-card .map-tools-overlay .map-tools-section{gap:6px}
.map-card .map-tools-overlay .map-tools-section-label,
.map-card .map-tools-overlay .map-view-label{color:rgba(198,221,241,.72)!important}
.map-card .map-tools-overlay .geo-filter-shell{padding:3px!important;gap:4px!important;background:rgba(8,15,24,.34)!important}
.map-card .map-tools-overlay .geo-filter-pill{min-height:30px;padding:5px 9px!important;font-size:.7rem!important}
.map-card .map-tools-overlay .legend-pill{min-height:30px;padding:5px 8px}

body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:12px;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;background:rgba(9,16,27,.5);border:1px solid rgba(255,255,255,.16);box-shadow:0 3px 10px rgba(2,8,18,.16)}
body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle .gridly-layer-icon{font-size:.8rem;line-height:1}
body[data-mobile-mode] #map .gridly-mobile-layer-menu-list{border-radius:12px;background:rgba(9,16,27,.6);border:1px solid rgba(255,255,255,.12)}
body[data-mobile-mode] #map .gridly-mobile-layer-menu.is-open .gridly-mobile-layer-menu-list{display:block}
#map .gridly-mobile-layer-menu-list button{min-height:34px;padding:8px 10px;font-size:.74rem}

.route-setup-modal-card{border-radius:14px!important;background:rgba(10,17,28,.88)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 10px 24px rgba(0,0,0,.22)!important}
.route-setup-modal-head{margin-bottom:6px}
.route-setup-modal-head h2{font-size:1.03rem}
.route-setup-grid-mobile{gap:8px!important}
.manage-places-group{gap:7px!important;padding:8px 10px!important;border-radius:11px!important;background:rgba(255,255,255,.02)!important;border:1px solid rgba(255,255,255,.05)!important}
.manage-places-group-label{font-size:.64rem!important;letter-spacing:.1em!important;color:rgba(193,220,241,.72)!important}
.manage-places-group-note{font-size:.72rem!important;color:rgba(215,230,242,.68)!important}
.manage-places-group .destination-chip{min-height:34px;padding:7px 10px}
.manage-places-group-utility{margin-top:2px!important;opacity:.86!important}

/* V47C — true layer consolidation + manage places compression */
#map .gridly-mobile-layer-menu{
  position:absolute;
  right:12px;
  bottom:104px;
  z-index:1301;
  display:none;
}
#map .gridly-mobile-layer-menu.is-mobile-visible{display:block}
#map .gridly-mobile-layer-menu-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:6px 10px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(9,16,27,.44);
  color:rgba(231,244,255,.92);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.66rem;
  box-shadow:0 3px 10px rgba(2,8,18,.14);
  backdrop-filter:blur(8px);
}
#map .gridly-mobile-layer-menu-list{
  display:none;
  margin-top:5px;
  border-radius:11px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(9,16,27,.56);
  backdrop-filter:blur(10px);
}
#map .gridly-mobile-layer-menu.is-open .gridly-mobile-layer-menu-list{display:block}
#map .gridly-mobile-layer-menu-list button{
  width:100%;
  min-height:31px;
  padding:7px 10px;
  text-align:left;
  font-size:.72rem;
  color:rgba(225,240,252,.9);
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#map .gridly-mobile-layer-menu-list button:last-child{border-bottom:0}
#map .gridly-mobile-layer-menu-list button.active{
  background:rgba(97,185,239,.2);
  color:#f4fbff;
}
#map .leaflet-control-layers.gridly-mobile-layer-control-hidden,
#map .leaflet-control-layers-expanded.gridly-mobile-layer-control-hidden{display:none!important}

.route-setup-modal-card .setup-grid{gap:7px}
.manage-places-group{
  gap:6px!important;
  padding:7px 9px!important;
  border-radius:10px!important;
}
.manage-places-group-note{font-size:.7rem!important;line-height:1.25}
.manage-places-group .destination-chip{min-height:32px;padding:6px 9px;font-size:.76rem}
.manage-source-row{gap:6px}
#managePlacesSavedGroup{padding-top:6px!important;padding-bottom:6px!important}
#savedPlacesSelectLabel{font-size:.76rem;color:rgba(212,230,244,.84)}
#mobileSavedDestinationSelect{min-height:33px;padding:5px 8px}
#managePlacesSaveGroup .primary-btn{min-height:34px}
.manage-places-group-utility{
  opacity:.72!important;
  background:transparent!important;
  border:0!important;
  padding:2px 2px 0!important;
}
#mobileResetPlacesBtn{font-size:.69rem;padding:6px 8px}
.manage-places-fallback-btn{width:100%;margin-top:8px;font-weight:800}

.mobile-floating-action-dock{
  background:rgba(9,13,20,.66)!important;
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:0 6px 14px rgba(0,0,0,.18)!important;
}

@media (max-width: 760px) {
  .gridly-hazard-panel{padding:10px 10px 8px!important;border-radius:14px!important;box-shadow:0 10px 22px rgba(0,0,0,.32)!important}
  .gridly-hazard-panel h3{font-size:.94rem!important;margin-bottom:2px!important}
  .gridly-hazard-panel>p{font-size:.77rem!important;margin-bottom:6px!important}
  .hazard-choice-grid{gap:6px!important;padding-bottom:6px!important}
  .hazard-choice-grid button{min-height:36px!important;padding:7px 9px!important;font-size:.79rem!important;border-radius:10px!important}
  .hazard-subtype-panel{margin-top:5px!important;padding:6px!important}
  .hazard-subtype-grid{gap:5px!important}
  .hazard-subtype-grid button{min-height:32px!important;padding:6px 9px!important;font-size:.75rem!important;border-radius:9px!important}
  .hazard-choice-grid button span,.hazard-choice-grid button svg{transform:scale(.92)}
  .hazard-panel-placement-actions{padding-top:5px!important;padding-bottom:calc(5px + env(safe-area-inset-bottom,0px))!important;gap:5px!important;margin-top:3px!important}
  .hazard-panel-placement-actions button{min-height:31px!important;padding:6px 9px!important;font-size:.74rem!important}
}

/* V48 — hard mobile layer closed-state + manage places fit */
@media (max-width: 760px) {
  #map .gridly-mobile-layer-menu {
    display: none;
    right: 12px;
    left: auto;
    bottom: 98px;
    z-index: 1301;
  }
  #map .gridly-mobile-layer-menu.is-mobile-visible {
    display: block !important;
  }
  #map .gridly-mobile-layer-menu .gridly-mobile-layer-menu-toggle {
    display: inline-flex !important;
  }
  #map .gridly-mobile-layer-menu:not(.is-open) .gridly-mobile-layer-menu-list {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  #map .gridly-mobile-layer-menu.is-open .gridly-mobile-layer-menu-list {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    width: 114px;
  }
  #map .gridly-mobile-layer-menu .gridly-mobile-layer-menu-list button {
    width: 100% !important;
    text-align: left !important;
  }

  .route-setup-modal-card {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    max-height: min(78svh, 560px);
  }
  .route-setup-grid-mobile {
    gap: 6px !important;
  }
  .manage-places-group {
    gap: 5px !important;
    padding: 6px 8px !important;
  }
  #managePlacesSavedGroup {
    gap: 4px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  #mobileSavedDestinationSelect {
    min-height: 30px !important;
    padding: 4px 8px !important;
    font-size: 0.74rem !important;
  }
  .route-setup-grid-mobile #managePlacesSaveGroup .manage-places-group-label {
    font-size: 0 !important;
  }
  .route-setup-grid-mobile #managePlacesSaveGroup .manage-places-group-label::before {
    content: "SAVE";
    font-size: .64rem;
    letter-spacing: .1em;
  }
  #managePlacesSaveGroup .destination-chip-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-items: stretch;
  }
  #managePlacesSaveGroup .destination-chip-row > * {
    min-width: 0;
  }
  #managePlacesSaveGroup .primary-btn,
  #mobileResetPlacesBtn {
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: .72rem !important;
  }
  #mobileResetPlacesBtn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* V49 — mobile map controls + manage places final polish */
@media (max-width: 760px) {
  body[data-mobile-mode] #map .gridly-mobile-control-rail {
    position: absolute;
    top: auto;
    right: 8px;
    left: auto;
    bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    z-index: 1310;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    pointer-events: auto;
    padding: 6px;
    border-radius: 12px;
    background: rgba(10, 13, 16, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 20px rgba(2, 8, 18, 0.28);
    backdrop-filter: blur(6px);
  }
  body[data-mobile-mode] #map .leaflet-control-zoom {
    position: static;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: none;
  }

  body[data-mobile-mode] #map .leaflet-control-zoom a {
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: rgba(10, 13, 16, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    color: #c5d5e7 !important;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu {
    position: static;
    margin: 0;
    z-index: 1310;
    pointer-events: auto;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle {
    pointer-events: auto;
    width: 38px;
    min-height: 38px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: 10px;
    height: 38px;
    background: rgba(10, 13, 16, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    color: #c5d5e7;
    letter-spacing: 0;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle:hover,
  body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle:focus-visible {
    background: rgba(10, 13, 16, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle:active {
    filter: brightness(0.94);
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle .gridly-layer-icon {
    font-size: 0.95rem;
    line-height: 1;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-toggle .gridly-layer-label {
    display: none;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-list {
    position: absolute;
    top: auto;
    right: 0;
    bottom: calc(100% + 6px);
    margin-top: 0;
    width: 112px;
    min-width: unset;
    max-width: 118px;
    border-radius: 10px;
    z-index: 1315;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-list button {
    min-height: 32px;
    padding: 7px 8px;
    font-size: 0.7rem;
  }

  body[data-mobile-mode] #map .leaflet-bottom.leaflet-right {
    bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    right: 8px !important;
  }

  body[data-mobile-mode] #map .leaflet-control-attribution {
    margin: 0 !important;
    bottom: auto !important;
    max-width: min(64vw, 230px);
    border-radius: 8px;
    padding: 1px 5px;
    font-size: 10px;
    line-height: 1.15;
    opacity: 0.72;
    color: rgba(212, 230, 249, 0.72) !important;
    background: rgba(8, 12, 20, 0.56);
    border: 1px solid rgba(140, 192, 236, 0.14);
    box-shadow: none !important;
    backdrop-filter: blur(2px);
  }

  #managePlacesSaveGroup {
    width: 100% !important;
    align-self: stretch !important;
    grid-column: 1 / -1 !important;
  }

  #managePlacesSaveGroup .destination-chip-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  #managePlacesSaveGroup .primary-btn,
  #managePlacesSaveGroup #mobileResetPlacesBtn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    flex-basis: 0;
  }

  #managePlacesSaveGroup .primary-btn {
    flex: 1.35 1 0 !important;
  }

  #managePlacesSaveGroup #mobileResetPlacesBtn {
    flex: 1 1 0 !important;
  }

  #managePlacesSaveGroup .destination-chip-row > * {
    min-width: 0 !important;
  }
}

/* V50 — final mobile layer anchor + full-width manage places save row */
@media (max-width: 760px) {
  :root {
    --gridly-visual-vh: 100vh;
  }

  body[data-mobile-mode] .route-setup-modal-card,
  body[data-mobile-mode] .smart-alerts-modal-card {
    max-height: calc(100dvh - 24px) !important;
    max-height: calc(var(--gridly-visual-vh, 100vh) - 24px) !important;
  }

  body[data-mobile-mode] .route-setup-modal-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-mobile-mode] .route-setup-modal-card > .route-setup-grid-mobile {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px !important;
  }

  body[data-mobile-mode] .route-setup-modal-card > #managePlacesSaveGroup {
    position: sticky !important;
    bottom: 0 !important;
    flex-shrink: 0 !important;
    background: linear-gradient(180deg, rgba(6, 12, 21, 0.92), rgba(6, 12, 21, 0.98)) !important;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2;
  }

  body[data-mobile-mode] #map .gridly-mobile-layer-menu-list {
    right: 0 !important;
    left: auto !important;
    top: auto !important;
    bottom: calc(100% + 6px) !important;
    width: 112px !important;
    max-width: 118px !important;
    margin-top: 0 !important;
  }

  body[data-mobile-mode] .route-setup-modal-card {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 24px) !important;
    max-height: calc(var(--gridly-visual-vh, 100vh) - 24px) !important;
    overflow: hidden !important;
  }

  body[data-mobile-mode] .route-setup-grid-mobile {
    gap: 5px !important;
  }

  body[data-mobile-mode] .route-setup-modal-card > #managePlacesSaveGroup {
    margin-top: 6px !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
    padding: 6px 8px !important;
  }

  body[data-mobile-mode] .route-setup-modal-card > #managePlacesSaveGroup .destination-chip-row {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: none !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  body[data-mobile-mode] .route-setup-modal-card > #managePlacesSaveGroup .primary-btn {
    flex: 1.45 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
  }

  body[data-mobile-mode] .route-setup-modal-card > #managePlacesSaveGroup #mobileResetPlacesBtn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
  }

  body[data-mobile-mode] #managePlacesAddressGroup label,
  body[data-mobile-mode] #managePlacesSavedGroup label {
    gap: 3px !important;
  }

  body[data-mobile-mode] #managePlacesAddressGroup input,
  body[data-mobile-mode] #managePlacesSavedGroup select {
    min-height: 30px !important;
    padding: 5px 8px !important;
    font-size: 0.74rem !important;
  }

  body[data-mobile-mode] .smart-alerts-modal-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-mobile-mode] .smart-alert-options-grid {
    gap: 8px;
    margin-bottom: 10px;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }

  body[data-mobile-mode] #saveSmartAlertsBtn {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 1;
  }
}

/* V51 — final visual polish: unified control rail + safer header/logo breathing room */
@media (max-width: 1100px) {
  .app-header {
    min-height: 62px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

@media (max-width: 700px) {
  .app-header {
    min-height: 90px;
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .brand-logo-frame {
    height: 60px;
    overflow: visible;
  }
}


/* V52.1 authoritative layout ownership */
body[data-layout-mode="desktop"] .mobile-live-brand,
body[data-layout-mode="desktop"] .mobile-premium-header,
body[data-layout-mode="desktop"] .mobile-home-cards,
body[data-layout-mode="desktop"] .mobile-daily-panel,
body[data-layout-mode="desktop"] .mobile-floating-action-dock,
body[data-layout-mode="desktop"] .mobile-bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-layout-mode="mobile"][data-mobile-mode="alert"] .desktop-command-panel {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body[data-layout-mode="mobile"] .desktop-left-rail,
body[data-layout-mode="mobile"] .app-header,
body[data-layout-mode="mobile"] .desktop-route-watch-strip,
body[data-layout-mode="mobile"] .desktop-command-strip,
body[data-layout-mode="mobile"] .desktop-command-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   GRIDLY V52 — MOBILE MAP-FIRST SHELL (PHASE 1A)
========================================================= */
@media (max-width: 768px) {
  body[data-layout-mode="mobile"] .future-map-hero,
  body[data-layout-mode="mobile"] .driver-hero,
  body[data-layout-mode="mobile"] .mobile-home-cards,
  body[data-layout-mode="mobile"] .destination-hero-card,
  body[data-layout-mode="mobile"] .mobile-floating-action-dock,
  body[data-layout-mode="mobile"] .mobile-bottom-nav {
    display: none !important;
  }

  body[data-layout-mode="mobile"] .command-center {
    display: block;
  }

  body[data-layout-mode="mobile"] .map-card {
    margin-top: max(2px, env(safe-area-inset-top));
    min-height: calc(100dvh - 132px - env(safe-area-inset-bottom));
  }

  body[data-layout-mode="mobile"] #map {
    min-height: calc(100dvh - 188px - env(safe-area-inset-bottom));
  }

  body[data-layout-mode="mobile"] .map-tools-overlay {
    left: 10px;
    right: 10px;
    bottom: calc(110px + env(safe-area-inset-bottom));
    padding: 10px;
    border-radius: 12px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(6px + env(safe-area-inset-bottom));
    z-index: 2400;
    border: 1px solid rgba(141, 205, 255, 0.55);
    border-radius: 20px;
    background: linear-gradient(170deg, rgba(8, 18, 32, 0.96), rgba(4, 10, 18, 0.98));
    box-shadow: 0 -1px 0 rgba(172, 222, 255, 0.24), 0 26px 52px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px) saturate(130%);
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle {
    width: 100%;
    border: 0;
    background: transparent;
    color: #ecf4ff;
    padding: 8px 14px 12px;
    text-align: left;
    min-height: 68px;
    display: grid;
    gap: 8px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-grip {
    display: block;
    width: 54px;
    height: 5px;
    margin: 0 auto;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(183, 219, 255, 0.85), rgba(135, 194, 255, 0.95));
    box-shadow: 0 2px 10px rgba(91, 166, 255, 0.45);
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row strong {
    font-size: 1rem;
    letter-spacing: 0.01em;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row span {
    font-size: 0.72rem;
    font-weight: 760;
    color: rgba(190, 222, 255, 0.9);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-body {
    padding: 0 12px 14px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-actions .secondary-btn {
    min-height: 48px;
    font-size: 0.82rem;
    padding: 11px 8px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-note {
    margin: 8px 2px 0;
    font-size: 0.74rem;
    color: rgba(220, 234, 252, 0.82);
  }

  body[data-layout-mode="mobile"] .report-drawer {
    padding-bottom: calc(116px + env(safe-area-inset-bottom));
  }

  body[data-layout-mode="mobile"] #mobileReportBtn.mobile-sticky-report,
  body[data-layout-mode="mobile"] #gridlyHazardLauncher.gridly-hazard-launcher {
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    z-index: 2180 !important;
    transform: scale(0.94);
    opacity: 0.86;
  }
}

.mobile-native-surface-layer {
  position: fixed;
  inset: 0;
  z-index: 4600;
}
.mobile-native-surface-layer[hidden],
.mobile-native-surface-layer[aria-hidden="true"],
.mobile-native-surface-layer:not(.is-open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.mobile-native-surface-layer.is-open:not([hidden]):not([aria-hidden="true"]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mobile-native-surface-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 17, 0.52);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
body[data-layout-mode="portrait"] .mobile-native-surface-layer:not([hidden]) .mobile-native-surface-backdrop,
body[data-layout-mode-legacy="mobile"] .mobile-native-surface-layer:not([hidden]) .mobile-native-surface-backdrop {
  opacity: 1;
  pointer-events: auto;
}
body[data-layout-mode="tactical-landscape"] .mobile-native-surface-backdrop,
body[data-layout-mode="desktop"] .mobile-native-surface-backdrop {
  opacity: 0 !important;
  pointer-events: none !important;
}
.mobile-native-surface-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(72vh, 640px);
  border-radius: 18px 18px 0 0;
  border: 1px solid rgba(154, 190, 255, 0.22);
  background: #07131f;
  padding: 14px;
  overflow-y: auto;
}
.mobile-native-surface-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.mobile-native-surface-body { display:grid; gap:10px; }
.mobile-native-surface-card { border:1px solid rgba(154,190,255,.2); border-radius:12px; padding:10px; background:rgba(14,34,62,.72); }
.mobile-native-surface-card p { margin:6px 0; }
.mobile-native-surface-actions { display:flex; gap:8px; flex-wrap:wrap; }
.mobile-native-surface-actions-grid .secondary-btn { flex: 1 1 calc(50% - 6px); }
.mobile-kpi-row { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.mobile-chip-wrap { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 2px; }
.chip { display:inline-flex; align-items:center; border-radius:999px; padding:2px 8px; font-size:.65rem; font-weight:700; border:1px solid rgba(140,190,244,.3); }
.chip-neutral { background:rgba(95,132,188,.2); color:#d4e7ff; }
.chip-watch { background:rgba(255,201,92,.16); color:#ffe5ab; border-color:rgba(255,214,122,.4); }
.chip-alert { background:rgba(255,99,99,.15); color:#ffc7c7; border-color:rgba(255,126,126,.45); }
.chip-clear { background:rgba(76,209,142,.14); color:#b9ffd6; border-color:rgba(101,232,165,.45); }
.mobile-intel-feed { max-height: 180px; overflow:auto; margin-top:6px; padding-right:2px; }
.mobile-intel-feed ul { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.mobile-intel-feed-item { display:flex; gap:6px; align-items:flex-start; padding:6px 0; border-bottom:1px solid rgba(162,201,243,.14); }
.mobile-intel-feed-item:last-child { border-bottom:0; padding-bottom:0; }
.mobile-intel-feed-item p { margin:0; display:grid; gap:2px; }
.mobile-intel-feed-item p span { font-size:.68rem; color:rgba(207,224,244,.82); }
body[data-layout-mode="desktop"] .mobile-native-surface-layer { display:none !important; }


/* V52.5 — mobile command surface expansion pass */
@media (max-width: 760px) {
  body[data-layout-mode="mobile"] {
    --mobile-command-zone-top: calc(var(--mobile-brand-top, env(safe-area-inset-top, 0px) + 8px) + var(--mobile-brand-height, 42px) + 10px);
    --mobile-command-zone-gap: 5px;
  }

  body[data-layout-mode="mobile"] .mobile-live-command {
    top: var(--mobile-command-zone-top);
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    padding: 8px 10px;
    border-radius: 12px;
    gap: 8px;
  }

  body[data-layout-mode="mobile"] .mobile-live-command strong {
    font-size: 0.9rem;
    line-height: 1.14;
  }

  body[data-layout-mode="mobile"] .mobile-live-command p {
    font-size: 0.66rem;
    line-height: 1.22;
    margin-top: 2px;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay {
    top: calc(var(--mobile-command-zone-top) + 84px);
    right: max(10px, env(safe-area-inset-right, 0px));
    padding: 5px;
  }

  body[data-layout-mode="mobile"] #map .gridly-mobile-layer-menu {
    bottom: calc(186px + env(safe-area-inset-bottom, 0px));
  }

  body[data-layout-mode="mobile"] #map .leaflet-top.leaflet-left .leaflet-control-zoom {
    margin-top: calc(var(--mobile-command-zone-top) + 42px) !important;
    margin-left: 8px !important;
  }

  body[data-layout-mode="mobile"] #map .leaflet-bottom.leaflet-right {
    right: 8px;
    bottom: calc(166px + env(safe-area-inset-bottom, 0px));
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
    border-color: rgba(146, 209, 255, 0.34);
    background: linear-gradient(160deg, rgba(7, 17, 30, 0.9), rgba(4, 11, 22, 0.92));
    box-shadow: 0 12px 24px rgba(2, 8, 18, 0.4);
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle {
    min-height: 42px;
    padding: 8px 12px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-body {
    padding: 0 10px 12px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-actions .secondary-btn {
    min-height: 44px;
    font-size: 0.76rem;
    padding: 8px 7px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-note {
    font-size: 0.68rem;
    margin-top: 6px;
  }

  body[data-layout-mode="mobile"] .mobile-native-surface-sheet {
    left: max(6px, env(safe-area-inset-left, 0px));
    right: max(6px, env(safe-area-inset-right, 0px));
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    max-height: min(78dvh, 700px);
    min-height: min(56dvh, 520px);
    border-radius: 20px 20px 14px 14px;
    padding: 10px 10px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(165deg, rgba(5, 14, 24, 0.98), rgba(7, 20, 33, 0.97));
    box-shadow: 0 24px 44px rgba(1, 6, 14, 0.56), inset 0 1px 0 rgba(186, 222, 255, 0.08);
  }

  body[data-layout-mode="mobile"] .mobile-native-surface-header {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -10px -10px 8px;
    padding: 10px;
    border-bottom: 1px solid rgba(147, 206, 255, 0.2);
    background: linear-gradient(165deg, rgba(6, 16, 28, 0.96), rgba(7, 19, 32, 0.92));
    backdrop-filter: blur(8px);
  }

  body[data-layout-mode="mobile"] .mobile-native-surface-body {
    gap: 8px;
    max-height: calc(78dvh - 92px);
    overflow: auto;
    padding-right: 2px;
  }

  body[data-layout-mode="mobile"] .mobile-native-surface-card {
    border-radius: 10px;
    padding: 9px;
  }

  body[data-layout-mode="mobile"] .mobile-native-surface-card strong {
    font-size: 0.9rem;
    line-height: 1.18;
  }

  body[data-layout-mode="mobile"] .mobile-native-surface-card p {
    margin: 4px 0;
    font-size: 0.72rem;
    line-height: 1.26;
    color: rgba(214, 230, 248, 0.9);
  }

  body[data-layout-mode="mobile"] .mobile-native-surface-actions {
    gap: 5px;
  }

  body[data-layout-mode="mobile"] .mobile-native-surface-actions .primary-btn,
  body[data-layout-mode="mobile"] .mobile-native-surface-actions .secondary-btn {
    min-height: 38px;
    font-size: 0.74rem;
    padding: 8px 10px;
  }
}

/* V52.7 — mobile command compression pass */
@media (max-width: 760px) {
  body[data-layout-mode="mobile"] .mobile-live-brand {
    top: max(4px, env(safe-area-inset-top, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    padding: 7px 10px;
    gap: 9px;
    border-radius: 12px;
  }

  body[data-layout-mode="mobile"] .mobile-live-brand-logo {
    width: 112px;
    height: 24px;
  }

  body[data-layout-mode="mobile"] .mobile-live-brand-copy strong {
    font-size: 0.72rem;
    letter-spacing: 0.13em;
  }

  body[data-layout-mode="mobile"] .mobile-live-brand-status {
    min-width: 102px;
    gap: 1px;
  }

  body[data-layout-mode="mobile"] .mobile-live-brand-status strong {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }

  body[data-layout-mode="mobile"] .mobile-live-brand-status span {
    font-size: 0.68rem;
  }

  body[data-layout-mode="mobile"] {
    --mobile-command-zone-top: calc(var(--mobile-brand-top, env(safe-area-inset-top, 0px) + 6px) + var(--mobile-brand-height, 34px) + 6px);
  }

  body[data-layout-mode="mobile"] .mobile-live-command {
    top: var(--mobile-command-zone-top);
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    padding: 6px 8px;
    gap: 5px;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(2, 8, 18, 0.3);
  }

  body[data-layout-mode="mobile"] .mobile-live-command .eyebrow {
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    margin-bottom: 2px;
  }

  body[data-layout-mode="mobile"] .mobile-live-status-pill {
    min-height: 18px;
    padding: 2px 6px;
    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }

  body[data-layout-mode="mobile"] .mobile-live-command strong {
    font-size: 0.82rem;
    line-height: 1.08;
  }

  body[data-layout-mode="mobile"] .mobile-live-command p {
    font-size: 0.6rem;
    line-height: 1.18;
    margin-top: 1px;
  }

  body[data-layout-mode="mobile"] .mobile-live-command .compact-btn {
    min-height: 30px;
    padding: 6px 8px;
    font-size: 0.66rem;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay {
    top: calc(var(--mobile-command-zone-top) + 64px);
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    padding: 4px 5px;
    border-radius: 10px;
    background: rgba(8, 15, 24, 0.62) !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-shell {
    padding: 2px !important;
    gap: 3px !important;
    border-radius: 999px;
    border-color: rgba(185, 214, 238, 0.18) !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill,
  body[data-layout-mode="mobile"] .map-tools-overlay .legend-pill {
    min-height: 24px;
    padding: 4px 8px !important;
    font-size: 0.63rem !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .map-view-label,
  body[data-layout-mode="mobile"] .map-tools-overlay .map-tools-section-label,
  body[data-layout-mode="mobile"] .map-tools-overlay .map-tools-status {
    font-size: 0.6rem;
  }

  body[data-layout-mode="mobile"] .map-card {
    min-height: calc(100dvh - 108px - env(safe-area-inset-bottom));
  }

  body[data-layout-mode="mobile"] #map {
    min-height: calc(100dvh - 152px - env(safe-area-inset-bottom));
  }
}

/* V52.8 — mobile overlay refinement pass */
@media (max-width: 760px) {
  body[data-layout-mode="mobile"] .map-tools-overlay {
    top: calc(var(--mobile-command-zone-top) + 60px);
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    padding: 3px 4px;
    border-radius: 9px;
    gap: 4px;
    background: rgba(7, 13, 22, 0.52) !important;
    border-color: rgba(160, 200, 236, 0.16) !important;
    box-shadow: 0 5px 12px rgba(2, 8, 16, 0.2) !important;
    backdrop-filter: blur(5px) saturate(108%);
    -webkit-backdrop-filter: blur(5px) saturate(108%);
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-shell {
    padding: 1px !important;
    gap: 2px !important;
    border-radius: 999px;
    background: rgba(8, 16, 26, 0.34) !important;
    border-color: rgba(178, 210, 236, 0.14) !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill,
  body[data-layout-mode="mobile"] .map-tools-overlay .legend-pill {
    min-height: 22px;
    padding: 3px 7px !important;
    border-radius: 999px;
    font-size: 0.6rem !important;
    letter-spacing: 0.01em;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill {
    border-color: rgba(186, 213, 238, 0.18) !important;
    background: rgba(16, 28, 42, 0.5) !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill.selected {
    background: rgba(74, 157, 245, 0.24) !important;
    border-color: rgba(126, 194, 255, 0.5) !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .map-tools-section {
    gap: 5px;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .map-view-label,
  body[data-layout-mode="mobile"] .map-tools-overlay .map-tools-section-label,
  body[data-layout-mode="mobile"] .map-tools-overlay .map-tools-status {
    font-size: 0.56rem;
    letter-spacing: 0.07em;
  }

  body[data-layout-mode="mobile"] #map .leaflet-control-zoom {
    margin-top: calc(var(--mobile-command-zone-top) + 38px) !important;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(2, 8, 16, 0.2);
  }

  body[data-layout-mode="mobile"] #map .leaflet-control-zoom a,
  body[data-layout-mode="mobile"] #map .leaflet-control-layers-toggle {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 15px;
    background: rgba(7, 14, 24, 0.64) !important;
    border-color: rgba(170, 204, 236, 0.2) !important;
    box-shadow: none !important;
  }

  body[data-layout-mode="mobile"] #map .leaflet-control-layers,
  body[data-layout-mode="mobile"] #map .leaflet-control-layers-expanded {
    border-radius: 10px;
    background: rgba(6, 12, 20, 0.64) !important;
    border-color: rgba(166, 203, 236, 0.2) !important;
    box-shadow: 0 4px 10px rgba(2, 8, 16, 0.18) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  body[data-layout-mode="mobile"] .mobile-map-floating-chips,
  body[data-layout-mode="mobile"] .mobile-floating-action-dock {
    box-shadow: 0 6px 14px rgba(2, 8, 16, 0.2) !important;
    backdrop-filter: blur(8px) saturate(112%);
    -webkit-backdrop-filter: blur(8px) saturate(112%);
  }
}

/* V52.9 — mobile proportional refinement pass */
@media (max-width: 760px) {
  body[data-layout-mode="mobile"] {
    --mobile-command-zone-top: calc(var(--mobile-brand-top, env(safe-area-inset-top, 0px) + 6px) + var(--mobile-brand-height, 34px) + 5px);
  }

  /* 1) Top command strip compression */
  body[data-layout-mode="mobile"] .mobile-live-command {
    padding: 5px 7px;
    gap: 5px;
    border-radius: 10px;
  }

  body[data-layout-mode="mobile"] .mobile-live-command strong {
    font-size: 0.79rem;
    line-height: 1.04;
  }

  body[data-layout-mode="mobile"] .mobile-live-command p {
    font-size: 0.58rem;
    line-height: 1.13;
    margin-top: 0;
  }

  body[data-layout-mode="mobile"] .mobile-live-command .compact-btn {
    min-height: 27px;
    padding: 5px 7px;
    font-size: 0.63rem;
    line-height: 1.1;
  }

  /* 4) Tighter filter shell/pills */
  body[data-layout-mode="mobile"] .map-tools-overlay {
    top: calc(var(--mobile-command-zone-top) + 56px);
    padding: 2px 3px;
    border-radius: 8px;
    background: rgba(7, 13, 22, 0.4) !important;
    border-color: rgba(160, 200, 236, 0.12) !important;
    box-shadow: 0 4px 9px rgba(2, 8, 16, 0.15) !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-shell {
    padding: 1px !important;
    gap: 1px !important;
    background: rgba(8, 16, 26, 0.22) !important;
    border-color: rgba(178, 210, 236, 0.1) !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill,
  body[data-layout-mode="mobile"] .map-tools-overlay .legend-pill {
    min-height: 20px;
    padding: 2px 6px !important;
    font-size: 0.58rem !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill {
    background: rgba(18, 30, 45, 0.42) !important;
    border-color: rgba(188, 214, 238, 0.22) !important;
    color: rgba(229, 238, 249, 0.88) !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill.selected {
    background: rgba(88, 180, 255, 0.34) !important;
    border-color: rgba(155, 214, 255, 0.72) !important;
    color: #e9f7ff !important;
  }

  /* 2) Daily panel dock compression */
  body[data-layout-mode="mobile"] .mobile-daily-panel {
    bottom: calc(4px + env(safe-area-inset-bottom));
    border-radius: 17px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle {
    padding: 6px 12px 8px;
    min-height: 56px;
    gap: 5px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-grip {
    width: 46px;
    height: 4px;
    margin: 0 auto 1px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row {
    gap: 8px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row strong {
    font-size: 0.92rem;
    line-height: 1.08;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row span {
    font-size: 0.67rem;
    letter-spacing: 0.035em;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-body {
    padding: 0 10px 10px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-actions {
    gap: 5px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-actions .secondary-btn {
    min-height: 42px;
    font-size: 0.77rem;
    padding: 9px 7px;
  }

  /* 3) Lighter/shorter fog transition above dock */
  body[data-layout-mode="mobile"] .mobile-daily-panel::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc(100% + 3px);
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(40, 105, 172, 0.08), rgba(8, 18, 30, 0));
    pointer-events: none;
    filter: blur(4px);
    opacity: 0.72;
  }

  body[data-layout-mode="mobile"] #map {
    min-height: calc(100dvh - 144px - env(safe-area-inset-bottom));
  }
}


/* V53 — tactical surface refinement pass (mobile-only polish) */
@media (max-width: 760px) {
  body[data-layout-mode="mobile"] .map-tools-overlay {
    padding: 2px 3px;
    border-radius: 8px;
    background: rgba(7, 13, 22, 0.46) !important;
    border-color: rgba(168, 204, 236, 0.16) !important;
    box-shadow: 0 3px 8px rgba(2, 8, 16, 0.14) !important;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .map-tools-section { gap: 4px; }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-shell {
    padding: 1px !important;
    gap: 1px !important;
    background: rgba(8, 16, 26, 0.3) !important;
    border-color: rgba(178, 210, 236, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: background-color 180ms ease, border-color 180ms ease;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill,
  body[data-layout-mode="mobile"] .map-tools-overlay .legend-pill {
    min-height: 20px;
    padding: 2px 6px !important;
    line-height: 1.15;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill {
    background: rgba(20, 32, 48, 0.52) !important;
    border-color: rgba(188, 214, 238, 0.24) !important;
    color: rgba(235, 242, 250, 0.9) !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill:hover,
  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill:focus-visible {
    background: rgba(24, 39, 58, 0.6) !important;
    border-color: rgba(198, 221, 245, 0.34) !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill:active,
  body[data-layout-mode="mobile"] .map-tools-overlay .legend-pill:active {
    transform: translateY(0.5px);
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill.selected {
    background: rgba(96, 188, 255, 0.36) !important;
    border-color: rgba(164, 219, 255, 0.78) !important;
    color: #f2faff !important;
  }

  body[data-layout-mode="mobile"] #map .leaflet-control-zoom {
    margin-top: calc(var(--mobile-command-zone-top) + 38px) !important;
    border-radius: 9px;
    box-shadow: 0 3px 8px rgba(2, 8, 16, 0.14);
    background: rgba(7, 14, 24, 0.52) !important;
    transition: background-color 180ms ease, box-shadow 180ms ease;
  }

  body[data-layout-mode="mobile"] #map .leaflet-control-zoom a,
  body[data-layout-mode="mobile"] #map .leaflet-control-layers-toggle {
    width: 27px;
    height: 27px;
    line-height: 27px;
    background: rgba(7, 14, 24, 0.56) !important;
    border-color: rgba(170, 204, 236, 0.22) !important;
    transition: background-color 140ms ease, border-color 140ms ease;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel {
    transition: transform 210ms ease, opacity 180ms ease, box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle {
    align-items: center;
    min-height: 54px;
    padding: 6px 12px 8px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row {
    align-items: center;
    gap: 8px;
    line-height: 1;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row strong {
    line-height: 1.02;
    display: inline-flex;
    align-items: center;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row span {
    line-height: 1.05;
    display: inline-flex;
    align-items: center;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel::before {
    height: 12px;
    background: linear-gradient(180deg, rgba(58, 132, 205, 0.06), rgba(8, 18, 30, 0));
    opacity: 0.56;
    filter: blur(3px);
    transition: opacity 180ms ease;
  }

  body[data-layout-mode="mobile"] .mobile-native-surface-sheet,
  body[data-layout-mode="mobile"] .mobile-native-surface-layer {
    transition: opacity 180ms ease, transform 220ms ease, backdrop-filter 200ms ease;
  }
}

/* V54 — premium tactical calibration (mobile-only, no layout architecture changes) */
@media (max-width: 760px) {
  body[data-layout-mode="mobile"] .map-tools-overlay {
    padding: 2px 3px;
    border-radius: 10px;
    background: rgba(7, 13, 22, 0.4) !important;
    border-color: rgba(170, 205, 236, 0.14) !important;
    box-shadow: 0 2px 6px rgba(2, 8, 16, 0.12) !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-shell {
    background: rgba(8, 16, 26, 0.4) !important;
    border-color: rgba(186, 216, 238, 0.2) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill {
    background: rgba(20, 32, 48, 0.6) !important;
    border-color: rgba(194, 220, 241, 0.28) !important;
    color: rgba(238, 245, 252, 0.94) !important;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill.selected {
    background: rgba(104, 193, 255, 0.42) !important;
    border-color: rgba(178, 226, 255, 0.84) !important;
    color: #f5fbff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(120, 197, 255, 0.16);
  }

  body[data-layout-mode="mobile"] #map .leaflet-control-zoom {
    border-radius: 10px;
    box-shadow: 0 2px 7px rgba(2, 8, 16, 0.14);
    background: rgba(7, 14, 24, 0.46) !important;
  }

  body[data-layout-mode="mobile"] #map .leaflet-control-zoom a,
  body[data-layout-mode="mobile"] #map .leaflet-control-layers-toggle {
    background: rgba(7, 14, 24, 0.5) !important;
    border-color: rgba(172, 206, 237, 0.2) !important;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel {
    background: linear-gradient(180deg, rgba(8, 13, 22, 0.9), rgba(6, 11, 19, 0.94));
    border-color: rgba(166, 201, 233, 0.2);
    box-shadow: 0 6px 16px rgba(2, 8, 16, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-grip {
    background: linear-gradient(180deg, rgba(186, 216, 242, 0.72), rgba(148, 186, 218, 0.48));
    box-shadow: 0 0 0 1px rgba(179, 211, 239, 0.14), 0 2px 6px rgba(100, 158, 205, 0.12);
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row strong {
    letter-spacing: 0.005em;
    transform: translateY(-0.2px);
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row span {
    color: rgba(191, 208, 226, 0.8);
    letter-spacing: 0.03em;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel::before {
    left: 10px;
    right: 10px;
    bottom: calc(100% + 2px);
    height: 9px;
    background: linear-gradient(180deg, rgba(52, 118, 182, 0.05), rgba(8, 18, 30, 0));
    opacity: 0.44;
    filter: blur(2px);
  }

  body[data-layout-mode="mobile"] .mobile-live-command {
    border-color: rgba(151, 206, 255, 0.32);
    background: linear-gradient(145deg, rgba(8, 19, 33, 0.72), rgba(5, 12, 23, 0.78));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 20px rgba(3, 9, 22, 0.3), 0 0 24px rgba(45, 135, 255, 0.1);
  }
}

/* V55 — spatial calmness & dock integration pass (mobile-only, architecture untouched) */
@media (max-width: 760px) {
  body[data-layout-mode="mobile"] .mobile-daily-panel {
    bottom: calc(3px + env(safe-area-inset-bottom));
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(8, 13, 22, 0.84), rgba(6, 11, 19, 0.88));
    border-color: rgba(166, 201, 233, 0.16);
    box-shadow: 0 4px 12px rgba(2, 8, 16, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle {
    min-height: 52px;
    padding: 5px 11px 7px;
    gap: 4px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row {
    gap: 7px;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row strong {
    letter-spacing: 0.003em;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-handle-row span {
    color: rgba(191, 208, 226, 0.74);
    letter-spacing: 0.025em;
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel-grip {
    width: 42px;
    opacity: 0.84;
    box-shadow: 0 0 0 1px rgba(179, 211, 239, 0.1), 0 1px 4px rgba(100, 158, 205, 0.09);
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel::before {
    left: 14px;
    right: 14px;
    bottom: calc(100% + 1px);
    height: 6px;
    background: linear-gradient(180deg, rgba(48, 111, 171, 0.04), rgba(8, 18, 30, 0));
    opacity: 0.34;
    filter: blur(1.5px);
  }

  body[data-layout-mode="mobile"] .mobile-floating-action-dock {
    background: linear-gradient(145deg, rgba(9, 15, 25, 0.74), rgba(7, 13, 23, 0.78));
    border-color: rgba(170, 205, 236, 0.16);
    box-shadow: 0 8px 18px rgba(2, 9, 20, 0.24), 0 0 22px rgba(90, 164, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  body[data-layout-mode="mobile"] .map-frame {
    box-shadow: 0 24px 40px rgba(2, 8, 20, 0.44), inset 0 -28px 56px rgba(2, 14, 28, 0.22);
  }
}

/* V56 — spatial edge refinement (mobile-only, CSS polish only) */
@media (max-width: 760px) {
  body[data-layout-mode="mobile"] .mobile-live-command {
    padding: 9px 11px 10px;
    border-radius: 12px;
  }

  body[data-layout-mode="mobile"] .mobile-live-command strong {
    line-height: 1.08;
  }

  body[data-layout-mode="mobile"] .mobile-live-command p {
    margin-top: 2px;
    line-height: 1.26;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay {
    margin-top: 6px;
    padding: 2px;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-shell {
    gap: 3px;
    padding: 2px;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill,
  body[data-layout-mode="mobile"] .map-tools-overlay .legend-pill {
    min-height: 25px;
    padding: 4px 8px;
  }

  body[data-layout-mode="mobile"] #map .leaflet-control-zoom {
    margin-top: calc(var(--mobile-command-zone-top) + 28px) !important;
  }

  body[data-layout-mode="mobile"] #map .gridly-mobile-layer-menu {
    bottom: calc(108px + env(safe-area-inset-bottom));
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel::before {
    left: 16px;
    right: 16px;
    bottom: 100%;
    height: 4px;
    opacity: 0.22;
    filter: blur(1px);
    background: linear-gradient(180deg, rgba(66, 138, 206, 0.035), rgba(8, 18, 30, 0));
  }

  body[data-layout-mode="mobile"] .map-frame {
    box-shadow: 0 20px 34px rgba(2, 8, 20, 0.38), inset 0 -20px 40px rgba(2, 14, 28, 0.16);
  }
}

/* V57 — map dominance recovery (mobile-only, CSS-only) */
@media (max-width: 760px) {
  body[data-layout-mode="mobile"] .mobile-daily-panel::before {
    left: 18px;
    right: 18px;
    bottom: calc(100% + 1px);
    height: 2px;
    opacity: 0.12;
    filter: blur(0.8px);
    background: linear-gradient(180deg, rgba(66, 138, 206, 0.02), rgba(8, 18, 30, 0));
  }

  body[data-layout-mode="mobile"] .map-frame {
    box-shadow: 0 18px 30px rgba(2, 8, 20, 0.34), inset 0 -12px 26px rgba(2, 14, 28, 0.1);
  }
}

/* V71 — bottom clarity + local context restoration (mobile-only, map-first refinement) */
@media (max-width: 760px) {
  body[data-layout-mode="mobile"] {
    --mobile-bottom-safe: env(safe-area-inset-bottom, 0px);
    --mobile-daily-panel-gap: clamp(4px, 1.8vh, 10px);
    --mobile-daily-panel-offset: calc(var(--mobile-daily-panel-gap) + var(--mobile-bottom-safe));
    --mobile-context-gap: clamp(72px, 11vh, 96px);
    --mobile-daily-panel-pad-y: clamp(8px, 1.8vh, 12px);
    --mobile-daily-panel-pad-x: clamp(10px, 2.8vw, 14px);
    --mobile-daily-panel-action-gap: clamp(6px, 1.6vw, 10px);
    --mobile-daily-panel-btn-min-h: clamp(42px, 6.2vh, 48px);
    --mobile-surface-pad: clamp(10px, 2.8vw, 14px);
    --mobile-surface-max-h: min(70vh, 560px);
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel {
    bottom: var(--mobile-daily-panel-offset);
    background: #0b1320;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-layout-mode="mobile"] #mobileDailyPanel .mobile-daily-panel-handle {
    padding: var(--mobile-daily-panel-pad-y) var(--mobile-daily-panel-pad-x);
  }

  body[data-layout-mode="mobile"] #mobileDailyPanel .mobile-daily-panel-actions {
    gap: var(--mobile-daily-panel-action-gap);
  }

  body[data-layout-mode="mobile"] #mobileDailyPanel .mobile-daily-panel-actions .secondary-btn {
    min-height: var(--mobile-daily-panel-btn-min-h);
  }

  body[data-layout-mode="mobile"] .mobile-daily-panel::before {
    content: none;
  }

  body[data-layout-mode="mobile"] .mobile-local-context-strip {
    position: fixed;
    left: clamp(10px, 3.4vw, 14px);
    right: clamp(10px, 3.4vw, 14px);
    bottom: calc(var(--mobile-daily-panel-offset) + var(--mobile-context-gap));
    z-index: 780;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 2vw, 12px);
    padding: clamp(5px, 1.4vh, 8px) clamp(8px, 2.2vw, 11px);
    border-radius: 9px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }

  body[data-layout-mode="mobile"] .mobile-local-context-label {
    font-size: 0.62rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(183, 207, 228, 0.72);
  }

  body[data-layout-mode="mobile"] .mobile-local-context-value {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: rgba(233, 244, 255, 0.94);
    font-weight: 600;
    text-align: right;
  }

  body[data-layout-mode="mobile"] .map-frame {
    box-shadow: 0 16px 26px rgba(2, 8, 20, 0.28);
  }
}

body[data-layout-mode="desktop"] .mobile-local-context-strip {
  display: none !important;
}


@media (max-width: 760px),
       (max-height: 520px) and (orientation: landscape) {
  body[data-layout-mode="mobile"][data-mobile-mode="live"] #reportSection,
  body[data-layout-mode="mobile"][data-mobile-mode="live"] #mobileReportModeCard {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body[data-layout-mode="mobile"][data-mobile-mode="report"] #reportSection,
  body[data-layout-mode="mobile"][data-mobile-mode="report"] #mobileReportModeCard {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* V74 — compressed tactical mode (mobile-only, CSS-surgical) */
@media (max-width: 760px) and (max-height: 620px),
       (max-height: 620px) and (orientation: landscape) {
  body[data-layout-mode="mobile"] {
    --mobile-daily-panel-gap: clamp(3px, 1.2vh, 8px);
    --mobile-context-gap: clamp(56px, 8.6vh, 74px);
    --mobile-daily-panel-pad-y: clamp(6px, 1.2vh, 9px);
    --mobile-daily-panel-pad-x: clamp(9px, 2.4vw, 12px);
    --mobile-daily-panel-action-gap: clamp(5px, 1.3vw, 8px);
    --mobile-daily-panel-btn-min-h: clamp(40px, 5.4vh, 44px);
    --mobile-surface-pad: clamp(8px, 2vw, 11px);
    --mobile-surface-max-h: min(64vh, 420px);
  }

  body[data-layout-mode="mobile"] #mobileDailyPanel {
    max-height: min(34vh, 176px);
  }

  body[data-layout-mode="mobile"] #mobileDailyPanel .mobile-daily-panel-handle-row {
    gap: 5px;
  }

  body[data-layout-mode="mobile"] #mobileDailyPanel .mobile-daily-panel-note {
    margin-top: 4px;
    font-size: 0.68rem;
  }

  body[data-layout-mode="mobile"] #mobileLocalContextStrip {
    left: 10px;
    right: 10px;
    padding: 4px 8px;
    gap: 5px;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  body[data-layout-mode="mobile"] #mobileLocalContextStrip .mobile-local-context-label {
    font-size: 0.56rem;
  }

  body[data-layout-mode="mobile"] #mobileLocalContextStrip .mobile-local-context-value {
    font-size: 0.71rem;
  }

  body[data-layout-mode="mobile"] #mobileNativeSurfaceLayer,
  body[data-layout-mode="mobile"] #mobileNativeSurfaceBody,
  body[data-layout-mode="mobile"] #reportSection,
  body[data-layout-mode="mobile"] #mobileReportModeCard,
  body[data-layout-mode="mobile"] .gridly-mobile-route-quick-panel,
  body[data-layout-mode="mobile"] .route-setup-modal-card,
  body[data-layout-mode="mobile"] .smart-alerts-modal,
  body[data-layout-mode="mobile"] .mobile-native-surface-sheet {
    max-height: var(--mobile-surface-max-h) !important;
    overflow-y: auto !important;
    padding: var(--mobile-surface-pad);
  }

  body[data-layout-mode="mobile"] .map-tools-overlay { gap: 5px; }
  body[data-layout-mode="mobile"] .map-tools-overlay .map-tools-section { gap: 3px; }
  body[data-layout-mode="mobile"] #map .leaflet-control-zoom a,
  body[data-layout-mode="mobile"] #map .leaflet-control-layers-toggle { width: 34px; height: 34px; }

  body[data-layout-mode="mobile"] .app-header { padding-top: 4px; padding-bottom: 4px; }
  body[data-layout-mode="mobile"] .mobile-live-brand,
  body[data-layout-mode="mobile"] .mobile-live-command { row-gap: 4px; }
  body[data-layout-mode="mobile"] .mobile-live-command p,
  body[data-layout-mode="mobile"] .mobile-live-brand-status span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 760px) and (max-height: 520px),
       (max-width: 760px) and (orientation: landscape),
       (max-height: 520px) and (orientation: landscape) {
  body[data-layout-mode="mobile"] {
    --mobile-context-gap: 46px;
    --mobile-daily-panel-pad-y: 4px;
    --mobile-daily-panel-pad-x: 8px;
    --mobile-daily-panel-action-gap: 4px;
    --mobile-daily-panel-btn-min-h: 38px;
    --mobile-surface-pad: 8px;
    --mobile-surface-max-h: min(58vh, 320px);
  }

  body[data-layout-mode="mobile"] #mobileDailyPanel {
    max-height: 108px;
    overflow: hidden;
    border-radius: 10px;
  }

  body[data-layout-mode="mobile"] #mobileDailyPanel .mobile-daily-panel-handle {
    min-height: 34px;
  }

  body[data-layout-mode="mobile"] #mobileDailyPanel .mobile-daily-panel-handle-row span,
  body[data-layout-mode="mobile"] #mobileDailyPanel .mobile-daily-panel-note,
  body[data-layout-mode="mobile"] #mobileDailyPanel .mobile-daily-panel-grip {
    display: none;
  }

  body[data-layout-mode="mobile"] #mobileDailyPanel .mobile-daily-panel-actions .secondary-btn,
  body[data-layout-mode="mobile"] .mobile-dock-btn {
    min-height: var(--mobile-daily-panel-btn-min-h);
    padding: 5px 8px;
    font-size: 0.7rem;
  }

  body[data-layout-mode="mobile"] #mobileNativeSurfaceLayer,
  body[data-layout-mode="mobile"] #mobileNativeSurfaceBody,
  body[data-layout-mode="mobile"] #reportSection,
  body[data-layout-mode="mobile"] #mobileReportModeCard,
  body[data-layout-mode="mobile"] .gridly-mobile-route-quick-panel,
  body[data-layout-mode="mobile"] .route-setup-modal-card,
  body[data-layout-mode="mobile"] .smart-alerts-modal,
  body[data-layout-mode="mobile"] .mobile-native-surface-sheet {
    max-height: var(--mobile-surface-max-h) !important;
    overflow-y: auto !important;
    padding: var(--mobile-surface-pad);
  }

  body[data-layout-mode="mobile"] .mobile-floating-action-dock {
    gap: 4px;
    padding: 3px 5px;
  }

  body[data-layout-mode="mobile"] .map-tools-overlay { gap: 4px; }
  body[data-layout-mode="mobile"] .map-tools-overlay .map-view-label,
  body[data-layout-mode="mobile"] .map-tools-overlay .map-tools-section-label,
  body[data-layout-mode="mobile"] .map-tools-overlay .map-tools-status { display: none; }
  /* V74 phase 6: landscape survival cleanup for gray slab + left-edge artifact */
  body[data-layout-mode="mobile"] .map-tools-overlay {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-shell {
    padding: 1px 2px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body[data-layout-mode="mobile"] .map-tools-overlay .geo-filter-pill {
    min-height: 24px;
    padding: 3px 7px !important;
    font-size: 0.64rem !important;
  }
  body[data-layout-mode="mobile"] #map .leaflet-left {
    display: none !important;
  }
  body[data-layout-mode="mobile"] #mobileDailyPanel {
    max-height: 96px;
    border-radius: 10px;
  }
  body[data-layout-mode="mobile"] #mobileDailyPanel .mobile-daily-panel-handle {
    min-height: 30px;
    padding: 4px 8px 5px;
  }
  body[data-layout-mode="mobile"] #mobileDailyPanel .mobile-daily-panel-actions .secondary-btn {
    min-height: 34px;
    padding: 4px 7px;
    font-size: 0.66rem;
  }

  body[data-layout-mode="mobile"] .app-header { padding-top: 2px; padding-bottom: 2px; }

  /* V74 phase 3: decommission legacy hybrid shells in short-height landscape survival */
  body[data-layout-mode="mobile"] .mobile-bottom-nav,
  body[data-layout-mode="mobile"] #mobileReportBtn.mobile-sticky-report,
  body[data-layout-mode="mobile"] #gridlyHazardLauncher.gridly-hazard-launcher,
  body[data-layout-mode="mobile"] .mobile-premium-header,
  body[data-layout-mode="mobile"] .mobile-home-cards,
  body[data-layout-mode="mobile"] .destination-hero-card,
  body[data-layout-mode="mobile"] .future-map-hero,
  body[data-layout-mode="mobile"] .driver-hero,
  body[data-layout-mode="mobile"] .mobile-live-brand,
  body[data-layout-mode="mobile"] .mobile-live-brand-main,
  body[data-layout-mode="mobile"] .mobile-live-brand-logo {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* V80 — tactical system alignment pass (mobile landscape <=520px) */
@media (orientation: landscape) and (max-height: 520px) {
  /* V80 authoritative short-height landscape tactical contract.
     This block intentionally overrides legacy V74/V7x landscape fragments. */
  body[data-layout-mode="tactical-landscape"] {
    --mobile-command-zone-top: calc(var(--mobile-brand-top, env(safe-area-inset-top, 0px) + 3px) + var(--mobile-brand-height, 30px) + 4px);
    --mobile-landscape-bottom-band-height: clamp(46px, 12.2vh, 54px);
    --mobile-landscape-dock-space: calc(var(--mobile-landscape-bottom-band-height) + env(safe-area-inset-bottom, 0px));
    --mobile-landscape-context-gap: clamp(4px, 1.1vh, 7px);
    --mobile-landscape-context-bottom: calc(var(--mobile-landscape-dock-space) + var(--mobile-landscape-context-gap));
  }

  body[data-layout-mode="tactical-landscape"] .mobile-live-command {
    top: calc(var(--mobile-command-zone-top) + 1px);
    left: calc(env(safe-area-inset-left, 0px) + 8px);
    right: calc(env(safe-area-inset-right, 0px) + 8px);
    max-width: none;
    width: auto;
    padding: 2px 8px 3px;
    border-radius: 7px;
    border: 1px solid rgba(168, 209, 240, 0.06);
    background: linear-gradient(148deg, rgba(8, 16, 28, 0.26), rgba(6, 12, 22, 0.3));
    box-shadow: 0 1px 4px rgba(2, 8, 19, 0.07), 0 0 0 1px rgba(52, 126, 182, 0.025);
    backdrop-filter: blur(2px) saturate(103%);
    -webkit-backdrop-filter: blur(2px) saturate(103%);
    row-gap: 0;
  }

  body[data-layout-mode="tactical-landscape"] .mobile-live-command .eyebrow {
    margin-bottom: 0;
    font-size: 0.46rem;
    letter-spacing: 0.1em;
    line-height: 1;
  }

  body[data-layout-mode="tactical-landscape"] .mobile-live-status-pill {
    padding: 1px 5px;
    font-size: 0.45rem;
    line-height: 1;
    border-width: 1px;
    margin-left: 1px;
    box-shadow: inset 0 1px 0 rgba(227, 242, 255, 0.08);
  }

  body[data-layout-mode="tactical-landscape"] .mobile-live-command strong {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: clamp(0.72rem, 1.44vw, 0.8rem);
    line-height: 1.02;
    letter-spacing: 0.004em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
  }

  body[data-layout-mode="tactical-landscape"] .mobile-live-command p {
    display: none;
    margin-top: 0;
    font-size: 0.6rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media (max-height: 400px) {
    body[data-layout-mode="tactical-landscape"] .mobile-live-command .eyebrow {
      display: none;
    }
  }

  body[data-layout-mode="tactical-landscape"] .mobile-live-command .compact-btn,
  body[data-layout-mode="tactical-landscape"] #mobileLiveRouteActionBtn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-layout-mode="tactical-landscape"] .mobile-floating-action-dock {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(90.5vw, 392px) !important;
    max-width: 392px !important;
    min-height: 33px;
    gap: 3px;
    padding: 2px 3px;
    border-radius: 10px;
    border: 1px solid rgba(168, 203, 232, 0.07);
    background: rgba(8, 14, 24, 0.56);
    box-shadow: 0 2px 5px rgba(2, 9, 20, 0.09);
    backdrop-filter: blur(4px) saturate(106%);
    -webkit-backdrop-filter: blur(4px) saturate(106%);
    overflow: hidden;
    box-sizing: border-box;
    z-index: 1200;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3px) !important;
  }

  body[data-layout-mode="tactical-landscape"] .mobile-floating-action-dock::before,
  body[data-layout-mode="tactical-landscape"] .mobile-floating-action-dock::after {
    content: none !important;
  }

  body[data-layout-mode="tactical-landscape"] .mobile-dock-btn,
  body[data-layout-mode="tactical-landscape"] .mobile-dock-btn.report,
  body[data-layout-mode="tactical-landscape"] .mobile-dock-btn.route,
  body[data-layout-mode="tactical-landscape"] .mobile-dock-btn.alerts,
  body[data-layout-mode="tactical-landscape"] .mobile-dock-btn.layers,
  body[data-layout-mode="tactical-landscape"] .mobile-dock-btn[data-mode],
  body[data-layout-mode="tactical-landscape"] .mobile-floating-action-dock .mobile-dock-btn:nth-child(n) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 2px 5px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(175, 212, 244, 0.1) !important;
    background: rgba(14, 24, 38, 0.62) !important;
    color: rgba(220, 237, 252, 0.93) !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.028em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: inset 0 1px 0 rgba(233, 246, 255, 0.02) !important;
    filter: none !important;
    opacity: 1 !important;
  }

  body[data-layout-mode="tactical-landscape"] .mobile-dock-btn.active,
  body[data-layout-mode="tactical-landscape"] .mobile-dock-btn:focus-visible {
    border-color: rgba(131, 206, 255, 0.5) !important;
    box-shadow: inset 0 0 0 1px rgba(199, 234, 255, 0.14), 0 0 0 1px rgba(73, 170, 235, 0.14), 0 0 5px rgba(87, 186, 255, 0.08) !important;
    outline: none !important;
  }

  body[data-layout-mode="tactical-landscape"] .mobile-dock-btn:active {
    transform: translateY(1px) !important;
  }

  body[data-layout-mode="tactical-landscape"] #mobileDockLayersBtn,
  body[data-layout-mode="tactical-landscape"] .mobile-dock-btn.layers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  body[data-layout-mode="tactical-landscape"] #mobileDailyPanel,
  body[data-layout-mode="tactical-landscape"] .mobile-daily-panel,
  body[data-layout-mode="tactical-landscape"] .mobile-daily-panel-body,
  body[data-layout-mode="tactical-landscape"] .mobile-daily-panel-handle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-layout-mode="tactical-landscape"] #mobileLocalContextStrip,
  body[data-layout-mode="tactical-landscape"] .mobile-local-context-strip,
  body[data-layout-mode="tactical-landscape"] [id*="LocalContextStrip"],
  body[data-layout-mode="tactical-landscape"] [class*="local-context-strip"],
  body[data-layout-mode="tactical-landscape"] [data-mobile-local-context],
  body[data-layout-mode="tactical-landscape"] [data-context-strip] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body[data-layout-mode="tactical-landscape"] #mobileLocalContextStrip .mobile-local-context-label {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    color: rgba(188, 217, 241, 0.9);
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
  }

  body[data-layout-mode="tactical-landscape"] #mobileLocalContextStrip .mobile-local-context-value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 650;
    color: rgba(236, 246, 255, 0.98);
    text-shadow: 0 1px 1px rgba(2, 10, 20, 0.32);
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-layout-mode="tactical-landscape"] .mobile-home-cards,
  body[data-layout-mode="tactical-landscape"] .mobile-community-card,
  body[data-layout-mode="tactical-landscape"] .community-tools,
  body[data-layout-mode="tactical-landscape"] #gridlyCommunityToolsCard,
  body[data-layout-mode="tactical-landscape"] .mobile-promo-card,
  body[data-layout-mode="tactical-landscape"] .mobile-onboarding-card,
  body[data-layout-mode="tactical-landscape"] .app-footer {
    display: none !important;
  }

  body[data-layout-mode="tactical-landscape"] .mobile-map-floating-chips,
  body[data-layout-mode="tactical-landscape"] #map .gridly-mobile-layer-menu,
  body[data-layout-mode="tactical-landscape"] #map .gridly-mobile-layer-menu-toggle,
  body[data-layout-mode="tactical-landscape"] #map .gridly-mobile-layer-menu-list {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-layout-mode="tactical-landscape"] #map .leaflet-left { display: none !important; }
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay,
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay .geo-filter-shell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* V86B: suppress landscape geo filter pill rows in tactical mobile layout. */
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay .geo-filter-shell,
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay .geo-filter-status,
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay .geo-filter-pill,
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay .mobile-geo-filter,
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay .geo-filter,
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay .map-filter,
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay .filter-pill,
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay [class*="geo-filter-pill"],
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay [class*="mobile-geo-filter"],
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay [class*="map-filter"],
  body[data-layout-mode="tactical-landscape"] .map-tools-overlay [class*="filter-pill"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body[data-layout-mode="tactical-landscape"] #map .leaflet-right {
    right: max(8px, env(safe-area-inset-right, 0px));
  }
  body[data-layout-mode="tactical-landscape"] #map .leaflet-bottom.leaflet-right {
    bottom: calc(var(--mobile-landscape-context-bottom) + 24px);
  }
  body[data-layout-mode="tactical-landscape"] #map .leaflet-control-zoom {
    margin: 0 !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(2, 9, 20, 0.1);
  }

  body[data-layout-mode="tactical-landscape"] .map-card,
  body[data-layout-mode="tactical-landscape"] .map-frame,
  body[data-layout-mode="tactical-landscape"] #map {
    height: calc(100dvh - var(--mobile-landscape-dock-space) + 6px);
    min-height: calc(100dvh - var(--mobile-landscape-dock-space) + 6px);
    max-height: calc(100dvh - var(--mobile-landscape-dock-space) + 6px);
  }

  body[data-layout-mode="tactical-landscape"] .map-frame,
  body[data-layout-mode="tactical-landscape"] .map-card {
    border-radius: 12px !important;
    overflow: clip;
    box-shadow: 0 5px 13px rgba(2, 8, 20, 0.16) !important;
  }

  body[data-layout-mode="tactical-landscape"] #map {
    border-radius: 12px !important;
  }

  body[data-layout-mode="tactical-landscape"] .map-frame::before,
  body[data-layout-mode="tactical-landscape"] .map-frame::after,
  body[data-layout-mode="tactical-landscape"] .map-card::before,
  body[data-layout-mode="tactical-landscape"] .map-card::after {
    content: none !important;
  }

  body[data-layout-mode="tactical-landscape"] .gridly-hazard-panel {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    width: min(460px, calc(100vw - max(20px, calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 20px)))) !important;
    max-width: calc(100vw - max(20px, calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 20px))) !important;
    margin-inline: auto !important;
    transform: none !important;
    bottom: 74px !important;
    max-height: calc(var(--gridly-visual-vh, 100vh) - 94px) !important;
    z-index: 10030 !important;
  }

  body[data-layout-mode="tactical-landscape"] .gridly-hazard-panel:not(.visible) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-layout-mode="tactical-landscape"] .gridly-tactical-dock-sheet {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 74px;
    max-height: calc(var(--gridly-visual-vh, 100vh) - 94px);
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(166, 205, 248, 0.28);
    background: rgba(7, 17, 30, 0.97);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.36);
    z-index: 10031;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-dock-sheet[hidden],
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-dock-sheet:not([data-action]),
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-dock-sheet[data-action=""] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-dock-sheet-head {
    display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 8px;
  }
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-dock-sheet-head strong { color: #e8f2ff; font-size: .86rem; }
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-dock-sheet-head button {
    border: 0; background: transparent; color: #d4e4f9; font-size: 1.2rem; line-height: 1; cursor: pointer;
  }
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-dock-sheet-body { overflow: auto; padding: 0 12px 12px; }
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-option-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-option-grid button,
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-sheet-actions button {
    border: 1px solid rgba(137, 184, 233, 0.35); border-radius: 10px; padding: 9px 10px; background: rgba(13, 28, 47, 0.86); color: #ebf5ff; font-weight: 700;
  }
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-alert-list { display: grid; gap: 8px; max-height: 160px; overflow: auto; }
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-alert-row { border: 1px solid rgba(134, 176, 221, 0.22); border-radius: 10px; padding: 8px 9px; background: rgba(9, 22, 37, 0.72); }
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-alert-row strong { display: block; font-size: .8rem; color: #ebf4ff; }
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-alert-row p { margin: 4px 0 0; font-size: .74rem; color: #b9cde4; }
  body[data-layout-mode="tactical-landscape"] .gridly-tactical-sheet-actions { margin-top: 10px; }
}

/* V97 — strict surface visibility ownership cleanup */
/* Shared helpers: explicit ownership guards to prevent cross-mode leakage. */
body[data-layout-mode="desktop"] .mobile-floating-action-dock,
body[data-layout-mode="desktop"] .mobile-bottom-nav,
body[data-layout-mode="desktop"] .mobile-native-surface-layer,
body[data-layout-mode="desktop"] #mobileDailyPanel,
body[data-layout-mode="desktop"] #mobileLocalContextStrip,
body[data-layout-mode="desktop"] .gridly-tactical-dock-sheet {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* V100 — explicit logo/header ownership by authoritative layout mode. */
body[data-layout-mode="desktop"] .mobile-live-brand,
body[data-layout-mode="desktop"] .mobile-live-brand-main,
body[data-layout-mode="desktop"] .mobile-live-brand-logo {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-layout-mode="portrait"] .app-header,
body[data-layout-mode="tactical-landscape"] .app-header {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-layout-mode="portrait"] .mobile-live-brand,
body[data-layout-mode="tactical-landscape"] .mobile-live-brand {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* V100 — scope logo image containment to live mobile brand only. */
body[data-layout-mode="portrait"] .mobile-live-brand-logo img,
body[data-layout-mode="tactical-landscape"] .mobile-live-brand-logo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

/* Desktop-only surfaces: keep desktop command/report/map areas visible in desktop mode. */
body[data-layout-mode="desktop"] .desktop-left-rail,
body[data-layout-mode="desktop"] .desktop-command-strip,
body[data-layout-mode="desktop"] .desktop-route-setup,
body[data-layout-mode="desktop"] .desktop-insights,
body[data-layout-mode="desktop"] .desktop-route-watch-strip,
body[data-layout-mode="desktop"] .desktop-command-panel,
body[data-layout-mode="desktop"] .desktop-business-note {
  display: revert !important;
  visibility: visible !important;
}

/* Portrait-only surfaces: preserve current portrait shell and hide desktop-only lower sections. */
body[data-layout-mode="portrait"] .mobile-bottom-nav,
body[data-layout-mode="portrait"] #mobileDailyPanel,
body[data-layout-mode="portrait"] #mobileLocalContextStrip,
body[data-layout-mode="portrait"] .mobile-native-surface-layer {
  display: revert !important;
  visibility: visible !important;
}

body[data-layout-mode="portrait"] .desktop-left-rail,
body[data-layout-mode="portrait"] .desktop-business-note {
  display: none !important;
  visibility: hidden !important;
}


body[data-layout-mode="tactical-landscape"] {
  overflow: hidden !important;
  height: 100dvh;
}

body[data-layout-mode="tactical-landscape"] .app-shell,
body[data-layout-mode="tactical-landscape"] .command-center {
  max-height: 100dvh;
  overflow: hidden !important;
}

/* Tactical-landscape-only surfaces: show tactical dock/map shell, suppress portrait/desktop lower sections. */
body[data-layout-mode="tactical-landscape"] .mobile-floating-action-dock,
body[data-layout-mode="tactical-landscape"] .map-card,
body[data-layout-mode="tactical-landscape"] .map-frame,
body[data-layout-mode="tactical-landscape"] #map {
  visibility: visible !important;
  opacity: 1 !important;
}

body[data-layout-mode="tactical-landscape"] .mobile-bottom-nav,
body[data-layout-mode="tactical-landscape"] .desktop-command-strip,
body[data-layout-mode="tactical-landscape"] .desktop-route-setup,
body[data-layout-mode="tactical-landscape"] .desktop-insights,
body[data-layout-mode="tactical-landscape"] .desktop-route-watch-strip,
body[data-layout-mode="tactical-landscape"] .desktop-business-note,
body[data-layout-mode="tactical-landscape"] .desktop-command-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* CTA ownership: keep the floating report launcher mode-scoped. */
body[data-layout-mode="desktop"] #gridlyHazardLauncher.gridly-hazard-launcher {
  position: fixed;
}

body[data-layout-mode="tactical-landscape"] #gridlyHazardLauncher.gridly-hazard-launcher {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* GRIDLY V101 stabilization: tactical-landscape must always render real map surface. */
body[data-layout-mode="tactical-landscape"] .future-map-hero,
body[data-layout-mode="tactical-landscape"] .driver-hero {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* GRIDLY V102 — when real tactical map is active, suppress oversized fallback/hero surfaces above it. */
body[data-layout-mode="tactical-landscape"][data-tactical-map-active="true"] .mobile-native-surface-layer,
body[data-layout-mode="tactical-landscape"][data-tactical-map-active] .future-map-hero,
body[data-layout-mode="tactical-landscape"][data-tactical-map-active] .driver-hero,
body[data-layout-mode="tactical-landscape"][data-tactical-map-active] .destination-hero-card,
body[data-layout-mode="tactical-landscape"][data-tactical-map-active] .mobile-home-cards {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-layout-mode="tactical-landscape"] .map-card,
body[data-layout-mode="tactical-landscape"] .map-frame,
body[data-layout-mode="tactical-landscape"] #map {
  display: block !important;
  visibility: visible !important;
  min-height: max(248px, calc(var(--gridly-visual-vh, 100vh) - 120px));
  height: auto;
}


body[data-layout-mode="tactical-landscape"] .map-card {
  margin-top: 0 !important;
}


/* GRIDLY V107 — tactical landscape map-first enforcement across wide landscape widths. */
body[data-layout-mode="tactical-landscape"] .mobile-live-brand {
  top: calc(env(safe-area-inset-top, 0px) + 2px) !important;
  height: clamp(22px, 5.2vh, 27px) !important;
  min-height: clamp(22px, 5.2vh, 27px) !important;
  max-height: clamp(22px, 5.2vh, 27px) !important;
  padding: 1px 5px !important;
  border-radius: 6px !important;
  gap: 3px !important;
}

body[data-layout-mode="tactical-landscape"] .mobile-live-brand,
body[data-layout-mode="tactical-landscape"] .mobile-live-brand-main,
body[data-layout-mode="tactical-landscape"] .mobile-live-brand-logo,
body[data-layout-mode="tactical-landscape"] .brand-logo-frame {
  flex-grow: 0 !important;
  flex-shrink: 1 !important;
}

body[data-layout-mode="tactical-landscape"] .mobile-live-brand-main {
  gap: 2px !important;
  min-width: 0 !important;
}

body[data-layout-mode="tactical-landscape"] .mobile-live-brand-logo,
body[data-layout-mode="tactical-landscape"] .brand-logo-frame {
  width: clamp(72px, 15.6vw, 92px) !important;
  height: clamp(12px, 2.5vh, 14px) !important;
  max-height: clamp(12px, 2.5vh, 14px) !important;
  overflow: hidden !important;
}

body[data-layout-mode="tactical-landscape"] .mobile-live-brand-logo img,
body[data-layout-mode="tactical-landscape"] .brand-logo-img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

body[data-layout-mode="tactical-landscape"] .mobile-live-brand-status {
  min-width: 56px !important;
  max-width: 50% !important;
  font-size: clamp(0.48rem, 0.96vw, 0.56rem) !important;
  line-height: 1.05 !important;
  opacity: 0.58 !important;
}

body[data-layout-mode="tactical-landscape"] #mapSection,
body[data-layout-mode="tactical-landscape"] .map-card {
  min-height: 0 !important;
  height: auto !important;
  flex: 1 1 auto !important;
}

body[data-layout-mode="tactical-landscape"] .map-frame {
  min-height: max(224px, calc(var(--gridly-visual-vh, 100vh) - 84px)) !important;
  height: max(224px, calc(var(--gridly-visual-vh, 100vh) - 84px)) !important;
  max-height: max(224px, calc(var(--gridly-visual-vh, 100vh) - 84px)) !important;
  padding-top: clamp(26px, 5.6vh, 32px) !important;
}

body[data-layout-mode="tactical-landscape"] #map {
  min-height: max(224px, calc(var(--gridly-visual-vh, 100vh) - 84px)) !important;
  height: 100% !important;
  max-height: none !important;
}

/* GRIDLY V111 — tactical landscape viewport-fit correction (CSS-only) */
body[data-layout-mode="tactical-landscape"] {
  --gridly-tactical-top-shell: clamp(50px, 13.3vh, 58px);
  --gridly-tactical-dock-band: clamp(38px, 9.5vh, 44px);
  --gridly-tactical-shell-gap: clamp(3px, 0.9vh, 6px);
  --gridly-tactical-map-max: calc(var(--gridly-visual-vh, 100vh) - var(--gridly-tactical-top-shell) - var(--gridly-tactical-dock-band) - var(--gridly-tactical-shell-gap));
}

body[data-layout-mode="tactical-landscape"] .mobile-live-brand,
body[data-layout-mode="tactical-landscape"] .mobile-live-command {
  width: min(88vw, 760px) !important;
  max-width: min(88vw, 760px) !important;
  margin-inline: auto !important;
}

body[data-layout-mode="tactical-landscape"] .mobile-live-brand {
  padding: 0 4px !important;
  border-radius: 5px !important;
  box-shadow: 0 1px 3px rgba(2, 8, 19, 0.1) !important;
}

body[data-layout-mode="tactical-landscape"] .mobile-live-command {
  top: calc(var(--mobile-command-zone-top) - 1px) !important;
  padding: 1px 6px 1px !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(2, 8, 19, 0.08) !important;
}

body[data-layout-mode="tactical-landscape"] .mobile-live-brand-status {
  opacity: 0.38 !important;
  letter-spacing: 0.01em !important;
}

body[data-layout-mode="tactical-landscape"] .mobile-live-brand-status strong {
  font-size: clamp(0.42rem, 0.74vw, 0.5rem) !important;
  line-height: 1.1 !important;
}

body[data-layout-mode="tactical-landscape"] .mobile-live-brand-status span {
  font-size: clamp(0.46rem, 0.8vw, 0.54rem) !important;
  line-height: 1.08 !important;
}

body[data-layout-mode="tactical-landscape"] #mapSection,
body[data-layout-mode="tactical-landscape"] .map-card {
  min-height: 0 !important;
  max-height: var(--gridly-tactical-map-max) !important;
}

body[data-layout-mode="tactical-landscape"] .map-frame {
  min-height: clamp(214px, var(--gridly-tactical-map-max), 338px) !important;
  height: clamp(214px, var(--gridly-tactical-map-max), 338px) !important;
  max-height: clamp(214px, var(--gridly-tactical-map-max), 338px) !important;
  padding-top: clamp(22px, 4.6vh, 27px) !important;
}

body[data-layout-mode="tactical-landscape"] #map {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

body[data-layout-mode="tactical-landscape"] .mobile-floating-action-dock {
  width: min(88.5vw, 372px) !important;
  max-width: 372px !important;
  min-height: 31px !important;
  padding: 1px 3px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 2px) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(8, 12, 18, 0.64) !important;
  backdrop-filter: blur(9px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(112%) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18) !important;
}

body[data-layout-mode="tactical-landscape"] #map .leaflet-control-attribution {
  margin: 0 0 calc(var(--gridly-tactical-dock-band) + 7px) 0 !important;
  opacity: 0.74 !important;
}

/* TODO: Tactical landscape temporarily gated until future dedicated rebuild. */
body[data-layout-mode="tactical-landscape"] {
  overflow: hidden;
  min-height: 100vh;
  background: #00030c;
}

.tactical-landscape-gate {
  display: none;
}

body[data-layout-mode="tactical-landscape"] > :not(.tactical-landscape-gate):not(script):not(style),
body[data-layout-mode="tactical-landscape"] .app-header,
body[data-layout-mode="tactical-landscape"] .app-shell,
body[data-layout-mode="tactical-landscape"] #gridlySearchShell,
body[data-layout-mode="tactical-landscape"] #gridlyHazardLauncher,
body[data-layout-mode="tactical-landscape"] #gridlyHazardCounter,
body[data-layout-mode="tactical-landscape"] #gridlyHazardPanel,
body[data-layout-mode="tactical-landscape"] .gridly-hazard-launcher,
body[data-layout-mode="tactical-landscape"] .gridly-hazard-counter,
body[data-layout-mode="tactical-landscape"] .gridly-hazard-panel,
body[data-layout-mode="tactical-landscape"] .leaflet-control-container,
body[data-layout-mode="tactical-landscape"] .route-setup-modal,
body[data-layout-mode="tactical-landscape"] .smart-alerts-modal,
body[data-layout-mode="tactical-landscape"] .settings-modal,
body[data-layout-mode="tactical-landscape"] .place-name-modal,
body[data-layout-mode="tactical-landscape"] #routeSetupModal,
body[data-layout-mode="tactical-landscape"] #smartAlertsModal,
body[data-layout-mode="tactical-landscape"] #settingsModal,
body[data-layout-mode="tactical-landscape"] #firstRunSetupModal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-layout-mode="tactical-landscape"] .tactical-landscape-gate {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100vw;
  min-height: 100vh;
  padding: 0;
  background: #00030c;
}

body[data-layout-mode="tactical-landscape"] .tactical-landscape-gate-shell {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body[data-layout-mode="tactical-landscape"] .tactical-landscape-gate-board-image {
  display: block;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}


body[data-layout-mode="portrait"].route-quick-panel-open .mobile-live-command {
  display: none !important;
}

/* V122.5v - separate destination command from live commute status */
.mobile-destination-command {
  display: none;
}

body[data-layout-mode="portrait"] .mobile-destination-command[hidden],
body.gridly-crossing-popup-session-active[data-layout-mode="portrait"] .mobile-destination-command,
body.gridly-crossing-popup-visible[data-layout-mode="portrait"] .mobile-destination-command {
  display: none !important;
  pointer-events: none !important;
}

body[data-layout-mode="portrait"] .mobile-destination-command {
  display: grid;
  position: relative;
  z-index: 3;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(131, 197, 255, 0.34);
  background: linear-gradient(145deg, rgba(18, 40, 66, 0.82), rgba(8, 14, 24, 0.94));
}

body[data-layout-mode="portrait"] .mobile-live-command {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 2;
  margin: 0 0 10px;
}

/* V122.5z - portrait live commute card is status-only (no route launcher CTA) */
body[data-layout-mode="portrait"] #mobileLiveRouteActionBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-layout-mode="portrait"] .mobile-destination-command-copy {
  display: grid;
  gap: 4px;
}

body[data-layout-mode="portrait"] .mobile-destination-command strong {
  font-size: 1.02rem;
}

body[data-layout-mode="portrait"] .mobile-destination-command p {
  margin: 0;
  font-size: 0.82rem;
  color: #d5e8ff;
}

body[data-layout-mode="portrait"] .mobile-destination-command .destination-route-impact-line {
  min-height: 18px;
  color: rgba(186, 230, 253, 0.9);
  font-size: 0.76rem;
  line-height: 1.18;
  white-space: pre-line;
}

body[data-layout-mode="portrait"] .mobile-destination-command .destination-route-impact-line:empty {
  display: none;
}

body[data-layout-mode="tactical-landscape"] .mobile-destination-command {
  display: none;
}

/* V122.6a — keep zoom controls visible above map overlays */
@media (max-width: 760px) {
  body[data-layout-mode="mobile"] #map .leaflet-control-zoom {
    z-index: 10090 !important;
    margin-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* V122.6b — portrait zoom controls must clear the bottom dock */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #map .leaflet-control-zoom {
    right: 12px !important;
    bottom: 0 !important;
    margin: 0 0 calc(132px + env(safe-area-inset-bottom, 0px)) 0 !important;
    z-index: 10100 !important;
  }
}

/* V122.6c — portrait stabilization: header reservation, alerts flow support, dock/controls spacing */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .command-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding-top: 0 !important;
  }

  body[data-layout-mode="portrait"] .mobile-live-brand,
  body[data-layout-mode="portrait"] .mobile-premium-header {
    position: relative !important;
    inset: auto !important;
    z-index: 30 !important;
    margin: 0 0 10px !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command,
  body[data-layout-mode="portrait"] .mobile-live-command,
  body[data-layout-mode="portrait"] .map-card,
  body[data-layout-mode="portrait"] .map-frame {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command {
    z-index: 25 !important;
    margin-top: 0 !important;
    min-height: 72px !important;
    align-content: center !important;
  }

  body[data-layout-mode="portrait"] .mobile-live-command {
    z-index: 20 !important;
    min-height: 88px !important;
  }

  body[data-layout-mode="portrait"] .map-card {
    z-index: 1 !important;
    margin-top: 0 !important;
  }

  body[data-layout-mode="portrait"] #mobileDockLayersBtn,
  body[data-layout-mode="portrait"] .mobile-dock-btn.layers {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-control-zoom {
    right: 12px !important;
    bottom: 0 !important;
    margin: 0 0 calc(196px + env(safe-area-inset-bottom, 0px)) 0 !important;
    z-index: 10100 !important;
  }

  body[data-layout-mode="portrait"] #mobileDockAreaBtn,
  body[data-layout-mode="portrait"] .mobile-dock-btn.area {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-layout-mode="portrait"].portrait-alerts-open #alertsSection,
  body[data-layout-mode-legacy="mobile"].portrait-alerts-open #alertsSection {
    display: grid !important;
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(560px, calc(100vw - 20px)) !important;
    right: auto !important;
    top: calc(var(--mobile-command-zone-top, 72px) + 6px) !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10040 !important;
    overflow: auto !important;
  }
}

/* V122.6g — portrait alerts/settings surface hardening */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .mobile-live-brand-status-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  body[data-layout-mode="portrait"] .mobile-header-settings-btn {
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-size: 1.05rem;
    line-height: 1;
  }

  body[data-layout-mode="portrait"].portrait-alerts-open #alertsSection,
  body[data-layout-mode-legacy="mobile"].portrait-alerts-open #alertsSection {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow-x: hidden !important;
  }

  body[data-layout-mode="portrait"].portrait-alerts-open #alertsSection > .drawer-panel,
  body[data-layout-mode-legacy="mobile"].portrait-alerts-open #alertsSection > .drawer-panel,
  body[data-layout-mode="portrait"].portrait-alerts-open #alertsSection .drawer-body,
  body[data-layout-mode-legacy="mobile"].portrait-alerts-open #alertsSection .drawer-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body[data-layout-mode="portrait"].portrait-alerts-open #alertsSection .drawer-body,
  body[data-layout-mode-legacy="mobile"].portrait-alerts-open #alertsSection .drawer-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* V122.6h — portrait visual stabilization cleanup (top safe-area + compact zoom rail) */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .command-center {
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
  }

  body[data-layout-mode="portrait"] .mobile-live-brand,
  body[data-layout-mode="portrait"] .mobile-premium-header,
  body[data-layout-mode="portrait"] .mobile-destination-command,
  body[data-layout-mode="portrait"] .mobile-live-command {
    margin-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    margin-right: max(8px, env(safe-area-inset-right, 0px)) !important;
  }

  body[data-layout-mode="portrait"] .mobile-live-command {
    margin-top: 4px !important;
  }

  body[data-layout-mode="portrait"] .map-card {
    margin-top: 8px !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-top,
  body[data-layout-mode="portrait"] #map .leaflet-right {
    height: auto !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-top.leaflet-right,
  body[data-layout-mode="portrait"] #map .leaflet-bottom.leaflet-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-control-layers,
  body[data-layout-mode="portrait"] #map .leaflet-control-zoom {
    margin: 0 !important;
    align-self: flex-end !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-control-zoom {
    margin-bottom: calc(196px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-layout-mode="portrait"] #map .gridly-mobile-control-rail,
  body[data-layout-mode-legacy="mobile"] #map .gridly-mobile-control-rail {
    top: auto !important;
    bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: auto !important;
    max-height: max-content !important;
    padding: 6px !important;
    gap: 6px !important;
    align-items: flex-end !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-bottom.leaflet-right,
  body[data-layout-mode="portrait"] #map .leaflet-top.leaflet-right,
  body[data-layout-mode-legacy="mobile"] #map .leaflet-bottom.leaflet-right,
  body[data-layout-mode-legacy="mobile"] #map .leaflet-top.leaflet-right {
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-control-layers,
  body[data-layout-mode="portrait"] #map .leaflet-control-layers-expanded,
  body[data-layout-mode-legacy="mobile"] #map .leaflet-control-layers,
  body[data-layout-mode-legacy="mobile"] #map .leaflet-control-layers-expanded {
    width: auto !important;
    min-width: 42px !important;
    max-width: min(72vw, 260px) !important;
    height: auto !important;
    max-height: min(46vh, 320px) !important;
    overflow: auto !important;
  }

  body[data-layout-mode="portrait"] #alertsSection .portrait-alerts-close,
  body[data-layout-mode-legacy="mobile"] #alertsSection .portrait-alerts-close {
    display: inline-flex !important;
    align-self: flex-end;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 10px;
    margin-bottom: 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    z-index: 1;
  }
}


#alertsSection .portrait-alerts-close { display: none; }

/* V123 — portrait map-first architecture contract */
:root {
  --gridly-surface-radius: 14px;
  --gridly-surface-border: 1px solid rgba(255, 255, 255, 0.14);
  --gridly-surface-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
  --gridly-surface-pad: 14px;
  --gridly-surface-header-min-h: 42px;
}

.gridly-surface-close {
  min-width: 36px;
  min-height: 36px;
  border-radius: 10px;
  border: var(--gridly-surface-border);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] {
    --gridly-portrait-header-h: 0px;
    --gridly-portrait-dock-h: 78px;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command,
  body[data-layout-mode="portrait"] .mobile-bottom-nav,
  body[data-layout-mode="portrait"] .mobile-daily-panel,
  body[data-layout-mode="portrait"] .mobile-local-context-strip,
  body[data-layout-mode="portrait"] .mobile-premium-header { display: none !important; }
  body[data-layout-mode="portrait"] .app-shell { width: 100%; margin: 0; padding-bottom: calc(var(--gridly-portrait-dock-h) + 18px + env(safe-area-inset-bottom, 0px)); }
  body[data-layout-mode="portrait"] .dashboard { margin: 0; }
  body[data-layout-mode="portrait"] .map-card {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    min-height: 100dvh;
    padding: 0;
  }
  body[data-layout-mode="portrait"] .map-frame {
    position: relative;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
  }
  body[data-layout-mode="portrait"] #map {
    width: 100%;
    height: 100% !important;
    min-height: 100%;
  }
  body[data-layout-mode="portrait"] #map .leaflet-control-container {
    pointer-events: none;
  }
  body[data-layout-mode="portrait"] #map .leaflet-control-container .leaflet-control {
    pointer-events: auto;
  }
  body[data-layout-mode="portrait"] #map .leaflet-right {
    right: 10px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body[data-layout-mode="portrait"] #map .leaflet-top.leaflet-right {
    top: auto !important;
    bottom: calc(var(--gridly-portrait-dock-h) + 22px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body[data-layout-mode="portrait"] #map .leaflet-control-layers,
  body[data-layout-mode="portrait"] #map .leaflet-control-zoom {
    margin: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(2, 7, 18, 0.45);
  }
  body[data-layout-mode="portrait"] #map .leaflet-control-zoom {
    margin: 0 !important;
  }
  body[data-layout-mode="portrait"] #map .gridly-mobile-control-rail {
    bottom: calc(var(--gridly-portrait-dock-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    right: 10px !important;
  }

  body[data-layout-mode="portrait"] .mobile-live-command {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 12px;
    right: 72px;
    z-index: 850;
    border-radius: 999px;
    border: 1px solid rgba(157, 197, 255, 0.32);
    background: linear-gradient(140deg, rgba(7, 16, 30, 0.76), rgba(8, 18, 31, 0.82));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 24px rgba(2, 8, 20, 0.42);
    padding: 8px 10px;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  body[data-layout-mode="portrait"] .mobile-live-command .eyebrow { display: none; }
  body[data-layout-mode="portrait"] .mobile-live-command .mobile-live-command-copy { display: grid; gap: 1px; min-width: 0; }
  body[data-layout-mode="portrait"] .mobile-live-command #mobileLiveRouteStatus { font-size: .84rem; }
  body[data-layout-mode="portrait"] .mobile-live-command #mobileLiveRouteMeta { font-size: .72rem; margin: 0; opacity: .86; }
  body[data-layout-mode="portrait"] .mobile-live-command .compact-btn { min-height: 30px; border-radius: 999px; padding: 7px 10px; font-size: .72rem; }

  body[data-layout-mode="portrait"] .mobile-floating-action-dock {
    left: 12px;
    right: 12px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px;
    border: 1px solid rgba(173, 206, 255, 0.22);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px);
    background: linear-gradient(145deg, rgba(8, 15, 27, 0.72), rgba(6, 12, 22, 0.82));
    box-shadow: 0 12px 24px rgba(2, 9, 20, 0.38);
    padding: 8px;
    z-index: 900;
  }
  body[data-layout-mode="portrait"] .mobile-floating-action-dock .mobile-dock-btn.area,
  body[data-layout-mode="portrait"] .mobile-floating-action-dock .mobile-dock-btn.layers { display: none !important; }

  body[data-layout-mode="portrait"] .report-drawer-summary,
  body[data-layout-mode="portrait"] .route-setup-modal-head,
  body[data-layout-mode="portrait"] .smart-alerts-modal-head,
  body[data-layout-mode="portrait"] .settings-modal-head,
  body[data-layout-mode="portrait"] .mobile-native-surface-header {
    min-height: 50px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(161, 194, 240, 0.18);
  }
  body[data-layout-mode="portrait"] .route-setup-modal-card,
  body[data-layout-mode="portrait"] .smart-alerts-modal-card,
  body[data-layout-mode="portrait"] .settings-modal-card,
  body[data-layout-mode="portrait"] .mobile-native-surface-sheet,
  body[data-layout-mode="portrait"] .report-drawer,
  body[data-layout-mode="portrait"].portrait-alerts-open #alertsSection {
    border-radius: 24px 24px 0 0 !important;
    border: var(--gridly-surface-border) !important;
    box-shadow: var(--gridly-surface-shadow) !important;
    background: linear-gradient(180deg, rgba(8, 15, 27, 0.95), rgba(5, 10, 19, 0.98));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
  }

  body[data-layout-mode="portrait"] .route-setup-modal-head,
  body[data-layout-mode="portrait"] .smart-alerts-modal-head,
  body[data-layout-mode="portrait"] .settings-modal-head {
    min-height: var(--gridly-surface-header-min-h);
    padding: 8px var(--gridly-surface-pad);
  }
  body[data-layout-mode="portrait"] .settings-modal-card {
    padding: 0 0 var(--gridly-surface-pad);
  }
  body[data-layout-mode="portrait"] .settings-modal-subtitle,
  body[data-layout-mode="portrait"] .settings-modal-section {
    margin: 0 var(--gridly-surface-pad) 10px;
  }
  body[data-layout-mode="portrait"] .settings-modal-section {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.03);
  }
}

.gridly-settings-focus { outline: 2px solid rgba(57,243,164,0.7); }

/* V125 portrait premium wow pass */
@media (max-width: 700px) {
  body[data-layout-mode="portrait"] .map-frame {
    box-shadow: 0 28px 52px rgba(2, 8, 20, 0.52), inset 0 -44px 90px rgba(4, 12, 24, 0.32);
  }

  body[data-layout-mode="portrait"] .mobile-live-command {
    top: 52px;
    left: 12px;
    right: 12px;
    min-height: 42px;
    padding: 7px 10px;
    gap: 7px;
    border-radius: 999px;
    border: 1px solid rgba(166, 206, 255, 0.34);
    background: linear-gradient(135deg, rgba(8, 19, 33, 0.62), rgba(6, 13, 24, 0.76));
    box-shadow: 0 10px 24px rgba(3, 10, 22, 0.38), 0 0 28px rgba(84, 170, 255, 0.1);
  }

  body[data-layout-mode="portrait"] .mobile-live-command #mobileLiveRouteStatus {
    font-size: 0.8rem;
    letter-spacing: 0.01em;
  }

  body[data-layout-mode="portrait"] .mobile-live-command #mobileLiveRouteMeta {
    font-size: 0.69rem;
    opacity: 0.8;
  }

  body[data-layout-mode="portrait"] .mobile-live-command .compact-btn {
    min-height: 28px;
    padding: 6px 10px;
    font-size: 0.69rem;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
  }

  body[data-layout-mode="portrait"] .map-tools-overlay {
    left: 12px;
    right: 12px;
    top: 102px;
    bottom: auto;
    z-index: 860;
    padding: 4px;
    border-radius: 16px;
    border: 1px solid rgba(158, 197, 248, 0.2);
    background: linear-gradient(135deg, rgba(7, 16, 28, 0.44), rgba(8, 15, 24, 0.58));
    backdrop-filter: blur(12px) saturate(115%);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 18px rgba(2, 8, 18, 0.28);
  }

  body[data-layout-mode="portrait"] .map-tools-overlay .geo-filter-shell {
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
  }

  body[data-layout-mode="portrait"] .map-tools-overlay .geo-filter-pill {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 0.68rem;
    font-weight: 820;
    border: 1px solid transparent;
    color: rgba(228, 238, 248, 0.82);
    background: rgba(255, 255, 255, 0.04);
  }

  body[data-layout-mode="portrait"] .map-tools-overlay .geo-filter-pill.selected {
    color: #05242c;
    background: linear-gradient(135deg, rgba(136, 239, 255, 0.96), rgba(92, 205, 235, 0.95));
    box-shadow: 0 4px 12px rgba(71, 206, 233, 0.24);
  }

  body[data-layout-mode="portrait"] #map .leaflet-top.leaflet-left .leaflet-control-zoom,
  body[data-layout-mode="portrait"] #map .leaflet-top.leaflet-left .leaflet-control-layers {
    left: auto;
    right: 12px;
    top: auto;
    bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    margin: 0;
  }

  body[data-layout-mode="portrait"] #map .leaflet-control-layers,
  body[data-layout-mode="portrait"] #map .leaflet-control-zoom {
    border: 1px solid rgba(170, 206, 255, 0.24);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(4, 9, 20, 0.34);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(160deg, rgba(8, 15, 26, 0.72), rgba(7, 13, 23, 0.82));
  }

  body[data-layout-mode="portrait"] #map .leaflet-control-zoom a,
  body[data-layout-mode="portrait"] #map .leaflet-control-layers-toggle {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 1rem;
    color: #e6f0ff;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
  }

  body[data-layout-mode="portrait"] .mobile-floating-action-dock {
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 7px;
    border-radius: 18px;
    border: 1px solid rgba(183, 214, 255, 0.2);
    background: linear-gradient(145deg, rgba(8, 14, 25, 0.64), rgba(7, 12, 22, 0.78));
    box-shadow: 0 12px 24px rgba(2, 8, 20, 0.32);
  }

  body[data-layout-mode="portrait"] .mobile-floating-action-dock .mobile-dock-btn {
    min-height: 34px;
    border-radius: 12px;
    font-size: 0.73rem;
    letter-spacing: 0.01em;
    font-weight: 760;
    padding: 7px 8px;
  }

  body[data-layout-mode="portrait"] .report-card,
  body[data-layout-mode="portrait"] .mobile-alerts-panel,
  body[data-layout-mode="portrait"] .report-drawer,
  body[data-layout-mode="portrait"] .route-setup-modal-card,
  body[data-layout-mode="portrait"] .smart-alerts-modal-card,
  body[data-layout-mode="portrait"] .settings-modal-card {
    background: linear-gradient(178deg, rgba(9, 16, 29, 0.93), rgba(5, 10, 18, 0.97));
    border: 1px solid rgba(160, 194, 236, 0.18);
    box-shadow: 0 16px 32px rgba(2, 8, 18, 0.34);
  }

  body[data-layout-mode="portrait"] .report-tools,
  body[data-layout-mode="portrait"] .alerts-list {
    gap: 10px;
  }
}

/* V126 unified portrait bottom-sheet system */
@media (max-width: 1100px) and (orientation: portrait) {
  :root {
    --gridly-sheet-inset: 10px;
    --gridly-sheet-radius: 18px;
    --gridly-sheet-border: 1px solid rgba(156, 214, 255, 0.22);
    --gridly-sheet-bg: linear-gradient(180deg, rgba(11, 20, 33, 0.93), rgba(8, 14, 24, 0.97));
    --gridly-sheet-shadow: 0 -18px 40px rgba(0, 0, 0, 0.38), 0 8px 20px rgba(0, 0, 0, 0.26);
    --gridly-sheet-max-height: min(72dvh, 620px);
  }

  #reportSection.report-drawer,
  body.portrait-alerts-open #alertsSection,
  .route-setup-modal-card,
  .settings-modal-card {
    position: fixed !important;
    left: var(--gridly-sheet-inset) !important;
    right: var(--gridly-sheet-inset) !important;
    width: auto !important;
    max-width: none !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    border-radius: var(--gridly-sheet-radius) !important;
    border: var(--gridly-sheet-border) !important;
    background: var(--gridly-sheet-bg) !important;
    box-shadow: var(--gridly-sheet-shadow) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
    max-height: var(--gridly-sheet-max-height) !important;
    overflow: hidden !important;
    z-index: 100110 !important;
    animation: gridlySheetRise 200ms ease-out both;
  }

  #reportSection.report-drawer[open],
  body.portrait-alerts-open #alertsSection {
    display: block !important;
  }

  #reportSection .report-copy,
  #reportSection .mobile-report-mode-card,
  #reportSection .report-tools,
  #reportSection .report-tools-advanced,
  #alertsSection .panel-card,
  .route-setup-modal-card > *:not(.route-setup-modal-head),
  .settings-modal-card > *:not(.settings-modal-head) {
    max-height: none;
    overflow: visible;
  }

  #reportSection .report-copy,
  #reportSection .report-tools,
  #alertsSection .panel-card,
  .route-setup-modal-card,
  .settings-modal-card {
    overflow-y: auto !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #reportSection .report-drawer-summary,
  #alertsSection .panel-head,
  .route-setup-modal-head,
  .settings-modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 52px;
    margin: 0 !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: rgba(7, 13, 22, 0.92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  #reportSection .report-drawer-summary h2,
  #alertsSection .panel-head h2,
  .route-setup-modal-head h2,
  .settings-modal-head h2 {
    margin: 0 !important;
    font-size: 0.98rem !important;
    letter-spacing: 0.01em;
  }

  #reportSection .report-drawer-summary .eyebrow,
  #alertsSection .panel-head .eyebrow,
  .route-setup-modal-head .eyebrow {
    display: none !important;
  }

  #reportSection .report-drawer-summary::after {
    content: "×";
    font-size: 1.28rem;
    line-height: 1;
    opacity: 0.9;
  }

  #alertsSection .alerts-list {
    display: grid;
    gap: 8px;
  }

  #alertsSection .alert-item {
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
  }

  #reportSection .mobile-report-mode-card,
  #reportSection .confirmation-box,
  #reportSection .share-card,
  #reportSection .quick-clear-card {
    border-radius: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
  }

  .smart-alerts-modal {
    display: none !important;
  }

  .mobile-floating-action-dock {
    z-index: 100140 !important;
  }
}

@keyframes gridlySheetRise {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* V127.5 final premium productization pass — portrait unified system */
@media (max-width: 760px) and (orientation: portrait) {
  :root {
    --gridly-sheet-inset: 10px;
    --gridly-sheet-dock-offset: calc(76px + env(safe-area-inset-bottom, 0px));
    --gridly-sheet-radius: 20px;
    --gridly-sheet-header-h: 48px;
  }

  body[data-layout-mode="portrait"] .map-frame::before { opacity: 0.42; }

  body[data-layout-mode="portrait"] .mobile-live-command {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 10px;
    right: 70px;
    min-height: 40px;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(173, 208, 245, 0.26);
    background: linear-gradient(145deg, rgba(8, 17, 30, 0.58), rgba(8, 15, 26, 0.68));
    box-shadow: 0 6px 18px rgba(2, 7, 16, 0.3);
    gap: 7px;
  }

  body[data-layout-mode="portrait"] .mobile-live-status-pill {
    padding: 2px 8px;
    min-height: 20px;
    font-size: 0.61rem;
    letter-spacing: 0.08em;
    border-width: 1px;
  }

  body[data-layout-mode="portrait"] .mobile-live-command #mobileLiveRouteStatus {
    font-size: 0.77rem;
    line-height: 1.2;
    font-weight: 760;
  }

  body[data-layout-mode="portrait"] .mobile-live-command #mobileLiveRouteMeta {
    font-size: 0.67rem;
    opacity: 0.74;
  }

  body[data-layout-mode="portrait"] .mobile-live-command .compact-btn {
    min-height: 26px;
    padding: 5px 8px;
    font-size: 0.67rem;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
  }

  body[data-layout-mode="portrait"] .mobile-floating-action-dock {
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
    padding: 6px;
    border: 1px solid rgba(176, 207, 241, 0.2);
    background: linear-gradient(150deg, rgba(7, 14, 25, 0.66), rgba(7, 13, 23, 0.78));
    box-shadow: 0 10px 24px rgba(2, 8, 18, 0.32);
  }

  body[data-layout-mode="portrait"] .mobile-floating-action-dock .mobile-dock-btn {
    min-height: 35px;
    border-radius: 11px;
    font-size: 0.69rem;
    font-weight: 760;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  body[data-layout-mode="portrait"] .map-tools-overlay {
    top: 96px;
    left: 10px;
    right: 10px;
    padding: 3px;
    border-radius: 14px;
    border: 1px solid rgba(173, 208, 243, 0.15);
    background: linear-gradient(150deg, rgba(7, 16, 28, 0.38), rgba(6, 13, 24, 0.46));
    box-shadow: 0 7px 16px rgba(2, 8, 18, 0.18);
  }

  body[data-layout-mode="portrait"] .map-tools-overlay .geo-filter-shell {
    padding: 2px;
    gap: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.015);
    border-color: rgba(255, 255, 255, 0.05);
  }

  body[data-layout-mode="portrait"] .map-tools-overlay .geo-filter-pill {
    min-height: 26px;
    padding: 4px 9px;
    font-size: 0.66rem;
    color: rgba(226, 236, 248, 0.8);
    background: rgba(255, 255, 255, 0.028);
  }

  body[data-layout-mode="portrait"] #map .leaflet-top.leaflet-left {
    top: auto;
    left: auto;
    right: 10px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  body[data-layout-mode="portrait"] #map .leaflet-control-zoom,
  body[data-layout-mode="portrait"] #map .leaflet-control-layers {
    border-radius: 12px;
    border: 1px solid rgba(171, 205, 240, 0.2);
    box-shadow: 0 10px 22px rgba(2, 8, 17, 0.34);
    background: linear-gradient(160deg, rgba(8, 15, 26, 0.7), rgba(7, 12, 21, 0.82));
  }

  body[data-layout-mode="portrait"] #map .leaflet-control-zoom a,
  body[data-layout-mode="portrait"] #map .leaflet-control-layers-toggle {
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 0.98rem;
  }

  body[data-layout-mode="portrait"] #reportSection.report-drawer,
  body[data-layout-mode="portrait"].portrait-alerts-open #alertsSection,
  body[data-layout-mode="portrait"] .route-setup-modal-card,
  body[data-layout-mode="portrait"] .settings-modal-card,
  body[data-layout-mode="portrait"] .mobile-native-surface-sheet {
    position: fixed !important;
    left: var(--gridly-sheet-inset) !important;
    right: var(--gridly-sheet-inset) !important;
    bottom: var(--gridly-sheet-dock-offset) !important;
    margin: 0 !important;
    border-radius: var(--gridly-sheet-radius) var(--gridly-sheet-radius) 14px 14px !important;
    border: 1px solid rgba(171, 204, 238, 0.2) !important;
    background: linear-gradient(180deg, rgba(9, 18, 31, 0.95), rgba(6, 12, 22, 0.98)) !important;
    backdrop-filter: blur(18px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
    box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.36), 0 8px 24px rgba(2, 8, 16, 0.26) !important;
    overflow: hidden !important;
    max-height: min(73dvh, 610px) !important;
  }

  body[data-layout-mode="portrait"] .report-drawer-summary,
  body[data-layout-mode="portrait"] #alertsSection .panel-head,
  body[data-layout-mode="portrait"] .route-setup-modal-head,
  body[data-layout-mode="portrait"] .settings-modal-head,
  body[data-layout-mode="portrait"] .mobile-native-surface-header {
    min-height: var(--gridly-sheet-header-h);
    padding: 8px 12px !important;
    background: linear-gradient(180deg, rgba(10, 20, 34, 0.9), rgba(8, 16, 27, 0.78));
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    gap: 8px;
  }

  body[data-layout-mode="portrait"] .report-drawer-summary h2,
  body[data-layout-mode="portrait"] #alertsSection .panel-head h2,
  body[data-layout-mode="portrait"] .route-setup-modal-head h2,
  

/* V129.1 popup viewport anchoring */
#map .leaflet-popup-pane {
  overflow: visible;
}
#map .leaflet-popup {
  max-width: min(320px, calc(100vw - 24px));
}
#map .leaflet-popup-content-wrapper {
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(52vh, 420px);
  overflow: hidden;
}
#map .leaflet-popup-content {
  width: min(296px, calc(100vw - 48px));
  max-width: 100%;
  max-height: min(48vh, 360px);
  overflow-y: auto;
  overflow-x: hidden;
}
.gridly-popup {
  min-width: 0;
  width: 100%;
}

body[data-layout-mode="portrait"] .settings-modal-head h2,
  body[data-layout-mode="portrait"] .mobile-native-surface-header h2 {
    font-size: 0.95rem !important;
    font-weight: 700;
    letter-spacing: 0;
  }

  body[data-layout-mode="portrait"] .gridly-surface-close {
    min-width: 32px;
    min-height: 32px;
    border-radius: 999px;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.055);
    font-size: 0.95rem;
    font-weight: 700;
  }

  body[data-layout-mode="portrait"] #reportSection .report-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-layout-mode="portrait"] #reportSection .popup-report-btn {
    min-height: 66px;
    border-radius: 12px;
    padding: 8px 6px;
    background: linear-gradient(160deg, rgba(12, 24, 40, 0.8), rgba(9, 18, 31, 0.88));
    border: 1px solid rgba(164, 196, 232, 0.15);
    box-shadow: none;
    font-size: 0.67rem;
    font-weight: 640;
    line-height: 1.18;
  }

  body[data-layout-mode="portrait"] #reportSection .report-buttons {
    gap: 6px;
  }

  body[data-layout-mode="portrait"] #reportSection .primary-btn,
  body[data-layout-mode="portrait"] #reportSection .secondary-btn,
  body[data-layout-mode="portrait"] #alertsSection .primary-btn,
  body[data-layout-mode="portrait"] #alertsSection .secondary-btn {
    min-height: 38px;
    border-radius: 11px;
  }

  body[data-layout-mode="portrait"] #alertsSection .alerts-list {
    display: grid;
    gap: 8px;
  }

  body[data-layout-mode="portrait"] #alertsSection .alerts-list > *:first-child {
    border-radius: 12px;
    border: 1px solid rgba(111, 207, 163, 0.3);
    background: linear-gradient(150deg, rgba(12, 33, 31, 0.78), rgba(10, 24, 30, 0.9));
    padding: 10px;
  }

  body[data-layout-mode="portrait"] #alertsSection .panel-head + p,
  body[data-layout-mode="portrait"] #alertsSection .panel-head + .mobile-alerts-note {
    opacity: 0.78;
    font-size: 0.74rem;
  }
}

/* ===== Gridly Portrait V2 Shell ===== */
#gridlyPortraitV2 { display:none; }
body[data-layout-mode="portrait"] #gridlyPortraitV2{display:block;position:fixed;inset:0;z-index:9000;pointer-events:none;font-family:Inter,system-ui,sans-serif;}
body[data-layout-mode="portrait"] .mobile-live-brand,
body[data-layout-mode="portrait"] #mobileLocalContextStrip,
body[data-layout-mode="portrait"] #mobileDailyPanel,
body[data-layout-mode="portrait"] .mobile-floating-action-dock,
body[data-layout-mode="portrait"] .mobile-premium-header,
body[data-layout-mode="portrait"] .mobile-home-cards,
body[data-layout-mode="portrait"] .destination-hero-card,
body[data-layout-mode="portrait"] .mobile-live-command { display:none !important; }
body[data-layout-mode="portrait"] #map{height:100vh;}
.gridly-v2-topbar,.gridly-v2-status-pill,.gridly-v2-segments,.gridly-v2-control-rail,.gridly-v2-bottom-dock,.gridly-v2-sheet{pointer-events:auto;position:fixed;left:12px;right:12px;}
.gridly-v2-bottom-region{position:fixed;left:0;right:0;bottom:0;z-index:9501;display:grid;gap:16px;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));background:#020812;border-radius:0 0 22px 22px;box-shadow:0 -18px 32px rgba(0,0,0,.34);pointer-events:none;}
.gridly-v2-topbar{top:10px;display:flex;align-items:center;justify-content:space-between;background:rgba(6,14,26,.72);backdrop-filter:blur(14px);border:1px solid rgba(185,214,255,.22);border-radius:14px;padding:7px 10px;color:#d9ebff}
.gridly-v2-brand img{width:20px;height:20px;object-fit:contain}.gridly-v2-watch{font-size:10px;letter-spacing:.12em}
.gridly-v2-icon-btn{border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:8px;padding:4px 8px}
.gridly-v2-status-pill{top:56px;background:rgba(5,11,22,.78);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:13px;padding:8px 12px;color:#f4f8ff}
.gridly-v2-status-pill strong{display:block;font-size:12px}.gridly-v2-status-pill span{font-size:11px;color:#acc6e8}
.gridly-v2-segments{top:112px;display:flex;gap:6px;overflow:auto;padding:4px;background:rgba(6,14,24,.7);border-radius:12px;border:1px solid rgba(255,255,255,.16)}
.gridly-v2-segments button{border:0;background:transparent;color:#b9d2ef;padding:8px 10px;border-radius:9px;font-size:11px;white-space:nowrap}.gridly-v2-segments button.is-active{background:rgba(90,157,255,.24);color:#fff}
.gridly-v2-control-rail{right:12px;left:auto;top:160px;display:grid;gap:8px}.gridly-v2-control-rail button{width:42px;height:42px;border:1px solid rgba(255,255,255,.26);background:rgba(6,14,24,.75);color:#fff;border-radius:12px}
.gridly-v2-bottom-dock{bottom:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:rgba(6,14,24,.76);backdrop-filter:blur(16px);padding:8px;border-radius:16px;border:1px solid rgba(255,255,255,.2)}
.gridly-v2-bottom-dock button{border:0;background:rgba(255,255,255,.03);color:#e9f3ff;border-radius:12px;padding:8px 4px;display:grid;justify-items:center;gap:2px}.gridly-v2-bottom-dock em{font-style:normal;font-size:11px}
.gridly-v2-location-awareness-panel{position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:9000;display:grid;gap:3px;padding:10px 12px;border:1px solid rgba(178,211,255,.2);border-radius:16px;background:linear-gradient(180deg,rgba(6,14,26,.78),rgba(4,10,20,.88));box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px);color:#f2f8ff;pointer-events:none;max-height:104px;overflow:hidden}.gridly-v2-location-awareness-panel[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}.gridly-v2-location-awareness-kicker{color:rgba(159,234,255,.9);font-size:.58rem;font-weight:820;letter-spacing:.075em;text-transform:uppercase}.gridly-v2-location-awareness-title{font-size:.88rem;line-height:1.14;letter-spacing:-.01em}.gridly-v2-location-awareness-status,.gridly-v2-location-awareness-meta{margin:0;color:rgba(222,236,250,.84);font-size:.72rem;line-height:1.25}.gridly-v2-location-awareness-meta{color:rgba(185,214,245,.76)}
.gridly-v2-sheet-backdrop{position:fixed;inset:0;background:rgba(1,5,12,.45);z-index:9001}
.gridly-v2-sheet{z-index:9002;bottom:82px;background:linear-gradient(180deg,rgba(7,15,28,.96),rgba(4,10,20,.98));border-radius:18px 18px 12px 12px;border:1px solid rgba(178,211,255,.24);max-height:65vh;overflow:auto;padding:12px}
#gridlyPortraitV2Sheet[hidden],
#gridlyPortraitV2Sheet.is-closed {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 100%, 0) !important;
  translate: 0 100% !important;
}
#gridlyPortraitV2SheetBody[hidden],
#gridlyPortraitV2Sheet.is-closed #gridlyPortraitV2SheetBody {
  display: none !important;
  contain: layout paint;
}
#gridlyPortraitV2SheetBackdrop[hidden],
#gridlyPortraitV2SheetBackdrop.is-closed {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.gridly-v2-sheet header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.gridly-v2-sheet header h3{margin:0;color:#f3f8ff}
#gridlyPortraitV2SheetClose{border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:8px;padding:3px 8px}
.gridly-v2-list,.gridly-v2-tiles{display:grid;gap:10px}.gridly-v2-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.gridly-v2-tile{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:#daebff;border-radius:12px;padding:12px 13px;font-size:12px}.gridly-v2-report-tiles{gap:10px}.gridly-v2-report-action{display:flex;align-items:center;justify-content:flex-start;background:rgba(181,219,255,.06);border:1px solid rgba(181,219,255,.2);box-shadow:none;padding:14px 12px}.gridly-v2-report-action span{font-size:14px;line-height:1.25;font-weight:650;letter-spacing:.01em;color:#f5f9ff}.gridly-v2-report-ctas{margin-top:2px;gap:9px}.gridly-v2-report-action.is-selected{background:rgba(90,178,255,.2);border-color:rgba(120,199,255,.78);box-shadow:inset 0 0 0 1px rgba(173,228,255,.45)}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-report-ctas{
  position:relative;
  z-index:3;
  pointer-events:auto;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-report-ctas [data-v2-action="report-use-location"],
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-report-ctas [data-v2-action="report-tap-map"]{
  position:relative;
  z-index:4;
  pointer-events:auto;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-report-ctas [data-v2-precondition-helper]{
  pointer-events:none;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-report-picker {
  display: grid;
  gap: 10px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-report-prompt {
  margin: 0;
  color: rgba(236, 247, 255, 0.94);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-other-hazard-subtypes[hidden] {
  display: none !important;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-other-hazard-subtypes {
  margin: 0;
  border-color: rgba(181, 219, 255, 0.2);
  background: rgba(181, 219, 255, 0.055);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-other-hazard-summary {
  min-height: 40px;
  padding: 9px 11px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-other-hazard-subtype-list {
  padding-top: 9px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-other-hazard-subtype-action.is-selected {
  background: rgba(90,178,255,.2);
  border-color: rgba(120,199,255,.78);
  box-shadow: inset 0 0 0 1px rgba(173,228,255,.45);
}

/* V135.2 Portrait V2 surface containment */
body[data-layout-mode="portrait"].gridly-v2-surface-containment #reportSection,
body[data-layout-mode="portrait"].gridly-v2-surface-containment #alertsSection,
body[data-layout-mode="portrait"].gridly-v2-surface-containment .report-drawer,
body[data-layout-mode="portrait"].gridly-v2-surface-containment .mobile-report-mode-card,
body[data-layout-mode="portrait"].gridly-v2-surface-containment .report-buttons,
body[data-layout-mode="portrait"].gridly-v2-surface-containment .settings-modal-backdrop,
body[data-layout-mode="portrait"].gridly-v2-surface-containment #settingsModal,
body[data-layout-mode="portrait"].gridly-v2-surface-containment #routeSetupModal,
body[data-layout-mode="portrait"].gridly-v2-surface-containment #smartAlertsModal,
body[data-layout-mode="portrait"].gridly-v2-surface-containment #mobileNativeSurfaceLayer,
body[data-layout-mode="portrait"].gridly-v2-surface-containment #routeSetupModalBackdrop,
body[data-layout-mode="portrait"].gridly-v2-surface-containment #smartAlertsModalBackdrop,
body[data-layout-mode="portrait"].gridly-v2-surface-containment #settingsModalBackdrop {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 {
  z-index: 9500;
}


body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-bottom-dock button [aria-hidden="true"],
body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-bottom-dock button svg[aria-hidden="true"],
body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-bottom-dock button .dock-icon {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-bottom-dock {
  z-index: 9503;
}
body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2SheetBackdrop {
  z-index: 9501;
  pointer-events: none;
}
body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2SheetBackdrop:not([hidden]) {
  pointer-events: auto;
}
body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2Sheet {
  z-index: 9502;
}

/* V128.1 Portrait V2 cleanup */
body[data-layout-mode="portrait"] #gridlyPortraitV2 {
  display: block;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.15;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
  font-size: 0.73rem;
  padding: 8px 6px;
  letter-spacing: 0.01em;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button.is-active {
  background: linear-gradient(135deg, rgba(94, 177, 255, 0.32), rgba(67, 149, 255, 0.23));
  border-color: rgba(146, 209, 255, 0.58);
  color: #e6f4ff;
  box-shadow: 0 6px 14px rgba(32, 92, 171, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
  flex-direction: column;
  min-width: 0;
  padding: 8px 5px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(172, 208, 255, 0.35);
  background: linear-gradient(155deg, rgba(89, 148, 235, 0.32), rgba(20, 64, 124, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px rgba(8, 32, 67, 0.42);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.25;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon svg path:first-child,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon svg circle:first-of-type {
  fill: rgba(196, 226, 255, 0.12);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button em {
  font-size: 0.68rem;
  line-height: 1;
  font-style: normal;
  opacity: 0.95;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button:active,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button:focus-visible {
  transform: translateY(1px);
  filter: brightness(1.07);
}

body[data-layout-mode="portrait"] #map .gridly-mobile-control-rail,
body[data-layout-mode="portrait"] .mobile-floating-action-dock,
body[data-layout-mode="portrait"] .map-tools-overlay,
body[data-layout-mode="portrait"] .map-card .map-tools-overlay,
body[data-layout-mode="portrait"] .geo-filter-status,
body[data-layout-mode="portrait"] .map-card .map-ux-strip .geo-filter-shell,
body[data-layout-mode="portrait"] .map-tools-overlay .geo-filter-shell {
  display: none !important;
}

/* V129 — Gridly brand system + popup conversion + premium polish foundation */
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar {
  top: 8px;
  left: 10px;
  right: 10px;
  min-height: 48px;
  padding: 7px 9px 7px 11px;
  border-radius: 13px;
  border-color: rgba(170, 207, 255, 0.26);
  background: linear-gradient(165deg, rgba(5, 13, 24, 0.88), rgba(4, 10, 18, 0.92));
  box-shadow: 0 8px 22px rgba(3, 10, 21, 0.44);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 2px 2px 0; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brand img { width: 19px; height: 19px; opacity: 0.95; object-fit: contain; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brand span { font-size: 0.74rem; letter-spacing: 0.115em; font-weight: 720; color: #e4f2ff; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-watch { flex: 1; display: flex; justify-content: center; min-width: 0; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-watch span { font-size: 0.57rem; letter-spacing: 0.11em; color: rgba(185, 214, 245, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-icon-btn { width: 32px; height: 32px; border-radius: 10px; padding: 0; border: 1px solid rgba(161, 206, 255, 0.24); background: rgba(166, 207, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill { top: 60px; left: 10px; right: 10px; padding: 7px 10px; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill strong { font-size: 0.73rem; font-weight: 640; letter-spacing: 0.01em; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill span { font-size: 0.66rem; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments { top: 116px; left: 10px; right: 10px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 5px; overflow: hidden; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button { width: 100%; min-width: 0; text-align: center; font-size: 0.67rem; font-weight: 590; letter-spacing: 0.01em; padding: 8px 4px; line-height: 1.15; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail { top: 166px; right: 10px; gap: 7px; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button { width: 40px; height: 40px; border-radius: 11px; padding: 0; border-color: rgba(169, 209, 255, 0.32); background: linear-gradient(168deg, rgba(8, 19, 35, 0.86), rgba(7, 16, 29, 0.92)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 16px rgba(2,10,21,.44); }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock { left: 10px; right: 10px; bottom: 10px; padding: 7px; gap: 7px; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button em { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.02em; }

body[data-layout-mode="portrait"] #gridlyPortraitV2,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-icon-btn {
  --gridly-icon-stroke: 2.05;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 svg {
  stroke-width: var(--gridly-icon-stroke);
}

#map .leaflet-popup-content-wrapper {
  border-radius: 15px;
  border: 1px solid rgba(153, 199, 255, 0.28);
  background: linear-gradient(165deg, rgba(8, 16, 30, 0.94), rgba(5, 12, 22, 0.96));
  box-shadow: 0 14px 30px rgba(2, 9, 17, 0.55);
}
#map .leaflet-popup-tip {
  background: rgba(8, 16, 30, 0.96);
  border: 1px solid rgba(153, 199, 255, 0.24);
}
#map .leaflet-popup-close-button { color: rgba(210, 231, 255, 0.94) !important; font-size: 18px !important; padding: 4px 9px 0 0 !important; }
#map .leaflet-popup-content { margin: 11px 12px 12px; min-width: 238px; }
.gridly-popup { color: #deedff; min-width: 238px; }
.gridly-popup strong { color: #f4f9ff; font-size: 0.84rem; font-weight: 680; letter-spacing: 0.012em; margin-bottom: 3px; }
.gridly-popup span { color: #a8c2de; font-size: 0.72rem; line-height: 1.3; }
.popup-report-grid { gap: 7px; margin-top: 10px; }
.popup-report-btn { border: 1px solid rgba(173, 214, 255, 0.28); border-radius: 10px; min-height: 34px; padding: 8px 10px; color: #f3f8ff; font-size: 0.7rem; font-weight: 710; letter-spacing: 0.024em; text-transform: uppercase; }
.popup-report-btn.danger { background: linear-gradient(165deg, #a42c38, #78222b); }
.popup-report-btn.warning { background: linear-gradient(165deg, #9f6823, #7f4f15); }
.popup-report-btn.blue { background: linear-gradient(165deg, #235f96, #184770); }
.popup-report-btn.neutral { background: linear-gradient(165deg, #3f4f67, #2f3c52); }
.popup-report-btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 14px rgba(4, 11, 21, 0.44); }



/* V129.1 popup viewport anchoring */
#map .leaflet-popup-pane {
  overflow: visible;
}
#map .leaflet-popup {
  max-width: min(320px, calc(100vw - 24px));
}
#map .leaflet-popup-content-wrapper {
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(52vh, 420px);
  overflow: hidden;
}
#map .leaflet-popup-content {
  width: min(296px, calc(100vw - 48px));
  max-width: 100%;
  max-height: min(48vh, 360px);
  overflow-y: auto;
  overflow-x: hidden;
}
.gridly-popup {
  min-width: 0;
  width: 100%;
}

body[data-layout-mode="portrait"] .settings-modal-head h2,
body[data-layout-mode="portrait"] .mobile-native-surface-header h2,
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetTitle { letter-spacing: 0.01em; font-weight: 660; }
body[data-layout-mode="portrait"] .settings-modal-subtitle,
body[data-layout-mode="portrait"] .settings-modal-section p,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-tile { font-size: 0.75rem; line-height: 1.35; }
body[data-layout-mode="portrait"] .settings-modal-section h3 { font-size: 0.8rem; letter-spacing: 0.015em; }

/* V131 — Portrait V2 productization refinement (spacing, typography, restraint) */
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-sheet {
  border-color: rgba(168, 204, 246, 0.2);
  box-shadow: 0 7px 18px rgba(3, 10, 21, 0.3);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar {
  top: 10px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(5, 13, 24, 0.82), rgba(4, 10, 18, 0.87));
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brand span {
  font-size: 0.72rem;
  letter-spacing: 0.105em;
  font-weight: 700;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-watch span {
  font-size: 0.58rem;
  letter-spacing: 0.095em;
  line-height: 1.25;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill {
  top: 64px;
  padding: 8px 11px;
  background: rgba(6, 13, 24, 0.72);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill strong {
  font-size: 0.74rem;
  line-height: 1.24;
  font-weight: 655;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill span {
  font-size: 0.665rem;
  line-height: 1.3;
  letter-spacing: 0.008em;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
  top: 122px;
  padding: 4px;
  gap: 4px;
  background: linear-gradient(152deg, rgba(8, 16, 28, 0.42), rgba(6, 13, 24, 0.5));
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
  min-height: 30px;
  font-size: 0.665rem;
  font-weight: 610;
  letter-spacing: 0.015em;
  line-height: 1.18;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail {
  top: 176px;
  gap: 6px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button {
  width: 39px;
  height: 39px;
  border-radius: 11px;
  background: linear-gradient(168deg, rgba(8, 19, 35, 0.72), rgba(7, 16, 29, 0.82));
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
  bottom: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 7px 8px;
  border-radius: 15px;
  background: linear-gradient(154deg, rgba(7, 14, 25, 0.7), rgba(7, 13, 23, 0.78));
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button em {
  font-size: 0.655rem;
  font-weight: 615;
  letter-spacing: 0.018em;
  line-height: 1.2;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(155deg, rgba(89, 148, 235, 0.24), rgba(20, 64, 124, 0.14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon svg,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail svg,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-icon-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.12;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-sheet {
  bottom: 84px;
  border-radius: 18px 18px 12px 12px;
  max-height: 64vh;
  padding: 11px 11px 12px;
  background: linear-gradient(180deg, rgba(7, 15, 28, 0.92), rgba(4, 10, 20, 0.95));
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-sheet header {
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-sheet header h3 {
  font-size: 0.91rem;
  letter-spacing: 0.012em;
  font-weight: 680;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-list { gap: 9px; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-tile {
  border-radius: 11px;
  padding: 11px 12px;
  font-size: 0.74rem;
  line-height: 1.32;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-report-action {
  min-height: 50px;
  padding: 11px 10px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-report-action span {
  font-size: 0.8rem;
  line-height: 1.22;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-sheet .primary-btn,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-sheet .secondary-btn {
  min-height: 36px;
  font-size: 0.72rem;
  letter-spacing: 0.012em;
}


/* V132 — Portrait V2 icon system harmonization + header foundation */
body[data-layout-mode="portrait"] #gridlyPortraitV2 {
  --gridly-v2-control-size: 40px;
  --gridly-v2-control-radius: 12px;
  --gridly-v2-control-border: rgba(166, 204, 246, 0.28);
  --gridly-v2-control-bg: linear-gradient(170deg, rgba(8, 18, 33, 0.88), rgba(6, 14, 25, 0.94));
  --gridly-v2-control-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 7px 16px rgba(2, 8, 18, 0.34);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar {
  min-height: 44px;
  padding: 6px 10px;
  border-color: rgba(164, 201, 243, 0.24);
  box-shadow: 0 6px 14px rgba(2, 8, 18, 0.3);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brand { gap: 7px; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brand span {
  font-size: 0.72rem;
  letter-spacing: 0.125em;
  font-weight: 740;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-watch span {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-icon-btn,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon {
  border: 1px solid var(--gridly-v2-control-border);
  border-radius: var(--gridly-v2-control-radius);
  background: var(--gridly-v2-control-bg);
  box-shadow: var(--gridly-v2-control-shadow);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-icon-btn,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button {
  width: var(--gridly-v2-control-size);
  height: var(--gridly-v2-control-size);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail { gap: 8px; }
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail svg,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-icon-btn svg,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.15;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
  padding: 8px;
  gap: 6px;
  border-color: rgba(164, 201, 243, 0.24);
  box-shadow: 0 8px 16px rgba(2, 8, 18, 0.31);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
  gap: 4px;
  padding: 7px 4px 6px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon {
  width: 31px;
  height: 31px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button em {
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  font-weight: 620;
  opacity: 0.92;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-sheet,
body[data-layout-mode="portrait"] #map .leaflet-popup-content-wrapper {
  box-shadow: 0 10px 22px rgba(2, 8, 18, 0.38);
  border-color: rgba(164, 201, 243, 0.24);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .popup-report-btn,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-report-action {
  border-color: rgba(164, 201, 243, 0.24);
  box-shadow: none;
}

/* V132.1 — Portrait V2 final tightening (header/filter/dock micro-polish) */
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill {
  border-color: rgba(171, 205, 242, 0.22);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar {
  top: 9px;
  min-height: 43px;
  border-radius: 13px;
  box-shadow: 0 6px 13px rgba(2, 8, 18, 0.27);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill {
  top: 61px;
  padding: 7px 11px 8px;
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(6, 14, 26, 0.74), rgba(5, 12, 22, 0.8));
  box-shadow: 0 5px 12px rgba(2, 8, 18, 0.24);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill strong {
  font-size: 0.73rem;
  font-weight: 650;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill span {
  font-size: 0.655rem;
  letter-spacing: 0.01em;
  opacity: 0.86;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
  top: 117px;
  gap: 5px;
  padding: 4px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
  min-height: 31px;
  padding: 7px 4px;
  font-size: 0.655rem;
  font-weight: 595;
  letter-spacing: 0.012em;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button.is-active {
  font-weight: 635;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail {
  top: 171px;
  gap: 7px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
  bottom: 9px;
  padding: 7px 8px 8px;
  gap: 7px;
  border-radius: 16px;
  border-color: rgba(170, 204, 242, 0.22);
  box-shadow: 0 7px 15px rgba(2, 8, 18, 0.28);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
  gap: 3px;
  padding: 6px 4px 5px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon {
  width: 30px;
  height: 30px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon svg {
  width: 16px;
  height: 16px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button em {
  font-size: 0.645rem;
  font-weight: 625;
  line-height: 1.16;
  letter-spacing: 0.024em;
  opacity: 0.94;
}


/* V132.2 — Portrait V2 typography + top-strip easing */
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar {
  border-color: rgba(171, 205, 242, 0.2);
  box-shadow: 0 5px 11px rgba(2, 8, 18, 0.23);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brand span {
  letter-spacing: 0.108em;
  font-weight: 700;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-watch span {
  letter-spacing: 0.118em;
  font-weight: 565;
  opacity: 0.84;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill {
  border-color: rgba(171, 205, 242, 0.2);
  box-shadow: 0 4px 10px rgba(2, 8, 18, 0.2);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill strong {
  letter-spacing: 0.012em;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill span {
  letter-spacing: 0.012em;
  line-height: 1.2;
  opacity: 0.88;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
  gap: 6px;
  padding: 4px 5px;
  border-color: rgba(174, 208, 245, 0.24);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
  padding: 7px 5px;
  font-size: 0.65rem;
  letter-spacing: 0.016em;
  line-height: 1.17;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button.is-active {
  letter-spacing: 0.018em;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button em {
  letter-spacing: 0.026em;
  line-height: 1.18;
  opacity: 0.95;
}

/* V133 — Gridly brand foundation + header identity ownership (portrait only) */
body[data-layout-mode="portrait"] #gridlyPortraitV2 {
  --gridly-v2-control-border: rgba(162, 198, 238, 0.27);
  --gridly-v2-control-bg: linear-gradient(168deg, rgba(8, 18, 33, 0.9), rgba(6, 14, 25, 0.95));
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar {
  min-height: 42px;
  padding: 6px 11px 6px 9px;
  border-color: rgba(164, 198, 236, 0.24);
  box-shadow: 0 5px 11px rgba(2, 8, 18, 0.24);
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-header-region {
  min-width: 0;
  display: flex;
  align-items: center;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-header-left {
  justify-content: flex-start;
  z-index: 2;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-header-center {
  position: static;
  transform: none;
  justify-content: flex-start;
  margin-left: auto;
  padding-right: 1px;
  pointer-events: none;
  z-index: 1;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-header-right {
  display: none;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brand {
  min-width: 0;
  padding-top: 1px;
  margin-right: 0;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brand img {
  width: clamp(132px, 36vw, 170px);
  height: auto;
  max-width: 100%;
  max-height: 30px;
  display: block;
  object-fit: contain;
  object-position: left center;
  image-rendering: -webkit-optimize-contrast;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-watch {
  padding-top: 0;
  transform: translateY(0.5px);
  white-space: nowrap;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-watch span {
  font-size: 0.54rem;
  letter-spacing: 0.118em;
  color: rgba(188, 214, 242, 0.82);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-icon-btn {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
  border-color: rgba(164, 198, 236, 0.23);
}
@media (max-width: 380px) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brand img {
    width: clamp(120px, 35vw, 146px);
    max-height: 28px;
  }
}

body[data-layout-mode="portrait"].popup-reporting-suppress-live-panel #reportSection.report-drawer,
body[data-layout-mode="portrait"] #reportSection.report-drawer[data-popup-suppressed="1"] {
  opacity: 0 !important;
  transform: translateY(120%) !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* V139 corridor command intelligence */
.corridor-command-status strong{letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}
.corridor-command.primary-corridor{border-color:rgba(255,154,122,.45);background:rgba(32,18,15,.45)}
.corridor-command-title{display:block;font-size:1rem;letter-spacing:.06em}
.corridor-command-severity{font-size:.72rem!important;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,216,196,.88)}
.corridor-command .alert-row-details-list{margin:6px 0 0 0;padding-left:16px}
.corridor-command .alert-row-details-list li{margin:2px 0;line-height:1.25}
.corridor-command-route-watch{border-color:rgba(127,219,255,.35)}

/* V139.1 commute command hierarchy (portrait mobile alerts surface only) */
.gridly-v2-command-surface { display: grid; gap: 10px; }
.gridly-v2-command-hero { background: linear-gradient(165deg, rgba(125, 193, 255, 0.2), rgba(20, 50, 92, 0.55)); border: 1px solid rgba(170, 218, 255, 0.42); border-radius: 16px; padding: 14px; }
.gridly-v2-command-kicker { margin: 0 0 6px; font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(199, 225, 255, 0.88); }
.gridly-v2-command-hero h4 { margin: 0; font-size: 1.25rem; line-height: 1.05; letter-spacing: 0.01em; color: #fff; }
.gridly-v2-command-hero p { margin: 8px 0 0; font-size: 0.82rem; color: rgba(226, 240, 255, 0.93); }
.gridly-v2-command-primary-action { width: 100%; font-weight: 680; }
.gridly-v2-command-primary-corridor,
.gridly-v2-command-secondary,
.gridly-v2-command-cleared { background: rgba(152, 198, 255, 0.08); border: 1px solid rgba(162, 207, 255, 0.18); border-radius: 14px; padding: 11px 12px; }
.gridly-v2-command-section-label { margin: 0 0 4px; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(179, 208, 238, 0.84); }
.gridly-v2-command-primary-corridor strong { display: block; font-size: 1rem; color: #f5f9ff; }
.gridly-v2-corridor-state { display: inline-block; margin-top: 3px; font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase; color: #ffd698; }
.gridly-v2-command-primary-corridor p { margin: 6px 0 0; font-size: 0.78rem; color: rgba(220, 236, 255, 0.94); }
.gridly-v2-command-primary-corridor ul,
.gridly-v2-command-cleared ul { margin: 7px 0 0; padding-left: 16px; display: grid; gap: 4px; }
.gridly-v2-command-primary-corridor li,
.gridly-v2-command-cleared li { font-size: 0.75rem; color: rgba(205, 225, 247, 0.95); }
.gridly-v2-command-secondary { display: grid; gap: 6px; }
.gridly-v2-secondary-item { display: grid; gap: 2px; }
.gridly-v2-secondary-item strong { font-size: 0.8rem; color: rgba(239, 248, 255, 0.95); }
.gridly-v2-secondary-item span { font-size: 0.72rem; color: rgba(184, 214, 245, 0.88); }

/* V146F — Report Road Hazard panel visual parity with V2 settings/route sheets */
#gridlyHazardPanel.gridly-hazard-panel {
  border: 1px solid rgba(173, 206, 244, 0.2);
  background: linear-gradient(180deg, rgba(8, 16, 28, 0.94), rgba(5, 10, 19, 0.97));
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), 0 2px 10px rgba(3, 10, 20, 0.2);
  padding: 10px 10px 8px;
}
#gridlyHazardPanel .hazard-panel-header {
  min-height: 42px;
  padding: 6px 10px;
  margin: -10px -10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#gridlyHazardPanel .hazard-panel-header strong { font-size: 0.94rem; letter-spacing: 0.01em; }
#gridlyHazardPanel .hazard-choice-grid { gap: 6px; }
#gridlyHazardPanel .hazard-choice-grid button,
#gridlyHazardPanel .hazard-subtype-grid button,
#gridlyHazardPanel .hazard-panel-placement-actions button {
  border-radius: 10px;
  border: 1px solid rgba(167, 196, 235, 0.2);
}
#gridlyHazardPanel .hazard-subtype-panel {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(167, 196, 235, 0.16);
  border-radius: 12px;
  background: rgba(7, 15, 25, 0.62);
}
#gridlyHazardPanel .hazard-subtype-panel[hidden] { display: none; }
#gridlyHazardPanel .hazard-subtype-panel strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  color: rgba(238, 247, 255, 0.94);
}
#gridlyHazardPanel .hazard-subtype-grid {
  display: grid;
  gap: 6px;
}
#gridlyHazardPanel .hazard-subtype-grid button.selected,
#gridlyHazardPanel .hazard-subtype-grid button[aria-pressed="true"] {
  border-color: rgba(97, 213, 255, 0.72);
  background: rgba(38, 128, 188, 0.3);
  color: #f2fbff;
}
#gridlyHazardPanel .hazard-panel-placement-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
  align-items: stretch;
}
#gridlyHazardPanel .hazard-panel-placement-actions [data-action="cancel-hazard-placement"] {
  grid-column: 1 / -1;
}
#gridlyHazardPanel .hazard-panel-placement-actions [data-action="submit-hazard"] {
  background: linear-gradient(135deg, #1e7ed6, #2f9bf0);
  color: #f4f9ff;
}
@media (max-width: 560px) {
  #gridlyHazardPanel.gridly-hazard-panel.visible {
    max-height: min(62dvh, 520px);
    padding: 10px 10px 8px;
  }
}


.community-pulse-historical-context {
  margin: 0.25rem 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  line-height: 1.25;
}

.community-pulse-historical-context[hidden] {
  display: none !important;
}

/* V178.1 Community Pulse surface — passive community-mode awareness above the map */
.community-pulse-surface {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 10px 13px;
  border: 1px solid rgba(139, 194, 255, 0.22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(9, 23, 40, 0.76), rgba(8, 17, 30, 0.66));
  box-shadow: 0 12px 28px rgba(3, 9, 20, 0.22), inset 0 1px 0 rgba(218, 240, 255, 0.08);
  color: #eef8ff;
}

.community-pulse-surface[hidden] {
  display: none !important;
}

.community-pulse-kicker {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(118, 226, 255, 0.22);
  border-radius: 999px;
  background: rgba(100, 210, 255, 0.1);
  color: #8eefff;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.community-pulse-copy {
  min-width: 0;
}

.community-pulse-copy strong {
  display: block;
  font-size: 0.94rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.community-pulse-copy p {
  margin: 2px 0 0;
  color: rgba(220, 234, 248, 0.72);
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-layout-mode="portrait"] .community-pulse-surface,
body[data-layout-mode="mobile"] .community-pulse-surface {
  margin: 6px 8px 8px;
  padding: 8px 10px;
  border-radius: 14px;
}

body[data-layout-mode="portrait"] .community-pulse-kicker,
body[data-layout-mode="mobile"] .community-pulse-kicker {
  font-size: 0.62rem;
  padding: 4px 7px;
}

body[data-layout-mode="portrait"] .community-pulse-copy strong,
body[data-layout-mode="mobile"] .community-pulse-copy strong {
  font-size: 0.84rem;
}

body[data-layout-mode="portrait"] .community-pulse-copy p,
body[data-layout-mode="mobile"] .community-pulse-copy p {
  display: -webkit-box;
  max-height: 2.5em;
  font-size: 0.7rem;
  line-height: 1.22;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* V181.2 — Portrait V2 top-awareness microline */
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-top-awareness-microline {
  display: block;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.64rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: rgba(183, 211, 241, 0.8);
}
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-top-awareness-microline[hidden] {
  display: none !important;
}

/* V181.3 — Portrait V2 top-header background isolation / bleed guard */
body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 {
  --gridly-v2-top-shield-height: calc(158px + env(safe-area-inset-top, 0px));
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--gridly-v2-top-shield-height);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #050b16 0%, #06101d 74%, rgba(6, 16, 29, 0.96) 100%);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-topbar,
body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-status-pill,
body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-segments {
  isolation: isolate;
  contain: paint;
  background-clip: padding-box;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-topbar {
  z-index: 3;
  background: linear-gradient(165deg, #071322 0%, #050c17 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(220, 239, 255, 0.08);
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-status-pill {
  z-index: 3;
  background: linear-gradient(165deg, #071322 0%, #050c17 100%);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(220, 239, 255, 0.08);
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-segments {
  z-index: 3;
  background: linear-gradient(165deg, #081524 0%, #050d18 100%);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(220, 239, 255, 0.08);
}


/* V203 emergency: keep Portrait V2 as zero-size host so only fixed controls form interactive islands. */
body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 {
  inset: 0 auto auto 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: auto;
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-bottom-dock {
  pointer-events: auto;
  touch-action: manipulation;
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-bottom-dock button,
body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-bottom-dock button[data-action="settings"],
body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-bottom-dock button[data-v2-sheet="settings"] {
  pointer-events: auto;
  touch-action: manipulation;
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyCommunityPulseSurface {
  position: relative;
  z-index: 0;
  pointer-events: none;
}

.gridly-alert-focused-marker {
  filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.95));
  z-index: 1000 !important;
}

.gridly-alert-focused-marker .gridly-marker,
.gridly-alert-focused-marker .gridly-hazard-marker,
.gridly-alert-focused-marker .gridly-marker-wrap {
  outline: 2px solid rgba(147, 197, 253, 0.95);
  outline-offset: 3px;
}

/* V198.4 settings-to-route visibility: allow Route Setup to own the top surface after Settings actions. */
body[data-layout-mode="portrait"].gridly-v2-surface-containment.route-setup-open #routeSetupModal:not([hidden]) {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 100001 !important;
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment.route-setup-open #routeSetupModal:not([hidden]) #routeSetupModalBackdrop,
body[data-layout-mode="portrait"].gridly-v2-surface-containment.route-setup-open #routeSetupModal:not([hidden]) .route-setup-modal-backdrop {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Gridly V202 visual consistency polish */
.route-watch-strip-copy {
  display: grid;
  gap: 5px;
}

.route-watch-status-line {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}

.route-watch-arrow {
  color: rgba(142, 239, 255, 0.78);
  font-weight: 800;
}

.route-watch-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.route-watch-metrics span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.route-watch-metrics b {
  color: rgba(205, 224, 241, 0.76);
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.route-watch-metrics em {
  color: #f3fbff;
  font-style: normal;
  font-weight: 750;
  text-align: right;
}

.settings-place-card strong {
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.settings-clean-note {
  color: rgba(185, 207, 226, 0.7) !important;
  font-size: 0.72rem;
}

.settings-field-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(142, 239, 255, 0.18);
  background: rgba(142, 239, 255, 0.08);
  color: rgba(208, 241, 255, 0.9);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.alert-row-main {
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr) auto;
  align-items: start;
}

.alert-item strong,
.gridly-alert-title,
.gridly-alert-headline {
  text-transform: none !important;
  letter-spacing: 0.01em;
}

.alert-severity-chip {
  min-width: 64px;
  text-align: center;
  text-transform: uppercase;
}

.alert-row-time {
  padding-top: 1px;
  text-align: right;
  white-space: nowrap;
}

.alert-row-subline,
.gridly-alert-subtitle {
  color: rgba(199, 211, 226, 0.82);
}

@media (max-width: 760px) {
  .route-watch-metrics {
    grid-template-columns: 1fr;
  }
}

/* V206.3 — compact historical intelligence entry + bottom sheet content. */
.gridly-intelligence-entry-chip {
  pointer-events: auto;
  position: fixed;
  top: calc(158px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 168px;
  max-width: min(330px, calc(100vw - 84px));
  min-height: 46px;
  padding: 8px 10px 8px 12px;
  border: 1px solid rgba(132, 199, 255, 0.28);
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(7, 19, 34, 0.92), rgba(6, 13, 25, 0.84));
  box-shadow: 0 10px 24px rgba(3, 8, 18, 0.24), inset 0 1px 0 rgba(218, 238, 255, 0.1);
  color: #eef7ff;
  z-index: 2;
  cursor: pointer;
  touch-action: manipulation;
  text-align: left;
}

.gridly-intelligence-entry-chip:active {
  transform: translateY(1px) scale(0.99);
}

.gridly-intelligence-entry-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.gridly-intelligence-entry-copy strong {
  font-size: 0.86rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.gridly-intelligence-entry-copy span {
  color: rgba(205, 228, 250, 0.78);
  font-size: 0.68rem;
  line-height: 1.15;
}

.gridly-intelligence-entry-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: rgba(191, 218, 247, 0.84);
  font-size: 0.58rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gridly-intelligence-preview-badge,
.gridly-intelligence-entry-count {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(120, 226, 255, 0.26);
  border-radius: 999px;
  background: rgba(93, 201, 255, 0.12);
  color: #9af0ff;
}

.gridly-intelligence-entry-count {
  min-width: 22px;
  text-align: center;
  border-color: rgba(170, 205, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #eaf6ff;
}

.gridly-historical-intelligence-sheet {
  display: grid;
  gap: 11px;
}

.gridly-historical-intelligence-subtitle {
  margin: -2px 0 0;
  color: rgba(224, 238, 252, 0.86);
  font-size: 0.78rem;
  line-height: 1.42;
}

.gridly-historical-intelligence-note,
.gridly-historical-intelligence-context-note {
  margin: -4px 0 1px;
  color: rgba(178, 207, 236, 0.78);
  font-size: 0.7rem;
  font-weight: 680;
  line-height: 1.34;
}

.gridly-historical-intelligence-list {
  display: grid;
  gap: 8px;
}

.gridly-historical-intelligence-row,
.gridly-historical-intelligence-empty {
  border: 1px solid rgba(178, 211, 255, 0.13);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.028));
  color: #edf7ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.gridly-historical-intelligence-row {
  overflow: hidden;
}

.gridly-historical-intelligence-row[open] {
  border-color: rgba(132, 199, 255, 0.24);
  background: linear-gradient(180deg, rgba(93, 201, 255, 0.085), rgba(255, 255, 255, 0.032));
}

.gridly-historical-intelligence-empty {
  display: grid;
  gap: 7px;
  padding: 13px 14px;
}

.gridly-historical-intelligence-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 11px 12px 11px 13px;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}

.gridly-historical-intelligence-summary::-webkit-details-marker {
  display: none;
}

.gridly-historical-intelligence-row-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.gridly-historical-intelligence-category {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 18px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(93, 201, 255, 0.12);
  color: #9feaff;
  font-size: 0.58rem;
  font-weight: 820;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.gridly-historical-intelligence-row strong,
.gridly-historical-intelligence-empty strong {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.14;
  letter-spacing: -0.012em;
}

.gridly-historical-intelligence-location {
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 820;
  line-height: 1.18;
}

.gridly-historical-intelligence-pattern {
  color: rgba(242, 248, 255, 0.92);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.2;
}

.gridly-historical-intelligence-pattern span,
.gridly-historical-intelligence-line span {
  display: block;
  margin-bottom: 1px;
  color: rgba(159, 234, 255, 0.78);
  font-size: 0.58rem;
  font-weight: 820;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-transform: uppercase;
}

.gridly-historical-intelligence-line,
.gridly-historical-intelligence-row p,
.gridly-historical-intelligence-empty p {
  margin: 0;
  color: rgba(222, 236, 250, 0.82);
  font-size: 0.74rem;
  line-height: 1.32;
}

.gridly-historical-intelligence-row p.gridly-historical-intelligence-context-note {
  color: rgba(178, 207, 236, 0.78);
  font-size: 0.7rem;
  font-weight: 680;
  line-height: 1.34;
}

.gridly-historical-intelligence-expand {
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(183, 220, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.gridly-historical-intelligence-expand::before,
.gridly-historical-intelligence-expand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: rgba(230, 245, 255, 0.9);
  transform: translate(-50%, -50%);
}

.gridly-historical-intelligence-expand::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.gridly-historical-intelligence-row[open] .gridly-historical-intelligence-expand::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.gridly-historical-intelligence-details {
  display: grid;
  gap: 10px;
  padding: 0 13px 14px;
}

.gridly-historical-intelligence-details .gridly-historical-intelligence-context-note {
  margin: -2px 0 -2px;
}

.gridly-historical-intelligence-detail-title {
  display: grid;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid rgba(178, 211, 255, 0.1);
}

.gridly-historical-intelligence-detail-title span {
  color: #9feaff;
  font-size: 0.6rem;
  font-weight: 820;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.gridly-historical-intelligence-detail-title em {
  color: rgba(244, 250, 255, 0.94);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 780;
}

.gridly-historical-intelligence-stats {
  display: grid;
  gap: 0;
  border: 1px solid rgba(178, 211, 255, 0.1);
  border-radius: 12px;
  background: rgba(5, 14, 26, 0.18);
  overflow: hidden;
}

.gridly-historical-intelligence-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
}

.gridly-historical-intelligence-stat + .gridly-historical-intelligence-stat {
  border-top: 1px solid rgba(178, 211, 255, 0.09);
}

.gridly-historical-intelligence-stat span {
  color: rgba(183, 209, 234, 0.82);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.2;
}

.gridly-historical-intelligence-stat strong {
  color: rgba(244, 250, 255, 0.94);
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: right;
}

.gridly-historical-intelligence-stat-muted strong {
  color: rgba(211, 228, 244, 0.8);
  font-weight: 720;
}

@media (max-width: 420px) {
  .gridly-intelligence-entry-chip {
    min-width: 150px;
    max-width: calc(100vw - 76px);
    padding: 8px 9px 8px 11px;
  }

  .gridly-intelligence-entry-meta #gridlyIntelligencePreviewCategory {
    display: none;
  }

  .gridly-historical-intelligence-summary {
    min-height: 72px;
    padding: 10px 11px 10px 12px;
  }

  .gridly-historical-intelligence-line,
  .gridly-historical-intelligence-row p,
  .gridly-historical-intelligence-empty p {
    font-size: 0.72rem;
  }
}

/* V206.18 — Settings panel functionality + mobile visual polish. */
body.gridly-theme-light {
  --bg: #f4f8fb;
  --bg-elev: #ffffff;
  --bg-panel: #eef5fa;
  --card: rgba(255, 255, 255, 0.9);
  --card-soft: rgba(15, 41, 67, 0.05);
  --border: rgba(27, 58, 87, 0.18);
  --text: #0d1b2a;
  --muted: #516473;
  background:
    radial-gradient(circle at 18% -10%, rgba(57, 243, 164, 0.18), transparent 30%),
    radial-gradient(circle at 82% 0%, rgba(102, 232, 255, 0.16), transparent 28%),
    linear-gradient(180deg, #f6fbff 0%, #edf5fa 48%, #e9f0f5 100%);
  color: var(--text);
}

body.gridly-theme-dark,
body.gridly-theme-system {
  color: var(--text);
}

@media (prefers-color-scheme: light) {
  body.gridly-theme-system {
    --bg: #f4f8fb;
    --bg-elev: #ffffff;
    --bg-panel: #eef5fa;
    --card: rgba(255, 255, 255, 0.9);
    --card-soft: rgba(15, 41, 67, 0.05);
    --border: rgba(27, 58, 87, 0.18);
    --text: #0d1b2a;
    --muted: #516473;
    background:
      radial-gradient(circle at 18% -10%, rgba(57, 243, 164, 0.18), transparent 30%),
      radial-gradient(circle at 82% 0%, rgba(102, 232, 255, 0.16), transparent 28%),
      linear-gradient(180deg, #f6fbff 0%, #edf5fa 48%, #e9f0f5 100%);
    color: var(--text);
  }
}

:root[data-gridly-text-size="standard"],
body.gridly-text-standard { --gridly-app-font-scale: 1; --gridly-settings-text-scale: 1; --gridly-settings-density-scale: 1; }

:root[data-gridly-text-size="large"],
body.gridly-text-large { --gridly-app-font-scale: 1.15; --gridly-settings-text-scale: 1.15; --gridly-settings-density-scale: 1.04; }

:root[data-gridly-text-size="compact"],
body.gridly-text-compact { --gridly-app-font-scale: 0.92; --gridly-settings-text-scale: 0.92; --gridly-settings-density-scale: 0.92; }

:root[data-gridly-text-size="extra-large"],
body.gridly-text-extra-large { --gridly-app-font-scale: 1.28; --gridly-settings-text-scale: 1.28; --gridly-settings-density-scale: 1.08; }

body:is(.gridly-text-large, .gridly-text-compact, .gridly-text-extra-large) :is(.settings-modal-card, .gridly-settings-sheet, #gridlyPortraitV2, .mobile-alerts-panel, .route-setup-modal-card, .gridly-welcome-sheet) {
  font-size: 1rem;
}

.settings-toggle-grid {
  align-items: stretch;
}

.settings-toggle-row {
  min-height: 46px;
  cursor: pointer;
  line-height: 1.25;
}

.settings-toggle-row input[type="checkbox"] {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  accent-color: var(--accent);
}

.settings-toggle-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-select-grid label > span:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.settings-modal-section {
  margin-top: 12px;
}

.settings-modal-section + .settings-modal-section {
  margin-top: 14px;
}

.settings-modal-section h3 {
  margin-top: 0;
  margin-bottom: 6px;
}

@media (max-width: 700px), (max-width: 1100px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .settings-modal-subtitle {
    margin: 10px 14px 12px !important;
    padding: 10px 12px;
    border: 1px solid rgba(164, 205, 247, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
  }

  body[data-layout-mode="portrait"] .settings-modal-section,
  body[data-layout-mode="portrait"] .gridly-settings-sheet .settings-modal-section {
    margin: 0 12px 12px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(166, 204, 246, 0.16) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)) !important;
  }

  body[data-layout-mode="portrait"] .settings-toggle-grid,
  body[data-layout-mode="portrait"] .gridly-settings-sheet .settings-toggle-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  body[data-layout-mode="portrait"] .settings-toggle-row,
  body[data-layout-mode="portrait"] .gridly-settings-sheet .settings-toggle-row {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.045) !important;
  }

  body[data-layout-mode="portrait"] .settings-toggle-row input[type="checkbox"] {
    inline-size: 20px !important;
    block-size: 20px !important;
  }

  body[data-layout-mode="portrait"] .settings-toggle-row span {
    font-size: 0.86rem !important;
    font-weight: 740;
  }

  body[data-layout-mode="portrait"] .settings-select-grid,
  body[data-layout-mode="portrait"] .gridly-settings-sheet .settings-select-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body[data-layout-mode="portrait"] .settings-select-grid label {
    padding: 10px 12px !important;
    border-radius: 13px !important;
  }

  body[data-layout-mode="portrait"] .settings-placeholder-note,
  body[data-layout-mode="portrait"] .settings-save-status {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
  }
}

body.gridly-theme-light .settings-modal-card,
body.gridly-theme-light .gridly-settings-sheet .settings-modal-section,
body.gridly-theme-light .settings-modal-section,
body.gridly-theme-light .settings-place-card,
body.gridly-theme-light .settings-toggle-row,
body.gridly-theme-light .settings-select-grid label {
  color: var(--text);
  border-color: rgba(27, 58, 87, 0.16) !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

body.gridly-theme-light .settings-modal-head {
  background: rgba(247, 252, 255, 0.94) !important;
  border-bottom-color: rgba(27, 58, 87, 0.12) !important;
}

body.gridly-theme-light .settings-modal-backdrop {
  background: rgba(14, 35, 55, 0.28);
}

body.gridly-theme-light :is(.settings-modal-subtitle, .settings-placeholder-note, .settings-save-status, .settings-place-label, .settings-select-grid label, .settings-place-card small) {
  color: var(--muted) !important;
}

body.gridly-theme-light .settings-select-grid select,
body.gridly-theme-light .settings-select-grid input {
  color: #0d1b2a;
  background: #ffffff;
  border-color: rgba(27, 58, 87, 0.2);
}
body.gridly-theme-light .gridly-welcome-sheet {
  color: #102234;
  border-color: rgba(27, 58, 87, 0.14);
  background: linear-gradient(145deg, rgba(249, 253, 255, 0.97), rgba(231, 242, 250, 0.94));
}
body.gridly-theme-light .gridly-welcome-step p { color: #435b72; }
body.gridly-theme-light .gridly-welcome-step h2,
body.gridly-theme-light .gridly-welcome-tagline,
body.gridly-theme-light .gridly-welcome-watching-label,
body.gridly-theme-light .gridly-welcome-final-note,
body.gridly-theme-light .gridly-welcome-final-copy strong { color: #102234 !important; }
body.gridly-theme-light .gridly-welcome-final-copy {
  border-color: rgba(27, 58, 87, 0.14);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(232, 246, 255, 0.68));
}
body.gridly-theme-light .gridly-welcome-final-copy span { color: #347061; }
body.gridly-theme-light :is(.gridly-welcome-hero-copy, .gridly-welcome-impact-list, .gridly-welcome-route-stack, .gridly-welcome-checklist, .gridly-welcome-personalization-grid label) {
  color: #102234;
  border-color: rgba(27, 58, 87, 0.14);
  background: rgba(255, 255, 255, 0.72);
}
body.gridly-theme-light .gridly-welcome-personalization-grid :is(select, input) {
  color: #102234;
  background: #ffffff;
  border-color: rgba(27, 58, 87, 0.16);
}
body.gridly-theme-light .gridly-welcome-name-field small { color: #61778c; }

/* V206.19 — Settings Route Watch saved-place card polish */
.settings-modal-section#settingsSavedPlacesSection,
.gridly-settings-sheet .settings-modal-section:first-of-type {
  padding-top: 2px;
}

.settings-place-grid {
  gap: 12px;
  margin-top: 12px;
}

.settings-place-card {
  position: relative;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  border-color: rgba(142, 239, 255, 0.18);
  background:
    radial-gradient(circle at 18% 0%, rgba(67, 230, 160, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.032));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.16);
}

.settings-place-card-anchor::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(67, 230, 160, 0.95), rgba(142, 239, 255, 0.28));
  opacity: 0.9;
}

.settings-place-label {
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid rgba(142, 239, 255, 0.2);
  border-radius: 999px;
  background: rgba(142, 239, 255, 0.08);
  color: rgba(218, 246, 255, 0.88);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  line-height: 1;
}

.settings-place-card strong {
  display: block;
  min-width: 0;
  color: #f4fbff;
  font-size: clamp(0.98rem, 2vw, 1.08rem);
  font-weight: 820;
  letter-spacing: 0.005em;
  line-height: 1.22;
  overflow-wrap: anywhere;
  word-break: normal;
}

.settings-place-card small {
  min-width: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.settings-place-card .settings-clean-note {
  margin-top: -2px;
}

.settings-place-action,
.settings-place-card .gridly-v2-tile.settings-place-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 34px;
  margin-top: 2px;
  padding: 8px 12px;
  border: 1px solid rgba(142, 239, 255, 0.25);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(142, 239, 255, 0.14), rgba(142, 239, 255, 0.06));
  color: #eaf9ff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.settings-place-action:hover,
.settings-place-action:focus-visible,
.settings-place-card .gridly-v2-tile.settings-place-action:hover,
.settings-place-card .gridly-v2-tile.settings-place-action:focus-visible {
  border-color: rgba(142, 239, 255, 0.46);
  background: linear-gradient(180deg, rgba(142, 239, 255, 0.22), rgba(67, 230, 160, 0.09));
  transform: translateY(-1px);
}

.settings-saved-places-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  padding-block: 12px;
  background: linear-gradient(135deg, rgba(67, 230, 160, 0.085), rgba(142, 239, 255, 0.04));
}

.settings-saved-places-card .settings-place-action {
  margin-top: 0;
  white-space: nowrap;
}

.settings-saved-places-list {
  gap: 10px;
  margin-top: 12px;
  padding-top: 2px;
}

.settings-saved-place-row {
  padding: 10px 12px;
  border: 1px solid rgba(142, 239, 255, 0.13);
  border-radius: 14px;
  background: rgba(12, 24, 38, 0.68);
}

@media (max-width: 640px), (max-width: 1100px) and (orientation: portrait) {
  .settings-place-grid,
  body[data-layout-mode="portrait"] .gridly-settings-sheet .settings-place-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  .settings-place-card,
  body[data-layout-mode="portrait"] .gridly-settings-sheet .settings-place-card {
    padding: 13px !important;
    border-radius: 16px !important;
  }

  .settings-saved-places-card,
  body[data-layout-mode="portrait"] .gridly-settings-sheet .settings-saved-places-card {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-saved-places-card .settings-place-action,
  body[data-layout-mode="portrait"] .gridly-settings-sheet .settings-saved-places-card .settings-place-action {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

body.gridly-theme-light .settings-place-card {
  border-color: rgba(27, 58, 87, 0.14) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(26, 128, 96, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 250, 255, 0.82)) !important;
  box-shadow: 0 12px 26px rgba(20, 42, 64, 0.08);
}

body.gridly-theme-light .settings-place-card strong {
  color: #12263a;
}

body.gridly-theme-light .settings-place-label {
  border-color: rgba(27, 99, 132, 0.18);
  background: rgba(27, 99, 132, 0.07);
  color: #24506f !important;
}

body.gridly-theme-light .settings-place-action,
body.gridly-theme-light .settings-place-card .gridly-v2-tile.settings-place-action {
  border-color: rgba(27, 99, 132, 0.2);
  background: linear-gradient(180deg, rgba(27, 99, 132, 0.09), rgba(27, 99, 132, 0.045));
  color: #183a52;
}

/* Gridly first-run welcome onboarding */
.gridly-welcome-overlay[hidden] { display: none !important; }
.gridly-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  pointer-events: auto;
  touch-action: manipulation;
  place-items: end center;
  padding: 18px;
  min-height: 100dvh;
  color: #f7fbff;
}
.gridly-welcome-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 10%, rgba(74, 164, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(3, 8, 18, 0.62), rgba(3, 8, 18, 0.9));
  backdrop-filter: blur(12px);
}
.gridly-welcome-sheet {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  width: min(100%, 520px);
  max-height: min(94dvh, 700px);
  overflow-y: auto;
  border: 1px solid rgba(156, 211, 255, 0.2);
  border-radius: 28px;
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(12, 28, 48, 0.94), rgba(8, 16, 30, 0.92)),
    rgba(8, 18, 32, 0.86);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.gridly-welcome-header,
.gridly-welcome-footer,
.gridly-welcome-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gridly-welcome-header {
  position: relative;
  display: grid;
  gap: 14px;
  justify-items: center;
  margin: 0 0 20px;
  padding: 4px 48px 16px;
  border-bottom: 1px solid rgba(156, 211, 255, 0.1);
}
.gridly-welcome-header::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(117, 241, 211, 0.42), transparent);
}
.gridly-welcome-brand-hero {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
}
.gridly-welcome-brand {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 2px 10px 0;
}
.gridly-welcome-brand::before {
  content: "";
  position: absolute;
  inset: 12% -12% 4%;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(74, 164, 255, 0.2), rgba(105, 240, 207, 0.08) 42%, transparent 72%);
  filter: blur(14px);
}
.gridly-welcome-brand img {
  width: clamp(132px, 42vw, 170px);
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.22));
}
.gridly-welcome-brand-promise {
  margin: 0;
  color: #ffffff;
  max-width: 18rem;
  font-size: clamp(1.05rem, 3.4vw, 1.24rem);
  line-height: 1.28;
  letter-spacing: 0.01em;
  font-weight: 720;
  text-wrap: balance;
}
.gridly-welcome-signal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  max-width: min(100%, 21rem);
  padding: 7px 13px;
  border: 1px solid rgba(156, 211, 255, 0.18);
  border-radius: 999px;
  color: rgba(235, 246, 255, 0.84);
  background: rgba(255, 255, 255, 0.065);
  font-size: 0.78rem;
  line-height: 1.28;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  font-weight: 820;
}
.gridly-welcome-mark {
  position: relative;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #72d8ff;
  box-shadow: 0 0 16px rgba(114, 216, 255, 0.65);
}
.gridly-welcome-mark::before,
.gridly-welcome-mark::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(92, 186, 255, 0.26);
  border-radius: 999px;
  animation: gridlyWelcomePulse 3.2s ease-out infinite;
}
.gridly-welcome-mark::after { animation-delay: 1.35s; }
.gridly-welcome-mark span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e5fbff;
}
@keyframes gridlyWelcomePulse {
  0% { transform: scale(0.74); opacity: 0.55; }
  100% { transform: scale(1.55); opacity: 0; }
}
.gridly-welcome-skip {
  position: absolute;
  top: 2px;
  right: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: rgba(216, 234, 255, 0.62);
  background: rgba(255, 255, 255, 0.028);
  font-size: 0.82rem;
  font-weight: 780;
}
.gridly-welcome-progress {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 360px);
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(156, 211, 255, 0.18);
  border-radius: 999px;
  background: rgba(3, 11, 22, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 24px rgba(0, 0, 0, 0.16);
}
.gridly-welcome-progress span {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(207, 231, 255, 0.17);
  overflow: hidden;
}
.gridly-welcome-progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(90deg, rgba(123, 203, 255, 0.95), rgba(117, 241, 211, 0.88));
  box-shadow: 0 0 18px rgba(105, 240, 207, 0.22);
  transition: opacity 180ms ease;
}
.gridly-welcome-progress span.is-active::after,
.gridly-welcome-progress span.is-complete::after { opacity: 1; }
.gridly-welcome-steps { min-height: 330px; }
.gridly-welcome-step {
  display: grid;
  gap: 16px;
  padding: 2px 2px 34px;
}
.gridly-welcome-step[hidden] { display: none !important; }
.gridly-welcome-step h2 { margin: 0; max-width: 11ch; font-size: clamp(1.9rem, 7.4vw, 2.85rem); line-height: 1.08; letter-spacing: -0.038em; font-weight: 760; text-wrap: balance; }
.gridly-welcome-step p { margin: 0; color: rgba(226, 239, 255, 0.84); font-size: 1.02rem; line-height: 1.62; text-wrap: pretty; }
.gridly-welcome-step > p:not(.eyebrow) { max-width: 33rem; }
.gridly-welcome-step .eyebrow { color: #8bdcff; font-size: 0.73rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 780; }
.gridly-welcome-tagline { color: #ffffff !important; max-width: 18rem; font-weight: 740; font-size: clamp(1.18rem, 4.4vw, 1.46rem) !important; line-height: 1.3 !important; letter-spacing: -0.018em; text-wrap: balance; }
.gridly-welcome-hero-copy p:not(.gridly-welcome-tagline) { color: rgba(226, 239, 255, 0.78); max-width: 28rem; font-size: 0.98rem; line-height: 1.58; }
.gridly-welcome-hero-copy,
.gridly-welcome-impact-list,
.gridly-welcome-route-stack,
.gridly-welcome-checklist {
  border: 1px solid rgba(156, 211, 255, 0.16);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.gridly-welcome-hero-copy { display: grid; gap: 12px; padding: 18px; }
.gridly-welcome-impact-list { display: grid; gap: 10px; padding: 18px; color: #ffffff; font-size: 1.06rem; font-weight: 760; }

.gridly-welcome-personalization-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gridly-welcome-personalization-grid label,
.settings-select-grid input {
  min-width: 0;
}
.gridly-welcome-personalization-grid label {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(156, 211, 255, 0.14);
  border-radius: 20px;
  color: rgba(226, 239, 255, 0.82);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.82rem;
  font-weight: 760;
}
.gridly-welcome-personalization-grid select,
.gridly-welcome-personalization-grid input,
.settings-select-grid input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(156, 211, 255, 0.2);
  border-radius: 12px;
  padding: 0 12px;
  color: #f8fbff;
  background: rgba(4, 12, 24, 0.62);
  font: inherit;
}
.gridly-welcome-name-field { grid-column: 1 / -1; }
.gridly-welcome-name-field small {
  color: rgba(226, 239, 255, 0.64);
  font-size: 0.75rem;
  line-height: 1.4;
}
.gridly-welcome-preview-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(105, 240, 207, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(105, 240, 207, 0.14), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(74, 164, 255, 0.055));
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.gridly-welcome-preview-card[data-gridly-theme="light"] {
  color: #102234;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(232, 246, 255, 0.86));
  border-color: rgba(27, 58, 87, 0.14);
}
.gridly-welcome-preview-card[data-gridly-text-size="compact"] { font-size: 0.9em; }
.gridly-welcome-preview-card[data-gridly-text-size="large"] { font-size: 1.1em; }
.gridly-welcome-preview-greeting { color: inherit !important; font-weight: 780; font-size: 1.16em !important; line-height: 1.3 !important; }
.gridly-welcome-preview-place { color: rgba(226, 239, 255, 0.72) !important; font-size: 0.92em !important; line-height: 1.35 !important; }
.gridly-welcome-preview-alert {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  padding: 14px;
  border: 1px solid rgba(156, 211, 255, 0.14);
  border-radius: 18px;
  background: rgba(3, 11, 22, 0.24);
}
.gridly-welcome-preview-card span { display: block; color: #8ee8ff; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 820; }
.gridly-welcome-preview-card strong { display: block; color: inherit; font-size: 1.08em; line-height: 1.35; }
.gridly-welcome-preview-card small { display: block; color: rgba(226, 239, 255, 0.66); }
.gridly-welcome-preview-card[data-gridly-theme="light"] :is(span, small, .gridly-welcome-preview-place) { color: #55718b !important; }
.gridly-welcome-preview-card[data-gridly-theme="light"] .gridly-welcome-preview-alert { background: rgba(27, 58, 87, 0.055); }

.gridly-welcome-town-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gridly-welcome-town-btn {
  min-height: 52px;
  border: 1px solid rgba(156, 211, 255, 0.16);
  border-radius: 18px;
  color: #e7f4ff;
  background: rgba(255, 255, 255, 0.055);
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.gridly-welcome-town-btn.is-selected {
  position: relative;
  border-color: rgba(105, 240, 207, 0.68);
  color: #ffffff;
  background: linear-gradient(135deg, rgba(74, 164, 255, 0.24), rgba(105, 240, 207, 0.18));
  box-shadow: 0 14px 34px rgba(30, 170, 215, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.gridly-welcome-town-btn.is-selected::after {
  content: "✓";
  margin-left: 8px;
  color: #8df6dd;
}
.gridly-welcome-route-stack {
  display: grid;
  gap: 12px;
  padding: 20px;
  color: #ffffff;
  font-weight: 820;
  font-size: 1rem;
}
.gridly-welcome-route-stack span {
  display: grid;
  gap: 3px;
  min-height: 58px;
  align-content: center;
  padding: 0 16px;
  border: 1px solid rgba(156, 211, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  letter-spacing: 0.14em;
}
.gridly-welcome-route-stack small {
  color: rgba(226, 239, 255, 0.62);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gridly-welcome-route-stack strong {
  width: 2px;
  min-height: 26px;
  margin-left: 25px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(123, 203, 255, 0.24), rgba(105, 240, 207, 0.78));
}
.gridly-welcome-step[data-gridly-welcome-step="5"] {
  gap: 18px;
  min-height: 330px;
  align-content: start;
  padding-top: 8px;
  padding-bottom: 72px;
}
.gridly-welcome-step[data-gridly-welcome-step="5"] h2 { max-width: 12ch; }
.gridly-welcome-step[data-gridly-welcome-step="5"] > p:not(.eyebrow) {
  max-width: 28rem;
  color: rgba(236, 246, 255, 0.88);
  font-size: clamp(1.07rem, 3vw, 1.18rem);
  line-height: 1.68;
}
.gridly-welcome-step[data-gridly-welcome-step="5"] > p:last-child {
  max-width: 30rem;
  margin-top: 2px;
  color: #ffffff;
  font-weight: 720;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.gridly-welcome-watching-label { color: #ffffff !important; font-weight: 900; }
.gridly-welcome-checklist { display: grid; gap: 10px; margin: 0; padding: 18px; list-style: none; color: #f6fbff; font-weight: 780; }
.gridly-welcome-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}
.gridly-welcome-checklist li::first-letter { color: #8df6dd; }
.gridly-welcome-step[data-gridly-welcome-step="6"] { gap: 20px; padding-bottom: 40px; }
.gridly-welcome-step[data-gridly-welcome-step="6"] h2 { max-width: 12ch; margin-bottom: 2px; }
.gridly-welcome-final-copy {
  display: grid;
  gap: 6px;
  width: min(100%, 24rem);
  margin: 0 auto 2px !important;
  padding: 16px 18px;
  border: 1px solid rgba(105, 240, 207, 0.22);
  border-radius: 20px;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(105, 240, 207, 0.16), transparent 58%),
    linear-gradient(145deg, rgba(74, 164, 255, 0.12), rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-align: center;
}
.gridly-welcome-final-copy span {
  display: block;
  color: rgba(157, 232, 213, 0.84);
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.gridly-welcome-final-copy strong {
  display: block;
  color: #ffffff;
  font-size: clamp(1.16rem, 4.2vw, 1.42rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.gridly-welcome-step[data-gridly-welcome-step="6"] .gridly-welcome-checklist {
  gap: 12px;
  margin: 2px 0 4px;
  padding: 20px;
  border-color: rgba(105, 240, 207, 0.24);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(105, 240, 207, 0.045));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.gridly-welcome-step[data-gridly-welcome-step="6"] .gridly-welcome-checklist li {
  min-height: 46px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.02rem;
}
.gridly-welcome-final-note {
  max-width: 20rem !important;
  margin-top: 4px !important;
  color: #ffffff !important;
  font-size: clamp(1.18rem, 4.4vw, 1.42rem) !important;
  line-height: 1.28 !important;
  font-weight: 820;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.gridly-welcome-action-row { flex-wrap: wrap; }
.gridly-welcome-action-row .secondary-btn,
.gridly-welcome-step > .secondary-btn,
.gridly-welcome-step > .primary-btn { min-height: 48px; justify-content: center; }
.gridly-welcome-status { min-height: 1.3em; font-size: 0.9rem !important; color: #9de8d5 !important; }
.gridly-welcome-footer {
  position: sticky;
  bottom: -18px;
  z-index: 1;
  margin: 4px -18px -18px;
  padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8, 16, 30, 0), rgba(8, 16, 30, 0.96) 28%);
}
.gridly-welcome-footer .secondary-btn,
.gridly-welcome-footer .primary-btn { min-height: 48px; flex: 1 1 auto; }
#gridlyWelcomeNextBtn,
#gridlyWelcomeFinishBtn { flex-grow: 2; }
@media (min-width: 680px) {
  .gridly-welcome-overlay { place-items: center; }
  .gridly-welcome-sheet { padding: 24px; }
  .gridly-welcome-footer { margin: 8px -24px -24px; padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 430px) {
  .gridly-welcome-overlay { padding: 10px; }
  .gridly-welcome-sheet { border-radius: 24px; padding: 16px; }
  .gridly-welcome-header { gap: 12px; margin-bottom: 18px; padding: 2px 38px 14px; }
  .gridly-welcome-brand img { width: clamp(120px, 38vw, 148px); }
  .gridly-welcome-brand-promise { font-size: clamp(1.04rem, 4.2vw, 1.18rem); }
  .gridly-welcome-signal { max-width: 100%; padding-inline: 10px; font-size: 0.72rem; letter-spacing: 0.055em; }
  .gridly-welcome-skip { right: 0; min-height: 34px; padding-inline: 8px; font-size: 0.78rem; }
  .gridly-welcome-progress { gap: 4px; width: min(100%, 310px); }
  .gridly-welcome-personalization-grid,
  .gridly-welcome-town-grid { grid-template-columns: 1fr; }
  .gridly-welcome-steps { min-height: 360px; }
  .gridly-welcome-step h2 { max-width: 10.5ch; }
  #gridlyWelcomeTitle { max-width: 12ch; }
}
@media (prefers-reduced-motion: reduce) {
  .gridly-welcome-mark::before,
  .gridly-welcome-mark::after { animation: none; opacity: 0.5; }
}

/* Awareness Brief Card V1 — presentation-only hierarchy pass */
.habit-status-strip {
  padding: 18px 18px 16px;
  gap: 8px;
}

.habit-status-strip span,
.status-label,
.mobile-priority-card span {
  letter-spacing: 0.08em;
  opacity: 0.72;
}

.habit-status-strip strong {
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.habit-status-strip p {
  max-width: 54ch;
  font-size: 0.96rem;
  line-height: 1.48;
}

.route-status-card {
  opacity: 0.86;
}

.route-status-card strong {
  font-size: clamp(1.08rem, 2vw, 1.42rem);
  line-height: 1.12;
}

.hero-actions .hero-route-btn,
.hero-actions .hero-alerts-btn {
  min-height: 40px;
}

body[data-layout-mode="portrait"] .gridly-v2-watch span {
  display: block;
  color: rgba(235, 246, 255, 0.92);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.01em;
  text-transform: none;
}

body[data-layout-mode="portrait"] .gridly-v2-awareness-brief-card {
  top: 52px;
  display: grid;
  gap: 9px;
  padding: 15px 16px 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8, 18, 32, 0.9), rgba(5, 12, 23, 0.86));
  border-color: rgba(190, 220, 255, 0.26);
  box-shadow: 0 16px 38px rgba(3, 9, 18, 0.36), inset 0 1px 0 rgba(235, 247, 255, 0.1);
}

body[data-layout-mode="portrait"] .gridly-v2-awareness-brief-card strong {
  color: #f8fbff;
  font-size: clamp(20px, 6.2vw, 27px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 820;
}

body[data-layout-mode="portrait"] .gridly-v2-awareness-brief-card > span {
  display: block;
  color: rgba(210, 225, 241, 0.86);
  font-size: 13px;
  line-height: 1.35;
}

body[data-layout-mode="portrait"] .gridly-v2-top-awareness-microline {
  margin-top: 1px;
  color: rgba(178, 205, 228, 0.74) !important;
  font-size: 12px !important;
  font-weight: 650;
  letter-spacing: 0.01em;
}

body[data-layout-mode="portrait"] .gridly-v2-segments {
  top: 172px;
  padding: 3px;
  gap: 4px;
  background: rgba(6, 14, 24, 0.52);
  border-color: rgba(255, 255, 255, 0.12);
}

body[data-layout-mode="portrait"] .gridly-v2-segments button {
  padding: 7px 8px;
  color: rgba(199, 218, 238, 0.74);
  font-size: 10.5px;
  font-weight: 680;
}

body[data-layout-mode="portrait"] .gridly-v2-segments button.is-active {
  background: rgba(180, 218, 255, 0.16);
  color: rgba(246, 250, 255, 0.94);
}

body[data-layout-mode="portrait"] .gridly-v2-control-rail {
  top: 222px;
}


/* V212.1 — portrait destination search tap target isolation */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) {
    top: calc(168px + env(safe-area-inset-top, 0px)) !important;
    z-index: 9700 !important;
    pointer-events: none !important;
  }

  body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) .gridly-search-card {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
  }

  body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) .gridly-search-header,
  body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) .gridly-search-input-row,
  body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) #gridlyAddressSearchInput,
  body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) #gridlySearchClearBtn,
  body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) #gridlySearchCloseBtn,
  body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) #gridlySearchResults,
  body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) #gridlySearchResults * {
    pointer-events: auto !important;
  }

  body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) #gridlySearchResults {
    max-height: min(44dvh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* V212.1 — portrait destination command visibility fix */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command {
    display: grid !important;
    position: fixed !important;
    left: calc(22px + env(safe-area-inset-left, 0px)) !important;
    right: calc(88px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 9600 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 76px !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px 10px 11px 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(161, 211, 255, 0.38) !important;
    background: linear-gradient(145deg, rgba(9, 19, 33, 0.86), rgba(5, 12, 22, 0.94)) !important;
    box-shadow: 0 14px 30px rgba(2, 8, 20, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(18px) saturate(124%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(124%) !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command .mobile-destination-command-copy {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command strong {
    display: block !important;
    min-width: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.08 !important;
    letter-spacing: 0.005em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command p {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: rgba(219, 236, 255, 0.8) !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* V214.4.3 — keep the impact statement primary on narrow destination cards. */
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command .destination-route-impact-line {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    position: relative !important;
    z-index: 2 !important;
    min-height: 20px !important;
    margin-top: 2px !important;
    padding: 2px 16px 2px 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(224, 242, 254, 0.98) !important;
    box-shadow: none !important;
    font-size: 0.73rem !important;
    font-weight: 760 !important;
    line-height: 1.22 !important;
    white-space: pre-line !important;
    overflow-wrap: anywhere !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command .destination-route-impact-line:not(:empty)::before {
    content: none !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command .destination-route-impact-line:not(:empty)::after {
    content: ">";
    position: absolute;
    right: 2px;
    top: 50%;
    color: rgba(186, 230, 253, 0.86);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-52%);
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command .destination-route-impact-line:empty {
    display: none !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command .compact-btn {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    height: 34px !important;
    max-width: 112px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
  }
}

/* V225.4 — awareness-first bottom panel replaces idle destination card. */
body[data-layout-mode="portrait"] .mobile-destination-command .mobile-awareness-panel-kicker {
  display: none;
}

body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel,
body.gridly-mobile-awareness-panel-present[data-layout-mode="portrait"] .map-card > .mobile-destination-command {
  border-color: rgba(124, 231, 255, 0.42) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 231, 255, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(7, 22, 34, 0.9), rgba(5, 13, 23, 0.95)) !important;
}

body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .mobile-destination-command-copy {
  grid-template-rows: auto auto auto auto !important;
  gap: 3px !important;
}

body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .mobile-awareness-panel-kicker {
  display: block;
  color: rgba(142, 230, 255, 0.76);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel strong {
  color: rgba(239, 253, 255, 0.98) !important;
  font-size: 0.98rem !important;
}

body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .mobile-awareness-panel-crossings,
body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .mobile-awareness-panel-issues {
  color: rgba(189, 224, 241, 0.86) !important;
  font-weight: 760 !important;
}

body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .compact-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 72px !important;
  padding-inline: 11px !important;
}

#map .gridly-awareness-identity-label,
body.gridly-mobile-awareness-panel-present #map .gridly-awareness-identity-label {
  display: none !important;
}

/* V225.5 — awareness panel metrics and dock containment refinement. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-awareness-panel,
  body.gridly-mobile-awareness-panel-present[data-layout-mode="portrait"] .map-card > .mobile-destination-command {
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 196px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    padding: 10px 10px 10px 12px !important;
    overflow: hidden !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .mobile-destination-command-copy {
    min-width: 0 !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel strong,
  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel #mobileDestinationCommandMeta {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel strong {
    white-space: nowrap !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel #mobileDestinationCommandMeta {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .mobile-awareness-panel-crossings {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance;
    line-height: 1.18 !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .mobile-awareness-panel-issues[hidden] {
    display: none !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .compact-btn {
    align-self: center !important;
    max-width: 76px !important;
    min-width: 58px !important;
    flex: 0 0 auto !important;
  }
}

body.gridly-text-large[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-awareness-panel,
body.gridly-text-large.gridly-mobile-awareness-panel-present[data-layout-mode="portrait"] .map-card > .mobile-destination-command {
  bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
}

/* V225.5.1 — awareness panel / dock containment fix.
   Keep the complete awareness card above the Portrait V2 dock while allowing
   large-font and narrow-device copy to wrap inside the panel instead of being
   clipped behind the dock. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-awareness-panel,
  body.gridly-mobile-awareness-panel-present[data-layout-mode="portrait"] .map-card > .mobile-destination-command {
    bottom: max(
      calc(118px + env(safe-area-inset-bottom, 0px)),
      calc(var(--gridly-portrait-dock-h, 78px) + 34px + env(safe-area-inset-bottom, 0px))
    ) !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .mobile-destination-command-copy {
    align-content: center !important;
    overflow: visible !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel strong,
  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel #mobileDestinationCommandMeta,
  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .mobile-awareness-panel-crossings {
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel strong {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel #mobileDestinationCommandMeta {
    display: block !important;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .mobile-awareness-panel-crossings[hidden],
  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .mobile-awareness-panel-issues[hidden] {
    display: none !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-awareness-panel .compact-btn {
    align-self: center !important;
    justify-self: end !important;
  }
}

body.gridly-text-large[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-awareness-panel,
body.gridly-text-large.gridly-mobile-awareness-panel-present[data-layout-mode="portrait"] .map-card > .mobile-destination-command {
  bottom: max(
    calc(132px + env(safe-area-inset-bottom, 0px)),
    calc(var(--gridly-portrait-dock-h, 78px) + 48px + env(safe-area-inset-bottom, 0px))
  ) !important;
}


/* V214.4 — Route Impact Details Pane (explainability only). */
body[data-layout-mode="portrait"] .mobile-destination-command .destination-route-impact-line:not(:empty) {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(186, 230, 253, 0.34);
  text-underline-offset: 3px;
  touch-action: manipulation;
}

body[data-layout-mode="portrait"] .mobile-destination-command .destination-route-impact-line:not(:empty):is(:hover, :active) {
  background: rgba(14, 116, 144, 0.16);
  text-decoration-color: rgba(186, 230, 253, 0.58);
}

body[data-layout-mode="portrait"] .mobile-destination-command .destination-route-impact-line:not(:empty):focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.8);
  outline-offset: 1px;
  border-radius: 8px;
  background: rgba(14, 116, 144, 0.16);
}

.gridly-destination-impact-pane[hidden] {
  display: none !important;
}

.gridly-destination-impact-pane {
  position: fixed;
  inset: 0;
  z-index: 10070;
  display: grid;
  place-items: end center;
  padding: 16px;
  min-height: 100dvh;
  color: #f8fbff;
}

.gridly-destination-impact-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 10, 20, 0.46), rgba(4, 10, 20, 0.78));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gridly-destination-impact-card {
  position: relative;
  width: min(100%, 430px);
  max-height: min(82dvh, 560px);
  overflow-y: auto;
  border: 1px solid rgba(156, 211, 255, 0.24);
  border-radius: 24px;
  padding: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(74, 222, 255, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(13, 29, 50, 0.97), rgba(6, 13, 25, 0.96));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.gridly-destination-impact-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.gridly-destination-impact-head h2 {
  margin: 2px 0 0;
  font-size: 1.24rem;
  letter-spacing: -0.02em;
}

.gridly-destination-impact-subtitle {
  margin: 0 0 16px;
  color: rgba(219, 234, 254, 0.82);
  line-height: 1.45;
}


.gridly-current-route-details {
  display: grid;
  gap: 4px;
  margin: -4px 0 14px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 16px;
  padding: 12px;
  background: rgba(14, 116, 144, 0.14);
}

.gridly-current-route-details strong {
  color: #f8fbff;
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.gridly-current-route-details span {
  color: rgba(219, 234, 254, 0.8);
  font-size: 0.86rem;
  line-height: 1.35;
}

body.gridly-theme-light .gridly-current-route-details {
  border-color: rgba(27, 99, 132, 0.16);
  background: rgba(14, 165, 233, 0.1);
}

body.gridly-theme-light .gridly-current-route-details strong {
  color: #0d1b2a;
}

body.gridly-theme-light .gridly-current-route-details span {
  color: #516473;
}

.gridly-destination-impact-body {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(148, 203, 255, 0.16);
  border-radius: 18px;
  padding: 14px;
  background: rgba(5, 15, 28, 0.44);
}

.gridly-destination-impact-body > strong {
  font-size: 1rem;
  line-height: 1.35;
}

.gridly-destination-impact-why,
.gridly-destination-impact-quiet-note {
  margin: 0;
  color: rgba(219, 234, 254, 0.78);
  line-height: 1.42;
}

.gridly-destination-impact-reasons {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: #eef7ff;
}

.gridly-destination-impact-reasons li {
  line-height: 1.38;
}

.gridly-destination-impact-done {
  width: 100%;
  margin-top: 14px;
}

body.gridly-theme-light .gridly-destination-impact-pane {
  color: #0d1b2a;
}

body.gridly-theme-light .gridly-destination-impact-backdrop {
  background: linear-gradient(180deg, rgba(15, 40, 67, 0.22), rgba(15, 40, 67, 0.46));
}

body.gridly-theme-light .gridly-destination-impact-card {
  border-color: rgba(27, 99, 132, 0.2);
  background:
    radial-gradient(circle at 18% 0%, rgba(14, 165, 233, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 245, 250, 0.96));
  box-shadow: 0 24px 70px rgba(24, 58, 82, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.gridly-theme-light :is(.gridly-destination-impact-subtitle, .gridly-destination-impact-why, .gridly-destination-impact-quiet-note) {
  color: #516473;
}

body.gridly-theme-light .gridly-destination-impact-body {
  border-color: rgba(27, 99, 132, 0.14);
  background: rgba(255, 255, 255, 0.72);
}

body.gridly-theme-light .gridly-destination-impact-reasons {
  color: #12324a;
}

/* V215 — Route Delay Intelligence significance and driver confidence. */
.gridly-destination-impact-significance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.2), rgba(15, 23, 42, 0.16));
}

.gridly-destination-impact-significance span {
  color: rgba(186, 230, 253, 0.78);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gridly-destination-impact-significance strong {
  grid-row: 2;
  min-width: 0;
  color: #f8fbff;
  font-size: clamp(1rem, 4.4vw, 1.18rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  overflow-wrap: anywhere;
}

.gridly-destination-impact-significance em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  border: 1px solid rgba(186, 230, 253, 0.2);
  border-radius: 999px;
  padding: 6px 9px;
  color: rgba(224, 242, 254, 0.9);
  background: rgba(15, 23, 42, 0.32);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

body.gridly-theme-light .gridly-destination-impact-significance {
  border-color: rgba(27, 99, 132, 0.16);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(255, 255, 255, 0.52));
}

body.gridly-theme-light .gridly-destination-impact-significance span,
body.gridly-theme-light .gridly-destination-impact-significance em {
  color: #516473;
}

body.gridly-theme-light .gridly-destination-impact-significance strong {
  color: #0d1b2a;
}

/* V219.5 — Map visual hierarchy baseline.
   Stack, strongest to quietest: selected/focused > route/destination impact > critical hazard > blocked crossing > active hazard > recently cleared > historical/context > normal infrastructure. */
#map .leaflet-marker-icon.gridly-alert-focused-marker,
#map .leaflet-marker-icon[data-gridly-selected="true"],
#map .gridly-alert-focused-marker {
  z-index: 1000 !important;
  filter: drop-shadow(0 0 14px rgba(96, 165, 250, 0.98)) saturate(1.18) brightness(1.08) !important;
}

#map .gridly-alert-focused-marker :is(.gridly-marker, .gridly-hazard-marker, .gridly-marker-wrap),
#map [data-gridly-selected="true"]:is(.gridly-marker, .gridly-hazard-marker, .gridly-marker-wrap),
#map [data-gridly-selected="true"] :is(.gridly-marker, .gridly-hazard-marker, .gridly-marker-wrap) {
  outline: 3px solid rgba(147, 197, 253, 0.98);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.72), 0 0 24px rgba(96, 165, 250, 0.72) !important;
  animation-duration: 1.45s;
}

#map .gridly-marker-rail-route-impact,
#map .gridly-marker-txdot-route-impact,
#map [data-gridly-route-relevant="true"],
#map [data-gridly-visual-state="route_impact"] {
  z-index: 560 !important;
  filter: saturate(1.14) brightness(1.07);
}

#map .gridly-marker-wrap.gridly-marker-rail-route-impact .gridly-marker,
#map .gridly-marker-rail-route-impact .gridly-marker,
#map .gridly-marker-txdot-route-impact .gridly-hazard-marker,
#map .gridly-hazard-marker[data-gridly-route-relevant="true"],
#map .gridly-hazard-marker.route-relevant {
  transform: scale(1.14);
  border-color: rgba(255, 213, 94, 0.98) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22), 0 0 20px rgba(255, 213, 94, 0.58) !important;
}

#map .gridly-marker-hazard-critical,
#map .gridly-marker-priority-critical,
#map [data-gridly-impact-level="critical"] {
  z-index: 545 !important;
}

#map .gridly-marker-hazard-critical .gridly-hazard-marker,
#map .gridly-hazard-marker[data-gridly-impact-level="critical"] {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 18px rgba(255, 78, 111, 0.56) !important;
}

#map .gridly-marker-wrap.gridly-marker-rail-blocked,
#map .gridly-marker-rail-blocked,
#map [data-gridly-visual-state="blocked"] {
  z-index: 535 !important;
}

#map .gridly-marker-wrap.gridly-marker-rail-blocked .gridly-marker,
#map .gridly-marker.state-blocked,
#map .gridly-marker[data-gridly-visual-state="blocked"] {
  transform: scale(1.07);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 0 16px rgba(255, 92, 61, 0.5);
}

#map .gridly-marker-hazard-high,
#map .gridly-marker-priority-high,
#map [data-gridly-impact-level="high"] {
  z-index: 530 !important;
}

#map .gridly-marker-hazard-moderate,
#map .gridly-marker-priority-moderate,
#map [data-gridly-impact-level="moderate"] {
  z-index: 520 !important;
}

#map .gridly-marker[data-gridly-visual-state="recently_cleared"],
#map .gridly-hazard-marker[data-gridly-visual-state="recently_cleared"],
#map [data-gridly-visual-state="recently_cleared"] :is(.gridly-marker, .gridly-hazard-marker) {
  opacity: 0.58;
  filter: saturate(0.72) brightness(0.92);
  animation: none !important;
}

#map .gridly-historical-pattern-marker,
#map [data-gridly-map-owner="historical_pattern"],
#map [data-visual-owner="historical_pattern"] {
  z-index: 505 !important;
  opacity: 0.42;
  filter: saturate(0.62) brightness(0.86);
}

#map .gridly-marker-rail-clear,
#map [data-gridly-map-owner="infrastructure"],
#map [data-gridly-visual-state="infrastructure"] {
  z-index: 500 !important;
}

#map .gridly-marker-wrap.gridly-marker-rail-clear .gridly-marker,
#map .gridly-marker.state-normal,
#map .gridly-marker[data-gridly-map-owner="infrastructure"] {
  transform: scale(0.88);
  opacity: 0.7;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 6px rgba(75, 199, 255, 0.18);
}

/* V220 — premium calm map visual refinement pass.
   Visual-only overrides that reuse V219 metadata to reinforce the hierarchy without changing marker data, routing, reporting, or audit decisions. */
#map .leaflet-marker-icon.gridly-alert-focused-marker,
#map .leaflet-marker-icon[data-gridly-selected="true"],
#map .gridly-alert-focused-marker {
  z-index: 1040 !important;
  filter: drop-shadow(0 10px 18px rgba(2, 8, 23, 0.56)) saturate(1.08) brightness(1.05) !important;
}

#map .gridly-alert-focused-marker :is(.gridly-marker, .gridly-hazard-marker, .gridly-marker-wrap),
#map [data-gridly-selected="true"]:is(.gridly-marker, .gridly-hazard-marker, .gridly-marker-wrap),
#map [data-gridly-selected="true"] :is(.gridly-marker, .gridly-hazard-marker, .gridly-marker-wrap) {
  outline: 3px solid rgba(191, 219, 254, 0.96);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(8, 17, 30, 0.82), 0 12px 28px rgba(59, 130, 246, 0.34) !important;
  transform: scale(1.15);
}

#map .gridly-marker-rail-route-impact,
#map .gridly-marker-txdot-route-impact,
#map [data-gridly-route-relevant="true"],
#map [data-gridly-visual-state="route_impact"] {
  z-index: 570 !important;
  filter: saturate(1.08) brightness(1.04);
}

#map .gridly-marker-wrap.gridly-marker-rail-route-impact .gridly-marker,
#map .gridly-marker-rail-route-impact .gridly-marker,
#map .gridly-marker-txdot-route-impact .gridly-hazard-marker,
#map .gridly-hazard-marker[data-gridly-route-relevant="true"],
#map .gridly-hazard-marker.route-relevant {
  border-color: rgba(252, 211, 77, 0.96) !important;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.72), 0 10px 24px rgba(245, 158, 11, 0.34) !important;
  transform: scale(1.12);
  animation-duration: 3.2s !important;
}

body[data-layout-mode="portrait"] .mobile-destination-command .destination-route-impact-line:not(:empty),
.gridly-destination-impact-significance {
  border-color: rgba(252, 211, 77, 0.26);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.52));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 28px rgba(15, 23, 42, 0.26);
}

.gridly-destination-impact-significance strong {
  color: #fff7d6;
}

#map .gridly-marker-hazard-critical .gridly-hazard-marker,
#map .gridly-hazard-marker[data-gridly-impact-level="critical"] {
  border-color: rgba(251, 113, 133, 0.96) !important;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.68), 0 10px 24px rgba(244, 63, 94, 0.34) !important;
  transform: scale(1.08);
}

#map .gridly-marker-hazard-high .gridly-hazard-marker,
#map .gridly-hazard-marker[data-gridly-impact-level="high"] {
  border-color: rgba(251, 146, 60, 0.94) !important;
  box-shadow: 0 0 0 1.5px rgba(15, 23, 42, 0.66), 0 8px 20px rgba(234, 88, 12, 0.28) !important;
  transform: scale(1.05);
}

#map .gridly-marker-hazard-moderate .gridly-hazard-marker,
#map .gridly-hazard-marker[data-gridly-impact-level="moderate"],
#map .gridly-hazard-marker[data-gridly-impact-level="low"] {
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.58), 0 7px 16px rgba(14, 165, 233, 0.2) !important;
}

#map .gridly-marker-wrap.gridly-marker-rail-blocked .gridly-marker,
#map .gridly-marker.state-blocked,
#map .gridly-marker[data-gridly-visual-state="blocked"] {
  border-color: rgba(248, 113, 113, 0.94) !important;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.68), 0 8px 22px rgba(239, 68, 68, 0.32) !important;
  transform: scale(1.06);
}

#map .gridly-marker[data-gridly-visual-state="recently_cleared"],
#map .gridly-hazard-marker[data-gridly-visual-state="recently_cleared"],
#map .gridly-marker.state-cleared,
#map .gridly-hazard-marker[data-state="cleared"],
#map [data-gridly-visual-state="recently_cleared"] :is(.gridly-marker, .gridly-hazard-marker) {
  opacity: 0.54;
  filter: saturate(0.62) brightness(0.9);
  animation: none !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.5), 0 5px 14px rgba(34, 197, 94, 0.14) !important;
}

#map .gridly-historical-pattern-marker,
#map [data-gridly-map-owner="historical_pattern"],
#map [data-visual-owner="historical_pattern"] {
  z-index: 495 !important;
  opacity: 0.34;
  filter: saturate(0.42) brightness(0.82) grayscale(0.18);
}

#map .gridly-marker-rail-clear,
#map [data-gridly-map-owner="infrastructure"],
#map [data-gridly-visual-state="infrastructure"] {
  z-index: 490 !important;
}

#map .gridly-marker-wrap.gridly-marker-rail-clear .gridly-marker,
#map .gridly-marker.state-normal,
#map .gridly-marker[data-gridly-map-owner="infrastructure"] {
  transform: scale(0.84);
  opacity: 0.6;
  filter: saturate(0.58) brightness(0.88);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.45), 0 3px 10px rgba(75, 199, 255, 0.1) !important;
}

@media (prefers-reduced-motion: reduce) {
  #map .gridly-hazard-marker,
  #map .gridly-marker {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* V221 visual signature pass: calm, premium route-first map language. */
#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-halo,
#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-shoulder,
#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-core,
#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-alternate {
  animation: none !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-halo {
  filter: drop-shadow(0 10px 18px rgba(2, 13, 25, 0.48));
  stroke: rgba(220, 249, 255, 0.72);
}

#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-shoulder {
  filter: drop-shadow(0 7px 13px rgba(3, 18, 31, 0.42));
}

#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-core {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.44))
    drop-shadow(0 8px 14px rgba(9, 35, 56, 0.38));
}

#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-alternate {
  filter: drop-shadow(0 5px 10px rgba(39, 24, 5, 0.28));
}

#map .gridly-route-endpoint {
  filter: drop-shadow(0 8px 14px rgba(0, 9, 18, 0.42));
}

#map .gridly-route-endpoint-destination {
  filter:
    drop-shadow(0 0 0 rgba(255, 255, 255, 0))
    drop-shadow(0 10px 18px rgba(0, 13, 24, 0.48));
}

.gridly-destination-signature-icon {
  background: transparent;
  border: 0;
}

.gridly-destination-signature-marker {
  position: relative;
  width: 34px;
  height: 42px;
  transform: translate(4px, 1px);
  filter: drop-shadow(0 14px 18px rgba(0, 10, 20, 0.42));
}

.gridly-destination-signature-marker::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 999px 999px 999px 4px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #fafdff 0%, #9cecff 46%, #0d78a4 100%);
  border: 2px solid rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 5px rgba(255, 255, 255, 0.42), 0 0 0 4px rgba(7, 32, 51, 0.34);
}

.gridly-destination-signature-marker span {
  position: absolute;
  left: 14px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #05334c;
  box-shadow: 0 0 0 2px rgba(244, 252, 255, 0.72);
  z-index: 1;
}

.gridly-alert-focused-marker,
#map [data-gridly-selected="true"] .gridly-marker,
#map [data-gridly-selected="true"].gridly-hazard-marker,
#map [data-gridly-selected="true"].gridly-destination-signature-marker {
  transform: scale(1.12);
  z-index: 760 !important;
  filter: drop-shadow(0 16px 22px rgba(0, 12, 24, 0.48));
}

.gridly-hazard-marker.route-relevant {
  animation: none !important;
  transform: scale(1.1);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(209, 243, 255, 0.32), 0 12px 22px rgba(9, 42, 72, 0.34);
  z-index: 430;
}

.gridly-hazard-marker.route-deemphasized {
  opacity: 0.48;
  filter: saturate(0.62) contrast(0.94);
}

.gridly-marker-rail-route-impact .gridly-marker {
  transform: scale(1.08);
  background: #f05f48;
  border-color: rgba(255, 243, 238, 0.96);
  box-shadow: 0 0 0 3px rgba(255, 226, 216, 0.26), 0 12px 20px rgba(14, 18, 24, 0.38);
}

.gridly-marker-rail-blocked .gridly-marker {
  box-shadow: 0 0 0 2px rgba(255, 124, 95, 0.2), 0 9px 16px rgba(0, 0, 0, 0.34);
}

.gridly-marker-rail-clear .gridly-marker,
.gridly-visual-owner-infrastructure .gridly-marker,
#map [data-gridly-map-owner="infrastructure"] .gridly-marker {
  opacity: 0.64;
  filter: saturate(0.58) brightness(0.92);
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.22);
}

.gridly-visual-owner-historical_pattern,
#map [data-gridly-map-owner="historical_pattern"],
#map [data-visual-owner="historical_pattern"],
.gridly-historical-pattern-marker,
.gridly-hazard-marker.gridly-freshness-stale,
.gridly-hazard-marker.gridly-freshness-unknown,
.gridly-hazard-marker[data-state="cleared"] {
  opacity: 0.3 !important;
  filter: grayscale(0.62) saturate(0.46) contrast(0.9) !important;
}

#map .gridly-destination-signature-marker[data-gridly-selected="true"] {
  transform: translate(4px, 1px) scale(1.08);
}

#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-endpoint {
  animation: none !important;
}

/* V221.1 visual signature corrections: cohesive destination, anchored card, premium search, modern saved-place cards, route-first composition. */
#map .leaflet-pane.leaflet-routePane-pane {
  z-index: 675 !important;
}

#map .leaflet-pane.leaflet-routePane-pane path.gridly-destination-route-hero-halo,
#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-halo {
  stroke: rgba(236, 253, 255, 0.78) !important;
  stroke-opacity: 0.26 !important;
  filter: drop-shadow(0 12px 18px rgba(1, 8, 18, 0.58));
}

#map .leaflet-pane.leaflet-routePane-pane path.gridly-destination-route-hero-shoulder,
#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-shoulder {
  stroke: rgba(4, 96, 148, 0.92) !important;
  stroke-opacity: 0.72 !important;
  filter: drop-shadow(0 8px 14px rgba(2, 14, 26, 0.5));
}

#map .leaflet-pane.leaflet-routePane-pane path.gridly-destination-route-hero-core,
#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-core {
  stroke: #92f4ff !important;
  stroke-opacity: 0.99 !important;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.52))
    drop-shadow(0 7px 13px rgba(0, 54, 88, 0.46));
}

#map .leaflet-marker-icon.gridly-destination-signature-icon,
#map .gridly-route-endpoint-destination {
  z-index: 735 !important;
}

.gridly-destination-signature-icon {
  background: transparent;
  border: 0;
}

.gridly-destination-signature-marker {
  position: relative;
  width: 48px;
  height: 48px;
  transform: none;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 14px 20px rgba(0, 9, 18, 0.5));
}

.gridly-destination-signature-marker::before,
.gridly-destination-signature-marker::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.gridly-destination-signature-marker::before {
  inset: 4px;
  background: linear-gradient(150deg, rgba(244, 253, 255, 0.98), rgba(93, 219, 255, 0.9) 42%, rgba(10, 87, 132, 0.98));
  border: 2px solid rgba(248, 253, 255, 0.96);
  box-shadow:
    inset 0 1px 7px rgba(255, 255, 255, 0.5),
    0 0 0 5px rgba(5, 23, 38, 0.54),
    0 0 0 8px rgba(108, 218, 255, 0.18);
}

.gridly-destination-signature-marker::after {
  inset: 13px;
  background: radial-gradient(circle at 38% 34%, #ffffff 0 14%, #dffaff 15% 25%, #073552 27% 100%);
  border: 2px solid rgba(235, 252, 255, 0.86);
  box-shadow: inset 0 -2px 5px rgba(1, 18, 33, 0.34);
}

.gridly-destination-ring {
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  border: 1px solid rgba(185, 239, 255, 0.7);
  background: radial-gradient(circle, transparent 55%, rgba(15, 95, 145, 0.16) 58%, transparent 72%);
}

.gridly-destination-core {
  position: absolute;
  inset: 20px;
  border-radius: 999px;
  background: #ecfbff;
  box-shadow: 0 0 0 2px rgba(4, 42, 66, 0.72);
  z-index: 2;
}

.gridly-destination-stem {
  position: absolute;
  left: 22px;
  top: 37px;
  width: 4px;
  height: 8px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, rgba(237, 253, 255, 0.96), rgba(50, 167, 211, 0.82));
  box-shadow: 0 3px 7px rgba(0, 8, 16, 0.4);
}

#map .gridly-destination-signature-marker[data-gridly-selected="true"] {
  transform: scale(1.05);
}

body[data-layout-mode="portrait"] .mobile-destination-command,
.mobile-destination-command {
  margin: 0 10px max(84px, calc(76px + env(safe-area-inset-bottom, 0px)));
  border: 1px solid rgba(139, 205, 255, 0.32);
  background:
    linear-gradient(180deg, rgba(10, 25, 42, 0.9), rgba(6, 14, 25, 0.92)),
    radial-gradient(circle at 15% 0%, rgba(119, 222, 255, 0.16), transparent 46%);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(1, 8, 18, 0.48), inset 0 1px 0 rgba(223, 246, 255, 0.1);
  backdrop-filter: blur(16px) saturate(126%);
}

.mobile-destination-command::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: -10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140, 230, 255, 0.48), transparent);
  pointer-events: none;
}

.gridly-search-shell {
  top: 92px;
  width: min(680px, calc(100% - 28px));
}

.gridly-search-shell .gridly-search-card {
  border-radius: 22px;
  padding: 14px;
  border: 1px solid rgba(129, 190, 235, 0.34);
  background:
    radial-gradient(circle at 12% 0%, rgba(78, 199, 255, 0.14), transparent 40%),
    linear-gradient(160deg, rgba(8, 20, 34, 0.92), rgba(5, 12, 22, 0.88));
  box-shadow: 0 22px 54px rgba(0, 5, 14, 0.58), inset 0 1px 0 rgba(219, 242, 255, 0.08);
  backdrop-filter: blur(22px) saturate(128%);
}

.gridly-search-shell .gridly-search-input-row {
  border-radius: 16px;
  padding: 4px;
  border: 1px solid rgba(139, 202, 246, 0.22);
  background: rgba(3, 12, 22, 0.62);
}

.gridly-search-shell .gridly-search-input,
.gridly-search-shell .gridly-search-clear-btn {
  border-radius: 12px;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.045);
}

.gridly-search-shell .gridly-search-close-btn {
  border-color: rgba(139, 202, 246, 0.24);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(220, 241, 255, 0.05);
}

.gridly-search-shell .gridly-search-input:focus {
  border-color: rgba(123, 224, 255, 0.58);
  box-shadow: 0 0 0 3px rgba(68, 184, 255, 0.14);
}

.gridly-search-shell .gridly-search-result-item {
  border-radius: 16px;
  border-color: rgba(132, 187, 226, 0.22);
  background: linear-gradient(150deg, rgba(14, 29, 46, 0.76), rgba(8, 17, 29, 0.72));
  box-shadow: inset 0 1px 0 rgba(220, 241, 255, 0.05);
}

.gridly-search-shell .gridly-search-result-item:hover,
.gridly-search-shell .gridly-search-result-item:focus-visible {
  background: linear-gradient(150deg, rgba(20, 58, 83, 0.86), rgba(9, 27, 45, 0.78));
  border-color: rgba(113, 222, 255, 0.58);
}

.setup-card.desktop-route-setup {
  border-color: rgba(129, 190, 235, 0.22);
  background: linear-gradient(158deg, rgba(10, 22, 36, 0.82), rgba(7, 14, 24, 0.78));
  box-shadow: 0 14px 32px rgba(2, 8, 18, 0.34), inset 0 1px 0 rgba(219, 242, 255, 0.06);
}

.setup-card.desktop-route-setup .setup-grid {
  gap: 9px;
}

.setup-card.desktop-route-setup label {
  padding: 0;
  color: #9fb9d4;
}

.setup-card.desktop-route-setup input,
.setup-card.desktop-route-setup select,
.route-inline-field select {
  border-radius: 13px;
  border-color: rgba(132, 190, 235, 0.24);
  background: rgba(5, 15, 27, 0.66);
  box-shadow: inset 0 1px 0 rgba(226, 246, 255, 0.05);
}

@media (max-width: 760px) {
  body[data-mobile-mode] .mobile-live-command {
    top: calc(var(--mobile-brand-top, env(safe-area-inset-top, 0px) + 8px) + var(--mobile-brand-height, 38px) + var(--mobile-overlay-gap, 8px));
  }

  body[data-mobile-mode] .mobile-destination-command {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    z-index: 735;
    margin: 0;
  }

  body[data-mobile-mode] .map-tools-overlay {
    opacity: 0.86;
  }
}

.gridly-destination-signature-marker span.gridly-destination-ring,
.gridly-destination-signature-marker span.gridly-destination-core,
.gridly-destination-signature-marker span.gridly-destination-stem {
  z-index: auto;
}

.gridly-destination-signature-marker span.gridly-destination-ring {
  left: 1px;
  top: 1px;
  width: auto;
  height: auto;
  background: radial-gradient(circle, transparent 55%, rgba(15, 95, 145, 0.16) 58%, transparent 72%);
  box-shadow: none;
}

.gridly-destination-signature-marker span.gridly-destination-core {
  left: 20px;
  top: 20px;
  width: auto;
  height: auto;
  background: #ecfbff;
  box-shadow: 0 0 0 2px rgba(4, 42, 66, 0.72);
  z-index: 2;
}

.gridly-destination-signature-marker span.gridly-destination-stem {
  left: 22px;
  top: 37px;
  width: 4px;
  height: 8px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, rgba(237, 253, 255, 0.96), rgba(50, 167, 211, 0.82));
  box-shadow: 0 3px 7px rgba(0, 8, 16, 0.4);
}

.gridly-awareness-area-halo {
  filter: drop-shadow(0 0 10px rgba(124, 231, 255, 0.16));
}

.gridly-county-awareness-boundary {
  filter: drop-shadow(0 0 5px rgba(126, 218, 242, 0.18));
}

.gridly-county-awareness-boundary-emphasis {
  filter: drop-shadow(0 0 8px rgba(126, 218, 242, 0.26));
}

.gridly-awareness-identity-label {
  background: transparent;
  border: 0;
  pointer-events: none;
}

.gridly-awareness-identity-label span {
  display: inline-flex;
  align-items: center;
  max-width: min(230px, calc(100vw - 40px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 9px;
  border: 1px solid rgba(124, 231, 255, 0.28);
  border-radius: 999px;
  background: rgba(7, 16, 22, 0.52);
  color: rgba(218, 247, 255, 0.82);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* V225.5.4 — awareness panel/dock measured placement contract.
   Bottom offsets proved unreliable when the fixed panel is evaluated inside
   nested portrait containment, so JS now measures the real dock top and panel
   height, then writes --gridly-awareness-panel-top. The final applied CSS uses
   top-based placement to land the panel bottom exactly above the dock gap. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-awareness-panel,
  body.gridly-mobile-awareness-panel-present[data-layout-mode="portrait"] .map-card > .mobile-destination-command,
  body.gridly-text-large[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-awareness-panel,
  body.gridly-text-large.gridly-mobile-awareness-panel-present[data-layout-mode="portrait"] .map-card > .mobile-destination-command {
    top: max(
      calc(env(safe-area-inset-top, 0px) + 10px),
      var(--gridly-awareness-panel-top, calc(100dvh - var(--gridly-awareness-dock-footprint, 118px) - var(--gridly-awareness-panel-dock-gap, 10px) - 86px))
    ) !important;
    bottom: auto !important;
    transform: none !important;
    max-height: calc(var(--gridly-awareness-panel-available-height, 100dvh) - env(safe-area-inset-top, 0px) - 10px) !important;
    overflow: visible !important;
  }
}

.gridly-v2-other-hazard-subtype-action.is-selected,
.gridly-v2-other-hazard-subtype-action[aria-pressed="true"] {
  background: rgba(90, 178, 255, .2);
  border-color: rgba(120, 199, 255, .78);
  box-shadow: inset 0 0 0 1px rgba(173, 228, 255, .45);
  color: #f5f9ff;
}

/* V241.2 — hard stop legacy mobile destination command leaks.
   Suppress only genuinely hidden command-card states so the restored idle
   Awareness Area panel can remain visible above the dock. */
body[data-layout-mode="portrait"] .map-card > .mobile-destination-command[hidden],
body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-command-card-suppressed,
body[data-layout-mode="portrait"] .mobile-destination-command[hidden],
body[data-layout-mode="portrait"] .mobile-destination-command.is-command-card-suppressed {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-layout-mode="portrait"] .mobile-destination-command[aria-hidden="true"] {
  pointer-events: none !important;
}

/* V242 — Portrait information hierarchy refinement */
body[data-layout-mode="portrait"] #gridlyPortraitV2 {
  --gridly-v2-top-shield-height: calc(180px + env(safe-area-inset-top, 0px));
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar {
  min-height: 38px;
  padding: 5px 10px;
  background: linear-gradient(165deg, rgba(5, 13, 24, 0.72), rgba(4, 10, 18, 0.8));
  border-color: rgba(164, 201, 243, 0.18);
  box-shadow: 0 6px 14px rgba(2, 8, 18, 0.22);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card {
  top: 54px;
  padding: 10px 12px 10px;
  border-radius: 16px;
  border-color: rgba(169, 216, 255, 0.32);
  background:
    linear-gradient(180deg, rgba(12, 25, 43, 0.92), rgba(5, 12, 22, 0.88)),
    radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.16), transparent 36%);
  box-shadow: 0 12px 26px rgba(2, 8, 18, 0.36), inset 0 1px 0 rgba(230, 244, 255, 0.1);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card::before {
  content: "Awareness Area";
  display: block;
  margin-bottom: 3px;
  color: rgba(142, 205, 255, 0.8);
  font-size: 0.56rem;
  font-weight: 820;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill strong {
  max-width: 94%;
  color: #f8fbff;
  font-size: clamp(0.98rem, 4.35vw, 1.15rem);
  font-weight: 780;
  letter-spacing: -0.024em;
  line-height: 1.06;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill span {
  display: block;
  margin-top: 5px;
  color: rgba(210, 228, 246, 0.84);
  font-size: 0.71rem;
  font-weight: 560;
  letter-spacing: 0.002em;
  line-height: 1.22;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="high"] {
  border-color: rgba(251, 146, 60, 0.48);
  box-shadow: 0 14px 30px rgba(75, 23, 7, 0.3), inset 0 1px 0 rgba(255, 237, 213, 0.12);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="moderate"] {
  border-color: rgba(96, 165, 250, 0.42);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
  top: 168px;
  padding: 3px;
  gap: 3px;
  border-color: rgba(164, 201, 243, 0.075);
  background: rgba(6, 14, 24, 0.3);
  box-shadow: 0 3px 8px rgba(2, 8, 18, 0.1);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
  min-height: 28px;
  color: rgba(199, 221, 244, 0.7);
  font-size: 0.62rem;
  font-weight: 600;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button.is-active {
  background: rgba(96, 165, 250, 0.17);
  color: rgba(239, 248, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail {
  top: 198px;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
  padding: 6px;
  border-color: rgba(164, 201, 243, 0.24);
  background: linear-gradient(154deg, rgba(7, 14, 25, 0.68), rgba(7, 13, 23, 0.78));
  box-shadow: 0 10px 22px rgba(2, 8, 18, 0.32), inset 0 1px 0 rgba(230, 244, 255, 0.06);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
  gap: 3px;
  padding: 6px 3px 5px;
  color: rgba(233, 243, 255, 0.9);
  background: rgba(255, 255, 255, 0.025);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon {
  width: 28px;
  height: 28px;
  border-color: rgba(166, 204, 246, 0.3);
  background: linear-gradient(170deg, rgba(8, 18, 33, 0.76), rgba(6, 14, 25, 0.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button em {
  color: rgba(226, 238, 252, 0.86);
  font-size: 0.61rem;
  font-weight: 570;
  letter-spacing: 0.012em;
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 {
  --gridly-v2-top-shield-height: calc(180px + env(safe-area-inset-top, 0px));
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-topbar {
  min-height: 38px;
  padding: 5px 10px;
  background: linear-gradient(165deg, rgba(5, 13, 24, 0.72), rgba(4, 10, 18, 0.8));
  border-color: rgba(164, 201, 243, 0.18);
  box-shadow: 0 6px 14px rgba(2, 8, 18, 0.22);
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-status-pill {
  background:
    linear-gradient(180deg, rgba(12, 25, 43, 0.92), rgba(5, 12, 22, 0.88)),
    radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.16), transparent 36%);
  box-shadow: 0 12px 26px rgba(2, 8, 18, 0.36), inset 0 1px 0 rgba(230, 244, 255, 0.1);
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-segments {
  background: rgba(6, 14, 24, 0.3);
  box-shadow: 0 3px 8px rgba(2, 8, 18, 0.1);
}

/* V242.1 — align active route destination card with Portrait V2 panel rails. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command:not(.is-awareness-panel):not([hidden]):not(.is-command-card-suppressed) {
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  }
}

.gridly-user-location-awareness-dot {
  --gridly-user-location-blue: #3f9cff;
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0;
  background: transparent;
  border: 0;
  pointer-events: none;
}

.gridly-user-location-awareness-dot__ring,
.gridly-user-location-awareness-dot__core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.gridly-user-location-awareness-dot__ring {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(92, 176, 255, 0.56);
  background: rgba(47, 134, 255, 0.12);
  box-shadow: 0 0 18px rgba(63, 156, 255, 0.24);
  animation: gridlyUserLocationAwarenessPulse 2.4s ease-out infinite;
}

.gridly-user-location-awareness-dot__core {
  width: 9px;
  height: 9px;
  background: radial-gradient(circle at 35% 30%, #d9f0ff 0%, #72beff 32%, var(--gridly-user-location-blue) 72%, #1671e8 100%);
  border: 1px solid rgba(224, 244, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(11, 24, 38, 0.78), 0 4px 12px rgba(42, 145, 255, 0.36);
}

@keyframes gridlyUserLocationAwarenessPulse {
  0% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(0.62);
  }
  70% {
    opacity: 0.16;
    transform: translate(-50%, -50%) scale(1.18);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gridly-user-location-awareness-dot__ring {
    animation: none;
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

/* V243 — Portrait V2 explicit user-location utility control. */
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail [data-v2-control="use-location"] {
  color: rgba(214, 235, 255, 0.94);
  background: linear-gradient(170deg, rgba(10, 30, 52, 0.82), rgba(6, 17, 30, 0.9));
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail [data-v2-control="use-location"][aria-busy="true"] {
  color: rgba(147, 197, 253, 0.98);
  box-shadow: var(--gridly-v2-control-shadow), 0 0 0 2px rgba(96, 165, 250, 0.18);
}


/* V249.1 — Settings sheet alignment with History/Hazards compact bottom-sheet rhythm. */
body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] {
  left: 12px !important;
  right: 12px !important;
  bottom: max(84px, calc(var(--gridly-portrait-dock-h, 76px) + 10px + env(safe-area-inset-bottom, 0px))) !important;
  max-height: calc(100dvh - max(84px, calc(var(--gridly-portrait-dock-h, 76px) + 10px + env(safe-area-inset-bottom, 0px))) - 12px) !important;
  overflow: hidden !important;
  padding: 11px 11px 12px !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] header {
  margin: 0 0 10px !important;
  padding: 0 0 7px !important;
  min-height: 30px;
  align-items: center;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] #gridlyPortraitV2SheetBody {
  display: block;
  max-height: calc(100dvh - max(84px, calc(var(--gridly-portrait-dock-h, 76px) + 10px + env(safe-area-inset-bottom, 0px))) - 70px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 0 1px calc(10px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: thin;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .gridly-settings-sheet {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .gridly-v2-sheet-copy {
  margin: -2px 0 2px;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-section,
body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-modal-section,
body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .gridly-settings-sheet .settings-modal-section {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(178, 211, 255, 0.13) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.028)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-section[open] {
  border-color: rgba(132, 199, 255, 0.24) !important;
  background: linear-gradient(180deg, rgba(93, 201, 255, 0.085), rgba(255, 255, 255, 0.032)) !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px 10px 13px;
  cursor: pointer;
  touch-action: manipulation;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-summary::after {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(183, 220, 255, 0.18);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.055);
  background-image:
    linear-gradient(rgba(230, 245, 255, 0.9), rgba(230, 245, 255, 0.9)),
    linear-gradient(rgba(230, 245, 255, 0.9), rgba(230, 245, 255, 0.9));
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 9px 2px, 2px 9px;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-section[open] .settings-list-summary::after {
  background-size: 9px 2px, 2px 0;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-title {
  min-width: 0;
  color: rgba(242, 248, 255, 0.94);
  font-size: 0.9rem;
  font-weight: 820;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-meta {
  grid-column: 1;
  color: rgba(222, 236, 250, 0.82);
  font-size: 0.72rem;
  line-height: 1.28;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-detail {
  display: grid;
  gap: 9px;
  padding: 0 13px 13px !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-detail > :first-child {
  margin-top: 0 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-place-grid,
body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-toggle-grid,
body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-select-grid {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-place-card,
body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-toggle-row,
body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-select-grid label {
  padding: 10px 11px !important;
  border-radius: 12px !important;
  box-shadow: none;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-saved-places-card {
  align-items: stretch;
  flex-direction: column;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-place-action,
body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-place-card .gridly-v2-tile.settings-place-action {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  margin-top: 0;
  padding: 8px 12px;
}

body.gridly-theme-light[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-section,
body.gridly-theme-light[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-modal-section {
  color: #102234;
  border-color: rgba(27, 58, 87, 0.14) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 250, 255, 0.78)) !important;
}

body.gridly-theme-light[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-title {
  color: #102234;
}

body.gridly-theme-light[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-meta {
  color: #516473;
}

/* V249.1 follow-up — Settings V2 runtime alignment fallback independent of body layout marker timing. */
#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] {
  left: 12px !important;
  right: 12px !important;
  bottom: max(84px, calc(var(--gridly-portrait-dock-h, 76px) + 10px + env(safe-area-inset-bottom, 0px))) !important;
  max-height: calc(100dvh - max(84px, calc(var(--gridly-portrait-dock-h, 76px) + 10px + env(safe-area-inset-bottom, 0px))) - 12px) !important;
  overflow: hidden !important;
  padding: 11px 11px 12px !important;
}

#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] #gridlyPortraitV2SheetBody {
  display: block;
  max-height: calc(100dvh - max(84px, calc(var(--gridly-portrait-dock-h, 76px) + 10px + env(safe-area-inset-bottom, 0px))) - 70px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 1px calc(10px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: thin;
}

#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .gridly-settings-sheet {
  contain: layout paint;
}

/* V227.1 — portrait Location Awareness route action restore. */
.gridly-v2-location-awareness-panel:has(.gridly-v2-location-awareness-route:not([hidden])) {
  pointer-events: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
}
.gridly-v2-location-awareness-panel:has(.gridly-v2-location-awareness-route:not([hidden])) .gridly-v2-location-awareness-kicker,
.gridly-v2-location-awareness-panel:has(.gridly-v2-location-awareness-route:not([hidden])) .gridly-v2-location-awareness-title,
.gridly-v2-location-awareness-panel:has(.gridly-v2-location-awareness-route:not([hidden])) .gridly-v2-location-awareness-status,
.gridly-v2-location-awareness-panel:has(.gridly-v2-location-awareness-route:not([hidden])) .gridly-v2-location-awareness-meta {
  grid-column: 1;
}
.gridly-v2-location-awareness-route {
  align-self: center;
  grid-column: 2;
  grid-row: 1 / span 4;
  border: 1px solid rgba(125, 211, 252, .38);
  border-radius: 999px;
  background: rgba(14, 165, 233, .18);
  color: #e0f7ff;
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  padding: 7px 10px;
  pointer-events: auto;
  white-space: nowrap;
}
.gridly-v2-location-awareness-route[hidden] {
  display: none !important;
}

/* V250.4 — Settings awareness area chooser */
.settings-awareness-area-chooser {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.settings-awareness-area-chooser[hidden] {
  display: none !important;
}

.settings-awareness-area-option.is-selected {
  border-color: rgba(67, 230, 160, 0.72);
  background: linear-gradient(180deg, rgba(67, 230, 160, 0.26), rgba(142, 239, 255, 0.12));
  color: #ffffff;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-awareness-area-chooser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-awareness-area-chooser[hidden] {
  display: none !important;
}

/* V250.6 — Awareness filter strip visibility audit */
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
  padding: 5px;
  gap: 5px;
  border: 1px solid rgba(173, 213, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(3, 9, 18, 0.92), rgba(5, 13, 25, 0.88)),
    radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.14), transparent 58%);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(5, 12, 22, 0.74),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(118%);
  -webkit-backdrop-filter: blur(14px) saturate(118%);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
  min-height: 32px;
  border: 1px solid rgba(188, 216, 244, 0.14);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(217, 233, 249, 0.82);
  font-weight: 760;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.48);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button.is-active {
  border-color: rgba(160, 222, 255, 0.78);
  background:
    linear-gradient(135deg, rgba(128, 217, 255, 0.44), rgba(48, 133, 255, 0.36)),
    rgba(10, 30, 54, 0.92);
  color: #ffffff;
  box-shadow:
    0 10px 22px rgba(16, 83, 168, 0.42),
    0 0 0 1px rgba(232, 248, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* V250.6A — Portrait command-area docked awareness filter strip */
body[data-layout-mode="portrait"] #gridlyPortraitV2 {
  --gridly-v2-command-left: calc(10px + env(safe-area-inset-left, 0px));
  --gridly-v2-command-right: calc(10px + env(safe-area-inset-right, 0px));
  --gridly-v2-awareness-card-top: calc(54px + env(safe-area-inset-top, 0px));
  --gridly-v2-filter-strip-top: calc(156px + env(safe-area-inset-top, 0px));
  --gridly-v2-filter-strip-bottom: calc(202px + env(safe-area-inset-top, 0px));
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 {
  --gridly-v2-top-shield-height: calc(var(--gridly-v2-filter-strip-bottom) + 10px);
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2::before {
  background:
    linear-gradient(180deg, #050b16 0%, #06101d 72%, #071523 92%, rgba(7, 21, 35, 0.94) 100%);
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.38),
    inset 0 -1px 0 rgba(144, 202, 255, 0.12);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card {
  top: var(--gridly-v2-awareness-card-top);
  left: var(--gridly-v2-command-left);
  right: var(--gridly-v2-command-right);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-color: rgba(169, 216, 255, 0.36);
  box-shadow:
    0 12px 24px rgba(2, 8, 18, 0.34),
    inset 0 1px 0 rgba(230, 244, 255, 0.12);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -9px;
  height: 9px;
  border-left: 1px solid rgba(169, 216, 255, 0.28);
  border-right: 1px solid rgba(169, 216, 255, 0.28);
  background: linear-gradient(180deg, rgba(7, 18, 32, 0.92), rgba(7, 18, 32, 0.72));
  pointer-events: none;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
  top: var(--gridly-v2-filter-strip-top);
  left: var(--gridly-v2-command-left);
  right: var(--gridly-v2-command-right);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  padding: 5px;
  gap: 5px;
  border: 1px solid rgba(173, 213, 255, 0.34);
  border-top-color: rgba(205, 231, 255, 0.42);
  border-radius: 10px 10px 15px 15px;
  background:
    linear-gradient(180deg, rgba(5, 13, 24, 0.98), rgba(7, 17, 31, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.18), transparent 58%);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(5, 12, 22, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
  width: 100%;
  min-width: 0;
  min-height: 31px;
  padding: 7px 3px;
  border: 1px solid rgba(188, 216, 244, 0.18);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(224, 238, 252, 0.9);
  font-size: 0.62rem;
  font-weight: 760;
  letter-spacing: 0.006em;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.48);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button.is-active {
  border-color: rgba(160, 222, 255, 0.86);
  background:
    linear-gradient(135deg, rgba(128, 217, 255, 0.5), rgba(48, 133, 255, 0.42)),
    rgba(10, 30, 54, 0.96);
  color: #ffffff;
  box-shadow:
    0 8px 18px rgba(16, 83, 168, 0.44),
    0 0 0 1px rgba(232, 248, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail {
  top: calc(var(--gridly-v2-filter-strip-bottom) + 16px);
  right: var(--gridly-v2-command-right);
}

/* V212.2 — persistent intelligence card hierarchy stabilization. */
body[data-layout-mode="portrait"] .gridly-v2-awareness-brief-card {
  top: 54px;
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 78px;
  max-height: 92px;
  padding: 12px 14px;
  border-radius: 17px;
  overflow: hidden;
}

body[data-layout-mode="portrait"] .gridly-v2-awareness-brief-card strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #f8fbff;
  font-size: clamp(17px, 4.9vw, 21px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 800;
}

body[data-layout-mode="portrait"] .gridly-v2-awareness-brief-card > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(210, 225, 241, 0.82);
  font-size: 12px;
  line-height: 1.25;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-top-awareness-microline,
body[data-layout-mode="portrait"] .gridly-v2-top-awareness-microline {
  display: none !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 {
  --gridly-v2-filter-strip-top: calc(152px + env(safe-area-inset-top, 0px));
  --gridly-v2-filter-strip-bottom: calc(198px + env(safe-area-inset-top, 0px));
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail {
  top: calc(var(--gridly-v2-filter-strip-bottom) + 14px);
}


/* V250.8C — persistent bottom intelligence shell parity for Awareness and Route. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel):not([hidden]):not(.is-command-card-suppressed),
  body.gridly-text-large[data-layout-mode="portrait"] .map-card > .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel):not([hidden]):not(.is-command-card-suppressed) {
    display: grid !important;
    position: fixed !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    top: max(
      calc(env(safe-area-inset-top, 0px) + 10px),
      var(--gridly-awareness-panel-top, calc(100dvh - var(--gridly-awareness-dock-footprint, 118px) - var(--gridly-awareness-panel-dock-gap, 10px) - 116px))
    ) !important;
    bottom: auto !important;
    transform: none !important;
    grid-template-columns: minmax(0, 1fr) 96px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 116px !important;
    max-height: calc(var(--gridly-awareness-panel-available-height, 100dvh) - env(safe-area-inset-top, 0px) - 10px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px 10px 10px 12px !important;
    border-radius: 18px !important;
    border-color: rgba(124, 231, 255, 0.42) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(124, 231, 255, 0.18), transparent 42%),
      linear-gradient(145deg, rgba(7, 22, 34, 0.9), rgba(5, 13, 23, 0.95)) !important;
    box-shadow: 0 16px 34px rgba(1, 8, 18, 0.48), inset 0 1px 0 rgba(223, 246, 255, 0.1) !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-destination-command-copy {
    display: grid !important;
    grid-template-rows: 11px minmax(18px, auto) minmax(28px, auto) minmax(16px, auto) minmax(20px, auto) !important;
    align-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-kicker {
    display: block !important;
    min-height: 11px !important;
    color: rgba(142, 230, 255, 0.76);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-destination-panel .mobile-awareness-panel-kicker {
    visibility: hidden !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) strong,
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) #mobileDestinationCommandMeta,
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-crossings,
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-issues,
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .destination-route-impact-line {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) strong {
    color: rgba(239, 253, 255, 0.98) !important;
    font-size: 0.98rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-destination-panel strong {
    font-size: 0.9rem !important;
    line-height: 1.12 !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) #mobileDestinationCommandMeta {
    display: -webkit-box !important;
    min-height: 28px !important;
    color: rgba(219, 236, 255, 0.82) !important;
    font-size: 0.72rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-crossings,
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-issues {
    display: block !important;
    min-height: 16px !important;
    color: rgba(189, 224, 241, 0.86) !important;
    font-size: 0.72rem !important;
    font-weight: 760 !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-crossings[hidden],
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-issues[hidden] {
    display: block !important;
    visibility: hidden !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .destination-route-impact-line,
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .destination-route-impact-line:empty {
    display: block !important;
    min-height: 20px !important;
    box-sizing: border-box !important;
    color: rgba(224, 242, 254, 0.98) !important;
    font-size: 0.72rem !important;
    font-weight: 760 !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .destination-route-impact-line:empty {
    visibility: hidden !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .compact-btn {
    align-self: center !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }
}

/* V250.8D — compact persistent shell visual correction. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel):not([hidden]):not(.is-command-card-suppressed),
  body.gridly-text-large[data-layout-mode="portrait"] .map-card > .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel):not([hidden]):not(.is-command-card-suppressed) {
    top: max(
      calc(env(safe-area-inset-top, 0px) + 10px),
      var(--gridly-awareness-panel-top, calc(100dvh - var(--gridly-awareness-dock-footprint, 118px) - var(--gridly-awareness-panel-dock-gap, 10px) - 90px))
    ) !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
    gap: 8px !important;
    min-height: 0 !important;
    max-height: min(104px, calc(var(--gridly-awareness-panel-available-height, 100dvh) - env(safe-area-inset-top, 0px) - 10px)) !important;
    padding: 8px 8px 8px 11px !important;
    border-radius: 17px !important;
    overflow: hidden !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-destination-command-copy {
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    align-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-kicker {
    min-height: 0 !important;
    line-height: 1 !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-destination-panel .mobile-awareness-panel-kicker {
    display: none !important;
    min-height: 0 !important;
    visibility: hidden !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) strong {
    font-size: 0.9rem !important;
    line-height: 1.08 !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) #mobileDestinationCommandMeta {
    min-height: 0 !important;
    font-size: 0.7rem !important;
    line-height: 1.16 !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-crossings,
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-issues,
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .destination-route-impact-line,
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .destination-route-impact-line:empty {
    min-height: 0 !important;
    font-size: 0.69rem !important;
    line-height: 1.16 !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-crossings[hidden],
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-issues[hidden],
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .destination-route-impact-line:empty {
    display: none !important;
    min-height: 0 !important;
    visibility: hidden !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .compact-btn {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 6px 9px !important;
    font-size: 0.7rem !important;
  }
}

.gridly-destination-impact-significance {
  grid-template-columns: minmax(12rem, 1fr) !important;
  align-items: start;
}

.gridly-destination-impact-significance strong {
  grid-row: auto !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
  white-space: normal !important;
}

.gridly-destination-impact-significance em {
  grid-column: 1 !important;
  grid-row: auto !important;
  justify-self: start;
  white-space: normal !important;
}

@media (max-width: 420px) {
  .gridly-destination-impact-significance {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* GRIDLY V254.4 — Awareness Primary Surface Hierarchy */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card {
    display: grid;
    align-content: center;
    gap: 6px;
    min-height: 82px;
    max-height: 96px;
    padding: 12px 14px 11px;
    border-radius: 18px;
    border-color: rgba(176, 218, 255, 0.4);
    background:
      radial-gradient(circle at 14% 0%, rgba(125, 211, 252, 0.18), transparent 38%),
      linear-gradient(160deg, rgba(10, 24, 42, 0.94), rgba(5, 12, 22, 0.91));
    box-shadow:
      0 14px 28px rgba(1, 8, 18, 0.38),
      0 0 0 1px rgba(219, 242, 255, 0.04),
      inset 0 1px 0 rgba(235, 248, 255, 0.12);
    overflow: hidden;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill strong {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: rgba(249, 252, 255, 0.99);
    font-size: clamp(1rem, 4.45vw, 1.16rem);
    font-weight: 820;
    letter-spacing: -0.028em;
    line-height: 1.08;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill span {
    display: block;
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
    overflow: hidden;
    color: rgba(218, 234, 249, 0.88);
    font-size: 0.73rem;
    font-weight: 610;
    letter-spacing: 0.004em;
    line-height: 1.24;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="high"] {
    border-color: rgba(251, 146, 60, 0.58);
    background:
      radial-gradient(circle at 14% 0%, rgba(251, 146, 60, 0.16), transparent 38%),
      linear-gradient(160deg, rgba(33, 19, 13, 0.95), rgba(7, 13, 23, 0.92));
    box-shadow:
      0 14px 30px rgba(75, 23, 7, 0.32),
      0 0 0 1px rgba(255, 237, 213, 0.05),
      inset 0 1px 0 rgba(255, 237, 213, 0.13);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="moderate"] {
    border-color: rgba(96, 165, 250, 0.5);
    background:
      radial-gradient(circle at 14% 0%, rgba(96, 165, 250, 0.18), transparent 38%),
      linear-gradient(160deg, rgba(10, 24, 42, 0.94), rgba(5, 12, 22, 0.91));
  }
}

/* GRIDLY V254.5 — Filter Strip Hierarchy */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(173, 213, 255, 0.18);
    border-top-color: rgba(205, 231, 255, 0.22);
    border-radius: 12px;
    background:
      linear-gradient(180deg, rgba(5, 13, 24, 0.72), rgba(7, 17, 31, 0.66)),
      radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.06), transparent 54%);
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.22),
      0 0 0 1px rgba(5, 12, 22, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
    min-height: 29px;
    padding: 6px 3px;
    border: 1px solid rgba(188, 216, 244, 0.1);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(214, 230, 246, 0.72);
    font-size: 0.6rem;
    font-weight: 650;
    letter-spacing: 0.002em;
    text-shadow: none;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button.is-active {
    border-color: rgba(142, 202, 255, 0.44);
    background:
      linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(48, 133, 255, 0.14)),
      rgba(10, 30, 54, 0.62);
    color: rgba(248, 252, 255, 0.92);
    box-shadow:
      0 4px 10px rgba(16, 83, 168, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

/* GRIDLY V254.6 — Bottom Dock Hierarchy */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 6px;
    gap: 5px;
    border-color: rgba(164, 201, 243, 0.16);
    border-top-color: rgba(202, 228, 255, 0.2);
    background:
      linear-gradient(180deg, rgba(5, 12, 22, 0.58), rgba(5, 11, 20, 0.68)),
      radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.035), transparent 56%);
    box-shadow:
      0 6px 14px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgba(5, 12, 22, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
    min-height: 46px;
    padding: 6px 3px 5px;
    gap: 3px;
    color: rgba(225, 238, 251, 0.82);
    background: rgba(255, 255, 255, 0.012);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon {
    width: 27px;
    height: 27px;
    border-color: rgba(166, 204, 246, 0.2);
    background: linear-gradient(170deg, rgba(10, 21, 36, 0.56), rgba(6, 14, 25, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button em {
    color: rgba(219, 233, 248, 0.78);
    font-size: 0.6rem;
    font-weight: 560;
    letter-spacing: 0.004em;
    line-height: 1.12;
  }
}

/* GRIDLY V254.7A — Control Rail Balance */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail {
    gap: 7px;
    opacity: 0.96;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button {
    min-width: 40px;
    min-height: 40px;
    border-color: rgba(164, 201, 243, 0.22);
    border-top-color: rgba(205, 231, 255, 0.26);
    background:
      linear-gradient(180deg, rgba(5, 13, 24, 0.62), rgba(6, 15, 27, 0.74)),
      radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.045), transparent 58%);
    color: rgba(226, 240, 253, 0.88);
    box-shadow:
      0 5px 12px rgba(0, 0, 0, 0.22),
      0 0 0 1px rgba(5, 12, 22, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.055);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button:focus-visible {
    border-color: rgba(154, 213, 255, 0.58);
    outline: 2px solid rgba(125, 211, 252, 0.44);
    outline-offset: 2px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail svg {
    width: 17px;
    height: 17px;
    color: rgba(230, 243, 255, 0.91);
    stroke-width: 2.16;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail [data-v2-control="layers"],
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail [data-v2-control="use-location"] {
    border-color: rgba(164, 201, 243, 0.2);
    background:
      linear-gradient(180deg, rgba(6, 17, 31, 0.62), rgba(5, 14, 25, 0.72)),
      radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.045), transparent 58%);
    color: rgba(229, 242, 255, 0.88);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail [data-v2-control="use-location"][aria-busy="true"] {
    color: rgba(164, 210, 255, 0.96);
    box-shadow:
      0 5px 12px rgba(0, 0, 0, 0.18),
      0 0 0 2px rgba(96, 165, 250, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail [data-v2-control="zoom-in"],
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail [data-v2-control="zoom-out"] {
    color: rgba(220, 235, 250, 0.82);
  }
}

/* V255.7C: portrait participation acknowledgement has dedicated ownership; Awareness Brief remains top-panel owner. */
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-participation-ack {
  position: fixed;
  top: 142px;
  left: 18px;
  right: 18px;
  z-index: 100150;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ed7bd;
  font-size: 0.75rem;
  font-weight: 760;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, rgba(26, 61, 48, 0.94), rgba(14, 42, 33, 0.9));
  border: 1px solid rgba(111, 187, 151, 0.46);
  box-shadow: 0 12px 28px rgba(3, 9, 18, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  pointer-events: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms ease;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-participation-ack.info {
  color: #9ed8ff;
  background: linear-gradient(180deg, rgba(31, 68, 103, 0.94), rgba(13, 42, 72, 0.9));
  border-color: rgba(126, 173, 214, 0.5);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-participation-ack.error {
  color: #ffb2bf;
  background: linear-gradient(180deg, rgba(85, 32, 44, 0.94), rgba(62, 20, 31, 0.9));
  border-color: rgba(255, 92, 122, 0.58);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-participation-ack.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-participation-ack[hidden] {
  display: none !important;
}

/* V257.1 — visible route exit controls on portrait active route surfaces. */
body[data-layout-mode="portrait"] .mobile-destination-command-actions {
  display: grid;
  grid-auto-rows: minmax(34px, auto);
  gap: 6px;
  align-self: center;
  justify-self: end;
}

body[data-layout-mode="portrait"] .mobile-destination-command-actions .compact-btn {
  width: 104px;
  min-width: 104px;
  max-width: 104px;
}

body[data-layout-mode="portrait"] .mobile-destination-command-actions .mobile-route-exit-control {
  border-color: rgba(186, 216, 248, 0.24);
  color: #dff2ff;
  background: rgba(255, 255, 255, 0.075);
}

body[data-layout-mode="portrait"] .mobile-route-exit-control[hidden],
.gridly-destination-impact-actions .mobile-route-exit-control[hidden] {
  display: none !important;
}

.gridly-destination-impact-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

.gridly-destination-impact-actions .secondary-btn {
  width: 100%;
}

.gridly-destination-impact-show-full-route {
  border-color: rgba(56, 189, 248, 0.5);
  color: #e8fbff;
  background: rgba(56, 189, 248, 0.14);
}

.gridly-destination-impact-clear-route {
  border-color: rgba(125, 211, 252, 0.32);
  color: #dff7ff;
  background: rgba(255, 255, 255, 0.075);
}

.gridly-destination-impact-manage-route {
  border-color: rgba(186, 216, 248, 0.24);
  color: #dff2ff;
  background: rgba(255, 255, 255, 0.075);
}

/* V257.1 follow-up — portrait route card footer actions with usable tap targets. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel:not([hidden]):not(.is-command-card-suppressed) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, auto) auto !important;
    align-items: stretch !important;
    gap: 10px !important;
    max-height: min(174px, calc(var(--gridly-awareness-panel-available-height, 100dvh) - env(safe-area-inset-top, 0px) - 10px)) !important;
    padding: 10px 11px 11px !important;
    overflow: visible !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-copy {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel.is-route-monitoring:not([hidden]):not(.is-command-card-suppressed) #mobileDestinationCommandBtn {
    display: none !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel:not(.has-route-exit-actions):not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-actions .compact-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 7px !important;
    border-radius: 14px !important;
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-actions .mobile-route-exit-control {
    border-color: rgba(125, 211, 252, 0.42) !important;
    color: #e7f8ff !important;
    background: linear-gradient(180deg, rgba(21, 73, 101, 0.62), rgba(9, 27, 44, 0.68)) !important;
    box-shadow: inset 0 1px 0 rgba(223, 246, 255, 0.1) !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-actions .mobile-route-exit-control[hidden] {
    display: none !important;
  }
}

/* V257.1 follow-up B — force active portrait route card actions into a separated footer row. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.has-route-exit-actions:not([hidden]):not(.is-command-card-suppressed) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
    gap: 8px !important;
    max-height: min(188px, calc(var(--gridly-awareness-panel-available-height, 100dvh) - env(safe-area-inset-top, 0px) - 10px)) !important;
    padding: 10px 11px 11px !important;
    overflow: visible !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.has-route-exit-actions:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-copy {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.has-route-exit-actions:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 2px !important;
    padding-top: 8px !important;
    gap: 8px !important;
    border-top: 1px solid rgba(148, 202, 255, 0.14) !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.has-route-exit-actions.is-route-monitoring:not([hidden]):not(.is-command-card-suppressed) #mobileDestinationCommandBtn {
    display: none !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.has-route-exit-actions:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-actions .compact-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 8px !important;
    border-radius: 14px !important;
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.has-route-exit-actions:not([hidden]):not(.is-command-card-suppressed) .mobile-route-exit-control[hidden] {
    display: none !important;
  }
}

/* V257.1 route exit ownership reset — no separate portrait action bar. */
body[data-layout-mode="portrait"] #mobileRouteActionBar {
  display: none !important;
}

.gridly-destination-impact-stop-watch {
  border-color: rgba(125, 211, 252, 0.32);
  color: #dff7ff;
  background: rgba(255, 255, 255, 0.075);
}

/* V266.1A — enforce hidden setup controls on Manage Places primary screen */
.manage-places-group[hidden],
.destination-chip-row[hidden],
#managePlacesSaveGroup[hidden],
#managePlacesSourceGroup[hidden],
#managePlacesSlotsGroup[hidden],
#managePlacesAddressGroup[hidden],
#managePlacesSavedGroup[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* V266.1 — Manage Places single-purpose status-first flow */
.manage-places-primary {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.manage-places-primary[hidden] { display: none !important; }

.manage-place-status-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(142, 239, 255, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 26px rgba(2, 8, 18, 0.18);
}

.manage-place-status-card strong {
  display: block;
  margin-top: 4px;
  color: #f4fbff;
  font-size: 1rem;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.manage-place-status-card small,
.manage-place-empty-note {
  display: block;
  margin-top: 5px;
  color: rgba(212, 230, 244, 0.76);
  font-size: 0.76rem;
  line-height: 1.35;
}

.manage-place-status-label {
  margin: 0;
  color: rgba(142, 239, 255, 0.9);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.manage-place-primary-action {
  white-space: nowrap;
}

.manage-place-status-card-favorites {
  grid-template-columns: 1fr;
}

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

.manage-place-favorites-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.manage-place-favorite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: rgba(5, 12, 22, 0.22);
  color: rgba(244, 251, 255, 0.93);
  font-size: 0.82rem;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.manage-places-source-sheet {
  margin-top: 12px;
}

.manage-places-back-btn {
  justify-self: start;
  margin-top: 4px;
}

@media (max-width: 760px) {
  .manage-places-primary { gap: 8px; margin-top: 8px; }
  .manage-place-status-card { padding: 10px; border-radius: 13px; }
  .manage-place-status-card strong { font-size: 0.92rem; }
  .manage-place-status-card small,
  .manage-place-empty-note { font-size: 0.71rem; }
  .manage-place-primary-action { min-height: 32px; padding: 6px 9px; font-size: 0.72rem; }
}

/* V266.1C — Manage Places focused-flow visual polish only */
.route-setup-modal-card #managePlacesSourceGroup,
.route-setup-modal-card #managePlacesAddressGroup,
.route-setup-modal-card #managePlacesSavedGroup,
.route-setup-modal-card #managePlacesSaveGroup {
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border-color: rgba(142, 239, 255, 0.14) !important;
  background: linear-gradient(180deg, rgba(15, 31, 48, 0.68), rgba(7, 15, 27, 0.62)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 30px rgba(2, 8, 18, 0.18);
}

.route-setup-modal-card #managePlacesSourceGroup {
  margin-top: 14px;
}

.route-setup-modal-card #managePlacesSourceGroup .manage-places-group-label,
.route-setup-modal-card #managePlacesAddressGroup .manage-places-group-label,
.route-setup-modal-card #managePlacesSavedGroup .manage-places-group-label,
.route-setup-modal-card #managePlacesSaveGroup .manage-places-group-label {
  color: rgba(171, 230, 255, 0.92) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.13em !important;
}

.route-setup-modal-card #managePlacesSourceGroup .manage-places-group-note {
  margin-top: -4px;
  color: rgba(222, 239, 250, 0.78) !important;
  font-size: 0.8rem !important;
  line-height: 1.45 !important;
}

.route-setup-modal-card .manage-source-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

.route-setup-modal-card .manage-source-row .destination-chip,
.route-setup-modal-card #managePlacesBackBtn {
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 11px 14px !important;
  border-radius: 15px !important;
  white-space: normal !important;
  line-height: 1.18 !important;
  text-align: center !important;
}

.route-setup-modal-card .manage-source-row .destination-chip {
  border-color: rgba(142, 239, 255, 0.22) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.045)) !important;
  box-shadow: 0 10px 22px rgba(2, 8, 18, 0.16);
  color: #f4fbff !important;
  font-weight: 820;
}

.route-setup-modal-card .manage-source-row .destination-chip.active {
  border-color: rgba(141, 205, 255, 0.64) !important;
  background: linear-gradient(180deg, rgba(72, 164, 255, 0.28), rgba(72, 164, 255, 0.14)) !important;
}

.route-setup-modal-card #managePlacesBackBtn {
  justify-self: stretch !important;
  margin-top: 2px !important;
  color: rgba(226, 241, 251, 0.9) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.route-setup-modal-card #managePlacesAddressGroup label,
.route-setup-modal-card #managePlacesSavedGroup label {
  display: grid !important;
  gap: 8px !important;
  color: rgba(219, 237, 249, 0.88) !important;
  font-size: 0.78rem !important;
  font-weight: 780;
  letter-spacing: 0.01em;
}

.route-setup-modal-card #managePlacesAddressGroup input,
.route-setup-modal-card #managePlacesSavedGroup select {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(142, 239, 255, 0.2) !important;
  background: rgba(3, 10, 19, 0.56) !important;
  color: #f4fbff !important;
  font-size: 0.9rem !important;
  line-height: 1.25 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.route-setup-modal-card #managePlacesSavedGroup select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px !important;
  background-image: linear-gradient(45deg, transparent 50%, rgba(212, 239, 255, 0.9) 50%), linear-gradient(135deg, rgba(212, 239, 255, 0.9) 50%, transparent 50%), linear-gradient(180deg, rgba(3, 10, 19, 0.56), rgba(3, 10, 19, 0.56)) !important;
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%, 0 0 !important;
  background-size: 6px 6px, 6px 6px, 100% 100% !important;
  background-repeat: no-repeat !important;
}

.route-setup-modal-card #managePlacesSaveGroup {
  margin-top: 12px !important;
}

.route-setup-modal-card #managePlacesSaveGroup .destination-chip-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

.route-setup-modal-card #managePlacesSaveGroup .primary-btn,
.route-setup-modal-card #managePlacesSaveGroup #mobileResetPlacesBtn {
  width: 100% !important;
  min-height: 46px !important;
  padding: 11px 14px !important;
  border-radius: 15px !important;
  font-size: 0.9rem !important;
  line-height: 1.18 !important;
}

.route-setup-modal-card #managePlacesSaveGroup .primary-btn {
  box-shadow: 0 14px 28px rgba(102, 232, 255, 0.16) !important;
}

.route-setup-modal-card #managePlacesSaveGroup .manage-places-save-status {
  min-height: 1.35em;
  margin-top: 2px !important;
  color: rgba(221, 238, 249, 0.86);
  font-size: 0.8rem !important;
  line-height: 1.45 !important;
}

@media (max-width: 760px) {
  .route-setup-modal-card {
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .route-setup-modal-card #managePlacesSourceGroup,
  .route-setup-modal-card #managePlacesAddressGroup,
  .route-setup-modal-card #managePlacesSavedGroup,
  .route-setup-modal-card #managePlacesSaveGroup {
    gap: 11px !important;
    padding: 13px !important;
    border-radius: 17px !important;
  }

  .route-setup-modal-card .manage-source-row {
    gap: 9px !important;
  }

  body[data-mobile-mode] .route-setup-modal-card > #managePlacesSaveGroup .destination-chip-row,
  body[data-mobile-mode] #managePlacesSaveGroup .destination-chip-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  body[data-mobile-mode] .route-setup-modal-card > #managePlacesSaveGroup .primary-btn,
  body[data-mobile-mode] .route-setup-modal-card > #managePlacesSaveGroup #mobileResetPlacesBtn,
  body[data-mobile-mode] #managePlacesSaveGroup .primary-btn,
  body[data-mobile-mode] #managePlacesSaveGroup #mobileResetPlacesBtn {
    flex: none !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 14px !important;
    font-size: 0.88rem !important;
  }

  body[data-mobile-mode] #managePlacesAddressGroup label,
  body[data-mobile-mode] #managePlacesSavedGroup label {
    gap: 8px !important;
  }

  body[data-mobile-mode] #managePlacesAddressGroup input,
  body[data-mobile-mode] #managePlacesSavedGroup select,
  #mobileSavedDestinationSelect {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 0.88rem !important;
  }

  body[data-mobile-mode] #managePlacesSavedGroup select,
  #mobileSavedDestinationSelect {
    padding-right: 40px !important;
  }
}

/* V266.1D — Manage Places focused flow consistency fix (visual/layout only) */
.route-setup-modal-card .route-setup-grid-mobile {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  width: 100% !important;
}

.route-setup-modal-card #managePlacesSourceGroup,
.route-setup-modal-card #managePlacesAddressGroup,
.route-setup-modal-card #managePlacesSavedGroup {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

.route-setup-modal-card #managePlacesSourceGroup,
.route-setup-modal-card #managePlacesAddressGroup,
.route-setup-modal-card #managePlacesSavedGroup,
.route-setup-modal-card #managePlacesSaveGroup {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.route-setup-modal-card #managePlacesSourceGroup .manage-source-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
}

.route-setup-modal-card #managePlacesSourceGroup .manage-source-row .destination-chip,
.route-setup-modal-card #managePlacesBackBtn,
.route-setup-modal-card #managePlacesAddressGroup label,
.route-setup-modal-card #managePlacesAddressGroup input,
.route-setup-modal-card #managePlacesSavedGroup label,
.route-setup-modal-card #managePlacesSavedGroup select {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.route-setup-modal-card #managePlacesSaveGroup {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

body[data-mobile-mode] .route-setup-modal-card[data-mode="manage"] > #managePlacesSaveGroup {
  position: static !important;
  bottom: auto !important;
  flex-shrink: 0 !important;
  margin-top: 12px !important;
}

body[data-mobile-mode] .route-setup-modal-card[data-mode="manage"] > #managePlacesSaveGroup .destination-chip-row,
body[data-mobile-mode] #managePlacesSaveGroup .destination-chip-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
}

body[data-mobile-mode] .route-setup-modal-card[data-mode="manage"] > #managePlacesSaveGroup .primary-btn,
body[data-mobile-mode] .route-setup-modal-card[data-mode="manage"] > #managePlacesSaveGroup #mobileResetPlacesBtn {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 760px) {
  .route-setup-modal-card[data-mode="manage"] .route-setup-grid-mobile,
  .route-setup-modal-card[data-mode="manage"] #managePlacesSourceGroup,
  .route-setup-modal-card[data-mode="manage"] #managePlacesAddressGroup,
  .route-setup-modal-card[data-mode="manage"] #managePlacesSavedGroup,
  .route-setup-modal-card[data-mode="manage"] #managePlacesSaveGroup {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
  }
}

body[data-mobile-mode] .route-setup-modal-card[data-mode="manage"] {
  overflow-y: auto !important;
}

body[data-mobile-mode] .route-setup-modal-card[data-mode="manage"] > .route-setup-grid-mobile {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker,
#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker:is(.high, .moderate, .low, .route-relevant),
#map .leaflet-marker-icon.gridly-production-marker-icon:is(.gridly-marker-hazard-critical, .gridly-marker-hazard-high, .gridly-marker-hazard-moderate, .gridly-marker-hazard-low) .gridly-hazard-marker.has-production-marker,
#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker:is(.confidence-high, .confidence-community, [data-gridly-impact-level], [data-gridly-consequence]) {
  width: 64px !important;
  height: 64px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
  display: block !important;
  place-items: initial !important;
  position: relative !important;
}

/* V271.5: hide production-marker freshness chips; keep multi-report count badges visible. */
#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker > :is(small, b) {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 0.96 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 3 !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #07121d !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  backdrop-filter: blur(8px) !important;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker > small {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker > b {
  right: auto !important;
  bottom: 4px !important;
  top: auto !important;
  left: calc(100% + 2px) !important;
  min-width: 15px !important;
  height: 15px !important;
  padding: 0 4px !important;
  transform: none !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(7, 18, 29, 0.16) !important;
  box-shadow: 0 2px 6px rgba(7, 18, 29, 0.14) !important;
  font-size: 8px !important;
  font-weight: 850 !important;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker:not([data-state="cleared"]):not([data-state="expired"]):not([data-state="inactive"]):not(.gridly-freshness-stale):not(.gridly-freshness-unknown),
#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker:not([data-state="cleared"]):not([data-state="expired"]):not([data-state="inactive"]):not(.gridly-freshness-stale):not(.gridly-freshness-unknown).far-faded,
#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker:not([data-state="cleared"]):not([data-state="expired"]):not([data-state="inactive"]):not(.gridly-freshness-stale):not(.gridly-freshness-unknown).gridly-freshness-aging {
  opacity: 1 !important;
}

/* V270.1 production marker family: crossing inventory now uses the same PNG marker shell as hazards. */
#map .leaflet-marker-icon.gridly-crossing-production-marker-icon,
#map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-production-marker-icon {
  width: 64px !important;
  height: 64px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-crossing-marker.has-production-marker,
.gridly-crossing-marker.has-production-marker {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
  display: block !important;
  position: relative !important;
}

#map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-crossing-marker.has-production-marker .gridly-production-marker-img {
  width: 64px !important;
  height: 64px !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  object-fit: contain !important;
  pointer-events: none !important;
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.34));
}

#map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-crossing-marker.has-production-marker.alert .gridly-production-marker-img,
#map .leaflet-marker-icon.gridly-crossing-production-marker-icon.route-impacted .gridly-crossing-marker.has-production-marker .gridly-production-marker-img {
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 9px rgba(255, 78, 111, 0.38));
}

#map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-marker-wrap.gridly-crossing-marker-wrap {
  width: 64px !important;
  height: 64px !important;
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-marker-cluster-badge {
  z-index: 3 !important;
}

/* V271.5A: crossing production markers keep freshness in popups/alerts, not on-map chips. */
#map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-marker-minutes {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* V276.2 crossing visibility refinement: keep inactive crossing infrastructure markers readable without changing the marker family. */
#map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-crossing-infrastructure-marker-icon,
#map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-crossing-infrastructure-marker-icon .gridly-marker-wrap.gridly-crossing-marker-wrap,
#map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-crossing-marker.has-production-marker[data-marker-category="crossing_infrastructure"],
#map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-crossing-marker.has-production-marker[data-marker-category="crossing_infrastructure"] .gridly-production-marker-img {
  width: 72px !important;
  height: 72px !important;
}

#map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-crossing-marker.has-production-marker[data-marker-category="crossing_infrastructure"] .gridly-production-marker-img {
  opacity: 0.82 !important;
}

#map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-crossing-infrastructure-marker-icon.gridly-crossing-street-zoom-marker-size,
#map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-crossing-infrastructure-marker-icon .gridly-marker-wrap.gridly-crossing-marker-wrap.gridly-crossing-street-zoom-marker-size,
#map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-crossing-infrastructure-marker-icon.gridly-crossing-street-zoom-marker-size .gridly-crossing-marker.has-production-marker[data-marker-category="crossing_infrastructure"],
#map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-crossing-infrastructure-marker-icon.gridly-crossing-street-zoom-marker-size .gridly-crossing-marker.has-production-marker[data-marker-category="crossing_infrastructure"] .gridly-production-marker-img {
  width: 78px !important;
  height: 78px !important;
}

@media (max-width: 640px) and (orientation: portrait) {
  #map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-crossing-infrastructure-marker-icon,
  #map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-crossing-infrastructure-marker-icon .gridly-marker-wrap.gridly-crossing-marker-wrap,
  #map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-crossing-marker.has-production-marker[data-marker-category="crossing_infrastructure"],
  #map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-crossing-marker.has-production-marker[data-marker-category="crossing_infrastructure"] .gridly-production-marker-img {
    width: 76px !important;
    height: 76px !important;
  }

  #map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-crossing-infrastructure-marker-icon.gridly-crossing-street-zoom-marker-size,
  #map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-crossing-infrastructure-marker-icon .gridly-marker-wrap.gridly-crossing-marker-wrap.gridly-crossing-street-zoom-marker-size,
  #map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-crossing-infrastructure-marker-icon.gridly-crossing-street-zoom-marker-size .gridly-crossing-marker.has-production-marker[data-marker-category="crossing_infrastructure"],
  #map .leaflet-marker-icon.gridly-crossing-production-marker-icon.gridly-crossing-infrastructure-marker-icon.gridly-crossing-street-zoom-marker-size .gridly-crossing-marker.has-production-marker[data-marker-category="crossing_infrastructure"] .gridly-production-marker-img {
    width: 80px !important;
    height: 80px !important;
  }
}

#map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-crossing-marker.has-production-marker[data-marker-category="rail_blockage_delay"] .gridly-production-marker-img,
#map .leaflet-marker-icon.gridly-crossing-production-marker-icon.route-impacted .gridly-crossing-marker.has-production-marker .gridly-production-marker-img {
  opacity: 1 !important;
}


/* GRIDLY V272: standard production hazard markers keep a fixed map footprint while compact PNG artwork is visually normalized. */
#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker {
  --gridly-production-marker-artwork-scale: 1;
  transform: none !important;
  animation: none !important;
  filter: none !important;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker:is(.route-relevant, [data-gridly-route-relevant="true"], [data-gridly-impact-level="critical"], [data-gridly-impact-level="high"], [data-gridly-impact-level="moderate"], [data-gridly-impact-level="low"]) {
  transform: none !important;
  animation: none !important;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker .gridly-production-marker-img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(var(--gridly-production-marker-artwork-scale, 1)) !important;
  transform-origin: var(--gridly-production-marker-anchor-x, 50%) var(--gridly-production-marker-anchor-y, 80%) !important;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker[data-marker-category="crash"] {
  --gridly-production-marker-artwork-scale: 1.52;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker[data-marker-category="road_closed"] {
  --gridly-production-marker-artwork-scale: 1.48;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker:is([data-marker-category="flooding"], [data-marker-category="standing_water"], [data-marker-category="ice"]) {
  --gridly-production-marker-artwork-scale: 1.4;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker[data-marker-category="debris"] {
  --gridly-production-marker-artwork-scale: 1.73;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker[data-marker-category="traffic_backup"] {
  --gridly-production-marker-artwork-scale: 1.9;
}

#map .leaflet-marker-icon.gridly-production-marker-icon .gridly-hazard-marker.has-production-marker[data-marker-category="traffic_signal_issue"] {
  --gridly-production-marker-artwork-scale: 1.83;
}

#map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-crossing-marker.has-production-marker[data-marker-category="rail_blockage_delay"] {
  --gridly-production-marker-artwork-scale: 1.26;
}

#map .leaflet-marker-icon.gridly-crossing-production-marker-icon .gridly-crossing-marker.has-production-marker .gridly-production-marker-img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(var(--gridly-production-marker-artwork-scale, 1)) !important;
  transform-origin: var(--gridly-production-marker-anchor-x, 50%) var(--gridly-production-marker-anchor-y, 80%) !important;
}

/* GRIDLY V272 — desktop-only public beta gate. Portrait/mobile selectors intentionally untouched. */
.gridly-desktop-gate {
  display: none;
}

body[data-layout-mode="desktop"] {
  overflow: hidden;
  min-height: 100vh;
  background: #00030c;
}

body[data-layout-mode="desktop"] > :not(.gridly-desktop-gate):not(script):not(style),
body[data-layout-mode="desktop"] .app-header,
body[data-layout-mode="desktop"] .app-shell,
body[data-layout-mode="desktop"] #gridlySearchShell,
body[data-layout-mode="desktop"] #gridlyHazardLauncher,
body[data-layout-mode="desktop"] #gridlyHazardCounter,
body[data-layout-mode="desktop"] #gridlyHazardPanel,
body[data-layout-mode="desktop"] .gridly-hazard-launcher,
body[data-layout-mode="desktop"] .gridly-hazard-counter,
body[data-layout-mode="desktop"] .gridly-hazard-panel,
body[data-layout-mode="desktop"] .leaflet-control-container,
body[data-layout-mode="desktop"] .route-setup-modal,
body[data-layout-mode="desktop"] .smart-alerts-modal,
body[data-layout-mode="desktop"] .settings-modal,
body[data-layout-mode="desktop"] .place-name-modal,
body[data-layout-mode="desktop"] #routeSetupModal,
body[data-layout-mode="desktop"] #smartAlertsModal,
body[data-layout-mode="desktop"] #settingsModal,
body[data-layout-mode="desktop"] #firstRunSetupModal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-layout-mode="desktop"] .gridly-desktop-gate {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100vw;
  min-height: 100vh;
  padding: 0;
  background: #00030c;
  color: #edf6ff;
}

body[data-layout-mode="desktop"] .gridly-desktop-gate::before {
  content: none;
}

body[data-layout-mode="desktop"] .gridly-desktop-gate-shell {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-layout-mode="desktop"] .gridly-desktop-gate-board-image {
  display: block;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}


/* GRIDLY V272.2 — consumer readability pass.
   Controlled +1 typography step for visible Gridly copy only; markers, gates, filters,
   route/report logic, and diagnostic/debug surfaces remain untouched. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill strong {
    font-size: clamp(1.08rem, 4.7vw, 1.24rem) !important;
    line-height: 1.1 !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill span {
    font-size: 0.8rem !important;
    line-height: 1.28 !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-top-awareness-microline,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-participation-ack {
    font-size: 0.82rem !important;
    line-height: 1.28 !important;
  }

  body[data-layout-mode="portrait"] .gridly-alert-intel-card > div:last-child strong,
  body[data-layout-mode="portrait"] .gridly-alert-row strong,
  body[data-layout-mode="portrait"] .alert-item strong,
  body[data-layout-mode="portrait"] .gridly-alert-title,
  body[data-layout-mode="portrait"] .gridly-alert-headline {
    font-size: 0.94rem !important;
    line-height: 1.32 !important;
  }

  body[data-layout-mode="portrait"] .gridly-alert-intel-card > div:last-child div,
  body[data-layout-mode="portrait"] .gridly-alert-row small,
  body[data-layout-mode="portrait"] .alert-item p,
  body[data-layout-mode="portrait"] .alert-row-subline,
  body[data-layout-mode="portrait"] .gridly-alert-subtitle {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  body[data-layout-mode="portrait"] .alert-row-time {
    font-size: 0.76rem !important;
    line-height: 1.3 !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-popup-content .gridly-popup strong,
  body[data-layout-mode="portrait"] #map .gridly-popup strong {
    font-size: 1.08rem !important;
    line-height: 1.22 !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-popup-content .gridly-popup span,
  body[data-layout-mode="portrait"] #map .gridly-popup span {
    font-size: 0.9rem !important;
    line-height: 1.34 !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-popup-content .popup-report-btn,
  body[data-layout-mode="portrait"] #map .popup-report-btn {
    font-size: 0.86rem !important;
    line-height: 1.22 !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) strong {
    font-size: 0.98rem !important;
    line-height: 1.12 !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) #mobileDestinationCommandMeta,
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-crossings,
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-awareness-panel-issues,
  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .destination-route-impact-line {
    font-size: 0.76rem !important;
    line-height: 1.2 !important;
  }

  body[data-layout-mode="portrait"] .gridly-destination-impact-card h2,
  body[data-layout-mode="portrait"] .gridly-destination-impact-significance strong {
    font-size: clamp(1.08rem, 4.7vw, 1.24rem) !important;
    line-height: 1.16 !important;
  }

  body[data-layout-mode="portrait"] .gridly-destination-impact-subtitle,
  body[data-layout-mode="portrait"] .gridly-destination-impact-why,
  body[data-layout-mode="portrait"] .gridly-destination-impact-reasons,
  body[data-layout-mode="portrait"] .gridly-destination-impact-reasons li,
  body[data-layout-mode="portrait"] .gridly-destination-impact-quiet-note,
  body[data-layout-mode="portrait"] .gridly-destination-impact-significance em {
    font-size: 0.9rem !important;
    line-height: 1.42 !important;
  }

  body[data-layout-mode="portrait"] .route-status-card .status-label,
  body[data-layout-mode="portrait"] .route-watch-strip-copy .eyebrow,
  body[data-layout-mode="portrait"] .route-watch-metrics span,
  body[data-layout-mode="portrait"] .route-watch-live-pill,
  body[data-layout-mode="portrait"] .route-watch-secondary-note {
    font-size: 0.84rem !important;
    line-height: 1.28 !important;
  }

  body[data-layout-mode="portrait"] .route-status-card strong,
  body[data-layout-mode="portrait"] .route-watch-strip-copy strong,
  body[data-layout-mode="portrait"] #desktopRouteStatus,
  body[data-layout-mode="portrait"] .route-summary strong,
  body[data-layout-mode="portrait"] .mobile-live-command strong {
    font-size: 1.06rem !important;
    line-height: 1.22 !important;
  }

  body[data-layout-mode="portrait"] .route-watch-strip-copy p,
  body[data-layout-mode="portrait"] .route-summary-inline p,
  body[data-layout-mode="portrait"] .route-summary div,
  body[data-layout-mode="portrait"] .mobile-live-command p,
  body[data-layout-mode="portrait"] .route-watch-metrics b,
  body[data-layout-mode="portrait"] .route-watch-metrics em {
    font-size: 0.92rem !important;
    line-height: 1.36 !important;
  }

  body[data-layout-mode="portrait"] .settings-list-title,
  body[data-layout-mode="portrait"] .settings-section-head h2,
  body[data-layout-mode="portrait"] .settings-place-card strong {
    font-size: 1.02rem !important;
    line-height: 1.24 !important;
  }

  body[data-layout-mode="portrait"] .settings-toggle-row,
  body[data-layout-mode="portrait"] .settings-toggle-row span,
  body[data-layout-mode="portrait"] .settings-select-grid label,
  body[data-layout-mode="portrait"] .settings-select-grid select,
  body[data-layout-mode="portrait"] .settings-placeholder-note,
  body[data-layout-mode="portrait"] .settings-place-card small,
  body[data-layout-mode="portrait"] .settings-list-detail > p,
  body[data-layout-mode="portrait"] .settings-feedback-prompt,
  body[data-layout-mode="portrait"] .settings-feedback-chip {
    font-size: 0.92rem !important;
    line-height: 1.38 !important;
  }

  body[data-layout-mode="portrait"] .settings-list-meta,
  body[data-layout-mode="portrait"] .settings-place-label,
  body[data-layout-mode="portrait"] .settings-feedback-helper,
  body[data-layout-mode="portrait"] .settings-feedback-category legend,
  body[data-layout-mode="portrait"] .settings-feedback-message-label {
    font-size: 0.84rem !important;
    line-height: 1.3 !important;
  }

  body[data-layout-mode="portrait"] .community-pulse-kicker,
  body[data-layout-mode="portrait"] .mobile-home-card span,
  body[data-layout-mode="portrait"] .growth-card span,
  body[data-layout-mode="portrait"] .insight-card span {
    font-size: 0.82rem !important;
    line-height: 1.28 !important;
  }

  body[data-layout-mode="portrait"] .community-pulse-copy strong,
  body[data-layout-mode="portrait"] .mobile-home-card strong,
  body[data-layout-mode="portrait"] .growth-card strong,
  body[data-layout-mode="portrait"] .insight-card strong {
    font-size: 1.08rem !important;
    line-height: 1.24 !important;
  }

  body[data-layout-mode="portrait"] .community-pulse-copy p,
  body[data-layout-mode="portrait"] .mobile-home-card p,
  body[data-layout-mode="portrait"] .growth-card p,
  body[data-layout-mode="portrait"] .insight-card p {
    font-size: 0.94rem !important;
    line-height: 1.38 !important;
  }
}

@media (min-width: 761px) {
  .habit-status-strip strong {
    font-size: 1.08rem;
    line-height: 1.24;
  }

  .habit-status-strip p,
  .subtext {
    font-size: 0.98rem;
    line-height: 1.45;
  }

  .trust-row span {
    font-size: 0.82rem;
    line-height: 1.3;
  }
}

/* GRIDLY V272.2A — Settings selector dark dropdown styling. */
.settings-select-grid select,
.gridly-settings-sheet .settings-select-grid select,
#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-select-grid select,
body.gridly-theme-light .settings-select-grid select,
body.gridly-theme-light .gridly-settings-sheet .settings-select-grid select {
  min-height: 44px;
  padding: 10px 40px 10px 13px;
  border: 1px solid rgba(125, 211, 252, 0.42) !important;
  border-radius: 13px !important;
  color: #f4fbff !important;
  background-color: rgba(3, 12, 24, 0.94) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(142, 239, 255, 0.95) 50%),
    linear-gradient(135deg, rgba(142, 239, 255, 0.95) 50%, transparent 50%),
    linear-gradient(180deg, rgba(32, 85, 123, 0.52), rgba(5, 17, 31, 0.96));
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 10px 24px rgba(0, 0, 0, 0.18);
  color-scheme: dark;
  appearance: none;
  -webkit-appearance: none;
  font-weight: 780;
  line-height: 1.35;
}

.settings-select-grid select:hover,
.gridly-settings-sheet .settings-select-grid select:hover,
#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-select-grid select:hover,
body.gridly-theme-light .settings-select-grid select:hover {
  border-color: rgba(142, 239, 255, 0.62) !important;
  background-color: rgba(5, 18, 34, 0.97) !important;
}

.settings-select-grid select:focus,
.settings-select-grid select:focus-visible,
.gridly-settings-sheet .settings-select-grid select:focus,
.gridly-settings-sheet .settings-select-grid select:focus-visible,
#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-select-grid select:focus,
#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-select-grid select:focus-visible,
body.gridly-theme-light .settings-select-grid select:focus,
body.gridly-theme-light .settings-select-grid select:focus-visible {
  border-color: rgba(67, 230, 160, 0.74) !important;
  box-shadow:
    0 0 0 3px rgba(67, 230, 160, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 28px rgba(0, 0, 0, 0.24);
  outline: none;
}

.settings-select-grid select option,
.gridly-settings-sheet .settings-select-grid select option,
#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-select-grid select option,
body.gridly-theme-light .settings-select-grid select option,
body.gridly-theme-light .gridly-settings-sheet .settings-select-grid select option {
  color: #f4fbff;
  background-color: #061524;
  font-weight: 720;
}

.settings-select-grid select option:checked,
.settings-select-grid select option:hover,
.gridly-settings-sheet .settings-select-grid select option:checked,
.gridly-settings-sheet .settings-select-grid select option:hover,
#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-select-grid select option:checked,
#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-select-grid select option:hover,
body.gridly-theme-light .settings-select-grid select option:checked,
body.gridly-theme-light .settings-select-grid select option:hover {
  color: #ffffff;
  background-color: #0f344d;
}

@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .settings-select-grid select,
  body[data-layout-mode="portrait"] .gridly-settings-sheet .settings-select-grid select,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-select-grid select {
    min-height: 46px;
    font-size: 0.92rem !important;
    line-height: 1.38 !important;
  }
}

/* GRIDLY V272.2B — Portrait Settings Text Size segmented control. */
#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-text-size-label {
  gap: 9px !important;
}

#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-text-size-control {
  width: 100%;
}

#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-text-size-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(10, 24, 42, 0.98), rgba(3, 12, 24, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 24px rgba(0, 0, 0, 0.18);
}

#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-text-size-segment {
  min-height: 38px;
  padding: 8px 7px;
  border: 1px solid rgba(148, 196, 220, 0.18);
  border-radius: 11px;
  color: #d9ecf8;
  background: rgba(255, 255, 255, 0.035);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 780;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-text-size-segment.is-selected {
  color: #03201e;
  border-color: rgba(105, 255, 218, 0.86);
  background:
    linear-gradient(180deg, rgba(117, 255, 223, 0.96), rgba(42, 210, 188, 0.94));
  box-shadow:
    0 0 0 1px rgba(174, 255, 237, 0.26),
    0 10px 22px rgba(22, 202, 181, 0.18);
}

#gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-text-size-segment:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(67, 230, 160, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* GRIDLY V272.3 — Mobile viewport / map gesture stability fix.
   Portrait-only containment keeps browser pinch/overscroll from resizing the app shell
   while leaving Leaflet's own touch handlers in control of map pan and pinch zoom. */
html {
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    position: fixed;
    inset: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: #050b16;
  }

  @supports (height: 100svh) {
    body[data-layout-mode="portrait"] {
      height: 100svh;
      min-height: 100svh;
      max-height: 100svh;
    }
  }

  body[data-layout-mode="portrait"] .app-shell {
    width: 100% !important;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    overscroll-behavior: none;
  }

  @supports (height: 100svh) {
    body[data-layout-mode="portrait"] .app-shell {
      height: 100svh;
      min-height: 100svh;
      max-height: 100svh;
    }
  }

  body[data-layout-mode="portrait"] .dashboard,
  body[data-layout-mode="portrait"] .command-center,
  body[data-layout-mode="portrait"] .map-card,
  body[data-layout-mode="portrait"] .map-frame {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  @supports (height: 100svh) {
    body[data-layout-mode="portrait"] .dashboard,
    body[data-layout-mode="portrait"] .command-center,
    body[data-layout-mode="portrait"] .map-card,
    body[data-layout-mode="portrait"] .map-frame {
      height: 100svh !important;
      min-height: 100svh !important;
      max-height: 100svh !important;
    }
  }

  body[data-layout-mode="portrait"] #map,
  body[data-layout-mode="portrait"] #map.leaflet-container {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    touch-action: none;
    -ms-touch-action: none;
  }

  @supports (height: 100svh) {
    body[data-layout-mode="portrait"] #map,
    body[data-layout-mode="portrait"] #map.leaflet-container {
      height: 100svh !important;
      min-height: 100svh !important;
      max-height: 100svh !important;
    }
  }

  body[data-layout-mode="portrait"] #map .leaflet-pane,
  body[data-layout-mode="portrait"] #map .leaflet-map-pane,
  body[data-layout-mode="portrait"] #map .leaflet-tile-pane,
  body[data-layout-mode="portrait"] #map .leaflet-overlay-pane,
  body[data-layout-mode="portrait"] #map .leaflet-marker-pane,
  body[data-layout-mode="portrait"] #map .leaflet-tile,
  body[data-layout-mode="portrait"] #map canvas,
  body[data-layout-mode="portrait"] #map svg {
    touch-action: none;
    -ms-touch-action: none;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 {
    transform: none !important;
    zoom: 1;
    contain: none;
    touch-action: none;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    z-index: 9503;
    contain: layout paint;
    touch-action: manipulation;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
    min-width: 0;
    min-height: 46px;
    overflow: visible;
    touch-action: manipulation;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    max-height: min(104px, calc(100svh - 196px - env(safe-area-inset-bottom, 0px)));
    overflow: hidden;
    contain: layout paint;
    transform: translateZ(0);
  }
}

/* GRIDLY V272.3A — Portrait Mobile safe-area restoration.
   V272.3 intentionally pins the portrait shell to the visual viewport for map gesture
   stability; keep that containment, but restore a safe top chrome offset for the
   fixed Portrait V2 header stack on every phone browser. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 {
    --gridly-v2-safe-area-top: env(safe-area-inset-top, 0px);
    --gridly-v2-top-fallback-gap: 12px;
    --gridly-v2-header-top: max(var(--gridly-v2-top-fallback-gap), calc(var(--gridly-v2-safe-area-top) + 8px));
    --gridly-v2-command-left: calc(10px + env(safe-area-inset-left, 0px));
    --gridly-v2-command-right: calc(10px + env(safe-area-inset-right, 0px));
    --gridly-v2-awareness-card-top: calc(var(--gridly-v2-header-top) + 46px);
    --gridly-v2-filter-strip-top: calc(var(--gridly-v2-header-top) + 148px);
    --gridly-v2-filter-strip-bottom: calc(var(--gridly-v2-header-top) + 194px);
    --gridly-v2-top-shield-height: calc(var(--gridly-v2-filter-strip-bottom) + 10px);
  }

  body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 {
    --gridly-v2-top-shield-height: calc(var(--gridly-v2-filter-strip-bottom) + 10px);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar,
  body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-topbar {
    top: var(--gridly-v2-header-top) !important;
    left: var(--gridly-v2-command-left) !important;
    right: var(--gridly-v2-command-right) !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card,
  body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-status-pill {
    top: var(--gridly-v2-awareness-card-top) !important;
    left: var(--gridly-v2-command-left) !important;
    right: var(--gridly-v2-command-right) !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments,
  body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-segments {
    top: var(--gridly-v2-filter-strip-top) !important;
    left: var(--gridly-v2-command-left) !important;
    right: var(--gridly-v2-command-right) !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail {
    top: calc(var(--gridly-v2-filter-strip-bottom) + 16px) !important;
    right: var(--gridly-v2-command-right) !important;
  }
}

/* GRIDLY V272 — About Gridly supportive product guidance. */
.settings-about-gridly-section {
  border: 1px solid rgba(171, 204, 238, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.settings-about-gridly-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--text);
  font-weight: 850;
  letter-spacing: 0.01em;
  list-style: none;
  cursor: pointer;
}

.settings-about-gridly-summary::-webkit-details-marker {
  display: none;
}

.settings-about-gridly-summary::after {
  content: "";
  width: 20px;
  height: 20px;
  border: 1px solid rgba(183, 220, 255, 0.18);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.055);
  background-image:
    linear-gradient(rgba(230, 245, 255, 0.9), rgba(230, 245, 255, 0.9)),
    linear-gradient(rgba(230, 245, 255, 0.9), rgba(230, 245, 255, 0.9));
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 8px 2px, 2px 8px;
  transition: background-size 0.18s ease;
}

.settings-about-gridly-section[open] .settings-about-gridly-summary::after {
  background-size: 8px 2px, 2px 0;
}

.settings-about-gridly-content {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.settings-about-gridly-block {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid rgba(171, 204, 238, 0.12);
  border-radius: 14px;
  background: rgba(10, 22, 34, 0.46);
}

.settings-about-gridly-accordion-item {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.settings-about-gridly-item-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 12px;
  color: rgba(125, 211, 252, 0.9);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.2;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}

.settings-about-gridly-item-summary::-webkit-details-marker {
  display: none;
}

.settings-about-gridly-item-summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(183, 220, 255, 0.18);
  border-radius: 999px;
  color: rgba(230, 245, 255, 0.92);
  background: rgba(255, 255, 255, 0.055);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.settings-about-gridly-accordion-item[open] .settings-about-gridly-item-summary::after {
  content: "-";
}

.settings-about-gridly-item-panel {
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
}

.settings-about-gridly-block h3,
.settings-about-gridly-block p {
  margin: 0;
}

.settings-about-gridly-block h3 {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.22;
  letter-spacing: 0.01em;
}

.settings-about-gridly-block p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.48;
}

.settings-about-gridly-block .settings-about-gridly-kicker {
  color: rgba(125, 211, 252, 0.88);
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.settings-about-gridly-block .settings-about-gridly-tagline {
  color: var(--text);
  font-weight: 820;
}

@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .settings-about-gridly-summary {
    min-height: 48px;
    padding: 11px 12px;
    font-size: 0.94rem;
  }

  body[data-layout-mode="portrait"] .settings-about-gridly-content {
    gap: 9px;
  }

  body[data-layout-mode="portrait"] .settings-about-gridly-block {
    padding: 11px;
  }

  body[data-layout-mode="portrait"] .settings-about-gridly-accordion-item {
    padding: 0;
  }

  body[data-layout-mode="portrait"] .settings-about-gridly-item-summary {
    min-height: 46px;
    padding: 11px;
  }

  body[data-layout-mode="portrait"] .settings-about-gridly-item-panel {
    padding: 0 11px 11px;
  }

  body[data-layout-mode="portrait"] .settings-about-gridly-block p {
    font-size: 0.92rem;
    line-height: 1.5;
  }
}


/* GRIDLY V275.2 — Conservative PWA install entry point inside Settings/About. */
.settings-pwa-install-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 14px;
  background: rgba(10, 22, 34, 0.48);
}

.settings-pwa-install-card[hidden] {
  display: none !important;
}

.settings-pwa-install-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-pwa-install-copy strong {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.2;
}

.settings-pwa-install-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.settings-pwa-install-status:empty {
  display: none;
}

.settings-pwa-install-button[hidden] {
  display: none !important;
}

@media (max-width: 520px) {
  .settings-pwa-install-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-pwa-install-button {
    justify-self: start;
  }
}

/* V282 — Gridly Brand Foundation palette alignment (portrait visual-only). */
body[data-layout-mode="portrait"] {
  background: var(--gridly-bg-deep);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 {
  --gridly-v2-control-border: var(--gridly-border);
  --gridly-v2-control-bg: linear-gradient(165deg, rgba(8, 24, 39, 0.94), rgba(2, 8, 18, 0.96));
  --gridly-v2-control-shadow: inset 0 1px 0 rgba(247, 251, 255, 0.1), 0 12px 28px rgba(0, 0, 0, 0.34), var(--gridly-cyan-glow);
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2::before {
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 245, 240, 0.1), transparent 34%),
    linear-gradient(180deg, #020812 0%, #05101d 72%, rgba(2, 8, 18, 0.96) 100%);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-topbar,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar {
  color: var(--gridly-text);
  border-color: var(--gridly-border);
  background: linear-gradient(165deg, rgba(8, 24, 39, 0.95) 0%, rgba(2, 8, 18, 0.98) 100%);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(247, 251, 255, 0.08), 0 0 22px rgba(0, 245, 240, 0.08);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-watch span,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-top-awareness-microline {
  color: var(--gridly-text-muted);
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-status-pill,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card {
  color: var(--gridly-text);
  border-color: rgba(0, 245, 240, 0.34);
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 245, 240, 0.18), transparent 42%),
    linear-gradient(160deg, rgba(8, 24, 39, 0.94) 0%, rgba(3, 12, 24, 0.96) 62%, rgba(2, 8, 18, 0.98) 100%);
  box-shadow: var(--gridly-depth-shadow), inset 0 1px 0 rgba(247, 251, 255, 0.1), 0 0 28px rgba(0, 245, 240, 0.12);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill strong {
  color: var(--gridly-text);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill span {
  color: var(--gridly-text-muted);
}

body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 .gridly-v2-segments,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
  border-color: rgba(0, 245, 240, 0.22);
  background: linear-gradient(160deg, rgba(6, 17, 31, 0.86), rgba(2, 8, 18, 0.9));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(247, 251, 255, 0.06);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
  color: rgba(247, 251, 255, 0.74);
  background: rgba(247, 251, 255, 0.03);
  border: 1px solid transparent;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button.is-active {
  color: #021014;
  border-color: rgba(0, 245, 240, 0.72);
  background: linear-gradient(135deg, #00f5f0, #4dffd6);
  box-shadow: 0 8px 20px rgba(0, 245, 240, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-icon-btn,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon {
  color: var(--gridly-text);
  border-color: rgba(0, 245, 240, 0.26);
  background: var(--gridly-v2-control-bg);
  box-shadow: var(--gridly-v2-control-shadow);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button svg,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-icon-btn svg,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon svg {
  stroke: var(--gridly-cyan);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel {
  color: var(--gridly-text);
  border-color: rgba(0, 245, 240, 0.24);
  background: linear-gradient(170deg, rgba(6, 17, 31, 0.86), rgba(2, 8, 18, 0.92));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(247, 251, 255, 0.07), 0 0 20px rgba(0, 245, 240, 0.08);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-kicker {
  color: rgba(0, 245, 240, 0.86);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-status,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-meta {
  color: var(--gridly-text-muted);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
  border-color: rgba(0, 245, 240, 0.24) !important;
  background: linear-gradient(165deg, rgba(6, 17, 31, 0.9), rgba(2, 8, 18, 0.94));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(247, 251, 255, 0.08), 0 0 26px rgba(0, 245, 240, 0.08);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
  color: rgba(247, 251, 255, 0.86);
  background: rgba(247, 251, 255, 0.025);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button.is-active,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button:focus-visible {
  color: var(--gridly-text);
  outline: none;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button.is-active .dock-icon,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button:focus-visible .dock-icon {
  border-color: rgba(0, 245, 240, 0.56);
  background: linear-gradient(150deg, rgba(0, 245, 240, 0.24), rgba(6, 17, 31, 0.96));
  box-shadow: 0 0 20px rgba(0, 245, 240, 0.18), inset 0 1px 0 rgba(247, 251, 255, 0.12);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon img {
  display: block;
  width: 21px;
  height: 21px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
  background: transparent;
  pointer-events: none;
}

body[data-layout-mode="portrait"] #map .leaflet-control-zoom,
body[data-layout-mode="portrait"] #map .leaflet-control-attribution {
  background: rgba(6, 17, 31, 0.82) !important;
  border: 1px solid rgba(0, 245, 240, 0.22) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), 0 0 18px rgba(0, 245, 240, 0.08) !important;
}

body[data-layout-mode="portrait"] #map .leaflet-control-zoom a {
  color: var(--gridly-text) !important;
  border-color: rgba(0, 245, 240, 0.22) !important;
}

/* V282.1 — Portrait V2 dock icon family refinement */
.gridly-v2-sr-label {
  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;
}

@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
    position: relative;
    min-height: 46px;
    padding: 2px 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 0;
    line-height: 0;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon {
    width: min(60px, calc((100vw - 58px) / 4));
    height: 52px;
    padding: 0;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon img {
    width: 46px;
    height: 46px;
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    object-position: center;
  }
}

/* V282.2 — Portrait V2 dock button border refinement */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
    box-sizing: border-box;
    border: 1px solid rgba(0, 245, 240, 0.22);
    border-radius: 15px;
    background:
      linear-gradient(150deg, rgba(0, 245, 240, 0.08), rgba(247, 251, 255, 0.025) 42%, rgba(6, 17, 31, 0.54)),
      rgba(247, 251, 255, 0.025);
    box-shadow:
      inset 0 1px 0 rgba(247, 251, 255, 0.08),
      0 8px 18px rgba(0, 0, 0, 0.2);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button.is-active .dock-icon,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button:focus-visible .dock-icon {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button.is-active,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button:focus-visible {
    border-color: rgba(0, 245, 240, 0.52);
    background:
      linear-gradient(150deg, rgba(0, 245, 240, 0.18), rgba(247, 251, 255, 0.045) 46%, rgba(6, 17, 31, 0.72)),
      rgba(0, 245, 240, 0.06);
    box-shadow:
      0 0 20px rgba(0, 245, 240, 0.16),
      inset 0 1px 0 rgba(247, 251, 255, 0.12);
  }
}

/* V282.3 — Portrait V2 sheet height regression audit after dock icon/border refinements. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 {
    --gridly-v2-sheet-dock-clearance: calc(86px + env(safe-area-inset-bottom, 0px));
    --gridly-v2-sheet-viewport-gap: calc(14px + env(safe-area-inset-top, 0px));
    --gridly-v2-sheet-min-height: min(42dvh, 340px);
    --gridly-v2-sheet-usable-max-height: min(76dvh, calc(100dvh - var(--gridly-v2-sheet-dock-clearance) - var(--gridly-v2-sheet-viewport-gap)));
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-sheet {
    bottom: var(--gridly-v2-sheet-dock-clearance);
    max-height: var(--gridly-v2-sheet-usable-max-height);
    min-height: var(--gridly-v2-sheet-min-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-sheet header {
    flex: 0 0 auto;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }
}

/* V282.4 — Portrait bottom-edge map bleed guard.
   DOM/layout audit: the Portrait V2 shell is fixed over a full-viewport Leaflet map;
   the dock intentionally floats above the visual viewport bottom, so unshielded map
   tiles can show through the dock's transparent safe-area gap and rounded lower edge. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #map .leaflet-bottom.leaflet-right {
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--gridly-portrait-dock-h, 78px) + 24px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-bottom.leaflet-right .leaflet-control {
    pointer-events: auto !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-bottom.leaflet-right .leaflet-control-layers,
  body[data-layout-mode="portrait"] #map .leaflet-bottom.leaflet-right .leaflet-control-layers-expanded,
  body[data-layout-mode="portrait"] #map .leaflet-bottom.leaflet-right .leaflet-control-attribution {
    margin: 0 !important;
    background: linear-gradient(165deg, rgba(6, 17, 31, 0.92), rgba(2, 8, 18, 0.96)) !important;
    border-color: rgba(0, 245, 240, 0.22) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), 0 0 18px rgba(0, 245, 240, 0.08) !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill {
    z-index: 9502;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-region {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    background: #020812;
    border: 1px solid rgba(0, 245, 240, 0.16);
    border-top-width: 1px;
    border-bottom: 0;
    box-shadow: 0 -18px 36px rgba(0, 0, 0, 0.42);
    pointer-events: none;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1;
    width: auto;
    max-height: 104px;
    background: #06111f;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 9503;
    isolation: isolate;
    background: #06111f;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }


  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
    position: relative;
    z-index: 1;
  }
}

/* Portrait polish: keep crossing popups inside the visible phone viewport without changing copy/actions. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #map .leaflet-popup.gridly-crossing-popup {
    max-width: min(308px, calc(100svw - 28px));
  }

  body[data-layout-mode="portrait"] #map .leaflet-popup.gridly-crossing-popup .leaflet-popup-content-wrapper {
    max-width: min(308px, calc(100svw - 28px));
    max-height: min(46svh, 360px);
  }

  body[data-layout-mode="portrait"] #map .leaflet-popup.gridly-crossing-popup .leaflet-popup-content {
    width: min(284px, calc(100svw - 52px));
    max-height: min(42svh, 324px);
  }
}

/* V310 route visual hierarchy: awareness markers stay dominant over route context. */
#map .leaflet-pane.leaflet-routePane-pane {
  z-index: 620 !important;
}

#map .leaflet-pane.leaflet-routePane-pane path.gridly-destination-route-hero-halo,
#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-halo {
  stroke-opacity: 0.14 !important;
  filter: drop-shadow(0 5px 9px rgba(1, 8, 18, 0.24));
}

#map .leaflet-pane.leaflet-routePane-pane path.gridly-destination-route-hero-shoulder,
#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-shoulder {
  stroke-opacity: 0.48 !important;
  filter: drop-shadow(0 4px 8px rgba(2, 14, 26, 0.22));
}

#map .leaflet-pane.leaflet-routePane-pane path.gridly-destination-route-hero-core,
#map .leaflet-pane.leaflet-routePane-pane path.gridly-route-signature-core {
  stroke-opacity: 0.88 !important;
  filter: drop-shadow(0 3px 7px rgba(0, 54, 88, 0.26));
}

#map .leaflet-marker-icon.gridly-route-endpoint-icon {
  background: transparent;
  border: 0;
  pointer-events: none;
}

#map .gridly-route-endpoint {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 2px solid rgba(57, 214, 210, 0.82);
  background: rgba(32, 214, 205, 0.78);
  box-sizing: border-box;
  filter: drop-shadow(0 3px 7px rgba(0, 9, 18, 0.22));
}

#map .gridly-route-endpoint-destination {
  border-color: rgba(178, 244, 255, 0.88);
  background: rgba(11, 56, 84, 0.42);
  box-shadow: inset 0 0 0 3px rgba(186, 247, 255, 0.12);
  filter: drop-shadow(0 4px 8px rgba(0, 13, 24, 0.24));
}

#map .leaflet-marker-icon.gridly-destination-signature-icon,
#map .gridly-route-endpoint-destination {
  z-index: 625 !important;
}

.gridly-destination-signature-marker {
  width: 32px;
  height: 32px;
  transform: none;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 5px 9px rgba(0, 9, 18, 0.24));
}

.gridly-destination-signature-marker::before {
  inset: 6px;
  background: rgba(6, 34, 52, 0.34);
  border: 2px solid rgba(152, 235, 249, 0.86);
  box-shadow: inset 0 0 0 1px rgba(235, 252, 255, 0.22), 0 0 0 2px rgba(5, 23, 38, 0.18);
}

.gridly-destination-signature-marker::after {
  inset: 13px;
  background: #baf7ff;
  border: 0;
  box-shadow: 0 0 0 1px rgba(4, 42, 66, 0.58);
}

.gridly-destination-signature-marker span.gridly-destination-ring {
  inset: 3px;
  border: 1px solid rgba(184, 244, 255, 0.46);
  background: transparent;
}

.gridly-destination-signature-marker span.gridly-destination-core {
  left: 13px;
  top: 13px;
  width: 6px;
  height: 6px;
  background: #d8fbff;
  box-shadow: 0 0 0 1px rgba(4, 42, 66, 0.58);
}

.gridly-destination-signature-marker span.gridly-destination-stem {
  display: none;
}

#map .gridly-destination-signature-marker[data-gridly-selected="true"] {
  transform: none;
}


/* V856.3 stable first-paint guard: initial hide is in index.html so it applies before CSS download completes. */
:root {
  --gridly-startup-brief-in: 80ms;
  --gridly-startup-map-in: 540ms;
  --gridly-startup-secondary-in: 820ms;
  --gridly-startup-support-in: 980ms;
}

body.gridly-startup-guard {
  background: #020812;
}

body.gridly-startup-guard .app-header,
body.gridly-startup-guard .mobile-live-brand,
body.gridly-startup-guard .desktop-left-rail,
body.gridly-startup-guard .driver-hero,
body.gridly-startup-guard .command-summary-grid,
body.gridly-startup-guard .destination-hero-card,
body.gridly-startup-guard .mobile-premium-header,
body.gridly-startup-guard .mobile-home-cards,
body.gridly-startup-guard .command-center,
body.gridly-startup-guard .map-tools-overlay,
body.gridly-startup-guard .community-pulse-surface,
body.gridly-startup-guard .geo-filter-status,
body.gridly-startup-guard .side-panel,
body.gridly-startup-guard .mobile-bottom-nav {
  opacity: 0;
  visibility: hidden;
}

body.gridly-startup-guard::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1400;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(67, 230, 160, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(3, 6, 10, 0.98), rgba(4, 7, 11, 0.94));
}

body.gridly-first-paint-ready::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1400;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(67, 230, 160, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(3, 6, 10, 0.98), rgba(4, 7, 11, 0.92));
  animation: gridlyStableFirstPaint 620ms cubic-bezier(0.2, 0.72, 0.16, 1) forwards;
}

body.gridly-first-paint-ready .app-header,
body.gridly-first-paint-ready .mobile-live-brand,
body.gridly-first-paint-ready .desktop-left-rail,
body.gridly-first-paint-ready .driver-hero,
body.gridly-first-paint-ready .command-summary-grid,
body.gridly-first-paint-ready .destination-hero-card,
body.gridly-first-paint-ready .mobile-premium-header,
body.gridly-first-paint-ready .mobile-home-cards,
body.gridly-first-paint-ready .command-center,
body.gridly-first-paint-ready .map-tools-overlay,
body.gridly-first-paint-ready .community-pulse-surface,
body.gridly-first-paint-ready .geo-filter-status,
body.gridly-first-paint-ready .side-panel,
body.gridly-first-paint-ready .mobile-bottom-nav {
  animation-fill-mode: both;
  will-change: opacity, transform, filter;
}

body.gridly-first-paint-ready .app-header,
body.gridly-first-paint-ready .mobile-live-brand,
body.gridly-first-paint-ready .desktop-left-rail {
  animation: gridlyStartupChromeReveal 420ms cubic-bezier(0.2, 0.72, 0.16, 1) 40ms both;
}

body.gridly-first-paint-ready .driver-hero {
  isolation: isolate;
  animation: gridlyAwarenessBriefReveal 520ms cubic-bezier(0.17, 0.84, 0.2, 1) var(--gridly-startup-brief-in) both;
}

body.gridly-first-paint-ready .driver-hero .habit-status-strip {
  animation: gridlyBriefPulseSettle 900ms ease-out 420ms both;
}

body.gridly-first-paint-ready .command-center {
  animation: gridlyMapSurfaceReveal 620ms cubic-bezier(0.18, 0.8, 0.22, 1) var(--gridly-startup-map-in) both;
}

.map-card {
  isolation: isolate;
}

.map-frame {
  position: relative;
  overflow: hidden;
}

body.gridly-first-paint-ready .map-frame::after,
body.gridly-startup-guard .map-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 540;
  pointer-events: none;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(3, 9, 14, 0.92), rgba(5, 11, 16, 0.72)),
    radial-gradient(circle at 28% 22%, rgba(67, 230, 160, 0.12), transparent 34%);
}

body.gridly-first-paint-ready .map-frame::after {
  animation: gridlyMapReadinessVeil 900ms cubic-bezier(0.2, 0.72, 0.16, 1) 220ms forwards;
}

body.gridly-first-paint-ready .map-tools-overlay,
body.gridly-first-paint-ready .community-pulse-surface,
body.gridly-first-paint-ready .geo-filter-status {
  animation: gridlySecondarySurfaceReveal 480ms ease-out var(--gridly-startup-secondary-in) both;
}

body.gridly-first-paint-ready .side-panel,
body.gridly-first-paint-ready .mobile-home-card,
body.gridly-first-paint-ready .command-summary-grid,
body.gridly-first-paint-ready .destination-hero-card,
body.gridly-first-paint-ready .mobile-premium-header,
body.gridly-first-paint-ready .mobile-home-cards,
body.gridly-first-paint-ready .mobile-bottom-nav {
  animation: gridlySupportSurfaceReveal 520ms cubic-bezier(0.18, 0.8, 0.22, 1) var(--gridly-startup-support-in) both;
}

body.gridly-first-paint-ready .mobile-home-card:nth-child(1) { animation-delay: 760ms; }
body.gridly-first-paint-ready .mobile-home-card:nth-child(2) { animation-delay: 860ms; }
body.gridly-first-paint-ready .mobile-home-card:nth-child(3) { animation-delay: 960ms; }
body.gridly-first-paint-ready .mobile-home-card:nth-child(n + 4) { animation-delay: 1060ms; }

@keyframes gridlyStableFirstPaint {
  0%, 35% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes gridlyStartupChromeReveal {
  from { opacity: 0; transform: translateY(-10px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes gridlyAwarenessBriefReveal {
  from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes gridlyBriefPulseSettle {
  0% { box-shadow: 0 0 0 0 rgba(67, 230, 160, 0.0); }
  38% { box-shadow: 0 0 0 1px rgba(67, 230, 160, 0.24), 0 0 32px rgba(67, 230, 160, 0.14); }
  100% { box-shadow: none; }
}

@keyframes gridlyMapSurfaceReveal {
  from { opacity: 0; transform: translateY(26px) scale(0.99); filter: blur(12px) saturate(0.7); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) saturate(1); }
}

@keyframes gridlyMapReadinessVeil {
  0%, 42% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes gridlySecondarySurfaceReveal {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes gridlySupportSurfaceReveal {
  from { opacity: 0; transform: translateY(16px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  html.gridly-prepaint-lock body::before,
  body.gridly-startup-guard::before {
    background: #020812;
  }

  body.gridly-first-paint-ready::before,
  body.gridly-first-paint-ready .app-header,
  body.gridly-first-paint-ready .mobile-live-brand,
  body.gridly-first-paint-ready .desktop-left-rail,
  body.gridly-first-paint-ready .driver-hero,
  body.gridly-first-paint-ready .driver-hero .habit-status-strip,
  body.gridly-first-paint-ready .command-summary-grid,
  body.gridly-first-paint-ready .destination-hero-card,
  body.gridly-first-paint-ready .mobile-premium-header,
  body.gridly-first-paint-ready .mobile-home-cards,
  body.gridly-first-paint-ready .mobile-home-card,
  body.gridly-first-paint-ready .command-center,
  body.gridly-first-paint-ready .map-tools-overlay,
  body.gridly-first-paint-ready .community-pulse-surface,
  body.gridly-first-paint-ready .geo-filter-status,
  body.gridly-first-paint-ready .side-panel,
  body.gridly-first-paint-ready .mobile-bottom-nav,
  body.gridly-first-paint-ready .map-frame::after {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  body.gridly-first-paint-ready::before,
  body.gridly-first-paint-ready .map-frame::after {
    content: none;
  }
}

/* V856.4B — Awareness Brief experience refinement (presentation-only). */
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card {
  align-content: start;
  gap: 7px;
  min-height: 96px;
  max-height: 118px;
  padding: 13px 15px 12px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(10, 23, 39, 0.96), rgba(4, 11, 21, 0.92)),
    radial-gradient(circle at 14% 0%, rgba(125, 211, 252, 0.16), transparent 38%);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card::before {
  content: "Community Awareness";
  margin-bottom: 0;
  color: rgba(147, 216, 255, 0.84);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card strong {
  max-width: 96%;
  font-size: clamp(18px, 5.15vw, 22px);
  line-height: 1.08;
  letter-spacing: -0.032em;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card > span {
  margin-top: 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(220, 235, 249, 0.88);
  font-size: 0.74rem;
  line-height: 1.25;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-trust-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 2px;
  border-top: 1px solid rgba(169, 216, 255, 0.14);
  color: rgba(164, 211, 244, 0.84);
  font-size: 0.66rem;
  font-weight: 720;
  letter-spacing: 0.012em;
  line-height: 1.2;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="quiet"] {
  border-color: rgba(125, 211, 252, 0.34);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="high"] {
  background:
    linear-gradient(180deg, rgba(32, 18, 10, 0.95), rgba(10, 13, 20, 0.92)),
    radial-gradient(circle at 12% 0%, rgba(251, 146, 60, 0.22), transparent 40%);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 {
  --gridly-v2-filter-strip-top: calc(174px + env(safe-area-inset-top, 0px));
  --gridly-v2-filter-strip-bottom: calc(220px + env(safe-area-inset-top, 0px));
}

/* V856.5B — quiet-state confidence and presentation rhythm refinement. */
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="quiet"] {
  padding: 14px 14px 12px;
  border-color: rgba(125, 211, 252, 0.42);
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.18), transparent 36%),
    linear-gradient(165deg, rgba(7, 21, 36, 0.96) 0%, rgba(3, 12, 24, 0.97) 68%, rgba(2, 8, 18, 0.99) 100%);
  box-shadow: var(--gridly-depth-shadow), inset 0 1px 0 rgba(247, 251, 255, 0.12), 0 0 30px rgba(45, 212, 191, 0.12);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="quiet"]::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 7px 7px 1px;
  border-radius: 999px;
  background: #4dffd6;
  box-shadow: 0 0 14px rgba(77, 255, 214, 0.55);
  vertical-align: middle;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="quiet"] strong {
  display: inline;
  vertical-align: middle;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="quiet"] > span {
  display: block;
  margin-top: 7px;
  color: rgba(226, 240, 252, 0.9);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="quiet"] .gridly-v2-awareness-trust-line {
  margin-top: 9px;
  padding-top: 8px;
  border-top-color: rgba(125, 211, 252, 0.18);
  color: rgba(173, 230, 252, 0.92);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel {
  gap: 4px;
  padding: 11px 13px;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-meta {
  max-width: 92%;
}

.community-pulse-surface {
  border-color: rgba(125, 211, 252, 0.26);
  background:
    radial-gradient(circle at 4% 50%, rgba(45, 212, 191, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(9, 23, 40, 0.78), rgba(8, 17, 30, 0.68));
}

.community-pulse-kicker::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px rgba(142, 239, 255, 0.5);
  vertical-align: 1px;
}

.gridly-alerts-active .gridly-alert-row:has(.gridly-alert-title:only-child),
.gridly-alerts-active .gridly-alert-row:has(.gridly-alert-subtitle:empty) {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.055), rgba(255, 255, 255, 0.018));
}


/* V856.6 — Visual simplification: portrait hierarchy and calmer support surfaces. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 {
    --gridly-v2-awareness-card-top: calc(var(--gridly-v2-header-top) + 52px);
    --gridly-v2-filter-strip-top: calc(var(--gridly-v2-header-top) + 162px);
    --gridly-v2-filter-strip-bottom: calc(var(--gridly-v2-header-top) + 208px);
    --gridly-v2-top-shield-height: calc(var(--gridly-v2-filter-strip-bottom) + 12px);
  }

  body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2 {
    --gridly-v2-top-shield-height: calc(var(--gridly-v2-filter-strip-bottom) + 12px);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card {
    gap: 8px;
    min-height: 102px;
    max-height: 124px;
    padding: 16px 16px 14px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card::before,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="quiet"]::before {
    content: none;
    display: none;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card strong,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="quiet"] strong {
    display: block;
    max-width: 94%;
    font-weight: 860;
    line-height: 1.06;
    letter-spacing: -0.036em;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card > span,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="quiet"] > span {
    margin-top: 0;
    max-width: 96%;
    font-weight: 620;
    line-height: 1.3;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-trust-line,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="quiet"] .gridly-v2-awareness-trust-line {
    margin-top: 4px;
    padding-top: 7px;
    color: rgba(164, 211, 244, 0.78);
    font-weight: 680;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
    padding: 4px;
    border-color: rgba(0, 245, 240, 0.16);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(247, 251, 255, 0.05);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
    font-weight: 720;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel {
    gap: 3px;
    padding: 10px 12px;
    border-color: rgba(0, 245, 240, 0.14);
    background: linear-gradient(170deg, rgba(6, 17, 31, 0.74), rgba(2, 8, 18, 0.84));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(247, 251, 255, 0.05);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-kicker {
    color: rgba(164, 211, 244, 0.62);
    font-size: 0.58rem;
    font-weight: 760;
    letter-spacing: 0.13em;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-title {
    font-weight: 780;
    letter-spacing: -0.018em;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-status,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-meta {
    color: rgba(202, 220, 236, 0.7);
    font-weight: 560;
    line-height: 1.25;
  }
}

/* V856.7 — portrait visual hierarchy refinement */
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar {
  top: 11px;
  border-color: rgba(171, 205, 242, 0.16);
  box-shadow: 0 4px 10px rgba(2, 8, 18, 0.19);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill {
  top: 66px;
  padding: 9px 12px 10px;
  border-color: rgba(0, 245, 240, 0.14);
  box-shadow: 0 6px 14px rgba(2, 8, 18, 0.22);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill strong {
  font-size: 0.76rem;
  font-weight: 680;
  line-height: 1.24;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill span {
  opacity: 0.82;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-trust-line {
  display: block;
  margin-top: 4px;
  color: rgba(202, 220, 236, 0.56);
  font-size: 0.58rem;
  font-weight: 560;
  letter-spacing: 0.025em;
  line-height: 1.18;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
  top: 132px;
  gap: 6px;
  padding: 3px;
  border-color: rgba(174, 208, 245, 0.12);
  background: rgba(6, 13, 24, 0.34);
  box-shadow: 0 4px 10px rgba(2, 8, 18, 0.14);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
  min-height: 29px;
  color: rgba(226, 241, 255, 0.64);
  font-size: 0.64rem;
  font-weight: 560;
  background: rgba(247, 251, 255, 0.018);
  border-color: transparent;
  box-shadow: none;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button.is-active {
  color: #021014;
  font-weight: 650;
  border-color: rgba(0, 245, 240, 0.56);
  background: linear-gradient(135deg, rgba(0, 245, 240, 0.92), rgba(77, 255, 214, 0.88));
  box-shadow: 0 5px 12px rgba(0, 245, 240, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail {
  top: 184px;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel {
  gap: 2px;
  padding: 9px 12px;
  border-color: rgba(174, 208, 245, 0.1);
  background: linear-gradient(170deg, rgba(6, 17, 31, 0.66), rgba(2, 8, 18, 0.76));
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(247, 251, 255, 0.04);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-kicker {
  color: rgba(202, 220, 236, 0.52);
  font-size: 0.55rem;
  font-weight: 680;
  letter-spacing: 0.12em;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-title {
  font-size: 0.84rem;
  font-weight: 700;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-status,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-meta {
  color: rgba(202, 220, 236, 0.62);
  font-size: 0.68rem;
}

/* GRIDLY V856.8 — Premium portrait polish: presentation-only refinement */
@media (max-width: 760px) {
  .app-shell.premium-layout {
    width: min(100%, calc(100% - 18px));
    margin-top: 10px;
  }

  .main-column > * + *,
  .command-center {
    margin-top: 10px;
  }

  .mobile-live-brand {
    padding: 10px 12px 8px;
  }

  .mobile-premium-header {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(6, 10, 15, 0.54);
    box-shadow: none;
  }

  .mobile-home-cards {
    gap: 12px;
  }

  .mobile-home-card.mobile-priority-card:first-child {
    padding: 18px 17px 17px;
    border-color: rgba(135, 218, 255, 0.16);
    background:
      radial-gradient(circle at 86% 10%, rgba(72, 210, 255, 0.11), transparent 34%),
      linear-gradient(165deg, rgba(11, 18, 27, 0.88), rgba(7, 11, 17, 0.86));
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  }

  .mobile-home-card.mobile-priority-card:first-child > span {
    color: rgba(185, 218, 246, 0.74);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    font-weight: 760;
  }

  .mobile-home-card.mobile-priority-card:first-child strong {
    margin-top: 7px;
    font-size: clamp(1.32rem, 7.2vw, 1.82rem);
    line-height: 0.96;
    letter-spacing: -0.045em;
  }

  .mobile-home-card.mobile-priority-card:first-child p {
    margin-top: 9px;
    max-width: 29ch;
    color: rgba(219, 234, 247, 0.74);
    font-size: 0.91rem;
    line-height: 1.43;
  }

  .mobile-home-card.mobile-priority-card:first-child .mobile-route-priority-actions {
    margin-top: 15px;
    padding-top: 0;
    border-top: 0;
    gap: 8px;
  }

  .mobile-home-card.mobile-priority-card:first-child .secondary-btn {
    color: rgba(220, 235, 247, 0.78);
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: none;
  }

  .mobile-fast-report-card,
  .mobile-map-preview-card,
  .mobile-quick-actions-card,
  .mobile-community-card,
  .mobile-corridor-intel-card,
  .mobile-premium-status-bar {
    border-color: rgba(255, 255, 255, 0.075);
    background: rgba(8, 12, 18, 0.58);
    box-shadow: none;
  }

  .mobile-home-card:not(.mobile-priority-card) {
    padding: 14px;
  }

  .mobile-home-card:not(.mobile-priority-card) > span {
    color: rgba(191, 211, 229, 0.58);
    font-size: 0.69rem;
    letter-spacing: 0.08em;
  }

  .mobile-home-card:not(.mobile-priority-card) strong {
    font-size: 1rem;
    letter-spacing: -0.01em;
  }

  .mobile-home-card:not(.mobile-priority-card) p {
    color: rgba(203, 219, 235, 0.63);
    line-height: 1.36;
  }

  .map-card {
    padding: 9px;
    border-color: rgba(255, 255, 255, 0.075);
    background: rgba(7, 11, 16, 0.54);
    box-shadow: none;
  }

  .map-card .map-ux-strip {
    margin: 0 0 9px;
  }

  .map-card .map-ux-strip .geo-filter-shell {
    gap: 6px;
    padding: 2px !important;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .map-card .map-ux-strip .geo-filter-pill {
    padding: 7px 11px;
    color: rgba(214, 229, 242, 0.58);
    border-color: rgba(255, 255, 255, 0.075);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: none;
  }

  .map-card .map-ux-strip .geo-filter-pill.selected,
  .map-card .map-ux-strip .geo-filter-pill[aria-pressed="true"] {
    color: #eef8ff;
    border-color: rgba(113, 217, 255, 0.44);
    background: rgba(72, 179, 255, 0.17);
  }

  #map {
    min-height: 58svh;
    border-radius: 18px;
    border-color: rgba(122, 178, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 16px 28px rgba(0,0,0,0.24);
  }

  #map .leaflet-control-zoom,
  #map .leaflet-control-layers,
  #map .leaflet-control-attribution {
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 14px !important;
    background: rgba(7, 12, 18, 0.68) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(12px);
  }

  #map .leaflet-control-zoom a {
    background: transparent !important;
    color: rgba(231, 242, 252, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  .desktop-route-watch-strip,
  .mobile-destination-command,
  .mobile-live-command {
    border-color: rgba(255, 255, 255, 0.075);
    background: rgba(8, 12, 18, 0.56);
    box-shadow: none;
  }

  .desktop-route-watch-strip .eyebrow,
  .mobile-awareness-panel-kicker {
    color: rgba(190, 211, 231, 0.54);
    letter-spacing: 0.075em;
  }

  .desktop-route-watch-strip strong,
  .mobile-destination-command strong,
  .mobile-live-command strong {
    font-size: 0.98rem;
    letter-spacing: -0.01em;
  }

  .desktop-route-watch-strip p,
  .mobile-destination-command p,
  .mobile-live-command p {
    color: rgba(203, 219, 235, 0.62);
    line-height: 1.34;
  }
}

/* V856.9 — Home Screen Lock Certification: final presentation-only balance pass. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-trust-line,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="quiet"] .gridly-v2-awareness-trust-line {
    margin-top: 7px;
    padding-top: 0;
    border-top: 0;
    color: rgba(202, 220, 236, 0.46);
    font-size: 0.545rem;
    font-weight: 520;
    letter-spacing: 0.026em;
    line-height: 1.16;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel {
    gap: 1px;
    padding: 8px 11px;
    max-height: 96px;
    border-color: rgba(174, 208, 245, 0.08);
    background: linear-gradient(170deg, rgba(6, 17, 31, 0.6), rgba(2, 8, 18, 0.72));
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(247, 251, 255, 0.035);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-kicker {
    color: rgba(202, 220, 236, 0.46);
    font-size: 0.53rem;
    font-weight: 650;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-title {
    font-size: 0.82rem;
    line-height: 1.12;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-status,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-meta {
    color: rgba(202, 220, 236, 0.56);
    font-size: 0.66rem;
    line-height: 1.2;
  }
}

/* V857.2 — Search Experience refinement aligned to Home Screen Baseline V1. */
.gridly-search-shell {
  top: max(20px, calc(env(safe-area-inset-top, 0px) + 18px));
  width: min(560px, calc(100% - 28px));
  z-index: 1250;
}

.gridly-search-shell .gridly-search-card {
  overflow: hidden;
  border-radius: 28px;
  padding: 16px 18px 15px;
  border: 1px solid rgba(222, 241, 255, 0.16);
  background:
    radial-gradient(circle at 16% 0%, rgba(93, 219, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(9, 20, 34, 0.96), rgba(5, 10, 18, 0.94));
  box-shadow: 0 26px 70px rgba(0, 6, 18, 0.66), inset 0 1px 0 rgba(247, 251, 255, 0.08);
  backdrop-filter: blur(24px) saturate(128%);
}

.gridly-search-shell .gridly-search-header {
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 11px;
}

.gridly-search-heading {
  min-width: 0;
  display: grid;
  gap: 0;
}

.gridly-search-kicker {
  color: rgba(142, 232, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.gridly-search-shell .gridly-search-label {
  color: var(--gridly-text, #f7fbff);
  font-size: clamp(1.28rem, 4vw, 1.72rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 850;
}

.gridly-search-subtitle {
  margin: 0;
  max-width: 34rem;
  color: rgba(226, 241, 255, 0.62);
  font-size: 0.9rem;
  line-height: 1.34;
  font-weight: 500;
}

.gridly-search-shell .gridly-search-close-btn {
  width: 38px;
  height: 38px;
  border-color: rgba(222, 241, 255, 0.1);
  background: rgba(247, 251, 255, 0.04);
  color: rgba(247, 251, 255, 0.88);
  font-size: 1.15rem;
}

.gridly-search-shell .gridly-search-input-row {
  align-items: center;
  gap: 6px;
  border-radius: 18px;
  padding: 5px;
  border: 1px solid rgba(222, 241, 255, 0.14);
  background: rgba(1, 8, 16, 0.68);
  box-shadow: inset 0 1px 0 rgba(247, 251, 255, 0.05);
}

.gridly-search-shell .gridly-search-input {
  min-height: 49px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--gridly-text, #f7fbff);
  padding: 12px 13px;
  font-size: 1rem;
  font-weight: 700;
  outline: none;
}

.gridly-search-shell .gridly-search-input::placeholder {
  color: rgba(226, 241, 255, 0.48);
  font-weight: 650;
}

.gridly-search-shell .gridly-search-input:focus {
  box-shadow: none;
}

.gridly-search-shell .gridly-search-clear-btn {
  min-height: 42px;
  border: 1px solid rgba(222, 241, 255, 0.12);
  border-radius: 14px;
  background: rgba(247, 251, 255, 0.07);
  color: rgba(247, 251, 255, 0.86);
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 800;
  max-width: 84px;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 160ms ease, transform 160ms ease, max-width 180ms ease, padding 180ms ease, border-color 180ms ease;
  white-space: nowrap;
}

.gridly-search-shell .gridly-search-clear-btn.is-clear-hidden {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateX(4px);
}

.gridly-search-shell .gridly-search-results {
  min-height: 0;
  max-height: min(52vh, 430px);
  overflow: auto;
  margin-top: 10px;
  padding-right: 2px;
  overscroll-behavior: contain;
}

.gridly-search-section-title {
  margin: 2px 2px 16px;
  color: rgba(142, 232, 255, 0.72);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.gridly-search-shell .gridly-search-results-status {
  border: 1px solid rgba(222, 241, 255, 0.11);
  border-radius: 18px;
  background: rgba(247, 251, 255, 0.045);
  color: rgba(226, 241, 255, 0.72);
  padding: 13px 14px;
  font-size: 0.92rem;
  line-height: 1.35;
}

.gridly-search-shell .gridly-search-results-list {
  gap: 9px;
}

.gridly-search-shell .gridly-search-result-item {
  min-height: 68px;
  border-radius: 18px;
  border-color: rgba(222, 241, 255, 0.12);
  background: rgba(247, 251, 255, 0.055);
  padding: 15px 14px;
  box-shadow: inset 0 1px 0 rgba(247, 251, 255, 0.05);
}

.gridly-search-shell .gridly-search-result-item:hover,
.gridly-search-shell .gridly-search-result-item:focus-visible {
  background: rgba(42, 134, 184, 0.24);
  border-color: rgba(142, 232, 255, 0.42);
  transform: translateY(-1px);
}

.gridly-search-shell .gridly-search-result-title {
  color: var(--gridly-text, #f7fbff);
  font-size: 0.98rem;
  letter-spacing: -0.015em;
  font-weight: 800;
}

.gridly-search-shell .gridly-search-result-meta {
  color: rgba(226, 241, 255, 0.62);
  font-size: 0.78rem;
  font-weight: 650;
}

body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) {
  top: max(12px, calc(env(safe-area-inset-top, 0px) + 10px));
  left: 12px;
  right: 12px;
  bottom: auto;
  transform: none;
  width: auto;
}

body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) .gridly-search-card {
  max-height: calc(100dvh - max(24px, calc(env(safe-area-inset-top, 0px) + 22px)) - env(safe-area-inset-bottom, 0px));
  padding: 15px 16px 14px;
  border-radius: 26px;
}

body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) .gridly-search-results {
  max-height: min(54dvh, 430px);
}

body[data-layout-mode="portrait"] #gridlySearchShell:not([hidden]) .gridly-search-input-row {
  flex-wrap: nowrap;
}

/* V857.2.2 — Search Baseline V1 lock certification route preview polish. */
body[data-layout-mode="portrait"] .mobile-destination-command .destination-route-impact-line:not(:empty),
body[data-layout-mode="portrait"] .map-card > .mobile-destination-command .destination-route-impact-line:not(:empty) {
  text-transform: none;
  letter-spacing: -0.005em;
}

/* V857.3 — Alerts Experience Refinement: presentation-only alignment with Home/Search Baseline V1. */
#alertsSection .combined-module-block:has(#alertsList),
#alertsSection .combined-module-block:has(#roadHazardsList) {
  display: grid;
  gap: 10px;
}

#alertsSection .combined-module-block h3 {
  margin-bottom: 0;
  color: rgba(238, 247, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
}

#alertsSection .alerts-list {
  display: grid;
  gap: 10px;
  max-height: min(38vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scroll-padding: 10px;
}

#alertsSection .alert-item,
#alertsSection .gridly-alert-row,
#alertsSection [data-gridly-alert-row="true"] {
  border: 1px solid rgba(178, 211, 237, 0.12) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(17, 28, 43, 0.72), rgba(9, 17, 28, 0.58)) !important;
  box-shadow: 0 10px 24px rgba(3, 10, 18, 0.18) !important;
}

#alertsSection .alert-item {
  padding: 12px 13px !important;
}

#alertsSection .alert-item.high {
  border-color: rgba(255, 166, 122, 0.22) !important;
  box-shadow: inset 3px 0 0 rgba(255, 166, 122, 0.52), 0 10px 24px rgba(3, 10, 18, 0.18) !important;
}

#alertsSection .alert-item.cleared {
  border-color: rgba(92, 221, 167, 0.2) !important;
  box-shadow: inset 3px 0 0 rgba(92, 221, 167, 0.42), 0 10px 24px rgba(3, 10, 18, 0.14) !important;
}

#alertsSection .alert-row-main {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
}

#alertsSection .alert-severity-chip {
  min-width: 0;
  max-width: 112px;
  padding: 3px 8px;
  border-color: rgba(190, 222, 248, 0.13) !important;
  background: rgba(190, 222, 248, 0.08) !important;
  color: rgba(212, 231, 246, 0.82) !important;
  font-size: 0.6rem;
  line-height: 1.25;
  white-space: normal;
}

#alertsSection .alert-item strong,
#alertsSection .gridly-alert-title,
#alertsSection .gridly-alert-headline,
#alertsSection .corridor-command-title {
  color: rgba(246, 250, 255, 0.96) !important;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
}

#alertsSection .alert-row-time {
  color: rgba(202, 221, 236, 0.68) !important;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

#alertsSection .alert-row-subline,
#alertsSection .alert-item p,
#alertsSection .gridly-alert-subtitle,
#alertsSection .corridor-command-severity,
#alertsSection .alert-row-details-list {
  color: rgba(205, 219, 233, 0.78) !important;
  font-size: 0.76rem !important;
  line-height: 1.42 !important;
}

#alertsSection .alert-row-details-list {
  margin-top: 8px;
  padding-left: 18px;
}

@media (max-width: 760px), (orientation: portrait) {
  body[data-layout-mode="portrait"] #alertsSection .alerts-list,
  body[data-layout-mode-legacy="mobile"] #alertsSection .alerts-list {
    gap: 12px;
    max-height: none;
    padding: 2px 2px 18px;
  }

  body[data-layout-mode="portrait"] #alertsSection .alert-item,
  body[data-layout-mode-legacy="mobile"] #alertsSection .alert-item {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body[data-layout-mode="portrait"] #alertsSection .alert-row-main,
  body[data-layout-mode-legacy="mobile"] #alertsSection .alert-row-main {
    grid-template-columns: 1fr auto;
  }

  body[data-layout-mode="portrait"] #alertsSection .alert-severity-chip,
  body[data-layout-mode-legacy="mobile"] #alertsSection .alert-severity-chip {
    grid-column: 1 / -1;
    width: fit-content;
    max-width: 100%;
  }
}

/* V857.3.1 — Alerts Baseline V1 lock: final presentation-only certification refinements. */
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] #gridlyPortraitV2SheetBody {
  scrollbar-color: rgba(190, 222, 248, 0.34) rgba(8, 18, 31, 0.18);
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] #gridlyPortraitV2SheetBody::-webkit-scrollbar {
  width: 6px;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] #gridlyPortraitV2SheetBody::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(190, 222, 248, 0.34);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alerts-active {
  display: grid;
  gap: 10px;
  padding: 0 1px 8px !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-intel-card {
  border-color: rgba(178, 211, 237, 0.12) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(17, 28, 43, 0.72), rgba(9, 17, 28, 0.58)) !important;
  box-shadow: 0 10px 24px rgba(3, 10, 18, 0.18) !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alerts-panel-heading="true"] {
  color: rgba(247, 251, 255, 0.96) !important;
  font-size: 1rem !important;
  font-weight: 780 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.24 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-row="true"] strong,
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-title {
  color: rgba(247, 251, 255, 0.97) !important;
  font-size: 0.96rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1.24 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-row="true"] strong + div,
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-subtitle {
  margin-top: 2px !important;
  color: rgba(205, 219, 233, 0.77) !important;
  font-size: 0.78rem !important;
  line-height: 1.34 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-row="true"] small {
  color: rgba(202, 221, 236, 0.64) !important;
  font-size: 0.74rem !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-historical-context-line="true"] {
  color: rgba(202, 221, 236, 0.56) !important;
}

/* V858.5 simplified first-run experience */
.gridly-v858-first-run-sheet {
  justify-self: center;
  width: min(438px, calc(100vw - 28px));
  max-width: 100%;
  max-height: min(92dvh, calc(100svh - 28px));
  padding: 0 !important;
  border: 1px solid rgba(158, 211, 249, 0.18) !important;
  border-radius: 32px !important;
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.gridly-v858-first-run-card {
  position: relative;
  isolation: isolate;
  pointer-events: auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 24px;
  height: min(92dvh, calc(100svh - 28px));
  max-height: min(92dvh, calc(100svh - 28px));
  min-height: 0;
  padding: clamp(30px, 7.5vw, 44px);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(92, 214, 255, 0.28), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(36, 111, 255, 0.28), transparent 30%),
    linear-gradient(180deg, rgba(13, 28, 46, 0.99), rgba(5, 13, 24, 0.98));
  color: #f4f9ff;
}

.gridly-v858-first-run-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 28%, transparent 72%, rgba(142, 230, 255, 0.08));
}

.gridly-v858-first-run-hero,
.gridly-v859-personalization-message,
.gridly-v858-location-panel,
.gridly-v858-first-run-status {
  position: relative;
  z-index: 1;
}

.gridly-v858-first-run-hero {
  display: grid;
  gap: 10px;
}

.gridly-v858-first-run-eyebrow {
  margin: 0;
  color: #8ee6ff;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gridly-v858-first-run-card h2 {
  margin: 0;
  font-size: clamp(2.25rem, 10vw, 3rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.gridly-v858-first-run-card p {
  margin: 0;
  color: rgba(222, 236, 249, 0.86);
  font-size: 1.03rem;
  line-height: 1.48;
}

.gridly-v859-personalization-message {
  max-width: 29rem;
  color: rgba(202, 222, 239, 0.72) !important;
  font-size: 0.96rem !important;
  line-height: 1.52 !important;
}


.gridly-v858-first-run-tagline {
  color: #f7fbff !important;
  font-size: 1.18rem !important;
  font-weight: 850;
}

.gridly-v894c2-tour-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}

.gridly-v894c2-start-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.gridly-v894c2-skip-btn {
  border-color: rgba(255, 255, 255, 0.38) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #f7fbff !important;
}

.gridly-v894c3-tour-scroll {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 22px;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scroll-padding-block: 10px calc(20px + env(safe-area-inset-bottom, 0px));
  padding-right: 2px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.gridly-v894c2-tour-cards {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.gridly-v894c2-tour-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(158, 211, 249, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  scroll-margin-block: 10px;
}

.gridly-v894c2-tour-card span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(142, 230, 255, 0.18);
  color: #8ee6ff;
  font-size: 0.82rem;
  font-weight: 900;
}

.gridly-v894c2-tour-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.18;
}

.gridly-v894c2-tour-card p {
  grid-column: 2;
  font-size: 0.94rem !important;
  line-height: 1.42 !important;
}

.gridly-v894c2-finish-btn {
  position: relative;
  z-index: 2;
}

.gridly-v858-location-panel {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(158, 211, 249, 0.2);
  border-radius: 24px;
  background: rgba(3, 10, 19, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.gridly-v858-first-run-card .primary-btn,
.gridly-v858-first-run-card .secondary-btn,
.gridly-v858-manual-location input {
  position: relative;
  z-index: 2;
  touch-action: manipulation;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(142, 230, 255, 0.18);
  min-height: 52px;
  width: 100%;
  border-radius: 16px;
  font-size: 1rem;
}

.gridly-v858-location-divider {
  color: rgba(210, 227, 242, 0.58);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.gridly-v858-manual-location {
  display: grid;
  gap: 10px;
}

.gridly-v858-manual-location label {
  color: rgba(230, 242, 252, 0.9);
  font-size: 0.93rem;
  font-weight: 800;
}

.gridly-v858-manual-location input {
  -webkit-user-select: text;
  user-select: text;
  pointer-events: auto;
  border: 1px solid rgba(158, 211, 249, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 0 15px;
  outline: none;
}

.gridly-v858-manual-location input:focus {
  border-color: rgba(142, 230, 255, 0.76);
  box-shadow: 0 0 0 4px rgba(72, 181, 255, 0.16);
}

.gridly-v858-first-run-status {
  min-height: 1.35em;
  color: rgba(154, 217, 255, 0.92) !important;
  font-size: 0.9rem !important;
}

.gridly-v859-completion-visible .gridly-v858-first-run-card {
  min-height: 420px;
  place-items: center;
}

.gridly-v859-completion-moment {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  text-align: center;
  animation: gridlyV859CompletionFadeIn 260ms ease-out both;
}

.gridly-v859-completion-moment h2 {
  font-size: clamp(2.4rem, 11vw, 3.25rem);
}

.gridly-v859-completion-moment p:last-child {
  color: rgba(222, 236, 249, 0.9);
  font-weight: 760;
}

@keyframes gridlyV859CompletionFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 520px) {
  .gridly-v858-first-run-sheet {
    align-self: end;
    justify-self: center;
    width: min(438px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    max-height: min(94dvh, calc(100svh - 16px));
    border-radius: 30px !important;
  }

  .gridly-v858-first-run-card {
    gap: 18px;
    height: min(94dvh, calc(100svh - 16px));
    max-height: min(94dvh, calc(100svh - 16px));
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .gridly-v894c3-tour-scroll {
    gap: 14px;
    scroll-padding-block: 8px calc(26px + env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  }

  .gridly-v894c2-tour-actions {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 10px;
  }

  .gridly-v894c2-tour-card {
    padding: 12px;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .gridly-v858-first-run-sheet,
  .gridly-v858-first-run-card {
    max-height: min(94dvh, calc(100svh - 12px));
  }
}

/* V862 — Gridly Brief foundation: tiny inert handle only, no panel/state. */
#gridlyPortraitV2 .gridly-brief-foundation-handle {
  position: absolute;
  right: 9px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 28px;
  max-width: 34px;
  min-height: 10px;
  padding: 1px 5px;
  border: 1px solid rgba(247, 251, 255, 0.14);
  border-radius: 999px;
  color: rgba(210, 230, 244, 0.58);
  background: rgba(8, 24, 39, 0.5);
  box-shadow: inset 0 1px 0 rgba(247, 251, 255, 0.05);
  font: 700 0.43rem/1 var(--gridly-font, Inter, system-ui, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.68;
  z-index: 1;
}

#gridlyPortraitV2 .gridly-brief-foundation-handle:focus-visible {
  outline: 2px solid rgba(0, 245, 240, 0.7);
  outline-offset: 2px;
}

body[data-layout-mode="desktop"] #gridlyPortraitV2 .gridly-brief-foundation-handle,
body[data-layout-mode="tactical-landscape"] #gridlyPortraitV2 .gridly-brief-foundation-handle {
  display: none;
}

/* V862.2 — Gridly Brief experience refinement: inline Home-owned expansion. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 {
    --gridly-brief-interaction-extra: 0px;
    --gridly-v2-filter-strip-top: calc(var(--gridly-v2-header-top) + 174px + var(--gridly-brief-interaction-extra));
    --gridly-v2-filter-strip-bottom: calc(var(--gridly-v2-header-top) + 220px + var(--gridly-brief-interaction-extra));
    --gridly-v2-top-shield-height: calc(var(--gridly-v2-filter-strip-bottom) + 12px);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] {
    --gridly-brief-interaction-extra: clamp(278px, 39vh, 372px);
  }
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack {
  position: fixed;
  top: var(--gridly-v2-awareness-card-top, 66px);
  left: var(--gridly-v2-command-left, calc(10px + env(safe-area-inset-left, 0px)));
  right: var(--gridly-v2-command-right, calc(10px + env(safe-area-inset-right, 0px)));
  z-index: 24;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  pointer-events: none;
}

#gridlyPortraitV2 .gridly-v2-brief-stack .gridly-v2-awareness-brief-card,
#gridlyPortraitV2 .gridly-v2-brief-stack .gridly-v2-segments,
#gridlyPortraitV2 .gridly-v2-brief-stack .gridly-brief-foundation-handle,
#gridlyPortraitV2 .gridly-v2-brief-stack .gridly-brief-interaction-panel {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100%;
  min-width: 0;
  transform: none !important;
}

#gridlyPortraitV2 .gridly-brief-foundation-handle {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  min-height: 42px;
  padding: 11px 16px;
  border: 1px solid rgba(42, 222, 232, 0.18);
  border-radius: 16px;
  color: rgba(235, 247, 255, 0.94);
  background: linear-gradient(180deg, rgba(17, 36, 56, 0.86), rgba(10, 24, 41, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font: 850 0.9rem/1.1 var(--gridly-font, Inter, system-ui, sans-serif);
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  pointer-events: auto;
  opacity: 1;
  cursor: pointer;
  transition: color 280ms ease-in-out, border-color 280ms ease-in-out, background 280ms ease-in-out;
}

#gridlyPortraitV2 .gridly-brief-foundation-handle::before,
#gridlyPortraitV2 .gridly-brief-foundation-handle::after {
  content: "";
  flex: 1 1 42px;
  max-width: 72px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(42, 232, 220, 0), rgba(42, 232, 220, 0.86));
}

#gridlyPortraitV2 .gridly-brief-foundation-handle::after {
  background: linear-gradient(90deg, rgba(42, 232, 220, 0.86), rgba(42, 232, 220, 0));
}

#gridlyPortraitV2 .gridly-brief-foundation-handle-label,
#gridlyPortraitV2 .gridly-brief-foundation-handle-icon {
  flex: 0 0 auto;
  white-space: nowrap;
}

#gridlyPortraitV2 .gridly-brief-foundation-handle-icon {
  color: rgba(230, 246, 255, 0.88);
  font-size: 0.86rem;
  transform: translateY(-1px);
}

#gridlyPortraitV2 .gridly-brief-foundation-handle:focus-visible {
  outline: 2px solid rgba(0, 245, 240, 0.78);
  outline-offset: 3px;
}

#gridlyPortraitV2 .gridly-brief-interaction-panel {
  max-height: 0;
  overflow: hidden;
  padding: 0 28px;
  border: 1px solid rgba(116, 223, 250, 0.32);
  border-radius: 26px;
  color: rgba(237, 248, 255, 0.96);
  background:
    radial-gradient(circle at 14% 0%, rgba(74, 218, 232, 0.18), transparent 38%),
    radial-gradient(circle at 92% 18%, rgba(96, 146, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(6, 21, 37, 0.97), rgba(3, 14, 26, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: auto;
  transition: max-height 280ms ease-in-out, padding 280ms ease-in-out, opacity 280ms ease-in-out;
}

#gridlyPortraitV2 .gridly-brief-interaction-panel[data-gridly-brief-expanded="true"] {
  max-height: 360px;
  padding-top: 26px;
  padding-bottom: 26px;
  opacity: 1;
}

#gridlyPortraitV2 .gridly-brief-interaction-panel p { margin: 0; }

#gridlyPortraitV2 .gridly-brief-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

#gridlyPortraitV2 .gridly-brief-greeting {
  color: rgba(249, 253, 255, 0.98);
  font-weight: 920;
  font-size: clamp(1.44rem, 5.8vw, 1.96rem);
  line-height: 1.02;
  letter-spacing: -0.048em;
  text-wrap: balance;
}

#gridlyPortraitV2 .gridly-brief-location {
  margin-top: 8px;
  color: rgba(150, 239, 236, 0.9);
  font-size: 0.86rem;
  font-weight: 820;
  line-height: 1.18;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#gridlyPortraitV2 .gridly-brief-weather {
  flex: 0 0 auto;
  max-width: 42%;
  color: rgba(240, 247, 255, 0.92);
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.22;
  text-align: right;
}

#gridlyPortraitV2 .gridly-brief-weather[hidden] { display: none !important; }

#gridlyPortraitV2 .gridly-brief-flow {
  margin-top: 24px;
  display: grid;
  gap: 20px;
}

#gridlyPortraitV2 .gridly-brief-section-travel {
  padding: 17px 18px 18px;
  border: 1px solid rgba(106, 235, 229, 0.22);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(31, 72, 92, 0.42), rgba(10, 30, 48, 0.38));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#gridlyPortraitV2 .gridly-brief-section-label {
  color: rgba(111, 244, 235, 0.94);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#gridlyPortraitV2 .gridly-brief-outlook,
#gridlyPortraitV2 .gridly-brief-context {
  margin-top: 11px;
  color: rgba(231, 244, 255, 0.92);
  font-size: 0.98rem;
  font-weight: 640;
  line-height: 1.46;
}

#gridlyPortraitV2 .gridly-brief-context {
  color: rgba(202, 222, 240, 0.84);
}

#gridlyPortraitV2 .gridly-brief-travel-status {
  margin-top: 10px;
  color: #fff;
  font-size: clamp(1.12rem, 4.6vw, 1.32rem);
  font-weight: 940;
  line-height: 1.18;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

@media (max-width: 380px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] {
    --gridly-brief-interaction-extra: clamp(292px, 43vh, 392px);
  }

  #gridlyPortraitV2 .gridly-brief-interaction-panel {
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 22px;
  }

  #gridlyPortraitV2 .gridly-brief-interaction-panel[data-gridly-brief-expanded="true"] {
    padding-top: 21px;
    padding-bottom: 21px;
  }
}

/* V862.4 — Gridly Brief weather hero + compact takeaway polish. */
#gridlyPortraitV2 .gridly-brief-identity {
  min-width: 0;
}

#gridlyPortraitV2 .gridly-brief-weather {
  display: grid;
  justify-items: end;
  gap: 3px;
  padding-top: 1px;
}

#gridlyPortraitV2 .gridly-brief-weather-temp,
#gridlyPortraitV2 .gridly-brief-weather-alert-title {
  color: #fff;
  font-size: clamp(1.54rem, 6.2vw, 2.12rem);
  font-weight: 940;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

#gridlyPortraitV2 .gridly-brief-weather-alert-title {
  font-size: clamp(1.02rem, 4.1vw, 1.2rem);
  letter-spacing: -0.025em;
}

#gridlyPortraitV2 .gridly-brief-weather[data-weather-hero-mode="alert"] {
  max-width: 38%;
  gap: 4px;
}

#gridlyPortraitV2 .gridly-brief-weather-summary {
  max-width: 11.5rem;
  color: rgba(210, 231, 246, 0.88);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.18;
  text-wrap: balance;
}

#gridlyPortraitV2 .gridly-brief-flow {
  margin-top: 20px;
  gap: 16px;
}

#gridlyPortraitV2 .gridly-brief-outlook,
#gridlyPortraitV2 .gridly-brief-context {
  line-height: 1.34;
}

#gridlyPortraitV2 .gridly-brief-section-travel {
  position: relative;
  padding: 15px 18px 16px;
  border-color: rgba(124, 255, 238, 0.34);
  background:
    radial-gradient(circle at 12% 0%, rgba(95, 244, 232, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(33, 83, 103, 0.5), rgba(8, 30, 49, 0.44));
}

#gridlyPortraitV2 .gridly-brief-section-travel::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(112, 255, 236, 0.95), rgba(72, 177, 255, 0.35));
}

#gridlyPortraitV2 .gridly-brief-travel-status {
  margin-top: 8px;
}

/* V862.7 — premium expanded Gridly Brief layout polish. */
body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] {
  --gridly-brief-interaction-extra: clamp(318px, 42vh, 410px);
}

#gridlyPortraitV2 .gridly-brief-interaction-panel[data-gridly-brief-expanded="true"] {
  max-height: 392px;
  padding: clamp(23px, 4.9vw, 31px) clamp(24px, 5.3vw, 34px) clamp(22px, 4.8vw, 30px);
}

#gridlyPortraitV2 .gridly-brief-hero {
  align-items: flex-start;
  gap: clamp(18px, 4vw, 30px);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(106, 235, 229, 0.32);
}

#gridlyPortraitV2 .gridly-brief-location {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(223, 241, 255, 0.9);
  font-size: clamp(0.92rem, 3.4vw, 1.05rem);
  letter-spacing: 0;
  text-transform: none;
}

#gridlyPortraitV2 .gridly-brief-location::before {
  content: "📍";
  color: rgba(61, 242, 226, 0.98);
  filter: drop-shadow(0 0 10px rgba(61, 242, 226, 0.4));
}

#gridlyPortraitV2 .gridly-brief-weather {
  align-self: flex-start;
  min-width: min(190px, 42%);
  padding: 8px 0 8px clamp(16px, 3.8vw, 26px);
  border-left: 1px solid rgba(61, 213, 230, 0.24);
}

#gridlyPortraitV2 .gridly-brief-weather-temp {
  font-size: clamp(2.25rem, 9.2vw, 3.2rem);
}

#gridlyPortraitV2 .gridly-brief-weather-alert-title {
  font-size: clamp(1.08rem, 4.2vw, 1.34rem);
  line-height: 1.02;
}

#gridlyPortraitV2 .gridly-brief-weather-summary {
  max-width: 12.5rem;
  font-size: 0.86rem;
}

#gridlyPortraitV2 .gridly-brief-flow {
  margin-top: 20px;
  gap: 18px;
}

#gridlyPortraitV2 .gridly-brief-section-outlook {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(106, 235, 229, 0.28);
}

#gridlyPortraitV2 .gridly-brief-outlook {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

#gridlyPortraitV2 .gridly-brief-outlook-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: rgba(247, 252, 255, 0.95);
  font-size: clamp(0.94rem, 3.35vw, 1.04rem);
  font-weight: 680;
  line-height: 1.24;
}

#gridlyPortraitV2 .gridly-brief-outlook-icon {
  width: 28px;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.15;
  filter: drop-shadow(0 0 9px rgba(77, 241, 231, 0.24));
}

#gridlyPortraitV2 .gridly-brief-context {
  display: none;
}

#gridlyPortraitV2 .gridly-brief-section-travel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#gridlyPortraitV2 .gridly-brief-section-travel::before {
  display: none;
}

#gridlyPortraitV2 .gridly-brief-travel-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(124, 255, 238, 0.32);
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 0%, rgba(86, 238, 161, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(25, 68, 87, 0.48), rgba(7, 25, 42, 0.44));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 30px rgba(0, 0, 0, 0.18);
}

#gridlyPortraitV2 .gridly-brief-travel-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: rgba(3, 28, 22, 0.95);
  background: linear-gradient(135deg, #54ef8f, #3edb69);
  font-size: 1.35rem;
  font-weight: 950;
  box-shadow: 0 0 18px rgba(84, 239, 143, 0.26);
}

#gridlyPortraitV2 .gridly-brief-travel-status {
  margin-top: 0;
}

#gridlyPortraitV2 .gridly-brief-travel-support {
  margin-top: 4px;
  color: rgba(211, 229, 242, 0.84);
  font-size: 0.92rem;
  font-weight: 640;
  line-height: 1.24;
}

@media (max-width: 430px) and (orientation: portrait) {
  #gridlyPortraitV2 .gridly-brief-hero {
    gap: 14px;
  }

  #gridlyPortraitV2 .gridly-brief-weather {
    min-width: min(168px, 43%);
    padding-left: 14px;
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  #gridlyPortraitV2 .gridly-brief-hero {
    flex-wrap: wrap;
  }

  #gridlyPortraitV2 .gridly-brief-weather {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-items: start;
    text-align: left;
    padding: 11px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(61, 213, 230, 0.22);
  }

  #gridlyPortraitV2 .gridly-brief-weather-summary {
    max-width: 100%;
  }
}

/* V862.8 — Brief collapse reliability + premium hero polish. */
#gridlyPortraitV2 .gridly-v2-brief-stack {
  isolation: isolate;
}

#gridlyPortraitV2 .gridly-brief-foundation-handle {
  position: relative !important;
  z-index: 5;
  min-height: 46px;
  border-color: rgba(99, 240, 232, 0.32);
  background:
    linear-gradient(90deg, rgba(42, 232, 220, 0.10), transparent 26%, transparent 74%, rgba(42, 232, 220, 0.10)),
    linear-gradient(180deg, rgba(20, 44, 66, 0.94), rgba(8, 24, 41, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 24px rgba(0, 0, 0, 0.16);
  touch-action: manipulation;
  user-select: none;
}

#gridlyPortraitV2 .gridly-brief-foundation-handle[aria-expanded="true"] {
  border-color: rgba(116, 255, 241, 0.5);
  background:
    linear-gradient(90deg, rgba(72, 255, 238, 0.14), transparent 28%, transparent 72%, rgba(72, 255, 238, 0.14)),
    linear-gradient(180deg, rgba(25, 58, 82, 0.98), rgba(8, 27, 45, 0.96));
}

#gridlyPortraitV2 .gridly-brief-foundation-handle-label {
  position: relative;
  z-index: 1;
}

#gridlyPortraitV2 .gridly-brief-foundation-handle-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(112, 255, 241, 0.12);
}

#gridlyPortraitV2 .gridly-brief-interaction-panel {
  border-color: rgba(128, 238, 255, 0.42);
  background:
    radial-gradient(circle at 12% 0%, rgba(82, 245, 232, 0.23), transparent 39%),
    radial-gradient(circle at 96% 5%, rgba(255, 191, 87, 0.10), transparent 31%),
    radial-gradient(circle at 86% 28%, rgba(88, 147, 255, 0.15), transparent 36%),
    linear-gradient(180deg, rgba(8, 25, 42, 0.985), rgba(3, 13, 26, 0.955));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 22px 46px rgba(0, 0, 0, 0.24);
}

#gridlyPortraitV2 .gridly-brief-interaction-panel[data-gridly-brief-expanded="true"] {
  max-height: 430px;
  padding: clamp(26px, 5.8vw, 36px) clamp(24px, 5.6vw, 36px) clamp(24px, 5.3vw, 32px);
}

#gridlyPortraitV2 .gridly-brief-hero {
  padding: 0 0 clamp(20px, 4.8vw, 25px);
  border-bottom-color: rgba(132, 247, 238, 0.36);
}

#gridlyPortraitV2 .gridly-brief-greeting {
  font-size: clamp(1.56rem, 6.3vw, 2.08rem);
  line-height: 1.04;
}

#gridlyPortraitV2 .gridly-brief-weather {
  padding: 12px 0 12px clamp(17px, 4vw, 28px);
}

#gridlyPortraitV2 .gridly-brief-weather[data-weather-hero-mode="alert"] {
  max-width: 46%;
  padding: 12px 14px 12px clamp(16px, 3.6vw, 24px);
  border: 1px solid rgba(255, 198, 91, 0.42);
  border-left: 3px solid rgba(255, 197, 78, 0.86);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 213, 105, 0.26), transparent 42%),
    linear-gradient(180deg, rgba(85, 50, 18, 0.44), rgba(48, 26, 14, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.11), 0 12px 26px rgba(0, 0, 0, 0.16);
}

#gridlyPortraitV2 .gridly-brief-weather[data-weather-hero-mode="alert"] .gridly-brief-weather-alert-title {
  color: rgba(255, 239, 198, 0.98);
  letter-spacing: -0.015em;
}

#gridlyPortraitV2 .gridly-brief-flow {
  margin-top: clamp(22px, 5vw, 28px);
  gap: clamp(20px, 4.8vw, 26px);
}

#gridlyPortraitV2 .gridly-brief-section-outlook {
  padding-bottom: clamp(20px, 4.8vw, 26px);
}

#gridlyPortraitV2 .gridly-brief-outlook {
  gap: 12px;
}

#gridlyPortraitV2 .gridly-brief-outlook-row {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid rgba(122, 226, 247, 0.18);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#gridlyPortraitV2 .gridly-brief-outlook-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(78, 239, 229, 0.11);
}

#gridlyPortraitV2 .gridly-brief-travel-card {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 15px;
  padding: 16px 18px;
  border-color: rgba(133, 255, 216, 0.38);
}

/* V862.9 — compact expanded Gridly Brief height + collapse usability fix. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] {
    --gridly-brief-interaction-extra: clamp(236px, 32vh, 318px);
  }

  #gridlyPortraitV2 .gridly-brief-interaction-panel[data-gridly-brief-expanded="true"] {
    max-height: 342px;
    padding: clamp(17px, 4vw, 22px) clamp(18px, 4.7vw, 28px) clamp(16px, 3.8vw, 21px);
  }

  #gridlyPortraitV2 .gridly-brief-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(112px, 40%);
    align-items: center;
    gap: clamp(12px, 3.1vw, 18px);
    padding-bottom: clamp(12px, 3.2vw, 16px);
  }

  #gridlyPortraitV2 .gridly-brief-greeting {
    font-size: clamp(1.34rem, 5.45vw, 1.76rem);
    line-height: 1.01;
  }

  #gridlyPortraitV2 .gridly-brief-location {
    margin-top: 5px;
    font-size: clamp(0.79rem, 2.9vw, 0.92rem);
    line-height: 1.12;
  }

  #gridlyPortraitV2 .gridly-brief-weather {
    min-width: 0;
    max-width: none;
    padding: 7px 0 7px clamp(10px, 2.8vw, 16px);
  }

  #gridlyPortraitV2 .gridly-brief-weather[data-weather-hero-mode="alert"] {
    max-width: none;
    padding: 8px 10px 8px 12px;
    border-radius: 15px;
  }

  #gridlyPortraitV2 .gridly-brief-weather-temp {
    font-size: clamp(1.8rem, 7.2vw, 2.45rem);
  }

  #gridlyPortraitV2 .gridly-brief-weather-alert-title {
    font-size: clamp(0.88rem, 3.45vw, 1.04rem);
    line-height: 1;
  }

  #gridlyPortraitV2 .gridly-brief-weather-summary {
    max-width: 9.6rem;
    font-size: 0.74rem;
    line-height: 1.12;
  }

  #gridlyPortraitV2 .gridly-brief-flow {
    margin-top: clamp(13px, 3.4vw, 17px);
    gap: clamp(12px, 3.2vw, 16px);
  }

  #gridlyPortraitV2 .gridly-brief-section-outlook {
    padding-bottom: clamp(12px, 3.2vw, 16px);
  }

  #gridlyPortraitV2 .gridly-brief-section-label {
    font-size: 0.64rem;
    line-height: 1.05;
  }

  #gridlyPortraitV2 .gridly-brief-outlook {
    gap: 7px;
    margin-top: 9px;
  }

  #gridlyPortraitV2 .gridly-brief-outlook-row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 13px;
    font-size: clamp(0.82rem, 3vw, 0.92rem);
    line-height: 1.16;
  }

  #gridlyPortraitV2 .gridly-brief-outlook-icon {
    width: 28px;
    height: 28px;
    border-radius: 11px;
    font-size: 0.98rem;
  }

  #gridlyPortraitV2 .gridly-brief-travel-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 16px;
  }

  #gridlyPortraitV2 .gridly-brief-travel-icon {
    width: 32px;
    height: 32px;
    font-size: 1.12rem;
  }

  #gridlyPortraitV2 .gridly-brief-travel-status {
    font-size: clamp(0.98rem, 3.75vw, 1.14rem);
    line-height: 1.1;
  }

  #gridlyPortraitV2 .gridly-brief-travel-support {
    margin-top: 3px;
    font-size: 0.8rem;
    line-height: 1.14;
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] {
    --gridly-brief-interaction-extra: clamp(252px, 36vh, 338px);
  }

  #gridlyPortraitV2 .gridly-brief-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  #gridlyPortraitV2 .gridly-brief-weather,
  #gridlyPortraitV2 .gridly-brief-weather[data-weather-hero-mode="alert"] {
    width: 100%;
    padding: 8px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(61, 213, 230, 0.22);
  }
}

/* V862.10 — keep Travel Status fully contained above the filter strip. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] {
    --gridly-brief-interaction-extra: clamp(264px, 36vh, 356px);
  }

  #gridlyPortraitV2 .gridly-brief-interaction-panel[data-gridly-brief-expanded="true"] {
    max-height: 376px;
    padding-top: clamp(15px, 3.5vw, 20px);
    padding-bottom: clamp(18px, 4vw, 24px);
  }

  #gridlyPortraitV2 .gridly-brief-hero {
    padding-bottom: clamp(10px, 2.7vw, 14px);
  }

  #gridlyPortraitV2 .gridly-brief-flow {
    margin-top: clamp(10px, 2.8vw, 14px);
    gap: clamp(9px, 2.7vw, 13px);
  }

  #gridlyPortraitV2 .gridly-brief-section-outlook {
    padding-bottom: clamp(9px, 2.7vw, 13px);
  }

  #gridlyPortraitV2 .gridly-brief-outlook {
    gap: 6px;
    margin-top: 7px;
  }

  #gridlyPortraitV2 .gridly-brief-outlook-row {
    min-height: 31px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  #gridlyPortraitV2 .gridly-brief-travel-card {
    margin-top: 7px;
    padding-top: 9px;
    padding-bottom: 11px;
  }

  #gridlyPortraitV2 .gridly-brief-travel-status {
    line-height: 1.08;
  }
}

/* V862.12 — Gridly Brief lightness pass: less dense expanded panel without behavior changes. */
@media (max-width: 760px) and (orientation: portrait) {
  #gridlyPortraitV2 .gridly-brief-interaction-panel {
    border-color: rgba(128, 238, 255, 0.28);
    background:
      radial-gradient(circle at 12% 0%, rgba(82, 245, 232, 0.16), transparent 39%),
      radial-gradient(circle at 96% 5%, rgba(255, 191, 87, 0.07), transparent 31%),
      radial-gradient(circle at 86% 28%, rgba(88, 147, 255, 0.10), transparent 36%),
      linear-gradient(180deg, rgba(8, 25, 42, 0.955), rgba(3, 13, 26, 0.925));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 14px 30px rgba(0, 0, 0, 0.17);
  }

  #gridlyPortraitV2 .gridly-brief-hero {
    border-bottom-color: rgba(132, 247, 238, 0.22);
  }

  #gridlyPortraitV2 .gridly-brief-section-outlook {
    border-bottom-color: rgba(106, 235, 229, 0.16);
  }

  #gridlyPortraitV2 .gridly-brief-outlook {
    gap: 5px;
  }

  #gridlyPortraitV2 .gridly-brief-outlook-row {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    min-height: 28px;
    padding: 5px 7px;
    border-color: rgba(122, 226, 247, 0.10);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    font-weight: 620;
    line-height: 1.14;
  }

  #gridlyPortraitV2 .gridly-brief-outlook-icon {
    width: 26px;
    height: 26px;
    border-radius: 10px;
    background: rgba(78, 239, 229, 0.075);
    filter: none;
  }

  #gridlyPortraitV2 .gridly-brief-travel-card {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 10px;
    border-color: rgba(133, 255, 216, 0.24);
    border-radius: 14px;
    background:
      radial-gradient(circle at 8% 0%, rgba(86, 238, 161, 0.14), transparent 38%),
      linear-gradient(180deg, rgba(25, 68, 87, 0.34), rgba(7, 25, 42, 0.30));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  }

  #gridlyPortraitV2 .gridly-brief-travel-icon {
    width: 30px;
    height: 30px;
    font-size: 1.02rem;
    box-shadow: 0 0 12px rgba(84, 239, 143, 0.18);
  }

  #gridlyPortraitV2 .gridly-brief-travel-status {
    font-size: clamp(0.94rem, 3.55vw, 1.08rem);
    font-weight: 880;
    line-height: 1.08;
  }

  #gridlyPortraitV2 .gridly-brief-travel-support {
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 580;
    line-height: 1.12;
  }
}

/* V862.13 — final Gridly Brief visual containment breathing room. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] {
    --gridly-brief-interaction-extra: clamp(282px, 37vh, 374px);
  }

  #gridlyPortraitV2 .gridly-v2-brief-stack {
    gap: 12px;
  }

  #gridlyPortraitV2 .gridly-brief-interaction-panel[data-gridly-brief-expanded="true"] {
    padding-bottom: clamp(20px, 4.7vw, 28px);
  }

  #gridlyPortraitV2 .gridly-brief-travel-card {
    margin-bottom: 2px;
  }

  #gridlyPortraitV2 .gridly-brief-weather[data-weather-hero-mode="alert"] {
    gap: 2px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  #gridlyPortraitV2 .gridly-brief-weather[data-weather-hero-mode="alert"] .gridly-brief-weather-summary {
    max-width: 8.4rem;
    font-size: 0.72rem;
    line-height: 1.08;
  }
}

/* V862.14 — expanded Brief map-control clearance and bottom map breathing room. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] {
    --gridly-brief-interaction-extra: clamp(300px, 39vh, 396px);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail {
    top: calc(var(--gridly-v2-filter-strip-bottom) + 20px) !important;
    right: calc(var(--gridly-v2-command-right, 12px) + 2px) !important;
    z-index: 10040;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] .gridly-v2-control-rail {
    top: calc(var(--gridly-v2-filter-strip-bottom) + 24px) !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack {
    right: calc(var(--gridly-v2-command-right, 10px) + 54px);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] .gridly-v2-brief-stack {
    gap: 14px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel {
    right: calc(12px + env(safe-area-inset-right, 0px) + 54px) !important;
    z-index: 9502;
  }
}

/* V862.16 — revert expanded control relocation; keep Brief reading path clear. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] .gridly-v2-control-rail {
    top: calc(var(--gridly-v2-filter-strip-bottom) + 20px) !important;
    right: calc(var(--gridly-v2-command-right, 12px) + 2px) !important;
    bottom: auto !important;
    left: auto !important;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-brief-stack,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] .gridly-v2-brief-stack {
    right: var(--gridly-v2-command-right, calc(10px + env(safe-area-inset-right, 0px)));
  }

  body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-location-awareness-panel,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] .gridly-v2-location-awareness-panel {
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  }

  body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-control-rail button:not([data-v2-control="zoom-in"]):not([data-v2-control="zoom-out"]),
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] .gridly-v2-control-rail button:not([data-v2-control="zoom-in"]):not([data-v2-control="zoom-out"]) {
    display: none !important;
  }
}

/* V862.17 — Expanded Brief focused reading state coordination. */
body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-control-rail {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(8px, 0, 0);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-bottom-dock {
  opacity: 0.88;
}

/* V862.18 — preserve Gridly Brief width across collapsed and expanded states. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack,
  body[data-layout-mode="portrait"].gridly-brief-collapsed #gridlyPortraitV2 .gridly-v2-brief-stack,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="collapsed"] .gridly-v2-brief-stack,
  body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-brief-stack,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] .gridly-v2-brief-stack {
    right: var(--gridly-v2-command-right, calc(10px + env(safe-area-inset-right, 0px)));
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack .gridly-brief-foundation-handle,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack .gridly-brief-interaction-panel {
    box-sizing: border-box;
    justify-self: stretch;
    inline-size: 100%;
    max-inline-size: none;
  }
}

/* V862.19 — small portrait map-control rail offset below Brief filters. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-collapsed #gridlyPortraitV2 .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="collapsed"] .gridly-v2-control-rail {
    top: calc(var(--gridly-v2-filter-strip-bottom) + 28px) !important;
  }

  body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] .gridly-v2-control-rail {
    top: calc(var(--gridly-v2-filter-strip-bottom) + 32px) !important;
  }
}

/* V863 — Portrait spatial harmony ownership rules. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 {
    --gridly-v2-map-canvas-breathing-gap: 18px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack *,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-interaction-panel,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-interaction-panel * {
    box-sizing: border-box;
    max-inline-size: 100%;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack {
    inline-size: auto;
    max-inline-size: calc(100vw - var(--gridly-v2-command-left, calc(10px + env(safe-area-inset-left, 0px))) - var(--gridly-v2-command-right, calc(10px + env(safe-area-inset-right, 0px))));
    overflow: visible;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-interaction-panel {
    inline-size: 100%;
    overflow-x: clip;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-hero,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-flow,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-section,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-travel-card,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-travel-copy,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-outlook-row {
    min-inline-size: 0;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-greeting,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-location,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-outlook,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-travel-status,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-travel-support,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-weather-summary {
    overflow-wrap: anywhere;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-collapsed #gridlyPortraitV2 .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="collapsed"] .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] .gridly-v2-control-rail {
    top: calc(var(--gridly-v2-filter-strip-bottom) + var(--gridly-v2-map-canvas-breathing-gap)) !important;
    right: var(--gridly-v2-command-right, calc(10px + env(safe-area-inset-right, 0px))) !important;
    bottom: auto !important;
    left: auto !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-control-rail button:not([data-v2-control="zoom-in"]):not([data-v2-control="zoom-out"]),
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] .gridly-v2-control-rail button:not([data-v2-control="zoom-in"]):not([data-v2-control="zoom-out"]) {
    display: grid !important;
  }
}

/* =========================================================
   V863.1 — Final Targeted Gridly Brief Polish
   Purpose:
   - Keep map controls inside the map canvas, below filter strip
   - Replace emoji-style Brief outlook icons with Gridly-standard badges
   - Preserve Brief containment
   ========================================================= */

/* Brief containment: children cannot visually exceed the dark card */
.gridly-brief-expanded,
.gridly-brief-expanded *,
.gridly-brief-panel,
.gridly-brief-panel *,
.gridly-brief-content,
.gridly-brief-content * {
  box-sizing: border-box;
}

.gridly-brief-expanded,
.gridly-brief-panel,
.gridly-brief-content {
  max-width: 100%;
  overflow-x: hidden;
}

/* Replace cheap/emoji outlook icons with Gridly-standard cyan badges */
.gridly-brief-outlook-icon {
  position: relative;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(35, 245, 222, 0.95) 0 2.5px, transparent 3px),
    linear-gradient(135deg, rgba(14, 238, 218, 0.22), rgba(60, 160, 255, 0.10)) !important;
  border: 1px solid rgba(35, 245, 222, 0.48) !important;
  box-shadow: 0 0 10px rgba(35, 245, 222, 0.18) !important;
}

.gridly-brief-outlook-icon::before,
.gridly-brief-outlook-icon::after {
  content: none !important;
}

/* Make outlook rows feel premium instead of emoji/bullet-like */
.gridly-brief-outlook-row {
  align-items: center !important;
  gap: 9px !important;
  min-height: 30px !important;
  padding: 7px 10px !important;
  border-color: rgba(79, 221, 232, 0.14) !important;
  background: linear-gradient(180deg, rgba(14, 35, 54, 0.72), rgba(8, 22, 36, 0.62)) !important;
}

.gridly-brief-outlook-row,
.gridly-brief-outlook-row * {
  max-width: 100%;
}

.gridly-brief-outlook-text,
.gridly-brief-outlook-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Map controls belong to the map canvas, not the filter strip */
.gridly-v2-control-rail {
  right: 10px !important;
  top: 54px !important;
  transform: none !important;
  z-index: 540 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  max-width: 40px !important;
}

/* Keep buttons compact and clearly tappable */
.gridly-v2-control-rail button,
.gridly-v2-control-rail .gridly-v2-map-control,
.gridly-v2-control-rail [role="button"] {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  border-radius: 12px !important;
}

/* Expanded Brief: controls stay quiet and inside the map, slightly lower */
body.gridly-brief-expanded .gridly-v2-control-rail,
body.gridly-brief-is-expanded .gridly-v2-control-rail,
[data-gridly-brief-state="expanded"] .gridly-v2-control-rail {
  top: 58px !important;
  right: 10px !important;
  transform: none !important;
}

/* Do not let map controls visually attach to the filter strip */
.gridly-filter-strip,
.gridly-v2-filter-strip,
.gridly-portrait-filter-strip {
  z-index: 560 !important;
}


/* =========================================================
   V863.2 — Map Canvas Separation + Control Rail Final Offset
   ========================================================= */

/* Create a visible breathing band between filters and map */
.gridly-filter-strip,
.gridly-v2-filter-strip,
.gridly-portrait-filter-strip,
#gridlyV2FilterStrip,
#gridlyFilterStrip {
  margin-bottom: 12px !important;
}

/* Push map controls clearly into the map canvas, not touching filters */
.gridly-v2-control-rail {
  top: 76px !important;
  right: 10px !important;
  transform: none !important;
  z-index: 540 !important;
  max-width: 38px !important;
}

/* Expanded state needs a little more clearance */
body.gridly-brief-expanded .gridly-v2-control-rail,
body.gridly-brief-is-expanded .gridly-v2-control-rail,
[data-gridly-brief-state="expanded"] .gridly-v2-control-rail {
  top: 88px !important;
  right: 10px !important;
}

/* Keep rail buttons compact and visually Gridly-standard */
.gridly-v2-control-rail button,
.gridly-v2-control-rail .gridly-v2-map-control,
.gridly-v2-control-rail [role="button"] {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: 11px !important;
}

/* Keep Brief icons in the current cleaner Gridly style */
.gridly-brief-outlook-icon {
  font-size: 0 !important;
  color: transparent !important;
}


/* V864 — Portrait command-region ownership over actual runtime DOM. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack {
    left: var(--gridly-v2-command-left, calc(10px + env(safe-area-inset-left, 0px))) !important;
    right: var(--gridly-v2-command-right, calc(10px + env(safe-area-inset-right, 0px))) !important;
    display: grid;
    gap: 10px;
    inline-size: auto !important;
    max-inline-size: calc(100vw - var(--gridly-v2-command-left, calc(10px + env(safe-area-inset-left, 0px))) - var(--gridly-v2-command-right, calc(10px + env(safe-area-inset-right, 0px)))) !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack > .gridly-v2-awareness-brief-card,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack > .gridly-brief-foundation-handle,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack > .gridly-brief-interaction-panel,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack > .gridly-v2-segments {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch;
    box-sizing: border-box;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack > .gridly-v2-segments {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 5px;
    background: linear-gradient(180deg, rgba(5, 16, 30, 0.88), rgba(4, 11, 22, 0.82)) !important;
    border: 1px solid rgba(95, 178, 238, 0.22) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  }

  body[data-layout-mode="portrait"] .map-frame {
    position: relative;
  }

  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 540 !important;
    pointer-events: none;
  }

  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay > :not(.gridly-v2-control-rail) {
    display: none !important;
  }

  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-expanded .map-frame .map-tools-overlay .gridly-v2-control-rail {
    position: absolute !important;
    top: 18px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 545 !important;
    max-width: 38px !important;
  }

  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .gridly-v2-control-rail button {
    display: grid !important;
    place-items: center;
  }
}

/* V864.1 — keep Portrait V2 map controls visible when no runtime map overlay owns them. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 > .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 > .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] > .gridly-v2-control-rail {
    position: fixed !important;
    top: var(--gridly-v2-control-rail-top, 188px) !important;
    right: var(--gridly-v2-control-rail-right, calc(10px + env(safe-area-inset-right, 0px))) !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    width: 38px !important;
    max-width: 38px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 545 !important;
    overflow: visible !important;
  }
}

/* =========================================================
   V864.x — Minor Map Button Downshift
   Purpose: keep right-side map controls from covering the All filter.
   ========================================================= */

#gridlyPortraitV2 .gridly-v2-control-rail {
  top: 290px !important;
}

body.gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
body.gridly-brief-is-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
[data-gridly-brief-state="expanded"] #gridlyPortraitV2 .gridly-v2-control-rail {
  top: 515px !important;
}


/* =========================================================
   V864.x — Keep all map controls, visually offset rail below All
   ========================================================= */

#gridlyPortraitV2 .gridly-v2-control-rail {
  margin-top: 42px !important;
  transform: translateY(42px) !important;
}

body.gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
body.gridly-brief-is-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
[data-gridly-brief-state="expanded"] #gridlyPortraitV2 .gridly-v2-control-rail {
  margin-top: 42px !important;
  transform: translateY(42px) !important;
}


/* =========================================================
   V864.x — Final map control behavior
   Collapsed: keep all controls visible below All.
   Expanded: do not push controls downward into location context.
   ========================================================= */

#gridlyPortraitV2 .gridly-v2-control-rail {
  margin-top: 34px !important;
  transform: translateY(34px) !important;
}

body.gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
body.gridly-brief-is-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
[data-gridly-brief-state="expanded"] #gridlyPortraitV2 .gridly-v2-control-rail {
  margin-top: 0 !important;
  transform: translateY(0) !important;
  opacity: 0.45 !important;
}


/* =========================================================
   V864.x — Lock map control rail position across Brief states
   Purpose: no shifting between collapsed and expanded Brief.
   ========================================================= */

#gridlyPortraitV2 .gridly-v2-control-rail,
body.gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
body.gridly-brief-is-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
[data-gridly-brief-state="expanded"] #gridlyPortraitV2 .gridly-v2-control-rail,
[data-gridly-brief-state="collapsed"] #gridlyPortraitV2 .gridly-v2-control-rail {
  top: auto !important;
  right: 10px !important;
  margin-top: 34px !important;
  transform: translateY(34px) !important;
  opacity: 1 !important;
}


/* =========================================================
   V866 — Portrait Spatial Ownership
   Runtime owners: .gridly-v2-brief-stack, .gridly-v2-segments,
   .map-frame, .map-tools-overlay, .map-toolbar-main-row,
   .map-tools-section, .geo-filter-shell, .gridly-v2-control-rail.
   ========================================================= */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack > .gridly-v2-segments {
    position: static !important;
    isolation: isolate;
    z-index: 620 !important;
    margin-block: 0 10px !important;
  }

  body[data-layout-mode="portrait"] .map-frame {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    margin-top: 8px;
  }

  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 545 !important;
  }

  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .map-toolbar-main-row,
  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .map-toolbar-meta-row,
  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .map-tools-section,
  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .geo-filter-shell {
    display: none !important;
  }

  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-expanded .map-frame .map-tools-overlay .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] ~ .map-frame .map-tools-overlay .gridly-v2-control-rail {
    position: absolute !important;
    top: 18px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    width: 38px !important;
    max-width: 38px !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 550 !important;
  }

  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .gridly-v2-control-rail button {
    width: 38px !important;
    height: 38px !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 > .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 > .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] > .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="collapsed"] > .gridly-v2-control-rail {
    top: var(--gridly-v2-control-rail-top, 188px) !important;
    right: var(--gridly-v2-control-rail-right, 10px) !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* V866R — restore visible map-control ownership inside the map canvas. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-expanded .map-frame .map-tools-overlay .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-is-expanded .map-frame .map-tools-overlay .gridly-v2-control-rail {
    position: absolute !important;
    top: 18px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    inline-size: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    block-size: auto !important;
    min-height: 173px !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 560 !important;
  }

  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .gridly-v2-control-rail button,
  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .gridly-v2-control-rail .gridly-v2-map-control,
  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .gridly-v2-control-rail [role="button"] {
    display: grid !important;
    place-items: center;
    visibility: visible !important;
    opacity: 1 !important;
    inline-size: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    block-size: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    pointer-events: auto !important;
  }
}

/* V866S — add portrait breathing room between filter strip and map ownership region. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack > .gridly-v2-segments {
    margin-block-end: 18px !important;
  }

  body[data-layout-mode="portrait"] .map-frame {
    margin-block-start: 18px !important;
  }

  body[data-layout-mode="portrait"] .map-frame .map-tools-overlay .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-expanded .map-frame .map-tools-overlay .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-is-expanded .map-frame .map-tools-overlay .gridly-v2-control-rail {
    top: 22px !important;
  }
}

/* =========================================================
   V867 — Stable visual map-control ownership without DOM moves
   Purpose: keep the runtime-owned Portrait V2 control rail fixed,
   visible, reachable, and visually inside the map canvas.
   ========================================================= */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
  body[data-layout-mode="portrait"].gridly-brief-is-expanded #gridlyPortraitV2 .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="collapsed"] .gridly-v2-control-rail {
    position: fixed !important;
    top: var(--gridly-v2-control-rail-top, 188px) !important;
    right: var(--gridly-v2-control-rail-right, calc(10px + env(safe-area-inset-right, 0px))) !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    inline-size: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    block-size: auto !important;
    min-height: 173px !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    pointer-events: auto !important;
    z-index: 650 !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail .gridly-v2-map-control,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail [role="button"] {
    display: grid !important;
    place-items: center;
    inline-size: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    block-size: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* V869R — allow active top-awareness titles to wrap without clipping. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack > .gridly-v2-awareness-brief-card {
    align-content: start !important;
    min-height: 104px !important;
    max-height: none !important;
    overflow: visible !important;
    padding-block: 13px 12px !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card strong,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state] strong {
    display: block !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: clamp(17px, 4.65vw, 21px) !important;
    line-height: 1.12 !important;
  }
}

/* GRIDLY V873 — Home Screen Experience Polish (presentation-only). */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 {
    --gridly-v873-radius-lg: 20px;
    --gridly-v873-radius-md: 16px;
    --gridly-v873-touch: 44px;
    --gridly-v2-awareness-card-top: calc(var(--gridly-v2-header-top) + 50px);
    --gridly-v2-filter-strip-top: calc(var(--gridly-v2-header-top) + 158px);
    --gridly-v2-filter-strip-bottom: calc(var(--gridly-v2-header-top) + 204px);
    --gridly-v2-top-shield-height: calc(var(--gridly-v2-filter-strip-bottom) + 14px);
  }

  body[data-layout-mode="portrait"].gridly-v2-surface-containment #gridlyPortraitV2::before {
    background:
      radial-gradient(circle at 24% 0%, rgba(0, 245, 240, 0.11), transparent 32%),
      linear-gradient(180deg, rgba(2, 8, 18, 0.99) 0%, rgba(5, 16, 29, 0.96) 58%, rgba(2, 8, 18, 0.84) 100%);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar {
    min-height: 38px;
    border-radius: 17px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-watch span {
    font-size: 0.72rem;
    font-weight: 720;
    letter-spacing: 0.015em;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card {
    min-height: 104px;
    max-height: 126px;
    gap: 6px;
    padding: 15px 16px 14px;
    border-radius: var(--gridly-v873-radius-lg);
    border-color: rgba(0, 245, 240, 0.28);
    background:
      radial-gradient(circle at 88% 8%, rgba(77, 255, 214, 0.11), transparent 34%),
      radial-gradient(circle at 8% 2%, rgba(0, 245, 240, 0.13), transparent 38%),
      linear-gradient(158deg, rgba(8, 24, 39, 0.95), rgba(3, 12, 24, 0.97) 62%, rgba(2, 8, 18, 0.98));
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(247, 251, 255, 0.1), 0 0 24px rgba(0, 245, 240, 0.1);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card strong {
    max-width: 32ch;
    font-size: clamp(1rem, 4.55vw, 1.18rem);
    font-weight: 820;
    line-height: 1.08;
    letter-spacing: -0.026em;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card > span {
    max-width: 35ch;
    color: rgba(226, 241, 255, 0.76);
    font-size: 0.78rem;
    font-weight: 590;
    line-height: 1.32;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-trust-line {
    margin-top: 5px;
    color: rgba(164, 211, 244, 0.62);
    font-size: 0.61rem;
    font-weight: 650;
    letter-spacing: 0.045em;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-foundation-handle {
    min-height: var(--gridly-v873-touch);
    border-radius: var(--gridly-v873-radius-md);
    letter-spacing: 0.055em;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-interaction-panel {
    border-radius: var(--gridly-v873-radius-lg);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-hero,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-flow,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-section,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-travel-card {
    gap: 9px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-greeting,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-outlook,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-travel-status {
    letter-spacing: -0.012em;
    line-height: 1.22;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-section-label {
    color: rgba(0, 245, 240, 0.78);
    font-size: 0.61rem;
    font-weight: 820;
    letter-spacing: 0.105em;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-context,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-travel-support,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-weather {
    color: rgba(202, 220, 236, 0.72);
    line-height: 1.38;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
    gap: 5px;
    padding: 4px;
    border-radius: 17px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
    min-height: 36px;
    border-radius: 13px;
    font-size: 0.68rem;
    font-weight: 680;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail {
    gap: 9px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    gap: 4px;
    padding: 11px 13px;
    border-radius: var(--gridly-v873-radius-lg);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-title {
    font-size: 0.88rem;
    line-height: 1.16;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
    padding: 8px;
    gap: 8px;
    border-radius: 20px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
    min-height: 48px;
    border-radius: 15px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon {
    height: 50px;
    border-radius: 15px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-status-pill,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel {
    transition: transform 180ms ease, opacity 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  }
}

@media (max-width: 380px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 {
    --gridly-v2-filter-strip-top: calc(var(--gridly-v2-header-top) + 154px);
    --gridly-v2-filter-strip-bottom: calc(var(--gridly-v2-header-top) + 198px);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card {
    min-height: 100px;
    padding: 14px 14px 13px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
    min-height: 34px;
    font-size: 0.64rem;
  }
}

/* V874 — Alerts Experience Polish: presentation-only refinement for premium mobile scanning. */
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] {
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  max-height: min(72vh, 620px);
  padding: 15px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 18px 18px;
  border-color: rgba(180, 217, 255, 0.24);
  background:
    radial-gradient(circle at 18% 0%, rgba(75, 167, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(8, 18, 33, 0.98), rgba(5, 12, 23, 0.985));
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  animation: gridly-alerts-sheet-rise 220ms cubic-bezier(.2, .8, .2, 1) both;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] header {
  position: sticky;
  top: 0;
  z-index: 2;
  align-items: center;
  min-height: 48px;
  margin: -2px -2px 12px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(185, 214, 255, 0.1);
  background: linear-gradient(180deg, rgba(8, 18, 33, 0.98), rgba(8, 18, 33, 0.9));
  backdrop-filter: blur(14px);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] #gridlyPortraitV2SheetTitle {
  color: rgba(248, 252, 255, 0.98);
  font-size: 1.05rem;
  font-weight: 840;
  line-height: 1.16;
  letter-spacing: -0.015em;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] #gridlyPortraitV2SheetClose {
  min-width: 44px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(203, 226, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.075);
  color: rgba(239, 247, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] #gridlyPortraitV2SheetBody {
  max-height: calc(min(72vh, 620px) - 78px);
  padding: 0 1px calc(12px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 18px;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alerts-active {
  gap: 13px;
  padding: 0 1px 14px !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-intel-card,
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-row="true"] {
  gap: 12px !important;
  padding: 15px !important;
  margin-bottom: 0 !important;
  border-radius: 20px !important;
  border-color: rgba(181, 216, 245, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(22, 36, 54, 0.78), rgba(9, 18, 31, 0.72)) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-canonical-event-presentation="true"] {
  padding: 4px 2px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(185, 214, 255, 0.11) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The legacy alert card's first child is its icon. LP236 condition rows reuse the
   governed alert-row attribute, but their first child is full-width copy. */
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-row="true"] > div:first-child:not(.gridly-lp236-condition-body) {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  margin-top: 0 !important;
  border-color: rgba(255, 190, 105, 0.44) !important;
  background: rgba(255, 177, 74, 0.14) !important;
  box-shadow: 0 0 0 4px rgba(255, 177, 74, 0.055);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alerts-panel-heading="true"] {
  font-size: 1.08rem !important;
  font-weight: 860 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.018em !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-row="true"] strong,
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-title {
  overflow-wrap: anywhere;
  font-size: 1rem !important;
  line-height: 1.22 !important;
  letter-spacing: -0.012em !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-row="true"] strong + div,
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-subtitle,
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alerts-panel-heading-location="true"],
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alerts-panel-heading-evidence="true"] {
  overflow-wrap: anywhere;
  color: rgba(211, 226, 241, 0.82) !important;
  font-size: 0.82rem !important;
  line-height: 1.38 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-row="true"] small {
  display: block;
  margin-top: 1px;
  color: rgba(185, 207, 229, 0.72) !important;
  font-size: 0.78rem !important;
  font-weight: 620 !important;
  line-height: 1.34 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-expand="true"] {
  min-height: 46px;
  display: grid !important;
  place-items: center;
  border-radius: 16px !important;
  background: rgba(181, 216, 245, 0.055) !important;
}

@keyframes gridly-alerts-sheet-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] {
    animation: none;
  }
}

/* V875 — Alerts Information Hierarchy: presentation-only scan rhythm. */
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-row[data-gridly-alert-row="true"],
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .alert-item.intelligence-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-row[data-gridly-alert-row="true"] > div:first-child:not([class]),
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-row[data-gridly-alert-row="true"] > div:first-child[style*="width:18px"] {
  display: none !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-row[data-gridly-alert-row="true"] > div:last-child {
  min-width: 0 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-row[data-gridly-alert-row="true"] strong,
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .alert-item.intelligence-row strong,
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-title {
  display: block;
  margin: 0 !important;
  color: rgba(248, 252, 255, 0.98) !important;
  font-size: 1.02rem !important;
  font-weight: 860 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.018em !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-location-line,
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-location-line="true"] {
  margin: 1px 0 0 !important;
  color: rgba(218, 232, 245, 0.86) !important;
  font-size: 0.84rem !important;
  font-weight: 680 !important;
  line-height: 1.34 !important;
  overflow-wrap: anywhere;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-meta-line,
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-trust-line,
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-context-line {
  color: rgba(188, 210, 230, 0.72) !important;
  font-size: 0.76rem !important;
  font-weight: 640 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-meta-line {
  margin-top: 2px !important;
  color: rgba(151, 221, 255, 0.84) !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-trust-line {
  color: rgba(201, 220, 236, 0.7) !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-empty-state {
  padding: 18px 16px !important;
  text-align: left;
  border-style: dashed !important;
  background: linear-gradient(180deg, rgba(22, 42, 60, 0.58), rgba(10, 22, 35, 0.56)) !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-expand="true"] {
  color: rgba(218, 233, 247, 0.78) !important;
  font-size: 0.82rem !important;
  font-weight: 760 !important;
}

/* V876 — Alerts Card Architecture: compact presentation-only card architecture. */
body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] header {
  min-height: 54px;
  margin: -5px -4px 14px;
  padding: 8px 8px 12px 12px;
  border: 1px solid rgba(185, 214, 255, 0.1);
  border-radius: 20px 20px 16px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] #gridlyPortraitV2SheetTitle {
  padding-left: 2px;
  padding-right: 12px;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-row="true"] {
  padding: 13px 14px !important;
  border-radius: 18px !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alert-evidence-line {
  color: rgba(214, 229, 244, 0.78) !important;
  font-size: 0.76rem !important;
  font-weight: 720 !important;
  line-height: 1.3 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[data-active-sheet="alerts"] [data-gridly-alert-hidden="true"] {
  opacity: 0.76;
}

/* V879 — Community Pulse Banner: compact status surface above Know Before You Go. */
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack > .gridly-v2-awareness-brief-card[data-gridly-pulse-banner="true"] {
  min-height: 54px !important;
  max-height: 68px !important;
  gap: 2px !important;
  padding: 9px 12px !important;
  border-radius: 15px !important;
  border-color: rgba(118, 226, 255, 0.2) !important;
  background: linear-gradient(135deg, rgba(8, 22, 37, 0.82), rgba(4, 12, 24, 0.88)) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(247, 251, 255, 0.07) !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack > .gridly-v2-awareness-brief-card[data-gridly-pulse-banner="true"]::before,
body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack > .gridly-v2-awareness-brief-card[data-gridly-pulse-banner="true"]::after {
  display: none !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-gridly-pulse-banner="true"] strong {
  font-size: 0.88rem !important;
  line-height: 1.12 !important;
  font-weight: 780 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-gridly-pulse-banner="true"] > span {
  font-size: 0.72rem !important;
  line-height: 1.18 !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-gridly-pulse-banner="true"] .gridly-v2-awareness-trust-line {
  margin-top: 1px !important;
  font-size: 0.58rem !important;
  line-height: 1 !important;
  opacity: 0.62 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* V881R — Hard block stale Community Pulse top-status first paint. */
.gridly-v2-awareness-brief-card[data-gridly-first-paint-guard="placeholder"] {
  position: relative;
}
.gridly-v2-awareness-brief-card[data-gridly-first-paint-guard="placeholder"] > strong,
.gridly-v2-awareness-brief-card[data-gridly-first-paint-guard="placeholder"] > span {
  color: transparent !important;
  text-shadow: none !important;
}
.gridly-v2-awareness-brief-card[data-gridly-first-paint-guard="placeholder"]::before,
.gridly-v2-awareness-brief-card[data-gridly-first-paint-guard="placeholder"]::after {
  position: absolute;
  left: 12px;
  right: 12px;
  pointer-events: none;
}
.gridly-v2-awareness-brief-card[data-gridly-first-paint-guard="placeholder"]::before {
  content: "Loading community pulse...";
  top: 10px;
  color: #f2f8ff;
  font: inherit;
  font-weight: 800;
}
.gridly-v2-awareness-brief-card[data-gridly-first-paint-guard="placeholder"]::after {
  content: "Checking current local signals.";
  top: 32px;
  color: rgba(222,236,250,.84);
  font-size: .72rem;
  line-height: 1.25;
}

/* V882 — Reporting Experience Polish (presentation only) */
#gridlyHazardPanel.gridly-hazard-panel {
  padding: 14px 14px 12px;
}
#gridlyHazardPanel .hazard-panel-header {
  min-height: 48px;
  padding: 8px 12px;
  margin: -14px -14px 10px;
}
#gridlyHazardPanel .hazard-panel-header strong {
  font-size: 1rem;
  letter-spacing: 0.005em;
}
#gridlyHazardPanel.gridly-hazard-panel > p {
  margin: 0 0 12px;
  color: rgba(222, 237, 252, 0.84);
  font-size: 0.84rem;
}
#gridlyHazardPanel .hazard-choice-grid {
  gap: 9px;
  padding-bottom: 10px;
}
#gridlyHazardPanel .hazard-choice-grid button,
#gridlyHazardPanel .hazard-subtype-grid button {
  min-height: 46px;
  padding: 12px 13px;
  border-radius: 14px;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0.005em;
}
#gridlyHazardPanel .hazard-choice-grid button.selected,
#gridlyHazardPanel .hazard-subtype-grid button.selected,
#gridlyHazardPanel .hazard-subtype-grid button[aria-pressed="true"] {
  border-color: rgba(124, 211, 255, 0.82);
  background: rgba(58, 143, 206, 0.28);
  outline: 2px solid rgba(124, 211, 255, 0.26);
}
#gridlyHazardPanel .hazard-subtype-panel {
  margin-top: 10px;
  padding: 10px;
}
#gridlyHazardPanel .hazard-panel-placement-actions {
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
}
#gridlyHazardPanel .hazard-panel-placement-actions button,
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-report-ctas .primary-btn,
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-report-ctas .secondary-btn {
  min-height: 46px;
  border-radius: 14px;
  text-transform: none;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-report-picker {
  gap: 12px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-report-prompt {
  display: grid;
  gap: 3px;
  margin-bottom: 2px;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-report-prompt span {
  color: rgba(204, 224, 244, 0.8);
  font-size: 0.8rem;
  font-weight: 500;
}
body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBody .gridly-v2-report-action {
  min-height: 52px;
  padding: 14px 13px;
  border-radius: 15px;
}
#reportConfirmation.success,
#reportConfirmation.info,
#reportConfirmation.error {
  line-height: 1.35;
  border-radius: 14px;
}

/* V887 — Settings Experience Refinement */
.gridly-settings-sheet.settings-list-experience {
  gap: 10px;
}

.gridly-settings-sheet .settings-list-section {
  scroll-margin-top: 12px;
}

.gridly-settings-sheet .settings-list-summary {
  min-height: 60px;
}

.gridly-settings-sheet .settings-list-title {
  letter-spacing: -0.015em;
}

.gridly-settings-sheet .settings-list-meta {
  max-width: 100%;
}

.gridly-settings-sheet .settings-list-detail {
  gap: 11px;
}

.gridly-settings-sheet .settings-placeholder-note {
  margin: 0;
  line-height: 1.45;
}

.gridly-settings-sheet .settings-toggle-row,
.gridly-settings-sheet .settings-select-grid label,
.gridly-settings-sheet .settings-place-card,
.gridly-settings-sheet .gridly-v2-tile {
  min-height: 44px;
}

.gridly-settings-sheet .settings-toggle-row {
  padding-inline: 12px;
}

.gridly-settings-sheet .settings-toggle-row span,
.gridly-settings-sheet .settings-select-grid label {
  text-transform: none;
}

.gridly-settings-sheet .settings-notification-notice {
  border: 1px solid rgba(142, 239, 255, 0.16);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(142, 239, 255, 0.055);
}

.gridly-settings-sheet .settings-section-support .gridly-v2-tile,
.gridly-settings-sheet .settings-section-travel .settings-place-action {
  min-height: 44px;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-summary {
  min-height: 62px;
  padding-block: 11px;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-detail {
  gap: 10px;
  padding-bottom: 14px !important;
}

body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-toggle-row,
body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-select-grid label,
body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-place-card,
body[data-layout-mode="portrait"] #gridlyPortraitV2 #gridlyPortraitV2Sheet[data-active-sheet="settings"] .gridly-v2-tile {
  min-height: 46px;
}

/* =========================================================
   V890 — Mobile Map Thumb Navigation Fix
   Purpose: preserve one-thumb map pan/pinch by keeping portrait chrome
   hitboxes contained and allowing Leaflet to own direct map gestures.
   ========================================================= */
@media (max-width: 760px) and (orientation: portrait) {
  html,
  body,
  #map,
  #map .leaflet-container,
  #map .leaflet-map-pane,
  #map .leaflet-pane {
    overscroll-behavior: none;
  }

  body[data-layout-mode="portrait"] #map,
  body[data-layout-mode="portrait"] #map .leaflet-container,
  body[data-layout-mode="portrait"] #map .leaflet-map-pane,
  body[data-layout-mode="portrait"] #map .leaflet-pane,
  body[data-layout-mode="portrait"] #map .leaflet-tile-pane,
  body[data-layout-mode="portrait"] #map .leaflet-tile-container {
    touch-action: none;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 {
    pointer-events: none;
    touch-action: none;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-foundation-handle,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-interaction-panel,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-region,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock,
  body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet,
  body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBackdrop {
    pointer-events: auto;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail {
    inline-size: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 0 !important;
    pointer-events: none !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail button,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail .gridly-v2-map-control,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-control-rail [role="button"] {
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-region {
    pointer-events: none !important;
    touch-action: none;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2Sheet[hidden],
  body[data-layout-mode="portrait"] #gridlyPortraitV2SheetBackdrop[hidden] {
    pointer-events: none !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-control-container,
  body[data-layout-mode="portrait"] #map .leaflet-top,
  body[data-layout-mode="portrait"] #map .leaflet-bottom,
  body[data-layout-mode="portrait"] #map .gridly-mobile-control-rail {
    pointer-events: none !important;
  }

  body[data-layout-mode="portrait"] #map .leaflet-control,
  body[data-layout-mode="portrait"] #map .leaflet-control a,
  body[data-layout-mode="portrait"] #map .gridly-mobile-layer-menu,
  body[data-layout-mode="portrait"] #map .gridly-mobile-layer-menu button,
  body[data-layout-mode="portrait"] #map .leaflet-marker-icon,
  body[data-layout-mode="portrait"] #map .leaflet-interactive,
  body[data-layout-mode="portrait"] #map .leaflet-popup,
  body[data-layout-mode="portrait"] #map .leaflet-popup * {
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}

/* =========================================================
   V890R — Android Portrait Map Breathing Room
   Purpose: use dynamic viewport sizing and slightly slimmer portrait
   chrome so Android Chrome keeps more usable map surface without
   changing Home ownership, the layer button, dock, or V890 hitboxes.
   ========================================================= */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] {
    --gridly-v890r-viewport-height: 100vh;
    --gridly-v890r-viewport-height: 100svh;
    --gridly-v890r-viewport-height: 100dvh;
    --gridly-v890r-map-min-height: max(540px, calc(var(--gridly-visual-vh, var(--gridly-v890r-viewport-height)) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  }

  body[data-layout-mode="portrait"] #map,
  body[data-layout-mode="portrait"] .map-frame,
  body[data-layout-mode="portrait"] .map-card {
    min-height: var(--gridly-v890r-map-min-height) !important;
  }

  body[data-layout-mode="portrait"] #map {
    height: var(--gridly-visual-vh, var(--gridly-v890r-viewport-height)) !important;
    max-height: var(--gridly-visual-vh, var(--gridly-v890r-viewport-height)) !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 {
    --gridly-v890r-protected-systems-unchanged: true;
    --gridly-v890r-layer-button-preserved: true;
    --gridly-v2-top-fallback-gap: 8px;
    --gridly-v2-header-top: max(var(--gridly-v2-top-fallback-gap), calc(env(safe-area-inset-top, 0px) + 6px));
    --gridly-v2-awareness-card-top: calc(var(--gridly-v2-header-top) + 42px);
    --gridly-v2-filter-strip-top: calc(var(--gridly-v2-header-top) + 142px);
    --gridly-v2-filter-strip-bottom: calc(var(--gridly-v2-header-top) + 184px);
    --gridly-v2-top-shield-height: calc(var(--gridly-v2-filter-strip-bottom) + 8px);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar {
    min-height: 36px;
    padding-block: 6px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card {
    min-height: 96px !important;
    padding-block: 12px !important;
    gap: 5px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
    padding: 3px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
    min-height: 34px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    padding-block: 9px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 7px;
    gap: 7px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
    min-height: 46px;
  }
}

/* V895 — Brand Identity & Action System: presentation-only action hierarchy */
:root {
  --gridly-action-primary: var(--gridly-cyan, #00f5f0);
  --gridly-action-primary-hover: #44fffb;
  --gridly-action-primary-pressed: #00d7d2;
  --gridly-action-primary-text: #021216;
  --gridly-action-secondary-bg: rgba(8, 24, 39, 0.86);
  --gridly-action-secondary-hover: rgba(12, 35, 53, 0.94);
  --gridly-action-secondary-pressed: rgba(4, 16, 28, 0.96);
  --gridly-action-secondary-border: rgba(247, 251, 255, 0.16);
  --gridly-action-radius: 999px;
  --gridly-status-success: #3ddc84;
  --gridly-status-warning: var(--warning, #ffbf47);
  --gridly-status-critical: var(--danger, #ff5c3d);
  --accent: var(--gridly-action-primary);
}

.primary-btn,
.popup-report-btn:not(.is-success),
.mobile-dock-btn.report,
.mobile-dock-btn.route,
.gridly-v2-report-ctas .primary-btn,
.settings-pwa-install-button,
#manualReportBtn,
#quickClearBtn,
#mobileQuickReportBtn,
#routeWatchStartBtn,
#gridlyWelcomeNextBtn,
#gridlyWelcomeFinishBtn,
#saveRouteBtn,
#mobileSaveRouteBtn,
#saveSmartAlertsBtn,
#settingsSubmitFeedbackBtn {
  min-height: 44px;
  border: 1px solid rgba(179, 255, 253, 0.34);
  border-radius: var(--gridly-action-radius);
  background: linear-gradient(135deg, var(--gridly-action-primary), #39dff7) !important;
  color: var(--gridly-action-primary-text) !important;
  box-shadow: 0 12px 28px rgba(0, 245, 240, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.36);
  font-weight: 900;
  letter-spacing: 0.005em;
}

.secondary-btn,
.nav-btn,
.gridly-search-close-btn,
.gridly-search-clear-btn,
.gridly-surface-close,
#gridlyWelcomeSkipTopBtn,
#gridlyPortraitV2SheetClose,
.mobile-dock-btn.alerts,
.mobile-dock-btn.area,
.mobile-dock-btn.layers,
.mobile-bottom-nav-btn,
.rail-nav-btn,
.geo-filter-pill,
.legend-pill,
.search-result-btn,
.mobile-icon-btn,
.mobile-avatar-btn,
.mobile-location-chip {
  border-radius: var(--gridly-action-radius);
  background: var(--gridly-action-secondary-bg) !important;
  color: rgba(235, 246, 255, 0.92) !important;
  border: 1px solid var(--gridly-action-secondary-border) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  font-weight: 850;
}

@media (hover: hover) {
  .primary-btn:hover,
  .popup-report-btn:not(.is-success):hover,
  #manualReportBtn:hover,
  #quickClearBtn:hover,
  #mobileQuickReportBtn:hover,
  #routeWatchStartBtn:hover {
    background: linear-gradient(135deg, var(--gridly-action-primary-hover), #66e8ff) !important;
    border-color: rgba(209, 255, 254, 0.58);
    box-shadow: 0 16px 34px rgba(0, 245, 240, 0.34);
    transform: translateY(-2px);
  }

  .secondary-btn:hover,
  .nav-btn:hover,
  .gridly-surface-close:hover,
  .gridly-search-close-btn:hover,
  .gridly-search-clear-btn:hover,
  .geo-filter-pill:hover,
  .legend-pill:hover,
  .search-result-btn:hover {
    background: var(--gridly-action-secondary-hover) !important;
    border-color: rgba(0, 245, 240, 0.36) !important;
    color: #f7fbff !important;
  }
}

.primary-btn:active,
.popup-report-btn:not(.is-success):active,
#manualReportBtn:active,
#quickClearBtn:active,
#mobileQuickReportBtn:active,
#routeWatchStartBtn:active {
  background: linear-gradient(135deg, var(--gridly-action-primary-pressed), #22c8df) !important;
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 8px 20px rgba(0, 245, 240, 0.2);
}

.secondary-btn:active,
.nav-btn:active,
.gridly-surface-close:active,
.geo-filter-pill:active,
.legend-pill:active,
.search-result-btn:active {
  background: var(--gridly-action-secondary-pressed) !important;
  transform: translateY(1px) scale(0.99);
}

.primary-btn:disabled,
.secondary-btn:disabled,
.nav-btn:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
  filter: saturate(0.72);
  box-shadow: none;
}

.popup-report-btn.is-success,
#mobileQuickClearedBtn,
.alert-item.cleared,
.legend-pill.cleared,
.gridly-marker.cleared,
.gridly-marker.state-cleared,
.gridly-hazard-marker.state-cleared,
.gridly-hazard-marker[data-state="cleared"],
.route-status-card.cleared,
.manage-places-save-status[data-state="success"],
#reportConfirmation.success {
  --accent: var(--gridly-status-success);
}

.alert-item.delayed,
.legend-pill.delayed,
.route-status-card.delayed,
.route-watch-badge.route-amber {
  --accent: var(--gridly-status-warning);
}

.alert-item.blocked,
.legend-pill.blocked,
.gridly-marker.alert,
.gridly-hazard-marker[data-state="active"],
.route-watch-badge.route-red,
#reportConfirmation.error {
  --accent: var(--gridly-status-critical);
}

.mobile-report-mode-actions .secondary-btn.active,
.geo-filter-pill.selected,
.nav-btn.active,
.rail-nav-btn.active,
.mobile-bottom-nav-btn.active {
  background: rgba(0, 245, 240, 0.16) !important;
  color: #dffffe !important;
  border-color: rgba(0, 245, 240, 0.46) !important;
  box-shadow: 0 10px 24px rgba(0, 245, 240, 0.16);
}

/* V896 — Visual Quick Tour screenshot cards */
.gridly-v858-first-run-sheet:has([data-gridly-visual-quick-tour]) {
  width: min(560px, calc(100vw - 20px));
}

.gridly-v858-first-run-card:has([data-gridly-visual-quick-tour]) {
  padding-inline: clamp(16px, 4vw, 28px);
}

.gridly-v894c2-tour-cards[data-gridly-visual-quick-tour] {
  gap: 14px;
}

.gridly-v894c2-tour-card.gridly-v896-visual-tour-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border-color: rgba(158, 211, 249, 0.22);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px rgba(0, 0, 0, 0.18);
}

.gridly-v894c2-tour-card.gridly-v896-visual-tour-card h3 {
  font-size: clamp(1.08rem, 4vw, 1.22rem);
  letter-spacing: -0.02em;
}

.gridly-v896-shot-frame {
  position: relative;
  overflow: visible;
  inline-size: 100%;
}

.gridly-v894c2-tour-card.gridly-v896-visual-tour-card img {
  display: block;
  inline-size: 100%;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(64vh, 620px);
  object-fit: contain;
  object-position: center;
}

.gridly-v894c2-tour-card.gridly-v896-visual-tour-card p {
  grid-column: auto;
  color: rgba(226, 240, 252, 0.88) !important;
  font-size: 0.96rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 520px) {
  .gridly-v858-first-run-sheet:has([data-gridly-visual-quick-tour]) {
    width: min(100vw - 12px, 520px);
    max-width: calc(100vw - 12px);
  }

  .gridly-v858-first-run-card:has([data-gridly-visual-quick-tour]) {
    padding-inline: 12px;
  }

  .gridly-v894c2-tour-cards[data-gridly-visual-quick-tour] {
    gap: 12px;
  }

  .gridly-v894c2-tour-card.gridly-v896-visual-tour-card {
    padding: 8px;
    border-radius: 20px;
  }

  .gridly-v894c2-tour-card.gridly-v896-visual-tour-card img {
    max-height: min(60vh, 540px);
  }

}

/* V898 — Beta presentation refinement: keep awareness primary and quiet states intentional. */
.future-map-hero {
  opacity: 0.86;
}
.future-map-hero .future-route,
.future-map-hero .floating-route-status {
  opacity: 0.58;
}
.hero-command-card .route-status-card,
.desktop-route-watch-strip {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 42px rgba(2, 8, 18, 0.24);
}
.mobile-home-card.mobile-route-decision-card {
  border-color: rgba(67, 230, 160, 0.22);
}
.mobile-home-card.mobile-fast-report-card,
.gridly-alert-empty-state,
.alert-item:not(.intelligence-row) {
  background: linear-gradient(180deg, rgba(9, 24, 42, 0.94), rgba(5, 14, 26, 0.96));
  border-color: rgba(255, 255, 255, 0.10);
}
.gridly-v2-status-pill,
.gridly-brief-interaction-panel,
.settings-modal-card,
.mobile-native-surface-sheet,
.gridly-destination-impact-card {
  letter-spacing: -0.01em;
}
.gridly-v2-status-pill strong,
.gridly-brief-outlook,
.mobile-native-surface-card > strong,
.settings-list-title {
  line-height: 1.12;
}
.mobile-native-surface-card p,
.settings-placeholder-note,
.gridly-brief-context,
.gridly-brief-travel-support {
  line-height: 1.45;
}
body[data-layout-mode="portrait"] .future-map-hero,
body[data-layout-mode="portrait"] .desktop-route-watch-strip,
body[data-layout-mode="portrait"] .desktop-route-setup {
  display: none;
}
body[data-layout-mode="portrait"] .gridly-v2-segments {
  gap: 7px;
}
body[data-layout-mode="portrait"] .gridly-v2-segments button {
  min-height: 36px;
  font-weight: 800;
}

/* V904 — hierarchical awareness-area selector */
.settings-awareness-hierarchical {
  display: grid;
  gap: 12px;
  width: 100%;
}
.settings-awareness-select-label {
  display: grid;
  gap: 7px;
  color: rgba(232, 241, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 800;
}
.settings-awareness-select-label select {
  min-height: 46px;
  border: 1px solid rgba(142, 239, 255, 0.2);
  border-radius: 16px;
  background: rgba(6, 16, 32, 0.92);
  color: #f8fbff;
  font: inherit;
  font-size: 1rem;
  padding: 0 14px;
}
.settings-awareness-summary {
  margin: 0;
  color: rgba(67, 230, 160, 0.92);
  font-size: 0.9rem;
  font-weight: 800;
}

/* LP185.3 — consumer-first ZIP/town awareness selection. */
.settings-awareness-search,
.settings-awareness-search form,
.settings-awareness-search-result {
  display: grid;
  gap: 9px;
}
.settings-awareness-search {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(142, 239, 255, 0.16);
}
.settings-awareness-search form label {
  color: rgba(241, 247, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 800;
}
.settings-awareness-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}
.settings-awareness-search-row input {
  box-sizing: border-box;
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(142, 239, 255, 0.34);
  border-radius: 16px;
  background: rgba(5, 13, 28, 0.96);
  color: #f8fbff;
  font: inherit;
  font-size: 16px;
  padding: 0 14px;
}
.settings-awareness-search-row .primary-btn { min-height: 48px; }
.settings-awareness-search-result {
  padding: 13px;
  border: 1px solid rgba(67, 230, 160, 0.3);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(19, 62, 69, 0.5), rgba(6, 18, 34, 0.86));
}
.settings-awareness-search-result[hidden] { display: none !important; }
.settings-awareness-search-result > span,
.settings-awareness-search-status { color: rgba(220, 234, 249, 0.84); }
.settings-awareness-search-status { margin: 0; font-size: 0.86rem; line-height: 1.4; }
.settings-awareness-watch-btn { justify-self: start; margin-top: 3px; min-height: 44px; }
.settings-awareness-candidates { margin: 0; padding-left: 20px; color: #f4f9ff; }
.settings-manual-awareness-action { align-self: start; }

/* LP185.3B — search-first operational-inventory area picker. */
.settings-awareness-manual-picker {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}
.settings-awareness-manual-picker h3 { margin: 0; font-size: 0.78rem; letter-spacing: 0.11em; text-transform: uppercase; }
.settings-manual-search-helper { margin: -5px 0 1px; color: rgba(220, 234, 249, 0.76); font-size: 0.9rem; line-height: 1.45; }
.settings-awareness-manual-picker > label {
  display: grid;
  gap: 8px;
  color: rgba(241, 247, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 800;
}
.settings-awareness-manual-picker input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(142, 239, 255, 0.3);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(9, 22, 40, 0.98), rgba(5, 13, 28, 0.98));
  color: #f8fbff;
  font: inherit;
  font-size: 16px;
  padding: 0 16px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 8px 22px rgba(0, 0, 0, 0.12);
}
.settings-awareness-manual-picker input[type="search"]::placeholder { color: rgba(220, 234, 249, 0.52); }
.settings-awareness-manual-picker input[type="search"]:focus-visible { outline: 3px solid rgba(142, 239, 255, 0.22); outline-offset: 2px; border-color: rgba(142, 239, 255, 0.72); }
.settings-manual-results { display: grid; gap: 8px; min-width: 0; }
.settings-manual-results-label { color: rgba(220, 234, 249, 0.62); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.settings-manual-available-head,
.settings-manual-county-group > summary,
.settings-manual-pending { display: grid; gap: 4px; }
.settings-manual-available-head span,
.settings-manual-county-group > summary span,
.settings-manual-pending small { color: rgba(220, 234, 249, 0.72); font-size: 0.82rem; }
.settings-manual-county-list {
  display: grid;
  gap: 9px;
  max-height: min(42vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 3px 18px 1px;
}
.settings-manual-county-group {
  border: 1px solid rgba(142, 239, 255, 0.18);
  border-radius: 15px;
  background: rgba(6, 16, 32, 0.7);
  overflow: clip;
}
.settings-manual-county-group > summary {
  min-height: 48px;
  box-sizing: border-box;
  cursor: pointer;
  list-style-position: inside;
  padding: 9px 12px;
  font-weight: 850;
}
.settings-manual-area-results { display: grid; gap: 1px; border-top: 1px solid rgba(142, 239, 255, 0.12); }
.settings-manual-area-result {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 68px;
  border: 1px solid rgba(142, 239, 255, 0.16);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(12, 29, 49, 0.88), rgba(5, 14, 29, 0.92));
  color: #f8fbff;
  cursor: pointer;
  font: inherit;
  padding: 12px 14px;
  text-align: left;
}
.settings-manual-area-result span { font-weight: 850; }
.settings-manual-area-result small { color: rgba(220, 234, 249, 0.76); font-size: 0.84rem; }
.settings-manual-area-result:disabled { cursor: default; opacity: 1; }
.settings-manual-area-state { justify-self: start; border: 1px solid rgba(67, 230, 160, 0.28); border-radius: 999px; color: rgba(112, 241, 181, 0.96); font-size: 0.72rem; font-style: normal; font-weight: 850; padding: 3px 8px; }
.settings-manual-area-result.is-current { border-color: rgba(67, 230, 160, 0.28); }
.settings-manual-area-result.is-pending { border-color: rgba(67, 230, 160, 0.54); background: linear-gradient(145deg, rgba(25, 91, 99, 0.68), rgba(8, 33, 44, 0.9)); box-shadow: inset 3px 0 rgba(67, 230, 160, 0.9); }
.settings-manual-pending {
  border: 1px solid rgba(67, 230, 160, 0.32);
  border-radius: 15px;
  background: rgba(19, 62, 69, 0.48);
  padding: 12px;
}
.settings-manual-pending .primary-btn { justify-self: start; min-height: 44px; margin-top: 5px; }
.settings-manual-no-results { margin: 0; padding: 16px 12px; color: rgba(232, 241, 255, 0.84); }
.settings-manual-search-instruction { margin: 0; color: rgba(232, 241, 255, 0.84); line-height: 1.45; }
@media (max-width: 430px) {
  .settings-awareness-search-row { grid-template-columns: 1fr; }
  .settings-awareness-search-row .primary-btn { width: 100%; }
  .settings-manual-county-list { max-height: min(38vh, 360px); padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}

/* V904P — Gridly-native hierarchical awareness native-select polish. */
.settings-awareness-hierarchical,
.gridly-welcome-step .gridly-welcome-select-label {
  min-width: 0;
}

.settings-awareness-select-label,
.gridly-welcome-step .gridly-welcome-select-label {
  gap: 9px;
  line-height: 1.22;
}

.settings-awareness-select-label select.gridly-premium-select,
.gridly-welcome-select-label select.gridly-premium-select {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  border: 1px solid rgba(142, 239, 255, 0.34);
  border-radius: 18px;
  color: #f8fbff;
  background-color: rgba(5, 13, 28, 0.98);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(142, 239, 255, 0.96) 50%),
    linear-gradient(135deg, rgba(142, 239, 255, 0.96) 50%, transparent 50%),
    linear-gradient(180deg, rgba(31, 70, 112, 0.74), rgba(6, 17, 34, 0.98));
  background-position:
    calc(100% - 24px) 52%,
    calc(100% - 17px) 52%,
    0 0;
  background-size: 7px 7px, 7px 7px, 100% 100%;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 26px rgba(0, 0, 0, 0.22);
  color-scheme: dark;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 820;
  line-height: 1.25;
  overflow: hidden;
  padding: 0 46px 0 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-awareness-select-label select.gridly-premium-select:hover,
.gridly-welcome-select-label select.gridly-premium-select:hover {
  border-color: rgba(142, 239, 255, 0.58);
  background-color: rgba(7, 19, 38, 0.99);
}

.settings-awareness-select-label select.gridly-premium-select:focus,
.settings-awareness-select-label select.gridly-premium-select:focus-visible,
.gridly-welcome-select-label select.gridly-premium-select:focus,
.gridly-welcome-select-label select.gridly-premium-select:focus-visible {
  border-color: rgba(67, 230, 160, 0.76);
  box-shadow:
    0 0 0 3px rgba(67, 230, 160, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 14px 30px rgba(0, 0, 0, 0.28);
  outline: none;
}

.settings-awareness-select-label select.gridly-premium-select option,
.gridly-welcome-select-label select.gridly-premium-select option {
  color: #f8fbff;
  background: #081624;
  font-weight: 760;
}

.settings-awareness-select-label select.gridly-premium-select option:checked,
.gridly-welcome-select-label select.gridly-premium-select option:checked {
  background: #0f344d;
  color: #ffffff;
}

@media (max-width: 760px) and (orientation: portrait) {
  .settings-awareness-hierarchical {
    gap: 14px;
  }

  .settings-awareness-select-label select.gridly-premium-select,
  .gridly-welcome-select-label select.gridly-premium-select {
    min-height: 52px;
    font-size: 1rem;
  }
}

/* V911 — Evidence Experience: lightweight consumer support inside Know Before You Go. */
#gridlyPortraitV2 .gridly-evidence-experience {
  margin-top: 16px;
  border: 1px solid rgba(124, 255, 238, 0.24);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(7, 25, 42, 0.46), rgba(5, 17, 29, 0.34));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

#gridlyPortraitV2 .gridly-evidence-summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 15px;
  color: rgba(238, 252, 255, 0.96);
  font-size: 0.94rem;
  font-weight: 820;
  letter-spacing: -0.01em;
}

#gridlyPortraitV2 .gridly-evidence-summary::-webkit-details-marker {
  display: none;
}

#gridlyPortraitV2 .gridly-evidence-summary::after {
  content: "+";
  float: right;
  color: rgba(124, 255, 238, 0.86);
  font-weight: 900;
}

#gridlyPortraitV2 .gridly-evidence-experience[open] .gridly-evidence-summary::after {
  content: "–";
}

#gridlyPortraitV2 .gridly-evidence-list {
  display: grid;
  gap: 0;
  padding: 0 15px 14px;
  min-width: 0;
  overflow: visible;
}

#gridlyPortraitV2 .gridly-evidence-item {
  padding: 12px 0;
  border-top: 1px solid rgba(150, 235, 229, 0.18);
  min-width: 0;
  max-height: none;
  overflow: visible;
}

#gridlyPortraitV2 .gridly-evidence-item h4,
#gridlyPortraitV2 .gridly-evidence-item p,
#gridlyPortraitV2 .gridly-evidence-item small {
  margin: 0;
  max-height: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

#gridlyPortraitV2 .gridly-evidence-item h4 {
  color: rgba(156, 255, 231, 0.94);
  font-size: 0.78rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#gridlyPortraitV2 .gridly-evidence-item p {
  margin-top: 5px;
  color: rgba(247, 252, 255, 0.95);
  font-size: 0.94rem;
  font-weight: 740;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

#gridlyPortraitV2 .gridly-evidence-item small {
  display: block;
  margin-top: 4px;
  color: rgba(211, 229, 242, 0.78);
  font-size: 0.82rem;
  font-weight: 620;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

/* V911R2 — Evidence Experience mobile clipping fix.
   The Evidence Experience can add wrapped evidence copy after the Brief panel opens;
   keep the expanded Know Before You Go shell within its existing mobile footprint and
   let the briefing/evidence content scroll internally instead of pushing into the map. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2[data-gridly-brief-state="expanded"] {
    --gridly-brief-interaction-extra: clamp(300px, 39svh, 396px);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-interaction-panel[data-gridly-brief-expanded="true"] {
    max-height: min(58svh, 396px);
    overflow: hidden;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-flow {
    min-height: 0;
    max-height: clamp(188px, 31svh, 252px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-evidence-experience,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-evidence-list,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-evidence-item {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
}

/* LP002A — Travel Brief presentation refresh for expanded Know Before You Go. */
#gridlyPortraitV2 .gridly-brief-hero {
  display: none;
}

#gridlyPortraitV2 .gridly-travel-brief-header {
  display: grid;
  gap: 0;
}

#gridlyPortraitV2 .gridly-travel-brief-header .gridly-brief-context {
  display: none;
}

#gridlyPortraitV2 .gridly-travel-brief-list {
  display: grid;
  gap: 0;
  margin-top: 8px;
  border: 1px solid rgba(124, 255, 238, 0.15);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(8, 28, 45, 0.38), rgba(5, 17, 29, 0.22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

#gridlyPortraitV2 .gridly-travel-brief-item {
  display: grid;
  grid-template-columns: minmax(92px, 0.34fr) minmax(0, 1fr);
  grid-template-areas:
    "title lines"
    "source lines";
  align-items: start;
  column-gap: 12px;
  padding: 9px 12px;
}

#gridlyPortraitV2 .gridly-travel-brief-item + .gridly-travel-brief-item {
  border-top: 1px solid rgba(124, 255, 238, 0.11);
}

#gridlyPortraitV2 .gridly-travel-brief-item h4,
#gridlyPortraitV2 .gridly-travel-brief-item p,
#gridlyPortraitV2 .gridly-travel-brief-item small {
  margin: 0;
}

#gridlyPortraitV2 .gridly-travel-brief-item h4 {
  grid-area: title;
  color: rgba(156, 255, 231, 0.9);
  font-size: 0.68rem;
  font-weight: 860;
  letter-spacing: 0.085em;
  line-height: 1.25;
  text-transform: uppercase;
}

#gridlyPortraitV2 .gridly-travel-brief-source {
  grid-area: source;
  margin-top: 3px;
  color: rgba(189, 204, 224, 0.74);
  font-size: 0.62rem;
  font-weight: 680;
  line-height: 1.22;
}

#gridlyPortraitV2 .gridly-travel-brief-lines {
  grid-area: lines;
  display: grid;
  gap: 3px;
  min-width: 0;
}

#gridlyPortraitV2 .gridly-travel-brief-lines p {
  color: rgba(247, 252, 255, 0.94);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.24;
  overflow-wrap: anywhere;
}

/* LP061.1 — Driver Decision mobile presentation refinement. */
#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "lines";
  row-gap: 5px;
}

#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] .gridly-travel-brief-lines {
  display: block;
}

#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] .gridly-travel-brief-lines p + p {
  margin-top: 4px;
}

#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] [data-gridly-decision-role="interpretation"] {
  font-size: 1rem;
  font-weight: 840;
  line-height: 1.18;
  overflow-wrap: normal;
}

#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] [data-gridly-decision-role="reason"] {
  color: rgba(226, 238, 247, 0.9);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.28;
  overflow-wrap: normal;
}

#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] [data-gridly-decision-role="confidence"],
#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] [data-gridly-decision-role="freshness"] {
  display: inline;
  color: rgba(189, 204, 224, 0.82);
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.2;
  overflow-wrap: normal;
}

#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] [data-gridly-decision-role="confidence"]::after {
  content: " · ";
  color: rgba(124, 255, 238, 0.58);
}

/* LP064 — one compact, inspectable evidence pattern across decision surfaces. */
.gridly-unified-evidence {
  margin-top: 8px;
  border-top: 1px solid rgba(124, 255, 238, 0.13);
  color: rgba(235, 245, 252, 0.94);
}

.gridly-unified-evidence summary {
  padding: 9px 0 7px;
  color: rgba(156, 255, 231, 0.92);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1.25;
}

.gridly-unified-evidence-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.gridly-unified-evidence-item {
  display: grid;
  grid-template-columns: minmax(86px, 0.34fr) minmax(0, 1fr);
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(124, 255, 238, 0.09);
}

.gridly-unified-evidence-item dt,
.gridly-unified-evidence-item dd {
  margin: 0;
}

.gridly-unified-evidence-item dt {
  color: rgba(156, 255, 231, 0.82);
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0.035em;
  line-height: 1.25;
  text-transform: uppercase;
}

.gridly-unified-evidence-item dd {
  color: rgba(226, 238, 247, 0.9);
  font-size: 0.76rem;
  font-weight: 620;
  line-height: 1.3;
}

#gridlyPortraitV2 .gridly-travel-brief-list > .gridly-unified-evidence {
  margin: 0;
  padding: 0 12px 7px;
}

.community-pulse-surface > .gridly-unified-evidence,
.gridly-destination-impact-why > .gridly-unified-evidence {
  margin-top: 7px;
}

@media (max-width: 420px) {
  .gridly-unified-evidence-item {
    grid-template-columns: minmax(78px, 0.32fr) minmax(0, 1fr);
    gap: 8px;
  }
}

/* LP020 — Premium awareness popup and official roadway marker polish */
#map .leaflet-popup-content-wrapper { border-radius: 18px; }
#map .leaflet-popup-content { margin: 11px 13px; }
.gridly-popup.gridly-premium-popup,
.gridly-official-roadway-popup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 218px;
  max-width: 268px;
  color: #eaf2ff;
  line-height: 1.25;
}
.gridly-popup.gridly-premium-popup strong,
.gridly-official-roadway-popup strong {
  display: block;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 840;
  letter-spacing: 0.002em;
  margin: 0 18px 0 0;
}
.gridly-popup.gridly-premium-popup span,
.gridly-official-roadway-popup span {
  display: block;
  color: rgba(218, 230, 246, 0.94);
  font-size: 0.78rem;
  line-height: 1.28;
}
.gridly-popup.gridly-premium-popup .gridly-popup-location,
.gridly-official-roadway-popup .gridly-popup-location {
  color: #f8fbff;
  font-size: 0.86rem;
  font-weight: 720;
}
.gridly-popup.gridly-premium-popup .gridly-popup-meta,
.gridly-official-roadway-popup .gridly-popup-meta,
.gridly-official-roadway-popup .gridly-popup-freshness {
  color: rgba(189, 204, 224, 0.86);
  font-size: 0.72rem;
  font-weight: 620;
}
.gridly-popup.gridly-premium-popup .gridly-popup-trust {
  color: rgba(156, 255, 231, 0.82);
  font-size: 0.73rem;
  font-weight: 680;
}
.gridly-popup.gridly-premium-popup .popup-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.20);
}
.gridly-popup.gridly-premium-popup .popup-report-btn {
  min-height: 30px;
  border-radius: 10px;
  padding: 6px 7px;
  font-size: 0.66rem;
  letter-spacing: 0.01em;
  line-height: 1.05;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.gridly-official-roadway-popup {
  border-left: 0;
  padding: 2px 0 2px 11px;
  position: relative;
}
.gridly-official-roadway-popup::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #67e8f9, #2563eb);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.35);
}
.gridly-official-roadway-popup [data-gridly-official-popup-field="trustLine"] { color: rgba(147, 197, 253, 0.98); }
.gridly-official-roadway-popup [data-gridly-official-popup-field="trustLine"] + [data-gridly-official-popup-field="freshnessLine"] { margin-top: 1px; }
#map .gridly-official-roadway-marker-icon .gridly-official-roadway-marker {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px 8px 11px 11px !important;
  background: linear-gradient(180deg, #e0f2fe 0%, #38bdf8 46%, #0f4f83 100%) !important;
  border: 2px solid #f8fbff !important;
  box-shadow: 0 0 0 2px rgba(8, 20, 38, 0.62), 0 7px 15px rgba(14, 116, 144, 0.28) !important;
}
#map .gridly-official-roadway-marker-icon .gridly-official-roadway-marker::before {
  content: "i";
  position: absolute;
  inset: 4px 6px 6px;
  border-radius: 999px;
  color: #07304f;
  background: rgba(255,255,255,0.88);
  font-size: 12px;
  font-weight: 900;
  line-height: 14px;
  text-align: center;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* LP021 — Premium information architecture hierarchy */
.gridly-popup.gridly-premium-popup,
.gridly-official-roadway-popup {
  gap: 3px;
}
.gridly-popup.gridly-premium-popup strong,
.gridly-official-roadway-popup strong {
  font-size: 1.04rem;
  line-height: 1.18;
}
.gridly-popup.gridly-premium-popup .gridly-popup-location,
.gridly-official-roadway-popup .gridly-popup-location {
  margin-top: 1px;
  font-size: 0.88rem;
  line-height: 1.22;
}
.gridly-popup.gridly-premium-popup .gridly-popup-freshness,
.gridly-official-roadway-popup .gridly-popup-freshness,
.gridly-popup.gridly-premium-popup .gridly-popup-meta,
.gridly-official-roadway-popup .gridly-popup-meta {
  color: rgba(189, 204, 224, 0.78);
  font-size: 0.71rem;
  font-weight: 610;
}
.gridly-popup.gridly-premium-popup .gridly-popup-trust {
  margin-top: 1px;
  color: rgba(156, 255, 231, 0.76);
}
.gridly-popup.gridly-premium-popup .popup-report-grid {
  margin-top: 5px;
  padding-top: 7px;
}
.gridly-popup.gridly-premium-popup .popup-report-btn {
  opacity: 0.9;
  font-weight: 760;
}
.gridly-alert-row .gridly-alert-situation-summary {
  display: none;
}

.gridly-alert-show-on-map {
  justify-self: start;
  margin-top: 6px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(126, 190, 255, 0.65);
  border-radius: 999px;
  background: rgba(53, 133, 214, 0.18);
  color: #dceeff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.gridly-alert-show-on-map:hover,
.gridly-alert-show-on-map:focus-visible {
  background: rgba(53, 133, 214, 0.34);
  outline: 2px solid rgba(158, 211, 255, 0.9);
  outline-offset: 2px;
}

/* LP021 repair — responsive popup actions at narrow mobile widths. */
.gridly-popup.gridly-premium-popup .popup-report-grid {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  align-items: stretch;
}
.gridly-popup.gridly-premium-popup .popup-report-btn {
  min-width: 0;
  min-height: 36px;
  white-space: normal;
  overflow-wrap: normal;
  text-transform: none;
  font-size: 0.76rem;
  line-height: 1.15;
  padding: 8px 9px;
}
@media (max-width: 380px) {
  #map .leaflet-popup-content .gridly-popup.gridly-premium-popup .popup-report-grid {
    grid-template-columns: 1fr;
  }
}

/* LP045 — Official DriveTexas markers reuse the Gridly production marker family. */
#map .leaflet-marker-icon.gridly-official-roadway-marker-icon {
  width: 64px !important;
  height: 64px !important;
}

#map .leaflet-marker-icon.gridly-official-roadway-marker-icon .gridly-official-roadway-marker.has-production-marker {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px;
  min-height: 64px;
  position: relative;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block;
}

#map .leaflet-marker-icon.gridly-official-roadway-marker-icon .gridly-official-roadway-marker.has-production-marker::before {
  content: "";
  position: absolute;
  inset: 9px 9px 12px;
  border-radius: 999px;
  border: 2px solid rgba(56, 189, 248, 0.82);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.42), 0 0 18px rgba(56, 189, 248, 0.28);
  pointer-events: none;
  z-index: 1;
}

#map .leaflet-marker-icon.gridly-official-roadway-marker-icon .gridly-official-roadway-marker .gridly-production-marker-img {
  position: relative;
  z-index: 2;
}

#map .leaflet-marker-icon.gridly-official-roadway-marker-icon .gridly-official-roadway-badge {
  position: absolute;
  right: 8px;
  bottom: 9px;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ecfeff, #67e8f9);
  border: 1px solid rgba(15, 23, 42, 0.34);
  color: #0f3f46;
  font: 900 9px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 7px rgba(2, 8, 23, 0.34);
}

#map .leaflet-marker-icon.gridly-alert-focused-marker.gridly-official-roadway-marker-icon .gridly-official-roadway-marker.has-production-marker,
#map .leaflet-marker-icon[data-gridly-selected="true"].gridly-official-roadway-marker-icon .gridly-official-roadway-marker.has-production-marker {
  animation: gridlyOfficialMarkerFocusPulse 1.35s ease-out 1;
}

@keyframes gridlyOfficialMarkerFocusPulse {
  0% { filter: drop-shadow(0 0 0 rgba(103, 232, 249, 0)); transform: scale(1); }
  38% { filter: drop-shadow(0 0 20px rgba(103, 232, 249, 0.82)); transform: scale(1.08); }
  100% { filter: drop-shadow(0 0 0 rgba(103, 232, 249, 0)); transform: scale(1); }
}

/* LP050 — guided first-run paging experience */
.gridly-v858-first-run-card {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.gridly-v858-first-run-card:has([data-gridly-visual-quick-tour]) {
  padding-block: clamp(14px, 3.4vw, 24px) calc(8px + env(safe-area-inset-bottom, 0px));
}

.gridly-v950-onboarding-pager {
  overflow: hidden;
  gap: 8px;
  padding: 0 0 calc(4px + env(safe-area-inset-bottom, 0px));
}

.gridly-v950-page-track {
  display: flex;
  gap: 0;
  min-height: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.gridly-v950-page-track::-webkit-scrollbar {
  display: none;
}

.gridly-v950-tour-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: clamp(10px, 2.6vw, 14px);
  min-height: 0;
  padding: clamp(12px, 3.4vw, 18px);
  border-radius: 26px;
  scroll-snap-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.gridly-v950-tour-page[aria-hidden="true"] {
  pointer-events: none;
}

.gridly-v950-page-copy {
  display: grid;
  gap: 8px;
  text-align: center;
}

.gridly-v950-tour-page h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 8vw, 2.7rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.gridly-v950-tour-page p,
.gridly-v950-tour-page .gridly-v859-personalization-message {
  grid-column: auto;
  max-width: 28rem;
  margin-inline: auto;
  font-size: 1rem !important;
}

.gridly-v950-tour-page .gridly-v896-shot-frame {
  display: grid;
  place-items: center;
  min-height: 0;
  max-height: min(54vh, 500px);
  overflow: hidden;
  border: 1px solid rgba(158, 211, 249, 0.18);
  border-radius: 24px;
  background: rgba(3, 10, 19, 0.42);
}

.gridly-v950-tour-page .gridly-v896-shot-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: min(54vh, 500px);
  object-fit: contain;
}

.gridly-v950-welcome-page {
  min-height: 100%;
}

.gridly-v950-setup-page {
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gridly-v950-page-indicators {
  display: flex;
  justify-content: center;
  gap: 7px;
  min-height: 16px;
  margin-top: 0;
}

.gridly-v950-page-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(222, 236, 249, 0.36);
}

.gridly-v950-page-dot.is-active {
  width: 22px;
  background: #8ee6ff;
  box-shadow: 0 0 14px rgba(142, 230, 255, 0.5);
}

.gridly-v950-page-actions {
  grid-template-columns: 0.85fr 0.85fr 1.3fr;
  align-items: center;
  align-self: end;
  gap: 8px;
  padding-top: 2px;
}

.gridly-v950-page-actions [hidden] {
  display: none !important;
}

.gridly-v950-page-actions .gridly-v894c2-finish-btn:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 520px) {
  .gridly-v858-first-run-card:has([data-gridly-visual-quick-tour]) {
    padding: 14px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .gridly-v950-onboarding-pager {
    gap: 7px;
    padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
  }

  .gridly-v950-tour-page {
    gap: 10px;
    padding: 12px;
  }

  .gridly-v950-tour-page .gridly-v896-shot-frame,
  .gridly-v950-tour-page .gridly-v896-shot-frame img {
    max-height: min(50vh, 440px);
  }

  .gridly-v950-page-actions {
    grid-template-columns: 0.8fr 0.8fr 1.2fr;
    gap: 7px;
  }
}

/* LP050.2 — immersive first-run onboarding presentation */
.gridly-v950-onboarding-pager {
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  gap: 4px;
}

.gridly-v950-tour-page {
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 2vh, 12px);
  padding: clamp(8px, 2.5vw, 14px) clamp(4px, 1.8vw, 10px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gridly-v950-welcome-page {
  align-content: center;
  place-items: center;
  text-align: center;
  gap: clamp(8px, 2vh, 14px);
  padding-inline: clamp(20px, 6vw, 32px);
  padding-block: clamp(4px, 1.5vh, 10px);
}

.gridly-v950-welcome-logo {
  display: grid;
  place-items: center;
  width: min(72vw, 230px);
  margin: 0 auto clamp(2px, 0.8vh, 6px);
}

.gridly-v950-welcome-logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.28));
}

.gridly-v950-welcome-page .gridly-v950-page-copy {
  gap: 8px;
}

.gridly-v950-welcome-page .gridly-v858-first-run-eyebrow {
  margin-bottom: -2px;
}

.gridly-v950-welcome-page h2,
.gridly-v950-setup-page h3 {
  font-size: clamp(2.25rem, 9.5vw, 3.05rem);
}

.gridly-v950-feature-page .gridly-v950-page-copy {
  align-self: end;
  gap: 6px;
  padding-inline: clamp(8px, 3vw, 18px);
}

.gridly-v950-tour-page h3 {
  font-size: clamp(1.66rem, 6.6vw, 2.45rem);
  line-height: 0.98;
}

.gridly-v950-tour-page p,
.gridly-v950-tour-page .gridly-v859-personalization-message {
  max-width: 23rem;
  font-size: 0.96rem !important;
  line-height: 1.34 !important;
}

.gridly-v950-tour-page .gridly-v896-shot-frame {
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  place-items: stretch;
  min-height: min(68vh, 660px);
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gridly-v950-tour-page .gridly-v896-shot-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: 50% 50%;
  filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.44));
}

.gridly-v950-tour-page[data-gridly-visual-tour-card="awareness"] .gridly-v896-shot-frame img { object-position: 50% 50%; }
.gridly-v950-tour-page[data-gridly-visual-tour-card="map"] .gridly-v896-shot-frame img { object-position: 50% 50%; }
.gridly-v950-tour-page[data-gridly-visual-tour-card="alerts"] .gridly-v896-shot-frame img { object-position: 50% 50%; }
.gridly-v950-tour-page[data-gridly-visual-tour-card="report"] .gridly-v896-shot-frame img { object-position: 50% 50%; }
.gridly-v950-tour-page[data-gridly-visual-tour-card="settings"] .gridly-v896-shot-frame img { object-position: 50% 50%; }

.gridly-v950-setup-page {
  align-content: center;
  grid-template-rows: auto auto;
}

.gridly-v950-setup-page .gridly-v858-location-panel {
  align-self: start;
  border: 0;
  background: rgba(3, 10, 19, 0.28);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 520px) {
  .gridly-v950-tour-page {
    gap: 7px;
    padding: 8px 2px;
  }

  .gridly-v950-tour-page .gridly-v896-shot-frame {
    min-height: min(69vh, 620px);
  }

  .gridly-v950-welcome-logo {
    width: min(70vw, 220px);
  }

  .gridly-v950-page-actions {
    padding-inline: 2px;
  }
}

.gridly-v950-page-actions .gridly-v894c2-start-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* LP050.5 — final onboarding art direction: remove presentation weight */
.gridly-v858-first-run-sheet:has([data-gridly-visual-quick-tour]) {
  width: min(560px, calc(100vw - 12px));
  max-height: min(96dvh, calc(100svh - 10px));
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.gridly-v858-first-run-card:has([data-gridly-visual-quick-tour]) {
  height: min(96dvh, calc(100svh - 10px));
  max-height: min(96dvh, calc(100svh - 10px));
  padding: clamp(10px, 2.8vw, 18px) clamp(12px, 3.5vw, 22px) calc(8px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  box-shadow: none;
}

.gridly-v858-first-run-card:has([data-gridly-visual-quick-tour])::after {
  content: none;
}

.gridly-v950-onboarding-pager {
  gap: 6px;
}

.gridly-v950-tour-page {
  gap: clamp(10px, 2.2vh, 16px);
  padding: clamp(8px, 2.2vw, 14px) clamp(4px, 1.4vw, 8px);
  background: transparent;
  box-shadow: none;
}

.gridly-v950-welcome-page {
  gap: clamp(6px, 1.8vh, 12px);
  padding-inline: clamp(18px, 6vw, 30px);
}

.gridly-v950-welcome-logo {
  width: min(64vw, 210px);
  margin-bottom: clamp(0px, 0.5vh, 4px);
}

.gridly-v950-welcome-logo img {
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.22));
}

.gridly-v950-welcome-page .gridly-v950-page-copy {
  gap: 7px;
}

.gridly-v950-feature-page .gridly-v950-page-copy {
  align-self: end;
  gap: 5px;
  padding-inline: clamp(10px, 4vw, 24px);
}

.gridly-v950-tour-page h3 {
  font-size: clamp(1.55rem, 6vw, 2.2rem);
  letter-spacing: -0.045em;
}

.gridly-v950-tour-page p,
.gridly-v950-tour-page .gridly-v859-personalization-message {
  max-width: 20rem;
  color: rgba(226, 239, 255, 0.78) !important;
  font-size: 0.94rem !important;
  line-height: 1.34 !important;
}

.gridly-v950-tour-page .gridly-v896-shot-frame {
  place-items: center;
  min-height: min(66vh, 640px);
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.gridly-v950-tour-page .gridly-v896-shot-frame img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.34));
}

.gridly-v950-page-indicators {
  margin-top: 1px;
}

.gridly-v950-page-actions {
  padding-top: 0;
}

@media (max-width: 520px) {
  .gridly-v858-first-run-sheet:has([data-gridly-visual-quick-tour]) {
    width: min(100vw - 8px, 520px);
    max-width: calc(100vw - 8px);
  }

  .gridly-v858-first-run-card:has([data-gridly-visual-quick-tour]) {
    padding: 10px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .gridly-v950-tour-page {
    padding: 7px 0;
  }

  .gridly-v950-welcome-logo {
    width: min(62vw, 196px);
  }

  .gridly-v950-tour-page .gridly-v896-shot-frame {
    min-height: min(67vh, 610px);
  }
}

/* LP066 — Unified consumer experience polish.
   Presentation-only hierarchy, density, motion, and portrait ergonomics. */
:root {
  --gridly-polish-radius: 18px;
  --gridly-polish-divider: rgba(124, 255, 238, 0.12);
  --gridly-polish-meta: rgba(189, 204, 224, 0.78);
  --gridly-polish-motion: 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

#gridlyPortraitV2 .gridly-v2-status-pill strong,
#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] [data-gridly-decision-role="interpretation"],
.gridly-destination-impact-head h2 {
  letter-spacing: -0.025em;
  text-wrap: balance;
}

#gridlyPortraitV2 .gridly-v2-awareness-brief-card {
  gap: 3px;
}

#gridlyPortraitV2 .gridly-v2-awareness-trust-line,
#gridlyPortraitV2 .gridly-travel-brief-source,
.gridly-destination-impact-significance em,
.gridly-current-route-details span {
  color: var(--gridly-polish-meta);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

#gridlyPortraitV2 .gridly-travel-brief-list {
  margin-top: 6px;
  border-radius: var(--gridly-polish-radius);
}

#gridlyPortraitV2 .gridly-travel-brief-item {
  column-gap: 10px;
  padding: 8px 12px;
}

#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] {
  padding-block: 11px 10px;
  row-gap: 4px;
  background: linear-gradient(110deg, rgba(28, 111, 125, 0.13), transparent 68%);
}

#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] [data-gridly-decision-role="interpretation"] {
  font-size: 1.04rem;
  line-height: 1.2;
}

#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] [data-gridly-decision-role="reason"] {
  max-width: 38rem;
  line-height: 1.34;
}

#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] [data-gridly-decision-role="confidence"],
#gridlyPortraitV2 .gridly-travel-brief-item[data-gridly-travel-brief-section="driver-decision"] [data-gridly-decision-role="freshness"] {
  color: var(--gridly-polish-meta);
  font-size: 0.7rem;
  line-height: 1.35;
}

.gridly-unified-evidence summary {
  min-height: 38px;
  padding: 9px 0 6px;
  transition: color var(--gridly-polish-motion), opacity var(--gridly-polish-motion);
}

.gridly-unified-evidence[open] summary {
  color: rgba(190, 255, 239, 0.98);
}

.gridly-unified-evidence[open] .gridly-unified-evidence-list {
  animation: gridlyPolishReveal var(--gridly-polish-motion) both;
}

.gridly-destination-impact-pane:not([hidden]) .gridly-destination-impact-backdrop {
  animation: gridlyPolishFade 180ms ease-out both;
}

.gridly-destination-impact-pane:not([hidden]) .gridly-destination-impact-card,
#gridlyPortraitV2 .gridly-v2-sheet:not([hidden]) {
  animation: gridlyPolishSheetIn var(--gridly-polish-motion) both;
  transform-origin: bottom center;
}

.gridly-destination-impact-card {
  max-height: min(86dvh, 620px);
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 255, 238, 0.28) transparent;
}

.gridly-destination-impact-head {
  margin-bottom: 7px;
}

.gridly-destination-impact-head h2 {
  font-size: clamp(1.2rem, 5vw, 1.38rem);
  line-height: 1.16;
}

.gridly-destination-impact-subtitle {
  margin-bottom: 11px;
  font-size: 0.88rem;
  line-height: 1.36;
}

.gridly-current-route-details {
  gap: 2px;
  margin: 0 0 9px;
  border-radius: 14px;
  padding: 9px 11px;
}

.gridly-current-route-details strong {
  font-size: 0.91rem;
}

.gridly-destination-impact-body {
  gap: 7px;
  border-radius: var(--gridly-polish-radius);
  padding: 10px 11px;
}

.gridly-destination-impact-significance {
  gap: 2px 8px;
  border: 0;
  border-bottom: 1px solid var(--gridly-polish-divider);
  border-radius: 0;
  padding: 0 0 9px;
  background: transparent;
}

.gridly-destination-impact-significance strong {
  font-size: 1.05rem;
}

.gridly-destination-impact-significance em {
  border: 0;
  padding: 4px 0;
  background: transparent;
  font-size: 0.69rem;
}

/* The interpretation and reason already carry the route outcome; keep the
   legacy summary in the DOM for compatibility without repeating it visually. */
.gridly-destination-impact-body > #gridlyDestinationImpactPaneSummary {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gridly-destination-impact-why,
.gridly-destination-impact-quiet-note,
.gridly-destination-impact-reasons li {
  font-size: 0.82rem;
  line-height: 1.34;
}

.gridly-destination-impact-reasons {
  gap: 5px;
  padding-left: 18px;
}

.gridly-destination-impact-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.gridly-destination-impact-actions .secondary-btn {
  min-height: 44px;
  padding: 9px 10px;
}

@keyframes gridlyPolishFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gridlyPolishSheetIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes gridlyPolishReveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 420px) and (orientation: portrait) {
  .gridly-destination-impact-pane {
    align-items: end;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  }

  .gridly-destination-impact-card {
    width: 100%;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)));
    border-radius: 24px 24px 18px 18px;
    padding: 14px;
  }

  .gridly-destination-impact-actions {
    position: sticky;
    bottom: -14px;
    z-index: 2;
    margin-inline: -4px;
    padding: 7px 4px calc(4px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(6, 13, 25, 0), rgba(6, 13, 25, 0.98) 24%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gridly-destination-impact-pane:not([hidden]) .gridly-destination-impact-backdrop,
  .gridly-destination-impact-pane:not([hidden]) .gridly-destination-impact-card,
  #gridlyPortraitV2 .gridly-v2-sheet:not([hidden]),
  .gridly-unified-evidence[open] .gridly-unified-evidence-list {
    animation: none;
  }

  .gridly-unified-evidence summary {
    transition: none;
  }
}

/* LP095.1 — Keep the official awareness story connected without changing shared popups. */
.gridly-official-roadway-popup { gap: 0; }
.gridly-official-roadway-popup [data-gridly-official-popup-field="description"] { margin-top: 2px; }
.gridly-official-roadway-popup [data-gridly-official-popup-field="guidanceLabel"] { margin-top: 3px; }
.gridly-official-roadway-popup [data-gridly-official-popup-field="guidanceText"] { margin-top: 1px; }
.gridly-official-roadway-popup [data-gridly-official-popup-field="trustLine"] { margin-top: 4px; }

/* LP097 consumer-safe destination classification. */
.gridly-search-result-type {
  display: block;
  margin-top: 2px;
  color: var(--text-muted, #667085);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

/* LP185.2 — real-iPhone portrait shell density, Pass 1.
   Presentation-only: reclaim map canvas from persistent chrome while keeping
   44px actions and the expanded Brief / Destination Intelligence surfaces intact. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] #gridlyPortraitV2 {
    --gridly-v2-header-top: max(6px, calc(env(safe-area-inset-top, 0px) + 4px));
    --gridly-v2-awareness-card-top: calc(var(--gridly-v2-header-top) + 38px);
    --gridly-v2-filter-strip-top: calc(var(--gridly-v2-header-top) + 136px + var(--gridly-brief-interaction-extra, 0px));
    --gridly-v2-filter-strip-bottom: calc(var(--gridly-v2-header-top) + 178px + var(--gridly-brief-interaction-extra, 0px));
    --gridly-v2-top-shield-height: calc(var(--gridly-v2-filter-strip-bottom) + 8px);
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-topbar {
    min-height: 32px;
    padding-block: 4px;
    border-radius: 15px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brand img {
    max-height: 22px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-brief-stack {
    gap: 6px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card {
    min-height: 88px !important;
    padding: 10px 14px !important;
    gap: 3px;
    border-radius: 18px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="quiet"] {
    align-content: center !important;
    min-height: 78px !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state]:not([data-awareness-state="quiet"]) {
    min-height: 88px !important;
    max-height: none !important;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-awareness-trust-line {
    margin-top: 2px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-brief-foundation-handle {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 14px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments {
    gap: 3px;
    padding: 3px;
    border-radius: 15px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-segments button {
    min-height: 36px;
    padding-inline: 4px;
    border-radius: 12px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-panel {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    gap: 2px;
    padding: 8px 12px;
    border-radius: 17px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-status,
  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-location-awareness-meta {
    line-height: 1.2;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock {
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 5px;
    padding: 5px;
    border-radius: 18px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button {
    min-height: 48px;
    gap: 1px;
    padding-block: 2px;
    border-radius: 13px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon {
    width: 30px;
    height: 30px;
    min-height: 30px;
    border-radius: 11px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock .dock-icon img {
    width: 18px;
    height: 18px;
  }

  body[data-layout-mode="portrait"] #gridlyPortraitV2 .gridly-v2-bottom-dock button em {
    line-height: 1.05;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel):not([hidden]):not(.is-command-card-suppressed) {
    min-height: 104px !important;
    padding: 8px 10px !important;
    gap: 7px !important;
    border-radius: 17px !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .mobile-destination-command-copy {
    gap: 2px !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel) .destination-route-impact-line:not(:empty) {
    display: -webkit-box !important;
    min-height: 0 !important;
    max-height: 2.48em !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: ellipsis !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2;
    line-height: 1.24 !important;
  }
}

/* LP185.2B — compact persistent route state, Pass 2.
   Keep the route decision and its action together without changing the
   expanded Destination Intelligence or Travel Brief surfaces. */
@media (max-width: 760px) and (orientation: portrait) {
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel:not([hidden]):not(.is-command-card-suppressed),
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel.has-route-exit-actions:not([hidden]):not(.is-command-card-suppressed) {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 88px !important;
    max-height: min(112px, calc(var(--gridly-awareness-panel-available-height, 100dvh) - env(safe-area-inset-top, 0px) - 10px)) !important;
    padding: 8px 9px 8px 11px !important;
    overflow: hidden !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-copy,
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel.has-route-exit-actions:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-copy {
    grid-column: 1 !important;
    width: auto !important;
    padding-right: 0 !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-actions,
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel.has-route-exit-actions:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-actions {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    border-top: 0 !important;
  }

  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-actions .compact-btn,
  body[data-layout-mode="portrait"] .map-card > .mobile-destination-command.is-destination-panel.has-route-exit-actions:not([hidden]):not(.is-command-card-suppressed) .mobile-destination-command-actions .compact-btn {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    min-height: 44px !important;
    padding: 8px 5px !important;
    font-size: 0.72rem !important;
  }

  body[data-layout-mode="portrait"] .mobile-destination-command.is-destination-panel .destination-route-impact-line:not(:empty) {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }
}

/* LP185.6F — authoritative Portrait V2 role contract.
   LP185.6/A/B/C were consolidated here: a role has one material owner and peers
   use typography/dividers instead of recursively acquiring cards. Semantic,
   marker, route, provider, geometry and interaction contracts remain untouched. */
:is(body.gridly-theme-dark, html[data-gridly-effective-theme="dark"] body.gridly-theme-system) {
  --gridly-app-bg: #06101f;
  --gridly-panel: #0d1d2e;
  --gridly-elevated: #0b1929;
  --gridly-nested: #12263a;
  --gridly-control-bg: #091827;
  --gridly-input-bg: #071522;
  --gridly-backdrop: rgba(1, 7, 14, 0.72);
  --gridly-accent: #22d3c5;
  --gridly-accent-soft: rgba(34, 211, 197, 0.14);
  --gridly-accent-foreground: #041b22;
  --gridly-border-neutral: rgba(190, 214, 235, 0.2);
  --gridly-divider: rgba(190, 214, 235, 0.14);
  --gridly-text-primary: #f4f8fc;
  --gridly-text-secondary: #c5d3e0;
  --gridly-text-muted: #8fa4b8;
  --gridly-shadow: 0 16px 42px rgba(0, 0, 0, 0.38);
  --gridly-disabled: rgba(143, 164, 184, 0.16);
  --gridly-disabled-foreground: #8fa4b8;
  color-scheme: dark;
}

:is(body.gridly-theme-light, html[data-gridly-effective-theme="light"] body.gridly-theme-system) {
  --gridly-app-bg: #eef4f8;
  --gridly-panel: #f2f7fa;
  --gridly-elevated: #fbfdff;
  --gridly-nested: #e3edf3;
  --gridly-control-bg: #eaf2f6;
  --gridly-input-bg: #edf4f8;
  --gridly-backdrop: rgba(10, 30, 48, 0.4);
  --gridly-accent: #066b70;
  --gridly-accent-soft: rgba(8, 127, 131, 0.13);
  --gridly-accent-foreground: #f7ffff;
  --gridly-border-neutral: rgba(27, 58, 87, 0.18);
  --gridly-divider: rgba(27, 58, 87, 0.12);
  --gridly-text-primary: #0d1b2a;
  --gridly-text-secondary: #3d5265;
  --gridly-text-muted: #536a7f;
  --gridly-shadow: 0 14px 36px rgba(25, 49, 71, 0.15);
  --gridly-recipe-a-shadow: 0 18px 46px rgba(18, 42, 64, 0.16), 0 2px 8px rgba(18, 42, 64, 0.08);
  --gridly-recipe-b-shadow: 0 8px 22px rgba(18, 42, 64, 0.12), 0 1px 4px rgba(18, 42, 64, 0.07);
  --gridly-disabled: rgba(61, 82, 101, 0.12);
  --gridly-disabled-foreground: #536a7f;
  color-scheme: light;
}

/* Pre-attribute fallback only; once app.js sets data-gridly-effective-theme the
   selectors above make explicit and System preferences consume identical values. */
@media (prefers-color-scheme: dark) {
  body.gridly-theme-system:not(:where(html[data-gridly-effective-theme] body)) { color-scheme: dark; }
}
@media (prefers-color-scheme: light) {
  body.gridly-theme-system:not(:where(html[data-gridly-effective-theme] body)) { color-scheme: light; }
}

body:is(.gridly-theme-light, .gridly-theme-dark, .gridly-theme-system) {
  background-color: var(--gridly-app-bg);
  color: var(--gridly-text-primary);
}

/* These !important declarations defeat the immutable pre-LP185.6 runtime owners
   `#gridlyPortraitV2 .gridly-v2-*`, `.mobile-destination-command.is-awareness-panel`,
   `.gridly-search-*`, and `#gridlyPortraitV2Sheet[data-active-sheet]`, whose fixed
   navy backgrounds also use !important. They do not resolve LP185.6-family rules. */
body[data-layout-mode="portrait"]:is(.gridly-theme-light, .gridly-theme-dark, .gridly-theme-system) {
  #gridlyPortraitV2 {
    .gridly-v2-topbar,
    .gridly-v2-awareness-brief-card,
    .gridly-v2-segments,
    .gridly-v2-bottom-dock {
      background: var(--gridly-panel) !important;
      border-color: var(--gridly-border-neutral) !important;
      color: var(--gridly-text-primary) !important;
      box-shadow: none !important;
    }

    .gridly-brief-interaction-panel,
    .gridly-v2-location-awareness-panel {
      background: var(--gridly-elevated) !important;
      border-color: var(--gridly-border-neutral) !important;
      color: var(--gridly-text-primary) !important;
      box-shadow: var(--gridly-shadow) !important;
    }

    .gridly-v2-awareness-trust-line,
    .gridly-v2-location-awareness-kicker,
    .gridly-v2-location-awareness-status,
    .gridly-v2-location-awareness-meta { color: var(--gridly-text-secondary) !important; }

    .gridly-brief-foundation-handle {
      background: var(--gridly-accent) !important;
      border-color: var(--gridly-accent) !important;
      color: var(--gridly-accent-foreground) !important;
      box-shadow: none !important;
    }
    .gridly-brief-foundation-handle :is(span, strong, .gridly-brief-foundation-handle-icon) {
      color: var(--gridly-accent-foreground) !important;
    }

    .gridly-v2-segments :is(button, [role="button"]),
    .gridly-v2-bottom-dock button {
      background: transparent !important;
      border-color: transparent !important;
      color: var(--gridly-text-secondary) !important;
      box-shadow: none !important;
    }
    .gridly-v2-segments :is(button, [role="button"]):is(.is-active, [aria-selected="true"], [aria-pressed="true"]),
    .gridly-v2-bottom-dock button:is(.is-active, [aria-current="page"], [aria-pressed="true"]) {
      background: var(--gridly-accent-soft) !important;
      color: var(--gridly-text-primary) !important;
    }

    .gridly-v2-control-rail {
      background: var(--gridly-panel) !important;
      border-color: var(--gridly-border-neutral) !important;
      box-shadow: var(--gridly-shadow) !important;
    }
    .gridly-v2-control-rail :is(button, .gridly-v2-map-control, [role="button"]) {
      background: var(--gridly-control-bg) !important;
      border-color: transparent !important;
      color: var(--gridly-text-primary) !important;
      box-shadow: none !important;
    }

    .gridly-travel-brief :is(.gridly-brief-flow, .gridly-travel-brief-list) {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }
    .gridly-travel-brief-item {
      background: transparent !important;
      border-color: transparent transparent var(--gridly-divider) !important;
      box-shadow: none !important;
      color: var(--gridly-text-primary) !important;
    }
    .gridly-unified-evidence {
      background: var(--gridly-nested) !important;
      border-color: var(--gridly-border-neutral) !important;
      box-shadow: none !important;
    }
    .gridly-unified-evidence-item {
      background: transparent !important;
      border-color: transparent transparent var(--gridly-divider) !important;
      box-shadow: none !important;
    }
  }

  /* Compatibility Location Context remains runtime-capable, but shares the exact
     role of the V2 owner. Existing hidden/state ownership ensures only one mounts
     perceptibly; presentation does not change that behavior. */
  .mobile-destination-command.is-awareness-panel,
  &.gridly-mobile-awareness-panel-present .map-card > .mobile-destination-command {
    background: var(--gridly-elevated) !important;
    border-color: var(--gridly-border-neutral) !important;
    color: var(--gridly-text-primary) !important;
    box-shadow: var(--gridly-shadow) !important;
  }
  .mobile-destination-command.is-awareness-panel :is(
    .mobile-awareness-panel-kicker, #mobileDestinationCommandMeta,
    .mobile-awareness-panel-crossings, .mobile-awareness-panel-issues
  ) { color: var(--gridly-text-secondary) !important; }
  .mobile-destination-command.is-awareness-panel :is(strong, .mobile-destination-command-copy) {
    color: var(--gridly-text-primary) !important;
  }
  .mobile-destination-command.is-awareness-panel .compact-btn {
    background: var(--gridly-control-bg) !important;
    border-color: var(--gridly-border-neutral) !important;
    color: var(--gridly-text-primary) !important;
    box-shadow: none !important;
  }

  /* Foreground ownership is explicit because legacy portrait rules color broad
     descendants (strong/p/span/em/label/small/button) instead of inheriting the
     role carried by their current runtime surface. */
  #gridlyPortraitV2 {
    .gridly-travel-brief-header,
    .gridly-travel-brief-item :is(strong, [data-gridly-decision-role="interpretation"]),
    .gridly-unified-evidence-item dd {
      color: var(--gridly-text-primary) !important;
    }
    .gridly-brief-context,
    .gridly-brief-travel-support,
    .gridly-travel-brief-item [data-gridly-decision-role="reason"] {
      color: var(--gridly-text-secondary) !important;
    }
    .gridly-travel-brief-source,
    .gridly-travel-brief-item :is([data-gridly-decision-role="confidence"], [data-gridly-decision-role="freshness"]),
    .gridly-unified-evidence-item dt {
      color: var(--gridly-text-muted) !important;
    }
    .gridly-brief-section-label,
    .gridly-unified-evidence summary {
      color: var(--gridly-accent) !important;
    }
    .gridly-v2-bottom-dock button :is(.dock-icon, span, em, svg) {
      color: inherit !important;
    }
  }

  #gridlyPortraitV2Sheet {
    background: var(--gridly-elevated) !important;
    border-color: var(--gridly-border-neutral) !important;
    color: var(--gridly-text-primary) !important;
    box-shadow: var(--gridly-shadow) !important;
  }
  #gridlyPortraitV2Sheet > header,
  #gridlyPortraitV2SheetBody,
  #gridlyPortraitV2Sheet :is(.gridly-v2-report-picker, .gridly-v2-report-tiles, .gridly-v2-report-ctas,
    .gridly-settings-sheet, .gridly-alerts-active, .gridly-historical-intelligence-sheet) {
    background: transparent !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2Sheet > header button,
  #gridlyPortraitV2Sheet .gridly-v2-report-action {
    background: var(--gridly-control-bg) !important;
    border-color: var(--gridly-border-neutral) !important;
    color: var(--gridly-text-primary) !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2SheetTitle,
  #gridlyPortraitV2Sheet .gridly-v2-report-prompt strong,
  #gridlyPortraitV2Sheet .gridly-v2-report-action :is(span, strong),
  #gridlyPortraitV2Sheet .gridly-historical-intelligence-row :is(strong, .gridly-historical-intelligence-location, .gridly-historical-intelligence-pattern),
  #gridlyPortraitV2Sheet[data-active-sheet="settings"] :is(.settings-list-title, label, select, input) {
    color: var(--gridly-text-primary) !important;
  }
  #gridlyPortraitV2Sheet .gridly-v2-report-prompt span,
  #gridlyPortraitV2Sheet .gridly-historical-intelligence-subtitle,
  #gridlyPortraitV2Sheet .gridly-historical-intelligence-line,
  #gridlyPortraitV2Sheet .gridly-historical-intelligence-row p:not(.gridly-historical-intelligence-context-note),
  #gridlyPortraitV2Sheet[data-active-sheet="settings"] :is(.settings-list-meta, .settings-placeholder-note, .settings-list-detail p, .settings-list-detail small) {
    color: var(--gridly-text-secondary) !important;
  }
  #gridlyPortraitV2Sheet :is(.gridly-historical-intelligence-note, .gridly-historical-intelligence-context-note),
  #gridlyPortraitV2Sheet :is(button, .gridly-v2-report-action):disabled,
  #gridlyPortraitV2Sheet [aria-disabled="true"] {
    color: var(--gridly-text-muted) !important;
  }
  #gridlyPortraitV2Sheet .gridly-v2-report-action:is(.is-selected, [aria-pressed="true"]) {
    background: var(--gridly-accent-soft) !important;
    border-color: var(--gridly-accent) !important;
  }
  #gridlyPortraitV2Sheet .gridly-v2-report-ctas .primary-btn:not(:disabled) {
    background: var(--gridly-accent) !important;
    color: var(--gridly-accent-foreground) !important;
  }
  #gridlyPortraitV2Sheet[data-active-sheet="settings"] :is(.settings-list-section, .settings-list-summary),
  #gridlyPortraitV2Sheet :is(.gridly-historical-intelligence-row, .gridly-alert-row) {
    background: transparent !important;
    border-color: transparent transparent var(--gridly-divider) !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-summary::after { color: var(--gridly-accent) !important; }
  #gridlyPortraitV2Sheet :is(.settings-list-detail, .gridly-historical-intelligence-details) {
    background: var(--gridly-nested) !important;
    border-color: var(--gridly-border-neutral) !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2Sheet :is(input, select, textarea, .settings-text-size-segment) {
    background: var(--gridly-input-bg) !important;
    border-color: var(--gridly-border-neutral) !important;
    color: var(--gridly-text-primary) !important;
    box-shadow: none !important;
  }
}

:is(body.gridly-theme-light, body.gridly-theme-dark, html[data-gridly-effective-theme] body.gridly-theme-system) #gridlySearchShell {
  background: var(--gridly-backdrop) !important;
}
:is(body.gridly-theme-light, body.gridly-theme-dark, html[data-gridly-effective-theme] body.gridly-theme-system) #gridlySearchShell .gridly-search-card {
  background: var(--gridly-elevated) !important;
  border-color: var(--gridly-border-neutral) !important;
  color: var(--gridly-text-primary) !important;
  box-shadow: var(--gridly-shadow) !important;
}
:is(body.gridly-theme-light, body.gridly-theme-dark, html[data-gridly-effective-theme] body.gridly-theme-system) #gridlySearchShell :is(
  .gridly-search-input-row, .gridly-search-results-status, .gridly-search-results-list
) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
:is(body.gridly-theme-light, body.gridly-theme-dark, html[data-gridly-effective-theme] body.gridly-theme-system) #gridlySearchShell .gridly-search-input {
  background: var(--gridly-input-bg) !important;
  border-color: var(--gridly-border-neutral) !important;
  color: var(--gridly-text-primary) !important;
  box-shadow: none !important;
}
:is(body.gridly-theme-light, body.gridly-theme-dark, html[data-gridly-effective-theme] body.gridly-theme-system) #gridlySearchShell :is(.gridly-search-label, .gridly-search-result-title) {
  color: var(--gridly-text-primary) !important;
}
:is(body.gridly-theme-light, body.gridly-theme-dark, html[data-gridly-effective-theme] body.gridly-theme-system) #gridlySearchShell :is(.gridly-search-subtitle, .gridly-search-results-status, .gridly-search-result-meta) {
  color: var(--gridly-text-secondary) !important;
}
:is(body.gridly-theme-light, body.gridly-theme-dark, html[data-gridly-effective-theme] body.gridly-theme-system) #gridlySearchShell .gridly-search-input::placeholder {
  color: var(--gridly-text-muted) !important;
  opacity: 1;
}
:is(body.gridly-theme-light, body.gridly-theme-dark, html[data-gridly-effective-theme] body.gridly-theme-system) #gridlySearchShell :is(.gridly-search-close-btn, .gridly-search-clear-btn) {
  color: var(--gridly-text-secondary) !important;
}
:is(body.gridly-theme-light, body.gridly-theme-dark, html[data-gridly-effective-theme] body.gridly-theme-system) #gridlySearchShell .gridly-search-result-item {
  background: transparent !important;
  border-color: transparent transparent var(--gridly-divider) !important;
  box-shadow: none !important;
}
:is(body.gridly-theme-light, body.gridly-theme-dark, html[data-gridly-effective-theme] body.gridly-theme-system) #gridlySearchShell .gridly-search-result-item:is(.is-selected, [aria-selected="true"], :focus-visible) {
  background: var(--gridly-accent-soft) !important;
}
:is(body.gridly-theme-light, body.gridly-theme-dark, html[data-gridly-effective-theme] body.gridly-theme-system) #gridlySearchShell #gridlyRemoteSearchBtn:not(:disabled) {
  background: var(--gridly-accent) !important;
  color: var(--gridly-accent-foreground) !important;
}

/* LP185.8 — the owner-supplied horizontal Light wordmark uses the same complete,
   uncropped presentation model as the Dark horizontal wordmark. */
#gridlyPortraitV2 .gridly-v2-brand img[data-gridly-logo-theme="light"] {
  object-fit: contain;
  object-position: left center;
}

/* LP185.6H — Light foreground color grade. Pale cyan remains a tint or
   decoration; readable content is owned by navy, slate, or the deep accent.
   These declarations intentionally change no material or geometry. */
:is(body.gridly-theme-light, html[data-gridly-effective-theme="light"] body.gridly-theme-system)[data-layout-mode="portrait"] {
  #gridlyPortraitV2 {
    .gridly-v2-location-awareness-kicker,
    .gridly-brief-section-label,
    .gridly-unified-evidence summary {
      color: var(--gridly-accent) !important;
      opacity: 1 !important;
    }

    .gridly-v2-bottom-dock button:is(.is-active, [aria-current="page"], [aria-pressed="true"]) {
      color: var(--gridly-accent) !important;
    }

    .gridly-v2-awareness-trust-line,
    .gridly-v2-control-rail {
      opacity: 1 !important;
    }
  }

  .mobile-destination-command.is-awareness-panel .mobile-awareness-panel-kicker,
  &.gridly-mobile-awareness-panel-present .map-card > .mobile-destination-command .mobile-awareness-panel-kicker {
    color: var(--gridly-accent) !important;
    opacity: 1 !important;
  }

  #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-v2-sheet-copy {
    color: var(--gridly-text-secondary) !important;
    opacity: 1 !important;
  }

  #gridlyPortraitV2Sheet :is(button, .gridly-v2-report-action):disabled,
  #gridlyPortraitV2Sheet [aria-disabled="true"] {
    color: var(--gridly-disabled-foreground) !important;
  }
}

/* LP185.6G — live-proven legacy Location Context surface closure.
   Match the high-specificity V250.8C runtime owner without changing its layout
   or visibility contract. Dark keeps the existing compatibility glass paint. */
:is(body.gridly-theme-light, html[data-gridly-effective-theme="light"] body.gridly-theme-system)[data-layout-mode="portrait"] {
  .mobile-destination-command.is-awareness-panel,
  &.gridly-mobile-awareness-panel-present .map-card > .mobile-destination-command,
  .map-card > .mobile-destination-command.is-awareness-panel:not([hidden]):not(.is-command-card-suppressed) {
    background-color: var(--gridly-elevated) !important;
    background-image: none !important;
    border: 1px solid var(--gridly-border-neutral) !important;
    box-shadow: var(--gridly-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-destination-command.is-awareness-panel::before,
  &.gridly-mobile-awareness-panel-present .map-card > .mobile-destination-command::before {
    content: none !important;
    background: none !important;
    background-image: none !important;
  }
}

/* LP185.6I — Light-only primary-action and residual foreground closure.
   Runtime-specific selectors close legacy paint/opacity ownership without
   changing the accepted surfaces, geometry, type scale, or Dark contract. */
:is(body.gridly-theme-light, html[data-gridly-effective-theme="light"] body.gridly-theme-system)[data-layout-mode="portrait"] {
  #gridlyPortraitV2Sheet[data-active-sheet="report"] #gridlyPortraitV2SheetBody
    .gridly-v2-report-ctas [data-v2-action="report-use-location"]:not(:disabled) {
    background: var(--gridly-accent) !important;
    border-color: var(--gridly-accent) !important;
    color: var(--gridly-accent-foreground) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  #gridlyPortraitV2 .gridly-v2-awareness-brief-card .gridly-v2-awareness-trust-line {
    color: var(--gridly-text-muted) !important;
    opacity: 1 !important;
  }

  #gridlyPortraitV2Sheet[data-active-sheet="history"] {
    .gridly-historical-intelligence-subtitle,
    .gridly-historical-intelligence-line,
    .gridly-historical-intelligence-row p:not(.gridly-historical-intelligence-context-note),
    .gridly-historical-intelligence-detail-title em {
      color: var(--gridly-text-secondary) !important;
      opacity: 1 !important;
    }
    .gridly-historical-intelligence-row :is(strong, .gridly-historical-intelligence-location),
    .gridly-historical-intelligence-detail-title span {
      color: var(--gridly-text-primary) !important;
      opacity: 1 !important;
    }
    :is(.gridly-historical-intelligence-note, .gridly-historical-intelligence-context-note) {
      color: var(--gridly-text-muted) !important;
      opacity: 1 !important;
    }
  }

  #gridlyPortraitV2Sheet[data-active-sheet="settings"]
    :is(.settings-list-meta, .settings-placeholder-note, .settings-list-detail p,
      .settings-list-detail small, .settings-feedback-helper, .settings-feedback-prompt) {
    color: var(--gridly-text-secondary) !important;
    opacity: 1 !important;
  }

  #gridlyPortraitV2 .gridly-v2-bottom-dock button {
    color: var(--gridly-text-secondary) !important;
    opacity: 1 !important;
  }
  #gridlyPortraitV2 .gridly-v2-bottom-dock button :is(.dock-icon, span, em, svg, img) {
    color: inherit !important;
    opacity: 1 !important;
  }
  #gridlyPortraitV2 .gridly-v2-bottom-dock button:is(.is-active, [aria-current="page"], [aria-pressed="true"]) {
    color: var(--gridly-accent) !important;
    opacity: 1 !important;
  }
}

/* LP185.6J — live-evidence Light chrome and residual contrast closure.
   The bottom region is canvas around the unchanged dock. The intentionally dark
   Community Pulse surface consumes opaque, governed on-dark foreground roles. */
:is(body.gridly-theme-light, html[data-gridly-effective-theme="light"] body.gridly-theme-system)[data-layout-mode="portrait"] {
  #gridlyPortraitV2 #gridlyPortraitBottomRegion.gridly-v2-bottom-region {
    background-color: var(--gridly-app-bg) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  #gridlyPortraitV2Sheet[data-active-sheet="report"] #gridlyPortraitV2SheetBody {
    .gridly-v2-report-prompt {
      color: inherit !important;
    }
    .gridly-v2-report-prompt strong {
      color: var(--gridly-text-primary) !important;
    }
    .gridly-v2-report-prompt span,
    [data-v2-precondition-helper] {
      color: var(--gridly-text-secondary) !important;
      opacity: 1 !important;
    }
    .gridly-v2-report-ctas [data-v2-action="report-use-location"]:disabled {
      background: var(--gridly-disabled) !important;
      border-color: var(--gridly-border-neutral) !important;
      color: var(--gridly-disabled-foreground) !important;
      opacity: 1 !important;
      filter: none !important;
    }
  }

  .community-pulse-surface .community-pulse-kicker {
    color: var(--gridly-accent-foreground) !important;
    opacity: 1 !important;
  }
  .community-pulse-surface #gridlyCommunityPulseSubline {
    color: color-mix(in srgb, var(--gridly-accent-foreground) 84%, var(--gridly-accent)) !important;
    opacity: 1 !important;
  }
}

/* LP185.6K — live-evidence residual Dark chrome and alert contrast closure.
   These Light/System-Light overrides target the populated runtime owners that
   still win from V873–V876 and V257.1. Geometry, visibility, interaction and
   the intentionally dark Awareness Brief are outside this closure. */
:is(body.gridly-theme-light, html[data-gridly-effective-theme="light"] body.gridly-theme-system)[data-layout-mode="portrait"] {
  /* Populated alert descendants previously inherited fixed on-dark values from
     the high-specificity V875 rules (all !important). */
  #gridlyPortraitV2Sheet[data-active-sheet="alerts"] {
    .gridly-alert-row.gridly-alert-intel-card strong,
    .gridly-alert-title {
      color: var(--gridly-text-primary) !important;
    }
    .gridly-alert-location-line,
    [data-gridly-alert-location-line="true"] {
      color: var(--gridly-text-secondary) !important;
    }
    .gridly-alert-meta-line {
      color: var(--gridly-accent) !important;
      opacity: 1 !important;
    }
    .gridly-alert-meta-line strong {
      color: var(--gridly-text-primary) !important;
    }
    .gridly-alert-trust-line {
      color: var(--gridly-text-muted) !important;
      opacity: 1 !important;
    }
  }

  /* The single runtime class owns TRAVEL BRIEF and its informational category
     peers (BEFORE YOU GO, COMMUNITY, OFFICIAL ROADWAYS and WEATHER). */
  #gridlyPortraitV2 .gridly-brief-section-label {
    color: var(--gridly-accent) !important;
    opacity: 1 !important;
  }

  /* Active persistent route context is the destination-panel state of the
     mobile command article, not a legacy `.route-card`. V257.1 owns its current
     dimensions and footer layout, which remain deliberately unmentioned. */
  .map-card > .mobile-destination-command.is-destination-panel:not([hidden]):not(.is-command-card-suppressed) {
    background-color: var(--gridly-elevated) !important;
    background-image: none !important;
    border-color: var(--gridly-border-neutral) !important;
    color: var(--gridly-text-primary) !important;
    box-shadow: var(--gridly-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .mobile-destination-command.is-destination-panel {
    .mobile-awareness-panel-kicker {
      color: var(--gridly-accent) !important;
    }
    #mobileDestinationCommandTitle,
    .destination-route-impact-line {
      color: var(--gridly-text-primary) !important;
    }
    #mobileDestinationCommandMeta {
      color: var(--gridly-text-secondary) !important;
    }
    #mobileDestinationCommandBtn {
      background: var(--gridly-control-bg) !important;
      border-color: var(--gridly-border-neutral) !important;
      color: var(--gridly-text-primary) !important;
      box-shadow: none !important;
    }
  }

  /* Destination Intelligence is already a Light sheet. Its exact action stack
     and evidence summary were the remaining fixed on-dark foreground owners. */
  #gridlyDestinationImpactPane .gridly-destination-impact-actions {
    :is(.gridly-destination-impact-show-full-route, .gridly-destination-impact-clear-route,
      .gridly-destination-impact-done, .gridly-destination-impact-stop-watch) {
      background: var(--gridly-control-bg) !important;
      border-color: var(--gridly-border-neutral) !important;
      color: var(--gridly-text-primary) !important;
      box-shadow: none !important;
    }
    .gridly-destination-impact-manage-route:not(:disabled) {
      background: var(--gridly-accent) !important;
      border-color: var(--gridly-accent) !important;
      color: var(--gridly-accent-foreground) !important;
      box-shadow: none !important;
    }
    :is(button, .secondary-btn):disabled {
      background: var(--gridly-disabled) !important;
      border-color: var(--gridly-border-neutral) !important;
      color: var(--gridly-disabled-foreground) !important;
      opacity: 1 !important;
    }
  }
  #gridlyDestinationImpactPane .gridly-destination-impact-why .gridly-unified-evidence summary {
    color: var(--gridly-accent) !important;
    opacity: 1 !important;
  }
}

/* LP185.6L — Travel Brief inner kicker contrast closure.
   The runtime H4 owner retains its type and grid declarations above; only its
   foreground is remapped for explicit Light and effective System-Light. */
:is(body.gridly-theme-light, html[data-gridly-effective-theme="light"] body.gridly-theme-system)[data-layout-mode="portrait"]
  #gridlyPortraitV2 .gridly-travel-brief-item h4 {
  color: var(--gridly-accent) !important;
  opacity: 1 !important;
}

/* LP185.7 — frosted daylight material and depth refinement.
   Recipe A is the floating-intelligence shadow; Recipe B is the quieter compact
   cluster shadow. Only explicit Light and effective System-Light consume this
   closure, leaving the accepted Dark material contract byte-for-byte intact. */
:is(body.gridly-theme-light, html[data-gridly-effective-theme="light"] body.gridly-theme-system)[data-layout-mode="portrait"] {
  /* CANVAS replaces the legacy navy top shield without changing its geometry. */
  &.gridly-v2-surface-containment #gridlyPortraitV2::before {
    background: var(--gridly-app-bg) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* Awareness is one SURFACE family in quiet and active states. The inset edge
     is semantic emphasis, not a second elevated card. */
  #gridlyPortraitV2 .gridly-v2-awareness-brief-card,
  #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state] {
    background-color: var(--gridly-panel) !important;
    background-image: linear-gradient(180deg, rgba(93, 211, 220, 0.07), rgba(93, 211, 220, 0) 44%) !important;
    border-color: color-mix(in srgb, var(--gridly-border-neutral) 72%, transparent) !important;
    color: var(--gridly-text-primary) !important;
    box-shadow: var(--gridly-recipe-b-shadow) !important;
  }
  #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="high"],
  #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-awareness-state="moderate"] {
    background-color: var(--gridly-panel) !important;
    border-color: color-mix(in srgb, var(--gridly-accent) 42%, var(--gridly-border-neutral)) !important;
  }
  #gridlyPortraitV2 .gridly-v2-awareness-brief-card::before,
  #gridlyPortraitV2 .gridly-v2-awareness-brief-card::after {
    background: none !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2 .gridly-v2-awareness-brief-card strong { color: var(--gridly-text-primary) !important; }
  #gridlyPortraitV2 .gridly-v2-awareness-brief-card > span { color: var(--gridly-text-secondary) !important; }
  #gridlyPortraitV2 .gridly-v2-awareness-brief-card .gridly-v2-awareness-trust-line {
    color: var(--gridly-text-muted) !important;
  }
  #gridlyPortraitV2 .gridly-v2-awareness-brief-card[data-gridly-pulse-banner="true"] .gridly-v2-awareness-trust-line {
    color: var(--gridly-accent) !important;
  }
  #gridlyPortraitV2 .gridly-brief-foundation-handle {
    background: var(--gridly-accent) !important;
    color: var(--gridly-accent-foreground) !important;
    box-shadow: none !important;
  }

  /* Recipe A — Floating Intelligence. */
  #gridlyPortraitV2Sheet,
  #gridlyPortraitV2 .gridly-brief-interaction-panel,
  #gridlyPortraitV2 .gridly-v2-location-awareness-panel,
  .map-card > .mobile-destination-command:is(.is-awareness-panel, .is-destination-panel):not([hidden]):not(.is-command-card-suppressed),
  #gridlyDestinationImpactPane .gridly-destination-impact-card {
    background-color: var(--gridly-elevated) !important;
    border-color: color-mix(in srgb, var(--gridly-border-neutral) 78%, white) !important;
    box-shadow: var(--gridly-recipe-a-shadow) !important;
  }
  #gridlyPortraitV2Sheet,
  #gridlyPortraitV2 .gridly-brief-interaction-panel,
  #gridlyDestinationImpactPane .gridly-destination-impact-card {
    background-image: linear-gradient(180deg, rgba(93, 211, 220, 0.055), rgba(255, 255, 255, 0) 22%) !important;
  }

  /* Recipe B — Compact Cluster. Children remain shadowless CONTROL material. */
  #gridlyPortraitV2 .gridly-v2-bottom-dock,
  #gridlyPortraitV2 .gridly-v2-control-rail {
    background: var(--gridly-panel) !important;
    border-color: color-mix(in srgb, var(--gridly-border-neutral) 70%, white) !important;
    box-shadow: var(--gridly-recipe-b-shadow) !important;
  }
  #gridlyPortraitV2 :is(.gridly-v2-bottom-dock button, .gridly-v2-control-rail button,
    .gridly-v2-segments button),
  #gridlyPortraitV2Sheet :is(.gridly-v2-report-action, .gridly-alert-row,
    .settings-list-section, .settings-list-summary, .gridly-historical-intelligence-row),
  #gridlySearchShell .gridly-search-result-item,
  #gridlyDestinationImpactPane .gridly-destination-impact-actions button {
    box-shadow: none !important;
  }

  #gridlySearchShell .gridly-search-card {
    background-color: var(--gridly-elevated) !important;
    background-image: linear-gradient(180deg, rgba(93, 211, 220, 0.045), rgba(255, 255, 255, 0) 18%) !important;
    box-shadow: var(--gridly-recipe-a-shadow) !important;
  }
  #gridlySearchShell .gridly-search-input { background: var(--gridly-nested) !important; }
  #gridlyPortraitV2Sheet[data-active-sheet="settings"] .settings-list-detail,
  #gridlyPortraitV2 .gridly-unified-evidence,
  #gridlyDestinationImpactPane .gridly-unified-evidence {
    background: var(--gridly-nested) !important;
    box-shadow: none !important;
  }
}

/* LP185.7 Phase 3 — audited Light material finishing. These scoped owners only
   refine the four accepted groupings; they add no role, shadow, or geometry. */
:is(body.gridly-theme-light, html[data-gridly-effective-theme="light"] body.gridly-theme-system)[data-layout-mode="portrait"] {
  /* Report choices remain CONTROL, with a quiet NESTED tonal cue against the
     ELEVATED sheet. Selection continues to be owned by ACCENT-SOFT below. */
  #gridlyPortraitV2Sheet[data-active-sheet="report"] #gridlyPortraitV2SheetBody
    .gridly-v2-report-action:not(.is-selected):not([aria-pressed="true"]) {
    background: color-mix(in srgb, var(--gridly-control-bg) 72%, var(--gridly-nested)) !important;
    border-color: var(--gridly-border-neutral) !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2Sheet[data-active-sheet="report"] #gridlyPortraitV2SheetBody
    .gridly-v2-report-action:is(.is-selected, [aria-pressed="true"]) {
    background: var(--gridly-accent-soft) !important;
    border-color: var(--gridly-accent) !important;
  }

  /* Only the real populated list receives INSET ownership. Alert rows remain
     flat peers separated by DIVIDER rather than becoming individual cards. */
  #gridlyPortraitV2Sheet[data-active-sheet="alerts"] .gridly-alerts-active > .gridly-v2-list {
    background: var(--gridly-nested) !important;
    border-color: var(--gridly-border-neutral) !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2Sheet[data-active-sheet="alerts"]
    .gridly-alerts-active > .gridly-v2-list > .gridly-alert-row.gridly-alert-intel-card {
    background: transparent !important;
    border-color: transparent transparent var(--gridly-divider) !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2Sheet[data-active-sheet="alerts"]
    .gridly-alerts-active > .gridly-v2-list > .gridly-alert-row.gridly-alert-intel-card:last-child {
    border-bottom-color: transparent !important;
  }

  /* The subject/location copy stays on the sheet. “What to know now” owns the
     INSET grouping, while details keep their previously accepted INSET role. */
  #gridlyPortraitV2Sheet[data-active-sheet="history"] .gridly-historical-intelligence-subject {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2Sheet[data-active-sheet="history"] .gridly-historical-intelligence-typical-pattern,
  #gridlyPortraitV2Sheet[data-active-sheet="history"] .gridly-historical-intelligence-details {
    background: var(--gridly-nested) !important;
    border-color: var(--gridly-border-neutral) !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2Sheet[data-active-sheet="history"] .gridly-historical-intelligence-detail-title {
    border-top-color: var(--gridly-divider) !important;
  }
  #gridlyPortraitV2Sheet[data-active-sheet="history"] .gridly-historical-intelligence-row {
    box-shadow: none !important;
  }

  /* Settings is one grouped INSET region. Sections and summaries are flat
     peers; only an opened detail retains its own existing INSET ownership. */
  #gridlyPortraitV2Sheet[data-active-sheet="settings"] .gridly-settings-sheet {
    background: var(--gridly-nested) !important;
    border-color: var(--gridly-border-neutral) !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2Sheet[data-active-sheet="settings"] .gridly-settings-sheet
    :is(.settings-list-section, .settings-modal-section) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2Sheet[data-active-sheet="settings"] .gridly-settings-sheet .settings-list-summary {
    background: transparent !important;
    border-color: transparent transparent var(--gridly-divider) !important;
    box-shadow: none !important;
  }
  #gridlyPortraitV2Sheet[data-active-sheet="settings"] .gridly-settings-sheet
    :is(.settings-list-section, .settings-modal-section):last-child > .settings-list-summary {
    border-bottom-color: transparent !important;
  }
  #gridlyPortraitV2Sheet[data-active-sheet="settings"] .gridly-settings-sheet .settings-list-detail {
    background: var(--gridly-nested) !important;
    border-color: var(--gridly-border-neutral) !important;
    box-shadow: none !important;
  }
}

/* LP236 — Alerts source/type progressive disclosure. */
.gridly-lp236-alerts { display:grid; grid-template-columns:minmax(0, 1fr); width:100%; min-width:0; max-width:100%; gap:10px; }
.gridly-lp236-header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:2px 2px 6px; }
.gridly-lp236-header > strong { font-size:1.08rem; }
.gridly-lp236-header > span { color:var(--gridly-text-muted, rgba(226,240,252,.76)); font-size:.82rem; }
.gridly-lp236-sections { display:grid; grid-template-columns:minmax(0, 1fr); width:100%; min-width:0; gap:8px; }
.gridly-lp236-source, .gridly-lp236-group { width:100%; min-width:0; max-width:100%; box-sizing:border-box; border:1px solid rgba(255,255,255,.11); border-radius:12px; background:rgba(255,255,255,.025); overflow:visible; }
.gridly-lp236-source-status { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:10px 12px; box-sizing:border-box; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.018); }
.gridly-lp236-source-status > span { display:grid; min-width:0; text-transform:uppercase; letter-spacing:.045em; }
.gridly-lp236-source-status small { margin-top:2px; opacity:.67; font-size:.68rem; text-transform:none; letter-spacing:0; }
.gridly-lp236-source-status > b { flex:0 0 auto; opacity:.72; font-variant-numeric:tabular-nums; }
.gridly-lp236-source > summary, .gridly-lp236-group > summary, .gridly-lp236-roadway-group > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:10px 12px; cursor:pointer; list-style:none; }
.gridly-lp236-source > summary::-webkit-details-marker, .gridly-lp236-group > summary::-webkit-details-marker, .gridly-lp236-roadway-group > summary::-webkit-details-marker, .gridly-lp236-condition-details > summary::-webkit-details-marker { display:none; }
.gridly-lp236-source > summary::before, .gridly-lp236-group > summary::before, .gridly-lp236-roadway-group > summary::before { content:"›"; flex:0 0 auto; font-size:1.15rem; transform-origin:center; transition:transform .14s ease; }
.gridly-lp236-source[open] > summary::before, .gridly-lp236-group[open] > summary::before, .gridly-lp236-roadway-group[open] > summary::before { transform:rotate(90deg); }
.gridly-lp236-source > summary > span { display:grid; flex:1; min-width:0; text-transform:uppercase; letter-spacing:.045em; }
.gridly-lp236-source > summary small { margin-top:2px; opacity:.67; font-size:.68rem; text-transform:none; letter-spacing:0; }
.gridly-lp236-source > summary b, .gridly-lp236-group > summary strong { flex:0 0 auto; font-variant-numeric:tabular-nums; }
.gridly-lp236-groups { display:grid; grid-template-columns:minmax(0, 1fr); width:100%; min-width:0; box-sizing:border-box; gap:6px; padding:0 8px 8px 24px; }
.gridly-lp236-group { border-radius:9px; background:rgba(0,0,0,.12); }
.gridly-lp236-group > summary { min-height:44px; padding:8px 10px; }
.gridly-lp236-rows { display:block; width:100%; min-width:0; box-sizing:border-box; border-top:1px solid rgba(255,255,255,.08); }
.gridly-lp236-roadway-group { display:block; width:100%; min-width:0; max-width:100%; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,.08); }
.gridly-lp236-roadway-group > summary { min-height:44px; padding:8px 10px; }
.gridly-lp236-roadway-group > summary span { min-width:0; font-weight:700; white-space:normal; overflow-wrap:break-word; word-break:normal; }
.gridly-lp236-roadway-group > summary strong { flex:0 0 auto; font-size:.72rem; opacity:.72; }
.gridly-lp236-roadway-rows { display:block; width:100%; min-width:0; box-sizing:border-box; padding-left:10px; border-top:1px solid rgba(255,255,255,.06); }
/* LP236.11 condition isolation: legacy row/card geometry must not participate. */
.gridly-lp236-condition-item { position:static; display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:auto auto; grid-template-areas:"condition-copy" "condition-actions"; align-items:start; float:none; width:100%; min-width:0; max-width:none; box-sizing:border-box; padding:12px 10px; border:0; border-bottom:1px solid rgba(255,255,255,.075); border-radius:0; background:transparent; overflow:visible; contain:none; transform:none; }
.gridly-lp236-condition-item:last-child { border-bottom:0; }
.gridly-lp236-condition-body { grid-area:condition-copy; position:static; display:block; align-self:start; width:100%; min-width:0; max-width:none; box-sizing:border-box; overflow:visible; white-space:normal; }
.gridly-lp236-condition-body > :is(strong, span) { position:static; display:block; float:none; width:auto; min-width:0; max-width:none; margin:0; overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:break-word; word-break:normal; writing-mode:horizontal-tb; transform:none; }
.gridly-lp236-condition-roadway { font-size:.9rem; line-height:1.3; }
.gridly-lp236-condition-location { margin-top:2px !important; opacity:.72; font-size:.75rem; line-height:1.35; }
.gridly-lp236-condition-title { margin-top:3px !important; opacity:.96; font-size:.9rem; font-weight:750; line-height:1.35; }
.gridly-lp236-condition-summary { margin-top:3px !important; opacity:.84; font-size:.82rem; line-height:1.45; }
.gridly-lp236-condition-time { margin-top:4px !important; opacity:.62; font-size:.73rem; line-height:1.35; }
.gridly-lp236-condition-actions { grid-area:condition-actions; position:static; display:flex; align-self:start; width:100%; min-width:0; min-height:44px; box-sizing:border-box; justify-content:flex-end; margin-top:7px; }
.gridly-lp236-show-me { position:static; flex:0 0 auto; min-width:74px; min-height:44px; box-sizing:border-box; padding:7px 10px; border:1px solid rgba(125,211,252,.38); border-radius:8px; color:inherit; background:rgba(125,211,252,.09); font-weight:700; transform:none; }
.gridly-lp236-critical { display:grid; gap:3px; padding:11px 12px; border:1px solid rgba(251,146,60,.5); border-radius:11px; background:rgba(251,146,60,.1); }
.gridly-lp236-critical span { font-size:.75rem; opacity:.8; }
@media (max-width:420px) { .gridly-lp236-groups { padding-left:8px; } .gridly-lp236-source > summary { padding-inline:10px; } .gridly-lp236-condition-item { padding-inline:8px; } }

/* Portrait V2 lifecycle-owned minimized state: retain mounted sheet content/state
   while exposing the map and leaving close as a distinct destructive transition. */
#gridlyPortraitV2Sheet.is-minimized {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#gridlyPortraitV2SheetBackdrop.is-minimized {
  display: none !important;
  pointer-events: none !important;
}

/* LP241.8C: Portrait V2 owns presentation; the legacy tree retains only the
   shared Leaflet canvas.  The matching runtime boundary also removes these
   roots from focus and the accessibility tree. */
body[data-layout-mode="portrait"] .app-shell > :not(.main-column),
body[data-layout-mode="portrait"] .app-shell > .main-column > :not(#mapSection),
body[data-layout-mode="portrait"] #mapSection > :not(.map-card),
body[data-layout-mode="portrait"] #mapSection > .map-card > :not(.map-frame),
body[data-layout-mode="portrait"] #mapSection > .map-card > .map-frame > :not(#map),
body[data-layout-mode="portrait"] .mobile-floating-action-dock {
  display: none !important;
}