/* Mobile-first visual system. Load after style.css, location.css and reporting-ux.css, and BEFORE navigation.css.
   Base = phone (320-759px). @media (min-width:760px) = tablet, (min-width:1100px) = desktop.
   Route / navigation (.route-panel, .nav-*) styling is owned by navigation.css; only the
   guidance variable and top-bar contract at the end of the phone section touch it.
   Selectors use #map-controls / main .reports-panel[data-view] where style.css has more specific rules. */

:root {
  --edge-top: max(10px, env(safe-area-inset-top));
  --brand-h: 44px;
  --stack-top: calc(var(--edge-top) + var(--brand-h) + 8px);
  --mf-l: max(12px, env(safe-area-inset-left));
  --mf-r: max(12px, env(safe-area-inset-right));
  --mf-dock: calc(max(8px, env(safe-area-inset-bottom)) + 28px); /* clears the attribution row */
  --mf-line: #dfe5e1;
  --mf-muted: #4e6f61;
  --mf-pad: 16px;
  --mf-panel-shadow: 0 2px 14px #063c2e26, 0 0 0 1px #063c2e0f;
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Skip links: off-screen until focused, then shown top-left above everything. */
.skip-links a { position: absolute; left: -9999px; top: var(--edge-top); z-index: 20; display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--green); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; }
.skip-links a:focus { left: var(--mf-l); }
/* The map is last in DOM order; keep every overlay that has no z-index of its own above it. */
#map { position: absolute; inset: 0; z-index: 0; }
.bottom-tools, .notice, .loading-state, .error-state { z-index: 2; }
@media (max-width: 759px) { input, textarea, select { font-size: max(16px, 1em); } }

/* ---- Top area: small brand left, 44px account icon right ---- */
.top-bar { left: var(--mf-l); right: var(--mf-r); top: var(--edge-top); justify-content: space-between; gap: 8px; }
.brand-panel { height: var(--brand-h); padding: 0 6px; border-radius: 12px; background: #ffffffeb; box-shadow: 0 0 0 1px var(--mf-line); }
.brand { width: 84px; height: 38px; }
.account-button { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; gap: 0; border-radius: 12px; font-size: 14px; box-shadow: var(--mf-panel-shadow); }
.account-button svg { width: 22px; height: 22px; }
#account-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- Search: input row, then a full-width Directions action row ---- */
.search-panel { left: var(--mf-l); right: var(--mf-r); top: var(--stack-top); width: auto; max-width: none; border: 0; border-radius: 16px; box-shadow: var(--mf-panel-shadow); }
.search-form { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 0; height: auto; min-height: 52px; padding: 4px; }
.search-form:focus-within { box-shadow: none; }
.search-form input { height: 44px; padding: 0 6px; border-radius: 10px; font-size: 16px; }
.search-form input:focus { box-shadow: inset 0 0 0 2px var(--green); background: #f6faf6; }
.search-submit, .search-clear { width: 44px; height: 44px; border-radius: 12px; }
.search-clear { font-size: 26px; }
.directions-open { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; width: 100%; height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; font-weight: 600; }
.directions-open { min-width: 44px; white-space: nowrap; }
.directions-open .label-short { display: inline; }
.directions-open .label-full { display: none; }
.directions-open svg { flex: none; width: 22px; height: 22px; }
/* Without a Clear button the action shares the input row: compact, but always labelled "Route". */
.search-panel:not(:has(#search-clear:not([hidden]))) .directions-open { grid-column:auto; width:auto; gap:6px; padding:0 12px; font-size:14px; background:#edf4ef; color:var(--green); }
.search-panel button:focus-visible { outline-offset: -3px; }
/* Choosing a search result is the next decision; Directions returns on dismissal/selection. */
.search-panel:has(#search-dropdown:not([hidden]) #search-results > li) .directions-open:not(:focus){display:none}

.search-dropdown { max-height: min(420px, max(160px, calc(100dvh - var(--stack-top) - 150px - env(safe-area-inset-bottom) - var(--search-kb, 0px)))); overflow-y: auto; overscroll-behavior: contain; }
.search-status { padding: 10px 14px 6px; font-size: 13px; color: var(--mf-muted); }
.search-results { padding: 2px 6px 6px; }
.search-results li { align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px; border-radius: 10px; line-height: 1.35; }
.search-results strong { font-size: 15px; font-weight: 600; }
.result-detail { margin-top: 2px; font-size: 13px; color: var(--mf-muted); }
.result-kind { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--green); }
.search-results li[aria-selected=true] { box-shadow: inset 0 0 0 2px var(--green); }
.result-pin { width: 32px; height: 32px; font-size: 18px; }

/* Selected place popup */
.maplibregl-popup { max-width: min(280px, calc(100vw - 32px)) !important; }
.maplibregl-popup-content { padding: 12px 14px; border-radius: 14px; }
.maplibregl-popup-close-button { width: 44px; height: 44px; font-size: 24px; line-height: 1; color: var(--mf-muted); }
.place-popup { padding: 0 32px 0 0; line-height: 1.4; }
.place-popup strong { font-size: 16px; font-weight: 600; }
.place-popup p { margin: 4px 0 0; font-size: 13px; color: var(--mf-muted); }

/* ---- Map controls: lower right, above Report, visually secondary ---- */
main > #map-controls { z-index: 2; top: auto; bottom: calc(var(--mf-dock) + 60px); right: var(--mf-r); gap: 8px; }
.location-button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--mf-line); border-radius: 12px; background: #ffffffeb; color: var(--green); font-size: 22px; box-shadow: 0 1px 4px #063c2e26; }
.location-button.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.location-button:focus-visible, .location-action:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.maplibregl-ctrl-group { border-radius: 12px !important; border: 1px solid var(--mf-line) !important; background: #ffffffeb !important; box-shadow: 0 1px 4px #063c2e26 !important; }
.maplibregl-ctrl-group button { width: 44px; height: 44px; }
/* Pin placement has its own locate action; keep the map clear for dragging. */
main.is-reporting > #map-controls { display:none; }

/* ---- Bottom-left dock: location status; gesture hints hidden ---- */
.bottom-tools { left: var(--mf-l); bottom: var(--mf-dock); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: calc(100% - 148px); }
.gesture-hint { display: none; }
.location-status { margin-top: 0; max-width: 100%; gap: 4px 6px; padding: 6px 8px 6px 10px; border-radius: 12px; background: #fffffff2; color: var(--ink); font-size: 13px; line-height: 1.35; box-shadow: var(--mf-panel-shadow); }
.location-status--floating { top: calc(var(--stack-top) + 8px); left: var(--mf-l); max-width: calc(100% - 80px); }
.location-status-text { display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;overflow-wrap:normal; }
.location-status-label { flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.location-action { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--mf-line); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--green); }
.location-status { padding:0 6px; position:relative; }
.location-status-text { min-height:44px; padding:0 6px; border:0; background:none; color:var(--green); font-size:12px; text-align:left; }
.location-status-text::after { content:'⌄';flex:none;margin-left:0; }
.location-status.is-expanded .location-status-text::after { content:'⌃'; }
.location-status:not(.is-expanded) .location-action { display:none; }
.location-status.is-expanded { padding-bottom:6px; }
.bottom-tools { gap:6px; }

/* ---- Report button (primary map action) ---- */
.report-fab { right: var(--mf-r); bottom: var(--mf-dock); min-height: 48px; padding: 0 16px 0 14px; gap: 8px; border-radius: 24px; font-size: 15px; font-weight: 700; box-shadow: 0 2px 10px #fd5c2559, var(--mf-panel-shadow); }
.report-fab svg { width: 22px; height: 22px; }

/* ---- Attribution / scale / notice ---- */
.maplibregl-ctrl-bottom-right { right: 4px; bottom: max(2px, env(safe-area-inset-bottom)); }
.maplibregl-ctrl-bottom-left { left: var(--mf-l); bottom: max(4px, env(safe-area-inset-bottom)); }
.maplibregl-ctrl-attrib { max-width: calc(100vw - 8px); font: 10px/16px Manrope, system-ui, sans-serif !important; background: #ffffffd9 !important; border-radius: 6px; }
.maplibregl-ctrl-attrib a { display: inline-block; padding: 4px 1px; }
.maplibregl-ctrl-scale { display: none; } /* decorative; would collide with attribution at 320px */
main.is-reporting .maplibregl-ctrl-bottom-right { top: calc(max(var(--report-guidance-bottom, 0px), var(--stack-top)) + 8px); bottom: auto; left: var(--mf-l); right: auto; }
.notice { left: var(--mf-l); right: 68px; bottom: calc(var(--mf-dock) + 60px); width: auto; max-width: none; transform: none; padding: 12px 14px; border-radius: 12px; font-size: 14px; text-align: left; }
.reports-map-status { left: var(--mf-l); right: var(--mf-r); transform: none; width: auto; max-width: none; font-size: 0.875rem; }

/* ---- Report sheet ---- */
main .reports-panel[data-view] {
  left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; height: auto;
  max-height: min(56dvh, calc(100dvh - var(--report-guidance-bottom, 0px) - 84px));
  padding: 0 var(--mf-pad);
  border: 0; border-top: 1px solid var(--mf-line); border-radius: 20px 20px 0 0;
  box-shadow: 0 -6px 24px #063c2e2e;
  --mf-sheet-gap: max(8px, env(safe-area-inset-bottom));
}
main .reports-panel::after { content: ""; display: block; height: max(12px, env(safe-area-inset-bottom)); }
.reports-head { top: 0; gap: 4px; margin: 0 calc(var(--mf-pad) * -1); padding: 8px var(--mf-pad) 6px; border-bottom: 0; }
.reports-head h2 { font-size: 18px; font-weight: 700; line-height: 1.25; }
.reports-head .route-icon-button, .reports-back { min-width: 44px; min-height: 44px; width: 44px; height: 44px; margin: 0; }
.reports-back { margin-left: -10px; }
.reports-head .route-icon-button { margin-right: -10px; }
.report-form { gap: 10px; margin-top: 2px; }
.report-hint { margin: 0; font-size: 13px; line-height: 1.35; color: var(--mf-muted); }
.report-form .reports-error { margin: 0; font-size: 14px; }

.report-types { gap: 10px; }
.report-type { min-height: 72px; gap: 4px; padding: 8px 6px; border-radius: 14px; font-size: 15px; }
.report-type svg { width: 30px; height: 30px; padding: 5px; }

/* "Where" block: one compact row, Use my location beside the label */
.report-where { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; margin: 0; font-size: 15px; line-height: 1.35; }
.report-where p { margin: 0; }
.report-where-text { grid-column: 1; grid-row: 1; font-size: 13px; line-height:1.35; }
.report-where-coords { grid-column: 1; grid-row: 2; font-size: 13px; }
.report-locate { grid-column: 2; grid-row: 1 / 3; align-self: center; min-height: 44px; min-width: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--green); border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; }
.report-locate-status { grid-column: 1 / -1; font-size: 13px; }
.report-where .report-locate { width:44px; height:44px; padding:0; font-size:0; }
.report-locate::before { content:'◎'; font-size:24px; }

.report-tools { gap: 4px; }
.report-tools .reports-link { min-height: 44px; padding: 0 4px; font-size: 14px; }
.reports-link { min-height: 44px; font-size: 14px; }
.report-details textarea { min-height: 72px; font-size: 16px; }
.report-count { font-size: 12px; }

/* Signed-out banner on the quick form is redundant (submit already reads "Sign in to report"); keep it for assistive tech. */
.report-auth-banner:not(.is-detail) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.report-auth-banner.is-detail { margin: 8px 0 0; padding: 8px 10px; font-size: 14px; }
.report-ready { margin: 0; padding: 8px 10px; font-size: 14px; line-height: 1.35; }

.report-go { bottom: var(--mf-sheet-gap, 8px); min-height: 52px; font-size: 17px; box-shadow: 0 -10px 8px #fff, 0 var(--mf-sheet-gap, 8px) 0 #fff; }
.report-go:disabled { box-shadow: 0 -10px 8px #fff, 0 var(--mf-sheet-gap, 8px) 0 #fff; }
.report-fine { font-size: 12px; }

/* Receipt, list and detail views */
.reports-primary, .reports-secondary, .report-receipt .reports-primary, .report-receipt .reports-secondary { min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.reports-panel .reports-seg button, .reports-panel .reports-secondary { min-height: 44px; }
.reports-seg button { font-size: 14px; }
.reports-status { font-size: 14px; }
.report-row { min-height: 56px; padding: 8px 6px; align-items: center; }
.report-row-text strong { font-size: 15px; }
.report-row-meta, .report-row-note { font-size: 13px; }
.detail-fact dt { font-size: 11px; }
.detail-fact dd { font-size: 14px; }
.detail-note { font-size: 14px; }
.detail-update > summary, .detail-note-wrap > summary, .detail-history summary { min-height: 44px; display: flex; align-items: center; font-size: 14px; }

/* ---- Account dialog: bottom sheet on phones ---- */
.auth-dialog { width: 100%; max-width: none; margin: auto 0 0; max-height: min(88dvh, calc(100dvh - 16px)); border: 0; border-top: 1px solid var(--mf-line); border-radius: 20px 20px 0 0; }
.auth-head { padding: 8px 8px 0 16px; }
.auth-head h2 { font-size: 18px; }
.auth-form { gap: 12px; padding: 4px 16px max(18px, env(safe-area-inset-bottom)); }
.auth-tabs button { min-height: 44px; font-size: 14px; }
.auth-field label { font-size: 13px; }
.auth-field input { height: 48px; font-size: 16px; }
.auth-primary, .auth-secondary { min-height: 48px; font-size: 16px; }
.auth-link { min-height: 44px; font-size: 14px; }
.auth-note, .auth-status, .auth-error { font-size: 14px; }
.auth-hint { font-size: 12px; }

/* ---- Guidance on phones: hide top bar, free the top for turn text ---- */
main:has(.route-panel.is-navigating) { --stack-top: max(12px, env(safe-area-inset-top)); }
main:has(.route-panel.is-navigating) .top-bar { display: none; }

/* ---- Short phones ---- */
@media (max-height: 500px) {
  main > #map-controls { flex-direction: row-reverse; align-items: flex-end; bottom: var(--mf-dock); right: calc(var(--mf-r) + 124px); }
  .notice { bottom: calc(var(--mf-dock) + 60px); right: var(--mf-r); }
}

/* ---- Tablet ---- */
@media (min-width: 760px) {
  :root { --edge-top: max(16px, env(safe-area-inset-top)); --brand-h: 48px; --stack-top: calc(var(--edge-top) + var(--brand-h) + 12px); --mf-l: max(16px, env(safe-area-inset-left)); --mf-r: max(16px, env(safe-area-inset-right)); --mf-dock: calc(max(12px, env(safe-area-inset-bottom)) + 28px); }
  .top-bar { right: auto; justify-content: flex-start; gap: 8px; }
  .brand { width: 100px; height: 42px; }
  .brand-panel { padding: 0 8px; }
  .account-button { display:flex; width: auto; padding: 0 14px; gap: 8px; border-radius: 12px; }
  #account-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; font-size: 14px; }

  .search-panel { right: auto; width: 360px; }
  .search-form { grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 0 2px; }
  .directions-open { grid-column: auto; width: auto; height: 44px; margin-left: 2px; padding: 0 14px; font-size: 14px; }
  .directions-open .label-short { display: none; }
  .directions-open .label-full { display: inline; }
  .search-dropdown { max-height: min(460px, calc(100dvh - var(--stack-top) - 100px - var(--search-kb, 0px))); }

  main > #map-controls { top: var(--mf-l); right: var(--mf-r); bottom: auto; flex-direction: column; gap: 10px; }
  main.is-reporting > #map-controls { top: var(--mf-l); }
  .bottom-tools { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; max-width: min(520px, calc(100% - 220px)); }
  .gesture-hint { display: block; padding: 6px 10px; border-radius: 10px; font-size: 12px; }
  .location-status-text { flex: 0 1 auto; }
  .report-fab { bottom: var(--mf-dock); }
  .notice { left: 50%; right: auto; bottom: calc(var(--mf-dock) + 64px); width: max-content; max-width: min(440px, calc(100% - 32px)); transform: translateX(-50%); text-align: center; }
  .reports-map-status { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: min(34rem, calc(100% - 32px)); }

  main .reports-panel[data-view] {
    left: var(--mf-l); right: auto; top: auto; bottom: var(--mf-dock); width: 360px; max-width: calc(100% - 32px);
    max-height: min(640px, calc(100dvh - max(var(--report-guidance-bottom, 0px), var(--stack-top)) - var(--mf-dock) - 12px));
    border: 0; border-radius: 16px; box-shadow: var(--mf-panel-shadow), 0 8px 28px #063c2e1f;
    --mf-pad: 18px;
  }
  main.is-reporting .maplibregl-ctrl-bottom-right { top: auto; bottom: max(2px, env(safe-area-inset-bottom)); left: auto; right: 4px; }
  .maplibregl-ctrl-scale { display: block; }
  .maplibregl-ctrl-bottom-left { left: var(--mf-l); }
  .maplibregl-ctrl-attrib { font-size: 11px !important; }

  .auth-dialog { width: min(400px, calc(100% - 32px)); margin: auto; max-height: calc(100dvh - 32px); border: 1px solid var(--mf-line); border-radius: 18px; }
}

/* ---- Travel mode: Drive / Ride / Walk, three equal 44px targets with icon and text ---- */
.route-modes { display: grid; grid-template-columns: repeat(3, minmax(44px, 1fr)); }
.route-modes .route-mode { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; height: 44px; padding: 0 6px; font-size: 13px; }
.route-modes .route-mode svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Secondary Ride type choice: shown only while Ride is selected (the hidden attribute), hidden during guidance. */
.route-panel .route-submodes { display: grid; grid-template-columns: repeat(2, minmax(44px, 1fr)); gap: 6px; margin-top: 8px; }
.route-panel .route-submodes[hidden], .route-panel.is-navigating .route-submodes { display: none; }
.route-submodes .route-submode { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid #dfe5e1; border-radius: 11px; background: #fff; color: var(--green); font: inherit; font-size: 13px; }
.route-submodes .route-submode[aria-pressed="true"] { background: var(--green); color: #fff; font-weight: 600; }
.route-submodes .route-submode svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Desktop ---- */
@media (min-width: 1100px) {
  :root { --mf-l: max(24px, env(safe-area-inset-left)); --mf-r: max(24px, env(safe-area-inset-right)); --edge-top: max(24px, env(safe-area-inset-top)); }
  .search-panel { width: 380px; }
  main .reports-panel[data-view] { width: 380px; max-width: calc(100% - 48px); }
  main > #map-controls { top: var(--edge-top); }
  main.is-reporting > #map-controls { top: var(--edge-top); }
  .auth-dialog { width: min(420px, calc(100% - 48px)); }
  .search-results li:hover { background: #edf4ef; }
}

/* ---- Landscape phones: reporting panel becomes a right-hand column, map and guide stay free ---- */
@media (max-height: 480px) and (min-width: 480px) {
  main .reports-panel[data-view] {
    left: auto; right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); bottom: auto;
    width: min(264px, 50%); max-width: none; height: auto; max-height: calc(100dvh - 16px);
    border: 1px solid var(--mf-line); border-radius: 16px; box-shadow: var(--mf-panel-shadow);
    --mf-pad: 12px;
  }
  main .reports-panel::after { height: 10px; }
  .reports-head { padding-top: 4px; padding-bottom: 4px; }
  .reports-head h2 { font-size: 17px; }
  .report-form { gap: 8px; }
  .report-type { min-height: 56px; }
  .report-type svg { width: 26px; height: 26px; padding: 4px; }
  .report-go { min-height: 48px; }
  main.is-reporting > #map-controls { flex-direction: column; top: max(8px, env(safe-area-inset-top)); bottom: auto; right: calc(min(264px, 50%) + max(8px, env(safe-area-inset-right)) + 8px); }
  main.is-reporting .maplibregl-ctrl-bottom-right { top: auto; bottom: max(2px, env(safe-area-inset-bottom)); left: 8px; right: auto; }
  main.is-reporting .maplibregl-ctrl-scale { display: none; }
  .auth-dialog { width: min(420px, calc(100% - 32px)); margin: auto; max-height: calc(100dvh - 16px); border: 1px solid var(--mf-line); border-radius: 16px; }
}

@media (forced-colors: active) {
  .account-button, .location-button, .report-fab { border: 1px solid CanvasText; }
  .search-results li[aria-selected=true] { outline: 2px solid Highlight; }
}