/* First Hour — his half is a desk, but her half is a phone held in one hand
   in a corridor, possibly with no signal. */

/* The one thing that is this tool's own. Everything else it stands on lives in
   foundation.css, which is shared and copied in by `npm run design`. */
:root {
  --accent: #1f5f5b;
  --accent-pressed: #164643;
  /* Red means exactly one thing anywhere in this tool: somebody has authority
     nobody signed for. Nothing else is allowed to borrow it. */
  --raise-it: #9c2a20;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #6fb5ae;
    --accent-pressed: #539a93;
    --raise-it: #f08c7f;
  }
}

/* This tool's headline is a sentence, not a label, so it runs smaller than the
   foundation sets. */
h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
}

/* The notice here is always something that went wrong with a link, which is
   the one red thing on his side. */
#notice {
  border-left-color: var(--raise-it);
}

/* Everything he is taken to after an action. None of it should land flush
   against the top edge of the screen. */
#the-link,
#emergency-card,
#notice,
#the-questions {
  scroll-margin-top: 1rem;
}

#the-questions:focus-visible,
#the-link:focus-visible,
#emergency-card:focus-visible {
  outline: none;
}

#the-link {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1rem 1.1rem 1.2rem;
  margin-top: 2rem;
}

#the-link h2 {
  margin-top: 0;
}

#the-link p {
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}

#card-link {
  margin-top: 0;
  font-size: 0.9rem;
  /* The link is long and opaque. Showing its end tells him nothing; showing
     its start tells him it is his tool. */
  direction: ltr;
}

/* Her side. From here down it is the card itself, which is the only thing she
   sees. */

.kicker {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

#card-for {
  margin-bottom: 0.15rem;
}

#card-born {
  margin: 0 0 1.75rem;
  color: var(--ink-soft);
}

#card-entries {
  margin: 0;
  display: grid;
  gap: 1rem;
}

#card-entries .entry {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.85rem 1rem 0.95rem;
}

#card-entries dt {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

#card-entries dd {
  margin: 0 0 0.2rem;
}

#card-entries dd:last-child {
  margin-bottom: 0;
}

#card-entries dd a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* Nothing he left out is hidden, because a gap she cannot see is a gap she
   cannot ask about. It is only quieter than what is there. */
#card-entries [data-unrecorded] dd {
  color: var(--ink-soft);
  font-style: italic;
}

#her-standing {
  margin-top: 2rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.25rem 1.1rem 1rem;
  background: var(--card);
}

.standing {
  margin: 0.9rem 0 0;
}

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

.standing.raise-it b {
  color: var(--raise-it);
}

.standing.raise-it span {
  font-weight: 600;
}

.add-to-home {
  margin: 1.75rem 0 1.5rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

#fix-the-card {
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--rule);
  font-weight: 400;
}

#fix-the-card:active,
#fix-the-card:hover {
  background: none;
  border-color: var(--accent);
  color: var(--ink);
}

/* The desktop layout for his side is the same column with more air, because
   the form is a sequence and a sequence in two columns is a form people skip
   half of. The card is different: it is a reference somebody scans, so on a
   wide screen its entries lay out as a board rather than a list. */
@media (min-width: 48rem) {
  #app {
    max-width: 42rem;
    padding-top: calc(3rem + env(safe-area-inset-top));
  }

  #card-entries {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  #her-standing {
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 64rem) {
  #app {
    max-width: 52rem;
  }
}