/* learn.html — the app's onboarding as a document page.
 *
 * The chapters and the diagram anatomy come from
 * lib/views/onboarding_view.dart; the look is the site's light paper theme, the
 * same choice app-shell.css made for play.html and puzzle.html. Boards are the
 * shared board.css — only the diagram-only overlays live here.
 */

/* --- diagrams ------------------------------------------------------------- */

.learn-diagram {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}

.learn-diagram .board-frame { max-width: 320px; }
.learn-board .square { cursor: default; }

.learn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.learn-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(180, 140, 60, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  color: #5b4c3a;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.learn-tab img { width: 22px; height: 22px; }
.learn-tab .learn-tab-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(180, 140, 60, 0.15);
  font-size: 0.8rem;
  font-weight: 700;
}

.learn-tab.is-active {
  color: #7a5a17;
  background: rgba(180, 140, 60, 0.18);
  border-color: rgba(180, 140, 60, 0.55);
  font-weight: 700;
}

.learn-panel {
  padding: 16px 18px;
  border: 1px solid rgba(180, 140, 60, 0.25);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}

.learn-panel h3 { margin: 0 0 8px; font-size: 1.05rem; }
.learn-panel p { margin: 0 0 12px; }

.learn-legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.learn-legend li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.learn-legend .dot { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.learn-legend .dot-slide { background: rgba(50, 170, 70, 0.6); }
.learn-legend .dot-leap { background: rgba(60, 110, 230, 0.55); }

/* Move hints: green for the sliding half, blue for the knight half — the same
 * two colours the app paints (0x9432AA46 / 0x8C3C6EE6). */
.learn-board .square.is-slide::after,
.learn-board .square.is-leap::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 50%;
}

.learn-board .square.is-slide::after { background: rgba(50, 170, 70, 0.58); }
.learn-board .square.is-leap::after { background: rgba(60, 110, 230, 0.55); }

/* Placement overlays: legal fill, illegal fill, and the "not yet" zone. */
.learn-board .square.is-good { box-shadow: inset 0 0 0 100vmax rgba(124, 184, 124, 0.6); }
.learn-board .square.is-bad { box-shadow: inset 0 0 0 100vmax rgba(201, 112, 112, 0.6); }
.learn-board .square.is-zone { box-shadow: inset 0 0 0 100vmax rgba(75, 150, 230, 0.25); }

/* --- castling strip ------------------------------------------------------- */

.castling-board {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-top: 14px;
  padding: 6px;
  border-radius: 8px;
  background: var(--board-frame);
  cursor: pointer;
}

.castling-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-radius: 2px;
  overflow: hidden;
}

.castling-strip .square { aspect-ratio: 1 / 1; }
.castling-strip .square.is-selected { box-shadow: inset 0 0 0 100vmax rgba(242, 201, 76, 0.38); }
.castling-strip .square.is-target { box-shadow: inset 0 0 0 100vmax rgba(67, 160, 71, 0.38); }

.castling-strip .square.is-hint::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: var(--board-move-hint);
}

/* The pieces are moved inside the strip by JS, so `left` is a plain percentage
 * of the eight columns — one column is 12.5%. */
.castling-piece {
  position: absolute;
  top: 0;
  width: 12.5%;
  aspect-ratio: 1 / 1;
  padding: 3px;
  box-sizing: border-box;
  transition: left 700ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* --- budget meter and badges ---------------------------------------------- */

.learn-meter {
  height: 8px;
  margin: 6px 0 14px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.learn-meter-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #4b96e6;
  transition: width 250ms ease;
}

.learn-meter-fill.is-full { background: #4f9e4f; }

.learn-meter-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 600;
}

.learn-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.learn-badge.is-info { color: #2c5f96; background: rgba(75, 150, 230, 0.16); }
.learn-badge.is-ok { color: #2f6b2f; background: rgba(79, 158, 79, 0.18); }
.learn-badge.is-bad { color: #963030; background: rgba(201, 112, 112, 0.18); }

.learn-step-actions { display: flex; gap: 10px; }
.learn-step-actions .button { flex: 1; }
.learn-step-actions .button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* --- chapter extras ------------------------------------------------------- */

.mode-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.mode-card {
  padding: 16px 18px;
  border: 1px solid rgba(180, 140, 60, 0.25);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}

.mode-card h3 { margin: 0 0 2px; font-size: 1.02rem; }
.mode-card .mode-subtitle { margin: 0 0 10px; font-size: 0.85rem; font-weight: 600; opacity: 0.75; }
.mode-card p { margin: 0 0 12px; font-size: 0.94rem; }
.mode-card .doc-chips { margin-top: 0; }
.mode-card .doc-chip { font-size: 0.78rem; padding: 4px 10px; }

.learn-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

@media (max-width: 900px) {
  .learn-diagram { grid-template-columns: minmax(0, 1fr); }
  .learn-diagram .board-frame { max-width: 420px; margin: 0 auto; }
}