/* This application's own page-level CSS. NOT part of the OYSA design system —
   `oysa.css` and `tokens.css` beside it are copied from that repository and must
   not be edited here. This file holds only what a design system cannot know: how
   wide this application's reading column is, and how its shell stands up.

   Keep it small. Anything that is really a component belongs upstream in the
   design system, where the club's other sites get it too. Anything that is
   really a colour belongs in `tokens.css`.

   Never loaded into the Django admin. See `admin.css` for why. */

/* The shell: header, a growing main, footer pinned below the content. */
.page-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--surface-muted);
}

/* A reading column, not the design system's 1200px marketing container. The
   form asks thirty questions and its inputs are full width; at 1200px the
   labels and their controls stop being one thing. */
.page-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-12);
  background: var(--surface);
}
@media (min-width: 768px) {
  .page-main { padding: var(--space-12) var(--space-8); }
}

/* The header stays on screen. A family halfway down a thirty-question form
   asking for their income should be able to see whose form it is without
   scrolling back up — which is the whole argument for the band existing. */
.page-shell .oysa-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* The section index and the error summary jump to headings, and a sticky band
   would land on top of the one they jumped to. This is the band's height plus
   a little air. */
html {
  scroll-padding-top: 5.5rem;
}

/* Paper has no viewport to stick to, and a repeated band would waste the top
   of every sheet. */
@media print {
  .page-shell .oysa-header { position: static; }
}

/* One column width for every page, including the ones that are a single short
   message. A narrower variant for those looked right on its own and wrong
   beside the header, whose band is full width with its contents aligned to the
   column below — two widths meant the crest sat over nothing. */
.page-shell .oysa-header__inner,
.page-shell .oysa-footer .oysa-container { max-width: 46rem; }

/* Section headings carry the system's orange rule; the first one on a page is
   the page title and is larger. Spacing between them is this application's,
   because how far apart two sections of a thirty-question form sit is a
   property of the form. */
.page-section { margin-top: var(--space-12); }
.page-section:first-of-type { margin-top: var(--space-6); }

/* The design system's components carry no outer margin by design — spacing
   between them is the page's business. Without this the file picker, the send
   button and the alert below it stack edge to edge, which reads as one control
   with three parts. */
.page-main .oysa-alert { margin: var(--space-5) 0; }
.page-main form .oysa-btn--block { margin-top: var(--space-2); }

/* The section index at the top of the application form. */
.page-index { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }

/* An error summary is a list of links and nothing else; the alert around it
   already carries the colour. */
.page-summary { margin: var(--space-2) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.page-summary a { color: inherit; }

/* The reference on the confirmation page: the one thing a family has to keep. */
.page-reference {
  display: inline-block;
  font: 700 28px/32px var(--font-display);
  letter-spacing: .04em;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

address { font-style: normal; }

/* Script narrows the application form by setting `hidden`, and the browser's
   own `[hidden] { display: none }` loses to any author rule that sets
   `display` — `.oysa-card` and `.oysa-field` both do. Without this, the fee
   cards and the tier question were marked hidden and stayed on screen. */
[hidden] { display: none !important; }

/* Django renders a checkbox or radio group as a plain <label><input> per
   option. The design system styles a single checkbox through the `oysa-check`
   label that wraps it, which Django's group markup does not have, so the
   group's rows get the 44px target and the spacing here instead. */
.oysa-fieldset label {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--tap-min);
  font: 400 16px/24px var(--font-sans);
}
.oysa-fieldset input[type="checkbox"],
.oysa-fieldset input[type="radio"] { width: 20px; height: 20px; flex: none; margin: 0; }

/* A file input is a button the browser draws; the control's own height rules
   crush it. */
input[type="file"].oysa-input { padding: 10px var(--space-3); height: auto; }

/* One season's fee table and the sentences under it, then air before the next
   season or the questions. The caption is the season's heading, so it keeps
   the table's own sentence case rather than shouting a long season name. */
.fee-schedule { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.fee-schedule .oysa-table caption { text-transform: none; }

/* Lists inside a card keep the card's muted body colour. */
.oysa-card ul { margin: var(--space-2) 0; padding-left: var(--space-5); color: var(--ink-muted); }

/* The release, the only thing in the footer band. Quiet on purpose. */
.app-version { margin: 0; font-size: 12px; line-height: 16px; }

/* The combobox every select is drawn as (static/oysa/combobox.js): one field
   you type into, the list opening flush below it. The native select it draws
   stays in the page, hidden, as the form control. Colours and sizes are the
   design system's tokens; the field matches `oysa-input` exactly. */
.oysa-combo { position: relative; width: 100%; }
.oysa-combo__control {
  display: flex; align-items: center; min-height: var(--control-md);
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.oysa-combo__control:hover { border-color: var(--ink); }
.oysa-combo__control:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--ink); }
.oysa-combo.is-open .oysa-combo__control { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.oysa-combo .oysa-combo__input {
  flex: 1; min-width: 0; height: calc(var(--control-md) - 2px); padding: 0 var(--space-3);
  font: 400 16px/24px var(--font-sans); color: var(--ink);
  background: transparent; border: 0; outline: 0; cursor: pointer; text-overflow: ellipsis;
}
.oysa-combo .oysa-combo__input:not([readonly]) { cursor: text; }
/* The field draws the one focus ring, around the whole control; the input's
   own would sit inside it as a second line. */
.oysa-combo .oysa-combo__input:focus, .oysa-combo .oysa-combo__input:focus-visible { outline: none; }
.oysa-combo__input::placeholder { color: var(--ink-muted); }
.oysa-combo__input[aria-invalid="true"] { color: var(--ink); }
.oysa-combo:has(.oysa-combo__input[aria-invalid="true"]) .oysa-combo__control { border: 2px solid var(--danger); }
.oysa-combo__clear, .oysa-combo__caret {
  flex: none; width: 36px; height: calc(var(--control-md) - 2px); padding: 0;
  background: transparent; border: 0; color: var(--ink-muted); cursor: pointer;
}
.oysa-combo__clear { font: 400 22px/1 var(--font-sans); }
.oysa-combo__clear:hover, .oysa-combo__caret:hover { color: var(--ink); }
.oysa-combo__clear[hidden] { display: none; }
.oysa-combo__caret {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(50% - 3px) 50%, calc(50% + 3px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.oysa-combo.is-open .oysa-combo__caret { transform: rotate(180deg); }
.oysa-combo__list {
  position: absolute; z-index: 30; top: 100%; left: 0; right: 0;
  max-height: min(19rem, 50vh); overflow-y: auto; margin: 0; padding: 0; list-style: none;
  background: var(--surface-raised); border: 1px solid var(--ink); border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-lg);
}
.oysa-combo__option {
  padding: 11px var(--space-4); border-top: 1px solid var(--line);
  font: 400 16px/22px var(--font-sans); color: var(--ink); cursor: pointer;
}
.oysa-combo__option:first-child { border-top: 0; }
.oysa-combo__option:hover, .oysa-combo__option.is-active { background: var(--surface-muted); }
.oysa-combo__option.is-selected { font-weight: 700; }
.oysa-combo__group {
  padding: var(--space-2) var(--space-4) var(--space-1); border-top: 1px solid var(--line);
  font: 700 13px/18px var(--font-sans); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--surface-muted);
}
.oysa-combo__group:first-child { border-top: 0; }
.oysa-combo__note { padding: 11px var(--space-4); font: 400 15px/20px var(--font-sans); color: var(--ink-muted); }
.oysa-combo__status {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}