/* ═══════════════════════════════════════════════════════════════════════
   THE SEASONS SCREEN — LEARN's opener (LEARN-1a slice 2; Doug's DECISIONS #37)

   One season to a screen, each chapter a periodic-table tile: its number top
   left, its miss numbers top right, then its symbol and its name. The look is
   the LEARN writer's reference page (learn/pages/templates/seasons.css), drawn
   by static/js/modules/curriculum/seasons_screen.js. Not learn_shell.css: that
   file answers how the Learn shell is laid out, this one how the seasons look.
   ═══════════════════════════════════════════════════════════════════════ */

.learn-seasons {
  --learn-bg: #0b1016;
  --learn-panel: #0f1720;
  --learn-panel-2: #13202b;
  --learn-line: #1f3a48;
  --learn-fg: #dfe8f0;
  --learn-muted: #8aa1b4;
  --learn-cyan: #56c8e8;
  --learn-glow: rgba(86, 200, 232, 0.35);
  --learn-s1: #56c8e8;
  --learn-s2: #f0a24a;
  --learn-s3: #6fd08c;
  --learn-s4: #b59cf5;
  --learn-side: #e3c96b;
  /* A season's hue and a cluster's tile count, set per element by seasons_screen.js. */
  --learn-hue: var(--learn-s1);
  --learn-count: 1;
  --learn-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --learn-mono: "IBM Plex Mono", Consolas, monospace;
  background: var(--learn-bg);
  color: var(--learn-fg);
  display: grid;
  gap: 18px;
  grid-column: 1 / -1;
  align-content: start;
  min-height: 100%;
  padding: clamp(16px, 1.8vw, 28px);
  font: 14px/1.45 var(--font-primary, "IBM Plex Sans", "Segoe UI", Arial, sans-serif);
}

/* The app's buttons are upper case; a symbol is upper then lower (Ho, Da), as the periodic table writes it. */
.learn-seasons button {
  letter-spacing: normal;
  text-transform: none;
}

.learn-seasons[hidden],
.learn-seasons [hidden],
.learn-seasons-return[hidden] {
  display: none !important;
}

/* ── The room while the seasons own the center ── */
.planning-canvas--seasons {
  cursor: default;
}

.planning-canvas--seasons .planning-canvas__paper {
  background: #0b1016;
}

.planning-canvas--seasons .planning-canvas__paper::before,
.planning-canvas--seasons .planning-canvas__paper::after,
.planning-canvas--seasons .planning-room-header,
.planning-canvas--seasons .planning-canvas__watermark {
  display: none;
}

.planning-canvas__content-layer[data-learn-seasons-open='true'] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100%;
  padding: 0;
}

/* Legacy notebook children declare their own display values, which beat the
   user-agent [hidden] rule; keep isolation visual as well as inert. */
.planning-canvas__content-layer[data-learn-seasons-open='true'] > [data-learn-seasons-isolated='true'] {
  display: none !important;
}

/* ── The header and the season tabs ── */
.learn-seasons__header {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
}

.learn-seasons__identity {
  display: grid;
  gap: 6px;
}

.learn-seasons__eyebrow,
.learn-seasons__detail-eyebrow {
  color: var(--learn-muted);
  font: 500 11px/1 var(--learn-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.learn-seasons__title {
  font: 600 clamp(26px, 3vw, 40px)/1 var(--learn-display);
  margin: 0;
}

.learn-seasons__notebook,
.learn-seasons__begin,
.learn-seasons-return__action {
  background: transparent;
  border: 1px solid var(--learn-line, rgba(60, 48, 30, 0.4));
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  font: 600 11px/1 var(--learn-mono, monospace);
  letter-spacing: 0.08em;
  padding: 9px 14px;
}

.learn-seasons__notebook:hover,
.learn-seasons__notebook:focus-visible {
  border-color: var(--learn-cyan);
  outline: none;
}

.learn-seasons__tabs {
  border-bottom: 1px solid var(--learn-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 12px;
}

.learn-seasons__tab {
  background: var(--learn-panel);
  border: 1px solid var(--learn-line);
  border-radius: 8px;
  color: var(--learn-muted);
  cursor: pointer;
  display: grid;
  font: 600 17px/1.1 var(--learn-display);
  gap: 2px;
  min-width: 0;
  padding: 10px 16px;
  text-align: left;
}

.learn-seasons__tab-n {
  color: var(--learn-hue);
  font: 500 10.5px/1 var(--learn-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.learn-seasons__tab[aria-selected='true'] {
  border-color: var(--learn-hue);
  box-shadow: inset 0 -3px 0 var(--learn-hue);
  color: var(--learn-fg);
}

.learn-seasons__loading {
  color: var(--learn-muted);
  margin: 0;
}

/* ── A season: its tagline and its clusters of tiles ── */
.learn-season__tagline {
  color: var(--learn-fg);
  display: grid;
  font: 500 20px/1.3 var(--learn-display);
  gap: 6px;
  margin: 0 0 18px;
}

.learn-season__count {
  color: var(--learn-hue);
  font: 500 11px/1 var(--learn-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.learn-seasons__clusters {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 22px 30px;
}

.learn-seasons__cluster {
  display: grid;
  flex: var(--learn-count) 1 calc(var(--learn-count) * 120px);
  gap: 10px;
  max-width: calc(var(--learn-count) * 172px);
  min-width: 0;
}

.learn-seasons__cluster-label,
.learn-seasons__side-title {
  border-bottom: 1px solid var(--learn-line);
  color: var(--learn-muted);
  font: 600 12px/1 var(--learn-mono);
  letter-spacing: 0.1em;
  margin: 0;
  padding-bottom: 8px;
  text-transform: uppercase;
}

.learn-seasons__tiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--learn-count), minmax(0, 1fr));
}

/* ── The tile: n top left, the miss numbers top right, the symbol, the name ── */
.learn-tile {
  aspect-ratio: 1 / 1.08;
  background: var(--learn-panel);
  border: 1.5px solid var(--learn-line);
  border-radius: 8px;
  border-top: 4px solid var(--learn-hue);
  color: var(--learn-fg);
  cursor: pointer;
  display: grid;
  font: inherit;
  grid-template-rows: auto 1fr auto;
  min-height: 118px;
  padding: 9px 10px 11px;
  position: relative;
  text-align: left;
}

.learn-tile:hover,
.learn-tile:focus-visible,
.learn-tile[aria-pressed='true'] {
  background: var(--learn-panel-2);
  border-color: var(--learn-hue);
  outline: none;
}

.learn-tile[data-lit='false'] {
  opacity: 0.42;
  border-top-color: var(--learn-line);
}

.learn-tile[data-lit='false']:hover,
.learn-tile[data-lit='false']:focus-visible,
.learn-tile[data-lit='false'][aria-pressed='true'] {
  opacity: 0.75;
}

.learn-tile__num {
  color: var(--learn-muted);
  font: 500 12px/1 var(--learn-mono);
}

.learn-tile__miss {
  color: var(--learn-hue);
  font: 600 12px/1 var(--learn-mono);
  position: absolute;
  right: 10px;
  top: 12px;
}

.learn-tile__sym {
  align-self: center;
  font: 600 clamp(34px, 3.2vw, 56px)/1 var(--learn-display);
  justify-self: center;
  letter-spacing: 0.01em;
}

.learn-tile__name {
  font: 600 13.5px/1.15 var(--font-primary, sans-serif);
  text-align: center;
  text-wrap: balance;
}

.learn-tile--start {
  border-color: var(--learn-cyan);
  box-shadow: 0 0 0 3px var(--learn-glow), 0 0 28px var(--learn-glow);
}

.learn-tile__ribbon {
  background: var(--learn-cyan);
  border-radius: 999px;
  bottom: -11px;
  color: var(--learn-bg);
  font: 700 10.5px/1 var(--learn-mono);
  left: 50%;
  letter-spacing: 0.08em;
  padding: 5px 9px;
  position: absolute;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ── The side lessons, a row apart ── */
.learn-seasons__side {
  --learn-hue: var(--learn-side);
  border-top: 1px dashed var(--learn-line);
  display: grid;
  gap: 10px;
  padding-top: 16px;
}

.learn-seasons__side-title {
  color: var(--learn-side);
}

.learn-seasons__side-tiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(118px, 150px));
}

/* ── The detail strip a press fills ── */
.learn-seasons__detail {
  background: var(--learn-panel);
  border: 1px solid var(--learn-line);
  border-left: 4px solid var(--learn-cyan);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  justify-items: start;
  min-height: 76px;
  padding: 12px 16px;
}

.learn-seasons__detail .learn-seasons__detail-eyebrow {
  color: var(--learn-cyan);
  text-transform: none;
}

.learn-seasons__detail-title {
  font: 600 22px/1.1 var(--learn-display);
}

.learn-seasons__detail-lesson {
  color: var(--learn-cyan);
  font-weight: 600;
}

.learn-seasons__begin {
  background: var(--learn-cyan);
  border-color: var(--learn-cyan);
  color: var(--learn-bg);
  margin-top: 6px;
}

/* ── The way back from the notebook ── */
.learn-seasons-return {
  align-items: center;
  background: rgba(232, 220, 184, 0.96);
  border: 1px solid rgba(60, 48, 30, 0.28);
  border-radius: 7px;
  color: var(--planning-ink, #1a1a1a);
  display: flex;
  gap: 16px;
  grid-column: 1 / -1;
  justify-content: space-between;
  margin: 0 12px 8px;
  padding: 10px 12px;
  position: sticky;
  top: 82px;
  z-index: 31;
}

.learn-seasons-return__identity {
  display: grid;
  gap: 3px;
}

.learn-seasons-return__title {
  font: 700 10px/1.2 'Courier New', monospace;
  letter-spacing: 0.12em;
}

.learn-seasons-return__copy {
  color: var(--planning-ink-faded, rgba(26, 26, 26, 0.6));
  font: 13px/1.25 var(--planning-font-handwriting, cursive);
}

.learn-seasons-return__action {
  background: rgba(60, 48, 30, 0.08);
  border-color: rgba(60, 48, 30, 0.4);
  color: var(--planning-ink, #1a1a1a);
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .learn-seasons__tiles {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  }
}

/* ── The voice question, the first time only (#55), and the control that changes it ── */
.learn-voice {
  background: var(--learn-panel);
  border: 1px solid var(--learn-line);
  border-left: 4px solid var(--learn-cyan);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  justify-items: start;
  max-width: 760px;
  padding: 20px 22px;
}

.learn-voice__question {
  font: 600 clamp(24px, 2.4vw, 32px)/1.1 var(--learn-display);
  margin: 0;
}

.learn-voice__answers {
  display: grid;
  gap: 10px;
  width: 100%;
}

.learn-voice__answer {
  background: var(--learn-panel-2);
  border: 1.5px solid var(--learn-line);
  border-radius: 8px;
  color: var(--learn-fg);
  cursor: pointer;
  font: 500 16px/1.35 var(--font-primary, sans-serif);
  padding: 12px 16px;
  text-align: left;
}

.learn-voice__answer:hover,
.learn-voice__answer:focus-visible {
  border-color: var(--learn-cyan);
  outline: none;
}

.learn-voice__skip {
  background: transparent;
  border: 0;
  color: var(--learn-muted);
  cursor: pointer;
  font: 600 12px/1 var(--learn-mono);
  padding: 6px 0;
  text-decoration: underline;
}

.learn-seasons__voice {
  margin-left: auto;
}

.learn-voice-control {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.learn-voice-control__label {
  color: var(--learn-muted);
  font: 500 11px/1 var(--learn-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.learn-voice-control__list {
  background: var(--learn-panel);
  border: 1px solid var(--learn-line);
  border-radius: 6px;
  color: var(--learn-fg);
  font: 600 12px/1 var(--learn-mono);
  padding: 6px 8px;
}