/*
// © Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of
// this document may be reproduced, modified or stored in a retrieval system,
// or transmitted in any form or by any means, electronic, mechanical,
// photocopying, recording or otherwise, without the prior written permission
// of Toptronic Limited. For copyright inquiries: jacques@toptronic.com
 */
/**
 * T10142.com :: Learning page styles (Build #1480 continued)
 *
 * WHAT: Layout for /learning — the three-step replica (Refreshers menu,
 *       Training Catalogue window, lesson viewer with quiz).
 * WHY:  The replica must read as the REAL application: the app's default
 *       theme is Yellow-on-Black (src/app/app_theme.rs), so the catalogue
 *       and lesson windows use that palette inside the navy/gold site.
 * HOW:  Reuses the home-page sim primitives (.sim-app, .sim-chrome,
 *       .sim-menubar …) from sim.css; this file adds only what the
 *       catalogue/lesson flow needs. No framework, custom properties only.
 *
 * FOR AVA: This file decides what the school page looks like — colours,
 *   sizes and spacing.
 * FOR JACQUES: Front-panel silkscreen layer. The chassis (sim.css) is
 *   shared; this is the overlay artwork for the training appliance.
 */

/* ── Page flow ─────────────────────────────────────────────────────────── */
.learn-intro {
  max-width: 60rem;
  margin: 0 auto 2rem;
  font-size: 1.08rem;
  line-height: 1.6;
}

.learn-step {
  margin: 2.5rem auto;
  max-width: 72rem;
}

/* The Step-1 window keeps the app's menu bar on a black panel — the same
   Yellow-on-Black test-instrument theme as the home-page replica. */
.learn-appwin .sim-menubar {
  row-gap: 2px;
}

/* The live Refreshers menu inside the replica bar is outlined so the
   visitor's eye lands on the one working menu (the rest are context). */
.learn-refreshers-menu > summary {
  outline: 2px solid #ffd700;
  outline-offset: -2px;
  border-radius: 4px;
}

/* Tier items inside the Refreshers panel behave like real menu items.
   Build #1480 (session 2, panel fix): they are real <button> elements now
   (keyboard-focusable) — strip button chrome so they read as menu rows. */
.learn-tier-link {
  cursor: pointer;
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: inherit;
}
.learn-tier-link:hover,
.learn-tier-link:focus-visible {
  background: #ffff00;
  color: #000000;
}

/* ── Step 2: the Training Catalogue window ─────────────────────────────── */
.learn-catalogue {
  padding: 0 0 14px;
}

/* Flash ring when a Refreshers-menu tier click lands here — mirrors the
   app opening the catalogue window in front of everything else. */
.learn-flash {
  outline: 3px solid #ffd700;
  outline-offset: 3px;
  transition: outline-color 1.2s ease;
}

.learn-window-titlebar {
  background: #000000;
  color: #ffff00;
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 2px solid #ffd700;
  text-align: left;
}

.learn-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: #101418;
}

.learn-chip {
  border: 2px solid #ffd700;
  background: #000000;
  color: #ffff00;
  font: inherit;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.learn-chip:hover { background: #333300; }
.learn-chip:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.learn-chip.is-active {
  background: #ffff00;
  color: #000000;
}

.learn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 14px;
  background: #000000;
}

.learn-card {
  border: 1px solid #ffd700;
  border-radius: 8px;
  padding: 12px;
  text-align: left;
  background: #0a0d10;
  color: #f5f5f5;
}

.learn-card-tier {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000000;
  background: #ffd700;
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 8px;
}

.learn-card-title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  color: #ffff00;
}

.learn-card-desc {
  margin: 0 0 8px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #d8d8d8;
}

.learn-card-meta {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: #9fb3c8;
}

.learn-card-open {
  border: 2px solid #ffff00;
  background: #ffff00;
  color: #000000;
  font: inherit;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.learn-card-open:hover { background: #ffe14d; }
.learn-card-open:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

.learn-card-inapp {
  margin: 0;
  font-size: 0.85rem;
  font-style: italic;
  color: #9fb3c8;
}

/* ── Step 3: the lesson viewer ─────────────────────────────────────────── */
.learn-lesson {
  text-align: left;
  padding: 0 0 16px;
}

.learn-lesson-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #000000;
  border-bottom: 2px solid #ffd700;
  padding: 10px 14px;
}

.learn-lesson-course {
  color: #ffff00;
  font-weight: 700;
}

.learn-back {
  border: 2px solid #ffd700;
  background: transparent;
  color: #ffd700;
  font: inherit;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.learn-back:hover { background: #333300; }
.learn-back:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

.learn-lesson-title {
  color: #ffff00;
  margin: 14px 14px 8px;
}

.learn-lesson-para {
  margin: 0 14px 12px;
  line-height: 1.65;
  color: #f0f0f0;
  max-width: 65ch;
  white-space: pre-line;
}

.learn-kp-heading {
  color: #ffd700;
  margin: 14px 14px 6px;
}

.learn-kp-list {
  margin: 0 14px 14px;
  padding-left: 22px;
  color: #f0f0f0;
  line-height: 1.6;
}

.learn-quiz {
  margin: 16px 14px 0;
  border: 2px solid #ffd700;
  border-radius: 8px;
  padding: 14px;
  background: #0a0d10;
}

.learn-quiz-q {
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
}

.learn-quiz-choices {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.learn-quiz-choice {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #f0f0f0;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
}
.learn-quiz-choice:hover { background: #1a2008; }

.learn-quiz-check {
  border: 2px solid #ffff00;
  background: #ffff00;
  color: #000000;
  font: inherit;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}
.learn-quiz-check:hover { background: #ffe14d; }
.learn-quiz-check:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

.learn-quiz-verdict {
  margin: 10px 0 0;
  font-weight: 700;
}
.learn-quiz-verdict.is-correct { color: #7cfc00; }
.learn-quiz-verdict.is-wrong { color: #ffb347; }

/* ── Audience + calls to action ────────────────────────────────────────── */
#learn-audience {
  max-width: 60rem;
  margin: 3rem auto;
}
#learn-audience ul {
  line-height: 1.7;
}

.learn-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1.5rem;
}

/* The hidden attribute must always win over any display rule above —
   the Build #1480 sim-panel lesson (display overrides hidden). */
.learn-step[hidden] { display: none; }

@media (max-width: 700px) {
  .learn-cards { grid-template-columns: 1fr; }
  .learn-ctas { flex-direction: column; align-items: stretch; }
}