/* Shared presentation for the reporting flow. */
:root {
  --blue: #0066cc;
  --focus: #0071e3;
  --ink: #1d1d1f;
  --muted: #707078;
  --canvas: #f5f5f7;
  --line: #dedee4;
  --surface: #fafafc;
  --selected: #edf5ff;
}
body { letter-spacing: 0; }
button, input, textarea, select { font-family: inherit; }
main { display: block; max-width: 1500px; margin: auto; padding: 48px 40px 0; }
.wrap { max-width: 1420px; }
.intro { padding: 0 0 34px; text-align: center; }
.intro .portal-label { font-size: 17px; font-weight: 700; color: var(--blue); margin: 0 0 10px; letter-spacing: .4px; }
h1 { font-size: clamp(25px, 2.35vw, 36px); line-height: 1.42; letter-spacing: -.4px; }
.intro > p:last-child { max-width: 680px; margin: 10px auto 0; font-size: 14px; line-height: 1.7; }
.workspace { display: block; padding: 0 0 64px; }
.card { overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 24px; background: white; }
.progress-panel { padding: 14px 20px 15px; border-bottom: 1px solid var(--line); background: var(--surface); }
.progress-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.progress-meta strong { font-weight: 600; }
.progress-meta > span { color: var(--focus); font-weight: 600; }
.progress-track { height: 4px; background: #e1e1e5; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress-track > span { display: block; width: 25%; height: 100%; background: #1479ff; border-radius: inherit; transition: width .2s; }
.progress-panel .steps { display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; margin: 12px 0 0; padding: 0 0 1px; }
.progress-panel .steps::-webkit-scrollbar { display: none; }
.progress-panel .steps li { min-height: 34px; flex: 0 0 auto; gap: 5px; align-items: center; padding: 5px 9px; color: var(--muted); border: 1px solid transparent; border-radius: 999px; }
.progress-panel .steps li::before { display: none; }
.progress-panel .steps strong { font-size: 11px; white-space: nowrap; max-width: none; padding: 0; font-weight: 400; }
.progress-panel .steps .current { background: var(--blue); color: white; }
.progress-panel .steps .current strong { font-weight: 600; }
.progress-panel .steps .done { background: var(--selected); color: var(--blue); }
.card form { padding: 48px 60px 32px; }
.card form > section:focus { outline: none; }
.form-top { display: none; }
.card h2 { font-size: clamp(28px, 2.5vw, 40px); letter-spacing: -.5px; line-height: 1.5; }
.description { color: var(--muted); font-size: 17px; line-height: 1.8; margin: 12px 0 36px; }
em { color: #dc243d; margin-left: 4px; }
.field, legend { font-size: 17px; font-weight: 600; color: var(--blue); }
.field { margin: 24px 0 0; }
.field input, .field textarea, .field select {
  width: 100%; display: block; min-height: 56px; padding: 14px 18px;
  margin-top: 12px; border: 1px solid #d2d4dc; border-radius: 12px;
  background: white; color: var(--ink); font-size: 16px; font-weight: 400; line-height: 1.7;
  transition: border-color .16s, background .16s;
}
.field input::placeholder, .field textarea::placeholder { color: #8e9099; font-size: 15px; }
.field select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23707078' stroke-width='1.5'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.field select:invalid { color: #8e9099; }
.field select option, .field select optgroup { color: var(--ink); }
.field select:disabled, .field input:disabled { background-color: #eeeef2; color: #94949c; cursor: not-allowed; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid #0071e32b; outline-offset: 2px; border-color: var(--focus); }
.field textarea { min-height: 150px; }
.panel-field, .subcategory-wrap, .station-box, .location-fields, #contact-fields,
.card form > section > .field, #suspect-name, #category-other,
.card form > section > fieldset { background: var(--surface); border-radius: 20px; padding: 28px 30px; }
.card form > section > .panel-field { margin-top: 0; }
.panel-field::before { content: ""; display: inline-block; width: 22px; height: 19px; margin-right: 10px; vertical-align: -3px; background: var(--focus); clip-path: polygon(0 10%, 38% 10%, 48% 27%, 100% 27%, 92% 100%, 7% 100%); }
.card form > section > fieldset { margin-top: 28px; margin-bottom: 0; }
.card form > section > fieldset > legend { float: left; width: 100%; margin: 0 0 16px; padding: 0; }
.card form > section > fieldset > legend + * { clear: both; }
.subcategory-wrap, .location-fields, #contact-fields, #suspect-name, #category-other { margin-top: 28px; }
#suspect-name > .field, #category-other > .field, .location-fields > .field:first-child { margin-top: 0; }
.subcategory-title, .station-box-title { color: var(--blue); font-size: 17px; font-weight: 600; }
.subcategory-help { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.7; }
.subcategory-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.subcategory-chip { position: relative; cursor: pointer; }
.subcategory-chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.subcategory-chip span { display: block; min-height: 44px; padding: 10px 17px; border: 1px solid #d7dce6; border-radius: 999px; background: white; color: #535d70; font-size: 14px; }
.subcategory-chip input:checked + span { background: var(--blue); color: white; border-color: var(--blue); }
.subcategory-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.choice { min-height: 54px; margin: 0; padding: 16px 18px; align-items: center; gap: 12px; color: #3e485c; background: white; border: 1px solid #dfe2e9; border-radius: 14px; cursor: pointer; font-size: 15px; line-height: 1.7; }
.choice input { width: 19px; height: 19px; margin: 0; accent-color: var(--blue); }
.choice:has(input:checked) { background: var(--selected); border-color: #72a8e8; color: #005bb7; }
.choice small, .consent small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.7; margin-top: 4px; }
.choice-grid, .period-grid, .action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.period-grid, .action-grid { margin-top: 18px; }
.urgency-grid .choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; font-weight: 600; }
.urgency-grid .choice small { grid-column: 2; margin-top: 0; }
.urgency-grid .choice:has([value="เฝ้าระวัง"]:checked) { background: #f0f3f7; border-color: #99a5b8; color: #43536a; }
.urgency-grid .choice:has([value="เร่งด่วน"]:checked) { background: #fff6e9; border-color: #dbab60; color: #8d530c; }
.urgency-grid .choice:has([value="ฉุกเฉิน"]:checked) { background: #fff0f2; border-color: #e89ba8; color: #b52640; }
.urgency-grid [value="เฝ้าระวัง"] { accent-color: #64748b; }
.urgency-grid [value="เร่งด่วน"] { accent-color: #a46612; }
.urgency-grid [value="ฉุกเฉิน"] { accent-color: #be304a; }
.flag-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.row { gap: 20px; }
.three-col { display: grid; grid-template-columns: .5fr 1fr 1fr; gap: 16px; }
.standalone { margin: 16px 0; }
.support-note { padding: 13px 16px; margin-top: 20px; color: #a83538; border-radius: 11px; background: #fff0f1; font-size: 13px; }
.hint { font-size: 12px; margin-top: 10px; gap: 16px; }
.consent { margin-top: 18px; align-items: flex-start; padding: 22px; background: var(--surface); }
.consent input { margin-top: 4px; }
.actions { gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.actions > span { font-size: 12px; }
.primary, .gps-button, .confirm-location, .print-button, .text-button {
  display: inline-flex; justify-content: center; align-items: center; min-height: 50px;
  border-radius: 999px; padding: 12px 26px; font-size: 15px; font-weight: 600;
  transition: background-color .16s, border-color .16s, transform .16s;
}
.primary { background: var(--blue); color: white; }
#next { margin-left: auto; min-width: 150px; }
.primary:hover { background: #0057af; }
.primary:active { background: #004e9d; }
.text-button, .print-button { background: #f0f5fd; border: 1px solid #cfddf0; color: #175dad; }
.text-button:hover, .print-button:hover { background: #e3edfc; }
.print-button { margin-top: 24px; }
.primary span { margin-left: 24px; }
.map-shell { overflow: hidden; background: #f4f7fb; border: 1px solid #e0e7ef; padding: 0; border-radius: 20px; margin-top: 28px; }
.map-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin: 0; padding: 22px 24px 18px; }
.map-heading strong { color: var(--blue); font-size: 17px; }
.map-heading p { color: var(--muted); font-size: 13px; margin-top: 5px; }
#location-state { align-self: flex-start; background: white; border: 1px solid var(--line); color: var(--muted); padding: 7px 12px; border-radius: 999px; font-size: 12px; }
#location-state.pending { color: #8e5612; background: #fff5e7; border-color: #efc990; }
#location-state.confirmed { color: #067052; background: #e8f7f0; border-color: #a2d7c3; }
.map-stage { position: relative; }
#location-map { height: 560px; overflow: hidden; background: #e5e7eb; z-index: 0; cursor: grab; }
#location-map:active { cursor: grabbing; }
.fullscreen-map { position: absolute; z-index: 500; top: 12px; right: 12px; min-height: 34px; padding: 8px 12px; border: 1px solid #ffffffc4; border-radius: 999px; background: #ffffffed; color: #1f4f80; font-size: 12px; line-height: 1; white-space: nowrap; box-shadow: 0 4px 14px #16324a2e; backdrop-filter: blur(8px); }
.fullscreen-map:hover { background: white; }
/* Fullscreen paints its own black backdrop, so the stage has to fill and colour it itself. */
.map-stage:fullscreen, .map-stage:-webkit-full-screen, .map-stage.faux-fullscreen { width: 100%; height: 100%; background: var(--surface); }
.map-stage.faux-fullscreen { position: fixed; inset: 0; z-index: 1000; }
body.map-fullscreen-open { overflow: hidden; }
.map-stage:fullscreen #location-map, .map-stage:-webkit-full-screen #location-map, .map-stage.faux-fullscreen #location-map { height: 100%; border-radius: 0; }
.map-stage.is-fullscreen .change-location { bottom: 28px; }
.center-map-control { position: absolute; z-index: 500; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; }
.center-map-actions { position: absolute; left: 0; bottom: 64px; display: flex; gap: 5px; padding: 4px; border: 1px solid #ffffffb8; border-radius: 999px; background: #ffffffed; box-shadow: 0 5px 18px #1b334a26; transform: translateX(-50%); pointer-events: auto; backdrop-filter: blur(8px); }
.center-map-actions .gps-button, .center-map-actions .confirm-location, .center-map-actions .change-location { min-height: 34px; padding: 7px 11px; border-radius: 999px; font-size: 11px; line-height: 1; white-space: nowrap; box-shadow: inset 0 0 0 1px #ffffff26; }
.gps-button { background: #b96c12; color: white; }
.gps-button:hover { background: #9d580a; }
.confirm-location { background: #087f63; color: white; }
.confirm-location:hover { background: #05694f; }
.change-location { background: #1f4f80; color: white; }
.change-location:hover { background: #163c63; }
.change-location { position: absolute; z-index: 500; left: 50%; bottom: 16px; min-height: 36px; padding: 9px 16px; border: 1px solid #ffffff5c; border-radius: 999px; font-size: 12px; line-height: 1; white-space: nowrap; box-shadow: 0 6px 18px #16324a3d; transform: translateX(-50%); }
.confirmed-pin { --pin: #0fa17c; --pin-deep: #067154; --pin-lite: #5fd7b6; }
.confirmed-pin .pin-pulse { animation: none; opacity: 0; }

/* The pin's origin (0,0) is the exact point being picked: the stem ends there, the head sits above it. */
.center-pin { --pin: #1479ff; --pin-deep: #0b57c4; --pin-lite: #6aa9ff; position: absolute; top: 0; left: 0; width: 0; height: 0; }
.pin-pulse { position: absolute; top: 0; left: 0; width: 26px; height: 26px; border: 2px solid var(--pin); border-radius: 50%; opacity: .5; transform: translate(-50%, -50%); animation: pin-pulse 2.4s ease-out infinite; }
.pin-ground { position: absolute; top: 0; left: 0; width: 16px; height: 6px; border-radius: 50%; background: radial-gradient(closest-side, #16324e4d, #16324e00); transform: translate(-50%, -50%); transition: width .16s, opacity .16s; }
.pin-stem { position: absolute; top: -18px; left: 0; width: 3px; height: 18px; border-radius: 2px; background: linear-gradient(var(--pin-deep), #16324e66); transform: translateX(-50%); transition: height .16s, top .16s; }
.pin-head { position: absolute; top: -18px; left: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid white; border-radius: 50%; background: radial-gradient(circle at 34% 28%, var(--pin-lite), var(--pin) 52%, var(--pin-deep)); box-shadow: 0 6px 14px #0f2c4a45, inset 0 -2px 4px #00274e33; transform: translate(-50%, -100%); transition: transform .16s, top .16s, background .18s, border-color .18s; }
.pin-dot { width: 11px; height: 11px; border-radius: 50%; background: white; box-shadow: inset 0 1px 2px #0b57c433; transition: all .18s; }

/* While the map is panning the pin lifts off the ground, so the chosen point stays readable. */
.center-map-control.moving .pin-head { transform: translate(-50%, -100%) translateY(-7px) scale(1.04); }
.center-map-control.moving .pin-stem { top: -25px; height: 25px; }
.center-map-control.moving .pin-ground { width: 11px; opacity: .55; }
.center-map-control.moving .pin-pulse { animation: none; opacity: 0; }

.center-map-control.confirmed .center-pin { --pin: #0fa17c; --pin-deep: #067154; --pin-lite: #5fd7b6; }
.center-map-control.confirmed .pin-pulse { animation: none; opacity: 0; }
.center-map-control.confirmed .pin-dot, .confirmed-pin .pin-dot { width: 13px; height: 13px; background: transparent; border-radius: 0; box-shadow: none; border-right: 3px solid white; border-bottom: 3px solid white; transform: translateY(-2px) rotate(45deg) scale(.8); }

@keyframes pin-pulse {
  0% { width: 20px; height: 20px; opacity: .55; }
  70% { width: 62px; height: 62px; opacity: 0; }
  100% { width: 62px; height: 62px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pin-pulse { animation: none; opacity: .35; }
  .pin-head, .pin-stem, .pin-ground, .pin-dot { transition: none; }
}
.gps-message { font-size: 12px; color: var(--muted); text-align: center; margin: 0; padding: 13px 20px 15px; }
.gps-message.success { color: #087052; }
.gps-message.locating { color: #925a13; }
.gps-message.error { color: #b52640; }
.address-grid { display: grid; grid-template-columns: .55fr 1fr 1fr 1fr; gap: 14px; }
.disclosure-panel { margin-top: 14px; border: 1px solid #dfe5ed; border-radius: 15px; background: #fbfcfe; }
.disclosure-panel summary { position: relative; display: flex; align-items: center; min-height: 54px; padding: 11px 48px 11px 16px; color: #38516e; cursor: pointer; list-style: none; }
.disclosure-panel summary::-webkit-details-marker { display: none; }
.disclosure-panel summary::after { content: "+"; position: absolute; top: 50%; right: 16px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #edf4fd; color: var(--blue); font-size: 17px; transform: translateY(-50%); }
.disclosure-panel[open] summary::after { content: "−"; }
.disclosure-panel summary strong { display: block; font-size: 14px; }
.disclosure-panel summary small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
.disclosure-panel .disclosure-content { margin: 0 10px 10px; border: 1px solid #e6eaf0; }
.evidence-guide { background: #f0f5fd; border-radius: 18px; padding: 24px; color: #234c7a; font-size: 15px; margin-bottom: 24px; }
.evidence-guide p { margin-top: 8px; color: #62738a; font-size: 14px; line-height: 1.8; }
.upload { position: relative; border: 1px dashed #b5c8e2; background: var(--surface); border-radius: 20px; padding: 36px 24px; text-align: center; }
.upload strong { background: var(--blue); color: white; padding: 12px 28px; border-radius: 999px; }
.upload-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--blue); background: #e8f1ff; border-radius: 50%; margin-bottom: 8px; }
.upload > span:not(.upload-icon) { max-width: 580px; font-size: 13px; margin-top: 8px; line-height: 1.8; }
.upload input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.upload:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; }
#file-list { list-style: none; padding: 0; }
#file-list li { padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-top: 10px; }
#review { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px 28px; }
#review dt { font-size: 13px; color: var(--blue); font-weight: 600; }
#review dd { font-size: 16px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
#review dd:last-child { border: 0; }
#error { color: #a92a40; background: #fff0f2; border-left-color: #ce3952; border-radius: 8px; padding: 16px; }
#success { padding: 56px 32px; }
.process { margin: 0; padding: 48px; border-radius: 24px; background: #edf1f7; color: var(--ink); }
.process > .wrap { padding: 0; }
.process .overline { color: var(--blue); }
.process h2 { font-size: 30px; }
.process h2 br { display: none; }
.process-caption, .process-grid p { color: #6c7686; }
.process-grid { margin-top: 28px; }
.process-grid article { border-top-color: #ccd5e2; }
.process-grid article > span { color: var(--blue); }
.faq { padding: 56px 0; gap: 60px; }
.footer-inner { font-size: 12px; padding-block: 28px; }
@media (max-width: 1068px) {
  main { padding: 52px 28px 0; }
  .intro { padding-bottom: 30px; }
  .intro > p:last-child { font-size: 13px; }
  .progress-panel { padding: 13px 18px 14px; }
  .card form { padding: 36px; }
  .flag-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 16px; }
  main { padding: 0 16px; }
  .intro { padding: 28px 8px 23px; }
  .intro .portal-label { font-size: 15px; margin-bottom: 7px; }
  h1 { font-size: 22px; letter-spacing: -.2px; line-height: 1.45; }
  .intro > p:last-child { font-size: 12px; margin-top: 7px; }
  .workspace { padding-bottom: 32px; }
  .card { padding: 0; border-radius: 20px; }
  .progress-panel { padding: 11px 12px 10px; }
  .progress-meta { font-size: 10px; }
  .progress-track { height: 3px; }
  .progress-panel .steps { margin-top: 10px; gap: 3px; }
  .progress-panel .steps li { min-height: 31px; padding: 4px 8px; }
  .progress-panel .steps strong { font-size: 10px; }
  .card form { padding: 28px 18px 22px; }
  .card h2 { font-size: 25px; line-height: 1.5; }
  .description { font-size: 14px; margin: 10px 0 24px; }
  .panel-field, .subcategory-wrap, .station-box, .location-fields, #contact-fields,
  .card form > section > .field, #suspect-name, #category-other,
  .card form > section > fieldset { padding: 20px 16px; border-radius: 16px; }
  .field, legend, .subcategory-title, .station-box-title { font-size: 15px; }
  .field input, .field textarea, .field select { font-size: 16px; padding: 12px; min-height: 52px; margin-top: 10px; }
  .field select { padding-right: 34px; background-position: right 12px center; }
  .field input::placeholder, .field textarea::placeholder { font-size: 14px; }
  .panel-field::before { width: 18px; margin-right: 6px; }
  .choice-grid { gap: 8px; }
  .urgency-grid .choice { padding: 12px 10px; grid-template-columns: 17px minmax(0, 1fr); gap: 6px; font-size: 14px; }
  .urgency-grid .choice input { width: 16px; height: 16px; margin-top: 4px; }
  .choice small { font-size: 11px; }
  .period-grid, .action-grid, .row, .three-col { grid-template-columns: 1fr; gap: 10px; }
  .choice { padding: 14px; font-size: 14px; }
  .subcategory-list { gap: 8px; }
  .subcategory-chip span { padding: 10px 13px; font-size: 13px; }
  .support-note { padding: 12px; font-size: 12px; }
  .map-shell { padding: 0; }
  .map-heading { flex-direction: column; gap: 10px; }
  #location-map { height: 440px; }
  .address-grid { grid-template-columns: 1fr; gap: 0; }
  .actions { margin-top: 26px; padding-top: 20px; }
  .primary, .text-button, .print-button { font-size: 14px; padding: 12px 20px; }
  #next { min-width: 122px; }
  .primary span { margin-left: 14px; }
  .actions > span { font-size: 10px; }
  .upload { padding: 28px 16px; }
  .evidence-guide { padding: 20px; }
  #review { padding: 8px 18px; }
  .process { padding: 28px 24px; border-radius: 20px; }
  .process h2 { font-size: 25px; }
  .process-grid { grid-template-columns: 1fr; gap: 20px; }
  .process-grid article { padding-left: 38px; }
  .faq { display: block; padding: 36px 8px; }
  .faq h2 { margin-bottom: 20px; }
  .faq h2 br { display: none; }
  .footer-inner { padding: 24px; gap: 12px; flex-wrap: wrap; }
}
@media print {
  body, main, .card, .card form { background: white; padding: 0; margin: 0; max-width: none; }
  .intro, .progress-panel, .process, .faq, footer, .actions, .print-button, .skip { display: none !important; }
  .card { border: 0; }
  #review { background: white; border: 0; }
  #review dd { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Four-block operational reporting flow */
.mobile-break { display: none; }
.form-panel, .reporter-panel { margin-top: 24px; padding: 26px 30px; border-radius: 20px; background: var(--surface); }
.form-panel > .field:first-child, .reporter-panel > .field:first-child { margin-top: 0; }
.coordinate-panel { margin-top: 20px; }
.source-grid, .status-grid, .risk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.status-grid .choice, .source-grid .choice { align-items: flex-start; }
.time-panel legend { display: flex; align-items: center; gap: 9px; }
.time-legend-icon { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--focus); color: white; font-size: 16px; }
.time-grid .time-choice { min-height: 64px; align-items: center; }
.time-grid .time-choice input { margin-top: 0; }
.time-grid .time-choice strong { color: var(--ink); font-size: 16px; }
.status-grid .choice input, .source-grid .choice input { margin-top: 4px; }
.danger-choice:has(input:checked), .risk:has(input:checked) { background: #fff0f2; border-color: #e89baa; color: #a9243d; }
.risk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.risk-grid .choice { justify-content: center; }
.safe:has(input:checked) { background: #edf8f3; border-color: #8ccdb5; color: #087052; }
#status-detail-wrap { margin-top: 16px; }
.reason-note { display: flex; gap: 8px 20px; align-items: baseline; margin-top: 24px; padding: 18px 22px; border-radius: 14px; background: #eef5ff; color: #24517d; }
.reason-note strong { flex: 0 0 auto; font-size: 14px; }
.reason-note span { font-size: 13px; line-height: 1.8; }
.reason-note.warning { background: #fff4e6; color: #804f15; }
.inline-example { margin-top: 18px; padding: 14px 18px; border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; background: #f2f7ff; color: #52657b; font-size: 13px; }
.subsection-heading { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.subsection-heading strong { color: var(--ink); font-size: 19px; }
.subsection-heading span { color: var(--muted); font-size: 13px; }
.featured-panel { border: 1px solid #e1e9f4; background: #f7faff; }
.reporter-panel { border: 1px solid #dce7f5; background: #f5f9ff; }
.privacy-choice { margin-top: 22px; align-items: flex-start; }
.privacy-choice input { margin-top: 4px; }
.submission-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.submission-summary > div { display: flex; flex-direction: column; gap: 5px; min-height: 88px; padding: 17px 20px; background: white; }
.submission-summary span { color: var(--muted); font-size: 12px; }
.submission-summary strong { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.6; }
.submission-summary .urgent-text { color: #bb2944; }
.success-eyebrow { color: var(--blue) !important; font-size: 12px !important; font-weight: 700; letter-spacing: .5px; margin-bottom: 6px !important; }

@media (min-width: 900px) {
  .progress-panel .steps { justify-content: space-between; }
  .progress-panel .steps li { flex: 0 1 auto; }
}
@media (max-width: 760px) {
  .mobile-break { display: initial; }
  .form-panel, .reporter-panel { padding: 20px 16px; border-radius: 16px; }
  .source-grid, .status-grid, .risk-grid { grid-template-columns: 1fr; }
  .reason-note { display: block; padding: 16px; }
  .reason-note span { display: block; margin-top: 5px; }
  .submission-summary { grid-template-columns: 1fr; }
  .subsection-heading { display: block; }
  .subsection-heading span { display: block; margin-top: 5px; }
}

/* Village coordinate lookup */
.map-heading-tools { display: flex; align-items: flex-start; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.location-search-toggle { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 7px 13px; border: 1px solid #b8d4f4; border-radius: 999px; background: #eaf4ff; color: #075da9; font-size: 12px; font-weight: 700; white-space: nowrap; }
.location-search-toggle:hover, .location-search-toggle.active { background: #dbeeff; border-color: #7db2eb; }
.location-search-toggle span { font-size: 17px; line-height: 1; }
.location-search-panel { margin: 0 24px 18px; padding: 22px 24px; border: 1px solid #cfe0f4; border-radius: 16px; background: #f4f8fd; }
.location-search-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.location-search-copy strong { color: #164f87; font-size: 16px; }
.location-search-copy p { color: var(--muted); font-size: 12px; }
.location-search-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.location-search-grid .field { margin-top: 16px; color: #38516e; font-size: 13px; }
.location-search-grid .field input { min-height: 46px; margin-top: 7px; padding: 10px 12px; font-size: 14px; }
.location-search-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.location-search-footer small { color: #737d8c; font-size: 11px; }
.search-location-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 9px 17px; border-radius: 999px; background: #0b6dc7; color: white; font-size: 13px; font-weight: 700; white-space: nowrap; }
.search-location-button:hover { background: #075ca9; }
.search-location-button:disabled { cursor: wait; opacity: .68; }
.search-spinner { width: 14px; height: 14px; border: 2px solid #ffffff70; border-top-color: white; border-radius: 50%; animation: search-spin .7s linear infinite; }
.location-search-results { margin-top: 16px; }
.location-search-message { margin: 0; padding: 12px 14px; border-radius: 10px; background: white; color: #52657b; font-size: 12px; }
.location-search-message.error { background: #fff0f2; color: #a92a40; }
.location-search-message.empty { background: #fff7e9; color: #855417; }
.location-results-heading { margin: 0 0 9px; color: #52657b; font-size: 12px; font-weight: 600; }
.location-result-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 280px; overflow: auto; padding: 2px; }
.location-result { display: grid; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid #d8e2ee; border-radius: 12px; background: white; color: var(--ink); text-align: left; }
.location-result:hover { border-color: #72a8e8; background: #f8fbff; }
.location-result.selected { border-color: #1479ff; background: #eaf4ff; box-shadow: 0 0 0 1px #1479ff; }
.location-result strong { color: #075da9; font-size: 14px; }
.location-result span { overflow: hidden; color: #58687b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.location-result small { color: #858b94; font-size: 10px; }
@keyframes search-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .location-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .map-heading-tools { justify-content: flex-start; }
  .location-search-panel { margin: 0 12px 14px; padding: 18px 15px; }
  .location-search-copy { display: block; }
  .location-search-copy p { margin-top: 4px; }
  .location-search-grid, .location-result-list { grid-template-columns: 1fr; }
  .location-search-footer { align-items: stretch; flex-direction: column; }
  .search-location-button { width: 100%; }
}

.location-detail { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; width: 100%; margin: 10px 0 0; padding: 10px 14px; border: 1px solid #cfe6dd; border-radius: 14px; background: #f3faf7; font-size: 12px; }
.location-detail-item { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.location-detail-item + .location-detail-item { padding-left: 10px; border-left: 1px solid #d3e7e0; }
.location-detail dt { color: #4a6076; font-weight: 500; white-space: nowrap; }
.location-detail dd { margin: 0; color: #14304c; font-weight: 600; word-break: break-word; }
.location-detail .location-detail-note { line-height: 1.7; flex-basis: 100%; margin: 2px 0 0; padding-top: 7px; border-top: 1px solid #d8ebe4; color: #5c7285; font-size: 11px; font-weight: 400; }
/* Narrow screens wrap to one or two pairs per line, where the divider rules read as stray ticks. */
@media (max-width: 720px) { .location-detail { gap: 4px 12px; } .location-detail-item + .location-detail-item { padding-left: 0; border-left: 0; } }

.basemap-switch { position: absolute; z-index: 500; bottom: 28px; left: 12px; display: flex; gap: 2px; padding: 3px; border: 1px solid #ffffffc4; border-radius: 999px; background: #ffffffed; box-shadow: 0 4px 14px #16324a2e; backdrop-filter: blur(8px); }
.basemap-switch button { min-height: 28px; padding: 6px 13px; border: 0; border-radius: 999px; background: transparent; color: #1f4f80; font-size: 12px; line-height: 1; white-space: nowrap; cursor: pointer; }
.basemap-switch button[aria-pressed="true"] { background: #1f4f80; color: white; }
.basemap-switch button:not([aria-pressed="true"]):hover { background: #1f4f801a; }