/*
 * Deliberately plain, and deliberately not a design system.
 *
 * The visual pass is a separate, later piece of work (`docs/PHASE-0-BACKLOG.md`
 * §Not in Phase 0 — the design-token pass was moved out to close the capacity
 * gap). Anything invented here now would be thrown away then, so this file does
 * the minimum needed to read a page and no more.
 *
 * **One thing here is a requirement rather than a placeholder: it has to work on
 * a phone.** Members reach this app from a sideline, not a desk. That is a
 * constraint on every screen built from here on, not a later polish step — see
 * `docs/design/app-skeleton.md` §mobile. The rules below are the floor:
 * fluid width, no fixed pixel layout, and no element allowed to widen the page.
 */

/*
 * `width: 100%` should mean "as wide as the space I am in", including my own
 * padding and border. Under the CSS default it means "100% *plus* padding and
 * border", so a full-width form field is wider than the form holding it.
 *
 * That is not cosmetic here: `overflow-x: hidden` below means the page does not
 * scroll to reveal the overflow — the right edge of the field is simply clipped,
 * on the narrow screens the mobile rule exists to protect.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * Nothing may force horizontal scrolling of the *page*. A wide element scrolls
 * inside its own container instead — see `.scroll-x`. A single overflowing
 * table is enough to make every page on a phone drift sideways.
 */
html {
  overflow-x: hidden;
}

:root {
  color-scheme: light dark;
  --ink: #1a1a1a;
  --paper: #fdfdfc;
  --rule: #d6d3cd;
  --quiet: #5c5850;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e6e1;
    --paper: #1c1b19;
    --rule: #3d3a35;
    --quiet: #a09a90;
  }
}

body {
  margin: 0;
  padding: 0 1.5rem 4rem;
  background: var(--paper);
  color: var(--ink);
  font:
    16px / 1.55 system-ui,
    sans-serif;
}

main {
  max-width: 60rem;
  margin: 0 auto;
}

/*
 * Loud on purpose, and above the masthead so it is the first thing on the page
 * rather than something to scroll past. Removing it is a deliberate change, not
 * a setting — `src/views/partials/head.ejs` says why.
 */
.development-banner {
  margin: 0;
  padding: 0.75rem 1rem;
  background: #7a2012;
  color: #fff;
  line-height: 1.4;
}

.development-banner a {
  color: #fff;
}

.masthead {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  /* The sign-out form sits opposite the wordmark; wraps rather than overflows. */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.masthead__home {
  color: inherit;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
}

h1 {
  font-size: 1.5rem;
}

/*
 * The honest answer for a data table on a 375px screen.
 *
 * Card-stacking each row reads better and needs per-column labels in the markup,
 * which is design-system work that is deliberately deferred. Scrolling the table
 * inside its own box is boring, works everywhere, and never lies about the data.
 * `-webkit-overflow-scrolling` keeps the momentum scroll on iOS.
 */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  /* Below this the columns wrap into unreadable slivers; scroll instead. */
  min-width: 30rem;
}

caption {
  padding-bottom: 0.75rem;
  color: var(--quiet);
  font-size: 0.875rem;
  text-align: left;
}

th,
td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

thead th {
  color: var(--quiet);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.empty,
.notice {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--rule);
  color: var(--quiet);
}

.stack {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--rule);
  font-size: 0.8125rem;
}

/*
 * Phones. Spacing, and the two type sizes that would otherwise crowd a 320px
 * screen — the layout above is already fluid, which is the point of keeping it
 * that way rather than adding breakpoints per component.
 *
 * 16px is the floor for any input: iOS Safari zooms the whole viewport when a
 * focused field is smaller, and the page never zooms back out. ⚠ **Which is why
 * the input rule below raises the size on phones and never lowers it.**
 */
@media (max-width: 30rem) {
  body {
    padding: 0 1rem 3rem;
  }

  h1 {
    font-size: 1.3rem;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/*
 * Forms.
 *
 * `max-width` in `ch` rather than a pixel width: the field is sized to the text
 * it holds, and it still shrinks on a 375px screen. CLAUDE.md §Screens forbids
 * fixed pixel widths for exactly the phone case.
 */
.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 40ch;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.field label {
  font-weight: 600;
}

/*
 * ⚠ **16px minimum, and this is not a style preference.** iOS Safari zooms the
 * page when a focused input is smaller than 16px and does not zoom back out,
 * which strands a member mid-form on a sideline. CLAUDE.md §Screens.
 */
.field input {
  font: inherit;
  font-size: max(1rem, 16px);
  padding: 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 0.25rem;
  width: 100%;
}

.form button,
.masthead__signout button {
  font: inherit;
  /* 44px is the smallest reliably tappable target on a phone. */
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 0.25rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.masthead__signout {
  margin: 0;
}

/*
 * ⚠ **No compact variant for the masthead button.** An earlier version shrank it
 * to 2rem for desk widths and re-raised it under the phone media query — which
 * silently did nothing, because this rule sits *after* that query in the file
 * and wins at every width on source order alone. Found by measuring, not by
 * reading.
 *
 * One size everywhere is simpler and correct: sign-out is a thumb target on a
 * phone, and 44px fits the masthead at desk widths without crowding it.
 */

/*
 * The one failure message the login form has. Deliberately not colour alone —
 * `role="alert"` carries it to a screen reader, and the border carries it to
 * anyone who cannot distinguish the colour.
 */
.form-error {
  padding: 0.75rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
}

.form-aside {
  max-width: 40ch;
  font-size: 0.9rem;
}

/*
  Guidance under a field, not an error.

  ⚠ Below 16px deliberately, and that does NOT break CLAUDE.md §Screens: iOS
  Safari zooms on a focused *input*, and this is a <p>. The rule applies to
  `.field input` above, which implements it. Do not "fix" this to 1rem on the
  strength of the rule — and do not copy 0.9rem onto anything focusable.
*/
.field-hint {
  max-width: 40ch;
  margin-top: 0.25rem;
  font-size: 0.9rem;
}