/*
  forms.css — the field system. Loaded after styles.css, which already owns
  .form-card, .form-label, .field-badge, .counter and .btn-submit.

  Nothing here redefines those. Where a rule is needed on top of one of them
  it is written as an addition (a modifier class, a nested selector), never a
  second definition of the same class — two definitions of .field-badge in
  two files would be settled by load order, which is not a decision worth
  leaving to chance.

  Every value comes from the tokens in styles.css: --surface-raised, --line,
  --ink, --accent, --radius, --tap-target, --submit. No new palette.
*/

/* --------------------------------------------------------------------------
   1. Page and layout constants
   -------------------------------------------------------------------------- */

.form-page { padding-block: clamp(1.5rem, 4vw, 3rem); }

.form-header {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 650;
  text-align: center;
  margin-bottom: 0.75rem;
}

.form-description {
  font-size: 1.0625rem;
  text-align: center;
  color: var(--ink-muted);
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: 1.5rem;
}

.form-image {
  margin: 0 0 1.75rem;
  text-align: center;
}

.form-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/*
  A Section sits inside the card, so it cannot use the card's own surface and
  still read as distinct. White against --surface-raised is the same contrast
  step the inputs already use, which keeps the page to one visual idea.
*/
.form-section {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-block: 1.75rem;
}

@media (min-width: 768px) {
  .form-section { padding: 1.75rem; }
}

.form-section:first-child { margin-top: 0; }
.form-section:last-child { margin-bottom: 0; }

.form-section__title {
  font-size: 1.15rem;
  font-weight: 650;
  margin-bottom: 1.25rem;
}

/* A Line's columns are plain equal-width `col`s, so two and four both balance
   with no per-form arithmetic, and they stack below md. */
.form-line { margin-bottom: 1.5rem; }

.form-line > [class*="col"] > .field-block { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   2. Field blocks
   -------------------------------------------------------------------------- */

.field-block {
  margin-bottom: 1.5rem;
  border: 0;
  padding: 0;
  min-width: 0;   /* lets a fieldset shrink inside a flex column */
}

/* [hidden] needs the help: Bootstrap sets display on the form controls and
   on .row children, which would otherwise win over the attribute. */
.field-block[hidden] { display: none; }

.field-help {
  display: flex;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   3. SideSelectField

   Same technique as the number tiles in styles.css: a real radio kept in the
   accessibility tree, made transparent and laid over its label, so keyboard
   arrow navigation and group semantics survive being styled.
   -------------------------------------------------------------------------- */

.side-select__row {
  display: grid;
  grid-template-columns: repeat(var(--tile-count, 3), 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Five equal columns are unreadable on a laptop, so past the breakpoint the
   tiles wrap to a legible minimum instead of being forced onto one line. */
@media (max-width: 991.98px) {
  .side-select__row { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
}

@media (max-width: 575.98px) {
  .side-select__row { grid-template-columns: 1fr; }
}

.side-select__tile { position: relative; display: flex; }

.side-select__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.side-select__label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 3.25rem;
  padding: 0.65rem 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease,
              color 0.12s ease;
}

.side-select__input:hover + .side-select__label { border-color: var(--accent); }

.side-select__input:checked + .side-select__label {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* The ring is drawn on the label, since the input itself is invisible.
   Without this a keyboard user loses the focus indicator entirely. */
.side-select__input:focus-visible + .side-select__label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.side-select__row.is-invalid-group .side-select__label { border-color: var(--submit); }

/* --------------------------------------------------------------------------
   4. AttachmentField
   -------------------------------------------------------------------------- */

.attachment__control {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  background: #ffffff;
}

.attachment__control.is-invalid-group { border-color: var(--submit); }

/*
  The custom control is opt-in on JavaScript, not opt-out. Written the other
  way round it would depend on a class being *removed*, and any failure to
  load would leave the real input hidden behind a button that does nothing —
  an unusable field. This way the native input is the default and the styled
  version replaces it only once the script that drives it is known to run.
  form_base.html sets .js in <head>, so there is no flash of the fallback.
*/
.attachment__empty,
.attachment__preview { display: none; }

.js .attachment__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.js .attachment__empty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.js .attachment__preview { display: flex; }
.js .attachment__preview[hidden] { display: none; }

.attachment__choose { min-height: var(--tap-target); }
.attachment__none { color: var(--ink-muted); font-size: 0.9375rem; }

.attachment__preview { align-items: center; gap: 0.85rem; }

.attachment__thumb {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-raised) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 650;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow: hidden;
}

.attachment__meta { min-width: 0; display: flex; flex-direction: column; }
.attachment__name { font-weight: 600; overflow-wrap: anywhere; }
.attachment__size { color: var(--ink-muted); font-size: 0.875rem; }
.attachment__remove { margin-inline-start: auto; flex: none; }

/* --------------------------------------------------------------------------
   5. Submit colours

   styles.css already defines .btn-submit in --submit red, which is the
   default the spec asks for. These two are modifiers over it, overriding the
   same Bootstrap custom properties rather than re-declaring the button.

   Dark text on the light fills is not a preference: #ffffff on either of
   them falls under 3:1 and would fail WCAG 1.4.3 for large text.
   -------------------------------------------------------------------------- */

.btn-submit--green {
  --bs-btn-color: #14361f;
  --bs-btn-bg: #b7e4c7;
  --bs-btn-border-color: #8fd0a8;
  --bs-btn-hover-color: #14361f;
  --bs-btn-hover-bg: #a3d9b8;
  --bs-btn-hover-border-color: #7cc79a;
  --bs-btn-active-bg: #93cfaa;
  --bs-btn-active-border-color: #7cc79a;
  --bs-btn-disabled-bg: #b7e4c7;
  --bs-btn-disabled-border-color: #8fd0a8;
}

.btn-submit--blue {
  --bs-btn-color: #0f2f45;
  --bs-btn-bg: #bcdcf5;
  --bs-btn-border-color: #93c4e8;
  --bs-btn-hover-color: #0f2f45;
  --bs-btn-hover-bg: #a8d1ef;
  --bs-btn-hover-border-color: #7db6e0;
  --bs-btn-active-bg: #98c8ea;
  --bs-btn-active-border-color: #7db6e0;
  --bs-btn-disabled-bg: #bcdcf5;
  --bs-btn-disabled-border-color: #93c4e8;
}

.form-actions {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

.form-actions .btn-submit { min-width: 12rem; }

@media (max-width: 575.98px) {
  .form-actions .btn-submit { width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Error summary
   -------------------------------------------------------------------------- */

.error-summary ul { padding-inline-start: 1.15rem; }
.error-summary li + li { margin-top: 0.25rem; }
.error-summary:focus-visible { outline: 2px solid var(--submit); outline-offset: 2px; }