/* whitelist.css -- the Founding Farmers application.
 *
 * This sheet ADDS to css/bloomshire.css; it changes nothing in it. The page
 * is built from the same parts as the front door -- the pack's parchment
 * 9-slice (.panel), its banner plate (.banner), its buttons (.btn), its
 * inventory slots (.slot), the game's 5x7 letters -- and obeys the same one
 * rule: a UI pixel is --px CSS pixels and every size, border, offset and
 * shadow is a whole number of them.
 *
 * Every class here is prefixed wl- so that nothing on the landing page can be
 * reached from this file by accident.
 */

/* ---------------------------------------------------------------- readable on parchment */
/* THE FRONT DOOR'S dim (#8c5a44) AND hot (#a5320f) ARE TOO FAINT FOR A FORM.
   On the pack's parchment they measure 2.5:1 and 2.9:1, which is fine for a
   caption under a picture and not fine for the words that tell an applicant
   what is wrong. This page uses the same browns, darkened until each clears
   4.5:1 on the parchment (and more on the lighter wells). The landing page
   keeps its own. */
:root {
  --wl-hot: #6e1b06;       /* 4.9:1 on --parchment, 7.4:1 on --parchment-hi */
  --wl-dim: #5a2f1e;       /* 4.8:1 and 7.2:1 */
  --wl-good: #054024;      /* 5.1:1 and 7.6:1 */
  --wl-done: #0a6b41;      /* a finished step's dot, under cream letters */
}

/* ---------------------------------------------------------------- the valley behind */
/* The front door's own farm plate, with a reading layer over it. The page
   scrolls; the valley does not. Dark enough that every word on top of it is
   comfortable, light enough that it is still a field. */
.wl-sky {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(9,12,18,.70) 0%, rgba(9,12,18,.82) 42%, rgba(9,12,18,.90) 100%),
    #1d3a2a url(../visuals/v2/farm.png) center top / cover no-repeat;
  image-rendering: pixelated;
}

/* THE PACK'S CLOUD SHADOWS, as the front door drifts them: the same grey
   silhouettes, multiplied over the ground, very faint, crossing slowly. It is
   the one thing that moves behind the words, and it is what makes the field
   read as alive rather than as a screenshot.
   Two bands, not a tiled field: a shadow repeated in both axes reads as
   wallpaper, which is exactly what it looked like the first time. Each band
   is one tile wider than the screen and slides by exactly one tile, so the
   loop has no seam and the browser only has to move a layer, not repaint it. */
.wl-sky::before, .wl-sky::after {
  content: ''; position: absolute;
  mix-blend-mode: multiply;
  image-rendering: pixelated;
  will-change: transform;
}
.wl-sky::before {
  left: calc(-178 * var(--px)); width: calc(100% + 178 * var(--px));
  top: 6%; height: calc(52 * var(--px));
  background: url(../assets/sprites/cloud_2.png) 0 0 / calc(178 * var(--px)) calc(52 * var(--px)) repeat-x;
  opacity: .30;
  animation: wl-drift-a 82s linear infinite;
}
.wl-sky::after {
  left: calc(-82 * var(--px)); width: calc(100% + 82 * var(--px));
  top: 52%; height: calc(52 * var(--px));
  background: url(../assets/sprites/cloud_0.png) 0 0 / calc(82 * var(--px)) calc(52 * var(--px)) repeat-x;
  opacity: .24;
  animation: wl-drift-b 61s linear infinite;
}
@keyframes wl-drift-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(178 * var(--px)), 0, 0); } }
@keyframes wl-drift-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(82 * var(--px)), 0, 0); } }
/* Held still when the visitor asks for less motion. The front door keeps its
   valley alive in that state on purpose -- there the valley IS the page, and
   freezing it made the site look broken. Here it is decoration behind a form,
   so there is nothing to lose by holding it. */
.still .wl-sky::before, .still .wl-sky::after { animation: none; }

/* ---------------------------------------------------------------- the chrome */
/* THE HUD SCROLLS AWAY HERE, and only here (this sheet is on no other page).
   On the front door every window is fixed and the world moves underneath, so
   a pinned bar never covers anything. This page is a document that scrolls,
   and a bar pinned over it would slide across the words and sit on top of the
   first panel after a jump to #apply. It rides the top of the page instead,
   and the foot carries the same links at the bottom. */
.hud { position: absolute; }

/* ---------------------------------------------------------------- the column */
.wl {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(22 * var(--px));
  padding: calc(34 * var(--px)) calc(8 * var(--px)) calc(20 * var(--px));
}
.wl > * { width: 100%; max-width: calc(250 * var(--px)); }
/* a jump to a section stops clear of the banner plate that straddles its top edge */
.wl > *, #apply { scroll-margin-top: calc(20 * var(--px)); }

/* a panel on this page: the pack's parchment, room to breathe, and its
   banner sitting astride the top edge the way a card's does */
.wl-panel { padding: calc(14 * var(--px)) calc(8 * var(--px)) calc(8 * var(--px)); }
.wl-panel > .banner:first-child {
  position: absolute; top: calc(-14 * var(--px));
  /* CENTRED ACROSS THE WHOLE PANEL. `left: 50%` + a translate leaves an
     absolutely placed box only the right half of the panel to size itself
     in, so a title longer than that ("The Founding Farmers") wrapped long
     before it needed to. Both edges pinned and auto margins give it the full
     width, and it still only wraps when it truly does not fit. */
  left: 0; right: 0; margin: 0 auto; width: fit-content;
  max-width: calc(100% - 8 * var(--px));
}
/* a long title on a narrow screen: let the plate grow instead of spilling.
   NO VERTICAL PADDING: the plate's middle strip is clipped to the content box
   (that is how its caps stay clean), so top and bottom padding cut the middle
   short and left the words on a thin band between two caps. */
.wl-panel > .banner:first-child { white-space: normal; text-align: center; height: auto; min-height: calc(17 * var(--px)); padding: 0 calc(10 * var(--px)); line-height: calc(9 * var(--px)); }

.wl-lead { color: var(--wl-hot); }
.wl-note { color: var(--wl-dim); }
.wl-panel p { margin-bottom: calc(4 * var(--px)); }
/* A PLAIN LIST'S DEFAULTS, AT NO SPECIFICITY. Written as `.wl-panel ul` these
   outranked every list that has its own class -- the progress rail and the
   skill grid picked up a 30px indent (and sat off centre) and gaps they never
   asked for. :where() keeps them as defaults that any class overrides. */
:where(.wl-panel) :where(ul, ol) { margin: 0 0 calc(4 * var(--px)); padding: 0 0 0 calc(10 * var(--px)); }
:where(.wl-panel) :where(li) { margin-bottom: calc(2 * var(--px)); }

/* ---------------------------------------------------------------- the hero */
.wl-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wl-hero__mark { margin: 0 0 calc(6 * var(--px)); }
.wl-hero__mark .brand__logo { width: min(74vw, 300px); }
.wl-hero__mark .brand__word {
  font-size: calc(12 * var(--logo)); line-height: calc(12 * var(--logo)); color: var(--cream);
  text-shadow: var(--logo) 0 0 var(--ink), calc(-1 * var(--logo)) 0 0 var(--ink),
               0 var(--logo) 0 var(--ink), 0 calc(-1 * var(--logo)) 0 var(--ink);
}
.wl-hero__title {
  margin: 0 0 calc(3 * var(--px));
  font-size: calc(18 * var(--px)); line-height: calc(20 * var(--px));
  font-weight: normal; text-transform: uppercase; color: var(--cream);
  text-shadow: calc(2 * var(--px)) 0 0 var(--ink), calc(-2 * var(--px)) 0 0 var(--ink),
               0 calc(2 * var(--px)) 0 var(--ink), 0 calc(-2 * var(--px)) 0 var(--ink),
               0 calc(4 * var(--px)) 0 var(--backdrop-deep);
}
.wl-hero__line { color: #ffe0bd; text-shadow: 0 var(--px) 0 var(--ink); margin-bottom: calc(8 * var(--px)); }
.wl-hero__small { color: var(--cream); text-shadow: 0 var(--px) 0 var(--ink); margin: calc(6 * var(--px)) 0 0; }

/* the three facts of the round, each in the pack's own frame */
.wl-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(3 * var(--px)); margin: 0 0 calc(8 * var(--px)); padding: 0; list-style: none;
  width: 100%;
}
.wl-fact {
  display: flex; flex-direction: column; align-items: center; gap: var(--px);
  padding: calc(4 * var(--px)) calc(2 * var(--px));
  background: rgb(36 10 17 / .62);
  box-shadow: 0 0 0 var(--px) var(--ink);
  text-align: center; min-width: 0;
}
.wl-fact b { font-weight: normal; font-size: calc(11 * var(--px)); line-height: calc(13 * var(--px)); color: var(--cream); }
.wl-fact span { color: var(--parchment-hi); line-height: calc(9 * var(--px)); overflow-wrap: anywhere; }
.wl-fact img { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }

/* ---------------------------------------------------------------- the ticked lists */
/* what a Founding Farmer carries: a tick, and the thing itself */
.wl-gets { margin: 0 0 calc(4 * var(--px)); padding: 0; list-style: none; }
.wl-gets li {
  position: relative; padding: 0 0 0 calc(13 * var(--px)); margin-bottom: calc(3 * var(--px));
  line-height: calc(10 * var(--px));
}
.wl-gets li::before {
  content: ''; position: absolute; left: 0; top: calc(1 * var(--px));
  width: calc(8 * var(--px)); height: calc(8 * var(--px));
  background: url(../assets/ui/icon_tick_dark.png) center / 100% no-repeat;
  image-rendering: pixelated;
}
.wl-gets b { font-weight: normal; color: var(--wl-hot); }

/* ---------------------------------------------------------------- the progress rail */
.wl-rail {
  display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap;
  gap: calc(2 * var(--px)); margin: 0 0 calc(8 * var(--px)); padding: 0; list-style: none;
}
.wl-rail li {
  display: flex; align-items: center; gap: calc(3 * var(--px)); margin: 0;
  padding: calc(2 * var(--px)) calc(4 * var(--px));
  color: var(--wl-dim); text-transform: uppercase; line-height: calc(9 * var(--px));
  background: var(--parchment); box-shadow: 0 0 0 var(--px) var(--edge);
}
.wl-rail__dot {
  display: grid; place-items: center;
  width: calc(11 * var(--px)); height: calc(11 * var(--px));
  background: var(--parchment-hi); box-shadow: 0 0 0 var(--px) var(--edge);
  color: var(--ink-text); line-height: 1;
}
/* NOT COLOUR ALONE: a finished step's number becomes a tick (js/whitelist.js),
   and the step you are on is the only one with an arrow. */
.wl-rail li.is-done { color: var(--ink-text); }
.wl-rail li.is-done .wl-rail__dot { background: var(--wl-done); color: var(--cream); }
.wl-rail li.is-now { color: var(--ink-text); background: var(--parchment-hi); }
.wl-rail li.is-now .wl-rail__dot { background: var(--gold); color: var(--ink-text); }
.wl-rail li.is-now::after {
  content: ''; width: calc(7 * var(--px)); height: calc(7 * var(--px));
  background: url(../assets/ui/icon_play_dark.png) center / 100% no-repeat;
  image-rendering: pixelated;
}

/* ---------------------------------------------------------------- the form */
.wl-step[hidden] { display: none !important; }
.wl-fields { display: flex; flex-direction: column; gap: calc(7 * var(--px)); margin: calc(5 * var(--px)) 0; }

.wl-field { display: block; }
.wl-field__label { display: block; margin-bottom: calc(2 * var(--px)); color: var(--ink-text); text-transform: uppercase; }
.wl-field__label .wl-req { color: var(--wl-hot); }
.wl-field__hint { display: block; margin: 0 0 calc(3 * var(--px)); color: var(--wl-dim); line-height: calc(9 * var(--px)); }

/* a text field: the pack's sunken well, the game's letters inside it */
.wl-input {
  display: block; width: 100%;
  min-height: calc(21 * var(--px));
  padding: calc(4 * var(--px)) calc(5 * var(--px));
  font: inherit; font-size: calc(8 * var(--px)); line-height: calc(11 * var(--px));
  color: var(--ink-text);
  background: var(--parchment-hi);
  border: 0;
  box-shadow: inset 0 0 0 var(--px) var(--edge), inset 0 calc(2 * var(--px)) 0 rgb(140 60 50 / .28);
  -webkit-appearance: none; appearance: none;
  border-radius: 0;
}
.wl-input::placeholder { color: rgb(58 20 16 / .62); }
.wl-input:focus-visible, .wl-input:focus {
  outline: var(--px) solid var(--gold); outline-offset: 0;
  background: #fff3dc;
}
.wl-input:disabled { color: var(--dim); background: var(--parchment); }
/* a field with something wrong: a red rim AND a message AND a mark, never colour alone */
.wl-field.is-bad .wl-input { box-shadow: inset 0 0 0 calc(2 * var(--px)) var(--wl-hot); }
/* THE WHOLE ADDRESS, WHERE THERE IS ROOM FOR IT. Forty-two characters do
   not fit a phone at a readable size whatever is done to them, so the field
   scrolls there and the shortened echo under it (0x5aAe...eAed) is what the
   applicant checks against their wallet. On a laptop it all shows at once. */
.wl-input--addr { font-size: calc(6 * var(--px)); letter-spacing: 0; padding-left: calc(4 * var(--px)); padding-right: calc(4 * var(--px)); }

/* what is wrong, said in words next to the field */
.wl-err {
  display: none; align-items: flex-start; gap: calc(3 * var(--px));
  margin: calc(2 * var(--px)) 0 0; color: var(--wl-hot); line-height: calc(9 * var(--px));
}
.wl-field.is-bad .wl-err, .wl-err.is-on { display: flex; }
.wl-err img { width: calc(8 * var(--px)); height: calc(8 * var(--px)); flex: none; margin-top: var(--px); }
/* and what is right */
.wl-good { display: none; align-items: center; gap: calc(3 * var(--px)); margin: calc(2 * var(--px)) 0 0; color: var(--wl-good); }
.wl-field.is-good .wl-good { display: flex; }
.wl-good img { width: calc(8 * var(--px)); height: calc(8 * var(--px)); }

/* ---------------------------------------------------------------- the X task */
.wl-task { margin: 0 0 calc(5 * var(--px)); padding: 0 0 0 calc(12 * var(--px)); counter-reset: none; }
.wl-task li { line-height: calc(10 * var(--px)); }
.wl-task b { font-weight: normal; color: var(--wl-hot); }
.wl-xrow { display: flex; flex-wrap: wrap; gap: calc(3 * var(--px)); align-items: center; margin: 0 0 calc(5 * var(--px)); }

/* the confirmation: a real checkbox, wearing the pack's slot and tick */
.wl-check {
  display: flex; align-items: flex-start; gap: calc(4 * var(--px));
  margin: calc(4 * var(--px)) 0 0;
  padding: calc(4 * var(--px));
  background: var(--parchment-hi); box-shadow: 0 0 0 var(--px) var(--edge);
  line-height: calc(10 * var(--px));
}
.wl-check input { position: absolute; width: var(--px); height: var(--px); opacity: 0; margin: 0; pointer-events: none; }
.wl-check__box {
  flex: none; display: grid; place-items: center;
  width: calc(16 * var(--px)); height: calc(16 * var(--px));
  background: url(../assets/ui/slot.png) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.wl-check__box img { width: calc(10 * var(--px)); height: calc(10 * var(--px)); opacity: 0; }
.wl-check input:checked + .wl-check__box { background-image: url(../assets/ui/slot_sel.png); }
.wl-check input:checked + .wl-check__box img { opacity: 1; }
.wl-check input:focus-visible + .wl-check__box { outline: var(--px) solid var(--gold); outline-offset: var(--px); }
.wl-check__words { min-width: 0; }

/* ---------------------------------------------------------------- choices */
/* a group of answers is a real fieldset, stripped of the browser's own box */
.wl-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.wl-opts { display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)); margin: 0; padding: 0; border: 0; }
.wl-opts--col { flex-direction: column; }
.wl-opt { position: relative; display: block; }
.wl-opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; }
.wl-opt__face {
  display: flex; align-items: center; gap: calc(3 * var(--px));
  min-height: calc(19 * var(--px));
  padding: 0 calc(5 * var(--px));
  border: calc(6 * var(--px)) solid transparent;
  border-image: url(../assets/ui/btn1.png) 6 fill / calc(6 * var(--px)) repeat;
  image-rendering: pixelated;
  color: var(--cream); text-shadow: 0 var(--px) 0 var(--ink);
  text-transform: uppercase; line-height: calc(9 * var(--px));
}
.wl-opt__face::before {
  content: ''; flex: none; width: calc(7 * var(--px)); height: calc(7 * var(--px));
  background: url(../assets/ui/icon_play_light.png) center / 100% no-repeat;
  image-rendering: pixelated; opacity: 0;
}
.wl-opt input:checked + .wl-opt__face {
  border-image-source: url(../assets/ui/btn0.png); color: var(--ink-text); text-shadow: none;
  box-shadow: 0 var(--px) 0 var(--ink);
  transform: translateY(calc(-1 * var(--px)));
}
/* NOT COLOUR ALONE: the chosen one is also the only one with the pointer. */
.wl-opt input:checked + .wl-opt__face::before { opacity: 1; background-image: url(../assets/ui/icon_play_dark.png); }
.wl-opt input:focus-visible + .wl-opt__face { outline: var(--px) solid var(--cream); outline-offset: var(--px); box-shadow: 0 0 0 calc(2 * var(--px)) var(--ink); }
.wl-opt:hover .wl-opt__face { transform: translateY(calc(-1 * var(--px))); }
.wl-opts legend { padding: 0; }

/* ---------------------------------------------------------------- the country box */
.wl-combo { position: relative; }
.wl-combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--px)); z-index: 6;
  max-height: calc(120 * var(--px)); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: var(--px); list-style: none;
  background: var(--parchment);
  box-shadow: 0 0 0 var(--px) var(--edge), calc(2 * var(--px)) calc(3 * var(--px)) 0 rgb(0 0 0 / .35);
}
.wl-combo__list[hidden] { display: none; }
.wl-combo__opt {
  padding: calc(3 * var(--px)) calc(4 * var(--px));
  color: var(--ink-text); line-height: calc(10 * var(--px)); cursor: pointer;
}
.wl-combo__opt[aria-selected="true"], .wl-combo__opt.is-on { background: var(--parchment-hi); box-shadow: inset 0 0 0 var(--px) var(--edge); }
.wl-combo__none { padding: calc(3 * var(--px)) calc(4 * var(--px)); color: var(--wl-dim); }

/* ---------------------------------------------------------------- the review */
.wl-review { margin: calc(4 * var(--px)) 0 calc(6 * var(--px)); padding: 0; }
.wl-review div {
  display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)) calc(4 * var(--px));
  padding: calc(3 * var(--px)) calc(4 * var(--px));
  background: var(--parchment-hi); box-shadow: 0 0 0 var(--px) var(--edge);
  margin-bottom: calc(2 * var(--px));
}
.wl-review dt { flex: none; min-width: calc(58 * var(--px)); color: var(--wl-dim); text-transform: uppercase; }
.wl-review dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ink-text); }

/* ---------------------------------------------------------------- the buttons at the foot of a step */
.wl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(3 * var(--px)); margin-top: calc(6 * var(--px)); }
.wl-actions .btn { min-width: calc(44 * var(--px)); }
.wl-actions__spacer { flex: 1 1 auto; }
/* A LOCKED BUTTON SAYS SO, AND SAYS WHY. It is dimmed, its arrow is gone, and
   it still takes focus so a keyboard can reach the reason beside it. */
.btn[aria-disabled="true"] {
  opacity: .55; box-shadow: none; transform: none;
  border-image-source: url(../assets/ui/btn1.png);
}
.btn[aria-disabled="true"]:hover { --lift: 0px; box-shadow: none; }
.btn[aria-disabled="true"]::after { display: none; }
.wl-why { color: var(--wl-dim); line-height: calc(9 * var(--px)); flex: 1 1 calc(80 * var(--px)); }
/* the arrow that arrives when the step is complete: one step, no slide */
.wl-arrow { display: inline-block; width: 0; overflow: hidden; transition: width 120ms steps(3, end); vertical-align: baseline; }
.btn:not([aria-disabled="true"]) .wl-arrow { width: calc(9 * var(--px)); }
.still .wl-arrow { transition: none; }

/* ---------------------------------------------------------------- submitted */
.wl-ok { text-align: center; }
.wl-ok__mark {
  display: grid; place-items: center; width: calc(26 * var(--px)); height: calc(26 * var(--px));
  margin: 0 auto calc(5 * var(--px));
  background: url(../assets/ui/slot_sel.png) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.wl-ok__mark img { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.wl-ok .wl-actions { justify-content: center; }

/* what the server said went wrong, over the submit button */
.wl-shout {
  display: none; align-items: flex-start; gap: calc(3 * var(--px));
  margin: calc(4 * var(--px)) 0 0; padding: calc(4 * var(--px));
  background: #f6d2bc; box-shadow: 0 0 0 var(--px) var(--hot);
  color: #7a1f08; line-height: calc(10 * var(--px));
}
.wl-shout.is-on { display: flex; }
.wl-shout img { width: calc(10 * var(--px)); height: calc(10 * var(--px)); flex: none; }

/* the honeypot: off the page, out of the tab order, and invisible to a
   screen reader -- a person can neither see nor reach it, and a script that
   fills every input it finds walks straight into it */
.wl-hp { position: absolute; left: -9999px; top: 0; width: var(--px); height: var(--px); overflow: hidden; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 719px) {
  .wl { gap: calc(18 * var(--px)); padding: calc(30 * var(--px)) calc(5 * var(--px)) calc(16 * var(--px)); }
  .wl-panel { padding: calc(14 * var(--px)) calc(5 * var(--px)) calc(6 * var(--px)); }
  .wl-hero__title { font-size: calc(14 * var(--px)); line-height: calc(16 * var(--px)); }
  /* three facts side by side is three words a line on a phone: stack them */
  .wl-facts { grid-template-columns: 1fr; }
  .wl-fact { flex-direction: row; justify-content: flex-start; gap: calc(4 * var(--px)); text-align: left; padding: calc(3 * var(--px)) calc(4 * var(--px)); }
  .wl-fact b { font-size: calc(10 * var(--px)); line-height: calc(12 * var(--px)); }
  .wl-rail { gap: var(--px); }
  .wl-rail li { padding: calc(2 * var(--px)) calc(3 * var(--px)); }
  .wl-actions .btn { flex: 1 1 100%; min-width: 0; }
  .wl-actions__spacer { display: none; }
  .wl-why { flex-basis: 100%; }
  .wl-review dt { min-width: 100%; }
  .wl-combo__list { max-height: calc(96 * var(--px)); }
}

/* ---------------------------------------------------------------- still */
@media (prefers-reduced-motion: reduce) {
  .wl-arrow, .wl-opt__face, .wl-input { transition: none !important; }
}