/* The other front page: one bill, posted on the paper. The app's colours and
   its four faces, and nothing that scrolls. */

@font-face { font-family: "League Gothic"; src: url("fonts/LeagueGothic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "VT323"; src: url("fonts/VT323-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; src: url("fonts/LibreCaslonText-Italic.ttf") format("truetype"); font-display: swap; }

:root {
  color-scheme: light;
  --paper: #FBFAF5; --ink: #0E1440; --soft: rgba(14, 20, 64, .62);
  --blue: #1B33D6; --yellow: #FFD92E; --red: #D92027; --shade: #05093A; --tape: rgba(236, 226, 190, .86);
  --hair: rgba(27, 51, 214, .28);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--paper); }
/* The page is exactly the screen: the bill takes what the two lines under it
   leave, and nothing runs past the foot. */
body {
  height: 100dvh; overflow: hidden; color: var(--ink);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--blue); color: #fff; }
h1, p { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.tall { font-family: "League Gothic", Impact, sans-serif; font-weight: 400; text-transform: uppercase; }
.osd { font-family: "VT323", ui-monospace, monospace; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.voice { font-family: "Libre Caslon Text", Georgia, serif; font-style: italic; }

[hidden] { display: none !important; }

/* The wall measures the room, and the bills are cut to fit it: four wide to
   five tall, as big as the room allows either way. On a phone the keys that
   change them stand under the bill, in room kept for them; wider, they stand
   either side of it. */
.wall { width: 100%; min-height: 0; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; }
.stage {
  position: relative;
  /* The room, less the keys and the line that stand under it. */
  flex: none; height: min(96cqh - 136px, 93cqw * 1.25); aspect-ratio: 4 / 5; margin-bottom: 50px;
}
@media (min-width: 600px) {
  .wall { --g: 64px; }
  .stage { height: min(96cqh - 86px, (100cqw - 2 * var(--g)) * 1.25); margin-bottom: 0; }
}
/* One slot for each poster, all in the one place. Only the one that is up is
   there, and the one coming on while it slides. */
.slot { position: absolute; inset: 0; }
.bill {
  position: absolute; inset: 0; container-type: inline-size;
  background: var(--blue); color: #fff;
  box-shadow: 0 1px 2px rgba(14, 20, 64, .18), 0 14px 30px rgba(14, 20, 64, .13);
}
/* Each was put up by hand, a little off straight its own way. */
.t1 { transform: rotate(-1.1deg); } .t2 { transform: rotate(.8deg); }
.t3 { transform: rotate(-.6deg); }  .t4 { transform: rotate(1.2deg); }
.t5 { transform: rotate(-1.4deg); } .t6 { transform: rotate(.5deg); }
.t7 { transform: rotate(-.9deg); }  .t8 { transform: rotate(1deg); }
/* A printed one is its picture, edge to edge, on paper until it has come. */
.bill.pic { background: #ECE9DF; }
.bill.pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* The keys: a chevron in the blue, inverted while it is down. On a phone the
   two stand side by side under the bill. */
.chev { position: absolute; top: calc(100% + 20px); width: 44px; height: 36px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--blue); display: grid; place-items: center; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.chev svg { width: 10px; height: 18px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.chev.prev { right: calc(50% + 4px); }
.chev.next { left: calc(50% + 4px); }
.chev:active { background: var(--blue); color: #fff; }
@media (hover: hover) { .chev:hover { background: var(--blue); color: #fff; } }
/* Wider, either side of it, half way down. */
@media (min-width: 600px) {
  .chev { top: 50%; width: 36px; height: 56px; margin-top: -28px; }
  .chev svg { width: 12px; height: 22px; }
  .chev.prev { right: auto; left: calc(-4px - var(--g)); }
  .chev.next { left: auto; right: calc(-4px - var(--g)); }
}
/* Everything printed on the bill is sized off the bill's own width, so it
   is the same bill at any size. */
.sheet { position: absolute; inset: 0; padding: 7.4cqw 6.7cqw 6.4cqw; display: flex; flex-direction: column; }
.notice { font-size: 4.52cqw; padding-bottom: 2.7cqw; border-bottom: .42cqw solid #fff; }
.bill h1 { font-size: 33.6cqw; line-height: .94; padding: 1.5cqw 0 3.3cqw; border-bottom: .42cqw solid #fff; }
.bill h1 span { display: block; white-space: nowrap; }
/* The first line is set out to the measure of the second. */
.bill h1 span:first-child { text-align: justify; text-align-last: justify; }
/* Two lines from the announcer, in the middle of the room left for them. */
.bill .voice { font-size: 5.2cqw; line-height: 1.28; margin: auto 0; white-space: nowrap; }
.bill .name { font-size: 13.08cqw; color: var(--yellow); }

/* Two strips of tape hold it up. */
.tape { position: absolute; width: 21cqw; height: 6.6cqw; background: var(--tape); filter: drop-shadow(0 1px 1px rgba(14, 20, 64, .22));
  clip-path: polygon(0 8%, 2% 0, 4% 9%, 6% 1%, 8% 8%, 92% 6%, 94% 0, 96% 9%, 98% 1%, 100% 10%, 100% 92%, 98% 100%, 96% 91%, 94% 99%, 92% 92%, 8% 94%, 6% 100%, 4% 91%, 2% 99%, 0 90%); }
.tape.a { left: -6.5cqw; top: -1.6cqw; transform: rotate(-38deg); }
.tape.b { right: -6.5cqw; top: -1.6cqw; transform: rotate(36deg); }

/* The line under the bill. One height whatever it holds, so nothing above
   it moves when it changes. */
/* The room left over is shared out evenly, so the line stands half way
   between the foot of the bill and the small print. The few points here make
   up for the padding inside the links under it. */
.row { flex: none; height: 44px; margin-top: 8px; display: grid; place-items: center; }
.row[data-state="soon"] #in, .row[data-state="ask"] #in,
.row[data-state="open"] .line { display: none; }
/* The words and the password stand in one place, as wide as the words, and
   only the one that is up is seen. */
.row[data-state="soon"] .ask, .row[data-state="ask"] .soon { visibility: hidden; }

/* What is coming: the four pips filling in turn, and one line in small
   capitals in the colour of a mark. Nothing travels. Each pip is a ring, then
   a disc, at once. */
.defs { position: absolute; }
.line { display: flex; align-items: center; gap: 10px; }
.say { display: grid; align-items: center; }
.say > * { grid-area: 1 / 1; }
.soon { color: var(--red); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.pips { display: block; flex: none; width: 68px; height: 17.6px; overflow: visible; }
/* Asked for the password, the pips fill in blue. */
.row[data-state="ask"] .discs { fill: var(--blue); }
.pips .d1 { animation: fill1 3s step-end infinite; } .pips .r1 { animation: ring1 3s step-end infinite; }
.pips .d2 { animation: fill2 3s step-end infinite; } .pips .r2 { animation: ring2 3s step-end infinite; }
.pips .d3 { animation: fill3 3s step-end infinite; } .pips .r3 { animation: ring3 3s step-end infinite; }
.pips .d4 { animation: fill4 3s step-end infinite; } .pips .r4 { animation: ring4 3s step-end infinite; }
@keyframes fill1 { 0% { opacity: 0; } 16.67%, 100% { opacity: 1; } }
@keyframes ring1 { 0% { opacity: 1; } 16.67%, 100% { opacity: 0; } }
@keyframes fill2 { 0% { opacity: 0; } 33.34%, 100% { opacity: 1; } }
@keyframes ring2 { 0% { opacity: 1; } 33.34%, 100% { opacity: 0; } }
@keyframes fill3 { 0% { opacity: 0; } 50.01%, 100% { opacity: 1; } }
@keyframes ring3 { 0% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes fill4 { 0% { opacity: 0; } 66.68%, 100% { opacity: 1; } }
@keyframes ring4 { 0% { opacity: 1; } 66.68%, 100% { opacity: 0; } }

/* Somewhere to type is a line ruled on the paper, in the words where the
   words were. Sixteen points, or a phone zooms in on it. */
.ask { display: flex; align-items: baseline; min-width: 0; }
/* The line takes whatever the two keys leave. */
.word { flex: 1; width: 0; min-width: 0; margin-right: 8px; height: 30px; padding: 0 1px; border: 0; border-bottom: 2px solid var(--blue); border-radius: 0; background: none; color: var(--blue); caret-color: var(--blue); font: 300 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-appearance: none; appearance: none; }
.word::placeholder { color: var(--blue); opacity: 1; }
.word.no::placeholder { color: var(--red); }
.word:focus { outline: none; }
/* Enter, and never mind: back to what is coming. A key that goes down is
   inverted, and stays down while the password is checked. */
.mini { flex: none; padding: 8px 6px; border: 0; border-radius: 0; background: none; color: var(--blue); font: 700 12px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mini:last-child { margin-right: -6px; }
.mini:hover, .mini:active, .mini.busy { background: var(--blue); color: #fff; }
.key { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border: 2px solid var(--blue); border-radius: 0; background: var(--paper); color: var(--blue); font: 700 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; }
.key:hover, .key:active { background: var(--blue); color: #fff; }
/* The way in is the one loud key. */
.key.loud { background: var(--blue); color: var(--yellow); font-weight: 800; font-style: italic; text-shadow: 2px 2px 0 var(--shade); padding: 0 22px; }
.key.loud:hover, .key.loud:active { background: var(--yellow); border-color: var(--yellow); color: var(--blue); text-shadow: none; }

/* The foot: the way in early and the small print, in one light line. */
.links { display: flex; align-items: center; gap: 0; }
.links a, .links button { background: none; border: 0; border-radius: 0; text-decoration: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1; padding: 8px 10px; cursor: pointer; }
.links button { font-weight: 300; color: var(--blue); }
.links .small { display: flex; gap: 0; }
.links a { font-weight: 300; color: var(--ink); }
.links a:hover, .links a:active, .links button:hover, .links button:active { background: var(--blue); color: #fff; }
/* Picked is inverted. */
.links button[aria-expanded="true"] { background: var(--blue); color: #fff; }

@media (min-width: 860px) {
  body { padding-top: 28px; padding-bottom: 18px; }
  .links a, .links button { font-size: 14px; }
}
/* For somebody who asked that nothing move, all four are filled. */
@media (prefers-reduced-motion: reduce) {
  .pips circle { animation: none; }
  .pips .rings circle { opacity: 0; }
}