/* Reported by paddlers: the block on a spot page and the form, also used at the end
   of Add a spot (components/SpotReports.js, 29 Oct 2026). Needs tokens.css.
   Type and controls are the add flow's (addlake.css): Josefin capitals for labels,
   chips and buttons, Cormorant for anything read or typed. Nothing inherits the
   page's body font, which on the spot page is Arial. */
.spr-block { font-family: var(--font-serif); }
.spr-warn { margin: 0 0 0.6rem; font: italic 1rem/1.55 var(--font-serif); color: var(--muted); }
.spr-row .spr-when { font: italic 0.95rem var(--font-serif); color: var(--muted); }
.spr-row .spr-note { display: block; margin-top: 0.2rem; }
.spr-row .spr-by { display: block; margin-top: 0.2rem; font: italic 0.92rem var(--font-serif); color: var(--muted); }
.spr-row .spr-by a { color: var(--gold-bright); }
.spr-old { opacity: 0.7; }
.spr-hazard .kbg-icon { color: var(--moderate); }
.spr-empty { margin: 0 0 0.6rem; font: 1.02rem/1.5 var(--font-serif); color: rgba(237, 232, 223, 0.88); }

/* Buttons: Report something is the add flow's secondary, Send its primary, Cancel its text link */
.spr-open {
  margin-top: 0.6rem; min-height: 40px; padding: 0 0.9rem; cursor: pointer; clip-path: var(--clip-sm); text-align: center;
  background: var(--surface-2); border: 1px solid rgba(181, 147, 90, 0.42); color: var(--gold-bright);
  font: 600 0.72rem/1.4 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase;
}
.spr-send {
  min-height: 44px; padding: 0 1.1rem; border: 0; cursor: pointer; clip-path: var(--clip-sm);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: var(--gold-ink);
  font: 600 0.78rem var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
}
.spr-cancel {
  margin: 0; min-height: 44px; padding: 0 0.2rem; border: 0; background: none; cursor: pointer;
  color: var(--gold-bright); font: 1.02rem var(--font-serif); text-decoration: underline; text-underline-offset: 3px;
}
.spr-send:hover, .spr-open:hover { filter: brightness(1.07); }
.spr-cancel:hover { color: var(--fg); }
/* Clipped controls draw the focus ring inside; outside it is cut off (30 Oct 2026 audit). */
.spr-send:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -4px; }
.spr-open:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -3px; }
.spr-cancel:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.spr-form { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 1rem; }
.spr-block [hidden] { display: none !important; }   /* forecast.html has no global [hidden] rule */
.spr-set { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Labels: the add flow's .al-label */
.spr-set legend, .spr-field > span {
  display: block; margin-bottom: 0.45rem; padding: 0;
  font: 600 0.78rem/1.4 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-bright);
}
.spr-field i { font-style: normal; color: var(--muted); letter-spacing: 0.04em; text-transform: none; margin-left: 0.2rem; }

/* Chips: the add flow's toggles */
.spr-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.spr-chip {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.85rem; cursor: pointer;
  clip-path: var(--clip-sm); background: rgba(181, 147, 90, 0.07); border: 1px solid rgba(181, 147, 90, 0.3);
  font: 600 0.72rem var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg);
}
.spr-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.spr-chip:has(input:checked) { border-color: var(--gold-bright); background: rgba(181, 147, 90, 0.16); color: var(--gold-bright); }
.spr-chip:has(input:checked)::before { content: '\2713'; margin-right: 0.45em; }   /* chosen by shape, not colour alone */
.spr-chip:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--gold-bright); }

/* Fields: the add flow's inputs */
.spr-field { display: block; min-width: 0; }
.spr-field input, .spr-field textarea {
  width: 100%; min-width: 0; min-height: 50px; box-sizing: border-box; padding: 0.75rem 0.9rem;
  background: rgba(181, 147, 90, 0.07); border: 1px solid rgba(181, 147, 90, 0.32); border-radius: 0; clip-path: var(--clip-sm);
  color: var(--fg); font: 16px/1.4 var(--font-serif); outline: none;
}
.spr-field input[type="file"] { padding: 0.6rem 0.9rem; font: 0.95rem var(--font-serif); }
.spr-field input::file-selector-button {
  margin-right: 0.8rem; padding: 0.45rem 0.8rem; cursor: pointer; border: 1px solid rgba(181, 147, 90, 0.42);
  background: var(--surface-2); color: var(--gold-bright); font: 600 0.72rem var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
}
.spr-field input:focus-visible, .spr-field textarea:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -3px; }
.spr-field input[aria-invalid="true"] { border-color: var(--bad); }
.spr-field textarea { min-height: 84px; resize: vertical; }
.spr-field input::placeholder, .spr-field textarea::placeholder { color: rgba(237, 232, 223, 0.55); }
.spr-field input[type="date"] { color-scheme: dark; }

.spr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.spr-fine { margin: 0; font: 0.86rem/1.45 var(--font-serif); color: var(--muted); }
.spr-fine a { color: var(--gold-bright); }
.spr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.spr-msg { margin: 0; min-height: 1.2em; font: italic 1rem/1.4 var(--font-serif); color: var(--gold-bright); }
.spr-msg.is-error { color: var(--bad); font-style: normal; }   /* the add flow's .al-msg.is-error */   /* status and errors share it, as in the add flow's .al-msg.is-warn */
.spr-done { margin: 0.6rem 0 0; font: 1.02rem/1.5 var(--font-serif); color: var(--fg); }
.spr-done:focus { outline: 2px solid var(--gold-bright); outline-offset: 2px; }