/* Shared base styles for all VOACAP app pages. Page-specific overrides
   (e.g. wider body max-width on result pages, chart/map containers)
   stay in each template's own <style> block. */
body { font-family: system-ui, sans-serif; margin: 2rem auto; padding: 0 1rem; color: #1a1a1a; max-width: 720px; }
h1 { font-size: 1.4rem; }
fieldset { border: 1px solid #ccc; border-radius: 6px; margin-bottom: 1rem; }
legend { font-weight: 600; padding: 0 0.4rem; }
label { display: block; margin: 0.5rem 0 0.2rem; font-size: 0.9rem; }
input, select { width: 100%; padding: 0.4rem; box-sizing: border-box; font-size: 0.95rem; font-family: inherit; }
.row { display: flex; gap: 1rem; }
/* Fields in a row line up along their tops even when one label wraps to two
   lines and its neighbour does not. Without this the taller label pushes its
   own field down by a line, so the pair sits visibly stepped - which happened
   to two rows once the labels were reworded to the original program's longer
   wording ("ManMade noise at 3 MHz..." beside "Minimum takeoff angle...").
   Each cell is a column, the label grows to the tallest in the row, and its
   text sits at the bottom of that space so it still hugs its own field. */
.row > div { flex: 1; display: flex; flex-direction: column; }
.row > div > label { flex-grow: 1; display: flex; align-items: flex-end; }
/* Explanatory line under a legend or beneath a group of fields. Was repeated
   as an inline style on each one. */
.hint { font-size: 0.85rem; color: #666; margin: 0.5rem 0; }
.error { background: #fee; border: 1px solid #c33; color: #900; padding: 0.75rem; border-radius: 6px; margin-bottom: 1rem; }
button { margin-top: 1rem; padding: 0.6rem 1.2rem; font-size: 1rem; cursor: pointer; }
a.back { display: inline-block; margin-top: 1.5rem; }
.back-actions { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin-top: 1.5rem; }
.back-actions a.back, .back-actions form { margin-top: 0; }
.link-button { background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: 1rem; color: #2563eb; text-decoration: underline; cursor: pointer; }

/* Rows stack on a phone. Measured at a 375px viewport before adding this: the
   three-across Year/Month/SSN row squeezed its fields to 94px and pushed the
   longer System labels to three lines each, so the form was mostly label. The
   label no longer needs to grow once stacked - there is nothing beside it to
   line up with. */
@media (max-width: 32rem) {
  .row { flex-direction: column; gap: 0; }
  .row > div > label { flex-grow: 0; }
}