/* Welcome (screens/welcome.js) — the front door.
 *
 * A reading page in the app's own column: full width like every other screen,
 * with the measure carried by the paragraphs rather than by the page (see
 * below). Everything on it is a shared primitive (`components/ui.css`) or the
 * role cards (`components/role-cards.css`); what is here is the arrangement
 * between them.
 *
 * No colour is named here except through a token, and the territory tints ride
 * in on `card({ accent })` as `--ui-accent`. */

/* Full width, like every other screen — the page sits in `.wrap`'s column and
 * ends where the Schedule and the Directory end. It was capped at 68ch until
 * 2026-08-06, which is the right measure for prose and the wrong shape for a
 * page: at 1180px it left a third of the screen empty down the right-hand side
 * and read as though the layout had failed rather than as a column somebody
 * chose (the owner: "it's left-centred and not centred and full width of the
 * screen, as we do with all the other pages").
 *
 * The measure did not disappear, it moved down a level: the *paragraphs* carry
 * it (the rule right below), so a sentence still breaks at a comfortable
 * length while the card grids, the hours table and the calendar use the whole
 * width they were built for. */
.welcome {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* --- the hero ---------------------------------------------------------------
 *
 * Two columns on a wide screen: what camp is on the left, the short version on
 * the right, and the two doors under the prose rather than at the foot of a
 * page nobody has scrolled yet. It was a single stacked column with three stat
 * tiles under it; the tiles came off (camp metrics are not a visitor's
 * business) and the space they left is what makes this read as a front page
 * instead of a document.
 *
 * `--split` is the shell's own two-column measure — the profile page uses the
 * same number — so the right column lands where a reader's eye already expects
 * a sidebar. */
.welcome-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--split);
  gap: var(--space-6) var(--space-5);
  align-items: start;
  margin-bottom: var(--space-2);
}

.welcome-hero-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The short version. A definition list, because that is what it is: three
 * terms, three sentences. */
.welcome-shortcard { align-self: start; }

.welcome-short { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.welcome-short-term {
  font-family: var(--font-display);
  font-size: var(--size-h3);
  line-height: 1.2;
  color: var(--t-tea-deep);
}

.welcome-short-def {
  margin: var(--space-1) 0 0;
  font-size: var(--size-small);
  line-height: 1.45;
  color: var(--soft);
}

.welcome-title {
  font-family: var(--font-display);
  font-size: var(--size-display);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  margin: 0;
}

.welcome-lead {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--size-h3);
  line-height: 1.5;
  color: var(--ink);
}

.welcome-sub {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--size-body);
  line-height: 1.5;
  color: var(--soft);
}

/* --- sections --------------------------------------------------------------- */

.welcome-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* The header is sticky, so a jump that lands flush with the top of the
     viewport lands under it. 78px is the header's own height plus air — the
     same offset the Train screen's sections used. */
  scroll-margin-top: 78px;
}

/* Kicker and the one-line note beside it, on a hairline. `sectionHead`'s own
 * `rule` variant draws the line under the kicker alone, which leaves the note
 * stranded above it — so the rule lives on the row that holds both. */
.welcome-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.welcome-section-note {
  font-size: var(--size-micro);
  color: var(--soft);
}

.welcome-note {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--soft);
}

/* --- the two steps ---------------------------------------------------------- */

.welcome-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}

.welcome-step {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The number is the sequence, and the sequence is the point of the section.
 * Display face, because it is a figure somebody reads rather than compares. */
.welcome-step-num {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-h2);
  line-height: 1;
  color: var(--t-tea);
}

.welcome-step-title {
  margin: 0;
  font-size: var(--size-h3);
  font-weight: var(--weight-semibold);
}

.welcome-step-lead {
  margin: 0;
  font-size: var(--size-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--soft);
}

.welcome-step-body {
  margin: 0;
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--soft);
}

/* The door sits at the bottom of the card however long the copy above it runs,
 * so two steps side by side line their buttons up. */
.welcome-step .btn { margin-top: auto; align-self: flex-start; }

/* --- the hours -------------------------------------------------------------- */

.welcome-hours {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.welcome-hours-head,
.welcome-hours-foot {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--size-small);
  color: var(--soft);
}

.welcome-hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
}

/* Borders only inside data (04_DESIGN_HANDOFF.md rule 5) — this is a small
 * grid of facts, so the rules between the rows belong. */
.welcome-hour {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--size-small);
}

.welcome-hour:first-child { border-top: 0; }

.welcome-hour-emoji { flex: none; }

.welcome-hour-name {
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.welcome-hour-times {
  margin-left: auto;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

/* --- what counts ------------------------------------------------------------ */

/* What camp asks of everybody, above the three cards that qualify it. Full
 * width, because it is the frame the cards hang off rather than one of them. */
.welcome-asks { display: flex; flex-direction: column; gap: var(--space-2); }

.welcome-asks-line {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--size-h3);
  line-height: 1.4;
}

.welcome-asks-note {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--soft);
}

.welcome-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2);
}

/* Same trick as the steps: three cards of different lengths sit in one row, and
 * their doors line up at the bottom instead of floating wherever the copy
 * happened to end. */
.welcome-count {
  display: flex;
  flex-direction: column;
}

.welcome-count .btn { margin-top: auto; align-self: flex-start; }

.welcome-count-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
}

.welcome-count-emoji { flex: none; font-size: var(--size-h3); line-height: 1; }

.welcome-count-body,
.welcome-count-note {
  margin: 0 0 var(--space-2);
  font-size: var(--size-small);
  line-height: 1.45;
  color: var(--soft);
}

/* --- the house rules -------------------------------------------------------- */

.welcome-rules {
  max-width: var(--measure);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.welcome-rule {
  display: flex;
  gap: var(--space-2);
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--ink);
}

.welcome-rule-mark {
  flex: none;
  color: var(--t-tea);
  font-weight: var(--weight-bold);
}

/* --- when you land ---------------------------------------------------------- */

.welcome-meets {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
}

.welcome-meet {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--size-small);
}

.welcome-meet:first-child { border-top: 0; }

.welcome-meet-when {
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.welcome-meet-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.welcome-meet-title { font-weight: var(--weight-medium); }

.welcome-meet-what { color: var(--soft); }

.welcome-meet-where {
  color: var(--soft);
  text-align: right;
}

/* Prose links — the dues page, the build lead's address, camp's address. Left
 * to the browser they came out default blue and underlined, which is the one
 * colour in the app that means nothing (04_DESIGN_HANDOFF.md: colour carries
 * meaning, and no screen names one). Tea green, the same as every other link
 * that leaves the page. */
.welcome a {
  color: var(--t-tea-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* --- contact ---------------------------------------------------------------- */

.welcome-contact { display: flex; flex-direction: column; gap: var(--space-3); }

.welcome-contact-copy {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--soft);
}

/* --- phone ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .welcome { gap: var(--space-5); }

  /* One column, and the short version follows the prose it summarises rather
     than preceding it. */
  .welcome-hero { grid-template-columns: minmax(0, 1fr); }

  /* Three columns of anything at 390px is three columns of nothing: the day and
   * the place stack under the meeting instead. */
  .welcome-meet {
    grid-template-columns: 1fr;
  }

  .welcome-meet-where { text-align: left; }

  /* A button that runs the width of the card is the one-handed target the
   * conditions-first floor asks for. */
  .welcome-step .btn { align-self: stretch; }
}