/* =============================================================================
   CCM Community Science — shared form-family stylesheet
   Site refactor Phase 1. Design tokens, the reset, and the
   .section-wave / .photo-overlay primitives now live in base.css — link BOTH
   (base.css first, then this) on every form-family page.

   Linked by:
     citizen_science_acoustic.html
     citizen_science_fishery_health.html
     citizen_science_hydraulic_impact.html
     citizen_science_salinity.html
     citizen_science_sedimentation.html
     citizen_science.html (hub)

   Bump the ?v= query string on every <link> whenever this file changes.
   ============================================================================= */

/* Form-family additions to the base reset.
   overflow-x: clip on <html> contains the full-bleed .photo-overlay below
   (pulled to 100vw out of the centred .shell column) so it can't add a
   horizontal scrollbar. clip (not hidden) keeps <html> a non-scroll container
   vertically, so position: sticky on .topbar keeps working. */
html { scroll-behavior: smooth; overflow-x: clip; }
body { padding-bottom: 60px; }

/* .topbar / .topbar-inner / .topbar-brand / .topbar-back now live in base.css
   (shared with incident_report + email_subscribe). The 880px .topbar-inner
   default there matches these forms; the hub overrides it to 980px. */

/* ---------- hero ---------- */
.hero { position:relative; overflow:hidden; background: linear-gradient(135deg, var(--clr-bayou-green) 0%, var(--clr-gulf-blue) 100%); color:#fff; padding: 34px 20px 30px; text-align:center; }
.hero-inner { max-width: 720px; margin:0 auto; }
.hero-eyebrow { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); border-radius:20px; padding:5px 14px; margin-bottom:14px; }
.hero h1 { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.15rem); font-weight:600; margin-bottom:8px; }
.hero p { color: rgba(255,255,255,.92); font-size:.9rem; max-width: 560px; margin: 0 auto; }
.hero-meta { margin-top: 16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hero-chip { font-family: var(--font-data); font-size:.68rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); border-radius:20px; padding:5px 12px; }

/* ---------- shell / modal card ---------- */
.shell { position:relative; max-width: 720px; margin: -18px auto 0; padding: 0 20px; }
.shell > .modal-card { position: relative; z-index: 1; }
/* The decorative photo sits behind the card. Break it out of .shell's centred
   max-width column so the texture runs the full viewport width (base.css keeps
   .photo-overlay inside its section elsewhere — e.g. index.html's hero). */
.shell > .photo-overlay { left: 50%; right: auto; width: 100vw; margin-left: -50vw; }
.modal-card { background: var(--clr-surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); border:1px solid var(--clr-border); overflow:hidden; }

/* ---------- safety banner (present on every form) ---------- */
.safety-banner { background: var(--clr-red-light); border-bottom: 1px solid #ecc; padding: 0; }
.safety-toggle { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding: 14px 22px; display:flex; align-items:center; justify-content:space-between; gap: 10px; font-family: var(--font-ui); }
.safety-toggle .st-label { font-size:.82rem; font-weight:700; color: var(--clr-danger-red); display:flex; align-items:center; gap:8px; }
.safety-toggle .chev { font-size:.7rem; color: var(--clr-danger-red); transition: transform .2s; }
.safety-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.safety-body { display:none; padding: 0 22px 18px; font-size: .82rem; }
.safety-body.open { display:block; }
.safety-body ul { padding-left: 20px; margin-top: 6px; }
.safety-body li { margin-bottom: 6px; line-height:1.55; }
.safety-body .safety-cols { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width:600px){ .safety-body .safety-cols{ grid-template-columns: 1fr; } }
.safety-body h4 { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color: var(--clr-danger-red); margin: 10px 0 4px; }

/* ---------- SOP protocol reference panel ---------- */
.sop-panel { background: var(--clr-amber-light); border-bottom: 1px solid var(--clr-border); }
.sop-toggle { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding: 14px 22px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-family: var(--font-ui); }
.sop-toggle .sp-label { font-size:.82rem; font-weight:700; color: var(--clr-marsh-amber); display:flex; align-items:center; gap:8px; }
.sop-toggle .sp-cite { font-family: var(--font-data); font-size:.64rem; color: var(--clr-marsh-amber); background: rgba(255,255,255,.5); border-radius: 10px; padding: 2px 9px; margin-left: 6px; }
.sop-toggle .chev { font-size:.7rem; color: var(--clr-marsh-amber); transition: transform .2s; }
.sop-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.sop-body { display:none; padding: 0 22px 18px; font-size:.82rem; }
.sop-body.open { display:block; }
.sop-body ol, .sop-body ul { padding-left: 20px; margin-top: 6px; }
.sop-body li { margin-bottom: 7px; line-height: 1.55; }
.sop-body .sop-step-group + .sop-step-group { margin-top: 12px; }
.sop-body h4 { font-family: var(--font-ui); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--clr-peat-black); margin-bottom: 2px; }

/* ---------- form body ---------- */
form { padding: 26px 22px 30px; }
.f-section { margin-bottom: 26px; }
.f-section:last-of-type { margin-bottom: 8px; }
.f-section-head { display:flex; align-items:baseline; gap:10px; margin-bottom: 14px; padding-bottom:8px; border-bottom: 2px solid var(--clr-peat-black); }
.f-step-num { font-family: var(--font-data); font-size:.72rem; background: var(--clr-peat-black); color:#fff; border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.f-section-head h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight:600; }
.f-section-hint { font-size:.78rem; color: var(--clr-text-muted); margin: -8px 0 14px; line-height:1.5; }

.f-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width:600px){ .f-grid, .f-grid.cols-3 { grid-template-columns: 1fr; } }

label { display:block; font-size:.76rem; font-weight:600; color: var(--clr-peat-black); margin-bottom: 5px; }
label .req { color: var(--clr-danger-red); }
label .opt { color: var(--clr-text-muted); font-weight:500; text-transform:none; font-size:.7rem; }
.field { margin-bottom: 14px; }
.field-help { font-size:.72rem; color: var(--clr-text-muted); margin-top: 4px; line-height:1.45; }

input[type=text], input[type=date], input[type=time], input[type=number], input[type=tel], textarea, select {
  width:100%; font-family: var(--font-ui); font-size: .88rem; color: var(--clr-peat-black);
  background: var(--clr-shell-white); border: 1px solid var(--clr-border); border-radius: 8px;
  padding: 10px 12px; transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { outline:none; border-color: var(--clr-gulf-blue); box-shadow: 0 0 0 3px var(--clr-blue-light); }
textarea { resize: vertical; min-height: 64px; }
.mono-input { font-family: var(--font-data); }

.input-with-btn { display:flex; gap:8px; }
.input-with-btn input { flex:1; }

.btn { font-family: var(--font-ui); font-weight:600; font-size:.76rem; letter-spacing:.02em; border-radius: 8px; border:1px solid transparent; padding: 10px 16px; cursor:pointer; transition: all .15s; white-space:nowrap; }
.btn-utility { background:#fff; border-color: var(--clr-border); color: var(--clr-peat-black); }
.btn-utility:hover { border-color: var(--clr-gulf-blue); color: var(--clr-gulf-blue); }
.btn-primary { background: var(--clr-bayou-green); color:#fff; }
.btn-primary:hover { background: var(--clr-green-dark); }
.btn-block { width:100%; padding: 13px 16px; font-size:.85rem; }
.gps-status { font-family: var(--font-data); font-size:.68rem; color: var(--clr-text-muted); margin-top:5px; }
.gps-status.ok { color: var(--clr-bayou-green); }
.gps-status.err { color: var(--clr-danger-red); }

fieldset { border: 1px solid var(--clr-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
legend { font-size:.76rem; font-weight:600; padding: 0 6px; }
.radio-row, .check-row { display:flex; align-items:flex-start; gap:8px; margin-bottom: 8px; font-size:.85rem; }
.radio-row:last-child, .check-row:last-child { margin-bottom:0; }
.radio-row input, .check-row input { margin-top:3px; flex-shrink:0; }
.radio-row .rr-label strong { display:block; font-size:.85rem; }
.radio-row .rr-label span { display:block; font-size:.74rem; color: var(--clr-text-muted); margin-top:1px; }

.conditional { display:none; margin-top: 10px; padding: 12px 14px; background: var(--clr-shell-white); border-left:3px solid var(--clr-gulf-blue); border-radius: 0 8px 8px 0; }
.conditional.open { display:block; }

.photo-upload { border: 2px dashed var(--clr-border); border-radius: 10px; padding: 18px; text-align:center; background: var(--clr-shell-white); cursor:pointer; transition: border-color .15s; }
.photo-upload:hover { border-color: var(--clr-gulf-blue); }
.photo-upload input { display:none; }
.photo-upload .pu-icon { font-size:1.4rem; margin-bottom:6px; }
.photo-upload .pu-text { font-size:.78rem; color: var(--clr-text-muted); }
.photo-preview { margin-top: 10px; display:grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap:8px; }
.photo-preview img { width:100%; height:76px; object-fit:cover; border-radius:6px; border:1px solid var(--clr-border); }

.calc-box { background: var(--clr-green-light); border: 1px solid #bfe0d6; border-radius: 8px; padding: 12px 14px; margin-top: 8px; font-size:.82rem; }
.calc-box .cb-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color: var(--clr-green-dark); font-weight:700; }
.calc-box .cb-value { font-family: var(--font-data); font-size:1.1rem; color: var(--clr-green-dark); margin-top:2px; }
.calc-box.warn { background: var(--clr-amber-light); border-color: #e3cfa0; }
.calc-box.warn .cb-label, .calc-box.warn .cb-value { color: var(--clr-marsh-amber); }

.repeat-row { border:1px solid var(--clr-border); border-radius:10px; padding: 12px 14px; margin-bottom:10px; position:relative; background:#fff; }
.repeat-row .rr-remove { position:absolute; top:8px; right:10px; background:none; border:none; color: var(--clr-danger-red); font-size:.72rem; font-weight:700; cursor:pointer; }
.add-row-btn { width:100%; border: 1px dashed var(--clr-border); background: var(--clr-shell-white); border-radius:8px; padding:10px; font-family: var(--font-ui); font-size:.8rem; font-weight:600; color: var(--clr-gulf-blue); cursor:pointer; }
.add-row-btn:hover { border-color: var(--clr-gulf-blue); }

.station-hint { font-family: var(--font-data); font-size:.72rem; color: var(--clr-text-muted); margin-top: 4px; }

.submit-row { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--clr-border); }
.submit-note { font-size:.72rem; color: var(--clr-text-muted); margin-top:10px; text-align:center; line-height:1.5; }

.success-panel { display:none; text-align:center; padding: 44px 26px; }
.success-panel.open { display:block; }
.success-panel .sp-icon { width:52px; height:52px; border-radius:50%; background: var(--clr-green-light); color: var(--clr-green-dark); font-size:1.5rem; display:flex; align-items:center; justify-content:center; margin: 0 auto 14px; }
.success-panel h2 { font-family: var(--font-display); font-size:1.3rem; margin-bottom:8px; }
.success-panel p { font-size:.85rem; color: var(--clr-text-muted); max-width:420px; margin: 0 auto 18px; }
.success-summary { text-align:left; background: var(--clr-shell-white); border-radius:10px; padding:14px 16px; font-family: var(--font-data); font-size:.74rem; margin: 0 auto 18px; max-width: 460px; white-space:pre-wrap; line-height:1.6; }
form.hidden { display:none; }

.privacy-note { display:flex; gap:10px; background: var(--clr-blue-light); border-radius: 8px; padding: 12px 14px; font-size:.78rem; color: var(--clr-peat-black); margin-top: 4px; line-height:1.5; }
.privacy-note .pn-icon { flex-shrink:0; font-size:1rem; }

.badge-required-note { font-size:.7rem; color: var(--clr-text-muted); text-align:right; margin-bottom: 10px; }