/* The Handbill Ledger — the two auth screens.
 *
 * Loaded only by templates/registration/login.html and signup.html, on top of
 * game/style.css, whose custom properties are the palette here too. Nothing in
 * this file redefines a token declared there; the handful of locals below are
 * for tones the game shell never needed (a deeper paper for a sunken field, a
 * soft ink for help text) and are namespaced `--auth-*` so a later edit to
 * style.css can never silently change their meaning.
 *
 * The conceit: signing in is reading a bill posted on a wall. So the page is a
 * lamplit plank wall, and the form is one sheet of paper tacked to it, set the
 * way an 1850s jobbing printer would have set it — a stacked masthead of mixed
 * sizes filling the measure, between heavy rules.
 *
 * Fonts are system stacks only, matching the project's no-CDN rule. "Playbill"
 * and "Rockwell" are the poster faces when a machine happens to have them;
 * everything after is a graceful walk down to a plain serif.
 */

:root {
  /* Paper that has been pressed: the well a field sits in, and the rule that
   * bounds it. Both are darker than --parchment on purpose — a blank on a form
   * reads as blank because the stock around it is lighter. */
  --auth-paper-deep: #dbc99f;
  --auth-rule: #a8916a;
  --auth-ink-soft: #6b5539;
  --auth-alarm-paper: #edd6ca;

  --auth-display:
    "Playbill", "Rockwell", "Bookman Old Style", "Bodoni 72", Didot, Georgia,
    "Times New Roman", serif;
  /* Entries are typed into the book, so they are set as struck characters.
   * Also the practical choice: a monospace face is where 1, l and I stop
   * looking alike, which matters most in the one field nobody can read back. */
  --auth-typed: "Courier New", Courier, "Nimbus Mono PS", monospace;
}

/* --- The wall ------------------------------------------------------------ */

/* game/style.css hides body overflow for the game shell, which has a canvas
 * exactly the size of the viewport and nothing to scroll. These pages are
 * ordinary documents — a signup form with four password rules on it is taller
 * than a phone — so the auth body takes its scrolling back. The class raises
 * specificity above the bare `body` rule there, so this holds whatever order
 * the two files end up loading in. */
body.auth {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  /* Planed boards under a lamp: vertical grain, the seams between planks, and
   * a pool of warm light where the bill hangs. Drawn, not shipped — no image
   * request on the first page a player ever sees. */
  background-color: var(--wood-dark);
  background-image:
    radial-gradient(ellipse 70% 58% at 50% 45%, rgb(201 162 39 / 16%), transparent 70%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 22%) 0 2px, transparent 2px 84px),
    repeating-linear-gradient(90deg, rgb(255 235 190 / 4%) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, #2c2016, #1d150e);
  background-attachment: fixed;
}

/* Viewport units, not `min-height: 100%`: body is auto-height here so a
 * percentage would resolve against nothing and the bill would ride at the top
 * of the wall. `dvh` second so it wins where supported — on a phone the bar
 * that shows and hides is exactly the height this page must not guess at. */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(1rem, 5vw, 3rem) clamp(0.75rem, 4vw, 2rem);
}

/* --- The bill ------------------------------------------------------------ */

.handbill {
  position: relative;
  width: 100%;
  max-width: 27rem;
  padding: 2.25rem clamp(1.1rem, 5vw, 2.25rem) 1.75rem;
  color: var(--ink);
  /* Aged stock: a light struck across the top, foxing in one corner, and two
   * hairline grids for the tooth of the paper. */
  background-color: var(--parchment);
  background-image:
    radial-gradient(ellipse at 50% -10%, rgb(255 252 240 / 55%), transparent 62%),
    radial-gradient(ellipse at 96% 104%, rgb(122 92 45 / 16%), transparent 46%),
    repeating-linear-gradient(0deg, rgb(90 65 40 / 4%) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgb(90 65 40 / 4%) 0 1px, transparent 1px 5px);
  border: 1px solid var(--parchment-edge);
  border-radius: 2px;
  /* Paper lifted off the wall: a tight contact shadow, then the cast one. */
  box-shadow:
    0 1px 0 rgb(255 250 235 / 40%) inset,
    0 2px 4px rgb(0 0 0 / 35%),
    0 22px 48px rgb(0 0 0 / 55%);
}

/* Tacked up, not floating. Two brass heads, each with a rim, a highlight where
 * the lamp catches it, and a shadow on the paper beneath. */
.handbill::before,
.handbill::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #f4e2a6 0 18%, var(--brass) 42%, #7d6316 100%);
  box-shadow:
    0 0 0 1px rgb(60 44 10 / 55%),
    0 2px 3px rgb(0 0 0 / 45%);
}

.handbill::before {
  left: 0.85rem;
}

.handbill::after {
  right: 0.85rem;
}

/* --- Masthead ------------------------------------------------------------ */

/* The signature of these two pages, and the only loud thing on them: one name
 * broken across three lines of three different sizes so it fills the measure
 * edge to edge, the way a jobbing printer filled a handbill with the type he
 * had in the case. The rules above and below are the poster's, thick over thin.
 */
.handbill__masthead {
  position: relative;
  margin: 0 0 1.4rem;
  padding: 0.8rem 0 0.9rem;
  text-align: center;
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
}

/* The thin companion of each heavy rule. Real elements rather than inset
 * shadows: the sheet's background is a stack of gradients, so faking the gap
 * by painting a band of flat parchment over it would leave a visible seam. */
.handbill__masthead::before,
.handbill__masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink);
}

.handbill__masthead::before {
  top: 3px;
}

.handbill__masthead::after {
  bottom: 3px;
}

.handbill__colophon {
  margin: 0 0 0.5rem;
  font-family: var(--slab);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--auth-ink-soft);
}

.handbill__name {
  /* An <h1> carrying three <span>s: the accessible name stays "The Handbill
   * Ledger" while the type is set line by line. */
  margin: 0;
  font-family: var(--auth-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  /* Letterpress: ink driven into the sheet, so the light sits below the
   * stroke and the bruise above it. */
  text-shadow:
    0 1px 0 rgb(255 250 235 / 65%),
    0 -1px 0 rgb(43 29 16 / 22%);
}

.handbill__name span {
  display: block;
  line-height: 1;
}

.handbill__the {
  font-size: clamp(0.6rem, 2.4vw, 0.72rem);
  letter-spacing: 0.62em;
  /* Letterspacing pads the right of the last glyph; pull it back so the word
   * sits optically centred rather than measurably so. */
  text-indent: 0.62em;
  color: var(--auth-ink-soft);
  margin-bottom: 0.5rem;
}

.handbill__word {
  font-size: clamp(2.3rem, 12.5vw, 3.5rem);
  letter-spacing: 0.03em;
}

/* Flanked by rules that run out to the measure — the period way of setting a
 * short line under a long one without leaving a hole on either side. */
.handbill__ledger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.55rem;
  font-size: clamp(0.92rem, 4.4vw, 1.2rem);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}

.handbill__ledger::before,
.handbill__ledger::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--ink);
}

/* --- The bill's business ------------------------------------------------- */

.handbill__deck {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--auth-ink-soft);
}

.handbill__form {
  margin: 0;
}

.field {
  margin-bottom: 1.15rem;
}

.field__label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--slab);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
}

/* Attribute selectors rather than a class: Django builds these inputs, and the
 * template hands over its widgets untouched so no field name can be broken by
 * a hand-written <input>. */
.handbill input[type="text"],
.handbill input[type="password"] {
  display: block;
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-family: var(--auth-typed);
  font-size: 1rem;
  color: var(--ink);
  /* A blank ruled on the form: sunken stock, and a heavier rule along the
   * bottom where a clerk's pen would run. */
  background: var(--auth-paper-deep);
  border: 1px solid var(--auth-rule);
  border-bottom: 2px solid var(--ink);
  border-radius: 1px;
  box-shadow: inset 0 2px 3px rgb(60 40 15 / 20%);
}

.handbill input[type="text"]:focus-visible,
.handbill input[type="password"]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  background: #e6d6ae;
}

.field__help {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--auth-ink-soft);
}

/* Django renders the password rules as a <ul>; it is a list of conditions, so
 * it stays one, just set small and tight enough not to shout. */
.field__help ul {
  margin: 0;
  padding-left: 1.1rem;
}

.handbill .handbill__submit {
  display: block;
  width: 100%;
  margin-top: 1.6rem;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  box-shadow: 0 1px 0 rgb(255 240 200 / 18%) inset;
}

.handbill .handbill__submit:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* --- Refusals ------------------------------------------------------------ */

/* Loud enough to stop someone who is mid-keystroke, and specific about what to
 * do next. Marked as an alert so it is announced, not just coloured. */
.handbill__refusal {
  margin: 0 0 1.4rem;
  padding: 0.75rem 0.9rem;
  background: var(--auth-alarm-paper);
  border: 1px solid var(--parchment-edge);
  border-left: 5px solid var(--blood);
  border-radius: 1px;
}

.handbill__refusal-label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--slab);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blood);
}

.handbill__refusal p,
.handbill__refusal ul {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
}

.handbill__refusal ul {
  padding-left: 1.1rem;
}

/* Django's own wording, under the game's. Quieter than the line above it
 * because it is the fine print of the same refusal, not a second one. */
.handbill__refusal p.handbill__refusal-detail {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--auth-ink-soft);
}

.field__error {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--blood);
}

/* --- The line at the foot ------------------------------------------------- */

.handbill__foot {
  margin: 1.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--auth-rule);
  text-align: center;
  font-size: 0.92rem;
  color: var(--auth-ink-soft);
}

.handbill__foot a {
  font-family: var(--slab);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--blood);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.handbill__foot a:hover {
  color: #94301d;
}

.handbill__foot a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* --- Posting it ----------------------------------------------------------- */

/* One movement on the whole page: the sheet drops the last few pixels onto the
 * wall. Short enough to read as weight rather than as an effect, and the only
 * animation here — a screen someone visits twice a day should not perform. */
@media (prefers-reduced-motion: no-preference) {
  .handbill {
    animation: handbill-post 260ms ease-out both;
  }

  @keyframes handbill-post {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
}