/* LEARN pages: WHY? (questions that open to show their answer). */
.why-book {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.why-card {
  background: var(--c-black);
  border: 1px solid var(--c-grey-222);
  border-left: 3px solid var(--c-cyan);
  border-radius: 4px;
  padding: 10px 14px;
}

.why-card summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--c-white);
  font-size: 0.95rem;
  line-height: 1.4;
}

.why-card[open] summary {
  color: var(--c-cyan);
}

.why-card-emoji {
  display: inline-block;
  width: 1.6em;
}

.why-card p {
  margin: 8px 0 2px;
  color: var(--c-grey-aaa);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* SPOTTER SHEET: on screen a light card like the paper it prints as. */
.sheet-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 10px 0 14px;
  color: var(--c-grey-aaa);
  font-size: 0.85rem;
}

.sheet-form input,
.sheet-form select {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.spotter-sheet {
  background: #ffffff;
  color: #111111;
  border-radius: 6px;
  padding: 18px;
  max-width: 900px;
}

.sheet-header h2 {
  margin: 0;
  font-size: 1.3rem;
}

.sheet-header h2 span,
.sheet-header p,
.sheet-footer,
.sheet-empty {
  color: #444444;
}

.sheet-header p {
  margin: 4px 0 12px;
}

/* Fixed columns, so blank rows keep their shape. board.css sizes every table's columns and the themes colour every
   table header, both with !important, so the sheet has to answer in kind to look like paper. */
.spotter-sheet .sheet-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: #111111;
}

.spotter-sheet .sheet-table th,
.spotter-sheet .sheet-table td {
  /* !important because the midnight and aviation themes draw every cell's border in dark blue, which on the sheet's
     white paper looked like ruled lines under each word. */
  border: 1px solid #999999 !important;
  padding: 6px;
  text-align: left;
  vertical-align: middle;
  color: #111111 !important;
  background: transparent;
  overflow-wrap: anywhere;
}

.spotter-sheet .sheet-table th {
  background: #eeeeee;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.spotter-sheet .sheet-table th:nth-child(1), .spotter-sheet .sheet-table td:nth-child(1) { width: 6% !important; }
.spotter-sheet .sheet-table th:nth-child(2), .spotter-sheet .sheet-table td:nth-child(2) { width: 9% !important; }
.spotter-sheet .sheet-table th:nth-child(3), .spotter-sheet .sheet-table td:nth-child(3) { width: 9% !important; }
.spotter-sheet .sheet-table th:nth-child(4), .spotter-sheet .sheet-table td:nth-child(4) { width: 14% !important; }
.spotter-sheet .sheet-table th:nth-child(5), .spotter-sheet .sheet-table td:nth-child(5) { width: 24% !important; }
.spotter-sheet .sheet-table th:nth-child(6), .spotter-sheet .sheet-table td:nth-child(6) { width: 18% !important; }
.spotter-sheet .sheet-table th:nth-child(7), .spotter-sheet .sheet-table td:nth-child(7) { width: 20% !important; }

.spotter-sheet .sheet-tick {
  text-align: center;
  font-size: 1.1rem;
}

.sheet-blank td {
  height: 1.9em;
}

.sheet-draw {
  margin-top: 14px;
  border: 2px dashed #999999;
  border-radius: 6px;
  height: 180px;
  padding: 8px 12px;
}

.sheet-draw p {
  margin: 0;
}

.sheet-footer {
  margin: 10px 0 0;
  font-size: 0.75rem;
  text-align: right;
}


/* PLANE QUIZ */
.quiz-card {
  background: var(--c-black);
  border: 1px solid var(--c-grey-222);
  border-left: 3px solid var(--c-pink);
  border-radius: 6px;
  padding: 16px;
  max-width: 720px;
  margin-top: 12px;
}

.quiz-progress {
  color: var(--c-grey-aaa);
  font-size: 0.8rem;
}

.quiz-question {
  color: var(--c-white);
  font-size: 1.15rem;
  line-height: 1.4;
  margin: 8px 0 14px;
}

.quiz-options {
  display: grid;
  gap: 8px;
}

.quiz-option {
  text-align: left;
  font: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  color: var(--c-white);
  background: var(--c-grey-080808);
  border: 1px solid var(--c-grey-333);
  border-radius: 6px;
  cursor: pointer;
}

.quiz-option:hover:not(:disabled) {
  border-color: var(--c-cyan);
}

.quiz-option--right {
  border-color: var(--c-green);
  background: rgba(85, 255, 0, 0.12);
}

.quiz-option--wrong {
  border-color: var(--c-red);
  background: rgba(255, 0, 60, 0.12);
}

.quiz-feedback {
  color: var(--c-grey-aaa);
  line-height: 1.5;
  margin: 12px 0 8px;
}

.quiz-finish {
  color: var(--c-white);
  font-size: 1rem;
}

/* Phones: seven columns leave nothing for the words, so each flight becomes a block you can still tick and write on.
   Printing keeps the table (the print rules below restore it), so a sheet printed from a phone looks the same as one
   printed from a computer. */
@media screen and (max-width: 620px) {
  .spotter-sheet {
    padding: 12px;
  }

  .spotter-sheet .sheet-table,
  .spotter-sheet .sheet-table tbody,
  .spotter-sheet .sheet-table tr,
  .spotter-sheet .sheet-table td {
    display: block;
    width: auto !important;
  }

  .spotter-sheet .sheet-table thead {
    display: none;
  }

  .spotter-sheet .sheet-table tr {
    display: grid;
    grid-template-columns: 1.7em 4.2em 1fr;
    gap: 2px 8px;
    border: 1px solid #999999;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
  }

  .spotter-sheet .sheet-table td {
    border: 0 !important;
    padding: 0;
    min-height: 1.2em;
  }

  /* The fixed column widths above are what the paper needs; on a phone they clipped the words, so they go. */
  .spotter-sheet .sheet-table td:nth-child(1),
  .spotter-sheet .sheet-table td:nth-child(2),
  .spotter-sheet .sheet-table td:nth-child(3),
  .spotter-sheet .sheet-table td:nth-child(4),
  .spotter-sheet .sheet-table td:nth-child(5),
  .spotter-sheet .sheet-table td:nth-child(6),
  .spotter-sheet .sheet-table td:nth-child(7) {
    width: auto !important;
  }

  .spotter-sheet .sheet-tick {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: 1.4rem;
    line-height: 1;
  }

  .spotter-sheet .sheet-time { grid-column: 2; grid-row: 1; font-weight: bold; }
  .spotter-sheet .sheet-way { grid-column: 3; grid-row: 1; }
  .spotter-sheet .sheet-flight { grid-column: 2 / span 2; grid-row: 2; }
  .spotter-sheet .sheet-place { grid-column: 2 / span 2; grid-row: 3; }
  .spotter-sheet .sheet-type { grid-column: 2 / span 2; grid-row: 4; color: #444444; font-size: 0.8rem; }

  /* A line to write on, rather than an empty cell that collapses. */
  .spotter-sheet .sheet-table .sheet-notes {
    grid-column: 1 / span 3;
    grid-row: 5;
    border-bottom: 1px dotted #999999 !important;
    min-height: 1.6em;
  }

  .spotter-sheet .sheet-blank .sheet-time,
  .spotter-sheet .sheet-blank .sheet-flight,
  .spotter-sheet .sheet-blank .sheet-place {
    border-bottom: 1px dotted #999999 !important;
  }

  .spotter-sheet .sheet-blank .sheet-type {
    display: none;
  }

  .sheet-form {
    gap: 8px;
  }
}

@media print {
  /* Only the sheet goes on the paper. */
  body * {
    visibility: hidden;
  }

  #spotter-sheet,
  #spotter-sheet * {
    visibility: visible;
  }

  #spotter-sheet {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    border-radius: 0;
  }
}

/* WHY?: today's question first, the rest under it. */
.why-today-title,
.why-rest-title {
  margin-top: 14px;
}

.why-today .why-card {
  border-left-color: var(--c-amber);
}

/* PLANE QUIZ: the easy/expert switch. */
.quiz-levels {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
}

.quiz-levels .rare-chip {
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

/* 🎈 TODAY: a child's starting page. */
.today-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--c-grey-222);
  border-left: 3px solid var(--c-amber);
  border-radius: 6px;
  background: var(--c-black);
}

.today-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.today-card-kicker {
  color: var(--c-amber);
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.today-card h2 {
  margin: 8px 0 4px;
  color: var(--c-white);
  font-size: 1.4rem;
}

.today-photo {
  margin: 10px 0 0;
}

.today-photo img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 4px;
}

.today-photo figcaption {
  margin-top: 4px;
  color: var(--c-grey-aaa);
  font-size: 0.7rem;
}

.today-facts {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--c-grey-aaa);
  font-size: 0.95rem;
  line-height: 1.6;
}

.today-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--c-cyan);
  font-size: 0.85rem;
  text-decoration: none;
}

.today-link:hover {
  text-decoration: underline;
}

.today-play-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.today-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border: 1px solid var(--c-grey-333);
  border-radius: 8px;
  background: var(--c-grey-080808);
  color: var(--c-white);
  font-size: 0.78rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.today-play span {
  font-size: 1.8rem;
}

.today-play:hover {
  border-color: var(--c-cyan);
}

.today-rank {
  margin: 8px 0 6px;
  color: var(--c-white);
}

.today-challenges {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--c-grey-aaa);
  font-size: 0.9rem;
  line-height: 1.8;
}

.today-challenges .is-done {
  color: var(--c-green);
}

.today-challenge-count {
  color: var(--c-grey-aaa);
  font-size: 0.78rem;
}