/* Global Web material contract: docs/ui-design.md. Layout and actions remain in mvp.css / mvp-app.js. */
body.compact-home {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  --glass-ink: #182536;
  --glass-muted: #475768;
  --glass-accent: #075cb9;
  --glass-danger: #a12838;
  --glass-line: rgb(28 48 70 / 13%);
  --glass-edge: rgb(255 255 255 / 78%);
  --glass-clear: rgb(248 251 255 / 36%);
  --glass-sheet: rgb(247 250 254 / 72%);
  --glass-inner: rgb(255 255 255 / 24%);
  --glass-active: rgb(157 207 255 / 48%);
  --glass-hover: rgb(250 253 255 / 61%);
  --glass-highlight: linear-gradient(145deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 7%) 44%, rgb(255 255 255 / 25%));
  --glass-shadow: 0 7px 24px rgb(20 39 60 / 16%), 0 1px 4px rgb(20 39 60 / 8%);
  --glass-rim: inset 0 1px 1px rgb(255 255 255 / 92%), inset 0 -1px 1px rgb(255 255 255 / 22%);
  --ink: var(--glass-ink);
  --muted: var(--glass-muted);
  --green: var(--glass-accent);
  --red: var(--glass-danger);
  --line: var(--glass-line);
  --paper: #f5f8fc;
  color: var(--glass-ink);
}

/* Only material properties override older component colors; component dimensions stay intact. */
.compact-home.locating-on-entry #map { visibility: hidden; }
.compact-home.locating-on-entry .map-pane::after { content: '正在定位…'; position: absolute; z-index: 450; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border: 1px solid var(--glass-edge); border-radius: 999px; color: var(--glass-ink); background: var(--glass-highlight), var(--glass-sheet); font-size: 14px; pointer-events: none; }
.compact-home :is(button, summary.secondary, input, select, textarea):not(:where(.event-pin, .cluster-pin, .route-edit-pin, .map-marker, .selected-location-marker, .selected-location-pin, [type="checkbox"])) {
  color: var(--control-ink, var(--glass-ink)) !important;
  background: var(--glass-highlight), var(--control-fill, var(--glass-clear)) !important;
  border: 1px solid var(--glass-edge) !important;
  box-shadow: var(--glass-rim), var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  text-shadow: 0 1px 1px rgb(255 255 255 / 32%);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.compact-home :is(.primary, #quick-post) { --control-ink: var(--glass-accent); }
.compact-home :is(.danger, #clear-local) { --control-ink: var(--glass-danger); }
.compact-home :is(button, summary.secondary):focus-visible {
  outline: 3px solid var(--glass-accent);
  outline-offset: 3px;
}
.compact-home button:disabled { opacity: .58; cursor: default; }
.compact-home button:disabled[aria-busy="true"] { opacity: .82; }
.compact-home :is(button, summary.secondary):not(:disabled):not(:where(.event-pin, .cluster-pin, .route-edit-pin, .map-marker, .selected-location-marker, .selected-location-pin)):active { transform: scale(.97); }
@media (hover: hover) {
  .compact-home :is(button, summary.secondary):not(:disabled):hover { --control-fill: var(--glass-hover); }
}
.compact-home :is(button[aria-pressed="true"], button[aria-expanded="true"]) {
  --control-fill: var(--glass-active);
  --control-ink: var(--glass-accent);
}

/* Two independent pieces of glass. The empty space between them belongs to the map. */
.compact-home[data-view="nearby"]:not(.showing-detail) :is(.drawer, #view-nearby, .publisher, .publisher > .inline-actions) {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}
.compact-home .publisher { padding: 0; border-radius: 0; }
.compact-home .publisher > .inline-actions:has(> #nearby) { display: grid; grid-template-columns: minmax(0, 1fr) 98px minmax(0, 1fr); gap: 12px; align-items: center; }
.compact-home .publisher #quick-post, .compact-home .publisher #nearby {
  min-height: 58px;
  border-radius: 999px;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0;
  pointer-events: auto;
}
.compact-home .publisher #quick-post { grid-column: 2; flex: none; width: max-content; max-width: none; min-height: 48px; padding: 12px 18px; font-size: 15px; }
.compact-home .publisher #nearby { grid-column: 3; justify-self: start; flex: 0 0 48px; width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; }
.compact-home .publisher #nearby svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compact-home .publisher #nearby[aria-busy="true"] svg { opacity: .55; }
.compact-home .map-tools { gap: 12px; }
.compact-home .map-tools button { border-radius: 50%; }
.compact-home .map-tools svg { width: 22px; height: 22px; }

/* Shared sheets: stronger diffusion for longer text; the controls inside do not stack blurs. */
.compact-home:is([data-view="routes"], [data-view="profile"], .showing-detail) .drawer,
.compact-home[data-view="profile"]:not(.showing-detail) .drawer,
.compact-home dialog,
.compact-home.drawing-route #draw-options,
.compact-home :is(.toast, .alert-strip, .geo-intro, .map-caption, .map-note) {
  color: var(--glass-ink);
  background: var(--glass-highlight), var(--glass-sheet);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-rim), var(--glass-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  backdrop-filter: blur(26px) saturate(155%);
}
.compact-home:is([data-view="routes"], [data-view="profile"], .showing-detail) .drawer,
.compact-home dialog { border-radius: 26px; }
.compact-home.drawing-route #draw-card { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.compact-home.drawing-route #draw-card :is(#draw-status, #draw-consent) { background: var(--glass-highlight), var(--glass-sheet); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.compact-home dialog::backdrop { background: rgb(26 39 55 / 16%); }
.compact-home :where(.drawer, dialog, #draw-options) :is(button, input, select, textarea, summary.secondary) {
  --control-fill: var(--glass-inner);
  box-shadow: var(--glass-rim), 0 2px 7px rgb(20 39 60 / 5%) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.compact-home .publisher :is(#quick-post, #nearby) {
  --control-fill: var(--glass-clear);
  box-shadow: var(--glass-rim), var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
}
/* Route entry is two separate capsules; the map remains visible between them. */
.compact-home[data-view="routes"]:not(.showing-detail) .drawer {
  background: none; border: 0; box-shadow: none; overflow: visible;
  -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none;
}
.compact-home #view-routes .record-controls > button {
  --control-fill: var(--glass-clear);
  box-shadow: var(--glass-rim), var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  pointer-events: auto; animation: draw-tools-rise 240ms cubic-bezier(.2, .75, .3, 1);
}
.compact-home :is(.drawer, dialog, #draw-card) :is(button[aria-pressed="true"], button[aria-expanded="true"]) {
  --control-fill: var(--glass-active);
  --control-ink: var(--glass-accent);
}
.compact-home :is(.profile-menu button, .record-controls button, .draw-main-actions button, .segment-control button, .dialog-close, .draw-icon-button, .settings-buttons button) { border-radius: 999px !important; }
.compact-home :is(input:not([type="checkbox"]), select) { border-radius: 14px; }
.compact-home select option { background: var(--paper); color: var(--glass-ink); }
.compact-home .setting-row input[type="checkbox"] { background: rgb(87 106 128 / 25%); box-shadow: inset 0 1px 3px rgb(27 43 63 / 14%); }
.compact-home .setting-row input[type="checkbox"]:checked { background: #1676d4; }
.compact-home .setting-row input[type="checkbox"]:focus-visible { outline: 3px solid var(--glass-accent); outline-offset: 3px; }
.compact-home :is(.route-card, .mine-item, .detail-summary, .settings-status, .vote-assessment, .route-notice, .history-note, .history-card, .event-card) {
  color: var(--glass-ink) !important;
  background: var(--glass-inner);
  border-color: var(--glass-line);
}
.compact-home :is(.route-card.active, .vote-assessment[data-assessment="CONSISTENT"]) { background: rgb(103 178 243 / 14%); }
.compact-home :is(.notice-error, .vote-assessment[data-assessment="CONFLICT"]) { color: #81330e !important; background: rgb(255 218 170 / 60%); }
.compact-home :is(.detail-source, .detail-pane p, .pane-head p, .event-meta, .event-top, .event-card p, .route-card p, .mine-item p, .vote-heading > span, .vote-recent, .vote-caption, .feedback-hint, .timeline-item, .timeline-item small, .setting-row small, .privacy-details summary, dialog p, .profile-record-info small, .profile-dialog-header h2 small, .empty, .empty p, #draw-status, #draw-privacy, #draw-disclosure, #draw-attribution, #draw-attribution a) {
  color: var(--glass-muted);
}
.compact-home .vote-panel .vote-choice { border-radius: 20px; }
.compact-home .vote-panel .vote-choice:disabled { opacity: .85; }
.compact-home .vote-choice::after { background: #539be0; }
.compact-home .timeline { border-color: var(--glass-line); }
.compact-home .timeline-item::before { background: #5791c5; }
.compact-home .toast { border-radius: 999px; bottom: calc(110px + env(safe-area-inset-bottom)); font-weight: 550; }
.compact-home .leaflet-control-attribution { background: rgb(250 252 255 / 72%) !important; color: var(--glass-muted); }
.compact-home .leaflet-control-attribution a { color: var(--glass-muted); }

/* Map symbols preserve category meaning and precise anchors; no gesture transform is applied. */
.compact-home :is(.event-pin, .cluster-pin, .route-edit-pin) {
  border-color: rgb(255 255 255 / 88%);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 80%), 0 3px 12px rgb(22 40 63 / 24%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}
.compact-home .event-pin { background: rgb(151 96 26 / 80%); }
.compact-home .event-pin.closure { background: rgb(42 99 158 / 80%); }
.compact-home .event-pin.traffic { background: rgb(159 63 45 / 80%); }
.compact-home .event-pin.other, .compact-home .cluster-pin, .compact-home .route-edit-pin { background: rgb(28 105 109 / 80%); }
.compact-home .event-pin.COMMUNITY_ENDED { background: rgb(89 107 116 / 80%); }
.compact-home .route-edit-pin.selected { background: rgb(155 102 28 / 85%); }
.compact-home :is(.map-marker, .selected-location-marker, .route-edit-pin):active { transform: none; }
.compact-home .selected-location-marker { pointer-events: auto; }
.compact-home .selected-location-pin { width: 44px; height: 46px; padding: 0; border: 0; background: none; pointer-events: auto; }
.compact-home #map { -webkit-touch-callout: none; }
.location-publish-anchor { position: relative; width: 44px; height: 46px; }
.compact-home .location-publish-anchor #quick-post {
  position: absolute; left: 52px; top: 0; width: max-content; min-height: 44px;
  padding: 10px 15px; border-radius: 999px; font-size: 14px; font-weight: 650; white-space: nowrap;
  transform-origin: left center; animation: pin-action-pop 240ms ease-out;
}
.compact-home .location-publish-anchor.send-left #quick-post { left: auto; right: 52px; transform-origin: right center; --pop-x: 6px; }
.compact-home .location-publish-anchor.send-below #quick-post { top: 46px; }
@keyframes pin-action-pop {
  0% { opacity: 0; translate: var(--pop-x, -6px) 0; scale: .84; }
  70% { opacity: 1; translate: 0 0; scale: 1.03; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
.compact-home.showing-detail .selected-location-marker { display: none; }
.route-add-anchor { position: relative; width: 44px; height: 44px; }
.compact-home .pick-pin { color: var(--glass-accent); outline-color: var(--glass-accent); background: var(--glass-clear); }

/* Drawing tools rise above the unchanged three-button navigation. */
.compact-home.drawing-route #draw-card .draw-main-actions:not(:has(> button:not([hidden]))) { display: none; }
.compact-home.drawing-route #draw-card .draw-bottom > :not([hidden]),
.compact-home.drawing-route #draw-card .draw-main-actions > button:not([hidden]) { animation: draw-tools-rise 240ms cubic-bezier(.2, .75, .3, 1); }
.compact-home.drawing-route #draw-card #draw-options { max-height: calc(100dvh - 270px); }
.compact-home.drawing-route .toast { bottom: calc(216px + env(safe-area-inset-bottom)); }
.compact-home.drawing-route dialog.route-confirm { bottom: calc(84px + env(safe-area-inset-bottom)); }
@keyframes draw-tools-rise {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

/* One compact point sheet: description, evidence, then actions; secondary information folds away. */
.compact-home.showing-detail .drawer { width: min(420px, calc(100% - 32px)); max-height: 70dvh; overflow: auto; }
.compact-home.showing-detail .detail-pane { padding: 10px 14px 12px; }
.point-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.point-heading > span { font-size: 11px; color: var(--glass-muted); }
.compact-home #close-detail { display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; font-size: 21px; }
.point-note { margin: 0 0 12px; }
.compact-home #event-note { display: block; width: 100%; min-height: 62px; max-height: 120px; padding: 10px 12px; resize: vertical; border-radius: 16px; font: inherit; font-size: 16px; line-height: 1.4; }
.compact-home #event-note:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 2px; }
.note-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.note-actions > span { font-size: 10px; color: var(--glass-muted); line-height: 1.5; }
.compact-home #save-note { min-height: 36px; flex: none; padding: 7px 12px; border-radius: 999px; font-size: 12px; }
.compact-home #note-content { margin: 0; color: var(--glass-ink); font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 120px; overflow: auto; }
.point-assessment { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.compact-home .point-assessment #detail-title { margin: 0; font-size: 17px; line-height: 1.5; letter-spacing: -.3px; }
.point-assessment #detail-title[data-assessment="CONFLICT"] { color: #923e14; }
.point-assessment #detail-title[data-assessment="CONSISTENT"] { color: var(--glass-accent); }
#detail-updated { font-size: 10px; color: var(--glass-muted); white-space: nowrap; }
.compact-home #vote-assessment { margin: 4px 0 10px; padding: 0; background: none; border: 0; border-radius: 0; color: var(--glass-muted); font-size: 11px; line-height: 1.6; }
.point-vote-actions, .point-extra-votes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compact-home .point-vote-actions .vote-choice, .compact-home .point-extra-votes .vote-choice { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 10px 13px; border-radius: 999px; font-size: 12px; }
.point-vote-actions .vote-count, .point-extra-votes .vote-count { font-size: 16px; }
.point-vote-actions .vote-choice::after, .point-extra-votes .vote-choice::after { display: none; }
.point-vote-status { margin: 8px 0 0; font-size: 11px; color: var(--glass-muted); }
.point-more { margin-top: 10px; border-top: 1px solid var(--glass-line); }
.point-more > summary { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding-top: 5px; font-size: 11px; color: var(--glass-muted); cursor: pointer; list-style: none; }
.point-more > summary::-webkit-details-marker { display: none; }
.point-more > summary::after { content: '+'; font-size: 18px; }
.point-more[open] > summary::after { content: '−'; }
.point-more > summary:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 2px; }
.point-more .point-extra-votes { margin: 8px 0 12px; }
.compact-home .point-more :is(.detail-summary, .mine-item) { padding: 8px 0; margin: 8px 0; background: none; border: 0; border-radius: 0; }
.point-more #vote-total { font-size: 11px; margin: 8px 0; }
.point-more .inline-actions > button { flex: 1; text-decoration: none; }
.point-more .section-title { margin: 14px 0 10px; }
.reported-note { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Readable fallbacks are shared by every control and panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.compact-home { --glass-clear: #f0f5fa; --glass-sheet: #f3f7fb; --glass-inner: #eaf1f8; --glass-active: #c3dff8; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body.compact-home { --glass-clear: #f4f8fc; --glass-sheet: #f5f8fc; --glass-inner: #eaf1f8; --glass-active: #c3dff8; --glass-edge: #71859b; --glass-highlight: linear-gradient(transparent, transparent); }
  .compact-home :is(button, input, select, textarea, dialog, .drawer, #draw-card, .toast) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .compact-home *, .compact-home *::before, .compact-home *::after { transition: none !important; animation: none !important; }
  .compact-home :is(button, summary.secondary):not(:disabled):active { transform: none; }
}
@media (forced-colors: active) {
  .compact-home :is(button, input, select, textarea, summary.secondary, dialog, .drawer, #draw-card, .toast) { color: ButtonText !important; background: Canvas !important; border-color: ButtonText !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .compact-home :is(button[aria-pressed="true"], button[aria-expanded="true"]) { color: HighlightText !important; background: Highlight !important; }
  .compact-home:is([data-view="nearby"], [data-view="routes"]):not(.showing-detail) .drawer, .compact-home.drawing-route #draw-card { background: transparent !important; border: 0 !important; }
}