/* Mobile first — the spec puts the son on a phone, alone, at the hour the
   thought arrives. */

:root {
  --ink: #1b1b1f;
  --ink-soft: #55555f;
  --page: #fbfaf7;
  --card: #ffffff;
  --rule: #e2ded5;
  --accent: #9c3a24;
  --accent-pressed: #7a2b19;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece9e2;
    --ink-soft: #a6a29a;
    --page: #17171a;
    --card: #202024;
    --rule: #33333a;
    --accent: #e39476;
    --accent-pressed: #c47657;
  }
}

* {
  box-sizing: border-box;
}

html {
  /* His thumb should never pull the page out from under the form, and an
     over-scroll at the end of the questions should not reach the browser. */
  overscroll-behavior: contain;
}

body {
  margin: 0;
  /* No 300ms wait on the one button in the tool, and no grey OS flash — the
     button paints its own pressed state below. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: var(--page);
  color: var(--ink);
  font:
    17px/1.55 ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

#app {
  max-width: 34rem;
  margin: 0 auto;
  /* viewport-fit=cover hands us the whole screen, notch and home indicator
     included. These insets are what stops the first question and the button
     from sitting underneath them. */
  padding: calc(1.75rem + env(safe-area-inset-top))
    calc(1.25rem + env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom))
    calc(1.25rem + env(safe-area-inset-left));
}

h1 {
  /* 26px on a phone, 44px once there is room for it. */
  font-size: clamp(1.6rem, 1.15rem + 2vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 2rem 0 0.75rem;
}

.standfirst {
  color: var(--ink-soft);
  margin: 0 0 1.75rem;
}

#notice {
  background: var(--card);
  border-left: 3px solid var(--accent);
  padding: 0.75rem 0.9rem;
  margin: 0 0 1.5rem;
  border-radius: 0 6px 6px 0;
}

label {
  display: block;
  margin-bottom: 1.15rem;
  font-weight: 600;
}

input,
select,
button {
  /* 44px is the floor for a finger. A select sized only by its font lands at
     43, which is the kind of miss nobody sees without measuring. */
  min-height: 2.75rem;
}

@media (pointer: coarse) {
  input,
  select,
  button {
    min-height: 3rem;
  }
}

input,
select {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.8rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--page);
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

button:active {
  background: var(--accent-pressed);
}

.hole-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
}

#hole-count {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

#hole-count-label {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

#first-hole {
  margin: 0;
  color: var(--ink-soft);
}

/* Both are scrolled to after a submit, and neither should land flush against
   the top edge of the screen. */
#drill-result,
#notice {
  scroll-margin-top: 1rem;
}

#holes {
  margin: 0;
  padding-left: 1.1rem;
}

#holes li {
  margin-bottom: 0.7rem;
}

#holes b {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

/* A household with nothing missing has no list, and a heading standing over an
   empty list reads as something that failed to load. */
#holes:empty,
.where-it-stops:has(+ #holes:empty) {
  display: none;
}

#mobilization-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
}

.scenario {
  margin: 0;
  font-weight: 600;
}

#mobilization-card ul {
  margin: 0.8rem 0 0;
  padding-left: 1.1rem;
  color: var(--ink-soft);
}

#mobilization-card li {
  margin-bottom: 0.45rem;
}

#mobilization-card b {
  color: var(--ink);
}

/* On the card the moment and what happens at it read as one sentence, so the
   separator is drawn rather than written — the renderer is handed two strings
   and never a dash. In the hole list above, the moment is a label instead and
   needs none. */
#mobilization-card b::after {
  content: " — ";
  font-weight: 400;
  color: var(--ink-soft);
}

@media (hover: hover) and (pointer: fine) {
  button:hover {
    background: var(--accent-pressed);
  }
}

/* The desktop layout. Not the phone column stretched — the questions and what
   happens tonight are two panes. He changes an answer on the left and the night
   on the right is what moves; the form never jumps out from under him, and the
   holes are never below the fold because they were never in the same column.

   The detail pane only exists once there is a detail. Until he runs the drill
   the tool is one centred column, because a two-column grid with an empty half
   is the dead space this layout exists to remove. */
@media (min-width: 64rem) {
  #app {
    max-width: 64rem;
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(0, 26rem);
    column-gap: 3rem;
    align-items: start;
    padding-top: calc(3rem + env(safe-area-inset-top));
  }

  #app:has(#drill-result[hidden]) {
    display: block;
    max-width: 34rem;
  }

  #drill-result {
    position: sticky;
    top: 3rem;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
  }

  #drill-result > h2:first-child {
    margin-top: 0;
  }
}