/* Community Sighting Map: full-screen app */
html.csm-html, html.csm-html body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #eef3f8; }

.csm-app {
  --blue: #0f4c81;
  --blue-deep: #0a3761;
  --blue-soft: #e7f0f9;
  --blue-line: #d3dfeb;
  --ink: #0e1b2b;
  --muted: #5a6b7e;
  --surface: #ffffff;
  --alert: #d62828;
  --alert-soft: #fdeceb;
  --radius: 16px;
  --shadow: 0 10px 40px rgba(10, 55, 97, .18), 0 2px 6px rgba(10, 55, 97, .08);
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.csm-app *, .csm-app *::before, .csm-app *::after { box-sizing: border-box; }
.csm-app [hidden] { display: none !important; }
.csm-app button, .csm-app input, .csm-app textarea { font: inherit; color: inherit; }
.csm-app button { cursor: pointer; }
.csm-app a { color: var(--blue); font-weight: 700; }
.csm-app :focus-visible { outline: 3px solid #6aa8ff; outline-offset: 2px; }
.csm-app svg { width: 100%; height: 100%; display: block; }
.csm-app h1, .csm-app h2, .csm-app h3 { margin: 0; letter-spacing: -.015em; }

/* Top bar */
.csm-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 60px; padding: 0 16px; padding-top: env(safe-area-inset-top);
  background: var(--blue-deep); color: #fff; z-index: 30;
}
.csm-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.csm-shield { width: 28px; height: 28px; flex: none; color: #8cc2ff; }
.csm-brandname { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csm-app .csm-sos {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  background: var(--alert); color: #fff; text-decoration: none; font-weight: 800; font-size: 15px;
  height: 40px; padding: 0 16px; border-radius: 999px;
}
.csm-sos svg { width: 16px; height: 16px; }

/* Stage */
.csm-stage { position: relative; overflow: hidden; }
.csm-map { position: absolute; inset: 0; background: #dfe8f1; }
.csm-maperr { margin: 0; padding: 90px 24px; text-align: center; color: var(--muted); font-weight: 600; }
.csm-iw { font-family: Manrope, system-ui, sans-serif; font-size: 14px; line-height: 1.45; display: grid; gap: 2px; padding: 2px 4px; }
.csm-iw span { color: var(--muted); }

/* Floating search */
.csm-float { position: absolute; z-index: 15; top: 12px; left: 12px; right: 12px; display: flex; gap: 8px; }
.csm-search { flex: 1; min-width: 0; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.csm-searchslot gmp-place-autocomplete { width: 100%; color-scheme: light; }
.csm-geoform { display: flex; }
.csm-geoform input { flex: 1; min-width: 0; border: 0; padding: 0 14px; height: 48px; background: transparent; outline: none; }
.csm-geoform button { border: 0; background: var(--blue); color: #fff; font-weight: 700; padding: 0 16px; }
.csm-locate { flex: none; width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--surface); color: var(--blue); box-shadow: var(--shadow); padding: 12px; }
.csm-locate.is-busy { animation: csm-pulse 1s ease-in-out infinite; }
@keyframes csm-pulse { 50% { opacity: .45; } }
.csm-app.is-form .csm-float { display: none; }

/* Sheet (mobile: bottom sheet) */
.csm-sheet {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  max-height: 58%;
  background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(10, 55, 97, .16);
  padding-bottom: env(safe-area-inset-bottom);
  transition: max-height .28s cubic-bezier(.2, .8, .2, 1);
}
.csm-handle { flex: none; display: grid; place-items: center; height: 26px; border: 0; background: none; width: 100%; }
.csm-handle span { width: 42px; height: 5px; border-radius: 3px; background: var(--blue-line); }
.csm-sheet-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 18px; -webkit-overflow-scrolling: touch; overflow-anchor: none; }
.csm-sheet[data-state="browse-min"] { max-height: 132px; }
.csm-sheet[data-state="browse-min"] .csm-browse > :not(.csm-cta) { display: none; }
.csm-sheet[data-state="wiz-map"] { max-height: 48%; }
.csm-sheet[data-state="wiz-map-min"] { max-height: 176px; }
.csm-sheet[data-state="wiz-map-min"] .csm-wiztop > :not(.csm-progress):not(.csm-steptitle) { display: none; }
.csm-sheet[data-state="wiz-form"] { max-height: 100%; top: 0; border-radius: 0; }
.csm-sheet[data-state="wiz-form"] .csm-handle { visibility: hidden; height: 10px; }

/* Buttons */
.csm-app .csm-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 54px; border: 0; border-radius: 14px;
  background: var(--blue); color: #fff; font-weight: 800; font-size: 17px;
  transition: background .15s ease, transform .1s ease;
}
.csm-app .csm-btn:hover { background: var(--blue-deep); }
.csm-btn:active { transform: scale(.985); }
.csm-btn:disabled { opacity: .6; }
.csm-app .csm-btn-ghost { background: var(--blue-soft); color: var(--blue-deep); }
.csm-app .csm-btn-ghost:hover { background: #d8e7f5; }
.csm-app .csm-next.is-skip { background: var(--blue-soft); color: var(--blue-deep); }
.csm-app .csm-linkbtn { border: 0; background: none; padding: 4px 0; color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Browse panel */
.csm-browse { display: grid; gap: 18px; }
.csm-toast { display: flex; gap: 10px; align-items: flex-start; background: var(--blue-soft); border: 1px solid var(--blue-line); border-radius: 12px; padding: 12px 12px 12px 14px; }
.csm-toast p { margin: 0; flex: 1; font-size: 15px; }
.csm-toast button { flex: none; width: 28px; height: 28px; border: 0; background: none; padding: 4px; color: var(--muted); }
.csm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.csm-stats div { background: var(--blue-soft); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.csm-stats b { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; color: var(--blue-deep); }
.csm-stats span { display: block; font-size: 12.5px; color: var(--muted); }
.csm-seg { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; background: var(--blue-soft); border-radius: 12px; padding: 4px; gap: 4px; }
.csm-seg button { border: 0; background: none; border-radius: 9px; height: 38px; font-weight: 700; font-size: 14px; color: var(--muted); }
.csm-seg button[aria-pressed="true"] { background: var(--surface); color: var(--blue-deep); box-shadow: 0 1px 4px rgba(10, 55, 97, .14); }
.csm-browse h2 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.csm-empty { margin: 0; color: var(--muted); font-size: 15px; }
.csm-gridwrap { overflow-x: auto; }
.csm-grid { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12px; table-layout: fixed; }
.csm-grid th { font-weight: 700; color: var(--muted); text-align: center; padding: 0 0 2px; white-space: nowrap; }
.csm-grid tbody th { text-align: left; width: 38px; }
.csm-grid td { height: 30px; border-radius: 6px; text-align: center; font-weight: 800; background: rgba(15, 76, 129, var(--a)); color: var(--blue-deep); }
.csm-grid td.is-hot { color: #fff; }
.csm-grid td:empty { background: #f2f6fa; }
.csm-view button { font-size: 13px; }
.csm-heatkey { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.csm-heatkey span { flex: none; width: 64px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #6aa8ff, #1f6fd1, #f4a100, #d62828); }
.csm-heatkey p { margin: 0; font-size: 13.5px; color: var(--muted); }
.csm-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.csm-legend li { display: flex; align-items: center; gap: 10px; }
.csm-linekey { flex: none; width: 18px; height: 4px; border-radius: 2px; }
.csm-legend i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--blue-line); flex: none; }
.csm-help { background: var(--alert-soft); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; }
.csm-help p { margin: 0; }
.csm-help p + p { margin-top: 6px; }
.csm-help a { color: var(--alert); }
.csm-fine { margin: 0; font-size: 13px; color: var(--muted); }

/* Wizard */
.csm-progress { display: grid; gap: 4px; margin: 4px 0 12px; }
.csm-progress i { height: 5px; border-radius: 3px; background: var(--blue-line); transition: background .2s ease; }
.csm-progress i.on { background: var(--blue); }
.csm-stepno { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.csm-steptitle { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; line-height: 1.2; margin: 2px 0 6px; }
.csm-pinkey { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--blue-line); }
.csm-hint { margin: 0 0 14px; color: var(--muted); transition: color .2s ease; }
.csm-hint.is-flash { color: var(--blue); font-weight: 700; }
.csm-wizbody { padding-top: 6px; }

.csm-field { margin-bottom: 20px; }
.csm-label { display: block; font-weight: 700; margin-bottom: 8px; }
.csm-input { display: block; width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--blue-line); border-radius: 12px; background: var(--surface); font-size: 16px; }
.csm-input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 4px rgba(15, 76, 129, .12); }
textarea.csm-input { resize: vertical; }
.csm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.csm-chip { position: relative; }
.csm-chip input { position: absolute; opacity: 0; pointer-events: none; }
.csm-chip span { display: block; padding: 10px 16px; border: 1.5px solid var(--blue-line); border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 15px; transition: background .12s ease, border-color .12s ease; }
.csm-chip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.csm-chip input:focus-visible + span { outline: 3px solid #6aa8ff; outline-offset: 2px; }
.csm-app .csm-chipbtn { font-family: inherit; padding: 10px 16px; border: 1.5px solid var(--blue-line); border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 15px; }
.csm-app .csm-chipbtn.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.csm-datetime { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
.csm-datetime .csm-input { -webkit-appearance: none; appearance: none; }
.csm-subtle { margin: -4px 0 16px; color: var(--muted); font-size: 14px; }
.csm-toggle { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-weight: 600; cursor: pointer; }
.csm-toggle input { position: absolute; opacity: 0; }
.csm-toggle span { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--blue-line); position: relative; transition: background .15s ease; }
.csm-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
.csm-toggle input:checked + span { background: var(--blue); }
.csm-toggle input:checked + span::after { transform: translateX(18px); }
.csm-toggle input:focus-visible + span { outline: 3px solid #6aa8ff; outline-offset: 2px; }
.csm-day { margin: -12px 0 20px; font-weight: 700; color: var(--blue); }
.csm-warn { margin: -8px 0 0; font-size: 14px; color: var(--alert); font-weight: 600; }
.csm-callout { background: var(--alert-soft); border-radius: 12px; padding: 12px 14px; margin: -8px 0 20px; font-size: 15px; }
.csm-callout a { color: var(--alert); }
.csm-hp { position: absolute; left: -9999px; }

.csm-review { margin: 0 0 24px; border: 1.5px solid var(--blue-line); border-radius: 14px; overflow: hidden; }
.csm-review > div { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 12px 14px; }
.csm-review > div + div { border-top: 1px solid var(--blue-line); }
.csm-review dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.csm-review dd { margin: 0; grid-column: 1; font-weight: 600; }
.csm-review .csm-linkbtn { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.csm-contact h3 { font-size: 17px; font-weight: 800; }
.csm-contact p { margin: 2px 0 12px; color: var(--muted); font-size: 14px; }

.csm-wiznav { flex: none; padding: 10px 18px 14px; border-top: 1px solid var(--blue-line); background: var(--surface); }
.csm-app .csm-err { margin: 0 0 8px; color: var(--alert); font-weight: 700; font-size: 14.5px; }
.csm-app .csm-err:empty { display: none; }
.csm-navrow { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }

/* Gate */
.csm-gate {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center; padding: 20px;
  background: rgba(10, 55, 97, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.csm-app.is-locked .csm-float, .csm-app.is-locked .csm-sheet { visibility: hidden; }
.csm-gatecard {
  width: 100%; max-width: 420px; background: var(--surface); border-radius: 24px;
  padding: 32px 26px 22px; box-shadow: 0 30px 80px rgba(5, 25, 50, .35); text-align: center;
}
.csm-gateicon { display: block; width: 56px; height: 56px; margin: 0 auto 16px; color: var(--blue); }
.csm-gatecard h1 { font-size: 24px; font-weight: 800; line-height: 1.2; text-wrap: balance; }
.csm-gatecard > p { margin: 10px 0 22px; color: var(--muted); text-wrap: pretty; }
.csm-digits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.csm-digit {
  width: 100%; min-width: 0; height: 68px; text-align: center; font-size: 30px; font-weight: 800;
  border: 2px solid var(--blue-line); border-radius: 14px; background: #f7fafd; color: var(--blue-deep);
  caret-color: var(--blue); font-variant-numeric: tabular-nums;
}
.csm-digit:focus { border-color: var(--blue); background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(15, 76, 129, .14); }
.csm-pinform .csm-btn { margin-top: 8px; }
.csm-pinform.is-busy .csm-btn { opacity: .7; pointer-events: none; }
.csm-pinform.is-shake .csm-digits { animation: csm-shake .35s ease; }
@keyframes csm-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.csm-gatefoot { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.csm-gatefoot a { color: var(--alert); }

/* Desktop: floating side panel */
@media (min-width: 900px) {
  .csm-stats b { font-size: 18px; }
  .csm-top { height: 64px; padding: 0 24px; }
  .csm-brandname { font-size: 18px; }
  .csm-sheet, .csm-sheet[data-state] {
    left: 16px; top: 16px; bottom: 16px; right: auto; width: 410px;
    max-height: none; border-radius: var(--radius); box-shadow: var(--shadow);
  }
  .csm-sheet .csm-handle, .csm-sheet[data-state] .csm-handle { visibility: hidden; height: 14px; }
  .csm-sheet[data-state="browse-min"] .csm-browse > :not(.csm-cta),
  .csm-sheet[data-state="wiz-map-min"] .csm-wiztop > * { display: revert; }
  .csm-sheet-scroll { padding: 4px 22px 22px; }
  .csm-wiznav { padding: 12px 22px 18px; border-radius: 0 0 var(--radius) var(--radius); }
  .csm-float { left: 442px; right: auto; width: min(460px, calc(100% - 520px)); top: 16px; }
  .csm-app.is-form .csm-float { display: flex; }
  .csm-gatecard { padding: 40px 36px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .csm-app *, .csm-app *::after { animation: none !important; transition: none !important; }
}