/* LABEL: PILOT-READY
 * css/learn-mode.css — "Learn a Language" overlay (js/builder/learn/learn-mode.js).
 *
 * Static public/ CSS — NO Tailwind. All classes scoped with the `tl-`
 * prefix. Designed for disabled users: big, high-contrast targets,
 * >=44px (most >=64px) tap areas, visible focus, reduced-motion safe.
 *
 * 2026-06-25 (Luke): brand-aligned to the Tinky design tokens (base.css in the
 * builder; tokens.css on /use.html). Cold navy #2e5090 → --brand-blue, cold
 * blue-white fills → warm --surface/--surface-hover, radius/shadow/amber/ink
 * tokenized, and a warm ink scrim instead of the cold near-black. var(--token,
 * #fallback) keeps every rule correct even if the token sheet is missing.
 * Play/score stay GREEN and verified stays green — semantic, not brand drift.
 */

.tl-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(26, 26, 46, 0.72); /* warm ink scrim (--ink), not cold black */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tl-overlay[hidden] { display: none; }

.tl-panel {
  background: var(--surface, #ffffff);
  color: var(--ink, #1A1A2E);
  border-radius: var(--radius-lg, 18px);
  max-width: 600px;
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  padding: 22px;
  font-family: inherit;
  box-shadow: var(--shadow-xl, 0 16px 50px rgba(26, 26, 46, 0.16));
}

/* Header */
.tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tl-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}
.tl-close {
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--radius-md, 12px);
  border: 3px solid var(--brand-blue, #7C3AED);
  background: var(--surface, #ffffff);
  color: var(--brand-blue, #7C3AED);
  font-size: 1.4rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}
.tl-close:hover { background: var(--brand-bg-soft, #F3EEFF); }
.tl-close:focus,
.tl-close:focus-visible { outline: 4px solid var(--amber, #E8A838); outline-offset: 2px; }

/* Prompts + progress text */
.tl-prompt {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 8px 0 14px;
}
.tl-progress {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-blue, #7C3AED);
  margin: 0 0 10px;
}
.tl-empty {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 16px 0;
}

/* Tile grid — wraps; tiles are large, high-contrast hit targets. */
.tl-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 16px;
}

/* Tiles mirror the builder's communication tiles: warm white surface, brand-
   blue border, soft warm lift. */
.tl-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  min-width: 120px;
  flex: 1 1 140px;
  padding: 16px 14px;
  border-radius: var(--radius-lg, 16px);
  border: 3px solid var(--brand-blue, #7C3AED);
  background: var(--surface, #ffffff);
  color: var(--ink, #1A1A2E);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(26, 26, 46, 0.06));
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.tl-tile:hover { background: var(--surface-hover, #FAFAF5); }
.tl-tile:focus,
.tl-tile:focus-visible { outline: 4px solid var(--amber, #E8A838); outline-offset: 3px; }
.tl-tile:disabled { opacity: 0.55; cursor: default; }

.tl-flag,
.tl-emoji { font-size: 2.2rem; line-height: 1; }
.tl-emoji-big { font-size: 3.5rem; }
.tl-lang-name { font-size: 1.2rem; font-weight: 800; }
.tl-tile-label { font-size: 1.15rem; font-weight: 700; }

/* Review tile = amber accent (the "review everything due" action). */
.tl-review-tile { background: var(--amber-bg, #FFF8E1); border-color: var(--amber-dark, #C48A20); }
.tl-review-tile:hover { background: var(--amber-light, #F5C563); }

.tl-word-tile { min-height: 64px; font-size: 1.35rem; }

/* Multiple-choice prompt card (the thing to translate). */
.tl-prompt-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px;
  margin: 6px 0 16px;
  border-radius: var(--radius-lg, 18px);
  background: var(--brand-bg-soft, #F3EEFF);
  border: 3px solid var(--brand-blue-light, #DDD6FE);
}
.tl-prompt-l1 { font-size: 1.6rem; font-weight: 800; }

/* Play row (listen-and-tap). */
.tl-play-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 16px;
}
.tl-word { font-size: 1.3rem; font-weight: 800; }
.tl-audio-note { font-size: 1rem; font-weight: 600; color: #6b5300; }

/* Buttons (Play / Again / Done / Back). Primary = brand blue. */
.tl-btn {
  min-height: 52px;
  border-radius: var(--radius-md, 12px);
  border: 3px solid var(--brand-blue, #7C3AED);
  background: var(--brand-blue, #7C3AED);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 12px 22px;
  cursor: pointer;
  font-family: inherit;
}
.tl-btn:hover { background: var(--brand-blue-dark, #5B21B6); border-color: var(--brand-blue-dark, #5B21B6); }
.tl-btn:focus,
.tl-btn:focus-visible { outline: 4px solid var(--amber, #E8A838); outline-offset: 2px; }
.tl-btn.tl-secondary { background: var(--surface, #ffffff); color: var(--brand-blue, #7C3AED); }
.tl-btn.tl-secondary:hover { background: var(--brand-bg-soft, #F3EEFF); }
/* Play = green (go / listen) — semantic, kept. */
.tl-play { background: #1f7a4d; border-color: #1f7a4d; }
.tl-play:hover { background: #176039; border-color: #176039; }

.tl-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.tl-score {
  font-size: 1.8rem;
  font-weight: 900;
  color: #1f7a4d; /* success green — semantic */
  margin: 14px 0;
  text-align: center;
}

/* aria-live feedback region: kept in the visual flow, high contrast. */
.tl-live {
  min-height: 1.5rem;
  margin-top: 12px;
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  color: var(--ink, #1A1A2E);
}

/* Honor reduced-motion: no transitions/animations anywhere by default,
 * but make the intent explicit for any future additions. */
@media (prefers-reduced-motion: reduce) {
  .tl-overlay,
  .tl-panel,
  .tl-tile,
  .tl-btn {
    transition: none !important;
    animation: none !important;
  }
}

/* High-contrast preference: thicken borders for low-vision users. */
@media (prefers-contrast: more) {
  .tl-tile,
  .tl-btn,
  .tl-close { border-width: 4px; }
}

/* 2026-06-25 — verification badge + romanization (zh/ar) + multi-word tiles */
.tl-lang-badge { display:inline-block; margin-top:4px; padding:2px 8px; border-radius:999px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.02em; }
.tl-lang-badge.tl-verified { background:#E6F4EC; color:#1A4D2E; border:1px solid #1F7A4D; }
.tl-lang-badge.tl-beta { background:var(--amber-bg,#FFF8E1); color:#5C3A00; border:1px solid var(--amber,#E8A838); }
.tl-word-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.tl-word-main { font-size:1.25rem; font-weight:700; line-height:1.2; }
.tl-romanization { font-size:0.85rem; opacity:0.75; font-style:italic; }