/* ==========================================================================
   Memory Lane Quiz - shared layout and components.

   Every decade theme (theme-70s.css and friends) only overrides the custom
   properties in the :root block below. Layout, sizing and behaviour live here
   once, so a fix applies to all three quizzes at the same time.

   Sizing rules for this project, on purpose and non negotiable:
     - readers are 60 to 80 years old, on a phone, often outdoors
     - body text never below 20px, answer text never below 20px
     - every tappable thing is at least 64px tall with real space around it
     - colour is never the only signal: icons and words carry the meaning too
     - no hover-only affordances, no gestures, single column always
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #f6f2ea;
  /* Same colour as --bg but fully see through. Used by the fade above the
     action bar. It has to be spelled out per theme, because fading to plain
     "transparent" makes browsers pass through grey on the way. */
  --bg-fade: rgba(246, 242, 234, 0);
  --bg-accent-1: transparent;
  --bg-accent-2: transparent;
  --card: #ffffff;
  --card-border: #ded6c8;
  --card-shadow: 0 2px 0 rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .07);

  /* Text */
  --ink: #1b1815;
  --ink-soft: #4a443c;
  --ink-faint: #6d665c;

  /* Brand accent for the decade */
  --accent: #a84a18;
  --accent-ink: #ffffff;
  --accent-soft: #f2e3d6;

  /* Answer buttons */
  --option-bg: #ffffff;
  --option-border: #a9a196;
  --option-ink: #1b1815;
  --option-badge-bg: #efe9df;
  --option-badge-ink: #3d382f;

  /* Verdict colours - always paired with an icon and a word */
  --correct: #14672f;
  --correct-bg: #e4f2e8;
  --correct-border: #14672f;
  --wrong: #a3221b;
  --wrong-bg: #fbe9e7;
  --wrong-border: #a3221b;

  /* Progress */
  --track: #e2dace;

  /* Shape */
  --radius: 18px;
  --radius-sm: 12px;
  --border-w: 2px;

  /* Type */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --display-weight: 800;
  --display-spacing: -0.015em;
  --display-transform: none;
  --display-shadow: none;
}

/* ---------------------------------------------------------------- reset -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  background-image: var(--bg-accent-1), var(--bg-accent-2);
  background-repeat: no-repeat, repeat;
  background-attachment: scroll;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.25rem; /* 20px floor for everything that inherits */
  line-height: 1.55;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
}

/* Old Safari needs :focus as well as :focus-visible. */
a:focus,
button:focus {
  outline: 4px solid var(--accent);
  outline-offset: 3px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible,
button:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 3px;
}

/* Visually hidden but still read out loud by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- shell -- */

.shell {
  width: 100%;
  max-width: 34rem; /* stays comfortable on a tablet, never a wide wall of text */
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

/* No fill mode on purpose. With "both" the element would sit at the 0% frame
   (opacity: 0) whenever the animation does not actually run, and a browser
   that stalls would show a blank page. Without it, the worst case is that the
   fade never plays and everything is simply there. Fail visible, always. */
.screen {
  animation: screen-in .3s ease-out;
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------- topbar -- */

/* Sticky so the reader always knows how far along they are without hunting. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: .85rem 1rem .8rem;
  background-color: var(--bg);
  border-bottom: var(--border-w) solid var(--card-border);
}

.topbar-inner {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}

.topbar-label {
  display: block;
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .01em;
}

.progress {
  height: 16px; /* thick enough to be seen at arm's length */
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}

.progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width .35s ease-out;
}

/* ------------------------------------------------------------------ card -- */

.card {
  background: var(--card);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 1.4rem 1.25rem 1.5rem;
  margin-top: 1.25rem;
}

/* ------------------------------------------------------------------ type -- */

.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  text-transform: var(--display-transform);
  text-shadow: var(--display-shadow);
  line-height: 1.1;
  margin: 0;
}

.title {
  font-size: 2.3rem;
  color: var(--accent);
}

.subtitle {
  font-size: 1.3rem;
  color: var(--ink-soft);
  margin: .85rem 0 0;
  line-height: 1.45;
}

.lede {
  font-size: 1.25rem;
  margin: 1.15rem 0 0;
}

.fineprint {
  font-size: 1.05rem;
  color: var(--ink-faint);
  margin: 1.25rem 0 0;
  line-height: 1.5;
}

/* -------------------------------------------------------------- question -- */

.q-kind {
  display: inline-block;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--option-badge-bg);
  color: var(--option-badge-ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}

.q-prompt {
  font-size: 1.6rem;
  line-height: 1.32;
  font-weight: 700;
  margin: 0 0 1.25rem;
  color: var(--ink);
}

.q-figure {
  margin: 0 0 1.25rem;
}

.q-figure img {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  border: var(--border-w) solid var(--card-border);
  background: #ffffff;
}

.q-credit {
  display: block;
  font-size: .95rem;
  color: var(--ink-faint);
  margin-top: .5rem;
}

/* --------------------------------------------------------------- options -- */

/* Grid rather than flex: grid gap has far wider support on older iPhones. */
.options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 4.25rem; /* 68px */
  padding: .9rem 1rem;
  text-align: left;
  background: var(--option-bg);
  color: var(--option-ink);
  border: 3px solid var(--option-border);
  border-radius: var(--radius-sm);
  font-size: 1.3rem; /* ~21px */
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease-out, border-color .12s ease-out,
    background-color .12s ease-out;
}

.option:active {
  transform: scale(.985);
}

.option-letter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: .85rem;
  border-radius: 999px;
  background: var(--option-badge-bg);
  color: var(--option-badge-ink);
  font-size: 1.15rem;
  font-weight: 800;
}

.option-text {
  flex: 1 1 auto;
}

.option-mark {
  flex: 0 0 auto;
  margin-left: .75rem;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}

.option[disabled] {
  cursor: default;
  opacity: 1; /* never grey answers out: seniors read that as broken */
}

.option.is-correct {
  border-color: var(--correct-border);
  background: var(--correct-bg);
  color: var(--correct);
}

.option.is-correct .option-letter {
  background: var(--correct);
  color: #ffffff;
}

.option.is-wrong {
  border-color: var(--wrong-border);
  background: var(--wrong-bg);
  color: var(--wrong);
}

.option.is-wrong .option-letter {
  background: var(--wrong);
  color: #ffffff;
}

/* The answers that were neither picked nor correct step back, but stay
   comfortably readable. Older eyes should still be able to check them. */
.option.is-muted {
  opacity: .68;
}

/* -------------------------------------------------------------- feedback -- */

.feedback {
  margin-top: 1.35rem;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: var(--radius-sm);
  border-left: 8px solid var(--correct);
  background: var(--correct-bg);
  animation: screen-in .25s ease-out;
}

.feedback:focus {
  outline: none;
}

.feedback.is-wrong {
  border-left-color: var(--wrong);
  background: var(--wrong-bg);
}

.feedback-verdict {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 .45rem;
  color: var(--correct);
}

.feedback.is-wrong .feedback-verdict {
  color: var(--wrong);
}

.feedback-fact {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
}

/* -------------------------------------------------------------- actions -- */

/* The Next button parks itself at the bottom of the screen and stays there,
   so it is always in the same place for every single question. */
.actionbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 1.4rem;
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 72%, var(--bg-fade));
}

/* While a question is still unanswered the bar holds nothing, so it must not
   sit there casting a haze over the last answer button. */
.actionbar:empty {
  display: none;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4rem; /* 64px */
  padding: .9rem 1.25rem;
  border: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease-out;
}

.btn:active {
  transform: scale(.985);
}

.btn + .btn {
  margin-top: .9rem;
}

.btn-quiet {
  background: transparent;
  color: var(--accent);
}

.btn-plain {
  background: var(--card);
  color: var(--ink);
  border-color: var(--option-border);
}

/* ------------------------------------------------------------- results --- */

.result-hero {
  text-align: center;
}

.result-score {
  font-family: var(--font-display);
  font-size: 4.2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
  margin: .35rem 0 0;
  letter-spacing: var(--display-spacing);
  text-shadow: var(--display-shadow);
}

.result-outof {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: .4rem;
}

.result-tier {
  font-size: 2rem;
  margin: 1.35rem 0 0;
  color: var(--ink);
}

.result-message {
  font-size: 1.25rem;
  color: var(--ink-soft);
  margin: .8rem 0 0;
  line-height: 1.5;
}

.result-block {
  margin-top: 1.6rem;
}

.result-note {
  margin: .9rem 0 0;
  font-size: 1.05rem;
  color: var(--ink-faint);
  text-align: center;
  min-height: 1.5rem;
}

.divider {
  height: var(--border-w);
  background: var(--card-border);
  border: 0;
  margin: 1.9rem 0 0;
}

.section-heading {
  font-size: 1.35rem;
  margin: 1.6rem 0 .3rem;
  color: var(--ink);
}

.section-text {
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  line-height: 1.5;
}

/* ------------------------------------------------------- book carousel --- */

/* Horizontal, but never swipe-only: the arrow buttons do the same job for
   anyone who does not get on with dragging. */
.books-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .5rem;
}

.books-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-card {
  scroll-snap-align: start;
  display: block;
  padding: .9rem;
  background: var(--card);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
}

.book-cover {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--option-badge-bg);
  margin-bottom: .7rem;
}

.book-title {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
}

.book-subtitle {
  display: block;
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-top: .25rem;
  line-height: 1.4;
}

.books-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: .9rem;
}

.books-nav .btn {
  font-size: 1.5rem;
  min-height: 3.5rem;
}

/* ------------------------------------------------------------- picker ---- */

.picker-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.picker-card {
  display: block;
  padding: 1.35rem 1.25rem;
  border: 3px solid var(--option-border);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
}

.picker-decade {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: var(--display-spacing);
}

.picker-years {
  display: block;
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin-top: .35rem;
}

/* --------------------------------------------------------------- states -- */

.state {
  text-align: center;
  padding: 3rem 1rem;
}

.state-text {
  font-size: 1.3rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------ motion ----- */

/* Anyone who has asked their phone to calm down gets a calm site. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------- very small screens ---- */

@media (max-width: 340px) {
  body {
    font-size: 1.15rem;
  }
  .q-prompt {
    font-size: 1.4rem;
  }
  .option {
    font-size: 1.2rem;
  }
  .title {
    font-size: 2rem;
  }
}