/* ============================================================
 * Welcome / dashboard — additions on top of the ported POC CSS.
 * Kept separate from application.css so that file stays a verbatim
 * port of legacy/styles.css.
 * ============================================================ */

/* Set-picker placeholder card — a non-interactive empty state reusing
   the .set-btn look. Replaced by real set cards in B3. */
.set-btn-empty {
  cursor: default;
  opacity: 0.7;
}
.set-btn-empty:active {
  transform: none;
  box-shadow: var(--shadow-card);
}

/* "Switch player" — a quieter .set-btn variant (POC used inline styles). */
.welcome .set-btn.switch-player {
  margin-top: 24px;
  padding: 14px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-soft);
}

/* button_to wraps each button in a <form>. The POC had bare <button>s as
   direct children of .welcome and .skin-picker; `display: contents` makes the
   wrapper form transparent so the button itself is the flex/grid item. */
.welcome > form,
.skin-picker > form {
  margin: 0;
  display: contents;
}

/* ------------------------------------------------------------
 * Pill-overlap fix.
 * application.css positions .set-track absolutely at top-right of
 * the card. .set-track shows lesson.unit.title — long Polish text
 * that overflowed left and collided with .set-title. The
 * padding-right:70px hack on .set-title was never enough.
 * Fix: take the pill out of absolute positioning and let it sit in
 * normal flow as an eyebrow chip above the title (it already
 * precedes .set-title in the partial's source order).
 * ------------------------------------------------------------ */
.welcome .set-btn .set-track {
  position: static;
  display: inline-block;
  margin-bottom: 8px;
  max-width: 100%;
  white-space: normal;
  line-height: 1.3;
  /* Bumped from the POC's 10px — 10px uppercase tracked text is hard
     to read; 11.5px is still a compact eyebrow label. */
  font-size: 11.5px;
}
.welcome .set-btn .set-title {
  padding-right: 0;
}

/* Per-unit pill colours. The unit-name pill is tinted by unit.position so
   lessons within a unit share a hue and the flat 19-card list reads as
   colour-grouped. 4 hues cycle: --u0..--u3 (see _set_list.html.erb) —
   with 7 units the repeats land 4 apart, so adjacent units always differ.
   Accessibility: every variant uses --ink for the text (9.5-18:1 against
   the soft tints on all four skins) — coloured-text-on-coloured-tint
   (e.g. --hot on --hot-soft) fails WCAG AA. Hue identity is carried by
   the border + background tint, which need only meet the 3:1 non-text
   bar. All tokens are :root vars, so every skin maps them automatically. */
.welcome .set-btn .set-track--u0 {
  color: var(--ink); border-color: var(--ultra); background: var(--ultra-soft);
}
.welcome .set-btn .set-track--u1 {
  color: var(--ink); border-color: var(--hot); background: var(--hot-soft);
}
.welcome .set-btn .set-track--u2 {
  color: var(--ink); border-color: var(--mint); background: var(--mint-soft);
}
.welcome .set-btn .set-track--u3 {
  color: var(--ink); border-color: var(--sun); background: var(--sun-soft);
}

/* ------------------------------------------------------------
 * Welcome / dashboard polish.
 * ------------------------------------------------------------ */

/* The 数学 kanji watermark (application.css .welcome::before) sits
   behind a long scrolling lesson list. Pin it to the viewport and
   ease its opacity so it reads as ambient texture, not noise that
   collides with card text mid-scroll. */
.welcome::before {
  position: fixed;
  opacity: 0.28;
}

/* A touch more air between cards now that each carries an in-flow
   eyebrow pill and is therefore taller. */
.welcome .set-list {
  gap: 16px;
}

/* The set subtitle ("Klasa 4 · matematyka · …") is metadata — keep
   it quiet and snug under the title so the card reads title-first. */
.welcome .set-btn .set-sub {
  margin-top: 4px;
  line-height: 1.35;
}

/* "Switch player" — make it read as a distinct, quieter trailing
   action with clear separation from the last lesson card. */
.welcome .set-btn.switch-player {
  margin-top: 28px;
  box-shadow: var(--shadow-card-soft);
}

/* ------------------------------------------------------------
 * Polish glyph coverage fix.
 * --font-mono-display (Orbitron) has no Latin Extended-A glyphs, so
 * Polish characters (ł ą ę ś ż ź ć ń) silently fall back to a
 * mismatched font mid-word. Orbitron stays for genuinely Latin-only
 * labels (digits, "STAGE 01", "CLEAR", score numbers); but every
 * element that renders dynamic Polish content is switched to Plus
 * Jakarta Sans 800 — uppercase + wide tracking keeps the technical
 * label feel while rendering Polish correctly.
 * application.css is a verbatim POC port and cannot be edited, so
 * these overrides live here (loads after it, wins the cascade).
 * ------------------------------------------------------------ */
.welcome .set-btn .set-track,   /* unit name — Polish */
.section-label,                 /* question.section — Polish */
.matching-hint,                 /* instructional copy — Polish */
.matching-header {               /* pair headers — may be Polish */
  font-family: var(--font-body);
  font-weight: 800;
}
/* Numeric input help — same glyph fix, but kept at a lighter weight
   to preserve its quiet small-print feel (the Orbitron rule set no
   weight, so it rendered at 400). */
.numeric-input .hint-help {
  font-family: var(--font-body);
  font-weight: 600;
}