/* ============================================================
   SUBMIT A SIGHTING — NudiBank citizen-science form
   ============================================================ */

/* ---------- HERO ---------- */
.sub-hero { position: relative; background: var(--navy-deep); color: var(--parchment); overflow: hidden; }
.sub-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 78% 0%, rgba(46,86,140,.5), transparent 60%),
    linear-gradient(165deg, #15355f 0%, #0c2342 60%, #081a33 100%);
}
.sub-hero-grain {
  position: absolute; inset: 0; opacity: .4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}
.sub-hero-inner { position: relative; z-index: 2; padding: 22px 0 clamp(44px, 6vw, 72px); }
.sub-hero h1 { font-size: clamp(40px, 6.5vw, 84px); font-weight: 200; letter-spacing: -0.03em; line-height: .98; margin: 18px 0 20px; }
.sub-hero .lead { max-width: 56ch; color: color-mix(in srgb, var(--parchment) 88%, transparent); font-weight: 300; }
.sub-steps-mini { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 30px; }
.sub-steps-mini span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--parchment) 72%, transparent); display: flex; align-items: center; gap: 10px; }
.sub-steps-mini b { color: var(--gold); font-weight: 700; }

/* ---------- FORM LAYOUT ---------- */
.sub-main { padding: clamp(48px, 7vw, 90px) 0 clamp(64px, 9vw, 120px); background: var(--parchment); }
.sub-grid { display: grid; grid-template-columns: 1fr 320px; gap: clamp(36px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .sub-grid { grid-template-columns: 1fr; } }

.form-card { background: var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: clamp(26px, 3.5vw, 52px); }

.fieldset { border: none; padding: 0; margin: 0 0 clamp(34px, 4vw, 48px); }
.fieldset:last-of-type { margin-bottom: 0; }
.legend {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep); padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid rgba(33,48,45,.16);
  display: flex; align-items: baseline; gap: 12px; width: 100%;
}
.legend .ln { color: var(--ink-soft); opacity: .6; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px 24px; }
@media (max-width: 600px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.col-span { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.field .opt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); opacity: .6; }
.field .hint { font-size: 13px; color: var(--ink-soft); opacity: .8; margin: 0; }

.input, .select, .textarea {
  font-family: var(--font-serif); font-size: 16px; color: var(--ink);
  background: var(--parchment); border: 1px solid rgba(33,48,45,.22); border-radius: var(--r-sm);
  padding: 13px 15px; width: 100%; transition: border-color .2s, box-shadow .2s; appearance: none;
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(201,178,119,.18);
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23a98f4e' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px;
}

/* segmented radio (abundance) */
.segmented { display: flex; gap: 0; border: 1px solid rgba(33,48,45,.22); border-radius: 40px; overflow: hidden; width: fit-content; }
.segmented label { padding: 11px 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; border-right: 1px solid rgba(33,48,45,.16); }
.segmented label:last-child { border-right: none; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented input:checked + label { background: var(--navy); color: var(--parchment); }

/* ---------- DROPZONE ---------- */
.dropzone {
  border: 2px dashed rgba(33,48,45,.3); border-radius: var(--r-md); background: var(--parchment);
  padding: 38px 24px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--gold-deep); background: #f0ead9; }
.dropzone .dz-ico { width: 46px; height: 46px; margin: 0 auto 14px; color: var(--gold-deep); }
.dropzone .dz-title { font-size: 18px; font-weight: 500; margin: 0 0 6px; }
.dropzone .dz-sub { font-size: 14px; color: var(--ink-soft); margin: 0; }
.dropzone .dz-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); border-bottom: 1px solid currentColor; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; margin-top: 18px; }
.thumb { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--navy-deep); box-shadow: var(--shadow-card); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(12,35,66,.82); color: #fff; border: none; cursor: pointer; font-size: 15px; line-height: 1;
  display: grid; place-items: center; backdrop-filter: blur(3px);
}
.thumb button:hover { background: #b8473f; }
.thumb .nm { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); padding: 16px 6px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* consent + submit */
.consent { display: flex; gap: 13px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.consent input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--navy); flex-shrink: 0; }
.consent a { color: var(--gold-deep); text-decoration: underline; }

.form-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; padding-top: 28px; border-top: 1px solid rgba(33,48,45,.16); }
.form-foot .btn { font-size: 14px; padding: 17px 34px; }
.form-foot .note { font-size: 13px; color: var(--ink-soft); opacity: .8; }

.err-msg { color: #b8473f; font-size: 13px; margin: 0; min-height: 0; }
.field.invalid .input, .field.invalid .select { border-color: #b8473f; }

/* ---------- SIDEBAR ---------- */
.side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 22px; }
.side-card { background: var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 28px; }
.side-card.navy { background: linear-gradient(160deg, #14315c, #0c2342); color: var(--parchment); }
.side-card h3 { font-size: 19px; font-weight: 500; margin: 0 0 14px; }
.side-card.navy h3 { color: var(--champagne); }
.side-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.side-card li { font-size: 14.5px; line-height: 1.45; display: flex; gap: 11px; }
.side-card li::before { content: "→"; color: var(--gold); font-family: var(--font-mono); }
.side-card.light li { color: var(--ink-soft); }
.side-card .fig { width: 100%; margin-top: 6px; }
.side-card .fig img { width: 70%; margin: 0 auto; filter: invert(1) sepia(.35) saturate(.7) brightness(1.6) drop-shadow(0 16px 30px rgba(0,0,0,.4)); }
.side-cap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--champagne); opacity: .8; text-align: center; margin-top: 12px; }

/* ---------- SUCCESS ---------- */
.success { display: none; background: var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: clamp(40px, 6vw, 72px); text-align: center; }
.success.show { display: block; animation: fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } }
.success .tick { width: 72px; height: 72px; margin: 0 auto 24px; color: var(--navy); }
.success h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 300; margin: 0 0 16px; }
.success p { font-size: 18px; color: var(--ink-soft); max-width: 46ch; margin: 0 auto 30px; }
.success .summary { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft); background: var(--parchment); border-radius: var(--r-sm); padding: 18px 22px; display: inline-block; text-align: left; margin-bottom: 30px; }
.success .summary b { color: var(--ink); }
.success-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* deploy note banner */
.deploy-note {
  background: #faf3df; border: 1px solid rgba(169,143,78,.4); border-radius: var(--r-sm);
  padding: 16px 20px; margin-bottom: 28px; font-size: 14px; color: var(--ink-soft); line-height: 1.5;
  display: flex; gap: 12px; align-items: flex-start;
}
.deploy-note b { color: var(--ink); }
.deploy-note .dn-ico { color: var(--gold-deep); flex-shrink: 0; margin-top: 1px; }