/* app.cue.photo
 *
 * What the site has no shape for, and nothing the site already has. The
 * tokens, the type, the buttons, the lockup, the focus ring and the skip link
 * are `site/src/css/site.css`'s, served beside this file from the same bytes;
 * this sheet is an unscoped field (the site's is scoped to its request form),
 * a card, a definition list with tabular figures, a checklist, a row's remove
 * control, and the notices. Nothing here needs JavaScript.
 *
 * Sizes are in `rem`, so a reader's larger text size scales them; the site
 * sheet still sets its own in `px`, and the fix there is the site's. */

/* ---- the page ------------------------------------------------------- */
/* Every screen here is short, so the footer is pinned to the bottom of the
 * viewport rather than floating under the form. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.page { padding-block: 2.5rem 5.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.page > .h2 { max-width: 30ch; }
.door { width: min(32rem, 100%); display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 860px) { .page { padding-block: 1.5rem 3.5rem; } }

/* ---- the account line in the band ------------------------------------ */
/* Every control in the bar is a 44pt target, AGENTS.md's floor; the bar is
 * tall enough for it. */
.nav-account form { display: inline-flex; margin: 0; }
.nav-account .login { min-height: 2.75rem; padding: 0 0.5rem; }
.nav-account .ghost { min-height: 2.75rem; padding: 0 1rem; font-size: 0.9375rem; }
/* The site only ever put `.ghost` on an `<a>`; on a `<button>` the browser's
 * own ButtonFace shows through, blush on grey at 1.05:1. */
.ghost { background: transparent; }

/* ---- a field, unscoped ---------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field label { font-size: 0.9375rem; font-weight: 700; }
/* The border is the soft ink rather than the rule colour: a rule at 1.25:1
 * against the paper is a field whose edge cannot be seen, and WCAG 1.4.11
 * asks 3:1 of a control's boundary. */
.field input {
  min-height: 3rem; width: 100%; padding: 0 0.875rem; border-radius: var(--radius);
  border: 1.5px solid var(--paper-soft); background: var(--surface); color: var(--paper-ink);
  font: inherit; font-size: 1.0625rem;
}
/* Digits typed one at a time want room to be read back. */
.field input[inputmode="numeric"] { font-size: 1.5rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.field .small { margin-top: 0.25rem; }
.door form { display: flex; flex-direction: column; gap: 1rem; }
.door .submit { align-self: flex-start; }
.soft.small { max-width: 60ch; }
@media (max-width: 480px) { .door .submit, .door .actions > * { width: 100%; } }

/* ---- notices ---------------------------------------------------------- */
/* A refusal is drawn *and* announced: `role="alert"` on the element carries
 * it to a screen reader, and the rule is what carries it through sunlight.
 * The colour is the second colour, a fill and never a word. */
.notice {
  padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--second);
  border-left: 4px solid var(--coral); color: var(--paper-ink); font-size: 1rem;
}
.stepup { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding-block: 0.75rem; }

/* ---- a card ----------------------------------------------------------- */
.card {
  display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem 1.75rem; border-radius: 1rem;
  background: var(--surface); border: 1px solid var(--paper-rule); max-width: 45rem;
}
.card h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.card h3 { font-size: 1.125rem; font-weight: 700; margin-top: 0.5rem; }
.card p { max-width: 60ch; }

/* ---- facts: a definition list with tabular figures ------------------- */
.facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.625rem 1.5rem; }
.facts div { display: contents; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; gap: 0.25rem; } .facts dt { margin-top: 0.625rem; } }

/* ---- the checklist ---------------------------------------------------- */
/* Every row is something not yet done; a done thing is not drawn. So the
 * marker is an empty box rather than a tick, and the box is drawn, not a
 * control: there is nothing here to press. */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist li {
  display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0.25rem 0.875rem; align-items: start;
  padding: 0.875rem 0; border-top: 1px solid var(--hairline);
}
.checklist li::before {
  content: ""; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; margin-top: 0.1875rem;
  border: 2px solid var(--paper-soft); border-radius: 0.3125rem;
}
.checklist li b { font-size: 1.0625rem; }
.checklist li span { font-size: 0.9375rem; max-width: 52ch; }

/* ---- a table of names ------------------------------------------------- */
.names { width: 100%; border-collapse: collapse; font-size: 1rem; }
.names th { text-align: left; font-size: 0.875rem; font-weight: 700; color: var(--paper-soft); padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--hairline); }
.names td { padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.names .tabular { font-variant-numeric: tabular-nums; font-weight: 500; }
/* A row's remove control: an outlined ghost rather than a coral button,
 * because it withdraws something and the one coral thing on a page is the
 * thing the page is for. */
.remove { min-height: 2.75rem; padding: 0 0.875rem; font-size: 0.875rem; }

/* ---- the footer, shorter than the site's --------------------------- */
.footer .wrap { padding-top: 1.5rem; border-top: 1px solid var(--band-rule); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-links li { font-size: 0.875rem; color: var(--band-soft); }
.footer-links a { color: var(--band-soft); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-links a:hover { color: var(--band-ink); }